/* =====================================================================
   VATLOOP — Dashboard design system (admin + client). Self-contained.
   ===================================================================== */
@font-face{font-family:"NumArial";src:local("Arial"),local("Helvetica");font-weight:100 900;
  unicode-range:U+0030-0039,U+002C,U+002E,U+0025,U+002B,U+002D,U+003A,U+002F,U+0028,U+0029,U+00D7;}

:root{
  --brand:#1E6FB8;--brand-600:#1A63A4;--brand-700:#155488;--navy:#0D2E4F;--navy-900:#0A2440;
  --accent:#4FC3F7;--accent-2:#5AB9F2;
  --ink:#0D2E4F;--ink-2:#355A78;--muted:#5F8DB4;--muted-2:#8FAEC6;
  --line:#E6EEF6;--line-2:#D8E6F2;--surface:#FFFFFF;--surface-2:#F4F8FC;--surface-3:#E9F2FA;
  --ok:#1F9D6B;--ok-bg:#E6F6EF;--warn:#B8851A;--warn-bg:#FBF3E2;--info:#1E6FB8;--info-bg:#E6F1FB;
  --danger:#C2453C;--danger-bg:#FBECEA;
  --grad-brand:linear-gradient(135deg,#1E6FB8 0%,#155488 60%,#0D2E4F 100%);
  --grad-loop:linear-gradient(120deg,#1E6FB8 0%,#4FC3F7 100%);
  --font:"NumArial","IBM Plex Sans Arabic","IBM Plex Sans",system-ui,"Segoe UI",Tahoma,sans-serif;
  --r-sm:9px;--r:13px;--r-lg:18px;--r-pill:999px;
  --sh-sm:0 1px 3px rgba(13,46,79,.06);--sh:0 6px 22px rgba(13,46,79,.08);--sh-md:0 14px 40px rgba(13,46,79,.12);
  --ring:0 0 0 4px rgba(30,111,184,.16);
  --sidebar-w:268px;--topbar-h:66px;--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--surface-2);color:var(--ink);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%;display:block}
svg.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}.ic{width:20px;height:20px;flex:none}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}ul{list-style:none}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
.num{font-family:"NumArial",Arial,sans-serif;font-feature-settings:"tnum" 1}
.riyal{width:.92em;height:.92em}
::selection{background:rgba(30,111,184,.18)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:700;color:var(--navy)}
.ltr{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ---------- Layout ---------- */
.dash{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
.main{min-width:0;display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.content{padding:clamp(16px,2.5vw,30px);flex:1}
.content-narrow{max-width:1100px;margin-inline:auto;width:100%}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--navy);color:#BFD4E8;display:flex;flex-direction:column;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:40}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--navy);z-index:1}
.sb-brand img{height:34px}
.sb-brand .bn{font-weight:800;color:#fff;font-size:1.1rem}
.sb-nav{padding:14px 12px;display:flex;flex-direction:column;gap:3px}
.sb-group{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6E91B4;padding:16px 14px 7px}
.sb-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:#BFD4E8;font-weight:600;font-size:.93rem;transition:background .2s,color .2s;position:relative}
.sb-link .ic{width:20px;height:20px;color:#7FA3C4;transition:color .2s}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-link:hover .ic{color:#BFE6FB}
.sb-link.active{background:var(--grad-loop);color:#fff;box-shadow:0 6px 16px rgba(30,111,184,.4)}
.sb-link.active .ic{color:#fff}
.sb-link .badge-count{margin-inline-start:auto;background:rgba(255,255,255,.16);color:#fff;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:var(--r-pill);min-width:20px;text-align:center}
.sb-link.active .badge-count{background:rgba(255,255,255,.25)}
.sb-foot{margin-top:auto;padding:16px}
.sb-foot .help{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:14px;font-size:.84rem;color:#AFC8DF}
.sb-foot .help b{color:#fff;display:block;margin-bottom:4px}

/* ---------- Topbar ---------- */
.topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 clamp(14px,2.5vw,26px);position:sticky;top:0;z-index:30}
.topbar .tb-burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:11px;align-items:center;justify-content:center}
.topbar .tb-title{font-weight:800;font-size:1.12rem;color:var(--navy)}
.topbar .tb-sub{font-size:.8rem;color:var(--muted);font-weight:500}
.topbar .tb-spacer{margin-inline-start:auto}
.tb-actions{display:flex;align-items:center;gap:10px}
.tb-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink-2);position:relative;transition:.2s}
.tb-btn:hover{background:var(--surface-2);color:var(--brand);border-color:var(--line-2)}
.tb-btn .dot{position:absolute;top:9px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.tb-lang{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:11px;font-weight:700;font-size:.86rem;color:var(--ink);background:#fff}
.tb-lang:hover{border-color:var(--brand);color:var(--brand)}
/* user menu */
.tb-user{display:flex;align-items:center;gap:10px;padding:5px 7px 5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer}
[dir=rtl] .tb-user{padding:5px 12px 5px 7px}
.tb-user:hover{border-color:var(--line-2);background:var(--surface-2)}
.tb-user .av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.tb-user .meta{display:flex;flex-direction:column;gap:1px;align-items:flex-start;min-width:0;text-align:start}
.tb-user .nm{font-weight:700;font-size:.86rem;line-height:1.2;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.tb-user .rl{font-size:.72rem;color:var(--muted);line-height:1.15;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .tb-user .meta{display:none}
  .topbar{gap:8px}
  .topbar .tb-sub{display:none}
  .topbar .tb-title{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .topbar .tb-lang span{display:none}
}
/* user dropdown header (full name + email — also covers mobile where .meta is hidden) */
.dropdown-menu .dd-userhead{display:flex;align-items:center;gap:11px;padding:12px 14px}
.dropdown-menu .dd-userhead .av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.dropdown-menu .dd-userhead b{display:block;font-size:.9rem;color:var(--ink);line-height:1.3}
.dropdown-menu .dd-userhead span{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}

/* dropdown */
.dropdown{position:relative}
.dropdown-menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:60}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:none}
.dropdown-menu a,.dropdown-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:9px;color:var(--ink);font-size:.9rem;font-weight:600;text-align:start}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--surface-2);color:var(--brand)}
.dropdown-menu .ic{width:18px;height:18px;color:var(--muted)}
.dropdown-menu .dd-sep{height:1px;background:var(--line);margin:6px 0}
.dropdown-menu.wide{min-width:340px;max-width:92vw;padding:0}
.dd-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);display:flex;align-items:center;justify-content:space-between}
.dd-list{max-height:360px;overflow-y:auto}
.dd-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);transition:background .2s}
.dd-item:hover{background:var(--surface-2)}
.dd-item.unread{background:var(--info-bg)}
.dd-item .di-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface-3);color:var(--brand);display:flex;align-items:center;justify-content:center}
.dd-item p{font-size:.86rem;color:var(--ink);margin:0}
.dd-item time{font-size:.74rem;color:var(--muted)}
.dd-foot{padding:11px;text-align:center}

/* mobile drawer */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(10,36,64,.5);z-index:39;opacity:0;transition:opacity .3s}
@media(max-width:1024px){
  .dash{grid-template-columns:1fr;position:relative}
  .sidebar{position:absolute;inset-block:0;inset-inline-start:0;width:var(--sidebar-w);height:100%;transform:translateX(-100%)}
  [dir=rtl] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay.show{display:block;opacity:1}
  .topbar .tb-burger{display:flex}
}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
.page-head .ph-sub{color:var(--muted);font-size:.92rem;margin-top:3px}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);margin-bottom:8px}
.breadcrumb .ic{width:14px;height:14px}.breadcrumb a:hover{color:var(--brand)}

/* ---------- Cards ---------- */
.d-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.d-card-pad{padding:clamp(16px,2vw,24px)}
.d-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.d-card-head h3{font-size:1.05rem;font-weight:800}
.d-card-head .hint{font-size:.82rem;color:var(--muted)}
.grid{display:grid;gap:clamp(14px,1.8vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* KPI stat */
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s;position:relative;overflow:hidden}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.stat-card .sc-ic{width:48px;height:48px;border-radius:13px;background:var(--surface-3);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.stat-card .sc-ic.g{background:var(--grad-loop);color:#fff}
.stat-card .sc-val{font-family:"NumArial",Arial,sans-serif;font-weight:800;font-size:2rem;color:var(--navy);line-height:1}
.stat-card .sc-label{color:var(--muted);font-size:.88rem;font-weight:600;margin-top:6px}
.stat-card .sc-trend{font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;margin-top:8px}
.sc-trend.up{color:var(--ok)}.sc-trend.down{color:var(--danger)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap}
.badge .bdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);background:var(--ok-bg)}
.badge.warn{color:var(--warn);background:var(--warn-bg)}
.badge.info{color:var(--info);background:var(--info-bg)}
.badge.brand{color:var(--brand);background:var(--surface-3)}
.badge.danger{color:var(--danger);background:var(--danger-bg)}
.badge.muted{color:var(--muted);background:var(--surface-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;border-radius:11px;font-weight:700;font-size:.92rem;line-height:1;background:var(--brand);color:#fff;border:1.5px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s;box-shadow:0 6px 16px rgba(30,111,184,.22);white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,111,184,.3)}
.btn:active{transform:none}
.btn .ic{width:18px;height:18px}
.btn.sm{padding:8px 14px;font-size:.84rem}
.btn.lg{padding:14px 26px;font-size:1rem}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-3);border-color:var(--brand);box-shadow:none}
.btn.soft{background:var(--surface-3);color:var(--brand);box-shadow:none}
.btn.soft:hover{background:var(--line-2);box-shadow:none}
.btn.dark{background:var(--navy)}
.btn.ok{background:var(--ok);box-shadow:0 6px 16px rgba(31,157,107,.25)}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(194,69,60,.22)}
.btn.danger .ic{color:#fff}
.btn.danger:hover{background:#A83A32;box-shadow:0 10px 22px rgba(194,69,60,.32)}
.btn.accent{background:var(--accent);color:var(--navy)}
.btn.icon{padding:0;width:38px;height:38px;border-radius:10px}
.btn[disabled]{opacity:.55;pointer-events:none}
.arrow{display:inline-flex;transition:transform .2s}[dir=rtl] .arrow{transform:scaleX(-1)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;-webkit-overflow-scrolling:touch}
table.d-table{width:100%;border-collapse:collapse;min-width:640px}
.d-table th,.d-table td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
.d-table thead th{background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.d-table tbody tr{transition:background .15s}
.d-table tbody tr:hover{background:var(--surface-2)}
.d-table tbody tr:last-child td{border-bottom:0}
.d-table .t-ref{font-family:"NumArial",Arial,sans-serif;font-weight:700;color:var(--brand)}
.t-actions{display:flex;gap:6px;align-items:center}
.t-act{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.18s}
.t-act:hover{background:var(--surface-3);color:var(--brand);border-color:var(--line-2)}
.t-act.danger:hover{background:var(--danger-bg);color:var(--danger)}
.t-act .ic{width:17px;height:17px}
.cell-user{display:flex;align-items:center;gap:10px}
.cell-user .av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.cell-user b{display:block;font-size:.9rem;color:var(--navy)}
.cell-user span{font-size:.78rem;color:var(--muted)}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:18px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.form-grid.cols-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field>label{font-weight:700;font-size:.86rem;color:var(--navy)}
.field .req{color:var(--danger)}
.field .hint{font-size:.78rem;color:var(--muted)}
.input,.select,.textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--surface-2);transition:border-color .2s,background .2s,box-shadow .2s;color:var(--ink);font-size:.92rem}
.input,.textarea{-webkit-appearance:none;appearance:none}
.select{-webkit-appearance:none;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='%235F8DB4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-inline-end:38px}
[dir=rtl] .select{background-position:left 13px center}
.textarea{min-height:120px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:var(--ring)}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.field.error .input,.field.error .select,.field.error .textarea{border-color:var(--danger);background:var(--danger-bg)}
.field .err-msg{color:var(--danger);font-size:.8rem}
.input-group{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:11px;background:var(--surface-2);overflow:hidden}
.input-group:focus-within{border-color:var(--brand);background:#fff;box-shadow:var(--ring)}
.input-group .input{border:0;background:transparent;box-shadow:none!important}
.input-group .ig-addon{padding:0 13px;color:var(--muted);background:var(--surface-3);align-self:stretch;display:flex;align-items:center;font-size:.85rem}
/* toggle switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch .track{width:44px;height:25px;border-radius:var(--r-pill);background:var(--line-2);transition:.25s;position:relative;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+.track{background:var(--brand)}
.switch input:checked+.track::after{inset-inline-start:22px}
/* file drop */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:7px;border:2px dashed var(--line-2);border-radius:var(--r);background:var(--surface-2);padding:26px 20px;text-align:center;transition:border-color .2s,background .2s,box-shadow .2s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--surface-3)}
.dropzone.drag{box-shadow:var(--ring)}
.dropzone input[type=file]{display:none}
.dropzone .ic{width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:50%;background:var(--surface);color:var(--brand);box-shadow:var(--sh-sm);transition:background .2s,color .2s}
.dropzone:hover .ic,.dropzone.drag .ic{background:var(--brand);color:#fff}
.dropzone b{color:var(--navy);font-size:.92rem}
.dropzone p{color:var(--ink-2);font-size:.9rem}.dropzone span{color:var(--muted);font-size:.8rem}
/* selected-files list (rendered by app.js dropzones) */
.file-chip,[data-file-list]>div{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;margin-top:8px;font-size:.85rem;color:var(--ink-2)}
/* single file picker (avatars / images / single attachments) — built by app.js fileInputs() */
.file-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-pick-input{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
.file-pick-prev{flex:none;width:52px;height:52px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);overflow:hidden}
.file-pick-prev img{width:100%;height:100%;object-fit:cover}
.file-pick-prev .ic{width:22px;height:22px}
.file-pick-name{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.85rem}
.file-pick-name.has{color:var(--ink-2);font-weight:600}

/* ---------- Alerts ---------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px solid;margin-bottom:18px;font-size:.9rem;font-weight:600}
.alert .ic{width:20px;height:20px;flex:none;margin-top:1px}
.alert.ok{background:var(--ok-bg);border-color:#BCE6D3;color:#14744f}
.alert.warn{background:var(--warn-bg);border-color:#EBD9A8;color:#8a6313}
.alert.danger{background:var(--danger-bg);border-color:#E9C4C0;color:#9c352d}
.alert.info{background:var(--info-bg);border-color:#BBD8F2;color:#155488}

/* ---------- Timeline ---------- */
.timeline{display:flex;flex-direction:column;gap:0}
.tl-item{display:flex;gap:14px;padding-bottom:22px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item .tl-mark{flex:none;width:36px}
.tl-item .tl-mark i{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface-3);color:var(--muted);border:2px solid var(--line-2);position:relative;z-index:1}
.tl-item .tl-mark i .ic{width:17px;height:17px}
.tl-item:not(:last-child) .tl-mark::after{content:"";position:absolute;top:36px;bottom:-2px;inset-inline-start:17px;width:2px;background:var(--line-2)}
.tl-item.done .tl-mark i{background:var(--brand);color:#fff;border-color:var(--brand)}
.tl-item.done:not(:last-child) .tl-mark::after{background:var(--brand)}
.tl-item.active .tl-mark i{background:#fff;color:var(--brand);border-color:var(--brand);box-shadow:var(--ring)}
.tl-item .tl-body{padding-top:5px;min-width:0}
.tl-item .tl-body b{display:block;color:var(--navy);font-size:.95rem}
.tl-item .tl-body p{color:var(--ink-2);font-size:.86rem;margin:3px 0 0}
.tl-item .tl-body time{font-size:.76rem;color:var(--muted)}

/* ---------- Chat ---------- */
.chat{display:flex;flex-direction:column;height:520px;max-height:70vh}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2)}
.bubble{max-width:78%;padding:11px 15px;border-radius:16px;font-size:.9rem;line-height:1.6;position:relative;box-shadow:var(--sh-sm)}
.bubble time{display:block;font-size:.7rem;opacity:.7;margin-top:4px}
.bubble.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:4px}
.bubble.me{background:var(--grad-loop);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.bubble.me time{color:rgba(255,255,255,.85)}
.chat-input{display:flex;gap:8px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.chat-input input[type=text],.chat-input textarea,.chat-input .input{flex:1;width:100%;min-width:0;padding:11px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font:inherit;font-size:.92rem;line-height:1.5;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;resize:none}
.chat-input input[type=text]:focus,.chat-input textarea:focus,.chat-input .input:focus{border-color:var(--brand);background:#fff;box-shadow:var(--ring)}
.chat-input input[type=text]::placeholder,.chat-input textarea::placeholder,.chat-input .input::placeholder{color:var(--muted-2)}
.chat-input .btn{flex:none}

/* ---------- Empty / misc ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty .ic{width:54px;height:54px;color:var(--line-2);margin:0 auto 14px}
.empty h4{color:var(--ink-2);margin-bottom:6px}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:.86rem;color:var(--ink-2)}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .active span,.pagination [aria-current]{background:var(--brand);color:#fff;border-color:var(--brand)}
.pagination .disabled span{opacity:.4}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs a{padding:12px 18px;font-weight:700;font-size:.9rem;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
/* chips/filters */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;font-weight:600;font-size:.84rem;color:var(--ink-2);transition:.18s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.toolbar .search{flex:1;min-width:200px}
/* avatar */
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-3)}
.avatar.lg{width:64px;height:64px}.avatar.sm{width:30px;height:30px}
.av-initial{display:flex;align-items:center;justify-content:center;background:var(--grad-brand);color:#fff;font-weight:800;border-radius:50%}
/* progress */
.progress{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--grad-loop);border-radius:var(--r-pill)}
.divider{height:1px;background:var(--line);margin:18px 0}
.text-muted{color:var(--muted)}.text-ink2{color:var(--ink-2)}.text-end{text-align:end}.text-center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.mt-2{margin-top:8px}.mt-4{margin-top:18px}.mb-0{margin-bottom:0}.w-full{width:100%}
.muted-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:16px}

/* modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .m-overlay{position:absolute;inset:0;background:rgba(10,36,64,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal .m-box{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);width:min(560px,100%);max-height:90vh;overflow-y:auto;z-index:1;animation:mIn .25s var(--ease)}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.m-head h3{font-size:1.1rem}.m-body{padding:22px}.m-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

/* reveal (subtle) */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* toast */
#toasts{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:300;display:flex;flex-direction:column;gap:10px}
.toast{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--brand);border-radius:var(--r);box-shadow:var(--sh-md);padding:14px 18px;display:flex;gap:10px;align-items:center;font-weight:600;font-size:.9rem;animation:tIn .3s var(--ease)}
.toast.ok{border-inline-start-color:var(--ok)}.toast.danger{border-inline-start-color:var(--danger)}
@keyframes tIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
[dir=rtl] @keyframes tIn{from{transform:translateX(-20px)}}

/* ---------- Blog / Knowledge-center post cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:18px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,border-color .25s}
.post-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:var(--line-2)}
.post-card .pc-cover{display:block;aspect-ratio:1200/630;background-size:cover;background-position:center;background-color:var(--surface-3);position:relative}
.post-card .pc-cover .badge{position:absolute;top:10px;inset-inline-start:10px}
.post-card .pc-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .pc-cat{font-size:.74rem;font-weight:800;color:var(--brand);letter-spacing:.2px}
.post-card .pc-body h3{font-size:1.02rem;line-height:1.5;margin:0}
.post-card .pc-body h3 a{color:var(--navy)}
.post-card .pc-body h3 a:hover{color:var(--brand)}
.post-card .pc-excerpt{font-size:.84rem;color:var(--muted);line-height:1.65;margin:0;flex:1}
.post-card .pc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.74rem;color:var(--muted-2)}
.post-card .pc-meta .sep{opacity:.5}
.post-card .pc-actions{display:flex;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.post-card .pc-actions .btn{flex:1;justify-content:center}
.post-card .pc-actions form{flex:0 0 auto}
.post-card .pc-actions form .btn{padding-inline:12px}

/* ===================== iOS / mobile foundations ===================== */
/* Prevent iOS Safari auto-zoom when focusing a field (font must be ≥16px). */
@media (max-width:640px){
  .input,.select,.textarea,
  .chat-input input[type=text],.chat-input textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  textarea,select{font-size:16px}
}
/* Respect the notch / home-indicator on the mobile drawer sidebar. */
@supports (padding:max(0px)){
  @media (max-width:1024px){
    .sidebar{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
  }
}

/* ===================== Rich text editor (Quill) ===================== */
.rich-editor{ border:1.5px solid var(--line-2); border-radius:11px; overflow:hidden; background:#fff; }
.rich-editor:focus-within{ border-color:var(--brand); box-shadow:var(--ring); }
.rich-editor .ql-toolbar{ border:0; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:0; }
.rich-editor .ql-container{ border:0; font-family:var(--font); font-size:.95rem; }
.rich-editor .ql-editor{ min-height:200px; line-height:1.85; color:var(--ink); }
.rich-editor .ql-editor.ql-blank::before{ color:var(--muted-2); font-style:normal; }
.rich-editor[data-dir=rtl] .ql-editor{ direction:rtl; text-align:right; }
.rich-editor[data-dir=ltr] .ql-editor{ direction:ltr; text-align:left; }
.rich-editor .ql-snow .ql-stroke{ stroke:var(--ink-2); }
.rich-editor .ql-snow .ql-fill{ fill:var(--ink-2); }
.rich-editor .ql-snow .ql-picker{ color:var(--ink-2); }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor .ql-snow .ql-active .ql-stroke{ stroke:var(--brand); }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor .ql-snow .ql-active .ql-fill{ fill:var(--brand); }