/* ============================================================================
   SQFT: shared dashboard theme (monochrome brand: black / gray / white)
   Fonts: Playfair Display (headings) + Source Sans 3 (body)
   ========================================================================== */
:root{
  --ink:#000000;--ink-2:#161616;--gray:#969696;--gray-mid:#ababab;
  --line:#e2e2e2;--line-soft:#eeeeee;--paper:#ffffff;--paper-2:#f7f7f7;--paper-3:#fafafa;
  --serif:'Playfair Display',Georgia,serif;--sans:'Source Sans 3','Source Sans Pro',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper-2);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* Belt and braces: the viewport is the hard limit. `clip`, not `hidden`, because hidden
   would make the body a scroll container and break the sticky topbar and off-canvas nav. */
body{overflow-x:clip}
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* Sidebar (the left taskbar) */
.sidebar{background:var(--ink-2);color:#d8d8d8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:24px 24px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .mark{font-family:var(--serif);font-weight:700;font-size:27px;letter-spacing:2px;color:#fff}
.brand .brand-img{height:56px;width:auto;display:block}
.brand .sub{font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gray);margin-top:2px}
.nav{padding:14px 12px;flex:1;overflow:auto}
.nav-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#6f6f6f;padding:10px 12px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:7px;color:#c4c4c4;text-decoration:none;font-size:13.5px;font-weight:400;cursor:pointer;transition:background .12s,color .12s;position:relative}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:#fff;color:var(--ink);font-weight:600}
.nav a .ic{width:14px;text-align:center;font-size:9px;opacity:.85}
.nav a .badge{margin-left:auto;background:var(--gray);color:var(--ink-2);font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav a.active .badge{background:var(--ink);color:#fff}
.who{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}
.who .row{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.who .av{width:34px;height:34px;border-radius:50%;background:var(--gray);color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.who .nm{font-size:13px;color:#fff;font-weight:600;line-height:1.2}
.who .rl{font-size:11px;color:var(--gray)}
.logout{width:100%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#d8d8d8;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:9px;border-radius:8px;cursor:pointer;transition:all .14s}
.logout:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Main */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:0 30px;height:70px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.topbar .title h1{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.1}
.topbar .title p{font-size:12.5px;color:var(--gray);margin-top:2px}
.top-actions{display:flex;align-items:center;gap:14px}
.search{display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:200px;color:var(--gray)}
.search input{border:none;background:none;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink);width:100%}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:var(--paper);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);position:relative}
.icon-btn .dot{position:absolute;top:6px;right:7px;min-width:15px;height:15px;padding:0 3px;background:var(--ink);color:#fff;border-radius:9px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}

.content{padding:26px 30px 46px}

.scope{display:flex;align-items:center;gap:13px;background:var(--ink-2);color:#e6e6e6;border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:13.5px;line-height:1.4}
.scope .si{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.scope b{color:#fff;font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 16px 15px}
.kpi.hot{background:var(--ink);border-color:var(--ink)}
.kpi.hot .k-lbl,.kpi.hot .k-delta{color:var(--gray-mid)}
.kpi.hot .k-val{color:#fff}
.kpi .k-lbl{font-size:11.5px;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.kpi .k-val{font-family:var(--serif);font-weight:600;font-size:24px;margin-top:9px;letter-spacing:-.3px}
.kpi .k-delta{font-size:12px;margin-top:5px;color:var(--gray);display:flex;align-items:center;gap:5px}
.kpi .k-delta b{font-weight:600;color:var(--ink)}
.kpi.hot .k-delta b{color:#fff}
.up::before{content:"\25B2";font-size:8px}
.down::before{content:"\25BC";font-size:8px}

.grid{display:grid;gap:16px}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:1.5fr 1fr}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.card h3{font-family:var(--serif);font-weight:600;font-size:16px;margin-bottom:2px}
.card .c-sub{font-size:12px;color:var(--gray);margin-bottom:14px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.card-head h3{margin-bottom:1px}
.chart-wrap{position:relative;height:250px}
.chart-wrap.sm{height:210px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--gray);font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;font-weight:500}
.u-name{font-weight:600}
.muted{color:var(--gray)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.3px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--line);color:var(--ink-2);background:var(--paper-2)}
.pill.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill.mid{background:#e9e9e9;color:var(--ink-2);border-color:#dcdcdc}
.pill.soft{background:var(--paper-2);color:var(--gray)}
.pill.cash{background:var(--ink);color:#fff;border-color:var(--ink)}

.bar-mini{height:6px;background:var(--line);border-radius:4px;overflow:hidden;width:78px;display:inline-block;vertical-align:middle}
.bar-mini span{display:block;height:100%;background:var(--ink)}
.prog-row{display:flex;align-items:center;gap:10px}
.prog-row .pct{font-size:12px;font-weight:600;width:42px;font-variant-numeric:tabular-nums}

.acc{display:inline-flex;font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.acc.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.acc.own{background:var(--paper-2);color:var(--ink-2);border-color:var(--gray-mid)}
.acc.mid{background:#e9e9e9;color:var(--ink-2);border-color:#dcdcdc}
.acc.none{background:transparent;color:var(--gray-mid);border-color:transparent;font-weight:500}
.perm-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.perm-row:last-child{border-bottom:none}
.perm-row .pmark{width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.perm-row.no .pmark{background:var(--paper-2);color:var(--gray-mid);border:1px solid var(--line)}
.perm-row .pkey{flex:1;font-size:13.5px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--sans);font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:9px;cursor:pointer;border:1px solid var(--ink);transition:all .15s;background:var(--paper);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink-2)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.block{width:100%}
.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:8px}
.btn.reject{background:#fff;color:var(--ink);border-color:var(--gray-mid)}
.btn.reject:hover{background:var(--paper-2)}
.act-btns{display:flex;gap:8px}

/* Payments + forms */
.pay-amt{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.5px}
.pay-due{font-size:13px;color:var(--gray)}
.pmethods{display:flex;gap:10px;margin:4px 0 16px;flex-wrap:wrap}
.pmethod{flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--paper);transition:all .14s}
.pmethod:hover{border-color:var(--gray-mid)}
.pmethod.sel{border-color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--ink)}
.pmethod .pm-t{font-weight:600;font-size:13.5px}
.pmethod .pm-d{font-size:11.5px;color:var(--gray);margin-top:2px}
.paybox{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-size:13px;margin-bottom:16px;line-height:1.5}
.paybox b{font-weight:600}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;letter-spacing:.2px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.field textarea{resize:vertical;min-height:84px}
.filedrop{display:block;border:1px dashed var(--gray-mid);border-radius:9px;padding:14px;text-align:center;font-size:13px;color:var(--gray);cursor:pointer;background:var(--paper-2);margin-bottom:6px}
.filedrop input{display:none}
.cfg-input{width:92px;font-family:var(--sans);font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--paper-2);font-variant-numeric:tabular-nums}
.cfg-input:focus{outline:none;border-color:var(--ink);background:#fff}
.chk{width:17px;height:17px;accent-color:#000;cursor:pointer}
.row-cash td{background:#fafafa}
.cash-note{font-size:12px;color:var(--gray);margin-top:8px}

.dl{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.dl:last-child{border-bottom:none}
.dl b{font-weight:600}
.ann{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ann:last-child{border-bottom:none}
.ann .adot{width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:6px;flex:none}
.ann .atxt{font-size:13.5px;line-height:1.4}
.ann .adate{font-size:11.5px;color:var(--gray);margin-top:2px}
.alert-list{display:flex;flex-direction:column}
.alert{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.alert:last-child{border-bottom:none}
.alert .abadge{flex:none;width:30px;height:30px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px}
.alert.hot .abadge{background:var(--ink);color:#fff;border-color:var(--ink)}
.alert .atext{font-size:13px;line-height:1.35}
.alert .atext b{font-weight:600}
.alert .atime{font-size:11.5px;color:var(--gray);margin-top:2px}

/* Reports / documents rows */
.listrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.listrow:last-child{border-bottom:none}
.listrow .li{width:34px;height:34px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.listrow .lt{flex:1}
.listrow .lt .l1{font-size:13.5px;font-weight:600}
.listrow .lt .l2{font-size:11.5px;color:var(--gray)}

#toast{position:fixed;left:50%;bottom:26px;max-width:calc(100vw - 32px);transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:500;opacity:0;transition:all .25s;z-index:100;pointer-events:none;box-shadow:0 12px 34px rgba(0,0,0,.28)}

/* drill-down: clickable rows + back control */
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--paper-2)}
tr.rowlink td.u-name{position:relative}
.backlink{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;margin-bottom:16px;color:var(--gray);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}
.backlink:hover{color:var(--ink)}

/* v2: forms, filters, warnings, staff */
/* Horizontal group of controls. dashboard.js uses .rowflex in 14 places and sets gap,
   align-items and flex-wrap inline on them, but the class itself was never defined here,
   so every one of those rows fell back to block layout: the gaps did nothing, inline
   labels ran straight into the button beside them, and any child that was itself a flex
   box (a checkbox label) broke onto its own line. */
.rowflex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.formgrid .full{grid-column:1 / -1}
.formgrid > div{display:flex;flex-direction:column}
/* A full-width cell stacks like every other cell: label, then field, then help text.
   It used to be flex-direction:row, which laid those three out SIDE BY SIDE and pushed
   help text and long labels off the right edge of the card. Rows that genuinely want a
   horizontal layout (button rows) opt in with .inline. */
.formgrid > div.full{flex-direction:column}
.formgrid > div.full.inline,.formgrid > div.full.rowflex{flex-direction:row;flex-wrap:wrap;align-items:center}
.formgrid label{font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.3px;text-transform:uppercase}
.formgrid input,.formgrid select,.formgrid textarea{width:100%;font-family:var(--sans);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink);transition:border-color .14s,background .14s}
/* Checkboxes and radios are inline controls that sit beside their label, not fields of
   their own. Without this they inherit width:100% above, so the box stretches across the
   row and shoves its own label text to the far right. */
.formgrid input[type=checkbox],.formgrid input[type=radio]{width:auto;min-width:0;flex:none;padding:0;border:0;background:none;border-radius:0;accent-color:var(--ink)}
.formgrid input[type=file]{width:auto;max-width:100%;padding:9px 11px}
/* width:auto is not enough: a full-width cell is a column flex box, and the default
   align-items:stretch applies precisely when the cross size computes to auto. */
.formgrid > div.full > input[type=file]{align-self:flex-start}
.formgrid input::placeholder,.formgrid textarea::placeholder{color:var(--gray-mid)}
.formgrid input:focus,.formgrid select:focus,.formgrid textarea:focus{outline:none;border-color:var(--ink);background:#fff}
@media(max-width:760px){.formgrid{grid-template-columns:1fr}}
/* iOS Safari zooms the viewport whenever a focused form control computes below 16px,
   and it never zooms back out. 16px at the drawer breakpoint kills the lurch. The
   !important is load-bearing: several selects carry an inline font-size:14px built by
   dashboard.js, and an inline style beats any normal stylesheet rule. */
@media(max-width:900px){.field input,.field select,.field textarea,.formgrid input,.formgrid select,.formgrid textarea,.cfg-input,.tsel,.findbox input{font-size:16px!important}}
.warnbox{display:flex;gap:12px;background:var(--ink);color:#fff;border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:13.5px;line-height:1.45}
.warnbox b{font-weight:600}
.warnbox .wact{margin-top:10px;display:flex;gap:10px}
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--gray);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:20px;cursor:pointer;transition:all .12s}
.chip:hover{color:var(--ink);border-color:var(--gray-mid)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tsel{font-family:var(--sans);font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--paper-2);color:var(--ink)}
.tsel:focus{outline:none;border-color:var(--ink);background:#fff}
.reveal-form{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--paper-3);margin-bottom:16px}
.reveal-form.hide{display:none}
.permset{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.ptag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.tt{font-size:11px;color:var(--gray);margin-top:4px}
.note-line{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.note-line:last-child{border-bottom:none}
.note-line .nb{font-weight:600;white-space:nowrap}
.arch{opacity:.6}

/* ---- mobile navigation drawer + responsive ---- */
.hamburger{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--paper);border-radius:9px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.hamburger span{position:relative;display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150}

@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .g-2,.g-3,.plan-grid{grid-template-columns:1fr}
  /* sidebar becomes an off-canvas drawer instead of vanishing */
  .sidebar{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:264px;max-width:84vw;z-index:200;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .nav-overlay{display:block}
  .hamburger{display:inline-flex}
  .topbar{padding:0 15px;gap:10px;justify-content:flex-start}
  .topbar .title{margin-right:auto;min-width:0}
  .topbar .title h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
  .search{display:none}
  .content{padding:18px 15px 40px}
  .kpis,.kpis.k3,.kpis.k4{grid-template-columns:repeat(2,1fr)}
  /* touch targets: every button (incl .sm chips) is at least 44px tall on mobile/tablet */
  .btn{min-height:44px}
}
@media(max-width:900px){
  /* Table containment must start at the SAME breakpoint the sidebar collapses at, not
     760px: between 761px and 900px (iPhone landscape 812, iPad portrait 768) nothing
     contained the tables and the document grew wider than the viewport. It also used to
     key off :has(); a browser that cannot parse :has() drops the whole rule, min-width
     included, and the page blew out even at 375px. Plain descendant selectors instead.
     .card is the scroller: cards with no table have nothing to scroll, so it is inert. */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:520px}
}
@media(max-width:760px){
  th{padding:0 10px 9px}
  td{padding:10px}
}

/* ---- Billing (subscriptions) ---- */
.bill-banner{display:flex;align-items:center;gap:14px;border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:13.5px;line-height:1.45;background:var(--ink-2);color:#fff}
.bill-banner b{color:#fff;font-weight:600}
.bill-banner .bb-act{margin-left:auto;flex:none}
.plan-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:4px}
.plan-amt{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-.5px;margin-bottom:10px}
.plan-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.plan-line:last-child{border-bottom:none}
.plan-line b{font-weight:600}
.card-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.freeze{max-width:560px;margin:24px auto;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:40px 34px}
.freeze .fz-mark{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px}
.freeze h2{font-family:var(--serif);font-weight:600;font-size:23px;margin-bottom:8px}
.freeze p{color:var(--gray);font-size:14px;margin-bottom:22px;line-height:1.55}
.freeze .fz-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.demo-strip{margin-top:22px;border-top:1px dashed var(--gray-mid);padding-top:15px}
.demo-strip .dl2{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);font-weight:600;margin-bottom:10px}
.demo-strip .dbtns{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr}}

/* ---- payment receipt overlay ---- */
#rcptOverlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);align-items:flex-start;justify-content:center;overflow:auto;padding:40px 20px}
.rcpt-wrap{background:var(--paper);border-radius:16px;max-width:520px;width:100%;padding:32px 32px 22px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.rcpt{color:var(--ink)}
.rcpt-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:14px}
.rcpt-brand{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.5px}
.rcpt-brand span{color:var(--gray)}
.rcpt-stamp{border:1.5px solid var(--ink);border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.rcpt-no{font-size:12px;color:var(--gray);margin-bottom:12px;letter-spacing:.3px}
.rcpt-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.rcpt-row span{color:var(--gray)}
/* A flex item defaults to min-width:auto, so a long bank reference sets the row's
   minimum width and pushes the whole receipt wider than the phone. */
.rcpt-row b{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.rcpt-foot{margin-top:16px;font-size:11px;color:var(--gray);line-height:1.5}
.rcpt-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* Print only the receipt, and only while one is open (body.rcpt-open). A normal
   Ctrl/Cmd+P on any other page is left untouched. */
@media print{
  body.rcpt-open *{visibility:hidden}
  body.rcpt-open #rcptOverlay,body.rcpt-open #rcptOverlay *{visibility:visible}
  body.rcpt-open #rcptOverlay{position:absolute;inset:0;background:var(--paper);padding:0;overflow:visible}
  body.rcpt-open .rcpt-wrap{box-shadow:none;max-width:none;padding:0}
  body.rcpt-open .rcpt-acts{display:none}
}

/* ---- notifications dropdown (top-right bell) ---- */
.icon-btn{cursor:pointer}
.notif-panel{position:fixed;top:60px;right:16px;width:308px;max-width:calc(100vw - 24px);background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.18);z-index:300;overflow:hidden}
.notif-head{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-2);padding:12px 15px;border-bottom:1px solid var(--line)}
.notif-empty{padding:20px 15px;color:var(--gray);font-size:13px;text-align:center}
.notif-item{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-soft);padding:13px 15px;font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--ink);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--paper-2)}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-mid);margin-top:5px;flex:none}
.notif-item.hot .notif-dot{background:var(--ink)}
@media(max-width:560px){.notif-panel{top:58px;right:10px;left:10px;width:auto}}

/* Small phones. This block MUST stay last: media queries add no specificity, so the
   billing, freeze and receipt component rules further up the file were overriding these
   overrides purely on source order, and five of them never applied at all. */
@media(max-width:560px){
  .kpis,.kpis.k3,.kpis.k4{grid-template-columns:1fr}
  .card{padding:16px 14px}
  .card-head{flex-wrap:wrap;gap:8px}
  .bill-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .bill-banner .bb-act{margin-left:0}
  .freeze{padding:30px 20px}
  #rcptOverlay{padding:16px 10px}
  .rcpt-wrap{padding:22px 18px}
}

/* ============================================================================
   Tenants list (Phase 2.1). One tabbed, searchable list that becomes cards on a
   phone, replacing the two stacked eight-column tables.
   ========================================================================== */
.listtools{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.tabs{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.tab{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--gray);background:none;border:0;border-radius:8px;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .12s,color .12s}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tab .cnt{font-size:11px;font-weight:700;background:var(--line);color:var(--ink-2);border-radius:9px;padding:1px 7px;min-width:20px;text-align:center}
.tab.on .cnt{background:var(--ink);color:#fff}
.findbox{flex:1;min-width:200px;max-width:340px}
.findbox input{width:100%;font-family:var(--sans);font-size:13.5px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);color:var(--ink)}
.findbox input:focus{outline:none;border-color:var(--ink);background:#fff}

/* Balance reads at a glance: owed is the only thing that should pull the eye. */
.bal{font-weight:600;font-size:13px;white-space:nowrap}
.bal.owes{color:#c0261f}
.bal.credit{color:#1b7f4b}
.bal.clear{color:var(--gray);font-weight:500}

/* A long Arabic company name must not stretch the row. The cap has to sit on the inner
   span: max-width on a td is ignored in an auto-layout table, so the cell just grew. */
.tt-name{max-width:300px}
.tt-clip{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-rent{white-space:nowrap;font-variant-numeric:tabular-nums}
.tt-freq{display:block;font-size:11px;color:var(--gray);font-weight:400}
.tt-act{text-align:right;white-space:nowrap}

/* Secondary actions live behind a per-row menu instead of a permanent button. */
.rowmenu{position:relative;display:inline-block}
.iconbtn{font-family:var(--sans);font-size:17px;line-height:1;color:var(--gray);background:none;border:1px solid transparent;border-radius:8px;padding:4px 9px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.iconbtn:hover{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
.rowmenu .menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:172px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.13);padding:5px;text-align:left}
.rowmenu .menu button{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);background:none;border:0;border-radius:7px;padding:9px 11px;cursor:pointer}
.rowmenu .menu button:hover{background:var(--paper-2)}
.rowmenu .menu button.danger{color:#c0261f}
.tt-table tr.arch td{color:var(--gray)}

@media(max-width:760px){
  /* Cards, not a sideways-scrolling table. Scoped to .tt-table so no other table is
     affected, and the min-width the global rule applies to tables is released here. */
  .card .tt-table{min-width:0}
  .tt-wrap{overflow:visible}
  .tt-table thead{display:none}
  .tt-table,.tt-table tbody,.tt-table tr,.tt-table td{display:block;width:100%}
  .tt-table tr{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:var(--paper)}
  .tt-table tr:last-child{margin-bottom:0}
  .tt-table td{border:0;padding:4px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .tt-table td::before{content:attr(data-label);color:var(--gray);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;flex:none}
  .tt-table td.tt-unit{font-size:16px;font-weight:600;padding-bottom:2px}
  .tt-table td.tt-unit::before{content:none}
  .tt-table td.tt-name{max-width:none}
  .tt-table td.tt-name::before{content:none}
  .tt-table td.tt-name .tt-clip{white-space:normal;font-weight:500}
  .tt-table td.tt-act{justify-content:flex-end;padding-top:8px}
  .tt-table td.tt-act::before{content:none}
  .tt-table td[colspan]{justify-content:center}
  .tt-table td[colspan]::before{content:none}
  .listtools{gap:10px}
  .findbox{max-width:none}
}

/* ============================================================================
   Icons (Phase 2.2). The chrome used unicode glyphs that were the wrong symbol:
   U+26B2 NEUTER stood in for a magnifier and U+2709 ENVELOPE for a notification
   bell. Both are now inline SVG stroked in currentColor, so they are the right
   symbol, inherit colour, size predictably, and never depend on font coverage.
   ========================================================================== */
:root{--ic:16px;--ic-nav:15px}
.search-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--ic);height:var(--ic);color:var(--gray)}
.search-ic svg{width:100%;height:100%;display:block}
.icon-btn svg{width:var(--ic);height:var(--ic);display:block}
/* The count used to sit inside the button and cover the icon. Clear the corner. */
.icon-btn{overflow:visible}
.icon-btn .dot{top:-6px;right:-6px;border:2px solid var(--paper)}
/* One size and one radius for both topbar buttons. */
.hamburger{width:38px;height:38px;border-radius:8px}
/* The nav icon column must not collapse or shift when a glyph changes. */
.nav a .ic{width:var(--ic-nav);min-width:var(--ic-nav);height:var(--ic-nav);flex:0 0 var(--ic-nav);display:inline-flex;align-items:center;justify-content:center;font-size:var(--ic-nav);opacity:1}
.nav a .ic svg{width:100%;height:100%;display:block}
.nav a{text-decoration:none}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#whoRow:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.who-go{margin-left:auto;flex:none;font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--gray);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:2px 8px}
#whoRow:hover .who-go{color:#fff;border-color:rgba(255,255,255,.4)}
/* The sidebar's three left edges become one 24px rail. */
.who{padding:12px 24px}
/* The role marker in the scope banner uses the same SVG set as the sidebar. */
.scope .si svg{width:17px;height:17px;display:block}
/* Alert badges carry the same monochrome SVG set as the navigation. */
.alert .abadge svg{width:16px;height:16px;display:block}
/* Inline UI icons keep the monochrome brand and size with their row. */
.listrow .li svg{width:17px;height:17px;display:block}
.card-chip svg{width:16px;height:16px;display:inline-block;vertical-align:-3px}
/* Flag and freeze marks use the shared SVG set. */
.alert .abadge svg{width:16px;height:16px;display:block}
.freeze .fz-mark svg{width:26px;height:26px;display:block}