/* =====================================================================
   MOHSEN ADVISORY — Client Portal & Back Office
   Extends the brand tokens defined in site.css (loaded first).
   ===================================================================== */

body.app{background:#f4f7f6;color:var(--ink)}

.app-shell{display:grid;grid-template-columns:266px 1fr;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--teal-deep);color:#cfdedd;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.sb-brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}
.sb-brand img{width:46px;height:46px;object-fit:contain}
.sb-brand .t{line-height:1.3}
.sb-brand .t strong{display:block;color:#fff;font-size:14.5px}
.sb-brand .t span{display:block;color:var(--gold-2);font-size:10.5px;letter-spacing:.6px;font-family:var(--font-en)}
.sb-nav{padding:16px 12px;flex:1;display:flex;flex-direction:column;gap:2px}
.sb-label{font-size:10.5px;letter-spacing:1.2px;color:#7f9997;padding:16px 12px 7px;font-family:var(--font-en);text-transform:uppercase}
.sb-link{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;
  font-size:14px;color:#cfdedd;transition:.18s;position:relative;
}
.sb-link i{width:19px;text-align:center;font-size:15px;color:#8fabaa;transition:.18s}
.sb-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-link:hover i{color:var(--gold-2)}
.sb-link.active{background:linear-gradient(90deg,rgba(215,170,89,.16),rgba(215,170,89,.03));color:#fff}
.sb-link.active i{color:var(--gold)}
.sb-link.active::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;background:var(--gold);border-radius:0 3px 3px 0}
html[dir="ltr"] .sb-link.active::before{border-radius:0 3px 3px 0}
.sb-count{
  margin-inline-start:auto;background:var(--gold);color:#12393b;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 6px;
}
.sb-count.alert{background:#c9564a;color:#fff}
.sb-foot{padding:16px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px}
.sb-foot a{color:#a6bfbd;display:flex;align-items:center;gap:9px;padding:7px 0}
.sb-foot a:hover{color:var(--gold-2)}

/* ---------- Top bar ---------- */
.app-main{display:flex;flex-direction:column;min-width:0}
.topbar{
  background:#fff;border-bottom:1px solid #e5edeb;padding:0 clamp(16px,2.4vw,30px);
  height:70px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:19px;margin:0;color:var(--teal-dark);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-actions{display:flex;align-items:center;gap:10px}
.tb-icon{
  width:40px;height:40px;border-radius:10px;border:1px solid #e3ebe9;background:#fff;
  display:grid;place-items:center;color:var(--teal);position:relative;cursor:pointer;transition:.18s;
}
.tb-icon:hover{border-color:var(--gold);color:var(--gold)}
.tb-icon .dot-badge{
  position:absolute;top:-5px;inset-inline-end:-5px;background:#c9564a;color:#fff;font-size:10px;
  min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;font-weight:700;
}
.sidebar-toggle{display:none}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid #e3ebe9;border-radius:26px;background:#fff;cursor:pointer}
.user-chip:hover{border-color:var(--gold)}
.avatar{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-soft));
  color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;font-family:var(--font-en);flex-shrink:0;
}
.avatar.lg{width:62px;height:62px;font-size:20px}
.user-chip .un{font-size:13px;line-height:1.3;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .un small{display:block;color:var(--muted);font-size:11px}

/* Dropdown */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;border:1px solid #e3ebe9;
  border-radius:12px;box-shadow:0 16px 40px rgba(0,54,58,.13);min-width:250px;padding:8px;z-index:50;display:none;
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13.5px;color:var(--ink)}
.dropdown-menu a:hover{background:#f2f7f6;color:var(--teal)}
.dropdown-menu a i{width:16px;color:#8fabaa}
.dropdown-menu hr{border:0;border-top:1px solid #eef3f2;margin:6px 0}
.dropdown-menu .dm-head{padding:10px 12px 8px;font-size:12px;color:var(--muted);border-bottom:1px solid #eef3f2;margin-bottom:6px}
.notif-menu{min-width:340px;max-height:440px;overflow-y:auto}
.notif-item{display:flex;gap:11px;padding:11px 12px;border-radius:8px;align-items:flex-start}
.notif-item:hover{background:#f2f7f6}
.notif-item.unread{background:#f5faf9}
.notif-item .ni{width:32px;height:32px;border-radius:8px;background:#eaf3f2;color:var(--teal);display:grid;place-items:center;flex-shrink:0;font-size:13px}
.notif-item .nb{min-width:0}
.notif-item .nb strong{display:block;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink)}
.notif-item .nb span{font-size:11.5px;color:var(--muted)}

/* ---------- Content ---------- */
.app-content{padding:clamp(18px,2.4vw,30px);flex:1}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.page-head h2{margin:0 0 5px;font-size:22px;color:var(--teal-dark)}
.page-head p{margin:0;color:var(--muted);font-size:13.5px}
.page-head .ph-actions{display:flex;gap:9px;flex-wrap:wrap}

/* Cards */
.card{background:#fff;border:1px solid #e5edeb;border-radius:14px;overflow:hidden}
.card + .card{margin-top:18px}
.card-head{padding:17px 20px;border-bottom:1px solid #eef3f2;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.card-head h3{margin:0;font-size:15.5px;color:var(--teal-dark);display:flex;align-items:center;gap:9px}
.card-head h3 i{color:var(--gold);font-size:14px}
.card-head .ch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-body{padding:20px}
.card-body.tight{padding:0}
.card-foot{padding:14px 20px;border-top:1px solid #eef3f2;background:#fafcfb;font-size:13px}

/* Stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid #e5edeb;border-radius:14px;padding:19px;display:flex;gap:14px;align-items:center;transition:.2s}
.stat:hover{border-color:#dbc9a4;box-shadow:var(--shadow)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.stat-icon.teal{background:#e9f3f2;color:var(--teal)}
.stat-icon.gold{background:#fbf3e3;color:#b8862c}
.stat-icon.red{background:#fbecea;color:#b4463c}
.stat-icon.green{background:#e8f5ee;color:#2e7d5b}
.stat-icon.blue{background:#e9f0f7;color:#31658f}
.stat .sv{font-family:var(--font-en);font-size:25px;font-weight:700;color:var(--teal-dark);line-height:1.1}
.stat .sl{font-size:12.5px;color:var(--muted);margin-top:3px}

/* Tables */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
table.data th{
  text-align:start;padding:12px 16px;background:#f7faf9;color:#5b7473;font-weight:600;
  font-size:12px;border-bottom:1px solid #e8efee;white-space:nowrap;
}
table.data td{padding:14px 16px;border-bottom:1px solid #f0f5f4;vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#fafcfb}
table.data .ref{font-family:var(--font-en);font-weight:700;color:var(--teal);font-size:12.5px;direction:ltr;display:inline-block}
table.data .muted{color:var(--muted);font-size:12.5px}
table.data .num{font-family:var(--font-en);direction:ltr;text-align:start}
table.data .row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid #e3ebe9;background:#fff;color:var(--teal);
  display:grid;place-items:center;font-size:12.5px;cursor:pointer;transition:.18s;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn.danger:hover{border-color:var(--danger);color:var(--danger)}

/* List rows (mobile-friendly alternative to tables) */
.list-row{
  display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #f0f5f4;transition:.15s;
}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:#fafcfb}
.list-row .lr-icon{
  width:42px;height:42px;border-radius:11px;background:#eef4f3;color:var(--teal);
  display:grid;place-items:center;font-size:16px;flex-shrink:0;
}
.list-row .lr-body{flex:1;min-width:0}
.list-row .lr-body strong{display:block;font-size:14px;color:var(--ink);font-weight:600;margin-bottom:3px}
.list-row .lr-body span{display:block;font-size:12.5px;color:var(--muted)}
.list-row .lr-side{text-align:end;flex-shrink:0;display:flex;flex-direction:column;gap:5px;align-items:flex-end}

/* Matter header panel */
.matter-hero{
  background:linear-gradient(135deg,#003c40,#00575a);border-radius:16px;color:#fff;
  padding:26px 28px;margin-bottom:20px;position:relative;overflow:hidden;
}
.matter-hero::after{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(215,170,89,.18);inset-inline-start:-110px;top:-120px;
}
.matter-hero .mh-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.matter-hero .mh-no{font-family:var(--font-en);color:var(--gold-2);font-size:13px;letter-spacing:1.4px;direction:ltr}
.matter-hero h2{margin:6px 0 12px;font-size:clamp(19px,2.4vw,26px);color:#fff;line-height:1.5}
.matter-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:13px;color:#cfe0de;position:relative;z-index:2}
.matter-meta div{display:flex;flex-direction:column;gap:3px}
.matter-meta .mm-l{font-size:11px;color:#93b3b1;letter-spacing:.4px}
.matter-meta .mm-v{color:#fff;font-weight:600}
.progress-bar{height:6px;background:rgba(255,255,255,.16);border-radius:4px;overflow:hidden;margin-top:16px;position:relative;z-index:2}
.progress-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:4px}

/* Tab navigation */
.tabs{display:flex;gap:4px;border-bottom:1px solid #e5edeb;margin-bottom:20px;overflow-x:auto;padding-bottom:1px}
.tabs a{
  padding:11px 17px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;
  white-space:nowrap;display:flex;align-items:center;gap:8px;
}
.tabs a:hover{color:var(--teal)}
.tabs a.active{color:var(--teal);border-bottom-color:var(--gold);font-weight:600}
.tabs a .tcount{background:#eef4f3;color:var(--teal);font-size:11px;padding:1px 7px;border-radius:10px}

/* Two-column layout inside a page */
.split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.split-wide{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}

/* Definition list */
.dl{display:grid;gap:0}
.dl > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #f0f5f4;font-size:13.5px}
.dl > div:last-child{border-bottom:0}
.dl dt{color:var(--muted);flex-shrink:0}
.dl dd{margin:0;text-align:end;font-weight:600;color:var(--ink);min-width:0;word-break:break-word}

/* Timeline */
.timeline{position:relative;padding-inline-start:30px}
.timeline::before{content:"";position:absolute;inset-inline-start:8px;top:6px;bottom:6px;width:1px;background:#e2ebe9}
.tl-item{position:relative;padding-bottom:20px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;inset-inline-start:-26px;top:5px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid var(--gold);
}
.tl-item.done::before{background:var(--gold)}
.tl-item .tl-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.tl-item .tl-m{font-size:12px;color:var(--muted);margin-top:2px}
.tl-item .tl-n{font-size:12.5px;color:#5b7473;margin-top:5px;background:#f7faf9;padding:8px 12px;border-radius:8px}

/* Document / data room */
.doc-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.doc-toolbar .grow{flex:1;min-width:180px}
.doc-toolbar input,.doc-toolbar select{padding:10px 13px;border:1px solid #dce6e4;border-radius:9px;font-size:13.5px;width:100%;background:#fff}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.doc-card{border:1px solid #e5edeb;border-radius:12px;background:#fff;padding:17px;transition:.2s;display:flex;flex-direction:column;gap:10px}
.doc-card:hover{border-color:#dbc9a4;box-shadow:var(--shadow)}
.doc-card .dc-top{display:flex;align-items:flex-start;gap:11px}
.doc-card .dc-ico{width:40px;height:40px;border-radius:10px;background:#f2f7f6;color:var(--teal);display:grid;place-items:center;font-size:17px;flex-shrink:0}
.doc-card .dc-name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5;word-break:break-word}
.doc-card .dc-meta{font-size:11.5px;color:var(--muted);display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.doc-card .dc-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px;border-top:1px solid #f2f6f5}
.vchip{
  font-family:var(--font-en);font-size:11px;background:#eef4f3;color:var(--teal);
  padding:2px 8px;border-radius:10px;font-weight:700;direction:ltr;
}

/* Version history */
.version-row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #f0f5f4}
.version-row:last-child{border-bottom:0}
.version-row .vn{
  width:38px;height:38px;border-radius:10px;background:#f2f7f6;color:var(--teal);flex-shrink:0;
  display:grid;place-items:center;font-family:var(--font-en);font-weight:700;font-size:12.5px;
}
.version-row.current .vn{background:var(--teal);color:#fff}
.version-row .vb{flex:1;min-width:0}
.version-row .vb strong{font-size:13.5px;display:block;word-break:break-word}
.version-row .vb span{font-size:12px;color:var(--muted)}
.version-row .vb .note{font-size:12.5px;color:#5b7473;margin-top:5px;font-style:italic}

/* Access log */
.log-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f3f7f6;font-size:13px}
.log-row:last-child{border-bottom:0}
.log-row .la{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;flex-shrink:0;
  background:#eef4f3;color:var(--teal);
}
.log-row .la.download{background:#e9f0f7;color:#31658f}
.log-row .la.upload{background:#e8f5ee;color:#2e7d5b}
.log-row .la.delete{background:#fbecea;color:#b4463c}
.log-row .lb{flex:1;min-width:0}
.log-row .lb b{font-weight:600}
.log-row .lt{color:var(--muted);font-size:11.5px;white-space:nowrap;font-family:var(--font-en);direction:ltr}

/* Messages thread */
.thread{display:flex;flex-direction:column;gap:16px;padding:20px;max-height:560px;overflow-y:auto;background:#fafcfb}
.bubble{max-width:78%;display:flex;gap:11px;align-items:flex-start}
.bubble .bb{background:#fff;border:1px solid #e5edeb;border-radius:14px;padding:13px 16px;font-size:13.5px;line-height:1.85}
.bubble .bm{font-size:11.5px;color:var(--muted);margin-top:5px;display:flex;gap:8px;align-items:center}
.bubble.mine{align-self:flex-end;flex-direction:row-reverse}
.bubble.mine .bb{background:linear-gradient(135deg,#00575a,#0b6b6d);color:#fff;border-color:transparent}
.bubble.mine .bm{justify-content:flex-end}
.bubble .bfile{
  display:inline-flex;align-items:center;gap:8px;margin-top:9px;padding:8px 12px;
  background:rgba(0,0,0,.05);border-radius:8px;font-size:12.5px;
}
.bubble.mine .bfile{background:rgba(255,255,255,.16);color:#fff}
.composer{padding:16px 20px;border-top:1px solid #eef3f2;background:#fff}
.composer textarea{width:100%;border:1px solid #dce6e4;border-radius:11px;padding:13px 15px;min-height:92px;resize:vertical;font-size:14px;font-family:inherit;line-height:1.8}
.composer textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,87,90,.09)}
.composer .cf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap}

/* Task list */
.task-row{display:flex;gap:13px;align-items:flex-start;padding:15px 20px;border-bottom:1px solid #f0f5f4}
.task-row:last-child{border-bottom:0}
.task-row.done{opacity:.58}
.task-row.overdue{background:#fdf8f7}
.task-check{
  width:22px;height:22px;border-radius:6px;border:2px solid #cfdedc;background:#fff;flex-shrink:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;font-size:11px;margin-top:2px;transition:.18s;
}
.task-check:hover{border-color:var(--gold)}
.task-row.done .task-check{background:var(--success);border-color:var(--success)}
.task-body{flex:1;min-width:0}
.task-body strong{display:block;font-size:14px;margin-bottom:3px;font-weight:600}
.task-row.done .task-body strong{text-decoration:line-through}
.task-body .tm{font-size:12.5px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.task-body .tm .due.late{color:var(--danger);font-weight:600}

/* Invoice */
.invoice-doc{background:#fff;border:1px solid #e5edeb;border-radius:14px;padding:clamp(22px,4vw,44px);max-width:900px;margin-inline:auto}
.inv-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:2px solid var(--teal);margin-bottom:26px}
.inv-head .ih-brand strong{display:block;font-size:21px;color:var(--teal-dark)}
.inv-head .ih-brand span{font-size:12px;color:var(--muted)}
.inv-head .ih-no{text-align:end}
.inv-head .ih-no .lbl{font-size:11.5px;color:var(--muted)}
.inv-head .ih-no .val{font-family:var(--font-en);font-size:19px;font-weight:700;color:var(--teal);direction:ltr}
.inv-parties{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-bottom:26px;font-size:13.5px}
.inv-parties h4{font-size:11.5px;color:var(--muted);margin:0 0 8px;letter-spacing:.6px;text-transform:uppercase}
.inv-parties p{margin:0;line-height:1.9}
table.inv-items{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:22px}
table.inv-items th{background:#f4f8f7;padding:11px 14px;text-align:start;font-size:12px;color:#5b7473;border-bottom:1px solid #e5edeb}
table.inv-items td{padding:13px 14px;border-bottom:1px solid #f2f6f5}
table.inv-items .n{text-align:end;font-family:var(--font-en);direction:ltr;white-space:nowrap}
.inv-totals{margin-inline-start:auto;max-width:340px;font-size:14px}
.inv-totals > div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f2f6f5}
.inv-totals > div.grand{border-bottom:0;border-top:2px solid var(--teal);margin-top:6px;padding-top:14px;font-size:17px;font-weight:700;color:var(--teal-dark)}
.inv-totals .n{font-family:var(--font-en);direction:ltr}

/* Filters / search */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters select,.filters input{padding:9px 13px;border:1px solid #dce6e4;border-radius:9px;font-size:13px;background:#fff}
.filters .spacer{flex:1}

/* Auth screens */
body.auth-page{background:linear-gradient(135deg,#002d31 0%,#004b4f 60%,#003c40 100%);min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.auth-wrap{width:100%;max-width:470px}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-brand img{width:78px;margin:0 auto 12px}
.auth-brand strong{display:block;color:#fff;font-size:19px}
.auth-brand span{color:var(--gold-2);font-size:11.5px;letter-spacing:1.2px;font-family:var(--font-en)}
.auth-card{background:#fff;border-radius:18px;padding:clamp(26px,4vw,38px);box-shadow:0 24px 60px rgba(0,0,0,.26)}
.auth-card h1{font-size:22px;color:var(--teal-dark);margin:0 0 6px;text-align:center}
.auth-card .sub{color:var(--muted);font-size:13.5px;text-align:center;margin:0 0 26px;line-height:1.8}
.auth-card .field{margin-bottom:16px}
.auth-foot{text-align:center;margin-top:20px;font-size:13.5px;color:var(--muted)}
.auth-foot a{color:var(--teal);font-weight:600}
.auth-links{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.auth-back{text-align:center;margin-top:22px;font-size:13px}
.auth-back a{color:#bcd3d1}
.auth-back a:hover{color:var(--gold-2)}

/* OTP input */
.otp-input{
  width:100%;text-align:center;font-family:var(--font-en);font-size:30px;font-weight:700;
  letter-spacing:14px;padding:16px 10px !important;direction:ltr;color:var(--teal-dark);
}
.otp-input::placeholder{letter-spacing:10px;color:#c8d6d4;font-weight:400}
.otp-timer{text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}

/* Upload modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,32,34,.55);z-index:80;display:none;padding:20px;overflow-y:auto}
.modal-backdrop.open{display:flex;align-items:flex-start;justify-content:center}
.modal{background:#fff;border-radius:16px;width:100%;max-width:560px;margin:auto;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal-head{padding:19px 22px;border-bottom:1px solid #eef3f2;display:flex;align-items:center;justify-content:space-between}
.modal-head h3{margin:0;font-size:16px;color:var(--teal-dark)}
.modal-head button{background:none;border:0;font-size:19px;color:var(--muted);cursor:pointer;line-height:1}
.modal-body{padding:22px;max-height:70vh;overflow-y:auto}
.modal-foot{padding:16px 22px;border-top:1px solid #eef3f2;display:flex;gap:10px;justify-content:flex-end;background:#fafcfb;border-radius:0 0 16px 16px}

/* Flash toast area */
.flash-stack{margin-bottom:18px}

/* Responsive */
@media(max-width:1100px){
  .split,.split-wide{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;width:270px;z-index:70;
    transform:translateX(-100%);transition:transform .28s ease;
  }
  html[dir="rtl"] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0) !important}
  .sidebar-toggle{display:grid}
  .sb-backdrop{position:fixed;inset:0;background:rgba(0,32,34,.5);z-index:65;display:none}
  .sb-backdrop.open{display:block}
  .user-chip .un{display:none}
  .notif-menu{min-width:290px}
}
@media(max-width:600px){
  .topbar{height:62px;gap:10px}
  .topbar h1{font-size:16px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:15px;gap:11px}
  .stat .sv{font-size:21px}
  .stat-icon{width:40px;height:40px;font-size:16px}
  .inv-parties{grid-template-columns:1fr}
  .bubble{max-width:92%}
  .dl > div{flex-direction:column;gap:3px}
  .dl dd{text-align:start}
}

@media print{
  .sidebar,.topbar,.no-print,.tabs{display:none !important}
  .app-shell{grid-template-columns:1fr}
  .app-content{padding:0}
  .invoice-doc{border:0;max-width:100%}
  body.app{background:#fff}
}