/* Company Client Portal — authenticated UI. Clean, sans-serif look aligned with the guest
   auth screens (portal-auth.css). Tenant branding overrides --accent via base.html. */
:root {
  --paper:#ffffff; --surface:#ffffff; --ink:#1a1a18; --muted:#6b6760;
  --line:#e7e1d7; --line-strong:#d8d0c2;
  --accent:#15445c; --accent-ink:#ffffff; --accent-soft:#eaf1f4;
  --danger:#8c2f23; --ok:#2f6b4f;
  --r:12px; --r-sm:8px;
  --shadow:0 1px 2px rgba(26,26,24,.04),0 8px 24px -12px rgba(26,26,24,.18);
  --shadow-lift:0 2px 4px rgba(26,26,24,.06),0 18px 40px -16px rgba(26,26,24,.28);
  /* headings now share the sans stack (was a Fraunces serif) to match the auth screens */
  --display:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; font-feature-settings:"tnum" 0;
}
h1,h2,h3,.display{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.14;margin:0 0 .4em}
h1{font-size:clamp(1.8rem,3vw,2.5rem)}
h2{font-size:1.5rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.ref{font-family:var(--mono);font-size:.92em;letter-spacing:-.02em}
.muted{color:var(--muted)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* top bar */
.cp-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.cp-top__in{display:flex;align-items:center;gap:20px;height:66px}
.cp-brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.cp-brand img{height:30px;width:auto;display:block}
.cp-brand__mark{width:30px;height:30px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:600;font-family:var(--sans)}
.cp-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.cp-nav a{padding:8px 13px;border-radius:var(--r-sm);color:var(--ink);font-weight:500;font-size:.93rem}
.cp-nav a:hover{background:var(--accent-soft);text-decoration:none}
.cp-nav a.is-active{color:var(--accent);background:var(--accent-soft)}
.cp-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:100px;font-size:.86rem;background:var(--surface)}
.cp-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:600;line-height:1}

/* layout + cards */
main{padding:34px 0 80px;animation:cp-rise .5s cubic-bezier(.2,.7,.2,1) both}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative}
.card--accent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);border-radius:var(--r) var(--r) 0 0}
.card__b{padding:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:560;font-size:.95rem;padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,background .15s ease;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{box-shadow:var(--shadow-lift);text-decoration:none}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn--block{width:100%}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-size:.84rem;font-weight:560;letter-spacing:.01em;margin-bottom:6px;color:var(--ink)}
.input{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-error{color:var(--danger);font-size:.86rem;margin-top:6px}

/* flash */
.flash{display:flex;gap:10px;padding:12px 15px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);margin-bottom:14px;font-size:.92rem}
.flash--error{border-color:var(--danger);background:#fbf1ef;color:var(--danger)}
.flash--success{border-color:var(--ok);background:#eef5f1;color:var(--ok)}

/* (guest auth screens now live in portal-auth.css, loaded only on those pages) */

@keyframes cp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Data tables (cart, orders, order detail) ──
   Moved out of orders.html's <style> / inline style= attrs so order_detail.html —
   which always referenced .ord-tbl and .badge WITHOUT their CSS — is styled too.
   ≤720px the .cp-rtable pattern stacks each row into a labeled block. */
.ord-tbl,.cart-tbl{width:100%;border-collapse:collapse}
.ord-tbl th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.cart-tbl th{text-align:left;padding:10px 4px 10px 0;border-bottom:1px solid var(--line)}
.ord-tbl td{padding:13px 12px;border-bottom:1px solid var(--line)}
.cart-tbl td{padding:12px 4px 12px 0;border-bottom:1px solid var(--line)}
.ord-tbl tbody tr:hover td{background:var(--accent-soft)}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.8rem;border:1px solid var(--line-strong)}
@media (max-width:720px){
  .cp-rtable thead{display:none}
  .cp-rtable,.cp-rtable tbody,.cp-rtable tr,.cp-rtable td{display:block;width:100%}
  .cp-rtable tr{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:10px}
  .cp-rtable td{border-bottom:none;padding:4px 0}
  .cp-rtable tbody tr:hover td{background:transparent}
  .cp-rtable td[data-label]{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .cp-rtable td[data-label]::before{content:attr(data-label);font-size:.8rem;color:var(--muted);font-weight:500;flex:none}
  .cp-rtable .cp-td--main{font-weight:560;padding-bottom:6px}
  .cp-rtable .cp-td--actions{padding-top:8px}
  .cp-rtable .cp-td--actions .btn,.cp-rtable .cp-td--actions form{width:100%}
}

/* order-detail document rows (were inline style= flex rows) */
.cp-docrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.cp-docrow + .cp-docrow{border-top:1px solid var(--line)}
@media (max-width:720px){
  .cp-docrow{flex-wrap:wrap}
}

/* ── Mobile chrome (≤720px): bottom tab bar replaces the inline nav ── */
.cp-top__out{display:none}
.cp-tabbar{display:none}
@media (max-width:720px){
  .container{padding:0 16px}
  .page-head{flex-wrap:wrap}
  .cp-nav{display:none}
  .cp-top__in{height:58px}
  .cp-top__out{display:inline-flex;align-items:center;margin-left:auto;padding:10px;color:var(--ink);font-size:1.1rem}
  .cp-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .cp-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:10px 2px 9px;color:var(--muted);font-size:.74rem;font-weight:500}
  .cp-tab:hover{text-decoration:none}
  .cp-tab.is-active{color:var(--accent)}
  .cp-tab__ico{position:relative;font-size:1.45rem;line-height:1}
  .cp-tab__badge{position:absolute;top:-7px;right:-12px}
  .cp-tab__label{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* clear the fixed bar (bar ≈ 66px + safe area) */
  main{padding:22px 0 calc(88px + env(safe-area-inset-bottom))}
}

/* ── File manager (portal skin of bapp_framework/file_manager) ── */
.cp-fm-root { color: inherit; }
.cp-fm-crumbs { display: flex; gap: 8px; margin-bottom: 12px; font-size: .85rem; }
.cp-fm-crumb { color: var(--muted); }
.cp-fm-crumb:hover { color: var(--accent); }
.cp-fm-level { list-style: none; margin: 0; padding: 0; }
.cp-fm-item { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.cp-fm-name { color: inherit; }
.cp-fm-name:hover { color: var(--accent); }
.cp-fm-count { color: var(--muted); font-size: .78rem; }
.cp-fm-badge { border: 1px solid var(--line); border-radius: 100px; padding: 2px 9px; font-size: .75rem; color: var(--muted); }
.cp-fm-empty { color: var(--muted); padding: 12px; }
.cp-fm-more { display: inline-block; margin-top: 12px; color: var(--accent); }
.cp-fm-item-folder { background: var(--accent-soft); }
.cp-fm-item-file { color: var(--ink); }

/* ── Treeview + icons round (portal skin of the two-pane renderer) ──
   Mirrors the bf page's Task-3 panel treatment (`bf-pages.css`, `.bf-fm-tree` and
   friends), translated to the portal's own tokens -- never `--bf-*`, per the
   deployment constraint (checked with `grep -oh '{{ p }}-[a-z0-9-]*' .../file_manager/
   *.html`; every suffix that can render on `mode='browse'` has a rule below).

   The panel background and the row-hover background are deliberately DIFFERENT
   tokens (`--accent-soft` #eaf1f4 vs. `--line` #e7e1d7): Task 3 originally shipped
   both as the SAME token on the bf page (`--bf-bg-muted` for both), which resolved
   to one identical colour in dark mode and made the hover invisible against the
   panel (fixed in `1e3db98ac`). This file has no dark-mode block at all -- the
   whole portal is single-theme -- but the same trap applies in one theme: existence
   of a rule proves nothing, only the pair actually resolving to different values
   does. */
.cp-fm-layout { display: flex; gap: 18px; align-items: flex-start; }
.cp-fm-tree {
  flex: 0 0 220px; background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 0; overflow-x: auto;
}
.cp-fm-tree-level { list-style: none; margin: 0; padding-left: 12px; }
.cp-fm-tree > .cp-fm-tree-level { padding-left: 0; }
/* The tree is genuinely nested (<li> containing <ul>), so a `.cp-fm-tree-item` has up
   to two direct children: `.cp-fm-tree-row` (chevron/spacer + name link) and -- for a
   folder with children -- its own nested `.cp-fm-tree-level` <ul>. The row wrapper
   (Task 5, mirroring `bf-pages.css`) is what makes the WHOLE row highlight on
   hover/selection, not just the name text: it used to sit on `.cp-fm-tree-link`
   alone, sibling to the chevron, so the highlight stopped short of the row's own
   left edge. `.cp-fm-tree-level` stays a plain block sibling of the row, never
   inside it, or its background would stretch down over the whole nested subtree. */
.cp-fm-tree-item { display: block; list-style: none; }
.cp-fm-tree-row {
  display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: var(--r-sm);
}
.cp-fm-tree-row:hover { background: var(--line); }
.cp-fm-tree-row:hover .cp-fm-tree-link { color: var(--accent); }
.cp-fm-tree-link {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  color: inherit; white-space: nowrap;
}
/* `-node-open` means `item.is_open` (root + every ancestor on the path + any folder
   the customer asked to open) -- the dimmed colour reads as "already expanded", not
   as a breadcrumb trail. Routing both through `.cp-fm-tree-row` ties this with the
   generic hover above at (0,3,0) each (unlike the old flat siblings, where hover's
   (0,3,0) always outranked this rule's (0,2,0)), so -- like `-node-current` below --
   hover needs its own explicit repeat to keep winning. */
.cp-fm-node-open > .cp-fm-tree-row .cp-fm-tree-link { color: var(--muted); }
.cp-fm-node-open > .cp-fm-tree-row:hover .cp-fm-tree-link { color: var(--accent); }
.cp-fm-node-current > .cp-fm-tree-row { background: var(--accent); }
.cp-fm-node-current > .cp-fm-tree-row .cp-fm-tree-link { color: var(--accent-ink); font-weight: 600; }
.cp-fm-node-current > .cp-fm-tree-row:hover { background: var(--accent); }
.cp-fm-node-current > .cp-fm-tree-row:hover .cp-fm-tree-link { color: var(--accent-ink); }
/* Without this the folder icon on the selected row would be an accent-coloured icon
   on an accent-coloured background -- effectively invisible. */
.cp-fm-node-current > .cp-fm-tree-row .cp-fm-tree-icon { color: var(--accent-ink); }
.cp-fm-chevron { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex: none; color: var(--muted); }
.cp-fm-chevron:hover { color: var(--accent); }
/* A node open only because it lies on the selection's path (`TreeItem.
   chevron_is_static`, `bapp_framework.sdk.file_manager.service`): toggling it would
   produce the identical URL, so it renders this plain, non-interactive marker
   instead of `.cp-fm-chevron`'s `<a>`. Ties `.cp-fm-chevron:hover` on specificity,
   so it must come after that rule to win. */
.cp-fm-chevron-static { cursor: default; opacity: 0.55; }
.cp-fm-chevron-static:hover { color: var(--muted); }
.cp-fm-tree-spacer { display: inline-flex; width: 16px; flex: none; }
.cp-fm-tree-icon { color: var(--accent); }
/* `.cp-fm-tree-row` hop required — see the same rule in bf-pages.css: the row wrapper made
   the link a grandchild of the <li>, so the old direct-child selector matched nothing. */
.cp-fm-tree-root > .cp-fm-tree-row .cp-fm-tree-link { font-weight: 600; }
.cp-fm-row-icon { color: var(--muted); width: 1.1rem; text-align: center; }
.cp-fm-item-folder .cp-fm-row-icon { color: var(--accent); }
.cp-fm-pane { flex: 1 1 auto; min-width: 0; }
.cp-fm-col-size, .cp-fm-col-modified { color: var(--muted); font-size: .78rem; margin-left: 8px; }
/* No `.cp-fm-ico`/`.cp-fm-ico-folder` here any more: `6b8b09b98` vendored FontAwesome
   Pro into the framework's own static and deleted the portal's `icon_for` text-badge
   override, so `icon_for` classes/text are the framework's `fad fa-*` glyphs now (see
   `views/documents.py`) and no template emits `{{ p }}-ico*` any more -- confirmed
   with the suffix grep above. The rules stayed behind as dead CSS; removed. */
/* No `.cp-fm-grid`/`.cp-fm-tile*`/`.cp-fm-chrome`/`.cp-fm-view*` either, for the same
   reason: the list/icons toggle is gone (`views/documents.py` passes no `view_urls`),
   so `FileManagerConfig.view` is always `'list'`, `_grid.html`/`_tile.html` never
   render, and `_chrome.html` -- which needs `view_urls` or a toolbar, and the portal is
   browse-only -- emits nothing at all. */
@media (max-width: 720px) {
  .cp-fm-layout { flex-direction: column; }
  /* The tree is a bordered panel now (background + full border), not a border-right
     strip, so mobile only needs to stop it clamping to a 220px column -- there is no
     side border left to swap for a bottom one. */
  .cp-fm-tree { flex: 1 1 auto; }
}