/* ====================================================================
   ZEAH COMMAND UI
   High-fidelity shell and responsive layer based on the approved concept.
   Loaded last so it can modernise the presentation without changing the
   dashboard's existing data contracts or workflow handlers.
   ==================================================================== */

:root{
  --command-mobile-nav-height:72px;
  --command-content-max:1560px;
}

/* The dashboard used to inherit the outer login container's 28px padding
   on both sides. A fixed full-viewport shell gives those 56px back while
   leaving the login layout untouched. */
.dashboard{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:0;
  max-width:none;
  margin:0;
  background:var(--base);
  isolation:isolate;
}

/* ===== DESKTOP NAVIGATION =====
   The rail deliberately keeps layout.css's original geometry and
   behaviour: a 56px navy bar that widens to --sidebar-w-open on hover
   (or stays pinned when the logo is clicked with hover-expand off).
   Nothing here overrides its width, background or label opacity, so the
   bar still collapses and still follows the theme's --sidebar-bg
   (a hardcoded navy here used to keep it dark even in light mode).
   Only the group headings and the mobile-only label spans are ours. */

/* Group headings ("Overview", "Workspace", "Finance", ...). They ride the
   same collapse transition as every other label — layout.css's
   .sidebar-section-label sets opacity:0 and .sidebar.open / :hover bring
   it back — so the heading text appears only once the bar is wide enough
   to hold it. */
.sidebar-section-label.nav-group-label{
  display:block;
  list-style:none;
  position:relative;
  /* Tight vertical padding on purpose: seven headings on top of the
     admin's sixteen tabs is ~170px of extra height, and .sidebar-nav
     hides its scrollbar, so every px reclaimed here is a tab that stays
     reachable without an invisible scroll. */
  padding:9px 14px 3px;
  color:rgba(255,255,255,.28);
  font-size:8px;
  line-height:1.2;
  letter-spacing:1.8px;
}
.sidebar-section-label.nav-group-label:first-child{padding-top:4px}

/* On the collapsed rail the heading text is invisible, so a hairline
   carries the grouping instead: the icons still read as groups at 56px
   without widening the bar. It fades out as the text fades in, so the
   two never show at once. */
.sidebar-section-label.nav-group-label::after{
  content:'';
  position:absolute;
  left:12px;right:12px;bottom:3px;
  height:1px;
  background:rgba(255,255,255,.10);
  transition:opacity .2s var(--ease);
}
.sidebar-section-label.nav-group-label:first-child::after{display:none}
/* Mac (light) mode paints the rail light — a white hairline would vanish
   into it, and the same goes for a custom light theme. */
body.mac-mode .sidebar-section-label.nav-group-label::after{background:rgba(0,0,0,.10)}
.sidebar.open .sidebar-section-label.nav-group-label::after{opacity:0}
@media(hover:hover) and (min-width:769px){
  body.sidebar-hover-expand .sidebar:hover .sidebar-section-label.nav-group-label::after{opacity:0}
}

/* ===== SCROLL CUE =====
   The rail hides its scrollbar (layout.css sets scrollbar-width:none) and
   the group headings push the admin's sixteen tabs past the fold, so
   nothing told you more nav existed. Fade the edge rather than show a
   bar: it costs no width -- which is the whole point on a 56px rail --
   and masking the CONTENT means it needs no colour matching against the
   navy bar vs the light mac theme.
   Registering the lengths with @property is what lets them animate; where
   @property is unsupported the fade simply snaps, which is fine.
   The classes come from updateNavScrollCue() in nav-socket.js, so the
   fade appears only when there is really something to scroll to. */
@property --nav-fade-top{syntax:'<length>';inherits:false;initial-value:0px}
@property --nav-fade-bottom{syntax:'<length>';inherits:false;initial-value:0px}
.sidebar-nav{
  --nav-fade-top:0px;
  --nav-fade-bottom:0px;
  transition:--nav-fade-top .18s var(--ease),--nav-fade-bottom .18s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top),#000 calc(100% - var(--nav-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top),#000 calc(100% - var(--nav-fade-bottom)),transparent 100%);
}
.sidebar-nav.nav-more-below{--nav-fade-bottom:26px}
.sidebar-nav.nav-more-above{--nav-fade-top:18px}

/* The mobile bottom bar swaps in shorter labels (Home / Rent / Docs ...);
   keep them out of the desktop rail, and the "More" button with them. */
.sidebar-label-mobile{display:none}
.mobile-more-item{display:none}

/* ===== WORKSPACE SHELL ===== */
/* Content sits beside the COLLAPSED rail and shifts only when the bar is
   pinned open. Hover-expand deliberately doesn't move it — the widened
   rail overlays the content, which is how it behaved before the Command
   UI landed, and is why there is no :hover rule here. */
.dashboard-main{
  width:calc(100vw - var(--sidebar-w));
  margin-left:var(--sidebar-w);
  transition:margin-left .28s var(--ease),width .28s var(--ease);
  height:100vh;
  height:100dvh;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--base);
}
.sidebar.open ~ .dashboard-main{
  width:calc(100vw - var(--sidebar-w-open));
  margin-left:var(--sidebar-w-open);
}
.workspace-header{
  position:sticky;
  top:0;
  z-index:120;
  min-height:104px;
  padding:19px 32px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:color-mix(in srgb,var(--base) 92%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border) 74%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
body.dev-mode .workspace-header{padding-top:39px}
/* The header only appears on the landing tab now (nav-socket.js sets [hidden]
   elsewhere). display:flex above beats the UA's hidden rule, so say it here. */
.workspace-header[hidden]{display:none}
/* And when it is hidden it is no longer carrying the dev banner's clearance --
   the banner is position:fixed and would otherwise sit on the first row of
   content. Production has no banner, so this costs nothing there. */
body.dev-mode .workspace-header[hidden] ~ .dashboard-content{padding-top:38px}
.workspace-heading{min-width:0}
.workspace-mobile-brand{display:none}
.workspace-eyebrow{
  color:var(--gold);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:2px;
}
.workspace-header h1{
  margin:0;
  color:var(--t1);
  font-family:var(--fs);
  font-size:clamp(1.8rem,2.4vw,2.6rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.025em;
}
.workspace-header p{
  color:var(--t3);
  font-size:11.5px;
  margin:4px 0 0;
}
.workspace-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.workspace-icon-btn,
.workspace-primary-action{
  border:1px solid var(--border);
  font-family:var(--f);
  cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s;
}
.workspace-icon-btn{
  position:relative;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--card);
  color:var(--t2);
  font-size:16px;
}
.workspace-icon-btn:hover{color:var(--t1);transform:translateY(-1px);box-shadow:var(--sh1)}
.workspace-alert-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  border:2px solid var(--base);
  font-size:9px;
  font-weight:800;
}
.workspace-alert-badge[hidden]{display:none}
.workspace-primary-action{
  min-height:44px;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:8px;
  border-color:var(--gold);
  border-radius:11px;
  background:var(--gold);
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 22px rgba(176,124,8,.16);
}
body.dark-mode .workspace-primary-action{color:#081522}
.workspace-primary-action:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(176,124,8,.24)}

.dashboard-content{
  width:100%;
  max-width:var(--command-content-max);
  min-width:0;
  padding:24px 32px 64px;
}
.tab-content,.tab-content.active,.tab-content>*{min-width:0;max-width:100%}

/* ===== OVERVIEW ===== */
.overview-attention{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:16px;
  box-shadow:0 6px 20px rgba(15,25,40,.04);
}
.overview-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.overview-section-kicker{
  display:block;
  color:var(--gold);
  font-size:8px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.overview-section-head h2,.mobile-more-head h2{
  margin:1px 0 0;
  color:var(--t1);
  font-family:var(--fs);
  font-size:20px;
  font-weight:650;
}
.overview-text-action{
  border:0;
  background:transparent;
  color:var(--gold);
  font-family:var(--f);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:8px 0;
}
.overview-text-action i{font-size:9px;margin-left:5px}
.overview-attention .pw-banner,.overview-attention .lw-banner{
  margin:8px 0 0!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.overview-attention-empty{
  display:none;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--green-d);
  color:var(--green);
  font-size:12px;
  font-weight:700;
}
.overview-attention:not(:has(.pw-banner)):not(:has(.lw-banner)) .overview-attention-empty{display:flex}

#staffOverview .stats-grid,#ownerStats.stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.stat-card{
  min-width:0;
  padding:20px;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(15,25,40,.045);
}
.stat-card::before{display:none}
.overview-stat-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:13px;align-items:center}
.overview-stat-icon{
  grid-row:1/4;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--surface-alt);
  color:var(--gold);
  font-size:16px;
}
.overview-stat-card[data-tone="green"] .overview-stat-icon{background:var(--green-d);color:var(--green)}
.overview-stat-card[data-tone="red"] .overview-stat-icon{background:var(--red-d);color:var(--red)}
.overview-stat-card[data-tone="amber"] .overview-stat-icon{background:var(--amber-d);color:var(--amber)}
/* "Could not load" -- deliberately colourless. A failed fetch must not be
   able to borrow the green that means "nothing outstanding". */
.overview-stat-card[data-tone="muted"] .overview-stat-icon{background:var(--over-h);color:var(--t3)}
.overview-stat-card[data-tone="muted"] .stat-value{color:var(--t3)}
.overview-stat-card .stat-value{font-family:var(--fn);font-size:clamp(1.35rem,2.2vw,1.9rem);margin:0 0 4px}
.overview-stat-card .stat-label{font-size:9px;letter-spacing:1.25px}
.overview-stat-meta{font-size:10px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The row spans the grid; the BAR inside it only spans its own figures, so it
   ends at the lifetime number instead of stretching the full card width with
   an empty gap in the middle. Customize rides along at the right of the row. */
.overview-commission-row{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.overview-commission-row>.btn-secondary{margin-left:auto}
.overview-commission-strip{
  display:flex;
  align-items:center;
  gap:16px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  width:fit-content;
  max-width:100%;
}
.overview-commission-item{display:flex;align-items:baseline;gap:7px;border:0;background:transparent;padding:2px 0;font-family:var(--f);font-size:11px;color:var(--t3);cursor:pointer;text-align:left}
.overview-commission-item strong{color:var(--gold);font-family:var(--fn);font-size:15px}
.mobile-overview-primary{display:none}

#staffChartGrid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:16px}
#staffOverviewContent{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chart-card,.card,.owner-property-card,.client-card,.rc-card{border-radius:14px}
.chart-card,.card{box-shadow:0 6px 20px rgba(15,25,40,.04)}
.chart-card-title,.card-title{letter-spacing:1.15px}
.content-grid,.chart-grid{min-width:0}
.content-grid>*,.chart-grid>*{min-width:0;max-width:100%}
.chart-canvas-wrap,.chart-canvas-wrap canvas{min-width:0;max-width:100%!important}

/* Both Overview charts live in one grid, so their cards are the same height --
   but chart 1 spends ~40px of that on its totals row and year picker while
   dashboard.css pins every canvas to a flat 210px. The leftover was showing as
   dead space under chart 2's bars. Letting the canvas grow hands that back:
   chart 2's plot ends up taller than chart 1's by exactly the height of the
   header chart 1 carries and it does not. Chart.js is responsive with
   maintainAspectRatio:false, so it redraws to whatever height it is given. */
#staffChartGrid .chart-card{display:flex;flex-direction:column}
#staffChartGrid .chart-canvas-wrap{flex:1 1 auto;height:auto;min-height:230px}

/* ===== CHART CARD HEAD =====
   Chart 2 carries two views behind a toggle, so its title shares a row with
   the switch. Chart 1 has no head element and is untouched. */
.chart-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:2px;
}
/* Year totals under the Costs vs Revenue title. The coloured mark carries the
   series identity; the number itself stays in normal text ink, so the figures
   never depend on colour alone to be read. */
.chart-totals{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:0 0 10px;
}
.chart-totals[hidden]{display:none}
.chart-total{display:inline-flex;align-items:center;gap:7px}
.ct-mark{width:9px;height:9px;border-radius:50%;flex:none}
.ct-mark.ct-diamond{border-radius:2px;transform:rotate(45deg)}
.ct-label{color:var(--t3);font-size:9px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}
.ct-value{color:var(--t1);font-family:var(--fn);font-size:14px;font-weight:700}
.ct-value.ct-pos{color:var(--green)}
.ct-value.ct-neg{color:var(--red)}
/* The costs total wears the series red. NOT the line's exact red in dark mode:
   #d9584a reads 4.19:1 on the dark card, which clears the 3:1 bar for a mark
   but not the 4.5:1 one for 14px text. #e8776b is the same red a step lighter,
   at 5.60:1. Light mode's #b02418 is already 6.75:1 and needs no change. */
.ct-value.ct-costs{color:#b02418}
body.dark-mode .ct-value.ct-costs{color:#e8776b}

/* Money direction in the Costs & P&L card, matching the Costs vs Revenue
   chart's series so the whole Overview agrees: revenue blue, costs red.
   Each mode gets a step that clears 4.5:1 as TEXT against its own card --
   the line colours themselves are only cleared for 3:1 as marks.
   light  blue #0055B8 7.02:1 · red #b02418 6.75:1
   dark   blue #4a94d4 4.98:1 · red #e8776b 5.60:1 */
/* The P&L year totals as one compact strip instead of three stat-cards.
   Three cards cost ~75px of height before the ledger even starts; the strip
   is ~34px and says the same thing. Same inner classes as the chart's totals
   row, so the two read as one family. */
/* Totals strip and ledger controls share one line. The strip only spans its
   own figures, so the space to its right was empty -- putting the ledger
   toolbar there buys the lists a whole row of height back. */
.pnl-toolbar{
  display:flex;
  /* baseline, not center or stretch. The two items are different shapes: the
     totals strip is a padded bordered box of text, the ledger bar is text
     next to 30px-tall selects. Centring aligned the BOXES and left the text
     7px apart; stretching did not help because the bar is the taller item.
     Baseline alignment lines up the first text baseline in each, which is
     exactly what "on the same line" means -- and it needs no magic offset. */
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.pnl-toolbar>.pnl-strip{margin-bottom:0}
.pnl-ledger-bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  flex:1 1 320px;
  min-width:0;
}
.pnl-ledger-bar>span:last-child{margin-left:auto}

/* The lists scroll only once they genuinely outgrow the space. The old caps
   (160px revenue / 320px costs) started scrolling after about three entries,
   which is why a short month felt boxed in. overflow-y:auto means no
   scrollbar at all while the entries fit. */
/* Edge fade for the cut-off rows, the same cue the sidebar rail uses: a row
   sliced by the container edge should look sliced, not like the end of the
   list. Registering the lengths with @property is what lets them animate;
   where @property is unsupported the fade simply snaps. Classes come from
   the sync() inside initPnlThumbs(), so it only fades an edge that really
   has more beyond it. The thumb is a SIBLING of this element, so the mask
   never touches it. */
@property --pnl-fade-top{syntax:'<length>';inherits:false;initial-value:0px}
@property --pnl-fade-bottom{syntax:'<length>';inherits:false;initial-value:0px}
.pnl-scroll{
  --pnl-fade-top:0px;
  --pnl-fade-bottom:0px;
  transition:--pnl-fade-top .18s var(--ease),--pnl-fade-bottom .18s var(--ease);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--pnl-fade-top),#000 calc(100% - var(--pnl-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--pnl-fade-top),#000 calc(100% - var(--pnl-fade-bottom)),transparent 100%);
  overflow-y:auto;
  /* Room for the drawn thumb so it never sits on the row action buttons. */
  padding-right:12px;
  /* Native bar off in BOTH engines: base.css already hides it in Chromium via
     *::-webkit-scrollbar{display:none}, and this covers Firefox. The visible
     bar is .pnl-thumb below, drawn by initPnlThumbs() in rent-payments.js. */
  scrollbar-width:none;
}

/* Drawn scroll thumb.
   WHY not the native one: a browser sizes its thumb by visible/total, so the
   revenue list (29 rows) and the costs list (50 rows) always got different
   lengths even on identical tracks. These are a fixed height, so the pair
   matches. The trade-off, deliberately accepted: the thumb no longer tells
   you how much list there is, only where in it you are. */
.pnl-scroll.has-more-below{--pnl-fade-bottom:26px}
.pnl-scroll.has-more-above{--pnl-fade-top:18px}

.pnl-scroll-wrap{position:relative}
.pnl-thumb{
  position:absolute;
  top:0;
  right:2px;
  width:6px;
  border-radius:99px;
  background:color-mix(in srgb,var(--gold) 70%,transparent);
  opacity:0;
  transition:opacity .15s var(--ease),background .15s;
  cursor:grab;
  touch-action:none;
}
/* Only while there is something to scroll to. */
.pnl-scroll-wrap.is-scrollable .pnl-thumb{opacity:1}
.pnl-scroll-wrap:hover .pnl-thumb,
.pnl-thumb.is-dragging{background:var(--gold)}
.pnl-thumb.is-dragging{cursor:grabbing}
/* One shared cap so both lists get a scroll track of the same length -- they
   used to be 300px and 460px, which is why the revenue bar looked stunted next
   to the costs one. 380px each keeps the pair's total height the same as the
   old 300+460, so nothing below moves. max-height only CAPS: a short month
   still collapses to its content and shows no bar at all. */
.pnl-scroll-rev,
.pnl-scroll-costs{max-height:min(42vh,380px)}

.chart-totals.pnl-strip{
  width:fit-content;
  max-width:100%;
  gap:22px;
  padding:8px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  margin-bottom:12px;
}
.chart-totals.pnl-strip .ct-value{font-size:16px}

.pnl-revenue{color:#0055B8}
body.dark-mode .pnl-revenue{color:#4a94d4}
.pnl-costs{color:#b02418}
body.dark-mode .pnl-costs{color:#e8776b}

.chart-year-select{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--t2);
  font-family:var(--f);
  font-size:11px;
  font-weight:700;
  padding:6px 9px;
  cursor:pointer;
}
.chart-year-select[hidden]{display:none}
.chart-toggle{
  display:inline-flex;
  padding:2px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
}
.chart-toggle button{
  border:0;
  background:transparent;
  border-radius:7px;
  padding:5px 11px;
  font-family:var(--f);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--t3);
  cursor:pointer;
  transition:background .16s,color .16s;
}
.chart-toggle button:hover{color:var(--t1)}
.chart-toggle button[aria-pressed="true"]{
  background:var(--gold);
  color:#fff;
}
body.dark-mode .chart-toggle button[aria-pressed="true"]{color:#081522}

/* ===== RENT COLLECTION ===== */
.rc-command-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  margin-bottom:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid var(--gold);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(15,25,40,.04);
}
.rc-command-kicker{color:var(--gold);font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.rc-command-amount{font-family:var(--fs);font-size:32px;line-height:1.1;font-weight:650;color:var(--t1);margin-top:3px}
.rc-command-meta{font-size:12px;color:var(--t3);margin-top:4px}
.rc-command-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--red-d);color:var(--red);font-size:20px}
.rc-view-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  max-width:520px;
  padding:4px;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
}
.rc-view-tab{
  min-height:40px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--t2);
  font-family:var(--f);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.rc-view-tab.active{background:#0b1a2a;color:#fff;box-shadow:0 5px 12px rgba(5,16,27,.14)}
.rc-view{display:none}
.rc-view.active{display:block}
.rc-view>.card{margin-top:0!important}
.rc-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.rc-card{min-width:0;padding:18px;border-left-width:1px;box-shadow:0 6px 18px rgba(15,25,40,.045)}
.rc-card.rc-card-debt{border-top:3px solid var(--red)}
.rc-card.rc-payout-card{border-top:3px solid var(--amber)}
.rc-card-title{font-family:var(--f);font-size:15px;font-weight:800}
.rc-card-sub{font-size:11.5px}
.rc-card-amount{font-family:var(--fs);font-size:30px;font-weight:650;line-height:1.05;color:var(--t1)}
.rc-card-amount-label{font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:2px}
.rc-card-actions .btn-primary,.rc-card-actions .btn-secondary{min-height:40px}
.rc-aging-mobile-list{display:none}
.rc-intents-mobile{display:none}

/* ===== MOBILE MORE SHEET ===== */
.mobile-more-overlay{display:none}

/* ===== RESPONSIVE ===== */
@media(max-width:1120px) and (min-width:769px){
  #staffOverview .stats-grid,#ownerStats.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #staffOverviewContent{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:768px){
  :root{--command-mobile-nav-height:72px}
  html,body{height:100%;min-height:100%;overflow:hidden}
  .dashboard{height:100dvh;max-width:100%;overflow:hidden}

  .sidebar,.sidebar.open,body.sidebar-hover-expand .sidebar:hover{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%!important;
    height:calc(var(--command-mobile-nav-height) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid rgba(255,255,255,.1);
    border-right:0;
    box-shadow:0 -8px 28px rgba(5,16,27,.15);
    z-index:800;
    overflow:hidden;
  }
  .sidebar-logo,.sidebar-user,.sidebar-footer,.clock-sidebar-footer,.nav-group-label{display:none!important}
  .sidebar-nav{width:100%;padding:0;overflow:visible;min-height:var(--command-mobile-nav-height)}
  .sidebar-nav ul,.nav-tabs{
    width:100%;
    height:var(--command-mobile-nav-height);
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    padding:0;
    gap:0;
  }
  .nav-tab{display:none}
  .nav-tab.mobile-primary,.mobile-more-item{display:block;min-width:0}
  .mobile-more-item{list-style:none}
  .sidebar-btn{
    width:100%;
    height:var(--command-mobile-nav-height);
    min-height:var(--command-mobile-nav-height);
    padding:9px 3px 7px;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border-radius:0;
    font-size:10px;
    color:rgba(255,255,255,.62);
  }
  .sidebar-btn i{width:auto;font-size:18px}
  .sidebar-btn .sidebar-label,.sidebar-label{opacity:1!important;max-width:100%;font-size:9px;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
  .sidebar-label-desktop{display:none!important}
  .sidebar-label-mobile{display:block!important}
  .sidebar-btn.active{background:transparent;color:#fff;box-shadow:none}
  .sidebar-btn.active i{color:var(--gold)}
  .sidebar-btn.active::before{
    top:0;
    bottom:auto;
    left:50%;
    width:28px;
    height:3px;
    transform:translateX(-50%);
    border-radius:0 0 4px 4px;
  }
  .sidebar-badge{top:8px;right:calc(50% - 22px)}
  /* Bottom bar never scrolls, and the mask would clip the badges that
     sit proud of the button box. */
  .sidebar-nav{-webkit-mask-image:none;mask-image:none}

  .dashboard-main,.sidebar.open ~ .dashboard-main{
    width:100%;
    max-width:100%;
    height:calc(100dvh - var(--command-mobile-nav-height) - env(safe-area-inset-bottom));
    margin:0!important;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .workspace-header{
    min-height:86px;
    padding:12px 16px 11px;
    gap:10px;
  }
  body.dev-mode .workspace-header{padding-top:34px}
  .workspace-heading{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;flex:1}
  .workspace-mobile-brand{grid-row:1/4;display:flex;flex-direction:column;align-items:center;gap:1px}
  .workspace-mobile-brand img{width:30px;height:30px;object-fit:contain}
  .workspace-mobile-brand span{font-family:var(--fs);font-size:7px;font-weight:700;letter-spacing:1.8px;color:var(--gold)}
  .workspace-eyebrow{font-size:8px;margin:0}
  .workspace-header h1{font-family:var(--f);font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
  .workspace-header p{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 0}
  .workspace-actions{gap:7px}
  .workspace-icon-btn{width:42px;height:42px;border-radius:50%;background:transparent}
  .workspace-primary-action{display:none}
  .dashboard-content{max-width:100%;padding:14px 16px 28px}

  .tab-content,.tab-content.active,.tab-content>*,
  .card,.chart-card,.content-grid,.content-grid>*,.chart-grid,.chart-grid>*,
  .stats-grid,.stats-grid>*,.rc-grid,.rc-grid>*,.owner-property-card{
    min-width:0!important;
    max-width:100%!important;
  }
  .content-grid,.chart-grid,#staffOverviewContent{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #ownerAnalyticsContent .content-grid>*{grid-column:auto!important}
  .chart-canvas-wrap,.chart-canvas-wrap canvas{width:100%!important;max-width:100%!important}

  .overview-attention{padding:15px;margin-bottom:12px}
  .overview-section-head{align-items:flex-start;margin-bottom:8px}
  .overview-section-head h2{font-family:var(--f);font-size:17px;font-weight:800}
  .overview-text-action{font-size:10px}
  .overview-attention .pw-banner>div:first-child,.overview-attention .lw-banner>div:first-child{padding:11px 12px!important}
  .overview-attention .pw-banner>div:first-child>div,.overview-attention .lw-banner>div:first-child>div{align-items:flex-start!important;flex-wrap:wrap}
  #staffOverview .stats-grid,#ownerStats.stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  /* The OWNER dashboard still leads with a full-width card. The staff
     Overview deliberately does not: four KPIs read better as an even 2x2
     than as 1 + 2 + 1, which left the fourth card orphaned beside a gap. */
  #ownerStats.stats-grid>.stat-card:first-child{grid-column:1/-1}
  .stat-card{padding:15px}
  .overview-stat-card{grid-template-columns:36px minmax(0,1fr);column-gap:9px}
  .overview-stat-icon{width:36px;height:36px;font-size:14px}
  .overview-stat-card .stat-value{font-size:clamp(1.2rem,7vw,1.75rem)}
  /* In the 2x2 every card is narrow, so every figure needs to fit ~98px --
     "EUR 21,751.25" at 27px needs 145px and was being clipped mid-number.
     A smaller figure beats a truncated one. */
  #staffOverview .stats-grid>.overview-stat-card .stat-value{font-size:clamp(0.95rem,4.2vw,1.35rem)}
  /* Two of the four cards share a row on mobile, leaving ~98px for the
     sub-line -- not enough for "EUR 46,017.44 paid out year to date", and the
     figures only grow. Let it wrap instead of ellipsing the meaning away;
     the grid stretches the row to match. */
  .overview-stat-meta{font-size:9px;white-space:normal;overflow:visible;line-height:1.3}
  .overview-commission-strip{padding:10px;gap:10px;flex-wrap:wrap;width:100%}
  .overview-commission-row>.btn-secondary{margin-left:0}
  .chart-totals.pnl-strip{width:100%}
  .overview-commission-item{flex:1 1 120px;display:block}
  .overview-commission-item strong{display:block;margin-top:2px}
  .mobile-overview-primary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:48px;
    margin:-2px 0 14px;
    border:1px solid var(--gold);
    border-radius:12px;
    background:var(--gold);
    color:#fff;
    font-family:var(--f);
    font-size:13px;
    font-weight:800;
  }
  body.dark-mode .mobile-overview-primary{color:#081522}

  .card,.chart-card{padding:16px;margin-bottom:12px}
  .card-title{font-size:10px;margin-bottom:14px}
  .transaction-item{align-items:stretch;gap:7px}
  .transaction-amount{font-size:15px}

  .rc-command-head{padding:17px 16px;gap:10px}
  .rc-command-amount{font-size:29px}
  .rc-command-icon{width:46px;height:46px;font-size:17px}
  .rc-view-tabs{max-width:none;margin-bottom:12px}
  .rc-view-tab{min-height:44px}
  .rc-grid{grid-template-columns:minmax(0,1fr)!important}
  .rc-card{padding:17px;gap:13px}
  .rc-card-head{flex-wrap:nowrap}
  .rc-card-head>div{min-width:0}
  .rc-card-title,.rc-card-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rc-card-amount{font-size:32px}
  .rc-card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%}
  .rc-card-actions .btn-primary{width:100%!important;min-height:46px!important}
  .rc-card-actions .btn-secondary{min-height:46px!important}
  .rc-aging-table{display:none!important}
  .rc-aging-mobile-list{display:flex;flex-direction:column;gap:10px}
  .rc-aging-mobile-card{padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
  .rc-aging-mobile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .rc-aging-mobile-head strong{font-size:13px;color:var(--t1)}
  .rc-aging-mobile-tenant{font-size:11px;color:var(--t3);margin-top:2px}
  .rc-aging-mobile-total{text-align:right;font-family:var(--fn);font-size:18px;font-weight:700;color:var(--red);white-space:nowrap}
  .rc-aging-mobile-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--t3)}
  .rc-intents-desktop{display:none!important}
  .rc-intents-mobile{display:flex;flex-direction:column;gap:10px}
  .rc-intent-mobile-card{padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
  .rc-intent-mobile-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .rc-intent-mobile-actions{display:flex;gap:8px;margin-top:12px}
  .rc-intent-mobile-actions button{min-height:44px;flex:1}

  /* Generic mobile containment and touch improvements. */
  input,select,textarea,.fmodal-input,.language-select{font-size:16px!important;max-width:100%}
  input.fmodal-input[style*="width"],select[style*="width"],input[style*="width:200"],input[style*="width:220"],input[style*="width:260"]{width:100%!important}
  .btn-primary,.btn-secondary,.btn-accent,.settings-btn,.mbtn{min-height:44px}
  .btn-icon,.settings-modal-close-btn,.fmodal-close,.cal-day-panel-close{width:44px;height:44px;min-width:44px}
  #accountingContent{min-width:0;max-width:100%}
  #accountingContent [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  #accountingContent>.card{overflow:hidden!important}
  #accountingContent .acct-responsive-table,
  #accountingContent .acct-responsive-table tbody{display:block;width:100%}
  #accountingContent .acct-responsive-table thead{display:none}
  #accountingContent .acct-responsive-table tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px 12px;
    padding:14px;
    border-bottom:1px solid var(--border)!important;
  }
  #accountingContent .acct-responsive-table tr:last-child{border-bottom:0!important}
  #accountingContent .acct-responsive-table td{
    display:flex;
    min-width:0;
    padding:0!important;
    text-align:left!important;
    align-items:center;
  }
  #accountingContent .acct-responsive-table td::before{
    color:var(--t3);
    font-size:9px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    margin-right:7px;
  }
  #accountingContent .acct-responsive-table td:first-child{font-size:14px;grid-column:1/2}
  #accountingContent .acct-responsive-table td:last-child{grid-column:2/3;grid-row:1/2;justify-content:flex-end}
  #accountingContent .acct-responsive-table td:not(:first-child):not(:last-child){grid-column:1/-1}
  #accountingContent .acct-packages-table td:nth-child(2)::before{content:'Status'}
  #accountingContent .acct-packages-table td:nth-child(3)::before{content:'Files'}
  #accountingContent .acct-packages-table td:nth-child(4)::before{content:'Published'}
  #accountingContent .acct-submissions-table td:nth-child(2)::before{content:'Period'}
  #accountingContent .acct-submissions-table td:nth-child(3)::before{content:'File'}
  #accountingContent .acct-submissions-table td:nth-child(4)::before{content:'Status'}
  #accountingContent .acct-submissions-table td:nth-child(5)::before{content:'Received'}
  #accountingContent .acct-submissions-table td:last-child{
    grid-column:1/-1;
    grid-row:auto;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  #accountingContent .acct-annual-table td:nth-child(2)::before{content:'File'}
  #accountingContent .acct-annual-table td:nth-child(3)::before{content:'Status'}
  #accountingContent .acct-annual-table td:nth-child(4)::before{content:'Distributed'}
  #accountingContent .acct-annual-table td:last-child{
    grid-column:1/-1;
    grid-row:auto;
    justify-content:flex-start;
  }
  #vendorsContent .card{max-width:100%;overflow:hidden}

  /* The admin P&L used a two-column desktop ledger with a 580px hard floor. */
  #companyCostsSection{width:100%;min-width:0;max-width:100%;overflow:hidden}
  #companyCostsSection>.card{width:100%;min-width:0;max-width:100%;overflow:hidden}
  #companyCostsSection [style*="grid-template-columns:minmax(280px"]{
    display:block!important;
    min-width:0!important;
  }
  #companyCostsSection [style*="grid-template-columns:minmax(280px"]>div{
    min-width:0!important;
    max-width:100%!important;
    margin-bottom:16px;
  }
  #companyCostsSection [id^="companyCostRow"],
  #companyCostsSection [id^="companyRevRow"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto auto!important;
    gap:6px!important;
    align-items:center!important;
  }
  #companyCostsSection [id^="companyCostRow"]>span,
  #companyCostsSection [id^="companyRevRow"]>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #companyCostsSection [id^="companyCostRow"]>span:nth-of-type(-n+3),
  #companyCostsSection [id^="companyRevRow"]>span:nth-of-type(-n+3){grid-column:1/-1}
  #companyCostsSection [id^="companyCostRow"]>strong,
  #companyCostsSection [id^="companyRevRow"]>strong{grid-column:1/2;grid-row:auto}
  #companyCostsSection [id^="companyCostRow"]>.btn-icon,
  #companyCostsSection [id^="companyRevRow"]>.btn-icon{width:36px;height:36px;min-width:36px}

  /* Month view becomes a compact date picker; events live in the day sheet. */
  .cal-wrap{height:calc(100dvh - 190px);min-height:520px}
  .cal-main,.cal-grid,.cal-cells{min-width:0;max-width:100%}
  .cal-dow-row,.cal-cells{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  .cal-cell{min-width:0;width:auto;padding:4px 2px;align-items:center}
  .cal-day-num{width:27px;height:27px;font-size:11px}
  .cal-events-wrap{width:100%;align-items:center;gap:3px}
  .cal-event-chip{width:7px;height:7px;min-width:7px;padding:0;border-radius:50%}
  .cal-event-dot{width:7px;height:7px}
  .cal-event-label,.cal-chip-badge{display:none!important}
  .cal-cell:hover .cal-event-label{display:none!important}
  .cal-more{font-size:8px;padding:0}
  .cal-header{align-items:stretch}
  .cal-nav,.cal-actions{width:100%;justify-content:space-between}
  .cal-actions select{flex:1;min-width:0;font-size:16px!important}
  .cal-actions .btn-accent,.cal-actions .btn-secondary{min-height:44px}

  /* More sheet */
  .mobile-more-overlay{
    position:fixed;
    inset:0;
    z-index:24000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(4,12,20,.0);
    pointer-events:none;
    transition:background .22s;
  }
  .mobile-more-overlay.show{background:rgba(4,12,20,.58);pointer-events:auto}
  .mobile-more-sheet{
    width:100%;
    max-height:calc(88dvh - env(safe-area-inset-bottom));
    padding:8px 18px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto;
    border-radius:22px 22px 0 0;
    border:1px solid var(--border);
    border-bottom:0;
    background:var(--card);
    box-shadow:0 -22px 60px rgba(4,12,20,.26);
    transform:translateY(105%);
    transition:transform .3s var(--ease);
  }
  .mobile-more-overlay.show .mobile-more-sheet{transform:translateY(0)}
  .mobile-more-handle{width:42px;height:4px;border-radius:99px;background:var(--border-s);margin:2px auto 14px}
  .mobile-more-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .mobile-more-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--t1);font-size:22px}
  .mobile-more-user{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:12px}
  .mobile-more-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#fff;font-weight:800;background-size:cover;background-position:center}
  .mobile-more-user strong{display:block;font-size:13px;color:var(--t1)}
  .mobile-more-user span{display:block;font-size:10px;color:var(--t3);margin-top:1px;text-transform:uppercase;letter-spacing:.8px}
  .mobile-more-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobile-more-nav button,.mobile-more-footer button{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--card);
    color:var(--t1);
    font-family:var(--f);
    font-size:11px;
    font-weight:700;
    text-align:left;
  }
  .mobile-more-nav button i,.mobile-more-footer button i{width:20px;text-align:center;color:var(--gold);font-size:15px}
  .mobile-more-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
  .mobile-more-footer button:last-child{color:var(--red)}
  .mobile-more-footer button:last-child i{color:var(--red)}
}

@media(max-width:380px){
  .dashboard-content{padding-left:12px;padding-right:12px}
  .workspace-header{padding-left:12px;padding-right:12px}
  .workspace-mobile-brand{display:none}
  .workspace-heading{display:block}
  .workspace-header h1{font-size:17px}
  .overview-text-action{max-width:92px;text-align:right}
  .rc-command-amount{font-size:26px}
  .rc-view-tab{font-size:11px}
}