:root{
  --navy:#0f3b64;
  --blue:#0b67a3;
  --soft:#eef5fb;
  --text:#14202e;
  --muted:#667085;
  --border:#d7e0ea;
  --success:#16834a;
  --warning:#c67a00;
  --danger:#c23838;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;background:#eef3f8;color:var(--text)}
body{min-height:100vh}
button,input,select{font:inherit}
.screen{display:none;min-height:100vh}.screen.active{display:block}
.login-shell{max-width:520px;margin:0 auto;min-height:100vh;background:linear-gradient(180deg,#fff 0%,#edf5fb 100%);padding:26px 18px 36px}
.brand-top{text-align:center;padding-top:8px}
.logo-box,.mini-logo{background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.logo-box{width:92px;height:92px;border-radius:24px;margin:0 auto;font-size:62px}
.brand-top h1{margin:16px 0 3px;font-size:28px;color:var(--navy);letter-spacing:.5px}
.tagline{font-size:11px;letter-spacing:2.2px;color:var(--muted)}
.hero{margin:24px 0 0;background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:24px;padding:24px;color:white;display:flex;gap:16px;align-items:center;box-shadow:0 12px 30px rgba(15,59,100,.18)}
.hero-icon{font-size:48px}.hero h2{margin:0 0 4px;font-size:24px}.hero p{margin:0;opacity:.9}
.login-card{margin-top:18px;background:#fff;border-radius:28px;padding:24px;box-shadow:0 18px 45px rgba(22,37,55,.08)}
.login-card h2{text-align:center;margin:0 0 8px;color:var(--navy)}
.login-card>p{text-align:center;color:var(--muted);margin-top:0;margin-bottom:24px}
.login-card label{font-size:14px;font-weight:700;display:block;margin:12px 0 7px}
.login-card input[type="text"], .login-card input[type="password"]{width:100%;padding:15px 14px;border:1px solid var(--border);border-radius:14px;background:#f8fafc;outline:none}
.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,103,163,.1)}
.password-wrap{display:flex;gap:8px;align-items:center}.password-wrap input{flex:1}
.icon-btn{border:none;background:#eef3f8;border-radius:12px;padding:12px;cursor:pointer}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.small-row{margin-top:14px}
.checkline{font-weight:500!important;display:flex!important;align-items:center;gap:6px;margin:0!important}
.link-btn{background:none;border:none;color:var(--blue);cursor:pointer;padding:0}
.primary-btn{width:100%;border:none;border-radius:16px;background:var(--navy);color:#fff;font-weight:800;padding:16px;margin-top:20px;cursor:pointer}
.error{min-height:20px;color:var(--danger);font-size:13px;margin-top:8px;text-align:center}
.footer-copy{text-align:center;margin-top:22px;color:var(--muted);font-size:13px}
.footer-tag{text-align:center;margin-top:8px;color:var(--muted);font-size:10px;letter-spacing:1.4px}
.demo-box{background:#eef5fb;border:1px solid #d7e5f2;color:#0f3b64;border-radius:14px;padding:12px 14px;margin:0 0 18px;text-align:center;font-size:13px;line-height:1.6}

#mainView{max-width:760px;margin:0 auto;background:#f6f8fb;position:relative;padding-bottom:88px}
.topbar{position:sticky;top:0;z-index:5;background:#ffffffec;backdrop-filter:blur(12px);padding:18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e9eef4}
.topbar h2{margin:3px 0 0}.eyebrow{font-size:12px;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:9px}.mini-logo{width:44px;height:44px;border-radius:14px;font-size:28px}
.status-pill{display:flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}
.status-pill.online{background:#e8f7ef;color:var(--success)}.status-pill.offline{background:#f1f3f5;color:#667085}
.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
#content{padding:18px}
.card{background:var(--card);border-radius:20px;padding:18px;box-shadow:0 8px 20px rgba(20,32,46,.06);margin-bottom:14px}
.hero-card{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff}.hero-card .sub{opacity:.85}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(20,32,46,.05)}
.stat .icon{font-size:24px}.stat .value{font-size:24px;font-weight:800;margin-top:8px}.stat .label{color:var(--muted);font-size:13px}
.section-title{font-size:17px;font-weight:800;margin:20px 0 12px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick{background:var(--soft);border:none;border-radius:18px;padding:16px 10px;min-height:90px;font-weight:700;color:var(--navy)}
.delivery{display:flex;flex-direction:column;gap:8px}.delivery-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.code{font-weight:800;font-size:13px}.status{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px;background:#eaf2fb;color:var(--blue)}
.status.completed{background:#e9f8f0;color:var(--success)}.status.out{background:#fff3df;color:var(--warning)}
.address,.muted{color:var(--muted);font-size:14px}.small-btn{align-self:flex-start;border:none;border-radius:12px;background:var(--navy);color:white;padding:9px 12px;font-weight:700}
.attendance-center{text-align:center;padding:28px 16px}.attendance-icon{width:150px;height:150px;margin:0 auto 18px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:64px}
.attendance-icon.in{background:#e8f7ef}.danger-btn{background:var(--danger)}
.record-row{display:grid;grid-template-columns:1.2fr 1fr 1fr .8fr;gap:8px;padding:11px 0;border-bottom:1px solid #edf1f5;align-items:center;font-size:13px}
.record-row.header{font-weight:800;color:var(--muted);font-size:12px}.record-row:last-child{border-bottom:none}
.month-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.summary-box{background:var(--soft);border-radius:16px;padding:14px;text-align:center}.summary-box strong{display:block;font-size:21px;color:var(--navy);margin-bottom:4px}
.month-select,.shift-select{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-title{font-weight:800}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.day-name{text-align:center;font-size:11px;color:var(--muted);font-weight:800;padding:6px 0}
.cal-day{min-height:70px;border:1px solid #e5ebf1;border-radius:12px;background:#fff;padding:7px;cursor:pointer;position:relative}.cal-day.empty{background:transparent;border-color:transparent;cursor:default}
.cal-day.selected{border:2px solid var(--blue);background:#eef7fd}.cal-day.today{box-shadow:0 0 0 2px rgba(11,103,163,.18)}
.cal-num{font-size:12px;font-weight:800}.shift-chip{font-size:9px;margin-top:5px;background:#e9f2ff;color:var(--blue);border-radius:8px;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shift-chip.booked{background:#e8f7ef;color:var(--success)}.shift-panel{margin-top:14px}.shift-option{display:flex;justify-content:space-between;align-items:center;border:1px solid #e3e9f0;border-radius:14px;padding:13px;margin-bottom:9px}
.shift-option button{border:none;border-radius:10px;background:var(--navy);color:white;padding:8px 11px;font-weight:700}.shift-option button.booked{background:var(--success)}
.profile-row{display:flex;align-items:center;gap:14px}.avatar{width:58px;height:58px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--navy)}
.menu-item{padding:14px 0;border-bottom:1px solid #edf1f5}.logout{color:var(--danger);font-weight:800;cursor:pointer}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #e5ebf1;padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:10}
.nav-btn{border:none;background:transparent;padding:7px 1px;color:#7a8796;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:17px}.nav-btn span{font-size:10px}.nav-btn.active{color:var(--navy);font-weight:800}
@media(max-width:520px){.record-row{grid-template-columns:1.2fr .85fr .85fr .7fr;font-size:11px}.month-summary{grid-template-columns:1fr 1fr}.cal-day{min-height:58px;padding:5px}.shift-chip{font-size:8px}}
@media(min-width:700px){body{padding:24px}.screen{min-height:calc(100vh - 48px)}#mainView,.login-shell{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(20,32,46,.12)}}

.clickable{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.field-label{display:block;font-size:13px;font-weight:800;margin:14px 0 7px}
.doc-input,.support-textarea{width:100%;padding:13px;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none}
.doc-input.invalid{border-color:#e04a4a;background:#fff7f7}
.upload-input{width:100%;padding:11px;border:1px dashed var(--border);border-radius:12px;background:#fafcff}
.document-card.missing-doc{border:1px solid #f0b3b3;background:#fffafa}
.document-card.complete-doc{border:1px solid #b7e0c8}
.document-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.doc-state{font-size:11px;font-weight:900;border-radius:999px;padding:6px 9px}
.doc-state.bad{background:#ffe7e7;color:var(--danger)}.doc-state.good{background:#e8f7ef;color:var(--success)}
.upload-warning{margin-top:8px;color:var(--danger);font-size:12px;font-weight:800}.upload-ok{margin-top:8px;color:var(--success);font-size:12px;font-weight:800}
.compliance-warning{background:#fff5f5;border:1px solid #efb1b1;color:#7f1d1d}
.compliance-ok{background:#effaf3;border:1px solid #b5dfc5;color:#14532d}
.compliance-title{font-size:18px;font-weight:900;margin-bottom:7px}
.offline-warning{margin-top:10px;font-weight:700}
.deadline-bar,.hours-bar{height:10px;border-radius:999px;background:#e8edf2;overflow:hidden;margin:14px 0 8px}
.deadline-fill{height:100%;background:#d94a4a}
.compact-warning{display:flex;flex-direction:column;gap:9px}
.hours-limit-wrap{margin-top:16px;padding:14px;background:#f8fafc;border-radius:14px}
.hours-limit-head{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.hours-fill{height:100%;background:var(--blue);border-radius:999px}.hours-fill.over{background:var(--danger)}
.hours-over{color:var(--danger);font-size:12px;font-weight:800}
.support-chat-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.support-avatar{width:48px;height:48px;border-radius:14px;background:var(--navy);color:#fff;font-size:30px;font-weight:900;display:flex;align-items:center;justify-content:center}
.support-textarea{min-height:150px;resize:vertical}

.language-choice{width:100%;display:grid;grid-template-columns:42px 1fr 30px;align-items:center;text-align:left;gap:10px;padding:15px;margin:10px 0;border:1px solid var(--border);border-radius:15px;background:#fff;cursor:pointer}
.language-choice>span{font-size:25px}.language-choice.selected{border:2px solid var(--blue);background:#eef7fd;color:var(--navy)}
.attendance-actions{margin-top:16px}.pause-btn{border:1px solid #e0a73c;background:#fff8e8;color:#8a5a00;border-radius:13px;padding:11px 16px;font-weight:800;margin-bottom:7px}
.pause-btn.active-pause{background:#fff0d0}.compliance-info{border-left:4px solid var(--blue)}
.legal-warning-box{margin:14px 0;padding:12px;border-radius:12px;background:#fff3e8;color:#8b4b00;font-size:12px}.legal-warning-box div{margin-top:6px}
.legal-rule{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #edf1f5}
.legal-rule b{font-size:20px;color:var(--navy)}

.download-btn{display:block;margin-top:14px;text-decoration:none;text-align:center;background:var(--navy);color:#fff;padding:13px 16px;border-radius:13px;font-weight:800}
.download-btn:hover{opacity:.94}

.language-menu-row>span:first-child{display:flex;align-items:center;gap:8px;font-weight:700}
.payslip-list{margin-top:12px}
.payslip-row{display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:13px 0;border-bottom:1px solid #edf1f5}
.payslip-row:last-child{border-bottom:none}
.payslip-row>span{font-size:22px}
.payslip-row>b{color:var(--blue);font-size:18px}

.hr-request-warning{margin-top:14px;padding:13px;border-radius:13px;background:#fff7e7;border:1px solid #efc66f;color:#704a00;font-size:13px;line-height:1.5}
.hr-request-warning strong{display:block;margin-bottom:5px;font-size:14px}
.attendance-two{grid-template-columns:1fr 1fr!important}
.delivery-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.damage-btn{border:1px solid #e2a6a6;background:#fff;color:#a62d2d;border-radius:12px;padding:9px 12px;font-weight:700}
.damage-btn.reported{background:#fff0f0;border-color:#d96666}
.welcome-card h2{font-size:25px;margin:6px 0}
.safety-modal{position:fixed;inset:0;background:rgba(8,25,43,.62);z-index:999;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}
.safety-modal.hidden{display:none}
.safety-card{width:min(520px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.safety-card h2{text-align:center;color:var(--navy);margin:6px 0 10px}
.safety-card>p{text-align:center;color:var(--muted);line-height:1.45}
.safety-icon{text-align:center;font-size:48px}
.safety-check{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #edf1f5;font-size:14px;line-height:1.4}
.safety-check input{margin-top:3px;transform:scale(1.15)}
.safety-note{margin-top:14px;padding:11px;border-radius:12px;background:#eef5fb;color:#4b6174;font-size:12px;line-height:1.45}
#confirmSafetyBtn:disabled{opacity:.45;cursor:not-allowed}

.back-btn{border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:12px;padding:9px 12px;font-weight:800}
.damage-summary{background:#fff5f5;border:1px solid #efb6b6;border-radius:12px;padding:11px;color:#7c2828;font-size:12px;line-height:1.45}
.damage-modal{position:fixed;inset:0;background:rgba(8,25,43,.6);z-index:999;display:flex;align-items:center;justify-content:center;padding:18px}
.damage-modal-card{position:relative;width:min(520px,100%);background:#fff;border-radius:22px;padding:22px;max-height:90vh;overflow:auto}
.modal-close{position:absolute;right:14px;top:12px;border:none;background:#eef3f8;border-radius:50%;width:34px;height:34px;font-size:22px}
.privacy-highlight{margin-top:16px;padding:14px;background:#eef5fb;border-radius:14px;line-height:1.55}
.privacy-highlight strong{display:block;margin-bottom:6px;color:var(--navy)}
.privacy-warning{margin-top:14px;padding:14px;background:#fff7e8;border:1px solid #efd18d;border-radius:14px;color:#6c4c0a;font-size:12px;line-height:1.5}

.profile-photo-wrap{display:flex;align-items:center;gap:16px}
.driver-photo-preview,.driver-photo-placeholder{width:96px;height:96px;border-radius:22px;object-fit:cover;border:3px solid #e7eef5;background:#f5f8fb}
.driver-photo-placeholder{display:flex;align-items:center;justify-content:center;font-size:44px}
.profile-photo-info{flex:1}
.photo-upload-btn{display:inline-block;margin-top:10px;background:var(--navy);color:#fff;padding:9px 13px;border-radius:12px;font-weight:800;cursor:pointer;font-size:12px}

.doc-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}
.doc-status.pending{background:#fff4d8;color:#865900}
.doc-status.approved{background:#e6f8ec;color:#14783c}
.doc-review-row{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:9px}
.status-select{border:1px solid var(--border);border-radius:10px;padding:7px 9px;background:#fff;font-size:12px}

.urgent-support-card{border-left:4px solid #d64545;background:#fff8f8}
.urgent-support-card strong{color:#b42323}

.safety-fancy{width:min(760px,96vw);padding:0;overflow:hidden}
.safety-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 10px;background:linear-gradient(135deg,#eef8ff,#f9fbff)}
.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:900;color:#2376b7}
.safety-header h2{text-align:left;margin:5px 0 2px}
.safety-header p{margin:0;color:var(--muted)}
.safety-progress-ring{width:64px;height:64px;border-radius:50%;background:#fff;border:7px solid #dcecf8;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--navy)}
.rider-stage{margin:14px 24px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#eef7ff,#f8fbfd);text-align:center}
.rider-illustration{position:relative;width:240px;height:150px;margin:0 auto}
.bike-visual{position:absolute;left:52px;bottom:10px;font-size:88px;line-height:1}
.person-head{position:absolute;left:112px;top:14px;font-size:34px}
.person-body{position:absolute;left:106px;top:54px;font-size:44px}
.helmet-node{position:absolute;left:110px;top:0px;font-size:26px}
.shoe-node{position:absolute;left:133px;bottom:18px;font-size:22px}
.rider-caption{font-size:12px;color:var(--muted);margin-top:6px}

.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 24px}
.safety-tile{display:grid;grid-template-columns:38px 1fr 28px;align-items:center;gap:10px;border:1px solid #dce5ee;background:#fff;border-radius:16px;padding:12px;text-align:left;cursor:pointer;transition:.18s}
.safety-tile:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,54,78,.08)}
.safety-tile.done{border-color:#72c88b;background:#effbf3}
.safety-tile-icon{font-size:25px}
.safety-tile b{display:block;color:var(--navy)}
.safety-tile small{display:block;color:var(--muted);line-height:1.25;margin-top:2px}
.check-dot{font-size:22px;font-weight:900;color:#a8b6c4;text-align:center}
.safety-tile.done .check-dot{color:#15934a}
.safety-fancy .safety-note{margin:14px 24px}
.fancy-confirm{margin:0 24px 24px;width:calc(100% - 48px)}
.safety-close{z-index:4}
@media(max-width:620px){
  .safety-grid{grid-template-columns:1fr}
  .rider-illustration{transform:scale(.9)}
}

.download-report-btn{width:100%;margin-top:14px;border:none;background:var(--navy);color:#fff;border-radius:13px;padding:13px 16px;font-weight:900;cursor:pointer}
.report-note{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.4}
.safety-ready{margin:14px 24px 8px;padding:12px 14px;background:#e8f8ed;color:#13743a;border:1px solid #9ed8b0;border-radius:13px;text-align:center;font-weight:800}
.go-online-final{background:#0c9b4d!important;font-size:16px;letter-spacing:.5px}
.hidden{display:none!important}

.live-location-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.driver-live-status{display:inline-flex;margin:5px 0;padding:7px 12px;border-radius:999px;font-weight:900}
.driver-live-status.offline{background:#eef1f4;color:#68727c}
.driver-live-status.idle{background:#e7f8ed;color:#11763b}
.driver-live-status.with-order{background:#e8f2ff;color:#155fa8}
.location-refresh-btn{border:none;background:var(--navy);color:white;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.location-placeholder{text-align:center;padding:34px 14px}
.location-big-icon{font-size:44px;margin-bottom:8px}
.driver-map{width:100%;height:360px;border:0;border-radius:16px;background:#eef3f7}
.location-details{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.location-details>div{background:#f6f8fa;border-radius:12px;padding:11px}
.location-details span{display:block;color:var(--muted);font-size:11px}
.location-details strong{display:block;margin-top:3px;color:var(--navy);font-size:13px}
.map-info-card{border-left:4px solid #3b83bd}
@media(max-width:620px){
  .live-location-head{align-items:flex-start;flex-direction:column}
  .location-details{grid-template-columns:1fr}
  .driver-map{height:300px}
}

.document-status-info{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 10px;
  align-items:center;
  margin:12px 0 18px;
  padding:13px 14px;
  background:#f7f9fb;
  border:1px solid #e4eaf0;
  border-radius:14px;
}
.hr-status-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #edf1f5;
  font-size:12px;
  font-weight:800;
  color:var(--navy);
}
.status-explanation{
  margin-top:7px;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}

.welcome-bike{font-size:.9em;vertical-align:middle}
.customer-name{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.customer-name strong{font-size:15px}
.address-map-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #dbe6ef;background:#f7fbff;color:var(--navy);padding:11px 12px;border-radius:12px;text-align:left;font-weight:800;cursor:pointer}
.address-map-btn span{font-size:10px;color:#2878b7;white-space:nowrap}
.order-instruction{margin-top:10px;padding:11px 12px;border-radius:12px;background:#fff8e8;border:1px solid #f0ddb0;font-size:12px;line-height:1.45}
.order-instruction strong{display:block;margin-bottom:4px;color:#704b00}
.privacy-clean p{line-height:1.6}

.safety-action-footer{
  position:sticky;bottom:-1px;z-index:8;background:#fff;
  padding:10px 24px 18px;margin:10px -24px -24px;
  border-top:1px solid #e4edf4;box-shadow:0 -10px 24px rgba(20,50,70,.07)
}
.safety-action-footer .safety-ready{margin:0 0 8px}
.safety-action-footer .go-online-final{width:100%;margin:0;padding:15px 18px;font-size:17px}
.shift-policy-card{border-left:4px solid #2478b8;background:#f6fbff}
.shift-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.shift-total strong{color:var(--navy)}
.selected-shift-option{background:#effaf3;border-color:#8bd0a0!important}

.attendance-icon.paused{background:#fff4c9!important;color:#8b6500!important}
.pause-status-pill{display:inline-flex;align-items:center;gap:6px;background:#fff1b8;color:#7a5700;border:1px solid #efcf61;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;margin:5px 0 10px}
.pause-btn.active-pause{background:#f6c84b!important;color:#4f3b00!important;border-color:#d9aa23!important}
.fleet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fleet-card{border:1px solid #e1e8ef}
.fleet-selected{border:2px solid #2a86c6;background:#f5fbff}
.fleet-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.fleet-badge{background:#e6f5ff;color:#12679f;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900}
.fleet-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.fleet-numbers span{background:#f6f8fa;padding:9px;border-radius:10px;font-size:11px;text-align:center}
.fleet-numbers b{display:block;font-size:16px;color:var(--navy)}
.fleet-assign-btn{width:100%;margin-top:12px}
.legal-text-card{padding:26px 30px}
.legal-text-card h2{margin-top:0;color:var(--navy)}
.legal-text-card p{font-size:13px;line-height:1.72;margin:0 0 14px;text-align:justify}
@media(max-width:650px){.fleet-grid{grid-template-columns:1fr}.legal-text-card{padding:18px}}

.shift-warning-overlay{
  position:fixed;inset:0;background:rgba(19,35,50,.58);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.shift-warning-card{
  width:min(440px,92vw);background:#fff;border-radius:22px;padding:26px;
  box-shadow:0 24px 60px rgba(0,0,0,.24);text-align:center
}
.shift-warning-icon{font-size:42px;margin-bottom:8px}
.shift-warning-card h3{margin:0 0 8px;color:var(--navy);font-size:22px}
.shift-warning-card p{margin:0;color:#45596c;line-height:1.55}
.shift-warning-action{
  margin:14px 0;background:#fff6d8;border:1px solid #efd27e;color:#725400;
  padding:12px;border-radius:12px;font-weight:700
}
.shift-warning-buttons{display:flex;gap:10px;justify-content:center;margin-top:16px}
.shift-warning-buttons button{min-width:120px}

.fleet-pending-card{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-left:4px solid #e1b437;background:#fff9e7
}
.pending-fleet-badge{background:#fff2bf!important;color:#745400!important}
.fleet-requested{border:2px dashed #d5aa2e!important}
.back-link{
  border:none;background:none;color:#216ea7;font-weight:800;cursor:pointer;
  margin-bottom:12px;padding:0
}
.fleet-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fleet-detail-hero h2{margin:4px 0 6px}
.driver-detail-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.driver-detail-grid>div,.fleet-hours-grid>div{
  background:#f6f8fa;border-radius:12px;padding:12px
}
.driver-detail-grid span,.fleet-hours-grid span{
  display:block;color:var(--muted);font-size:11px;margin-bottom:4px
}
.driver-detail-grid strong{font-size:13px;color:var(--navy);word-break:break-word}
.fleet-hours-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px
}
.fleet-hours-grid strong{display:block;font-size:22px;color:var(--navy)}
.detail-change-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:14px}
.detail-change-row input,.detail-change-row select{
  width:100%;border:1px solid #d9e2ea;border-radius:11px;padding:11px;background:#fff
}
.pending-changes-list{margin-top:16px;padding-top:14px;border-top:1px solid #e5ebf0}
.pending-change-item{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid #eef2f5;font-size:12px
}
.legal-summary-card{border-left:4px solid #4b8dc0}
@media(max-width:650px){
  .driver-detail-grid,.fleet-hours-grid{grid-template-columns:1fr}
  .detail-change-row{grid-template-columns:1fr}
  .fleet-detail-hero,.fleet-pending-card{align-items:flex-start;flex-direction:column}
}

.fleet-driver-header{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  border-top:4px solid var(--navy)
}
.fleet-driver-main{display:flex;align-items:center;gap:14px;min-width:0}
.fleet-driver-avatar{
  width:64px;height:64px;border-radius:18px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:900;flex:0 0 auto
}
.fleet-driver-main h2{margin:3px 0 7px}
.fleet-current-line{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.fleet-current-line span{
  display:inline-flex;padding:5px 8px;background:#f3f7fa;border-radius:999px;
  font-size:11px;font-weight:800;color:#29465e
}
.fleet-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fleet-contract-link,.fleet-sign-label{text-decoration:none;cursor:pointer;display:inline-flex;align-items:center}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fleet-top-metrics{margin:12px 0}
.fleet-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fleet-mini-stats>div{background:#f7f9fb;border-radius:12px;padding:12px}
.fleet-mini-stats span{display:block;color:var(--muted);font-size:11px}
.fleet-mini-stats strong{display:block;margin-top:4px;color:var(--navy);font-size:16px}
.fleet-city-preview{
  margin:12px 0;padding:9px 10px;border-radius:10px;background:#f7f9fb;
  font-size:11px;color:#4c6172;line-height:1.45
}
.fleet-city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fleet-city-btn{
  border:1px solid #dce5ec;background:#fff;border-radius:13px;padding:12px;
  text-align:left;cursor:pointer;color:var(--navy)
}
.fleet-city-btn span{display:block;font-weight:900;font-size:14px}
.fleet-city-btn small{display:block;color:var(--muted);margin-top:4px}
.fleet-city-btn.current-city{border:2px solid #3c9b62;background:#f1fbf4}
.city-request-strip{
  margin-top:12px;background:#fff5ce;border:1px solid #efd37b;color:#745400;
  border-radius:11px;padding:10px;font-weight:800;font-size:12px
}
.fleet-performance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.fleet-performance-grid>div{background:#f6f8fa;border-radius:12px;padding:12px;text-align:center}
.fleet-performance-grid strong{display:block;font-size:21px;color:var(--navy)}
.fleet-performance-grid span{font-size:11px;color:var(--muted)}
.contract-portal-row{display:flex;gap:10px;flex-wrap:wrap}
.fleet-doc-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fleet-doc-status-grid>div{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f7f9fb;border-radius:11px;padding:10px 12px;font-size:12px
}
.not-uploaded-text{font-size:11px;color:#8a5050}
.fleet-notice-overlay{
  position:fixed;inset:0;background:rgba(16,31,45,.55);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px
}
.fleet-notice-card{
  width:min(430px,92vw);background:#fff;border-radius:20px;padding:26px;text-align:center;
  box-shadow:0 24px 65px rgba(0,0,0,.25)
}
.fleet-notice-icon{
  width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:#e8f7ed;color:#188247;
  display:grid;place-items:center;font-size:26px;font-weight:900
}
.fleet-notice-card h3{margin:4px 0 8px;color:var(--navy)}
.fleet-notice-card p{line-height:1.5}
.fleet-notice-card button{margin-top:16px;min-width:120px}
@media(max-width:760px){
  .fleet-driver-header{align-items:flex-start;flex-direction:column}
  .fleet-header-actions{justify-content:flex-start}
  .grid4,.fleet-performance-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .fleet-driver-main{align-items:flex-start}
  .fleet-driver-avatar{width:52px;height:52px;border-radius:14px}
  .grid4,.fleet-mini-stats,.fleet-city-grid,.fleet-performance-grid,.fleet-doc-status-grid{grid-template-columns:1fr}
}

.vehicle-symbol{
  display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 5px;
  border-radius:7px;background:#e8f2fb;color:#17446e;font-size:8px;font-weight:900;letter-spacing:.4px
}
.contract-progress-card{border-left:4px solid #2f9658}
.contract-progress-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end}
.contract-progress-head span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.contract-progress-numbers{font-size:12px;color:#43596c;text-align:right}
.contract-progress-track{height:15px;border-radius:999px;background:#e8edf1;overflow:hidden;margin-top:13px}
.contract-progress-fill{height:100%;border-radius:999px;background:#31945a;min-width:0}
.fleet-live-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border-left:4px solid #3e8cc5}
.fleet-compliance-notice{background:#fff9e8;border:1px solid #ead28a}
.fleet-compliance-notice strong{color:#654b00}
.fleet-compliance-notice p{margin:7px 0 0;line-height:1.55;color:#604f25;font-size:12px}
.hr-request-card{border-top:3px solid #173f67}
.hr-request-grid{display:grid;gap:10px}
.hr-request-grid select,.hr-request-grid textarea{
  width:100%;border:1px solid #d8e1e8;border-radius:12px;padding:11px;background:#fff;font:inherit
}
.hr-request-grid textarea{resize:vertical;min-height:92px}
@media(max-width:650px){
  .contract-progress-head,.fleet-live-card{align-items:flex-start;flex-direction:column}
  .contract-progress-numbers{text-align:left}
}

.fleet-driver-photo{
  width:74px;height:74px;border-radius:18px;object-fit:cover;flex:0 0 auto;
  border:3px solid #e6edf3;background:#f2f5f8
}
.fleet-profile-content{min-width:0;flex:1}
.fleet-profile-topline{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.simple-online-status{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;
  color:#37516a;white-space:nowrap
}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-dot.blue{background:#2780c2;box-shadow:0 0 0 4px #e5f2fb}
.status-dot.muted-dot{background:#abb6bf;box-shadow:0 0 0 4px #f0f3f5}
.fleet-doc-warning{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#fff4d7;border:1px solid #e7ca72;border-left:5px solid #d5a51d;
  border-radius:15px;padding:14px 16px;margin-bottom:14px;color:#674c00
}
.fleet-change-card{border-top:3px solid #2f78ad}
.fleet-change-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fleet-change-item{background:#f6f8fa;border-radius:12px;padding:11px}
.fleet-change-item label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.fleet-change-item select{width:100%;border:1px solid #d8e1e8;border-radius:10px;padding:9px;background:#fff;margin-bottom:8px}
.approved-value{font-weight:800;color:var(--navy);padding:8px 0 12px}
.partner-city-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.partner-city-tags span{background:#eaf3fa;color:#255a80;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800}
.detail-status-wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.welcome-bike-bike{
  display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  padding:3px 7px;border-radius:8px;background:#e7f1f8;color:#184a70;font-size:9px;
  letter-spacing:.5px;font-weight:900;vertical-align:middle
}
/* Hide old large online/location card if any stale markup remains */
.fleet-live-card{display:none!important}
@media(max-width:900px){.fleet-change-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .fleet-profile-topline,.fleet-doc-warning{align-items:flex-start;flex-direction:column}
  .fleet-change-grid{grid-template-columns:1fr}
}

.dashboard-welcome-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dashboard-welcome-row h2{margin:3px 0 5px}
.vehicle-visual{
  width:78px;height:56px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:15px;background:#eef6fb;border:1px solid #d9e8f2;flex:0 0 auto
}
.vehicle-visual svg{width:64px;height:44px}
.vehicle-visual svg path,.vehicle-visual svg circle,.vehicle-visual svg rect{
  fill:none;stroke:#17466d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round
}
.vehicle-visual.car-visual svg rect{fill:#dfeef8}
.vehicle-visual.car-visual svg .window{fill:#fff;stroke-width:3}

.dashboard-clock-card{background:linear-gradient(135deg,#173f67,#245e8f);color:#fff;border:none!important}
.dashboard-shift-clock{display:flex;align-items:center;gap:14px}
.dash-clock-icon{
  width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.13);
  display:grid;place-items:center;font-size:25px;flex:0 0 auto
}
.dash-clock-label{font-size:12px;opacity:.82}
.dash-clock-time{font-size:30px;font-weight:900;letter-spacing:1px;margin:2px 0}
.dash-clock-sub{font-size:11px;opacity:.75}

.profile-overview-card{display:flex;align-items:center;gap:14px}
.profile-overview-photo{width:72px;height:72px;border-radius:18px;object-fit:cover;border:3px solid #e4edf3}
.profile-overview-avatar{
  width:72px;height:72px;border-radius:18px;background:#173f67;color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:900;flex:0 0 auto
}
.profile-overview-main{flex:1;min-width:0}
.profile-overview-main h2{margin:0 0 3px}
.profile-overview-details{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.profile-overview-details>span{
  display:inline-flex;align-items:center;gap:5px;background:#f2f6f9;
  border-radius:999px;padding:5px 8px;font-size:11px;color:#355169
}
.profile-overview-details .vehicle-visual{width:38px;height:26px;border:0;background:transparent}
.profile-overview-details .vehicle-visual svg{width:34px;height:24px}
.profile-overview-details .vehicle-visual svg path,
.profile-overview-details .vehicle-visual svg circle,
.profile-overview-details .vehicle-visual svg rect{stroke-width:6}

.attractive-menu .menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-label{display:flex;align-items:center;gap:8px}
.menu-status-side{display:flex;align-items:center;gap:8px}
.menu-status-side b{font-size:22px}
.profile-status{
  display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;
  font-size:10px;font-weight:900;white-space:nowrap
}
.profile-status.approved{background:#e8f7ed;color:#18733b}
.profile-status.pending{background:#fff2bd;color:#775900}
.profile-status.warning{background:#ffe5e1;color:#a13b2e}
.profile-status.info{background:#e6f2fb;color:#216d9f}
.profile-status.neutral{background:#edf0f2;color:#69747e}
@media(max-width:620px){
  .profile-overview-card{align-items:flex-start;flex-wrap:wrap}
  .profile-overview-main{min-width:180px}
  .vehicle-visual{width:66px;height:48px}
}

.pending-inline{
  display:inline-flex;margin:0 0 8px;padding:5px 8px;border-radius:999px;
  background:#fff2bd;color:#745800;font-size:10px;font-weight:900
}
.fleet-request-builder{border-top:3px solid #256f9f}
.fleet-request-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px
}
.fleet-request-grid select,.fleet-request-grid textarea{
  width:100%;border:1px solid #d7e1e8;border-radius:11px;padding:10px;background:#fff;font:inherit
}
.fleet-request-reason{grid-column:1/-1}
.fleet-pending-summary{
  margin-top:14px;padding:12px;border-radius:12px;background:#fff7da;
  border:1px solid #ead27c;color:#654d00;font-size:12px;line-height:1.55
}
@media(max-width:760px){
  .fleet-request-grid{grid-template-columns:1fr}
  .fleet-request-reason{grid-column:auto}
}

.quick-grid-four{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.quick-grid-four .quick{
  min-height:82px;
  cursor:pointer;
}
@media(max-width:700px){
  .quick-grid-four{
    grid-template-columns:repeat(2,1fr);
  }
}

.quick-grid-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.quick-grid-two .quick{min-height:84px}

.personal-save-note{
  margin-bottom:14px;padding:10px 12px;background:#f4f8fb;border-radius:10px
}
.personal-pending-box{
  margin:8px 0 13px;padding:10px 12px;background:#fff8dd;border:1px solid #ecd57f;
  border-radius:11px;color:#665000;font-size:12px;line-height:1.45
}
.personal-pending-box .doc-status{margin-bottom:6px}
.personal-pending-box small{display:block;margin-top:4px;color:#766a46}
.personal-form-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid #e8edf1
}
.fleet-mini-stats{grid-template-columns:repeat(2,1fr)!important}

/* six navigation items: keep readable and horizontally safe on mobile */
.bottom-nav{overflow-x:auto;scrollbar-width:none}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav .nav-btn{min-width:72px;flex:1 0 72px}

@media(max-width:600px){
  .quick-grid-two{grid-template-columns:1fr 1fr}
  .personal-form-actions{flex-direction:column-reverse}
  .personal-form-actions button{width:100%}
}

.quick-grid-three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.online-control.online-active{background:#fff0ef!important;color:#a5352d!important;border-color:#e3a7a2!important}
.break-control.break-active{background:#fff4c7!important;color:#765700!important;border-color:#e5ca61!important}
.attendance-report-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-left:4px solid #347daf
}
.attendance-report-head strong{font-size:20px;color:var(--navy)}

.fleet-contract-review{
  display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f5f8fa;
  border-radius:10px;font-size:11px
}
.fleet-contract-review>span:first-child{color:var(--muted);font-weight:800}

.shift-cancel-pending{
  display:inline-flex;margin-top:6px;padding:5px 8px;border-radius:999px;
  background:#fff3c6;color:#755700;font-size:10px;font-weight:900
}
.pending-cancel-btn{
  background:#fff2bf!important;color:#745500!important;border:1px solid #e3c866!important;
  cursor:not-allowed!important
}
@media(max-width:650px){
  .quick-grid-three{grid-template-columns:1fr}
  .attendance-report-head{align-items:flex-start;flex-direction:column}
}

.fleet-policy-overlay{
  position:fixed;inset:0;z-index:10050;background:rgba(9,25,40,.74);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)
}
.fleet-policy-modal{
  width:min(640px,94vw);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;
  padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.28);border-top:6px solid #173f67
}
.fleet-policy-top{display:flex;gap:13px;align-items:center;margin-bottom:4px}
.fleet-policy-icon{
  width:60px;height:60px;border-radius:18px;background:#e9f3fa;display:grid;place-items:center;
  font-size:32px;flex:0 0 auto
}
.fleet-policy-kicker{font-size:11px;font-weight:900;letter-spacing:1.5px;color:#2c78ad}
.fleet-policy-modal h2{margin:4px 0;color:#142f4b;font-size:25px}
.fleet-policy-intro{margin:8px 0 18px;color:#657483;line-height:1.5}
.fleet-policy-points{display:grid;gap:10px}
.fleet-policy-points>div{
  display:grid;grid-template-columns:38px 1fr;gap:10px;padding:12px 13px;border-radius:13px;
  background:#f7f9fb;border:1px solid #e6ebef
}
.fleet-policy-points>div.strict-point{background:#fff6d9;border-color:#e9ca64}
.fleet-policy-points>div>span{font-size:22px}
.fleet-policy-points p{margin:0;color:#344b5d;font-size:12px;line-height:1.56}
.fleet-policy-check{
  display:flex;gap:9px;align-items:flex-start;margin:17px 0;padding:11px 12px;
  background:#edf6fc;border-radius:11px;font-size:12px;font-weight:800;color:#294a64
}
.fleet-policy-check input{margin-top:2px;accent-color:#173f67}
.fleet-policy-ok{
  width:100%;border:0;border-radius:13px;padding:14px 16px;background:#173f67;color:#fff;
  font-size:14px;font-weight:900;cursor:pointer
}
.fleet-policy-ok:disabled{background:#c8d1d8;color:#72808b;cursor:not-allowed}

.personal-form-actions{
  display:grid!important;grid-template-columns:minmax(120px,.34fr) minmax(220px,1fr)!important;
  gap:12px!important;align-items:stretch
}
.personal-discard-btn,.personal-save-btn{
  border-radius:12px;padding:13px 18px;font-size:13px;font-weight:900;cursor:pointer
}
.personal-discard-btn{background:#fff;border:1px solid #ccd6dd;color:#526575}
.personal-save-btn{border:1px solid #173f67;background:#173f67;color:#fff}

.dashboard-logout-btn{
  border:1px solid #d7e1e8;background:#fff;color:#7d342e;border-radius:11px;
  padding:9px 12px;font-weight:900;cursor:pointer;white-space:nowrap
}
.dashboard-logout-btn:hover{background:#fff2f0}

.create-account-entry{
  display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:16px;color:#687785;font-size:12px
}
.create-account-link{
  border:0;background:none;color:#1d69a0;font-weight:900;padding:0;cursor:pointer;text-decoration:underline
}
.account-request-overlay{
  position:fixed;inset:0;z-index:11000;background:rgba(13,29,43,.68);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)
}
.account-request-modal{
  width:min(470px,94vw);background:#fff;border-radius:22px;padding:27px;position:relative;
  box-shadow:0 25px 70px rgba(0,0,0,.25)
}
.account-modal-close{
  position:absolute;right:15px;top:12px;border:0;background:#eef2f5;width:34px;height:34px;
  border-radius:50%;font-size:22px;cursor:pointer;color:#4b5d6d
}
.account-request-icon{
  width:54px;height:54px;border-radius:15px;background:#eaf3fa;display:grid;place-items:center;
  font-size:26px;margin-bottom:10px
}
.account-request-modal h2{margin:0 0 6px;color:#173f67}
.account-request-modal>p{color:#697887;font-size:12px;line-height:1.5;margin-bottom:17px}
.account-request-modal label{display:block;font-size:11px;font-weight:900;color:#40566a;margin:10px 0 5px}
.account-request-modal input{
  width:100%;border:1px solid #d5dfe6;border-radius:10px;padding:11px;background:#fff;font:inherit
}
.account-request-submit{
  width:100%;margin-top:16px;border:0;border-radius:11px;padding:13px;background:#173f67;
  color:#fff;font-weight:900;cursor:pointer
}
.account-request-success{
  margin-top:13px;padding:12px;border-radius:11px;background:#eaf8ee;color:#1c6d3c;
  border:1px solid #a8dab7;font-size:12px
}
.account-request-success p{margin:5px 0 0;color:#326d49}
@media(max-width:620px){
  .personal-form-actions{grid-template-columns:1fr!important}
  .dashboard-welcome-row{align-items:flex-start;flex-direction:column}
}

/* V26 delivery timing */
.delivery-timing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;
}
.delivery-timing>div{
  background:#f3f7fa;border:1px solid #e0e8ee;border-radius:11px;padding:10px;
}
.delivery-timing span{display:block;font-size:10px;color:#71808e;font-weight:800;margin-bottom:3px}
.delivery-timing strong{font-size:12px;color:#173f67}
@media(max-width:520px){.delivery-timing{grid-template-columns:1fr 1fr}.delivery-timing>div:last-child{grid-column:1/-1}}

.demo-account-box{
  margin:18px 0 16px;
  padding:14px 16px;
  background:#eef6fb;
  border:1px solid #d1e3f0;
  border-radius:14px;
  text-align:center;
  color:#173f67;
  line-height:1.55;
}
.demo-account-title{
  font-weight:900;
  margin-bottom:4px;
  font-size:13px;
}
.create-account-entry{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:16px;
  color:#687785;
  font-size:12px;
}
.create-account-link{
  border:0;
  background:none;
  color:#1d69a0;
  font-weight:900;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}
.dashboard-logout-btn{
  border:1px solid #d7e1e8;
  background:#fff;
  color:#7d342e;
  border-radius:11px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.dashboard-logout-btn:hover{background:#fff2f0}
.account-request-overlay{
  position:fixed;inset:0;z-index:11000;background:rgba(13,29,43,.68);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)
}
.account-request-modal{
  width:min(470px,94vw);background:#fff;border-radius:22px;padding:27px;position:relative;
  box-shadow:0 25px 70px rgba(0,0,0,.25)
}
.account-modal-close{
  position:absolute;right:15px;top:12px;border:0;background:#eef2f5;width:34px;height:34px;
  border-radius:50%;font-size:22px;cursor:pointer;color:#4b5d6d
}
.account-request-icon{
  width:54px;height:54px;border-radius:15px;background:#eaf3fa;display:grid;place-items:center;
  font-size:26px;margin-bottom:10px
}
.account-request-modal h2{margin:0 0 6px;color:#173f67}
.account-request-modal>p{color:#697887;font-size:12px;line-height:1.5;margin-bottom:17px}
.account-request-modal label{display:block;font-size:11px;font-weight:900;color:#40566a;margin:10px 0 5px}
.account-request-modal input{
  width:100%;border:1px solid #d5dfe6;border-radius:10px;padding:11px;background:#fff;font:inherit
}
.account-request-submit{
  width:100%;margin-top:16px;border:0;border-radius:11px;padding:13px;background:#173f67;
  color:#fff;font-weight:900;cursor:pointer
}
.account-request-success{
  margin-top:13px;padding:12px;border-radius:11px;background:#eaf8ee;color:#1c6d3c;
  border:1px solid #a8dab7;font-size:12px
}
.account-request-success p{margin:5px 0 0;color:#326d49}
@media(max-width:620px){
  .dashboard-welcome-row{align-items:flex-start;flex-direction:column}
}

.fleet-issue-photo-box{
  padding:12px;
  border:1px dashed #bfcdd8;
  border-radius:12px;
  background:#f8fafc;
}
.fleet-photo-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.fleet-photo-upload-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border-radius:10px;
  background:#e9f3fa;
  color:#174a70;
  font-weight:900;
  cursor:pointer;
  font-size:12px;
}
.fleet-issue-photo-preview{
  display:block;
  width:160px;
  max-height:120px;
  object-fit:cover;
  border-radius:10px;
  margin-top:10px;
  border:1px solid #d7e1e8;
}
.delivery-timing{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}
.delivery-timing>div{
  background:#f3f7fa;
  border:1px solid #e0e8ee;
  border-radius:11px;
  padding:10px;
}
.delivery-timing span{
  display:block;
  font-size:10px;
  color:#71808e;
  font-weight:800;
  margin-bottom:4px;
}
.delivery-timing strong{
  display:block;
  font-size:13px;
  color:#173f67;
}
@media(max-width:560px){
  .delivery-timing{grid-template-columns:1fr}
}

.delivery-timing .timing-pending{
  opacity:.58;
}
.delivery-timing .timing-pending strong{
  color:#8a969f;
}
.notifications-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px
}
.notification-list-card{padding:8px 16px}
.notification-item{
  display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid #edf1f4;cursor:pointer
}
.notification-item:last-child{border-bottom:none}
.notification-item.unread{background:#f7fbff}
.notification-icon{
  width:38px;height:38px;border-radius:12px;background:#eef4f8;display:grid;place-items:center;flex:0 0 auto
}
.notification-body{flex:1;min-width:0}
.notification-title-row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.notification-new{
  background:#e3f1fb;color:#226b9d;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900
}
.notification-message{font-size:12px;line-height:1.5;color:#425769;margin-top:4px}
.notification-time{font-size:10px;color:#8a969f;margin-top:5px}
.no-notifications{text-align:center;padding:34px 12px}
.no-notification-icon{font-size:34px;margin-bottom:8px}
@media(max-width:600px){
  .notifications-head{align-items:flex-start;flex-direction:column}
}

.kader-app-logo{
  display:block;
  width:94px;
  height:94px;
  object-fit:cover;
  border-radius:22px;
  margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(23,63,103,.16);
}
.profile-logout-item{
  color:#8b2f29;
  font-weight:900;
}

/* V32 logo */
.brand-top{padding-top:2px}
.kader-app-logo{
  width:118px;
  height:118px;
  border-radius:28px;
  margin-bottom:18px;
}
.mini-app-logo{
  width:38px;height:38px;border-radius:10px;object-fit:cover;
  box-shadow:0 4px 12px rgba(15,59,100,.15)
}

/* Dashboard assignment & performance */
.dashboard-assignment-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:12px;
  margin-bottom:12px;
}
.assigned-city-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-left:4px solid #2d7fb8;
}
.dashboard-card-icon{
  width:48px;height:48px;border-radius:14px;background:#eaf4fb;
  display:grid;place-items:center;font-size:24px;flex:0 0 auto
}
.assigned-city-card h3{margin:4px 0 10px;color:#173f67;font-size:20px}
.allowed-city-label{font-size:10px;font-weight:900;color:#778794;text-transform:uppercase;letter-spacing:.6px}
.allowed-city-tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.allowed-city-tags span{
  background:#eef5fa;color:#245e87;border-radius:999px;padding:5px 8px;
  font-size:10px;font-weight:900
}
.city-lock-note{font-size:10px;line-height:1.4}

.driver-performance-card{
  position:relative;overflow:hidden;border-top:4px solid #8a6a3a
}
.performance-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.performance-score{font-size:38px;font-weight:950;color:#173f67;line-height:1}
.performance-score span{font-size:16px;color:#72808b;font-weight:800}
.performance-level{
  padding:7px 11px;border-radius:999px;background:#f0e5d5;color:#765324;
  font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.5px
}
.performance-progress{
  height:12px;background:#e8edf1;border-radius:999px;overflow:hidden;margin:13px 0 11px
}
.performance-progress>div{height:100%;background:#2e8f5a;border-radius:999px}
.performance-breakdown{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px
}
.performance-breakdown span{
  background:#f6f8fa;border-radius:9px;padding:7px 5px;text-align:center;
  font-size:9px;color:#687986
}
.performance-breakdown b{display:block;color:#173f67;margin-top:2px;font-size:11px}
.performance-levels{
  display:flex;justify-content:space-between;margin-top:10px;font-size:9px;color:#8b969f;font-weight:800
}
.performance-silver{border-top-color:#aab4bd}
.performance-silver .performance-level{background:#edf1f4;color:#697682}
.performance-gold{border-top-color:#d5a717}
.performance-gold .performance-level{background:#fff3bf;color:#735600}
.performance-platinum{border-top-color:#448aa7}
.performance-platinum .performance-level{background:#e4f4fa;color:#23617a}

/* Vertical shift timeline */
.dashboard-shift-list-card{padding-bottom:16px}
.vertical-shift-timeline{position:relative;margin:8px 0 14px}
.timeline-shift{
  display:grid;grid-template-columns:42px 1fr;gap:10px;position:relative;padding-bottom:15px
}
.timeline-shift:not(:last-child)::before{
  content:"";position:absolute;left:20px;top:34px;bottom:0;width:2px;background:#dbe5ec
}
.timeline-marker{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#eef3f7;color:#46657e;font-weight:900;z-index:1
}
.timeline-shift-content{
  background:#f7f9fb;border:1px solid #e5ebf0;border-radius:12px;padding:10px 12px
}
.timeline-shift-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:3px}
.timeline-state{font-size:9px;font-weight:900;padding:4px 7px;border-radius:999px;background:#edf1f4;color:#63717d}
.timeline-shift.active .timeline-marker{background:#dff4e6;color:#197241}
.timeline-shift.active .timeline-shift-content{border-color:#9fd6b2;background:#f3fbf6}
.timeline-shift.active .timeline-state{background:#dff4e6;color:#197241}
.timeline-shift.completed .timeline-marker{background:#e9eef2;color:#74818b}
.timeline-shift.completed .timeline-state{background:#e9eef2;color:#74818b}
.no-shift-dashboard{display:flex;gap:10px;align-items:center;padding:13px;background:#f7f9fb;border-radius:12px}
.no-shift-dashboard>span{font-size:25px}
.shift-dashboard-btn{width:100%}

/* Emergency */
.emergency-quick{
  background:#fff0ee!important;color:#a32e26!important;border:1px solid #e9b0ab!important
}
.emergency-overlay{
  position:fixed;inset:0;z-index:13000;background:rgba(20,25,30,.76);
  display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)
}
.emergency-card{
  width:min(560px,95vw);max-height:94vh;overflow:auto;background:#fff;border-radius:22px;
  padding:24px;position:relative;border-top:6px solid #c6322a;box-shadow:0 28px 80px rgba(0,0,0,.3)
}
.emergency-close{
  position:absolute;right:14px;top:12px;border:0;width:34px;height:34px;border-radius:50%;
  background:#f0f2f4;font-size:21px;cursor:pointer
}
.emergency-header{display:flex;gap:12px;align-items:center}
.emergency-header h2{margin:2px 0;color:#9d2d25}
.emergency-icon{
  width:54px;height:54px;border-radius:16px;background:#ffe6e3;display:grid;place-items:center;font-size:28px
}
.emergency-warning{
  margin:14px 0;padding:10px 12px;border-radius:11px;background:#fff4d7;
  border:1px solid #e7cf7e;color:#664e00;font-size:11px;line-height:1.5
}
.emergency-photo-box{
  margin-top:12px;padding:12px;border:1px dashed #d1d9df;border-radius:12px;background:#f8fafb
}
.emergency-photo-btn{
  display:inline-flex;padding:10px 12px;border-radius:10px;background:#e9f3fa;color:#174a70;
  font-weight:900;font-size:12px;cursor:pointer
}
.emergency-photo-preview{
  display:block;width:180px;max-height:130px;object-fit:cover;border-radius:10px;margin-top:10px
}
.emergency-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.emergency-submit-btn{
  border:0;border-radius:10px;background:#b42f28;color:#fff;padding:11px 14px;font-weight:900;cursor:pointer
}

@media(max-width:850px){
  .dashboard-assignment-grid{grid-template-columns:1fr}
  .performance-breakdown{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .performance-breakdown{grid-template-columns:repeat(2,1fr)}
  .emergency-actions{flex-direction:column-reverse}
  .emergency-actions button{width:100%}
}

.locked-driver-field{
  background:#f1f5f8!important;
  color:#405466!important;
  cursor:not-allowed;
  border-color:#d7e1e8!important;
}
.locked-driver-note{
  margin:7px 0 13px;
  padding:8px 10px;
  border-radius:9px;
  background:#edf4f8;
  color:#486173;
  font-size:10px;
  font-weight:800;
}
.germany-emergency-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0;
}
.germany-emergency-call{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  border-radius:13px;
  padding:12px;
  font-weight:900;
}
.germany-emergency-call span:last-child{
  display:flex;
  flex-direction:column;
}
.germany-emergency-call small{
  font-size:10px;
  font-weight:800;
  margin-top:2px;
  opacity:.8;
}
.emergency-call-icon{font-size:24px}
.police-call{
  background:#e9f3fb;
  border:1px solid #b9d8ed;
  color:#174f78;
}
.ambulance-call{
  background:#fdeceb;
  border:1px solid #efb7b3;
  color:#a12f27;
}
.emergency-number-note{
  font-size:10px;
  color:#687986;
  line-height:1.45;
  margin-bottom:12px;
}
@media(max-width:520px){
  .germany-emergency-actions{grid-template-columns:1fr}
}

/* V35 dashboard controls at top */
.dashboard-top-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.top-action-btn{
  min-height:88px;
  border-radius:16px;
  border:1px solid #dce5ec;
  background:#f3f7fa;
  color:#173f67;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  cursor:pointer;
}
.top-action-btn>span{font-size:22px}
.top-action-btn>strong{font-size:14px}
.online-top.online-active{
  background:#fff0ee;
  color:#a42f27;
  border-color:#efb7b2;
}
.break-top{
  background:#eef5fb;
}
.break-top.break-active{
  background:#fff5cc;
  color:#705600;
  border-color:#e6cf78;
}
.emergency-top{
  background:#fff0ee;
  color:#a42f27;
  border-color:#efa9a3;
}

/* Clean weekly performance */
.weekly-performance-card{
  border-top:4px solid #2d7fb8!important;
}
.weekly-performance-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.weekly-performance-period{
  margin-top:5px;
  font-size:11px;
  color:#758492;
  font-weight:800;
}
.weekly-performance-score{
  font-size:40px;
  font-weight:950;
  color:#173f67;
  line-height:1;
}
.weekly-performance-score span{
  font-size:16px;
  color:#768491;
}
.weekly-performance-bar{
  height:14px;
  background:#e8edf1;
  border-radius:999px;
  overflow:hidden;
  margin:16px 0 10px;
}
.weekly-performance-bar>div{
  height:100%;
  border-radius:999px;
  background:#2f8f5b;
}
.weekly-performance-note{
  font-size:11px;
  color:#6f7e8a;
}

/* Hide obsolete level/breakdown components if stale markup is cached */
.performance-breakdown,
.performance-levels,
.performance-level{
  display:none!important;
}

@media(max-width:700px){
  .dashboard-top-actions{
    grid-template-columns:1fr;
  }
}

.pwa-install-entry{text-align:center;margin-top:12px}
.pwa-install-btn{
  border:1px solid #d5e0e7;background:#fff;color:#173f67;
  border-radius:11px;padding:10px 14px;font-weight:900;cursor:pointer
}
.install-help-overlay{
  position:fixed;inset:0;z-index:15000;background:rgba(10,24,38,.68);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)
}
.install-help-card{
  width:min(440px,94vw);background:#fff;border-radius:22px;padding:26px;position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.26)
}
.install-help-close{
  position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  border:0;background:#eef2f5;font-size:22px;cursor:pointer
}
.install-help-icon{font-size:34px;margin-bottom:8px}
.install-help-card h2{margin:0 0 12px;color:#173f67}
.install-help-steps{display:grid;gap:10px}
.install-help-steps>div{padding:11px 12px;border-radius:11px;background:#f5f8fa;line-height:1.45}