[hidden] { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 20% 10%, #e5f2ee, #f3f6fa 48%); }
.auth-card { width: min(100%, 440px); display: grid; gap: 14px; padding: 36px; border: 1px solid #e1e8ec; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px #142b3614; }
.auth-card h1 { font-size: 25px; margin: 0; }
.auth-card > p { line-height: 1.6; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #19343c; }
.auth-brand > b { width: 42px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: #77c5ae; font-size: 27px; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand small { margin-top: 4px; color: #72818a; font-size: 11px; }
.auth-card input, .remote-dialog input, .remote-dialog select, .remote-dialog textarea { width: 100%; padding: 11px; border: 1px solid #dbe3eb; border-radius: 6px; font: inherit; }
.password-field { display: flex; gap: 8px; }
.password-field button { white-space: nowrap; }
.auth-card button, .auth-card .file-button { padding: 11px 14px; border: 1px solid #dbe3eb; border-radius: 6px; background: #fff; text-align: center; cursor: pointer; }
.auth-card button.primary { background: #24695e; color: #fff; border-color: #24695e; }
.auth-note { color: #657683; font-size: 12px; line-height: 1.6; }
.auth-switch { color: #657683; font-size: 13px; text-align: center; }
.auth-switch a { color: #176c59; font-weight: 650; text-underline-offset: 2px; }
.auth-import-card { width: min(100%, 680px); }
.auth-import-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.operator-authenticated { min-height: 100vh; background: #f3f6fa; }
.operator-app-header { display: flex; justify-content: space-between; align-items: center; padding: 18px max(24px, calc((100vw - 1180px)/2)); background: white; border-bottom: 1px solid #e4eaf1; }
.operator-app-header > div:last-child { display: flex; align-items: center; gap: 16px; }
.operator-app-header button, .operator-app-tabs button, .operator-app-shortcuts button { border: 1px solid #dbe3eb; border-radius: 6px; background: #fff; padding: 10px 14px; color: #344459; }
.operator-app-main { max-width: 1180px; margin: auto; padding: 34px 24px 56px; }
.operator-app-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.operator-app-heading h1 { font-size: 30px; }
.operator-app-heading p:not(.eyebrow) { color: #718096; }
.operator-app-shortcuts, .operator-app-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.operator-app-tabs { margin: 26px 0 20px; padding-bottom: 14px; border-bottom: 1px solid #dbe3eb; }
.operator-app-tabs button[aria-current="page"], .operator-app-shortcuts .primary { background: #24695e; border-color: #24695e; color: white; }
.operator-portal-section { padding: 24px; background: white; border: 1px solid #e4eaf1; border-radius: 12px; }
.operator-portal-section > header h2 { font-size: 20px; }
.operator-portal-section > header p:not(.eyebrow) { color: #718096; }
.operator-summary-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 22px 0; }
.operator-summary-cards article { display: grid; gap: 8px; padding: 18px; border: 1px solid #e4eaf1; border-radius: 9px; }
.operator-summary-cards span, .operator-summary-cards small { color: #718096; font-size: 12px; }
.operator-summary-cards strong { font-size: 25px; }
.operator-visit-groups { display: grid; gap: 24px; margin-top: 22px; }
.operator-visit-groups > section { display: grid; gap: 12px; }
.operator-visit-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px; border: 1px solid #e4eaf1; border-radius: 9px; }
.operator-visit-card h3 { margin: 10px 0; }
.operator-visit-card p { color: #657683; font-size: 13px; }
.operator-visit-card button, .operator-detail-actions button, .operator-map-actions a { border: 1px solid #dbe3eb; border-radius: 6px; padding: 9px 12px; background: white; text-decoration: none; font-size: 12px; }
.operator-map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.operator-route-map { min-height: 340px; border-radius: 8px; background: #e8eeeb; }
.operator-route-sequence { display: grid; gap: 12px; padding-left: 22px; }
.operator-route-sequence li { padding: 12px; border-bottom: 1px solid #e4eaf1; }
.operator-route-sequence li div { display: grid; gap: 6px; }
.operator-route-sequence small { color: #718096; }
.operator-instruction, .operator-report-summary { margin: 14px 0; padding: 12px; background: #eff6f3; border-radius: 7px; }
.operator-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.visit-status { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #edf3f1; font-size: 11px; }
.visit-status.completed { color: #196343; background: #e3f4eb; }
.visit-status.in_progress { color: #8a5a00; background: #fff2d6; }
.operator-api-message { padding: 12px; }
.operator-api-message.error, #operator-api-message.error { color: #9c3025; background: #fff1ef; }
.remote-dialog { width: min(720px, calc(100% - 28px)); max-height: 90vh; overflow: auto; border: 1px solid #dbe3eb; border-radius: 12px; padding: 24px; color: #24334a; }
.remote-dialog::backdrop { background: #12232e88; }
.remote-dialog form { display: grid; gap: 14px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-list { display: grid; gap: 10px; margin-top: 20px; }
.account-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e4eaf1; border-radius: 8px; }
.account-row div { display: grid; gap: 5px; margin-right: auto; }
.account-row small { color: #718096; }
.account-row button { padding: 7px 9px; }
.sync-alert { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 11px 16px; background: #fff2e8; border-bottom: 1px solid #e8b58f; color: #7a381e; font-size: 12px; line-height: 1.5; }
.sync-alert button { padding: 8px 11px; border: 1px solid #d7a17e; border-radius: 6px; background: #fff; color: #71351e; font: inherit; font-weight: 650; cursor: pointer; }
#sync-status[data-status="connected"] { color: #3c7254; }
#sync-status[data-status="offline"] { color: #a13b2f; }
#sync-status[data-status="reconnecting"] { color: #94651f; }
body.sync-failed #admin-workspace button, body.sync-failed #admin-workspace input, body.sync-failed #admin-workspace select, body.sync-failed #admin-workspace textarea { cursor: not-allowed; }
body.sync-failed #admin-workspace #sync-alert button, body.sync-failed #admin-workspace #export-json, body.sync-failed #admin-workspace #admin-logout { cursor: pointer; }
@media (max-width: 760px) { .operator-app-header, .operator-app-heading, .operator-visit-card { align-items: stretch; flex-direction: column; } .operator-summary-cards { grid-template-columns: repeat(2,1fr); } .operator-app-shortcuts > button { flex: 1; } .account-row { align-items: stretch; flex-wrap: wrap; } .account-row div { flex-basis: 100%; } }
.operator-route-controls{display:grid;grid-template-columns:minmax(130px,180px) minmax(160px,220px) minmax(0,1fr);align-items:end;gap:10px;margin:0 0 12px;padding:12px;border:1px solid #e4eaf1;border-radius:8px;background:#fff}.operator-route-controls label{grid-column:1;font-size:11px;font-weight:650;color:#52677a}.operator-route-controls input{grid-column:2;min-height:38px;padding:8px 10px;border:1px solid #ccd8e2;border-radius:6px;font:inherit}.operator-route-controls span{grid-column:3;color:#607186;font-size:11px;line-height:1.5}.operator-route-marker-shell{background:transparent;border:0}.operator-route-marker{display:grid;place-items:center;width:30px;height:30px;border:3px solid white;border-radius:50%;background:#0866f5;color:#fff;font-size:12px;font-weight:800;box-shadow:0 2px 8px #17324a48}.operator-route-sequence li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:9px}.operator-route-stop{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#0866f5;color:#fff;font-weight:750}.operator-route-stop:hover,.operator-route-stop:focus-visible{background:#064fbf}.operator-route-sequence li>div{min-width:0}.operator-route-sequence li>div>strong{overflow-wrap:anywhere}.operator-route-sequence .operator-map-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}.operator-route-sequence .operator-map-actions a,.operator-route-sequence .operator-map-actions button{font-size:11px;padding:7px 9px}@media(max-width:620px){.operator-route-controls{grid-template-columns:1fr 1fr}.operator-route-controls label{grid-column:1}.operator-route-controls input{grid-column:2}.operator-route-controls span{grid-column:1/-1}.operator-route-map{min-height:300px}.operator-route-sequence li{grid-template-columns:30px minmax(0,1fr);gap:6px}}
.operator-route-marker-shell.is-active .operator-route-marker{background:#f08a24;transform:scale(1.15)}
.operator-visit-instruction{padding:8px 10px;border-left:3px solid #67a992;background:#f1f7f4;color:#405d54;border-radius:0 5px 5px 0}.operator-visit-card>div{min-width:0}.operator-visit-card p{overflow-wrap:anywhere}

/* Leaflet's SVG inherits the administrative icon size from styles.css. Keep
   the route overlay at the map's full dimensions so its road geometry renders. */
#operator-route-map .leaflet-overlay-pane svg{width:auto!important;height:auto!important}
.operator-app-header{padding-top:max(12px,env(safe-area-inset-top));padding-right:max(20px,calc((100vw - 1180px)/2));padding-bottom:12px;padding-left:max(20px,calc((100vw - 1180px)/2))}
.operator-app-header .auth-brand{margin:0}
.operator-app-header>div:last-child>span{font-size:13px;font-weight:650;color:#344459}
.operator-app-main{padding-top:28px;padding-bottom:max(40px,calc(24px + env(safe-area-inset-bottom)))}
.operator-app-heading h1{color:#24334a}
.operator-app-shortcuts .primary{background:#24695e;border-color:#24695e;color:#fff}
.operator-app-tabs button{min-height:44px;font-weight:600}
.operator-portal-section{box-shadow:0 4px 16px #2034510a}
.operator-portal-section>header{margin-bottom:18px}
.operator-portal-section>header h2{margin:0 0 6px;color:#24334a}
.operator-portal-section>header p:not(.eyebrow){margin:0;line-height:1.55}
.operator-summary-cards{grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0}
.operator-summary-cards article{min-width:0;min-height:112px;align-content:center;background:#fbfcfd}
.operator-summary-cards .operator-summary-next{grid-column:span 1}
.operator-summary-cards strong{color:#1e344a}
.operator-next-visit{margin-top:16px}
.operator-visit-groups>section>h3{margin:0;color:#24334a}
.operator-visit-card{min-width:0;align-items:flex-start;background:#fff;box-shadow:0 2px 8px #20345108}
.operator-visit-card h3{overflow-wrap:anywhere;color:#24334a}
.operator-visit-card>div{min-width:0}
.operator-visit-card button,.operator-detail-actions button,.operator-map-actions a,.operator-map-actions button{min-height:42px;color:#344459}
.operator-visit-instruction{line-height:1.55}
.operator-route-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.operator-route-summary article{display:grid;align-content:center;gap:6px;min-width:0;min-height:76px;padding:12px 14px;border:1px solid #e4eaf1;border-radius:9px;background:#fbfcfd}
.operator-route-summary span{color:#718096;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.operator-route-summary strong{overflow-wrap:anywhere;color:#24334a;font-size:16px}
.operator-route-controls{grid-template-columns:minmax(130px,180px) minmax(160px,220px) minmax(0,1fr)}
.operator-route-map-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px}
.operator-route-map-heading strong{font-size:13px;color:#344459}
.operator-route-map-heading button{min-height:42px;padding:8px 13px;border:1px solid #dbe3eb;border-radius:7px;background:#fff;color:#344459;font-weight:650}
.operator-route-map-heading button:disabled{opacity:.55;cursor:not-allowed}
.operator-route-map{height:clamp(320px,48vh,480px);min-height:320px;overflow:hidden;border:1px solid #dbe3eb;background:#e8eeeb}
#operator-route-status{min-height:24px;color:#52677a;font-size:12px;line-height:1.55}
.operator-route-origin-shell,.operator-route-marker-shell{background:transparent;border:0;box-shadow:none}
.operator-route-origin-marker{display:grid;place-items:center;width:36px;height:36px;border:3px solid #fff;border-radius:50%;background:#109b62;color:#fff;font-size:13px;font-weight:800;box-shadow:0 2px 9px #17324a44}
.operator-route-sequence li{border-radius:9px}
.operator-route-sequence li.is-active{background:#edf4ff;box-shadow:inset 3px 0 #0866f5}
.operator-route-sequence li.is-active .operator-route-stop{box-shadow:0 0 0 4px #0866f52b}
.operator-route-marker-shell.is-active .operator-route-marker{background:#f08a24;transform:scale(1.17)}
.operator-route-sequence .operator-map-actions{margin-bottom:4px}
.remote-dialog{width:min(720px,calc(100% - 24px));max-height:min(90dvh,900px);padding:clamp(16px,4vw,24px)}
.remote-dialog button{min-height:42px}
body.theme-dark #operator-authenticated{background:#0c1728;color:#edf3fc}
body.theme-dark #operator-authenticated .operator-app-header,body.theme-dark #operator-authenticated .operator-portal-section,body.theme-dark #operator-authenticated .operator-visit-card{background:#14243a;border-color:#263c57;color:#edf3fc}
body.theme-dark #operator-authenticated .operator-app-header>div:last-child>span,body.theme-dark #operator-authenticated .operator-app-heading h1,body.theme-dark #operator-authenticated .operator-portal-section>header h2,body.theme-dark #operator-authenticated .operator-visit-card h3,body.theme-dark #operator-authenticated .operator-visit-groups>section>h3,body.theme-dark #operator-authenticated .operator-route-summary strong,body.theme-dark #operator-authenticated .operator-route-map-heading strong{color:#edf3fc}
body.theme-dark #operator-authenticated .operator-app-header button,body.theme-dark #operator-authenticated .operator-app-tabs button,body.theme-dark #operator-authenticated .operator-app-shortcuts button,body.theme-dark #operator-authenticated .operator-route-summary article,body.theme-dark #operator-authenticated .operator-route-controls,body.theme-dark #operator-authenticated .operator-route-map-heading button,body.theme-dark #operator-authenticated .operator-visit-card button,body.theme-dark #operator-authenticated .operator-detail-actions button,body.theme-dark #operator-authenticated .operator-map-actions a,body.theme-dark #operator-authenticated .operator-map-actions button{background:#192c45;border-color:#334a65;color:#e8eff8}
body.theme-dark #operator-authenticated .operator-app-tabs button[aria-current="page"],body.theme-dark #operator-authenticated .operator-app-shortcuts button.primary{background:#24695e;border-color:#24695e;color:#fff}
body.theme-dark #operator-authenticated .operator-route-sequence li.is-active{background:#1d3657}

@media(max-width:760px){
  .operator-app-header{padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}
  .operator-app-main{padding:22px 14px max(32px,calc(20px + env(safe-area-inset-bottom)))}
  .operator-app-heading{align-items:flex-start;gap:14px}
  .operator-app-heading h1{font-size:25px}
  .operator-app-shortcuts{width:100%}
  .operator-app-shortcuts>button{flex:1;min-height:46px}
  .operator-app-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:18px 0 14px;padding-bottom:12px}
  .operator-app-tabs button{min-width:0;min-height:48px;padding:7px 4px;font-size:11px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  .operator-portal-section{padding:17px;border-radius:10px}
  .operator-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .operator-summary-cards article{min-height:96px;padding:13px}
  .operator-summary-cards .operator-summary-next{grid-column:span 2}
  .operator-visit-groups{gap:18px}
  .operator-visit-card{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .operator-visit-card button{width:100%;min-height:46px}
  .operator-route-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .operator-route-summary article{min-height:68px;padding:10px 12px}
  .operator-route-controls{grid-template-columns:minmax(0,1fr);gap:6px;padding:11px}
  .operator-route-controls label,.operator-route-controls input,.operator-route-controls span{grid-column:1;min-width:0;width:100%}
  .operator-route-controls input{min-height:44px}
  .operator-route-map-heading{margin-top:13px}
  .operator-route-map-heading button{min-height:44px}
  .operator-route-map{height:clamp(280px,44vh,390px);min-height:280px}
  .operator-route-sequence{gap:7px;padding-left:0;list-style:none}
  .operator-route-sequence li{padding:12px 8px}
  .operator-route-sequence .operator-map-actions a,.operator-route-sequence .operator-map-actions button{min-height:42px}
  .remote-dialog{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);margin:auto}
}
@media(max-width:420px){
  .operator-app-header{gap:8px}
  .operator-app-header .auth-brand{gap:8px}
  .operator-app-header .auth-brand>b{width:36px;height:38px;font-size:22px}
  .operator-app-header .auth-brand strong{font-size:12px}
  .operator-app-header .auth-brand small{font-size:9px}
  .operator-app-header>div:last-child{gap:7px}
  .operator-app-header>div:last-child>span{max-width:84px;font-size:11px;overflow-wrap:anywhere}
  .operator-app-header button{min-height:42px;padding:8px 10px}
  .operator-app-main{padding-right:11px;padding-left:11px}
  .operator-portal-section{padding:13px}
  .operator-app-tabs{gap:4px}
  .operator-app-tabs button{font-size:10px}
  .operator-route-map{height:300px;min-height:260px}
  .operator-route-summary strong{font-size:14px}
  .operator-route-sequence .operator-map-actions{align-items:stretch}
  .operator-route-sequence .operator-map-actions a,.operator-route-sequence .operator-map-actions button{flex:1;text-align:center}
}