@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

#mt-root {
  --navy:#0f1f3d; --blue:#1a3a6b; --accent:#2563eb; --accent-light:#eff6ff;
  --green:#059669; --green-light:#d1fae5; --orange:#d97706; --orange-light:#fef3c7;
  --red:#dc2626; --red-light:#fee2e2; --red-border:#fca5a5;
  --purple:#7c3aed; --purple-light:#ede9fe;
  --grey-50:#f8fafc; --grey-100:#f1f5f9; --grey-200:#e2e8f0; --grey-300:#cbd5e1;
  --grey-400:#94a3b8; --grey-500:#64748b; --grey-700:#334155;
  --shadow:0 1px 3px rgba(0,0,0,0.08); --shadow-md:0 4px 12px rgba(0,0,0,0.08); --shadow-lg:0 10px 25px rgba(0,0,0,0.12);
  --radius:10px; --radius-sm:6px;
  font-family:'DM Sans',sans-serif;
  color:var(--grey-700);
  min-height:100vh;
  background:var(--grey-50);
}
#mt-root *{box-sizing:border-box;}
#mt-root h1,#mt-root h2,#mt-root h3{margin:0;}

/* SCREENS */
#mt-root #setupScreen{min-height:100vh;display:none;align-items:center;justify-content:center;background:url(../img/bg-road.jpg) center/cover no-repeat;padding:20px;}
#mt-root #setupScreen.active{display:flex;}
#mt-root #loginScreen{min-height:100vh;display:none;align-items:center;justify-content:center;background:url(../img/bg-road.jpg) center/cover no-repeat;padding:20px;}
#mt-root #loginScreen.active{display:flex;}
#mt-root #forgotScreen{min-height:100vh;display:none;align-items:center;justify-content:center;background:url(../img/bg-road.jpg) center/cover no-repeat;padding:20px;}
#mt-root #forgotScreen.active{display:flex;}
#mt-root #changePassScreen{min-height:100vh;display:none;align-items:center;justify-content:center;background:url(../img/bg-road.jpg) center/cover no-repeat;padding:20px;}
#mt-root #changePassScreen.active{display:flex;}
#mt-root #appScreen{display:none;}
#mt-root #appScreen.active{display:block;}
#mt-root #adminScreen{display:none;}
#mt-root #adminScreen.active{display:block;}

/* AUTH CARDS */
#mt-root .auth-card{background:white;border-radius:16px;padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);}
#mt-root .login-logo{text-align:center;margin-bottom:28px;}
#mt-root .login-logo .icon{width:60px;height:60px;background:linear-gradient(135deg,var(--accent),var(--navy));border-radius:16px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:26px;}
#mt-root .login-logo h1{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:4px;}
#mt-root .login-logo p{font-size:13px;color:var(--grey-500);}

/* FIELDS */
#mt-root .field{margin-bottom:14px;}
#mt-root .field label{display:block;font-size:11px;font-weight:600;color:var(--grey-700);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px;}
#mt-root .field input,#mt-root .field select{width:100%;padding:11px 13px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:14px;color:var(--grey-700);background:white;outline:none;transition:border-color 0.15s;}
#mt-root .field input:focus,#mt-root .field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.1);}

/* BUTTONS */
#mt-root .btn-primary{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),#1d4ed8);color:white;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:opacity 0.15s,transform 0.1s;margin-top:6px;}
#mt-root .btn-primary:hover{opacity:0.92;transform:translateY(-1px);}
#mt-root .login-divider{text-align:center;margin:16px 0;font-size:12px;color:var(--grey-400);}
#mt-root .btn-secondary{background:none;border:1.5px solid var(--grey-200);color:var(--grey-500);padding:9px;border-radius:var(--radius-sm);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;width:100%;transition:all 0.15s;}
#mt-root .btn-secondary:hover{border-color:var(--purple);color:var(--purple);}
#mt-root .back-link{display:block;text-align:center;margin-top:14px;font-size:13px;color:var(--accent);cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;text-decoration:underline;}
#mt-root .back-link:hover{color:var(--navy);}
#mt-root .temp-notice{background:var(--orange-light);border:1.5px solid #fcd34d;border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:var(--orange);font-weight:500;margin-bottom:14px;}

/* TOPBAR */
#mt-root .topbar{background:linear-gradient(135deg,var(--navy),var(--blue));color:white;padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md);}
#mt-root .topbar-left{display:flex;align-items:center;gap:10px;}
#mt-root .topbar-logo{width:32px;height:32px;background:rgba(255,255,255,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
#mt-root .topbar-title{font-size:15px;font-weight:700;}
#mt-root .topbar-right{display:flex;align-items:center;gap:10px;}
#mt-root .driver-badge{background:rgba(255,255,255,0.15);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:500;}
#mt-root .btn-sm{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:white;padding:5px 12px;border-radius:20px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.15s;}
#mt-root .btn-sm:hover{background:rgba(255,255,255,0.22);}

/* MAIN */
#mt-root .main-content{max-width:none;width:100%;margin:0;padding:24px 32px;box-sizing:border-box;}

/* MONTH NAV */
#mt-root .month-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px;}
#mt-root .month-nav{display:flex;align-items:center;gap:10px;}
#mt-root .month-title{font-size:21px;font-weight:700;color:var(--navy);min-width:190px;text-align:center;}
#mt-root .btn-nav{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--grey-200);background:white;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;color:var(--grey-700);}
#mt-root .btn-nav:hover{border-color:var(--accent);color:var(--accent);}
#mt-root .status-pill{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;}
#mt-root .status-draft{background:var(--orange-light);color:var(--orange);}
#mt-root .status-submitted{background:var(--green-light);color:var(--green);}

/* SUMMARY CARDS */
#mt-root .summary-cards{display:grid;gap:14px;margin-bottom:18px;}
#mt-root .summary-card{background:white;border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow);border-left:4px solid var(--grey-200);}
#mt-root .summary-card.total{border-left-color:var(--accent);}
#mt-root .summary-card.business{border-left-color:var(--green);}
#mt-root .summary-card.personal{border-left-color:var(--orange);}
#mt-root .summary-card.afr-value{border-left-color:var(--purple);}
#mt-root .summary-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--grey-500);margin-bottom:6px;}
#mt-root .summary-top-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
#mt-root .summary-value{font-family:'DM Mono',monospace;font-size:26px;font-weight:600;color:var(--navy);}
#mt-root .summary-value-lg{font-size:32px;font-weight:700;}
#mt-root .summary-inline-cost{font-family:'DM Mono',monospace;font-size:20px;font-weight:700;color:var(--green);}
#mt-root .summary-unit{font-size:11px;color:var(--grey-400);margin-top:3px;}
#mt-root .summary-cost{font-family:"DM Mono",monospace;font-size:15px;font-weight:700;color:var(--green);margin-top:6px;min-height:20px;border-top:1px solid var(--grey-100);padding-top:5px;}
#mt-root .summary-breakdown{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--grey-100);}
#mt-root .breakdown-item{font-size:12px;font-weight:600;color:var(--grey-600);background:var(--grey-50);padding:3px 10px;border-radius:20px;border:1px solid var(--grey-200);font-family:'DM Mono',monospace;}

/* AFR BANNER */
#mt-root .afr-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:white;border-radius:var(--radius);padding:10px 16px;box-shadow:var(--shadow);margin-bottom:14px;border-left:3px solid var(--purple);}
#mt-root .afr-banner-left{display:flex;align-items:center;gap:10px;}
#mt-root .afr-banner-text{font-size:12px;color:var(--grey-700);}
#mt-root .afr-banner-text strong{color:var(--purple);}
#mt-root .afr-banner-right{display:flex;align-items:center;gap:8px;}
#mt-root .afr-rate-pill{background:var(--purple-light);color:var(--purple);font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;font-family:'DM Mono',monospace;}
#mt-root .afr-status{font-size:11px;color:var(--grey-400);}
#mt-root .afr-status.fresh{color:var(--green);}
#mt-root .afr-status.stale{color:var(--orange);}
#mt-root .afr-status.offline{color:var(--grey-400);}
#mt-root .afr-setup-note{font-size:11px;color:var(--orange);background:var(--orange-light);border-radius:var(--radius-sm);padding:4px 10px;margin-bottom:14px;}

/* TABLE */
#mt-root .table-wrap{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;margin-bottom:18px;width:100%;}
#mt-root .table-head{display:grid;grid-template-columns:1.2fr 0.8fr 0.8fr 0.6fr 0.9fr 0.8fr 0.5fr;background:var(--navy);color:white;padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;gap:8px;}
#mt-root .table-head span{text-align:right;}
#mt-root .table-head span:first-child{text-align:left;}
#mt-root .table-head span:last-child{text-align:center;}
#mt-root .table-row{display:grid;grid-template-columns:1.2fr 0.8fr 0.8fr 0.6fr 0.9fr 0.8fr 0.5fr;padding:5px 16px;gap:8px;align-items:center;border-bottom:1px solid var(--grey-100);transition:background 0.1s;}
#mt-root .table-row:last-child{border-bottom:none;}
/* Electric full: 10 cols = date | odoStart | odoEnd | total | bizPub | bizHom | perPub | perHom | tally | save */
#mt-root.electric-full .table-head,
#mt-root.electric-full .table-row{grid-template-columns:1.2fr 0.85fr 0.85fr 0.65fr 0.95fr 0.95fr 0.95fr 0.95fr 0.7fr 0.55fr;}
#mt-root.electric-full .table-wrap{overflow-x:auto;}
#mt-root .elec-tally-wrap{display:flex;align-items:center;justify-content:center;}
#mt-root .table-head .biz-col-header{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2;text-align:right;}
#mt-root .table-head .biz-col-header small{display:block;font-size:9px;opacity:0.8;font-weight:500;color:#93c5fd;}
#mt-root .table-row:hover{background:var(--grey-50);}
#mt-root .table-row.weekend{background:#fafbff;}
#mt-root .table-row.has-data{background:#f0f7ff;}
#mt-root .table-row.has-data:hover{background:#e8f2ff;}
#mt-root .table-row.odo-error{background:var(--red-light)!important;border-left:3px solid var(--red);}
#mt-root .table-row.odo-error .start-input{border-color:var(--red)!important;background:#fff5f5;}
#mt-root .input-wrap{position:relative;display:flex;align-items:center;min-width:0;}
#mt-root .input-wrap .odo-x{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--red);font-size:14px;font-weight:700;pointer-events:none;line-height:1;}
#mt-root .table-row.odo-error .input-wrap .odo-x{display:block;}
#mt-root .table-row.odo-error .start-input{padding-right:22px;}
#mt-root .day-cell{font-size:13px;font-weight:600;color:var(--navy);}
#mt-root .day-name{font-size:10px;font-weight:400;color:var(--grey-500);display:block;}
#mt-root .table-input{width:100%;min-width:0;padding:5px 6px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-family:'DM Mono',monospace;font-size:12px;text-align:right;color:var(--grey-700);background:white;outline:none;transition:border-color 0.15s;}
#mt-root .table-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,0.1);}
#mt-root .table-input:disabled{background:var(--grey-100);color:var(--grey-400);cursor:not-allowed;}
#mt-root .calc-cell{font-family:'DM Mono',monospace;font-size:12px;text-align:right;color:var(--grey-400);padding:5px 4px;min-width:0;}
#mt-root .calc-cell.total-miles{color:var(--accent);font-weight:500;}
#mt-root .calc-cell.personal-miles{color:var(--orange);font-weight:500;}
#mt-root .calc-cell.negative{color:var(--red);font-weight:600;}
#mt-root .save-btn{padding:5px 8px;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;width:100%;min-width:0;}
#mt-root .save-btn:hover{background:#1d4ed8;}
#mt-root .save-btn.saved{background:var(--green);}
#mt-root .save-btn:disabled{background:var(--grey-200);color:var(--grey-400);cursor:not-allowed;}

/* ELECTRIC TALLY INDICATOR */
#mt-root .elec-tally{font-size:10px;font-weight:700;font-family:'DM Sans',sans-serif;text-align:center;padding:3px 5px;border-radius:var(--radius-sm);white-space:nowrap;line-height:1.3;}
#mt-root .elec-tally.tally-ok{background:var(--green-light);color:var(--green);}
#mt-root .elec-tally.tally-under{background:#fef9c3;color:#a16207;}
#mt-root .elec-tally.tally-over{background:var(--red-light);color:var(--red);}

/* ODO ERROR PANEL */
#mt-root .odo-errors-panel{background:var(--red-light);border:1.5px solid var(--red-border);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:none;}
#mt-root .odo-errors-panel.show{display:block;}
#mt-root .odo-errors-panel-title{font-size:13px;font-weight:700;color:var(--red);margin-bottom:6px;}
#mt-root .odo-errors-panel ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px;}
#mt-root .odo-errors-panel ul li{font-size:12px;color:var(--red);display:flex;align-items:center;gap:6px;}
#mt-root .odo-errors-panel ul li::before{content:"✕";font-weight:700;}

/* PASSWORD STRENGTH */
#mt-root .pass-wrap{position:relative;}
#mt-root .pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:14px;color:var(--grey-400);padding:2px;}
#mt-root .strength-bar{height:4px;border-radius:2px;margin-top:5px;background:var(--grey-200);overflow:hidden;}
#mt-root .strength-fill{height:100%;border-radius:2px;transition:width 0.3s,background 0.3s;width:0;}
#mt-root .strength-fill.s1{width:25%;background:var(--red);}
#mt-root .strength-fill.s2{width:50%;background:var(--orange);}
#mt-root .strength-fill.s3{width:75%;background:#eab308;}
#mt-root .strength-fill.s4{width:100%;background:var(--green);}
#mt-root .strength-label{font-size:11px;margin-top:3px;font-weight:600;}
#mt-root .strength-label.s1{color:var(--red);}
#mt-root .strength-label.s2{color:var(--orange);}
#mt-root .strength-label.s3{color:#a16207;}
#mt-root .strength-label.s4{color:var(--green);}

/* BANNERS */
#mt-root .banner{border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;font-weight:500;}
#mt-root .banner-green{background:var(--green-light);border:1.5px solid #6ee7b7;color:var(--green);}
#mt-root .banner-red{background:var(--red-light);border:1.5px solid var(--red-border);color:var(--red);}

/* ACTIONS */
#mt-root .actions-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
#mt-root .actions-left{display:flex;gap:10px;flex-wrap:wrap;}
#mt-root .btn-export{padding:10px 18px;background:white;color:var(--grey-700);border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;}
#mt-root .btn-export:hover{border-color:var(--accent);color:var(--accent);}
#mt-root .btn-submit{padding:11px 26px;background:linear-gradient(135deg,var(--green),#047857);color:white;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;box-shadow:var(--shadow);}
#mt-root .btn-submit:hover{opacity:0.9;transform:translateY(-1px);}
#mt-root .btn-submit:disabled{background:var(--grey-300);color:var(--grey-500);cursor:not-allowed;transform:none;box-shadow:none;}

/* UPLOAD STATUS */
#mt-root .upload-status{display:none;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;}
#mt-root .upload-status.show{display:flex;}
#mt-root .upload-status.uploading{background:var(--accent-light);color:var(--accent);}
#mt-root .upload-status.ok{background:var(--green-light);color:var(--green);}
#mt-root .upload-status.fail{background:var(--red-light);color:var(--red);}

/* ADMIN */
#mt-root .admin-topbar{background:linear-gradient(135deg,#3b0764,var(--purple));color:white;padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md);}
#mt-root .admin-content{max-width:980px;margin:0 auto;padding:28px 16px;}
#mt-root .admin-title{font-size:24px;font-weight:700;color:var(--navy);margin-bottom:6px;}
#mt-root .admin-sub{font-size:14px;color:var(--grey-500);margin-bottom:28px;}
#mt-root .admin-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--grey-100);padding:4px;border-radius:var(--radius-sm);width:fit-content;}
#mt-root .admin-tab{padding:8px 20px;border-radius:var(--radius-sm);border:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.15s;background:none;color:var(--grey-500);}
#mt-root .admin-tab.active{background:white;color:var(--navy);box-shadow:var(--shadow);}
#mt-root .admin-panel{display:none;}
#mt-root .admin-panel.active{display:block;}

/* USER TABLE */
#mt-root .user-table-wrap{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px;width:100%;}
#mt-root .user-table{width:100%;border-collapse:collapse;table-layout:fixed;}
#mt-root .user-table th{background:var(--navy);color:white;padding:8px 8px;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#mt-root .user-table td{padding:7px 8px;border-bottom:1px solid var(--grey-100);font-size:12px;vertical-align:middle;overflow:hidden;}
#mt-root .user-table select.input-sm{min-width:0;width:100%;}
#mt-root .user-table tr:last-child td{border-bottom:none;}
#mt-root .user-table tr.inactive td{opacity:0.45;}
#mt-root .status-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:all 0.15s;white-space:nowrap;min-width:0;justify-content:center;}
#mt-root .status-toggle.live{background:var(--green-light);color:var(--green);border-color:#6ee7b7;}
#mt-root .status-toggle.live:hover{background:#bbf7d0;border-color:var(--green);}
#mt-root .status-toggle.inactive{background:var(--red-light);color:var(--red);border-color:var(--red-border);}
#mt-root .status-toggle.inactive:hover{background:#fecaca;border-color:var(--red);}
#mt-root .status-toggle .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
#mt-root .status-toggle.live .dot{background:var(--green);}
#mt-root .status-toggle.inactive .dot{background:var(--red);}
#mt-root .tbl-btn{padding:6px 12px;border-radius:var(--radius-sm);border:none;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
#mt-root .tbl-btn-save{background:var(--accent);color:white;}
#mt-root .tbl-btn-save:hover{background:#1d4ed8;}
#mt-root .tbl-btn-del{background:var(--red-light);color:var(--red);}
#mt-root .tbl-btn-del:hover{background:var(--red);color:white;}

/* ADD USER */
#mt-root .add-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-top:20px;}
#mt-root .add-card h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:16px;}
#mt-root .add-form{display:grid;grid-template-columns:1fr 1.5fr 0.8fr 1.1fr 0.9fr 0.9fr 0.7fr 1.1fr auto;gap:10px;align-items:end;flex-wrap:wrap;}
#mt-root .form-field label{display:block;font-size:11px;font-weight:600;color:var(--grey-500);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px;}
#mt-root .input-sm{padding:8px 10px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;color:var(--grey-700);outline:none;transition:border-color 0.15s;width:100%;background:white;}
#mt-root .input-sm:focus{border-color:var(--accent);}
#mt-root .btn-add{padding:9px 20px;background:var(--accent);color:white;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;height:38px;}
#mt-root .btn-add:hover{opacity:0.88;}

/* BULK UPLOAD */
#mt-root .bulk-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-top:20px;}
#mt-root .bulk-card h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px;}
#mt-root .bulk-card .sub-text{font-size:13px;color:var(--grey-500);margin-bottom:16px;}
#mt-root .drop-zone{border:2px dashed var(--grey-300);border-radius:var(--radius);padding:32px 20px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--grey-50);position:relative;}
#mt-root .drop-zone:hover,#mt-root .drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light);}
#mt-root .drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
#mt-root .drop-zone .dz-icon{font-size:32px;margin-bottom:8px;}
#mt-root .drop-zone .dz-label{font-size:14px;font-weight:600;color:var(--grey-700);margin-bottom:4px;}
#mt-root .drop-zone .dz-hint{font-size:12px;color:var(--grey-400);}
#mt-root .bulk-preview{margin-top:16px;display:none;}
#mt-root .bulk-preview-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:8px;}
#mt-root .bulk-table-wrap{max-height:280px;overflow-y:auto;border-radius:var(--radius-sm);border:1px solid var(--grey-200);}
#mt-root .bulk-table{width:100%;border-collapse:collapse;font-size:12px;}
#mt-root .bulk-table th{background:var(--navy);color:white;padding:7px 10px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;position:sticky;top:0;}
#mt-root .bulk-table td{padding:7px 10px;border-bottom:1px solid var(--grey-100);color:var(--grey-700);}
#mt-root .bulk-table tr.row-ok .row-status{color:var(--green);font-weight:700;}
#mt-root .bulk-table tr.row-skip .row-status{color:var(--orange);font-weight:700;}
#mt-root .bulk-table tr.row-skip td{color:var(--grey-400);}
#mt-root .bulk-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap;}
#mt-root .bulk-summary{font-size:13px;color:var(--grey-500);flex:1;}
#mt-root .bulk-summary strong{color:var(--navy);}
#mt-root .btn-bulk-import{padding:10px 22px;background:linear-gradient(135deg,var(--green),#047857);color:white;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;}
#mt-root .btn-bulk-import:hover{opacity:0.9;}
#mt-root .btn-bulk-import:disabled{background:var(--grey-300);color:var(--grey-500);cursor:not-allowed;}
#mt-root .btn-bulk-clear{padding:10px 16px;background:white;color:var(--grey-500);border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;}
#mt-root .btn-bulk-clear:hover{border-color:var(--red);color:var(--red);}

/* CONFIG */
#mt-root .config-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:20px;}
#mt-root .config-card h3{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:16px;}
#mt-root .config-field{margin-bottom:12px;}
#mt-root .config-field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--grey-500);margin-bottom:4px;}
#mt-root .config-note{font-size:11px;color:var(--grey-400);margin-top:3px;line-height:1.5;}
#mt-root .btn-save-config{padding:9px 18px;background:var(--green);color:white;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:opacity 0.15s;margin-top:4px;}
#mt-root .btn-save-config:hover{opacity:0.88;}
#mt-root .config-status{margin-top:10px;padding:8px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;}
#mt-root .config-ok{background:var(--green-light);color:var(--green);}
#mt-root .config-missing{background:var(--orange-light);color:var(--orange);}

/* SUBMISSIONS */
#mt-root .sub-table{width:100%;border-collapse:collapse;font-size:13px;}
#mt-root .sub-table th{background:var(--grey-100);padding:8px 10px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--grey-500);}
#mt-root .sub-table td{padding:8px 10px;border-bottom:1px solid var(--grey-100);color:var(--grey-700);}
#mt-root .sub-table tr:last-child td{border-bottom:none;}
#mt-root .btn-unlock{padding:4px 10px;border-radius:var(--radius-sm);border:1.5px solid var(--orange);background:var(--orange-light);color:var(--orange);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
#mt-root .btn-unlock:hover{background:var(--orange);color:white;}
#mt-root .sub-pill{padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;}
#mt-root .sub-pill.ok{background:var(--green-light);color:var(--green);}
#mt-root .sub-pill.pending{background:var(--orange-light);color:var(--orange);}
#mt-root .sub-pill.error{background:var(--red-light);color:var(--red);}

/* TOAST */
#mt-root .toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:var(--radius);font-size:14px;font-weight:500;color:white;box-shadow:var(--shadow-lg);z-index:9999;transform:translateY(80px);opacity:0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;max-width:340px;}
#mt-root .toast.show{transform:translateY(0);opacity:1;}
#mt-root .toast.success{background:var(--green);}
#mt-root .toast.info{background:var(--accent);}
#mt-root .toast.warning{background:var(--orange);}
#mt-root .toast.error{background:var(--red);}

/* PA STEPS */
#mt-root .pa-steps{list-style:none;counter-reset:steps;padding:0;}
#mt-root .pa-steps li{counter-increment:steps;display:flex;gap:12px;margin-bottom:10px;font-size:13px;color:var(--grey-700);line-height:1.6;}
#mt-root .pa-steps li::before{content:counter(steps);min-width:22px;height:22px;background:var(--accent);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px;}
#mt-root .code-inline{background:var(--grey-100);padding:2px 7px;border-radius:4px;font-family:'DM Mono',monospace;font-size:12px;color:var(--purple);}

@media(max-width:700px){
  #mt-root .table-head,#mt-root .table-row{grid-template-columns:90px 72px 72px 52px 72px 55px 40px;font-size:11px;padding:5px 8px;gap:4px;}
  #mt-root .summary-cards{grid-template-columns:repeat(2,1fr)!important;}
  #mt-root .month-title{font-size:17px;min-width:140px;}
  #mt-root .table-input,#mt-root .calc-cell{font-size:11px;padding:5px 3px;}
  #mt-root .add-form{grid-template-columns:1fr!important;}
}

.admin-table select{min-width:0;} .wrap{max-width:100%!important;}


/* Role and engine selects fill their cell, no fixed min-width */
select[name="role"], .role-select{ min-width:0 !important; }

/* No fixed min-width on any table column */
table th:nth-child(5),
table td:nth-child(5){ min-width:0 !important; }



/* Wider admin panel layout */
#adminScreen .admin-shell,
#adminScreen .admin-container,
#adminScreen .container,
#adminScreen .content-wrap,
#adminScreen .content,
#adminScreen .page-wrap{
    max-width: 1500px !important;
    width: min(96vw, 1500px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#adminScreen .admin-panel,
#adminScreen .admin-card,
#adminScreen .tabs,
#adminScreen .card,
#adminScreen .table-wrap,
#adminScreen .bulk-wrap,
#adminScreen .section-card{
    width: 100% !important;
    max-width: none !important;
}

#adminScreen .users-table,
#adminScreen table{
    width: 100% !important;
    table-layout: fixed !important;
}

/* Roomier columns so values are visible */
#adminScreen th,
#adminScreen td{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#adminScreen th:nth-child(1), #adminScreen td:nth-child(1){ min-width: 0 !important; }
#adminScreen th:nth-child(2), #adminScreen td:nth-child(2){ min-width: 0 !important; }
#adminScreen th:nth-child(3), #adminScreen td:nth-child(3){ min-width: 0 !important; }
#adminScreen th:nth-child(4), #adminScreen td:nth-child(4){ min-width: 0 !important; }
#adminScreen th:nth-child(5), #adminScreen td:nth-child(5){ min-width: 0 !important; }
#adminScreen th:nth-child(6), #adminScreen td:nth-child(6){ min-width: 0 !important; }
#adminScreen th:nth-child(7), #adminScreen td:nth-child(7){ min-width: 0 !important; }
#adminScreen th:nth-child(8), #adminScreen td:nth-child(8){ min-width: 0 !important; }
#adminScreen th:nth-child(9), #adminScreen td:nth-child(9){ min-width: 0 !important; }

/* Larger controls in admin users table */
#adminScreen input,
#adminScreen select,
#adminScreen button{
    max-width: 100%;
}

#adminScreen select[name="role"],
#adminScreen .role-select{ min-width: 0 !important; }

#adminScreen select[name="fuel_type"],
#adminScreen .fuel-select{ min-width: 0 !important; }

#adminScreen select[name="engine_size"],
#adminScreen .engine-select{ min-width: 0 !important; }

/* Make admin user cards fill the available width */
#adminScreen .users-grid,
#adminScreen .users-list,
#adminScreen .admin-users{
    width: 100% !important;
    max-width: none !important;
}



/* Force admin screen to break out of narrow theme content area */
#mt-root #adminScreen{
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
}

#mt-root #adminScreen .admin-topbar{
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
}

#mt-root #adminScreen .admin-content{
    width: min(1700px, 96vw) !important;
    max-width: min(1700px, 96vw) !important;
    margin: 0 auto !important;
    padding: 28px 24px !important;
}

#mt-root #adminScreen .admin-tabs,
#mt-root #adminScreen .user-table-wrap,
#mt-root #adminScreen .card,
#mt-root #adminScreen .bulk-upload-card,
#mt-root #adminScreen .config-grid{
    width: 100% !important;
    max-width: 100% !important;
}

#mt-root #adminScreen .user-table{
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

#mt-root #adminScreen .user-table-wrap{
    overflow-x: hidden !important;
    width: 100% !important;
}

#mt-root #adminScreen .user-table td,
#mt-root #adminScreen .user-table th{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Actions column must NOT clip its buttons */
#mt-root #adminScreen .user-table td:nth-child(10),
#mt-root #adminScreen .user-table th:nth-child(10){
    overflow: visible !important;
    text-overflow: clip !important;
}

/* No min-widths — table uses fixed layout with % widths only */
#mt-root #adminScreen .user-table td,
#mt-root #adminScreen .user-table th{ min-width: 0 !important; }

#mt-root #adminScreen .user-table select,
#mt-root #adminScreen .user-table input{
    min-width: 0 !important;
    width: 100% !important;
}


/* TRUE full-page admin layout */
html body #mt-root,
html body #mt-root #adminScreen{
    width: 100% !important;
    max-width: none !important;
}

html body #mt-root #adminScreen{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #mt-root #adminScreen .admin-topbar{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

html body #mt-root #adminScreen .admin-content{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 24px 40px !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen .admin-title,
html body #mt-root #adminScreen .admin-sub{
    margin-left: 0 !important;
}

html body #mt-root #adminScreen .admin-tabs{
    width: fit-content !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
}

html body #mt-root #adminScreen .admin-panel,
html body #mt-root #adminScreen .user-table-wrap,
html body #mt-root #adminScreen .card,
html body #mt-root #adminScreen .bulk-upload-card,
html body #mt-root #adminScreen .config-grid{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen .user-table{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: fixed !important;
}

html body #mt-root #adminScreen .user-table-wrap{
    overflow-x: hidden !important;
    width: 100% !important;
}

html body #mt-root #adminScreen .user-table td,
html body #mt-root #adminScreen .user-table th{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Give the admin sections a proper full-width feel */
html body #mt-root #adminScreen #tab-users,
html body #mt-root #adminScreen #tab-config,
html body #mt-root #adminScreen #tab-submissions,
html body #mt-root #adminScreen #tab-setup{
    width: 100% !important;
    max-width: none !important;
}


/* HARD FULL WIDTH ADMIN FIX */
#mt-root .admin-content{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:28px 32px !important;
}

#mt-root #adminScreen{
    width:100% !important;
    max-width:none !important;
}

#mt-root #adminScreen .admin-panel,
#mt-root #adminScreen .user-table-wrap,
#mt-root #adminScreen .card{
    width:100% !important;
    max-width:none !important;
}

#mt-root #adminScreen .user-table{
    width:100% !important;
    table-layout:auto !important;
}


/* Fill admin page and make boxes use the available width */
#mt-root .admin-content{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 32px 40px !important;
    box-sizing: border-box !important;
}

#mt-root .user-table-wrap,
#mt-root .card,
#mt-root .admin-panel{
    width: 100% !important;
    max-width: none !important;
}

/* Let the table stretch and size columns sensibly */
#mt-root .user-table{
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

#mt-root .user-table th,
#mt-root .user-table td{
    box-sizing: border-box !important;
    vertical-align: middle !important;
    padding: 10px 12px !important;
}

/* Make inputs and selects fill their cells */
#mt-root .user-table input,
#mt-root .user-table select{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 8px 10px !important;
}

/* Column widths — 9 cols: Name | Email | Reg | Fuel | Engine | Role | Password | Status | Actions */
#mt-root .user-table th:nth-child(1),
#mt-root .user-table td:nth-child(1){ width: 12% !important; }   /* Name */

#mt-root .user-table th:nth-child(2),
#mt-root .user-table td:nth-child(2){ width: 15% !important; }   /* Email */

#mt-root .user-table th:nth-child(3),
#mt-root .user-table td:nth-child(3){ width:  8% !important; }   /* Reg */

#mt-root .user-table th:nth-child(4),
#mt-root .user-table td:nth-child(4){ width: 14% !important; }   /* Fuel Type */

#mt-root .user-table th:nth-child(5),
#mt-root .user-table td:nth-child(5){ width: 10% !important; }   /* Engine Size */

#mt-root .user-table th:nth-child(6),
#mt-root .user-table td:nth-child(6){ width:  7% !important; }   /* Role */

#mt-root .user-table th:nth-child(7),
#mt-root .user-table td:nth-child(7){ width: 12% !important; }   /* Password */

#mt-root .user-table th:nth-child(8),
#mt-root .user-table td:nth-child(8){ width:  8% !important; }   /* Status */

#mt-root .user-table th:nth-child(9),
#mt-root .user-table td:nth-child(9){ width: 14% !important; overflow:visible !important; }   /* Actions */

/* All cells in user table fill their column width */
#mt-root .user-table td > *{
    width: 100% !important;
    max-width: none !important;
}
/* Actions cell buttons stay auto width, not stretched */
#mt-root .user-table td:nth-child(9) > *{ width:auto !important; }

/* New user section: spread fields out properly */
#mt-root .card input,
#mt-root .card select{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#mt-root .card .grid,
#mt-root .card .form-grid{
    width: 100% !important;
    max-width: none !important;
}


/* HARD BREAKOUT + BIGGER ADMIN FIELDS */
html body #mt-root{
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #mt-root #adminScreen .admin-topbar{
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

html body #mt-root #adminScreen .admin-content{
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 24px !important;
    padding: 24px 0 40px !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen .user-table-wrap,
html body #mt-root #adminScreen .card,
html body #mt-root #adminScreen .admin-panel,
html body #mt-root #adminScreen .bulk-upload-card{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen .user-table{
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
}

html body #mt-root #adminScreen .user-table th,
html body #mt-root #adminScreen .user-table td{
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* wider columns — 9 cols: Name | Email | Reg | Fuel | Engine | Role | Password | Status | Actions */
html body #mt-root #adminScreen .user-table th:nth-child(1),
html body #mt-root #adminScreen .user-table td:nth-child(1){ width: 12% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(2),
html body #mt-root #adminScreen .user-table td:nth-child(2){ width: 15% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(3),
html body #mt-root #adminScreen .user-table td:nth-child(3){ width:  8% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(4),
html body #mt-root #adminScreen .user-table td:nth-child(4){ width: 14% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(5),
html body #mt-root #adminScreen .user-table td:nth-child(5){ width: 10% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(6),
html body #mt-root #adminScreen .user-table td:nth-child(6){ width:  7% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(7),
html body #mt-root #adminScreen .user-table td:nth-child(7){ width: 12% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(8),
html body #mt-root #adminScreen .user-table td:nth-child(8){ width:  8% !important; min-width:0 !important; }
html body #mt-root #adminScreen .user-table th:nth-child(9),
html body #mt-root #adminScreen .user-table td:nth-child(9){ width: 14% !important; min-width:0 !important; overflow:visible !important; white-space:nowrap !important; }

/* make controls fill the cells */
html body #mt-root #adminScreen .input-sm,
html body #mt-root #adminScreen .user-table input,
html body #mt-root #adminScreen .user-table select,
html body #mt-root #adminScreen #tab-users input,
html body #mt-root #adminScreen #tab-users select{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

html body #mt-root #adminScreen #tab-users .card input,
html body #mt-root #adminScreen #tab-users .card select{
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
    font-size: 13px !important;
    padding: 7px 10px !important;
}

/* ensure add user row spans the width too */
html body #mt-root #adminScreen #tab-users .card{
    width: 100% !important;
}

/* tame inner max widths */
html body #mt-root #adminScreen *{
    max-width: none;
}

/* ─── FULL WIDTH APP SCREEN ────────────────────────────────── */
html body #mt-root #appScreen{
    width:100% !important;
    max-width:none !important;
}
html body #mt-root #appScreen .topbar{
    width:100% !important;
    max-width:none !important;
}
html body #mt-root #appScreen .main-content{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    padding:24px 32px 40px !important;
    box-sizing:border-box !important;
}
html body #mt-root #appScreen .table-wrap,
html body #mt-root #appScreen .summary-cards,
html body #mt-root #appScreen .afr-banner,
html body #mt-root #appScreen .actions-bar{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/* Electric-other (home only): 7 cols = date | odoStart | odoEnd | total | bizHom | tally | save */
#mt-root.electric-other .table-head,
#mt-root.electric-other .table-row{grid-template-columns:1.2fr 0.8fr 0.8fr 0.6fr 0.9fr 0.8fr 0.5fr;}

/* Larger business card */
#mt-root .summary-card.business{padding:20px 22px;}

/* ─── PER MILES COLUMN VISUAL SEPARATOR ──────────────────── */
#mt-root.electric-full .table-head .biz-col-header:nth-of-type(3),
#mt-root.electric-full .table-row .per-input:first-of-type{
  border-left:2px solid rgba(255,255,255,0.15);
  padding-left:10px;
}
#mt-root.electric-full .table-row .per-input{
  background:#fafbff;
  border-color:#c7d2fe;
}
#mt-root.electric-full .table-row .per-input:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 2px rgba(124,58,237,0.1);
}

/* ─── PERSONAL CAR TABLE ────────────────────────────────────── */
#mt-root .personal-car-table { overflow: visible; }
#mt-root .personal-car-head {
  display: grid;
  grid-template-columns: 160px 1fr 2fr 120px 140px;
  background: var(--navy);
  color: white;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  gap: 8px;
  align-items: center;
}
#mt-root .personal-car-row {
  display: grid;
  grid-template-columns: 160px 1fr 2fr 120px 140px;
  padding: 5px 16px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--grey-100);
  transition: background 0.1s;
}
#mt-root .personal-car-row:hover { background: var(--grey-50); }
#mt-root .personal-car-row.saved-entry { background: #f0f7ff; }
#mt-root .personal-car-row.saved-entry:hover { background: #e8f2ff; }
#mt-root .pc-reimb-cell { font-family: 'DM Mono', monospace; font-size: 13px; text-align: right; padding: 6px 4px; color: var(--green); font-weight: 600; }
#mt-root .pc-actions-cell { display: flex; align-items: center; gap: 4px; }
#mt-root .pc-date-cell input[type="date"] { width: 100%; font-size: 13px; }
#mt-root .personal-car-add-row {
  padding: 10px 16px;
  background: var(--grey-50);
  border-top: 1px solid var(--grey-100);
}
#mt-root .btn-add-entry {
  padding: 7px 16px;
  background: white;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
#mt-root .btn-add-entry:hover { background: var(--accent-light); }
#mt-root .personal-summary-bar {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-top: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--grey-700);
}
#mt-root .personal-total-reimb {
  margin-left: auto;
  font-size: 15px;
  color: var(--green);
  font-family: 'DM Mono', monospace;
}

/* ─── SETTINGS SUBTABS ───────────────────────────────────────── */
#mt-root .settings-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--grey-100);
  padding: 4px;
  border-radius: var(--radius-sm);
  width: fit-content;
}
#mt-root .settings-subtab {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  color: var(--grey-500);
}
#mt-root .settings-subtab.active {
  background: white;
  color: var(--navy);
  box-shadow: var(--shadow);
}
#mt-root .settings-subpanel { display: none; }
#mt-root .settings-subpanel.active { display: block; }

/* ─── DEACTIVATED TABLE ──────────────────────────────────────── */
#mt-root .deactivated-table th { background: var(--red-light) !important; color: var(--red) !important; }
#mt-root .deactivated-table tr td { opacity: 0.7; }
#mt-root .deactivated-table tr:hover td { opacity: 1; }
/* Name column fixed 185px */
#mt-root .deactivated-table th:nth-child(1),
#mt-root .deactivated-table td:nth-child(1) { width: 185px; min-width: 185px; max-width: 185px; }
/* Actions column — always full opacity, enough width for both buttons */
#mt-root .deactivated-table td:last-child { opacity: 1 !important; width: 220px; min-width: 220px; }
#mt-root .deactivated-table tr:hover td:last-child { opacity: 1 !important; }
#mt-root .btn-reactivate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; background: #16a34a; color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(22,163,74,0.3);
  transition: background 0.15s;
}
#mt-root .btn-reactivate:hover { background: #15803d; }

/* CSS column widths for 10-col user table (added vehicle type column) */
html body #mt-root #adminScreen .user-table th:nth-child(1),
html body #mt-root #adminScreen .user-table td:nth-child(1){ width:  9% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(2),
html body #mt-root #adminScreen .user-table td:nth-child(2){ width: 12% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(3),
html body #mt-root #adminScreen .user-table td:nth-child(3){ width:  6% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(4),
html body #mt-root #adminScreen .user-table td:nth-child(4){ width: 10% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(5),
html body #mt-root #adminScreen .user-table td:nth-child(5){ width:  7% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(6),
html body #mt-root #adminScreen .user-table td:nth-child(6){ width:  5% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(7),
html body #mt-root #adminScreen .user-table td:nth-child(7){ width:  8% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(8),
html body #mt-root #adminScreen .user-table td:nth-child(8){ width:  9% !important; }
html body #mt-root #adminScreen .user-table th:nth-child(9),
html body #mt-root #adminScreen .user-table td:nth-child(9){ width: 16% !important; overflow:visible !important; }
html body #mt-root #adminScreen .user-table th:nth-child(10),
html body #mt-root #adminScreen .user-table td:nth-child(10){ width: 18% !important; overflow:visible !important; white-space:nowrap !important; }

/* Also update the simpler selectors */
#mt-root .user-table th:nth-child(1),#mt-root .user-table td:nth-child(1){ width: 9% !important; }
#mt-root .user-table th:nth-child(2),#mt-root .user-table td:nth-child(2){ width:12% !important; }
#mt-root .user-table th:nth-child(3),#mt-root .user-table td:nth-child(3){ width: 6% !important; }
#mt-root .user-table th:nth-child(4),#mt-root .user-table td:nth-child(4){ width:10% !important; }
#mt-root .user-table th:nth-child(5),#mt-root .user-table td:nth-child(5){ width: 7% !important; }
#mt-root .user-table th:nth-child(6),#mt-root .user-table td:nth-child(6){ width: 5% !important; }
#mt-root .user-table th:nth-child(7),#mt-root .user-table td:nth-child(7){ width: 8% !important; }
#mt-root .user-table th:nth-child(8),#mt-root .user-table td:nth-child(8){ width: 9% !important; }
#mt-root .user-table th:nth-child(9),#mt-root .user-table td:nth-child(9){ width:16% !important; overflow:visible !important; }
#mt-root .user-table th:nth-child(10),#mt-root .user-table td:nth-child(10){ width:18% !important; overflow:visible !important; white-space:nowrap !important; }

/* Fix add-form to auto-wrap nicely across all fields */
#mt-root .add-form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-end !important;
}
#mt-root .add-form .form-field {
  flex: 1 1 140px;
  min-width: 110px;
  max-width: 220px;
}
#mt-root .add-form .btn-add {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-bottom: 0;
}


/* ─── PERSONAL SUMMARY BAR — enhanced with running totals ─── */
#mt-root .personal-summary-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--radius);
  padding: 12px 20px;
  margin-top: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--grey-700);
  border-left: 4px solid var(--purple);
}
#mt-root .pc-summary-current,
#mt-root .pc-summary-submitted,
#mt-root .pc-summary-grand {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
#mt-root .pc-sum-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--grey-400);
  margin-right: 2px;
}
#mt-root .pc-summary-divider {
  color: var(--grey-300);
  font-size: 18px;
  line-height: 1;
}
#mt-root .pc-summary-grand .personal-total-reimb {
  color: var(--green);
  font-family: 'DM Mono', monospace;
  font-size: 15px;
}
#mt-root .pc-sum-rate {
  margin-left: auto;
  font-size: 11px;
  color: var(--grey-400);
  background: var(--grey-100);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ─── ACTION BUTTON — Submit & Archive ───────────────────────── */
#mt-root #submitPersonalBtn {
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: white;
  border: none;
  box-shadow: var(--shadow);
  transition: all 0.15s;
}
#mt-root #submitPersonalBtn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ─── USER TABLE ACTION BUTTONS ─────────────────────────────── */
#mt-root .tbl-btn-deactivate { background:#fff3cd; color:#92400e; border:1.5px solid #fbbf24; }
#mt-root .tbl-btn-deactivate:hover { background:#fbbf24; color:white; }
#mt-root .btn-actions {
  display: flex !important;
  gap: 4px !important;
  align-items: stretch !important;
  width: 100% !important;
}
#mt-root .btn-actions .tbl-btn {
  flex: 1 !important;
  text-align: center !important;
  padding: 6px 4px !important;
}
/* Status cell — flex fill */
#mt-root .user-table td:nth-child(9) > div {
  width: 100% !important;
}
#mt-root .user-table td:nth-child(9) .status-toggle,
#mt-root .user-table td:nth-child(9) .tbl-btn-deactivate {
  font-size: 10px !important;
  padding: 5px 4px !important;
}


/* ─── RECEIPT UPLOAD ─────────────────────────────────────────── */
#mt-root .pc-receipt-cell { display:flex; align-items:center; }
#mt-root .receipt-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--grey-100); color: var(--grey-600);
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1.5px dashed var(--grey-300); transition: all 0.15s;
  white-space: nowrap;
}
#mt-root .receipt-upload-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
#mt-root .receipt-upload-btn.receipt-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; border-style: dashed; filter: grayscale(1); }
#mt-root .receipt-upload-btn.receipt-required { border-color: #fca5a5; color: #dc2626; background: #fff5f5; }
#mt-root .receipt-attached {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: var(--radius-sm);
  background: #f0fdf4; border: 1.5px solid #6ee7b7;
  font-size: 11px; color: var(--green);
}
#mt-root .receipt-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mt-root .receipt-remove {
  background: none; border: none; color: var(--grey-400);
  cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1;
}
#mt-root .receipt-remove:hover { color: var(--red); }

/* ─── TOGGLE SWITCH ──────────────────────────────────────────── */
#mt-root .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
#mt-root .toggle-switch input { opacity: 0; width: 0; height: 0; }
#mt-root .toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--grey-200); border-radius: 24px; transition: .2s;
}
#mt-root .toggle-slider:before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#mt-root .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
#mt-root .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }