/* ============================================================
   Bus Fleet & Booking  —  Style A
   Neutral base. Colour only where it carries meaning.
   ============================================================ */

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

:root{
  /* Ink */
  --ink:#16181A;
  --ink-2:#5C6063;
  --ink-3:#8A8E91;
  --ink-4:#B0B4B6;

  /* Sidebar — safed, jaisa naye design mein hai.
     Kaala wapas chahiye ho to teeno lines ye kar dein:
       --nav:#16181A;  --nav-2:#26292C;  --nav-txt:#90969A;
     aur neeche .side wala block bhi wapas kar dein. */
  --nav:#FFFFFF;
  --nav-2:#E7F4EE;
  --nav-txt:#5C6063;

  /* Accent — the only colour that means "act" */
  --brand:#127C55;
  --brand-d:#0C5F41;
  --brand-l:#E7F4EE;
  --brand-txt:#0C5F41;

  /* v1 compatibility */
  --pine:#127C55;
  --pine-d:#0C5F41;
  --pine-l:#E7F4EE;

  /* Surfaces */
  --canvas:#FBFBFA;
  --surface:#FFFFFF;
  --surface-2:#F7F7F6;
  --line:#E4E4E2;
  --line-2:#EFEFED;

  /* Signals */
  --amber:#B45309;
  --amber-l:#FEF3C7;
  --red:#DC2626;
  --red-l:#FEE2E2;
  --blue:#2563EB;
  --blue-l:#EEF2FF;
  --green:#15803D;
  --green-l:#DCFCE7;
  --violet:#6D28D9;
  --violet-l:#F3EEFE;

  /* Shape */
  --r:8px;
  --r-lg:10px;
  --r-sm:6px;
  --sidebar:236px;

  /* Depth — barely there */
  --sh-1:0 1px 2px rgba(22,24,26,.05);
  --sh-2:0 1px 2px rgba(22,24,26,.05), 0 4px 10px rgba(22,24,26,.04);
  --sh-3:0 4px 12px rgba(22,24,26,.08), 0 16px 32px rgba(22,24,26,.1);
  --shadow:var(--sh-1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;color:var(--ink);background:var(--canvas);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,.display{font-weight:600;letter-spacing:-.021em;margin:0;color:var(--ink)}
h1{font-size:21px;line-height:1.25}
h2{font-size:15px;letter-spacing:-.014em}
h3{font-size:13.5px;letter-spacing:-.01em}
.mono,.plate,td.mono{
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
a{color:var(--brand);text-decoration:none;transition:color .12s}
a:hover{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:4px}
::selection{background:var(--brand-l);color:var(--brand-txt)}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}

.side{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:var(--nav);color:var(--nav-txt);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  border-inline-end:1px solid var(--line);
}
.brand{padding:20px 16px 16px}
.brand .bn{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.018em;line-height:1.3}
.brand .bs{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  color:#6B7175;margin-top:4px;font-weight:500;
}

.nav{padding:2px 8px 14px;overflow-y:auto;flex:1}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
.nav .grp{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-4);
  padding:16px 9px 6px;font-weight:600;
}
.nav a{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-sm);color:var(--nav-txt);font-size:13px;
  font-weight:400;transition:background .12s,color .12s;margin-bottom:1px;
}
.nav a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.nav a.on{
  background:var(--nav-2);color:var(--brand-d);font-weight:600;
  position:relative;
}
.nav a.on::before{
  content:'';position:absolute;inset-inline-start:-10px;top:6px;bottom:6px;
  width:3px;border-radius:0 3px 3px 0;background:var(--brand);
}
.nav a .ic{width:16px;text-align:center;flex:0 0 16px;opacity:.6;font-size:12.5px}
.nav a.on .ic{opacity:1}
.nav a .pill{
  margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:600;
  padding:1px 6px;border-radius:20px;font-family:'JetBrains Mono',monospace;
}

.side .who{padding:13px 16px;border-top:1px solid var(--line-2);font-size:12px}
.side .who b{display:block;color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:-.01em}
.side .who span{color:var(--ink-3);font-size:11px}
.side .who a{color:var(--nav-txt);font-size:11.5px;display:inline-block;margin-top:6px}
.side .who a:hover{color:var(--brand)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.top{
  background:rgba(251,251,250,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 26px;display:flex;align-items:center;gap:15px;
  position:sticky;top:0;z-index:20;
}
.top .crumb{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);margin-bottom:3px;font-weight:500;
}
.top .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.burger{
  display:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;font-size:15px;
}

.wrap{padding:22px 26px 56px;flex:1;max-width:1560px;width:100%}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
.card>.hd{
  padding:14px 17px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:12px;
}
.card>.hd .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.card>.bd{padding:17px}
.card>.bd.tight{padding:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mb{margin-bottom:14px}
.mt{margin-top:14px}

/* ---------- Stat tiles ---------- */
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 17px;box-shadow:var(--sh-1);position:relative;
}
.stat .k{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);font-weight:600;
}
.stat .v{
  font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:500;
  line-height:1.15;margin-top:9px;letter-spacing:-.04em;color:var(--ink);
}
.stat .sub{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.45}
/* Accent only as a small dot, not a slab */
.stat .k::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:7px;vertical-align:1px;background:var(--ink-4);
}
.stat.acc-pine .k::before{background:var(--brand)}
.stat.acc-amber .k::before{background:var(--amber)}
.stat.acc-red .k::before{background:var(--red)}
.stat.acc-blue .k::before{background:var(--blue)}
.stat.acc-green .k::before{background:var(--green)}

/* ---------- Tables ---------- */
.tw{overflow-x:auto}
.tw::-webkit-scrollbar{height:8px}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{
  text-align:left;padding:10px 16px;background:transparent;
  border-bottom:1px solid var(--line);
  font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);font-weight:600;white-space:nowrap;
}
table.t td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tbody tr{transition:background .1s}
table.t tbody tr:hover{background:var(--surface-2)}
table.t tbody tr:last-child td{border-bottom:none}
table.t td.num,table.t th.num{
  text-align:right;font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
table.t tfoot td{background:var(--surface-2);font-weight:600;border-top:1px solid var(--line)}

.empty{padding:48px 24px;text-align:center;color:var(--ink-3)}
.empty .big{font-size:28px;opacity:.2;margin-bottom:12px}
.empty b{
  display:block;color:var(--ink);font-size:14.5px;margin-bottom:6px;
  font-weight:600;letter-spacing:-.015em;
}
.empty p{margin:0 auto 16px;max-width:380px;font-size:13px;line-height:1.6}

/* ---------- Plate ---------- */
.plate{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:12px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:2px 7px;letter-spacing:.02em;color:var(--ink);
  line-height:1.4;
}
a:hover .plate{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}

/* ---------- Badges ---------- */
.b{
  display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;
  border-radius:5px;white-space:nowrap;letter-spacing:0;line-height:1.55;
}
.b-available,.b-completed,.b-received,.b-green{background:var(--green-l);color:#14532D}
.b-booked,.b-confirmed,.b-pine{background:var(--brand-l);color:var(--brand-txt)}
.b-shared,.b-in_transit,.b-submitted,.b-blue{background:var(--brand-l);color:var(--brand-txt)}
.b-maintenance,.b-open,.b-amber{background:var(--amber-l);color:#78350F}
.b-out_of_service,.b-cancelled,.b-red,.b-critical{background:var(--red-l);color:#991B1B}
.b-grey{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.b-violet,.b-temp{background:var(--violet-l);color:#5B21B6}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;
  padding:7px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;
  line-height:1.4;transition:all .12s;box-shadow:var(--sh-1);white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:#D5D5D2;text-decoration:none;color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn-p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.btn-d{background:var(--surface);border-color:#F1BDBD;color:var(--red)}
.btn-d:hover{background:var(--red-l);border-color:#E9A5A5;color:#991B1B}
.btn-a{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-a:hover{background:#92400E;border-color:#92400E;color:#fff}
.btn-sm{padding:4px 10px;font-size:12px;border-radius:5px}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Forms ---------- */
.f{margin-bottom:14px}
.f label{
  display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.08em;
}
.f label .req{color:var(--red);margin-left:1px}
.f input[type=text],.f input[type=number],.f input[type=date],.f input[type=datetime-local],
.f input[type=email],.f input[type=password],.f input[type=file],.f select,.f textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
.f input:hover,.f select:hover,.f textarea:hover{border-color:#D5D5D2}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(18,124,85,.14);
}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-4)}
.f textarea{min-height:74px;resize:vertical;line-height:1.6}
.f select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8E91' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;
}
.f .hint{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.fr{display:grid;gap:14px}
.fr2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fr3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fr4{grid-template-columns:repeat(4,minmax(0,1fr))}
fieldset{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:17px;margin:0 0 14px;
  background:var(--surface);box-shadow:var(--sh-1);
}
legend{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-3);padding:0 8px;
}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:15px;height:15px}

/* ---------- Filter bar ---------- */
.fbar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 15px;margin-bottom:14px;box-shadow:var(--sh-1);
}
.fbar .f{margin:0;min-width:140px}

/* ---------- Flash / notices ---------- */
.msg{
  padding:12px 15px;border-radius:var(--r);margin-bottom:14px;font-size:13.5px;
  border:1px solid;line-height:1.55;
}
.msg-success{background:var(--green-l);border-color:#B7E4C7;color:#14532D}
.msg-error{background:var(--red-l);border-color:#F5C2C2;color:#991B1B}
.msg-warn{background:var(--amber-l);border-color:#F3DFA8;color:#78350F}
.msg-info{background:var(--brand-l);border-color:#C9D5FA;color:var(--brand-txt)}
.msg b{font-weight:600}

/* ---------- Alert list ---------- */
.al{
  display:flex;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line-2);
  align-items:flex-start;transition:background .1s;
}
.al:last-child{border-bottom:none}
.al:hover{background:var(--surface-2)}
.al .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:7px}
.al.critical .dot{background:var(--red)}
.al.warning  .dot{background:var(--amber)}
.al.info     .dot{background:var(--ink-4)}
.al .t{font-weight:600;font-size:13.5px;margin-bottom:4px;letter-spacing:-.015em}
.al .bd{font-size:12.5px;color:var(--ink-2);white-space:pre-line;line-height:1.6}
.al .when{font-size:11px;color:var(--ink-4);margin-top:6px}
.al .act{margin-left:auto;display:flex;gap:7px;flex:0 0 auto}
.al.critical{border-left:2px solid var(--red)}
.al.warning{border-left:2px solid var(--amber)}

/* ---------- Fleet availability strip ---------- */
.strip{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.strip .sh{display:flex;padding:9px 0 8px;border-bottom:1px solid var(--line)}
.strip .sh .lb{
  flex:0 0 160px;padding-left:17px;font-size:10px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);font-weight:600;
}
.strip .sh .days{display:flex;flex:1;padding-right:17px}
.strip .sh .days i{
  flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  font-style:normal;color:var(--ink-4);
}
.srow{display:flex;align-items:center;border-bottom:1px solid var(--line-2);min-height:36px;transition:background .1s}
.srow:last-child{border-bottom:none}
.srow:hover{background:var(--surface-2)}
.srow .lb{flex:0 0 160px;padding:6px 10px 6px 17px;display:flex;flex-direction:column;gap:2px}
.srow .lb small{font-size:10.5px;color:var(--ink-3)}
.srow .days{display:flex;flex:1;gap:2px;padding-right:17px}
.srow .days b{
  flex:1;height:20px;border-radius:3px;background:#EDEDEA;
  font-weight:400;display:block;position:relative;transition:opacity .1s;
}
.srow .days b:hover{opacity:.7}
.srow .days b.booked{background:var(--brand)}
.srow .days b.shared{background:#93B4F5}
.srow .days b.maintenance{background:var(--amber)}
.srow .days b.out_of_service{background:#C9C9C5}
.srow .days b.today{box-shadow:inset 0 0 0 2px var(--ink)}
.legend{
  display:flex;gap:17px;flex-wrap:wrap;padding:11px 17px;font-size:11.5px;
  color:var(--ink-2);border-top:1px solid var(--line-2);
}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ---------- Calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .dh{
  font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);
  text-align:center;font-weight:600;padding-bottom:6px;
}
.cal .d{
  border:1px solid var(--line);border-radius:var(--r-sm);min-height:64px;
  padding:7px 8px;background:var(--surface);transition:border-color .1s;
}
.cal .d:hover{border-color:#D5D5D2}
.cal .d.mute{background:var(--surface-2);opacity:.5;border-color:var(--line-2)}
.cal .d .n{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-3);font-weight:500}
.cal .d.today{border-color:var(--ink);border-width:1.5px}
.cal .d.s-booked{background:var(--brand-l);border-color:#C9D5FA}
.cal .d.s-shared{background:#F5F8FE;border-color:#D9E3FB}
.cal .d.s-maintenance{background:var(--amber-l);border-color:#F3DFA8}
.cal .d .tag{font-size:10px;margin-top:5px;line-height:1.45;color:var(--ink-2);overflow:hidden;display:block}

/* ---------- Detail lists ---------- */
.dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 18px;font-size:13.5px}
.dl dt{
  color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;padding-top:2px;
}
.dl dd{margin:0;line-height:1.6}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  padding:10px 14px;font-size:13px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;white-space:nowrap;transition:all .12s;
  letter-spacing:-.01em;
}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--brand-d)}
.login .box{
  background:var(--surface);border-radius:14px;padding:36px 34px;width:100%;
  max-width:390px;box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.login .lg{font-size:20px;font-weight:600;margin-bottom:5px;letter-spacing:-.024em}
.login .sb{font-size:13px;color:var(--ink-3);margin-bottom:26px}
.login .seed{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-3);line-height:1.75;
}
.login .seed code,.login code{
  font-family:'JetBrains Mono',monospace;background:var(--surface-2);
  padding:2px 5px;border-radius:4px;font-size:11.5px;
}

/* ---------- Print ---------- */
@media print{
  .side,.top,.no-print{display:none!important}
  body{background:#fff;font-size:12px}
  .wrap{padding:0;max-width:none}
  .card{border:none;box-shadow:none}
  .card>.hd{border-bottom:1.5px solid var(--ink)}
  a{color:var(--ink)}
  .btn{display:none}
}
.receipt{max-width:780px;margin:0 auto;background:#fff}
.receipt .rh{text-align:center;padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.receipt .rh .cn{font-size:21px;font-weight:600;letter-spacing:-.024em}
.receipt .rh .ca{font-size:15px;color:var(--ink-2);margin-top:4px}
.receipt .rh .rt{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-3);
  margin-top:12px;font-weight:500;
}
.receipt .sig{display:flex;gap:44px;margin-top:56px;font-size:12px}
.receipt .sig div{flex:1;border-top:1px solid var(--ink);padding-top:7px;color:var(--ink-2)}

/* ---------- Utility ---------- */
.muted{color:var(--ink-3)}
.small{font-size:12px}
.xs{font-size:11px}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.strong{font-weight:600}
.pos{color:var(--green)}
.neg{color:var(--red)}
.sep{height:1px;background:var(--line-2);margin:15px 0}
.chip{
  display:inline-block;background:var(--surface-2);border:1px solid var(--line);
  border-radius:20px;padding:2px 10px;font-size:11.5px;color:var(--ink-2);
}
.stack{display:flex;flex-direction:column;gap:2px}
.stack small{font-size:11px;color:var(--ink-3)}

/* ---------- Client / bus picker ---------- */
.pick{position:relative}
.pick .pin{
  width:100%;padding:8px 11px 8px 32px;border:1px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:13.5px;background:var(--surface);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238A8E91' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;
  transition:border-color .12s,box-shadow .12s;
}
.pick .pin:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.pick .plist{
  position:absolute;top:100%;left:0;right:0;z-index:40;margin-top:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);max-height:264px;overflow-y:auto;
}
.pick .pitem{
  display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--line-2);font-size:13px;
}
.pick .pitem:last-child{border-bottom:none}
.pick .pitem:hover,.pick .pitem.hi{background:var(--brand-l)}
.pick .pitem .nm{font-weight:500}
.pick .pitem .mt{margin-left:auto;font-size:11.5px;color:var(--ink-3);
  font-family:'JetBrains Mono',monospace}
.pick .padd{
  padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);
}
.pick .pnone{padding:14px 12px;font-size:12.5px;color:var(--ink-3);text-align:center}
.pick .psel{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  font-size:13.5px;
}
.pick .psel .x{
  margin-left:auto;background:none;border:none;cursor:pointer;color:var(--ink-3);
  font-size:16px;line-height:1;padding:0 3px;
}
.pick .psel .x:hover{color:var(--red)}
.newbox{
  border:1px solid var(--brand);border-radius:var(--r);padding:13px;
  background:var(--brand-l);margin-top:8px;
}
.newbox .nt{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brand-txt);margin-bottom:10px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr4,.fr3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrap{padding:18px}
}
@media(max-width:780px){
  .side{
    position:fixed;left:0;top:0;transform:translateX(-100%);
    transition:transform .2s cubic-bezier(.4,0,.2,1);z-index:60;box-shadow:var(--sh-3);
  }
  .side.open{transform:translateX(0)}
  .burger{display:inline-flex}
  .g2,.g3,.g4,.g5,.fr2,.fr3,.fr4{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:14px 12px 40px}
  .top{padding:11px 13px}
  h1{font-size:19px}
  .dl{grid-template-columns:minmax(0,1fr);gap:3px 0}
  .dl dd{margin-bottom:12px}
  .strip .sh .lb,.srow .lb{flex:0 0 100px;padding-left:12px}
  .scrim{position:fixed;inset:0;background:rgba(22,24,26,.5);z-index:50}
  .stat .v{font-size:23px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Availability picker (bus / driver) ---------- */
.pick .plist.static{
  position:static;box-shadow:none;margin-top:0;max-height:none;
  border:1px solid var(--line);
}
.pick .pgrp{
  padding:7px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);font-weight:600;
}
.pick .pitem.off{opacity:.5}
.pick .pitem.off:hover{background:var(--red-l);opacity:.75}
.pick .pitem .nm{font-weight:500;font-size:13px}
.pick .pitem .mt{margin-left:auto;flex:0 0 auto}
.pick .psel.muted{color:var(--ink-3);font-style:italic}
.pick .psearch{margin-bottom:7px}
.pick .plist.static{max-height:340px;overflow-y:auto}

/* ============================================================
   Zubaan badalne ka switch
   ============================================================ */
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.langsw a{
  padding:5px 10px;font-size:12px;font-weight:500;color:var(--ink-2);
  background:var(--surface);line-height:1.4;
}
.langsw a + a{border-inline-start:1px solid var(--line)}
.langsw a:hover{background:var(--surface-2);text-decoration:none}
.langsw a.on{background:var(--ink);color:#fff}

/* ============================================================
   ARABIC — daayen se baayen (RTL)
   ============================================================ */
[dir="rtl"]{
  font-family:'Segoe UI','Tahoma','Arial',sans-serif;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:'Segoe UI','Tahoma','Arial',sans-serif;letter-spacing:0;
}

/* Sidebar daayen taraf */
[dir="rtl"] .shell{flex-direction:row-reverse}
[dir="rtl"] .nav a{text-align:right}
[dir="rtl"] .nav a .pill{margin-left:0;margin-right:auto}

/* Topbar */
[dir="rtl"] .top .sp{margin-left:0;margin-right:auto}

/* Cards aur headings */
[dir="rtl"] .card>.hd .sp{margin-left:0;margin-right:auto}
[dir="rtl"] .stat .k::before{margin-right:0;margin-left:7px}
[dir="rtl"] .stat::before{left:auto;right:0}

/* Tables — sab kuch ulta */
[dir="rtl"] table.t th,[dir="rtl"] table.t td{text-align:right}
[dir="rtl"] table.t td.num,[dir="rtl"] table.t th.num{text-align:left}
[dir="rtl"] .right{text-align:left}
[dir="rtl"] .left{text-align:right}

/* Forms */
[dir="rtl"] .f label{text-align:right}
[dir="rtl"] .f select{
  background-position:left 10px center;padding-right:11px;padding-left:32px;
}
[dir="rtl"] .f input,[dir="rtl"] .f textarea,[dir="rtl"] .f select{text-align:right}
/* Numbers, plate, Iqama aur dates hamesha baayen se daayen — Saudi ka aam tareeqa */
[dir="rtl"] input[type=number],
[dir="rtl"] input[type=date],
[dir="rtl"] input[type=datetime-local],
[dir="rtl"] .mono,[dir="rtl"] .plate,[dir="rtl"] td.mono,
[dir="rtl"] table.t td.num,[dir="rtl"] .stat .v{
  direction:ltr;text-align:left;unicode-bidi:embed;
}
[dir="rtl"] table.t th.num{direction:ltr;text-align:left}
[dir="rtl"] input[type=checkbox],[dir="rtl"] input[type=radio]{margin-right:0;margin-left:6px}

/* Detail lists */
[dir="rtl"] .dl dt,[dir="rtl"] .dl dd{text-align:right}

/* Alerts */
[dir="rtl"] .al .act{margin-left:0;margin-right:auto}
[dir="rtl"] .al.critical,[dir="rtl"] .al.warning{
  border-left:none;border-right:2px solid var(--red);
}
[dir="rtl"] .al.warning{border-right-color:var(--amber)}

/* Availability strip aur calendar — dono ulte */
[dir="rtl"] .strip .sh,[dir="rtl"] .srow{flex-direction:row-reverse}
[dir="rtl"] .strip .sh .lb,[dir="rtl"] .srow .lb{padding-left:10px;padding-right:17px;text-align:right}
[dir="rtl"] .strip .sh .days,[dir="rtl"] .srow .days{
  flex-direction:row-reverse;padding-right:0;padding-left:17px;
}
[dir="rtl"] .cal{direction:rtl}
[dir="rtl"] .cal .d .n{text-align:right}

/* Picker */
[dir="rtl"] .pick .pin{
  padding-left:11px;padding-right:32px;background-position:right 10px center;text-align:right;
}
[dir="rtl"] .pick .pitem .mt,[dir="rtl"] .pick .psel .x{margin-left:0;margin-right:auto}
[dir="rtl"] .pick .pitem,[dir="rtl"] .pick .psel{text-align:right}

/* Tabs */
[dir="rtl"] .tabs{flex-direction:row-reverse}

/* Receipt / print */
[dir="rtl"] .receipt{direction:rtl}
[dir="rtl"] .receipt .sig{flex-direction:row-reverse}

/* Mobile sidebar daayen se aaye */
@media(max-width:780px){
  [dir="rtl"] .side{left:auto;right:0;transform:translateX(100%)}
  [dir="rtl"] .side.open{transform:translateX(0)}
}

/* ============================================================
   RTL — mazeed durustiyan
   ============================================================ */

/* Sidebar pakka daayen taraf.
   flex order zyada mazboot hai kyunki koi doosra rule ise nahi daba sakta. */
[dir="rtl"] .shell{flex-direction:row!important}
[dir="rtl"] .side{order:2;border-inline-end:none;border-inline-start:1px solid var(--line)}
[dir="rtl"] .main{order:1}

/* Mila-jula matn (Arabic + English + numbers) ulta ho jata tha.
   plaintext se har hissa apni tabee simt mein rehta hai. */
[dir="rtl"] .stat .sub,
[dir="rtl"] .hint,
[dir="rtl"] .chip,
[dir="rtl"] .small,
[dir="rtl"] .xs,
[dir="rtl"] .stack small,
[dir="rtl"] .legend,
[dir="rtl"] .al .bd,
[dir="rtl"] .al .when,
[dir="rtl"] .srow .lb small,
[dir="rtl"] .pick .pitem .xs,
[dir="rtl"] table.t td.small,
[dir="rtl"] .dl dd{
  unicode-bidi:plaintext;
}

/* Numbers ke aas paas ka matn na bikhre */
[dir="rtl"] .mono,[dir="rtl"] .plate,[dir="rtl"] td.mono,
[dir="rtl"] table.t td.num,[dir="rtl"] .stat .v{
  unicode-bidi:isolate;
}

/* Print — parchi aur statement bhi daayen se */
[dir="rtl"] .receipt,[dir="rtl"] .receipt table{direction:rtl}
[dir="rtl"] .receipt th,[dir="rtl"] .receipt td{text-align:right}
[dir="rtl"] .receipt .num,[dir="rtl"] .receipt td.num,[dir="rtl"] .receipt th.num{
  text-align:left;direction:ltr;unicode-bidi:isolate;
}
[dir="rtl"] .receipt .rh{text-align:center}

/* Topbar mein zubaan ka switch aur buttons */
[dir="rtl"] .langsw a + a{border-inline-start:1px solid var(--line)}
[dir="rtl"] .btn{letter-spacing:0}

/* Sidebar ke groups aur icons */
[dir="rtl"] .nav .grp{text-align:right}
[dir="rtl"] .brand{text-align:right}
[dir="rtl"] .side .who{text-align:right}

/* Details/summary ka teer */
[dir="rtl"] details summary{text-align:right}

/* Form ke andar file input */
[dir="rtl"] input[type=file]{direction:rtl;text-align:right}

/* ============================================================
   Company ka logo
   ============================================================ */

/* Sidebar — logo safed chip par, kyunki sidebar kaala hai */
.logo-chip{
  background:#fff;border-radius:8px;padding:2px 0 10px;margin-bottom:9px;
  display:flex;align-items:center;justify-content:center;
}
.logo-chip img{display:block;width:100%;max-width:150px;height:auto}

/* Login */
.login-logo{
  display:block;margin:0 auto 18px;max-width:210px;width:100%;height:auto;
}

/* Print — parchi, deposit slip, statement */
.print-logo{
  display:block;margin:0 auto 12px;max-width:180px;width:100%;height:auto;
}
@media print{
  .print-logo{max-width:150px}
  /* Rang wale logo ko printer par bhi theek rakho */
  .print-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Arabic mein bhi logo beech mein hi rahe */
[dir="rtl"] .logo-chip img,[dir="rtl"] .login-logo,[dir="rtl"] .print-logo{margin-inline:auto}

/* ============================================================
   Dashboard — bhara hua tile aur charts
   ============================================================ */

/* Pehla tile bhara hua — aankh sab se pehle isi par jati hai */
.stat.filled{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 6px 18px rgba(18,124,85,.22);
}
.stat.filled .k{color:rgba(255,255,255,.82)}
.stat.filled .k::before{background:rgba(255,255,255,.6)}
.stat.filled .v{color:#fff}
.stat.filled .sub{color:rgba(255,255,255,.78)}
.stat .of{font-size:15px;color:var(--ink-3);font-weight:400}

/* Cards thora aur narm */
.card{border-radius:14px}
.stat{border-radius:14px;transition:box-shadow .15s,transform .15s}
.stat:hover{box-shadow:var(--sh-2)}

/* ---------- Bar chart ---------- */
.bars{
  display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:6px;
}
.bar{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:6px;cursor:default;
}
.bar i{
  display:block;width:100%;border-radius:6px 6px 3px 3px;
  background:var(--brand-l);transition:background .15s;min-height:3px;
}
.bar:hover i{background:var(--brand)}
.bar.on i{background:var(--brand)}
.bar b{
  font:500 10px/1 'JetBrains Mono',monospace;color:var(--ink-4);font-weight:400;
}
.bar.on b{color:var(--ink);font-weight:600}

/* ---------- Donut ---------- */
.donutwrap{display:flex;align-items:center;gap:18px}
.donut{width:132px;height:132px;flex:0 0 132px}
.donut .dn{
  font:600 26px 'JetBrains Mono',monospace;fill:var(--ink);letter-spacing:-.03em;
}
.donut .dl{font:500 10px 'Inter',sans-serif;fill:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.donutkey{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.donutkey div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.donutkey i{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.donutkey b{margin-left:auto;font-family:'JetBrains Mono',monospace;color:var(--ink)}

[dir="rtl"] .donutkey b{margin-left:0;margin-right:auto}
[dir="rtl"] .bars{flex-direction:row-reverse}

@media(max-width:1000px){
  .donutwrap{flex-direction:column;align-items:flex-start}
  .donutkey{width:100%}
}

/* ============================================================
   CHHAPE HUE KAGHAZ — statement, parchi, deposit slip
   ------------------------------------------------------------
   Namuna: logo baayen, company ka naam aur CR/VAT upar,
   har unwan dono zubaanon mein. Jagah kam se kam lagti hai.
   ============================================================ */
.doc            { max-width: 780px; margin: 0 auto; font-size: 12px; color: #16181A; }
.doc-head       { display: flex; align-items: flex-start; gap: 14px;
                  padding-bottom: 8px; border-bottom: 1.5px solid #16181A; }
.doc-logo img   { max-width: 62px; max-height: 62px; object-fit: contain; }
.doc-org        { flex: 1; text-align: end; line-height: 1.45; }
.doc-org-ar     { font-size: 15px; font-weight: 700; }
.doc-org-en     { font-size: 12.5px; font-weight: 600; }
.doc-org-meta   { font-size: 10.5px; color: #3E4246; }
.doc-title      { text-align: center; font-weight: 700; font-size: 13.5px;
                  padding: 7px 0 9px; }
.doc-title-ar   { margin-inline-end: 6px; }

/* Upar wali maloomat ka chhota table (Account / Cost centre / Period) */
.doc-meta       { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.doc-meta td    { border: 1px solid #C9CCCF; padding: 4px 8px; font-size: 11.5px; }
.doc-meta .lbl  { font-weight: 700; width: 17%; white-space: nowrap; }
.doc-meta .lbl-ar { text-align: end; }
.doc-meta .val  { text-align: center; }

/* Asal table — namune ki tarah kasa hua */
.doc-t          { width: 100%; border-collapse: collapse; }
.doc-t th,
.doc-t td       { border: 1px solid #C9CCCF; padding: 3.5px 6px; font-size: 11px;
                  vertical-align: middle; }
.doc-t thead th { background: #F2F4F5; font-weight: 700; line-height: 1.3; text-align: center; }
.doc-t th .bi-ar{ display: block; font-size: 11px; }
.doc-t th .nt   { display: block; font-size: 9.5px; color: #3E4246; font-weight: 600; }
.doc-t .num     { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-t .mid     { text-align: center; white-space: nowrap; }
.doc-t tfoot td { background: #F2F4F5; font-weight: 700; }
.doc-t .desc    { font-size: 11px; line-height: 1.35; }

/* Neeche ke notes */
.doc-notes      { margin-top: 10px; font-size: 10.5px; color: #3E4246; line-height: 1.6; }
.doc-notes ol   { margin: 3px 0 0; padding-inline-start: 16px; }

/* Numbers, plate aur codes hamesha baayen se daayen (Saudi ka aam tareeqa) */
.doc .mono, .doc-t .num { direction: ltr; unicode-bidi: embed; }

@media print {
  .doc          { max-width: none; }
  .doc-t        { page-break-inside: auto; }
  .doc-t tr     { page-break-inside: avoid; }
  .doc-t thead  { display: table-header-group; }
  .doc-notes    { page-break-inside: avoid; }
}

/* Sar-name par CR/VAT ke Arabic unwan — number ke baad, chhote */
.doc-org-meta .doc-lbl-ar { margin-inline-start: 3px; }
.doc-org-meta .nowrap     { white-space: nowrap; }

/* ============================================================
   STATEMENT KO KASNA — ek safhe par zyada lines
   ------------------------------------------------------------
   Client apni statement doosri companies ki statement ke saath
   rakhta hai, is liye shakl kasi hui aur numeric honi chahiye:
   chhota font, kam padding, aur neeche faltu jagah nahi.
   ============================================================ */
.doc              { font-size: 10.5px; }
.doc-head         { gap: 10px; padding-bottom: 5px; }
.doc-logo img     { max-width: 52px; max-height: 52px; }
.doc-org          { line-height: 1.3; }
.doc-org-ar       { font-size: 13px; }
.doc-org-en       { font-size: 11.5px; }
.doc-org-meta     { font-size: 9.5px; }
.doc-title        { font-size: 12px; padding: 5px 0 6px; }

.doc-meta         { margin-bottom: 6px; }
.doc-meta td      { padding: 2.5px 6px; font-size: 10px; }

.doc-t th,
.doc-t td         { padding: 2px 5px !important; font-size: 9.8px; }
.doc-t thead th   { line-height: 1.15; }
.doc-t th .bi-ar  { font-size: 9.8px; }
.doc-t th .nt     { font-size: 8.5px; }
.doc-t .desc      { font-size: 9.8px; line-height: 1.25; }
.doc-t .xs        { font-size: 8.8px; }

.doc-notes        { margin-top: 6px; font-size: 9px; line-height: 1.45; }
.doc-notes ol     { margin: 2px 0 0; padding-inline-start: 14px; }

/* Dastkhat ki jagah statement par nahi chahiye — safha bach jata hai */
.doc .sig         { display: none; }

@media print {
  @page { margin: 10mm 8mm; }
  .doc  { font-size: 10px; }
}

/* Statement ki rows ek line par — safhe par zyada lines aati hain */
.doc-t td         { white-space: nowrap; }
.doc-t td.desc    { white-space: normal; }   /* sirf tafseel wala khana lipat sakta hai */
.doc-t td .xs     { white-space: nowrap; }
.doc-t tr         { line-height: 1.2; }


/* Kaghaz ke sirnamay ki har line — do khane, hamesha ek hi jagah
   (English baayen, Arabic daayen), chahe safha kisi bhi zubaan mein ho */
/* Sirnamay ki har line — English aur Arabic saath saath, daayen taraf.
   Line ka rukh tay hai, is liye dono zubaanon mein tarteeb ek jaisi. */
.doc-org-line{display:block;text-align:right;font-size:10.5px;color:#3A4045;
  line-height:1.5;margin:0 0 1px}
@media print{ .doc-org-line{font-size:10px} }