/* ZTIK Care — design system v2 (R1.6 phase 2)
   Layout: app shell with a navigation rail (desktop) and a bottom bar (mobile).
   One elevation level, one radius scale, numeric columns LTR + tabular. */

@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/vazirmatn-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* neutrals */
  --n-0:#fff; --n-25:#fcfcfd; --n-50:#f7f8fb; --n-100:#f2f4f7;
  --n-200:#e4e7ec; --n-300:#d0d5dd; --n-600:#475467; --n-700:#344054; --n-900:#101828;
  /* brand */
  --b-600:#2f5bea; --b-700:#1f45c4; --b-50:#eef2ff;
  /* status */
  --ok-700:#067647; --ok-50:#ecfdf3;
  --warn-700:#b54708; --warn-50:#fffaeb;
  --dan-700:#b42318; --dan-50:#fef3f2;
  --inf-700:#175cd3; --inf-50:#eff8ff;
  --on-dark:#fff;
  --nav-950:#0a1728; --nav-group:#6e87a6;
  --b-100:#e3e9ff; --dan-800:#9d1e14;
  --n-500:#98a2b3;
  --ok-100:#d1fadf; --ok-900:#085d3a;
  --inf-100:#d1e0ff; --warn-100:#fedf89; --dan-100:#fecdca;
  --teal-500:#0aa49b; --amber-500:#e39a2d;
  /* nav */
  --nav-900:#0b1a30; --nav-ink:#c6d4e6; --nav-muted:#8fa6c4;
  /* geometry */
  --r-s:8px; --r:10px; --r-lg:14px; --r-xl:18px;
  --sh:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --sh-lg:0 12px 32px rgba(16,24,40,.12);
  /* type */
  --font-sans:"Vazirmatn","IRANSans",Tahoma,Arial,sans-serif;
  --t-2xs:11px; --t-xs:11.5px; --t-sm:12.5px; --t-base:13.5px; --t-md:14px;
  --t-lg:15px; --t-xl:17px; --t-2xl:19px; --t-3xl:22px; --t-4xl:26px;
}

/* ================= base ================= */
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--n-50);color:var(--n-900);
  font-family:var(--font-sans);font-size:var(--t-md);line-height:1.7;
  min-height:100vh;overflow-x:hidden
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
a{color:inherit}
.hidden{display:none!important}
.caption{color:var(--n-600);font-size:var(--t-sm)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.1px}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-md)}
label{display:block;margin:10px 0 5px;font-size:var(--t-sm);font-weight:600;color:var(--n-700)}
.num{direction:ltr;font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums;direction:ltr;text-align:left}
.bidi-ltr{direction:ltr;unicode-bidi:isolate;text-align:left}
.bidi-id{display:inline-block;direction:ltr;unicode-bidi:isolate}
.scroll-x{overflow:auto}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.hint{margin-top:10px}
.toolbar{margin-bottom:10px}
.filter-row{margin:4px 0 10px}
.form-actions{margin-top:12px}
.audit-counts{margin:10px 0}
.section-title{margin-top:20px}
.subhead{margin-top:18px}
.subhead-sm{margin-top:14px}

/* ================= app shell ================= */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

.side{
  background:linear-gradient(180deg,var(--nav-900),var(--nav-950));
  color:var(--on-dark);display:flex;flex-direction:column;gap:4px;
  padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;color:var(--on-dark)}
.brand-mark{
  width:34px;height:34px;border-radius:9px;background:var(--b-600);
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none
}
.brand b{font-size:var(--t-xl);letter-spacing:.2px;display:block;line-height:1.25}
.brand small{display:block;color:var(--nav-muted);font-size:var(--t-2xs);font-weight:400}
.side .group{color:var(--nav-group);font-size:10.5px;font-weight:700;letter-spacing:.6px;padding:14px 10px 6px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  color:var(--nav-ink);text-decoration:none;font-size:var(--t-base);font-weight:500;
  border:0;background:none;width:100%;text-align:right
}
.nav-item .ic{width:18px;text-align:center;opacity:.85;font-size:14px;flex:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:var(--on-dark)}
.nav-item.active{background:var(--b-600);color:var(--on-dark);font-weight:700}
.nav-item .badge{
  margin-inline-start:auto;background:rgba(255,255,255,.14);color:var(--on-dark);
  border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 7px
}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding-top:10px}

.main{min-width:0;display:flex;flex-direction:column}
.top{
  display:flex;align-items:center;gap:14px;background:var(--n-0);
  border-bottom:1px solid var(--n-200);padding:11px 24px;position:sticky;top:0;z-index:20
}
.top .crumb{color:var(--n-600);font-size:var(--t-xs);line-height:1.4}
.top h1{font-size:var(--t-xl);line-height:1.35;margin:0}
.top .spacer{flex:1}
.userbox{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);flex-wrap:wrap}
.userbox .caption{color:var(--n-600)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--n-100);color:var(--n-700);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none
}
.iconbtn{
  position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--n-200);
  background:var(--n-0);color:var(--n-700);font-size:15px;display:grid;place-items:center;flex:none
}
.iconbtn:hover{background:var(--n-50)}
.iconbtn .dot{
  position:absolute;top:-5px;inset-inline-start:-5px;background:var(--dan-700);color:var(--on-dark);
  border-radius:999px;font-size:10px;font-weight:700;padding:1px 5px;line-height:1.4
}
.content{padding:22px 24px 32px;display:grid;gap:18px;align-content:start;max-width:1320px;width:100%}

.bottomnav{display:none}
@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .content{padding:14px 14px 84px}
  .top{padding:10px 14px;position:static}
  .bottomnav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset-inline:0;bottom:0;
    background:var(--n-0);border-top:1px solid var(--n-200);z-index:30;
    padding:7px 0 calc(7px + env(safe-area-inset-bottom))
  }
  .bottomnav .nav-item{
    display:grid;justify-items:center;gap:2px;color:var(--n-600);font-size:10.5px;
    font-weight:600;padding:4px 0;border-radius:0;background:none
  }
  .bottomnav .nav-item .ic{font-size:16px;opacity:1}
  .bottomnav .nav-item.active{background:none;color:var(--b-600)}
  .bottomnav .nav-item .badge{display:none}
}

/* ================= page header ================= */
.pagehead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.pagehead h1,.pagehead h2{font-size:var(--t-3xl);letter-spacing:-.2px}
.pagehead p{margin:2px 0 0;color:var(--n-600);font-size:var(--t-sm)}
.pagehead .spacer{flex:1}

/* ================= panels ================= */
.panel,.card{
  background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow:hidden
}
.panel>header{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--n-200);flex-wrap:wrap
}
.panel>header h2,.panel>header h3{font-size:var(--t-md);font-weight:700}
.panel>header .spacer{flex:1}
.panel .body{padding:16px}
.directory-note{padding-top:10px!important}
/* ================= Jalali date picker ================= */
.jp-wrap{position:relative;display:inline-flex;align-items:center;gap:0;width:100%}
.jp-wrap .jp-input{width:100%;padding-inline-end:34px}
.jp-trigger{
  position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--n-200);border-radius:var(--r-s);background:var(--n-0);
  color:var(--n-600);font-size:13px;line-height:1;cursor:pointer
}
.jp-trigger:hover{background:var(--n-50);color:var(--b-700);border-color:var(--n-300)}
.jp-trigger:focus-visible{outline:2px solid var(--b-600);outline-offset:1px}
.jp-pop{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:80;
  width:268px;background:var(--n-0);border:1px solid var(--n-200);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:10px;
  direction:rtl;font-family:var(--font-sans)
}
.jp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.jp-title{font-size:var(--t-md);font-weight:700;color:var(--n-900)}
.jp-nav{
  width:28px;height:28px;border:1px solid var(--n-200);border-radius:var(--r-s);
  background:var(--n-0);color:var(--n-700);font-size:15px;line-height:1;cursor:pointer
}
.jp-nav:hover{background:var(--n-50);border-color:var(--n-300)}
.jp-selects{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.jp-selects select{
  width:100%;padding:5px 6px;border:1px solid var(--n-200);border-radius:var(--r-s);
  background:var(--n-0);color:var(--n-700);font-family:inherit;font-size:var(--t-sm)
}
.jp-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.jp-week span{text-align:center;font-size:var(--t-2xs);color:var(--n-500);padding:2px 0}
.jp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jp-empty{display:block;height:30px}
.jp-day{
  height:30px;border:0;border-radius:var(--r-s);background:transparent;
  color:var(--n-700);font-family:inherit;font-size:var(--t-sm);cursor:pointer;
  font-variant-numeric:tabular-nums
}
.jp-day:hover{background:var(--b-50);color:var(--b-700)}
.jp-day.is-today{box-shadow:inset 0 0 0 1px var(--b-600);color:var(--b-700);font-weight:700}
.jp-day.is-selected{background:var(--b-600);color:var(--on-dark);font-weight:700}
.jp-day.is-holiday{color:var(--dan-700);font-weight:700}
.jp-day.is-holiday:hover{background:var(--dan-50)}
.jp-day.is-holiday.is-selected{background:var(--dan-700);color:var(--on-dark)}
.jp-foot .btn{padding:4px 8px;font-size:var(--t-sm)}
.jp-day:focus-visible{outline:2px solid var(--b-600);outline-offset:1px}
.jp-foot{display:flex;justify-content:space-between;gap:6px;margin-top:8px;
  border-top:1px solid var(--n-100);padding-top:8px}
@media(max-width:520px){
  .jp-pop{position:fixed;inset-inline:12px;top:auto;bottom:12px;width:auto}
}

.branch-ctx{margin-top:18px;border-top:1px solid var(--n-100);padding-top:14px}
.branch-ctx h3{margin:10px 0 8px;font-size:var(--t-sm);color:var(--n-700)}
.recent-list{display:grid;gap:6px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:6px 9px;border:1px solid var(--n-200);border-radius:var(--r-s);
  background:var(--n-0);cursor:pointer;font-family:inherit;text-align:start}
.recent-item:hover{background:var(--n-50);border-color:var(--n-300)}
.tpl-btn{font-family:inherit;font-size:var(--t-sm)}
.tpl-btn:hover{background:var(--b-50);border-color:var(--b-600);color:var(--b-700)}

/* table emphases: totals row and out-of-budget numbers */
tr.row-total td{background:var(--n-50);font-weight:700;border-top:2px solid var(--n-300)}
td.is-danger{color:var(--dan-700);font-weight:700}
input.is-invalid{border-color:var(--dan-700);background:var(--dan-50)}
.check-row{display:flex;flex-wrap:wrap;gap:10px;padding:7px 0}
.check-item{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);
  background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r-s);padding:5px 10px;cursor:pointer}
.check-item input{accent-color:var(--b-600);margin:0}
.check-inline{margin-top:6px}
.check-inline input{accent-color:var(--b-600)}
.card{padding:16px}
.card>h1:first-child,.card>h2:first-child{margin-top:0}
.card h1{font-size:var(--t-2xl)}
.admin-box{background:var(--n-50);box-shadow:none}

.cols{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;align-items:start}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.tight{gap:8px}
.between{justify-content:space-between}
.grow{flex:1;min-width:180px}
.stack{display:grid;gap:8px}
.stack h3{margin:6px 0 0;font-size:var(--t-sm);color:var(--n-700)}

/* KPI tiles */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.cards .card{padding:14px 16px}
.cards .card>span{color:var(--n-600);font-size:var(--t-xs);font-weight:600;display:block}
.cards .card>b{
  display:block;font-size:var(--t-4xl);font-weight:700;line-height:1.25;
  margin:6px 0 2px;direction:ltr;text-align:right;font-variant-numeric:tabular-nums
}
.cards .card>b+span{font-size:var(--t-2xs);color:var(--n-600);font-weight:400}
.stat{font-size:var(--t-3xl);font-weight:700;direction:ltr;text-align:right}

/* ================= status chips & pills ================= */
.pill,.chip{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:2px 9px;font-size:var(--t-xs);font-weight:700;white-space:nowrap;
  border:1px solid transparent;background:var(--b-50);color:var(--b-700)
}
.pill.ok,.chip.done{background:var(--ok-50);color:var(--ok-700)}
.pill.warn,.chip.risk{background:var(--warn-50);color:var(--warn-700)}
.pill.danger,.chip.late{background:var(--dan-50);color:var(--dan-700)}
.chip.info{background:var(--inf-50);color:var(--inf-700)}
.chip.mute{background:var(--n-100);color:var(--n-600)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.plain::before{display:none}

/* ================= buttons ================= */
.btn{
  border:0;border-radius:9px;padding:8px 14px;font:700 var(--t-sm)/1.45 var(--font-sans);
  background:var(--b-600);color:var(--on-dark);display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,box-shadow .15s
}
.btn:hover{background:var(--b-700)}
.btn.secondary,.btn.soft{background:var(--b-50);color:var(--b-700)}
.btn.secondary:hover,.btn.soft:hover{background:var(--b-100)}
.btn.ghost{background:var(--n-0);border:1px solid var(--n-300);color:var(--n-700);font-weight:600}
.btn.ghost:hover{background:var(--n-50)}
.btn.danger{background:var(--dan-700)}
.btn.danger:hover{background:var(--dan-800)}
.btn.ok{background:var(--ok-700)}
.btn.sm{padding:6px 11px;font-size:var(--t-sm);border-radius:8px}
.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--b-600);outline-offset:2px
}

/* ================= form controls ================= */
input,textarea,select{
  width:100%;border:1px solid var(--n-300);border-radius:9px;padding:8px 11px;
  background:var(--n-0);color:var(--n-900);font-size:var(--t-base)
}
input::placeholder,textarea::placeholder{color:var(--n-500)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--b-600);outline-offset:1px;border-color:var(--b-600)}
textarea{resize:vertical;line-height:1.7}
.field-sm{min-width:130px}
.field-md{min-width:150px}
.field-lg{min-width:170px}
.field-xl{min-width:230px}
select,.select{border:1px solid var(--n-300);border-radius:9px;background:var(--n-0);color:var(--n-700);padding:8px 10px;font-size:var(--t-sm);font-weight:600;width:auto}

/* segmented control */
.seg,.tabs{display:inline-flex;background:var(--n-100);border-radius:9px;padding:3px;gap:2px;overflow:auto;max-width:100%}
.tabs{padding-bottom:3px}
.tab{
  border:0;background:transparent;color:var(--n-600);
  font:600 var(--t-sm)/1.4 var(--font-sans);padding:6px 12px;border-radius:7px;white-space:nowrap
}
.tab:hover{color:var(--n-900)}
.tab.active{background:var(--n-0);color:var(--n-900);box-shadow:var(--sh);font-weight:700}
.quick-range{display:inline-flex;gap:4px}
.quick-range .tab{padding:5px 10px;font-size:var(--t-xs)}

/* ================= tables ================= */
.tbl-wrap,.table-wrap{overflow:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
table.tbl,table.tickets,.data-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-base);background:var(--n-0)
}
table.tbl thead th,table.tickets thead th,.data-table th{
  position:sticky;top:0;z-index:2;background:var(--n-25);color:var(--n-600);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2px;text-align:right;
  padding:10px 14px;border-bottom:1px solid var(--n-200);white-space:nowrap
}
table.tbl tbody td,table.tickets tbody td,.data-table td{
  padding:11px 14px;border-bottom:1px solid var(--n-100);color:var(--n-700);vertical-align:middle
}
table.tbl tbody tr:last-child td,table.tickets tbody tr:last-child td,
.data-table tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td,table.tickets tbody tr:hover td,
.data-table tbody tr:hover td{background:var(--n-25)}
.tbl .c-id,table.tickets .c-id{width:80px}
.tbl .c-num,.tbl .c-chip{white-space:nowrap}
.tbl .c-num{width:110px}
.tbl .c-chip{width:120px}
.tbl .c-actions{width:56px}
.tbl td.c-num,.tbl td.c-actions{text-align:left}
.tbl td.c-num{font-variant-numeric:tabular-nums;direction:ltr}
.tbl .id{display:inline-block;direction:ltr;font-variant-numeric:tabular-nums;color:var(--n-600);font-weight:600;font-size:var(--t-sm)}
.cell-title{display:grid;gap:1px;min-width:0}
.cell-title b{font-weight:600;color:var(--n-900);font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-title span{color:var(--n-600);font-size:var(--t-2xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table{min-width:520px}
.data-table th{text-align:center}
.data-table th:first-child{text-align:right}
.data-table td{text-align:center;direction:ltr;font-variant-numeric:tabular-nums}
.data-table td:first-child{text-align:right;direction:rtl;font-weight:700;color:var(--n-900)}
table.tickets th:last-child,table.tickets td:last-child{text-align:left}

/* ================= ticket list rows ================= */
.list{display:grid;gap:8px}
.ticket{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
  padding:11px 14px;border:1px solid var(--n-200);border-radius:var(--r);
  background:var(--n-0);text-align:right;width:100%;font:inherit;color:inherit
}
.ticket:hover{border-color:var(--b-600);box-shadow:var(--sh)}
.ticket .meta{color:var(--n-600);font-size:var(--t-2xs)}
.ticket b{font-size:var(--t-base);font-weight:600}
.empty{
  border:1px dashed var(--n-300);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--n-600);font-size:var(--t-sm);background:var(--n-25)
}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;flex-wrap:wrap}

/* ================= detail ================= */
.detail{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
.dhead{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 0}
.dhead h1{font-size:var(--t-2xl);letter-spacing:-.2px;line-height:1.4}
.dhead .crumb{color:var(--n-600);font-size:var(--t-xs);margin-bottom:2px}
.dhead .meta{color:var(--n-600);font-size:var(--t-2xs);margin-top:3px}
.dhead .spacer{flex:1}
.dchips{display:flex;gap:7px;flex-wrap:wrap;padding:12px 16px}
.timeline{padding:0 16px 16px;display:grid;gap:0}
.timeline:empty{display:none}
.tl-item{
  position:relative;padding:0 26px 16px 0;border-right:2px solid var(--n-200);
  margin-right:5px;display:block;background:none;border-radius:0
}
.tl-item:last-child{border-right-color:transparent;padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;right:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--n-0);border:2px solid var(--n-300)
}
.tl-item.mine::before{border-color:var(--b-600);background:var(--b-50)}
.tl-item.system::before{border-color:var(--ok-700);background:var(--ok-50)}
.tl-when{font-size:var(--t-2xs);color:var(--n-600);direction:ltr;display:inline-block;margin-inline-start:6px}
.tl-who{font-size:var(--t-sm);font-weight:700;color:var(--n-900)}
.tl-text{
  margin:5px 0 0;background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r);
  padding:8px 11px;font-size:var(--t-sm);color:var(--n-700);white-space:pre-wrap;overflow-wrap:anywhere
}
.tl-item.system .tl-text{background:var(--ok-50);border-color:var(--ok-100);color:var(--ok-900)}
.composer{
  border-top:1px solid var(--n-200);padding:13px 16px;display:grid;gap:8px;background:var(--n-25)
}
.composer h3{margin:0 0 2px;font-size:var(--t-sm);color:var(--n-700)}
.kv{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;font-size:var(--t-sm);margin:0}
.kv dt{color:var(--n-600)}
.kv dd{margin:0;font-weight:600;color:var(--n-900);word-break:break-word;unicode-bidi:plaintext}
.note{
  background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r);
  padding:9px 12px;font-size:var(--t-base);white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext
}
.replies{display:grid;gap:8px;margin:10px 0}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.thumbs a{display:block;border:1px solid var(--n-200);border-radius:var(--r-s);overflow:hidden;background:var(--n-0)}
.thumbs img{display:block;max-width:130px;max-height:95px;object-fit:cover}

/* ================= notices, toast, spinner ================= */
.notice{
  background:var(--inf-50);border:1px solid var(--inf-100);color:var(--inf-700);border-radius:var(--r);
  padding:9px 12px;font-size:var(--t-sm);margin:0 0 12px
}
.notice.warn{background:var(--warn-50);border-color:var(--warn-100);color:var(--warn-700)}
.notice.danger{background:var(--dan-50);border-color:var(--dan-100);color:var(--dan-700)}
.toast{
  position:fixed;inset-inline:12px;bottom:18px;z-index:50;max-width:520px;margin:auto;
  border-radius:var(--r);padding:10px 14px;color:var(--on-dark);background:var(--n-900);
  box-shadow:var(--sh-lg);font-size:var(--t-sm)
}
.toast.error{background:var(--dan-700)}
.toast.success{background:var(--ok-700)}
.spinner{
  display:inline-block;width:13px;height:13px;border:2px solid var(--n-300);
  border-top-color:var(--b-600);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= reports ================= */
.report-head{margin-bottom:12px}
.report-toolbar{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r);padding:12px
}
.report-toolbar label{margin:0 0 4px}
.report-toolbar input{min-width:150px}
.report-kpis{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.report-kpis .card{padding:13px 15px}
.report-kpis small{display:block;color:var(--n-600);font-size:var(--t-2xs);margin-top:2px;font-weight:400}
.report-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px;align-items:start}
.report-block{border:1px solid var(--n-200);border-radius:var(--r);padding:14px;background:var(--n-0)}
.report-block h2{font-size:var(--t-md);margin-bottom:10px}
.chart{display:grid;gap:9px}
.bar-row{display:grid;grid-template-columns:88px 1fr 40px;gap:9px;align-items:center;font-size:var(--t-sm)}
.bar-label{color:var(--n-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:8px;background:var(--n-100);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--b-600);min-width:2px}
.bar-fill.alt{background:var(--teal-500)}
.bar-fill.warn{background:var(--amber-500)}
.bar-fill.danger{background:var(--dan-700)}
.bar-value{direction:ltr;text-align:left;color:var(--n-600);font-variant-numeric:tabular-nums}
.report-shell{overflow:visible;border:0;background:none;box-shadow:none;padding:0}

/* ================= branches ================= */
.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.branch-card{border:1px solid var(--n-200);border-radius:var(--r);padding:13px;background:var(--n-0)}
.branch-card h3{margin:0 0 6px}

/* ================= login ================= */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--n-50)}
.login{width:100%;max-width:420px;padding:26px;box-shadow:var(--sh-lg)}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-brand .brand-mark{background:var(--b-600)}
.login-brand b{font-size:var(--t-xl)}
.login-brand span{color:var(--n-600);font-size:var(--t-2xs);display:block;font-weight:400}
.login h1{font-size:var(--t-3xl);margin-bottom:4px}
.login-submit{width:100%;margin-top:16px;justify-content:center;padding:10px 15px}
.pass-wrap{position:relative}
.pass-wrap input{padding-inline-end:76px}
.pass-toggle{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  padding:5px 9px;font-size:var(--t-xs);
}
.connection{margin-top:14px;border-top:1px solid var(--n-200);padding-top:10px}
.connection summary{cursor:pointer;color:var(--n-600);font-size:var(--t-sm)}
.connection[open] summary{margin-bottom:4px}
.login-lab-note{margin-top:14px;margin-bottom:0}

/* ================= footer ================= */
footer.foot{
  grid-column:1/-1;color:var(--n-600);font-size:var(--t-2xs);text-align:center;
  padding:22px 10px 8px;opacity:.9
}

/* on-call slot rows built by the dashboard renderer */
.slot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--n-100);font-size:var(--t-sm)
}
.slot:last-child{border-bottom:0}

/* mobile drawer: the rail slides in from the reading edge */
@media(max-width:1000px){
  .side{
    display:flex;position:fixed;top:0;bottom:0;inset-inline-start:0;width:250px;
    z-index:60;transform:translateX(100%);transition:transform .2s ease;
    box-shadow:0 0 0 100vmax rgba(16,24,40,0)
  }
  body.drawer-open .side{transform:none;box-shadow:0 0 0 100vmax rgba(16,24,40,.4)}
  body.drawer-open{overflow:hidden}
}

/* ================= responsive ================= */
@media(max-width:1000px){
  .cols,.grid2,.detail{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
  .report-toolbar{align-items:stretch}
  .report-toolbar>div{flex:1 1 160px}
  .quick-range{flex:1 1 100%}
}
@media(max-width:760px){
  input,textarea,select{font-size:16px}
  .kv{grid-template-columns:1fr}
  .pagehead h1,.pagehead h2{font-size:var(--t-2xl)}
  .cards .card>b{font-size:var(--t-3xl)}
  .tbl .c-chip,.tbl .c-num{width:auto}
  table.tbl thead th,table.tbl tbody td,table.tickets thead th,table.tickets tbody td{padding:9px 10px}
}