/* AVTR design layer (website). Loaded after styles.css. Direction: "Clear" (option 1: clarity, spacing, one green for actions and selection)
   combined with "Refined" (option 2: split sign-in, white navigation rail, list beside map). Same tokens as the Android design system (mobile/web/css/ds.css).
   Pure white canvas, no gradients, SVG icons only, visible keyboard focus, reduced-motion support, RTL through logical properties. */
:root{
  --d-white:#fff;--d-g900:#06432c;--d-g800:#085437;--d-g700:#0c6a45;--d-g600:#10805a;--d-g200:#c6e3d3;--d-g100:#e0f1e8;--d-g50:#f2f9f5;
  --d-n900:#14201b;--d-n800:#25322c;--d-n700:#3b4943;--d-n600:#52625a;--d-n500:#7a8a82;--d-n300:#cbd4cf;--d-n200:#e1e7e3;--d-n100:#f0f3f1;--d-n50:#f8faf9;
  --d-r-sm:10px;--d-r-md:14px;--d-r-lg:20px;--d-ease:cubic-bezier(.2,.7,.2,1);
  --page:#fff;--border:#e1e7e3;--surface-soft:#f8faf9;
}
html,body,body.auth-pending{background:#fff}
body{color:var(--d-n900)}

/* ---------- focus, motion ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--d-g700);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- buttons and inputs (all screens) ---------- */
button.primary,.primary{background:var(--d-g700);border:1px solid var(--d-g700);color:#fff;border-radius:var(--d-r-sm);font-weight:650;min-height:44px;transition:background .15s var(--d-ease),box-shadow .15s var(--d-ease),transform .08s var(--d-ease)}
button.primary:hover,.primary:hover{background:#09583a}
button.primary:active,.primary:active{background:#074a30;transform:translateY(1px)}
button.primary:disabled,.primary:disabled{background:var(--d-n200);border-color:var(--d-n200);color:var(--d-n500);cursor:not-allowed;transform:none}
button.outline,.outline{background:#fff;border:1.5px solid var(--d-n300);color:var(--d-n800);border-radius:var(--d-r-sm);min-height:44px;font-weight:600;transition:border-color .15s var(--d-ease),background .15s var(--d-ease)}
button.outline:hover,.outline:hover{border-color:var(--d-g700);background:var(--d-g50);color:var(--d-g800)}
input:not([type=checkbox]):not([type=radio]),select,textarea{background:#fff;border:1.5px solid var(--d-n300);border-radius:var(--d-r-sm);color:var(--d-n900);transition:border-color .15s var(--d-ease),box-shadow .15s var(--d-ease)}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--d-n500)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--d-g700);box-shadow:0 0 0 4px rgba(12,106,69,.16)}
input:disabled,select:disabled,textarea:disabled{background:var(--d-n50);color:var(--d-n500);cursor:not-allowed}

/* ---------- sign-in: split layout, centred card on small screens ---------- */
.login-screen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0;min-height:100vh;padding:0;background:#fff}
.login-brand-panel{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;max-width:none;padding:clamp(32px,6vw,96px);text-align:start;border-inline-end:1px solid var(--d-n200);background:#fff}
.login-brand-panel .brand-logo-card{margin:0}
.login-brand-panel img{width:min(260px,60vw)}
.login-brand-panel>div:not(.brand-logo-card){max-width:460px}
.login-brand-panel>div:not(.brand-logo-card)::before{content:"";display:block;width:48px;height:3px;background:var(--d-g700);border-radius:2px;margin-block-end:22px}
.login-brand-panel h1{font-size:clamp(22px,2.5vw,32px);line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--d-n900)}
.login-brand-panel p{font-size:16px;line-height:1.6;color:var(--d-n600);margin-block-start:14px}
html[lang=ar] .login-brand-panel h1{font-size:clamp(24px,2.4vw,30px);line-height:1.45;letter-spacing:0}
.login-card{justify-self:center;width:min(100%,440px);margin:0;padding:34px 32px 28px;border:0;border-radius:0;box-shadow:none;background:#fff;display:flex;flex-direction:column;gap:18px}
.login-card-head{padding-inline-end:84px;margin-block-end:2px}
.login-card-head h2{font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--d-n900)}
.login-card-head p{color:var(--d-n600);margin:6px 0 0;font-size:14.5px}
.login-card label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--d-n700)}
.login-forgot{margin:-2px 0 0;color:var(--d-n600);font-size:12.5px;line-height:1.5;text-align:start}
html[dir=rtl] .login-forgot{text-align:right}
.login-card label>input,.login-card .pw-wrap input{min-height:50px;padding-block:0;padding-inline:14px;font-size:16px}
.login-card .pw-wrap{position:relative;display:block}
.login-card .pw-wrap input{width:100%;padding-inline-end:48px}
.login-card .pw-toggle{position:absolute;inset-block:0;inset-inline-end:4px;width:44px;display:grid;place-items:center;background:none;border:0;color:var(--d-n600);border-radius:10px;cursor:pointer}
.login-card .pw-toggle:hover{color:var(--d-g700);background:var(--d-g50)}
.login-submit{min-height:50px;font-size:16px;margin-block-start:4px;width:100%}
.login-download{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;margin:4px 0 0;padding:6px 10px;border:0;background:transparent;color:var(--d-n600);font-weight:600;font-size:12.5px;text-decoration:none;border-radius:999px;align-self:center}
.login-download .gi{color:var(--d-g700);font-size:14px}
.login-download:hover,.login-download:focus-visible{background:var(--d-g50);color:var(--d-g700);text-decoration:none}
.login-message{min-height:20px;margin:0;font-size:14px;color:#b3261e}
.login-card small{color:var(--d-n500);line-height:1.5;text-align:center}
.login-lang{inset-block-start:18px;inset-inline-end:18px;color:var(--d-g700);font-weight:650}
@media(max-width:900px){
  .login-screen{grid-template-columns:1fr;align-content:start}
  .login-brand-panel{align-items:center;text-align:center;padding:28px 20px 8px;border-inline-end:0;gap:14px}
  .login-brand-panel>div:not(.brand-logo-card)::before{margin-inline:auto;margin-block-end:14px}
  .login-brand-panel h1{font-size:24px}
  .login-brand-panel p{display:none}
  .login-card{padding:12px 20px 32px}
}

/* ---------- application shell: white navigation rail, white header ---------- */
.sidebar{background:#fff;color:var(--d-n800);border-inline-end:1px solid var(--d-n200);box-shadow:none}
.sidebar .brand{color:var(--d-n900)}
.sidebar .brand b{color:var(--d-n900);font-weight:700}
.sidebar .brand small{color:var(--d-n600)}
.sidebar nav button{color:var(--d-n700);border-radius:var(--d-r-sm);background:transparent;transition:background .15s var(--d-ease),color .15s var(--d-ease)}
.sidebar nav button:hover{background:var(--d-n100);color:var(--d-n900);transform:none}
.sidebar nav button.active,html[dir=rtl] .sidebar nav button.active{background:var(--d-g100);color:var(--d-g800);font-weight:650;transform:none}
.sidebar nav button.active b{font-weight:650}
.sidebar nav button i{background:var(--d-g700);color:#fff}
.sidebar .role-box{background:var(--d-n50);border:1px solid var(--d-n200);color:var(--d-n700)}
.sidebar .role-box label{color:var(--d-n600)}
.sidebar .role-box select{background:#fff;color:var(--d-n900);border:1.5px solid var(--d-n300)}
header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--d-n200)}
.page-heading h1{font-weight:700;color:var(--d-n900)}
.page-heading p{color:var(--d-n600)}
.system-status{color:var(--d-g800);background:var(--d-g50);border:1px solid var(--d-g200)}
.language-toggle,.outline.download-link,.logout-button{border:1.5px solid var(--d-n300);background:#fff;color:var(--d-n800)}
.language-toggle:hover,.outline.download-link:hover,.logout-button:hover{border-color:var(--d-g700);background:var(--d-g50);color:var(--d-g800)}
.notification-button em{background:var(--d-g700);color:#fff}
.profile-chip span{background:var(--d-g100);color:var(--d-g800)}

/* ---------- cards, tables, KPI tiles ---------- */
.panel,.kpi,.card,.report-card{background:#fff;border:1px solid var(--d-n200);border-radius:var(--d-r-md);box-shadow:none}
.panel,.kpi{transition:border-color .15s var(--d-ease)}
.kpi:hover,.panel:hover{border-color:var(--d-n300)}
.kpi b,.kpi strong{color:var(--d-n900)}
table{font-size:13px}
th{background:var(--d-n50);color:var(--d-n600);font-weight:650;letter-spacing:.02em;border-bottom:1px solid var(--d-n200)}
td{border-bottom:1px solid var(--d-n100)}
tbody tr{transition:background .12s var(--d-ease)}
tbody tr:hover{background:var(--d-n50)}
.badge,.status-pill,.chip{border-radius:999px}
.modal-dialog{border-radius:var(--d-r-lg);box-shadow:0 24px 70px rgba(20,32,27,.28)}
.modal-dialog::backdrop{background:rgba(20,32,27,.45);backdrop-filter:none}
::selection{background:var(--d-g100)}

/* ---------- Routes page: list beside the map (clear, spaced) ---------- */
.route-list .route-row,.routes-list .route-row,#routesList .route-row{border:1px solid var(--d-n200);border-radius:var(--d-r-md);background:#fff;transition:border-color .15s var(--d-ease),background .15s var(--d-ease)}
.route-list .route-row:hover,.routes-list .route-row:hover,#routesList .route-row:hover{border-color:var(--d-n300);background:var(--d-n50)}
.route-list .route-row.selected,.route-list .route-row.active,.routes-list .route-row.selected,#routesList .route-row.selected{border-color:var(--d-g700);background:var(--d-g50);box-shadow:inset 3px 0 0 var(--d-g700)}
html[dir=rtl] .route-list .route-row.selected,html[dir=rtl] #routesList .route-row.selected{box-shadow:inset -3px 0 0 var(--d-g700)}

/* ---------- touch / tablet ---------- */
@media(pointer:coarse){button,.outline,.primary,select,input:not([type=checkbox]):not([type=radio]){min-height:44px}}
@media(max-width:1000px) and (min-width:761px){.page{padding:18px}}

/* leading icons inside the sign-in fields */
.in-wrap{position:relative;display:block}
.in-icon{position:absolute;inset-inline-start:14px;inset-block-start:50%;transform:translateY(-50%);color:var(--d-n500);pointer-events:none;z-index:1}
.login-card .in-wrap input,.login-card .pw-wrap input{width:100%;padding-inline-start:46px}
.login-card .in-wrap:focus-within .in-icon,.login-card .pw-wrap:focus-within .in-icon{color:var(--d-g700)}
/* sign-in refinements */
.login-card{padding-block-start:64px;gap:12px}
.login-card-head{padding-inline-end:0}
.login-card label{margin:0}
.login-card label input{margin:0}
.login-card small{color:var(--d-n600)}
.login-card .in-wrap,.login-card .pw-wrap{margin:0}
.login-forgot{margin-top:-4px;margin-bottom:0;font-size:12px;line-height:1.5}

/* ---------- phone: compact header, nothing wider than the screen ---------- */
header{gap:10px}
header .header-actions>*{min-height:40px}
@media(max-width:760px){
  header{height:auto;min-height:64px;padding:10px 14px;flex-wrap:wrap;row-gap:6px}
  header .header-logo,header .system-status,header .download-link{display:none}
  header .mobile-menu span{display:none}
  header .mobile-menu{min-width:44px;padding:0 10px}
  header .page-heading{flex:1 1 0;min-width:0}
  header .page-heading h1{font-size:19px;overflow-wrap:normal;word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header .page-heading p{display:none}
  header .header-actions{flex:0 0 auto;gap:6px}
  .language-toggle,.logout-button{padding-inline:12px;font-size:14px}
  .page{padding:16px 14px}
  .panel,.dashboard-grid>*,.report-grid>*{min-width:0;max-width:100%}
  .panel svg,.panel canvas{max-width:100%;height:auto}
  .panel{overflow:hidden}
}
header .header-actions .outline,header .language-toggle,header .logout-button{font-size:14px;min-height:40px;padding-inline:14px;border-radius:var(--d-r-sm)}
header .profile-chip{min-height:40px}

/* Typography (owner decision): Tajawal for body text, Almarai for headings; bundled locally so it works offline. */
html body,html[lang=ar] body,html[dir=rtl] body,button,input,select,textarea{font-family:"Tajawal","Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif}
h1,h2,h3,h4,.title,.sec,.page-head h1,.login-brand-panel h1,.card h3,dialog h2{font-family:"Almarai","Tajawal","Segoe UI",system-ui,Tahoma,Arial,sans-serif;font-weight:800}

/* Team > Employees: combined filters and pages */
.team-filters select{min-width:150px;max-width:220px}.team-filters input[type=search]{min-width:200px;flex:1 1 220px}
.team-pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:12px 0 4px}
tr.ref-row td{background:#fafaf5}tr.ref-row small{display:block}

/* Camera-only evidence fields */
.cam-field{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.cam-thumbs{display:flex;gap:8px;flex-wrap:wrap}.cam-thumbs figure{margin:0;display:flex;flex-direction:column;gap:4px;align-items:center}.cam-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid #d6dfd9}
.live-cam{position:fixed;inset:0;z-index:99999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.live-cam video{max-width:100%;max-height:80%}.live-cam-bar{display:flex;gap:12px}

/* Operations map: drawing controls and point handles */
.draw-bar{margin-top:8px}.draw-bar .poly-actions{flex-wrap:wrap}.vtx-icon{background:none;border:0}
.vtx{display:block;width:18px;height:18px;margin:4px;border-radius:50%;background:#fff;border:3px solid #0c6a45;box-sizing:border-box;cursor:grab}.vtx.sel{background:#0c6a45}
.vtx.mid{width:16px;height:16px;margin:2px;border-width:2px;border-color:#51635a;color:#51635a;font:700 12px/11px sans-serif;text-align:center;opacity:.8}

/* Schedules: smart scheduling panel */
#smartPanel .sm-controls{align-items:flex-end;flex-wrap:wrap;gap:10px}.sm-limit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.sm-limit-grid input{width:100%}
.sm-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:6px 0}.sm-table .sm-bad td{background:#fff4f4}.sm-list{list-style:none;padding:0;display:grid;gap:10px}.sm-card{border:1px solid #d6dfd9;border-radius:12px;padding:10px 12px}.sm-card p{margin:6px 0}

/* Operations map: the Immediate checkbox and its label are ONE grouped control (works in LTR and RTL) */
label.dp-check{display:flex;flex-direction:row;align-items:center;gap:8px;width:auto;cursor:pointer}label.dp-check input[type=checkbox]{flex:none;width:auto;margin:0}label.dp-check b{font-weight:600}