/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root{
  --navy-950:#0A1B33; --navy-900:#0F2545; --navy-800:#173463; --navy-100:#E7ECF5;
  --teal-600:#0E8C82; --teal-500:#14A399; --teal-100:#E1F5F2;
  --amber-500:#E8A33D; --amber-100:#FCF0DC;
  --red-600:#D6455A; --red-100:#FCE7EA;
  --green-600:#2E9E5B; --green-100:#E3F6EA;
  --slate-900:#16233D; --slate-600:#5B6B85; --slate-400:#8C99B2; --slate-200:#DDE3ED; --slate-100:#EEF1F7;
  --bg:#F4F6FA; --card:#FFFFFF; --radius:10px;
  --shadow-sm:0 1px 2px rgba(15,37,69,.06); --shadow-md:0 4px 16px rgba(15,37,69,.08);
  --font-display:'Manrope',sans-serif; --font-body:'Inter',sans-serif;
  --font-arabic:'Noto Sans Arabic','Inter',sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--slate-900);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--navy-900);}
button{font-family:var(--font-body);cursor:pointer;}
input,select,textarea{font-family:var(--font-body);}
a{color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:8px;}

.hidden{display:none !important;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
.pill-scheduled{background:var(--slate-100);color:var(--slate-600);}
.pill-inprogress,.pill-enroute{background:var(--amber-100);color:#8A5A10;}
.pill-arrived{background:var(--teal-100);color:var(--teal-600);}
.pill-completed{background:var(--green-100);color:var(--green-600);}
.pill-cancelled{background:var(--red-100);color:var(--red-600);}
.pill-active{background:var(--green-100);color:var(--green-600);}
.pill-inactive{background:var(--slate-100);color:var(--slate-600);}
.pill-available{background:var(--green-100);color:var(--green-600);}
.pill-ontransfer{background:var(--amber-100);color:#8A5A10;}
.pill-maintenance{background:var(--red-100);color:var(--red-600);}

.btn{border:none;border-radius:8px;padding:9px 16px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.15s;}
.btn-primary{background:var(--navy-900);color:#fff;}
.btn-primary:hover{background:var(--navy-800);}
.btn-teal{background:var(--teal-600);color:#fff;}
.btn-teal:hover{background:#0b756c;}
.btn-ghost{background:transparent;color:var(--slate-600);border:1px solid var(--slate-200);}
.btn-ghost:hover{background:var(--slate-100);}
.btn-danger{background:transparent;color:var(--red-600);border:1px solid var(--red-100);}
.btn-danger:hover{background:var(--red-100);}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--slate-200);}
.card-pad{padding:20px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;padding:10px 14px;background:var(--navy-100);color:var(--navy-900);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;}
td{padding:11px 14px;border-bottom:1px solid var(--slate-100);color:var(--slate-900);vertical-align:middle;}
tr:hover td{background:#FAFBFD;}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--slate-200);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--slate-600);margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--slate-200);border-radius:7px;font-size:13.5px;background:#fff;color:var(--slate-900);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-500);outline-offset:0;border-color:var(--teal-500);}
.field small{color:var(--slate-400);font-size:11.5px;}
.field-error{color:var(--red-600);font-size:11.5px;margin-top:4px;display:block;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr;}}

#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 20% 15%, rgba(20,163,153,.25), transparent 45%),
  radial-gradient(circle at 85% 80%, rgba(15,37,69,.4), transparent 50%),
  var(--navy-950);padding:20px;}
#publicMissionScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(circle at 20% 15%, rgba(20,163,153,.25), transparent 45%),
  radial-gradient(circle at 85% 80%, rgba(15,37,69,.4), transparent 50%),
  var(--navy-950);padding:20px;}
#publicMissionScreen .login-card{max-width:460px;}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;}
.login-head{background:var(--navy-900);padding:28px 30px 22px;color:#fff;}
.login-head .tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-500);font-weight:700;margin-bottom:10px;}
.login-head h1{color:#fff;font-size:22px;}
.login-head p{color:var(--slate-400);font-size:13px;margin-top:6px;}
.login-body{padding:26px 30px 30px;}
.login-demo{background:var(--slate-100);border-radius:8px;padding:12px 14px;font-size:11.5px;color:var(--slate-600);margin-top:16px;line-height:1.7;}
.login-demo b{color:var(--navy-900);}
#loginError{color:var(--red-600);font-size:12.5px;margin-top:8px;display:none;}

#app{display:flex;min-height:100vh;}
#sidebar{width:230px;background:var(--navy-950);flex-shrink:0;display:flex;flex-direction:column;padding:18px 0;transition:transform .25s ease;}
.brand{display:flex;align-items:center;gap:10px;padding:0 20px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:0;}
.brand-badge{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--teal-500),var(--navy-800));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--font-display);font-size:14px;flex-shrink:0;}
.brand-name{color:#fff;font-family:var(--font-display);font-weight:800;font-size:14.5px;line-height:1.2;}
.brand-sub{color:var(--slate-400);font-size:10.5px;letter-spacing:.05em;}
.sidebar-close{display:none;margin-left:auto;background:none;border:none;color:var(--slate-400);font-size:22px;line-height:1;padding:4px 8px;border-radius:6px;transition:.15s;}
.sidebar-close:hover{color:#fff;background:rgba(255,255,255,.08);}
.conn-status{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:8px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px;}
.conn-connected{color:var(--teal-500);}
.conn-connecting{color:var(--amber-500);}
.conn-offline{color:#DE6A7B;} /* lightened from --red-600 (3.99:1 on navy-950) to clear 4.5:1 */
.nav-item{appearance:none;display:flex;align-items:center;gap:11px;padding:12px 20px;color:var(--slate-400);font-size:13.5px;font-weight:600;cursor:pointer;border-left:3px solid transparent;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;font-family:inherit;}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.04);}
.nav-item.active{color:#fff;background:rgba(20,163,153,.15);border-left-color:var(--teal-500);}
.nav-icon{width:18px;text-align:center;}
.nav-section{margin-top:auto;padding:14px 20px 0;border-top:1px solid rgba(255,255,255,.08);}
.user-chip{display:flex;align-items:center;gap:9px;color:#fff;}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--teal-600);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;}
.user-name{font-size:12.5px;font-weight:700;line-height:1.2;}
.user-role{font-size:10.5px;color:var(--slate-400);text-transform:capitalize;}
.logout-btn{margin-top:10px;width:100%;background:rgba(255,255,255,.06);color:var(--slate-400);border:none;border-radius:6px;padding:9px;font-size:12px;font-weight:600;}
.logout-btn:hover{color:#fff;background:rgba(255,255,255,.12);}

#sidebarOverlay{position:fixed;inset:0;background:rgba(10,27,51,.5);z-index:899;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease;}
#sidebarOverlay.open{opacity:1;visibility:visible;pointer-events:auto;}

#main{flex:1;min-width:0;display:flex;flex-direction:column;}
#topbar{background:#fff;border-bottom:1px solid var(--slate-200);padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
#topbar h2{font-size:19px;}
#topbar .sub{color:var(--slate-600);font-size:12.5px;margin-top:2px;}
#content{padding:22px 26px 60px;flex:1;}
.menu-toggle{display:none;background:none;border:1px solid var(--slate-200);color:var(--navy-900);font-size:18px;line-height:1;padding:8px 11px;border-radius:8px;flex-shrink:0;transition:.15s;}
.menu-toggle:hover{background:var(--slate-100);}
.topbar-head{display:flex;align-items:center;gap:12px;min-width:0;}

/* ---------- Mobile navigation (off-canvas sidebar) ---------- */
@media(max-width:880px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .sidebar-close{display:inline-flex;align-items:center;justify-content:center;}
  #sidebar{
    position:fixed; inset:0 auto 0 0; z-index:900; height:100vh;
    transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  #sidebar.open{transform:translateX(0);}
  #topbar{padding:14px 16px;}
  #content{padding:16px 16px 50px;}
  .nav-item{padding:14px 20px;font-size:14.5px;} /* larger touch targets in the field */
}

/* Visible keyboard-focus ring everywhere, including on the dark sidebar
   where the browser default outline is hard to see against navy-950. */
a:focus-visible, button:focus-visible, .nav-item:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal-500); outline-offset:2px; border-radius:4px;
}
#sidebar :focus-visible{ outline-color:#fff; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Respects the OS-level reduced-motion preference — this app leans on a
   pulsing-red pattern (panic button, emergency banner, map markers) for
   urgency, which can be genuinely uncomfortable, not just distracting,
   for people with vestibular conditions. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px;}
.stat-card{padding:16px 18px;}
.stat-card .lbl{font-size:11.5px;font-weight:700;color:var(--slate-600);text-transform:uppercase;letter-spacing:.04em;}
.stat-card .val{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--navy-900);margin-top:6px;}
.stat-card .delta{font-size:11.5px;margin-top:4px;font-weight:600;}
.chart-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:18px;}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr;}}
.chart-box{height:250px;position:relative;}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.search-box{padding:8px 12px;border:1px solid var(--slate-200);border-radius:7px;font-size:13px;min-width:200px;background:#fff;}
.filter-select{padding:8px 10px;border:1px solid var(--slate-200);border-radius:7px;font-size:13px;background:#fff;}

.route-strip{display:flex;align-items:center;gap:6px;min-width:170px;}
.route-strip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.route-strip .dot.dep{background:var(--teal-600);}
.route-strip .dot.arr{background:var(--red-600);}
.route-strip .line{flex:1;height:2px;background:var(--slate-200);position:relative;min-width:30px;}
.route-strip .lbl{font-size:11.5px;color:var(--slate-600);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

#modalOverlay{position:fixed;inset:0;background:rgba(10,27,51,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1000;overflow-y:auto;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal.modal-wide{max-width:900px;}
.modal-head{padding:18px 24px;border-bottom:1px solid var(--slate-200);display:flex;align-items:center;justify-content:space-between;}
.modal-head h3{font-size:16.5px;}
.modal-close{background:none;border:none;font-size:20px;color:var(--slate-400);line-height:1;padding:4px;}
.modal-close:hover{color:var(--navy-900);}
.modal-body{padding:22px 24px;max-height:70vh;overflow-y:auto;}
.modal-foot{padding:16px 24px;border-top:1px solid var(--slate-200);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}

.map-box{border-radius:10px;overflow:hidden;border:1px solid var(--slate-200);}
.picker-map{height:260px;width:100%;}
.preview-map{height:220px;width:100%;}
.fullmap{height:calc(100vh - 220px);width:100%;}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--slate-600);}
.map-legend span{display:inline-flex;align-items:center;gap:6px;}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.geosearch-row{display:flex;gap:8px;margin-bottom:10px;}
.geosearch-row input{flex:1;}

.progress-outer{height:8px;background:var(--slate-100);border-radius:6px;overflow:hidden;margin:12px 0;}
.progress-inner{height:100%;background:linear-gradient(90deg,var(--teal-500),var(--teal-600));width:0%;transition:width .3s linear;}
.eta-box{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate-600);margin-top:4px;}
.eta-box b{color:var(--navy-900);}

.empty{padding:40px 20px;text-align:center;color:var(--slate-400);}
.empty b{display:block;color:var(--slate-600);font-size:14px;margin-bottom:4px;}

.banner{padding:11px 14px;border-radius:8px;font-size:12.5px;font-weight:600;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start;}
.banner-warn{background:var(--amber-100);color:#8A5A10;}
.banner-err{background:var(--red-100);color:var(--red-600);}

.chip-select{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--slate-200);border-radius:7px;background:#fff;max-height:180px;overflow-y:auto;}
.chip{padding:4px 10px;border-radius:20px;background:var(--slate-100);color:var(--slate-600);font-size:12px;font-weight:600;cursor:pointer;border:1px solid transparent;}
.chip.on{background:var(--teal-100);color:var(--teal-600);border-color:var(--teal-500);}

@keyframes pulseRed{
  0%{box-shadow:0 0 0 0 rgba(214,69,90,.55);}
  70%{box-shadow:0 0 0 9px rgba(214,69,90,0);}
  100%{box-shadow:0 0 0 0 rgba(214,69,90,0);}
}
.btn-panic{background:var(--red-600);color:#fff;font-weight:800;letter-spacing:.02em;animation:pulseRed 1.8s infinite;}
.btn-panic:hover{background:#b7374a;}
.pill-emergency{background:var(--red-600);color:#fff;animation:pulseRed 1.8s infinite;}
.emergency-banner{background:var(--red-600);color:#fff;border-radius:10px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;animation:pulseRed 2s infinite;}
.emergency-banner b{font-size:14px;}
.emergency-banner .em-detail{font-size:12.5px;opacity:.92;margin-top:3px;}
.emergency-log-item{border-left:3px solid var(--red-600);padding:6px 10px;margin-bottom:6px;background:var(--red-100);border-radius:0 6px 6px 0;font-size:12.5px;}
.pulse-marker{animation:pulseRed 1.4s infinite;border-radius:50%;}
.route-tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:12px;letter-spacing:.03em;}
.route-tag.on{background:var(--teal-100);color:var(--teal-600);}
.route-tag.off{background:var(--slate-100);color:var(--slate-600);}

/* ---- Knowledge Base ---- */
.kb-ask-row{display:flex;gap:8px;}
.kb-quick-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.kb-chat{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px 2px;}
.kb-msg-q{align-self:flex-end;background:var(--navy-900);color:#fff;padding:9px 14px;border-radius:14px 14px 3px 14px;max-width:78%;font-size:13.5px;}
.kb-msg-a{align-self:flex-start;background:#fff;border:1px solid var(--slate-200);border-radius:14px 14px 14px 3px;padding:12px 14px;max-width:88%;font-size:13.5px;}
.kb-source{border-left:3px solid var(--teal-600);background:var(--teal-100);border-radius:0 8px 8px 0;padding:9px 12px;margin-bottom:8px;}
.kb-source:last-of-type{margin-bottom:0;}
.kb-source-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.kb-confidence{font-size:11px;font-weight:700;color:var(--teal-600);margin-left:auto;}
.kb-excerpt{color:var(--slate-900);line-height:1.55;white-space:pre-line;}
.kb-rate-row{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--slate-100);font-size:12px;color:var(--slate-600);}

@media print{
  #sidebar,#topbar,.toolbar,.no-print{display:none !important;}
  #content{padding:0;}
  body{background:#fff;}
}

/* ---- Language toggle ---- */
.lang-toggle{background:transparent;border:1px solid var(--slate-200);color:var(--slate-600);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;letter-spacing:.02em;}
.lang-toggle:hover{background:var(--slate-100);}
#loginScreen{position:relative;}
#loginScreen .lang-toggle{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;}
#loginScreen .lang-toggle:hover{background:rgba(255,255,255,.18);}
#publicMissionScreen{position:relative;}
#publicMissionScreen .lang-toggle{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;}
#publicMissionScreen .lang-toggle:hover{background:rgba(255,255,255,.18);}
.lang-toggle-sidebar{width:100%;margin-bottom:10px;border-color:rgba(255,255,255,.15);color:var(--slate-400);}
.lang-toggle-sidebar:hover{background:rgba(255,255,255,.06);color:#fff;}

/* ---- Arabic / RTL ----
   Scope, stated plainly: this mirrors the app's LAYOUT correctly (sidebar
   side, icon/text order, table alignment, form field alignment) for every
   view, since that's structural CSS that applies regardless of which
   specific strings are translated. It does not by itself translate any
   text — that's I18n.t()'s job in app.js, applied to the always-visible
   chrome (nav/titles/login/statuses/common buttons) as of this build. */
body.rtl{direction:rtl;}
body.rtl, body.rtl input, body.rtl select, body.rtl textarea, body.rtl button{font-family:var(--font-arabic);}
body.rtl #sidebar{order:2;}
body.rtl #main{order:1;}
body.rtl #app{flex-direction:row-reverse;}
body.rtl .nav-item{border-left:none;border-right:3px solid transparent;text-align:right;}
body.rtl .nav-item.active{border-left-color:transparent;border-right-color:var(--teal-500);}
body.rtl .brand,body.rtl .user-chip,body.rtl .topbar-head,body.rtl .toolbar,body.rtl .field-row{flex-direction:row-reverse;}
body.rtl th,body.rtl td{text-align:right;}
body.rtl .modal-head{flex-direction:row-reverse;}
body.rtl .route-strip{flex-direction:row-reverse;}
body.rtl #sidebar.open{transform:translateX(0);}
@media(max-width:880px){
  body.rtl #sidebar{inset:0 0 0 auto;transform:translateX(100%);}
  body.rtl #sidebar.open{transform:translateX(0);}
}