/* Component layer — built on tokens.css. Utility-friendly but themeable. */
body{background:var(--c-bg);color:var(--c-ink);
  background-image:radial-gradient(1200px 600px at 100% -10%,var(--c-bg-grad-1),transparent),
                   radial-gradient(900px 500px at -10% 110%,var(--c-bg-grad-2),transparent);}
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow);}
.hairline{border-color:var(--c-border);}
.text-muted{color:var(--c-muted);}
.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:.65rem;padding:.55rem 1rem;font-weight:600;font-size:.875rem;transition:.15s;cursor:pointer;}
.btn-primary{background:var(--c-primary);color:var(--c-primary-fg);} .btn-primary:hover{background:var(--c-primary-600);}
.btn-ghost{background:var(--c-surface-2);color:var(--c-ink);} .btn-ghost:hover{filter:brightness(.97);}
.btn-accent{background:var(--c-accent);color:#1a1206;}
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;}
.badge-primary{background:var(--c-primary-soft);color:var(--c-primary-600);}
.badge-success{background:var(--c-success-soft);color:var(--c-success);}
.badge-warning{background:var(--c-warning-soft);color:var(--c-warning);}
.badge-danger{background:var(--c-danger-soft);color:var(--c-danger);}
.badge-info{background:var(--c-info-soft);color:var(--c-info);}
.badge-muted{background:var(--c-surface-2);color:var(--c-muted);}
/* Colorful financial stat tile */
.stat{position:relative;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent,var(--c-primary));}
.stat .stat-ico{width:2.1rem;height:2.1rem;border-radius:.6rem;display:grid;place-items:center;font-size:1rem;
  background:color-mix(in srgb,var(--accent,var(--c-primary)) 16%,transparent);color:var(--accent,var(--c-primary));}
.stat-value{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.stat-label{font-size:.72rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em;}
/* App shell */
.sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--c-primary) 10%,var(--c-surface)),var(--c-surface));border-right:1px solid var(--c-border);}
.navlink{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:.6rem;color:var(--c-ink);font-size:.9rem;}
.navlink:hover{background:var(--c-surface-2);}
.navlink.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.brandmark{background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:#fff;}
.topbar{background:color-mix(in srgb,var(--c-surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border);}
.tabbar{background:color-mix(in srgb,var(--c-surface) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--c-border);padding-bottom:env(safe-area-inset-bottom);}
.tabitem{color:var(--c-muted);} .tabitem.active{color:var(--c-primary-600);}
/* Inputs */
.field{width:100%;background:var(--c-surface);border:1px solid var(--c-border);border-radius:.6rem;padding:.6rem .8rem;color:var(--c-ink);font-size:.9rem;}
.field:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 22%,transparent);}
input,select,textarea{color-scheme:light dark;}
/* Tabs (client hub) */
.tabbtn{padding:.4rem .8rem;border-radius:.55rem;font-size:.85rem;color:var(--c-muted);white-space:nowrap;}
.tabbtn.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
/* Data table */
.tbl{width:100%;font-size:.875rem;} .tbl th{color:var(--c-muted);font-weight:500;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;}
.tbl td,.tbl th{padding:.55rem .4rem;border-bottom:1px solid var(--c-border);}
.tbl tr:last-child td{border-bottom:0;}
.gradient-hero{background:linear-gradient(120deg,var(--c-primary),color-mix(in srgb,var(--c-accent) 70%,var(--c-primary)));color:#fff;}
.money{font-variant-numeric:tabular-nums;}
a{color:inherit}

/* ---- Nav sections & active states ---- */
.navsec{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);opacity:.75;padding:0 .75rem .35rem;}
.navlink{position:relative;gap:.65rem;margin:1px 0;color:var(--c-muted);font-weight:500;}
.navlink svg{flex:0 0 auto;opacity:.9;}
.navlink:hover{background:var(--c-surface-2);color:var(--c-ink);}
.navlink.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.navlink.active svg{opacity:1;}
.navlink.active::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%);height:60%;width:3px;border-radius:3px;background:var(--c-primary);}
.sidebar{padding-right:.9rem;}
/* section divider subtlety */
.navsec + a, nav > div + div{margin-top:.15rem;}
nav > div:not(:first-child){border-top:1px solid color-mix(in srgb,var(--c-border) 60%,transparent);padding-top:.7rem;}

/* ---- Tab bar (mobile) ---- */
.tabitem{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;color:var(--c-muted);position:relative;}
.tabitem.active{color:var(--c-primary-600);}
.tabitem.active::after{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:3px;background:var(--c-primary);}
.tab-fab{background:var(--c-primary);color:var(--c-primary-fg);width:2.6rem;height:2.6rem;border-radius:1rem;display:grid;place-items:center;margin-top:-1rem;box-shadow:var(--shadow);}

/* ---- Mobile drawer ---- */
.drawer-overlay{position:fixed;inset:0;background:rgba(2,6,15,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;backdrop-filter:blur(2px);}
.drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;transform:translateX(-102%);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:50;overflow-y:auto;padding:1rem;box-shadow:var(--shadow);}
html.drawer-open .drawer{transform:translateX(0);}
html.drawer-open .drawer-overlay{opacity:1;pointer-events:auto;}

/* ---- Utilities ---- */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;}
.no-scrollbar::-webkit-scrollbar{display:none;height:0;}
html,body{max-width:100%;overflow-x:hidden;}
.theme-dot{width:1.35rem;height:1.35rem;border-radius:999px;border:2px solid var(--c-border);cursor:pointer;transition:transform .1s;}
.theme-dot:hover{transform:scale(1.12);}
.theme-dot.sel{outline:2px solid var(--c-primary);outline-offset:2px;border-color:transparent;}

/* ---- Form field contrast across ALL themes ---- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea{
  background:var(--c-surface); color:var(--c-ink);
  border:1px solid var(--c-border); border-radius:.6rem;
}
input::placeholder, textarea::placeholder{color:var(--c-muted);opacity:.8;}
select option{background:var(--c-surface);color:var(--c-ink);}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 22%,transparent);}
label{color:var(--c-ink);}
.chip{padding:.35rem .8rem;border-radius:999px;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-muted);white-space:nowrap;font-weight:500;}
.chip:hover{color:var(--c-ink);}
.chip-on{background:var(--c-primary-soft);border-color:transparent;color:var(--c-primary-600);font-weight:600;}
.btn svg{flex:0 0 auto;}

/* =========================================================================
   Tabs — one continuous strip
   The wrapper carries fade masks at whichever edge still has content, so a
   scrollable strip announces itself instead of looking like it simply ends.
   ========================================================================= */
.tabs-wrap{position:relative;}
.tabs-scroll{display:flex;gap:.25rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:.9rem;padding:.3rem;}
.tabs-scroll::-webkit-scrollbar{display:none;height:0;}
.tabs-wrap::before,.tabs-wrap::after{content:"";position:absolute;top:.3rem;bottom:.3rem;width:2rem;
  pointer-events:none;opacity:0;transition:opacity .18s;border-radius:.9rem;z-index:1;}
.tabs-wrap::before{left:1px;background:linear-gradient(90deg,var(--c-surface),transparent);}
.tabs-wrap::after{right:1px;background:linear-gradient(270deg,var(--c-surface),transparent);}
.tabs-wrap.has-left::before,.tabs-wrap.has-right::after{opacity:1;}
.tabbtn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:.65rem;
  font-size:.85rem;font-weight:500;color:var(--c-muted);white-space:nowrap;flex:0 0 auto;
  border:0;background:transparent;cursor:pointer;transition:background .15s,color .15s;
  scroll-margin-inline:1.5rem;}
.tabbtn:hover{background:var(--c-surface-2);color:var(--c-ink);}
.tabbtn.active{background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:600;}
.tabbtn:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px;}
.tabbtn .tabcount{font-size:.68rem;font-weight:700;padding:0 .35rem;border-radius:999px;
  background:color-mix(in srgb,currentColor 15%,transparent);}
.tabpanel[hidden]{display:none!important;}
.tabpanel{animation:tabfade .18s ease-out;}
@keyframes tabfade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* =========================================================================
   Avatars — always something, never a broken image
   ========================================================================= */
.avatar{display:grid;place-items:center;border-radius:999px;overflow:hidden;flex:0 0 auto;
  background:var(--c-primary-soft);color:var(--c-primary-600);font-weight:700;
  border:1px solid var(--c-border);}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-xs{width:1.75rem;height:1.75rem;font-size:.62rem;}
.avatar-sm{width:2.25rem;height:2.25rem;font-size:.72rem;}
.avatar-md{width:3rem;height:3rem;font-size:.9rem;}
.avatar-lg{width:4.5rem;height:4.5rem;font-size:1.25rem;}
.avatar-xl{width:6rem;height:6rem;font-size:1.7rem;}
.avatar-ph{color:var(--c-muted);background:var(--c-surface-2);}
.avatar-ring{box-shadow:0 0 0 3px var(--c-surface),0 0 0 5px var(--c-primary-soft);}

/* =========================================================================
   Profile / console furniture
   ========================================================================= */
.profile-cover{height:7rem;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(120deg,var(--c-primary),color-mix(in srgb,var(--c-accent) 65%,var(--c-primary)));
  background-size:cover;background-position:center;}
.meta-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--c-border);font-size:.875rem;}
.meta-row:last-child{border-bottom:0;}
.meta-row dt{color:var(--c-muted);flex:0 0 auto;}
.meta-row dd{text-align:right;font-weight:500;word-break:break-word;}
.lock-pill{display:inline-flex;align-items:center;gap:.25rem;font-size:.65rem;font-weight:600;
  padding:.1rem .45rem;border-radius:999px;background:var(--c-surface-2);color:var(--c-muted);}
.section-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:.5rem;}
.empty{padding:1.75rem 1rem;text-align:center;color:var(--c-muted);font-size:.875rem;}
.empty svg{margin:0 auto .5rem;opacity:.45;}
.kv-grid{display:grid;gap:.75rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.kv-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);}
.kv-value{font-size:.9rem;font-weight:500;word-break:break-word;}
.callout{border-radius:.85rem;padding:.85rem 1rem;font-size:.85rem;border:1px solid;
  display:flex;gap:.6rem;align-items:flex-start;}
.callout svg{flex:0 0 auto;margin-top:.1rem;}
.callout-warning{background:var(--c-warning-soft);border-color:color-mix(in srgb,var(--c-warning) 35%,transparent);color:var(--c-warning);}
.callout-danger{background:var(--c-danger-soft);border-color:color-mix(in srgb,var(--c-danger) 35%,transparent);color:var(--c-danger);}
.callout-info{background:var(--c-info-soft);border-color:color-mix(in srgb,var(--c-info) 35%,transparent);color:var(--c-info);}
.callout-success{background:var(--c-success-soft);border-color:color-mix(in srgb,var(--c-success) 35%,transparent);color:var(--c-success);}
.callout strong{color:var(--c-ink);}
.callout-warning strong,.callout-danger strong,.callout-info strong,.callout-success strong{color:inherit;}

/* Toggle switch for feature flags */
.switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  width:2.6rem;height:1.5rem;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--c-surface-2);
  border:1px solid var(--c-border);transition:.18s;}
.switch .thumb{position:absolute;top:.2rem;left:.2rem;width:1.05rem;height:1.05rem;border-radius:999px;
  background:var(--c-muted);transition:.18s;}
.switch input:checked ~ .track{background:var(--c-primary-soft);border-color:var(--c-primary);}
.switch input:checked ~ .thumb{transform:translateX(1.05rem);background:var(--c-primary);}
.switch input:focus-visible ~ .track{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 25%,transparent);}

/* Forms */
.form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.form-label{display:block;font-size:.8rem;}
.form-label > span:first-child{display:block;color:var(--c-muted);margin-bottom:.25rem;font-weight:500;}
.form-help{font-size:.72rem;color:var(--c-muted);margin-top:.2rem;line-height:1.35;}
.form-error{font-size:.72rem;color:var(--c-danger);margin-top:.2rem;}
.check-row{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .7rem;border-radius:.7rem;
  background:var(--c-surface-2);font-size:.85rem;}
.check-row input[type=checkbox]{width:1.05rem;height:1.05rem;margin-top:.1rem;accent-color:var(--c-primary);flex:0 0 auto;}
.code-block{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;
  letter-spacing:.08em;background:var(--c-surface-2);border:1px dashed var(--c-border);
  border-radius:.6rem;padding:.55rem .7rem;text-align:center;}
.qr-frame{background:#fff;border-radius:.9rem;padding:.75rem;display:inline-block;line-height:0;
  border:1px solid var(--c-border);}
.qr-frame svg{width:180px;height:180px;display:block;}

/* Timeline */
.timeline{position:relative;padding-left:1.15rem;}
.timeline::before{content:"";position:absolute;left:.3rem;top:.35rem;bottom:.35rem;width:2px;
  background:var(--c-border);border-radius:2px;}
.timeline-item{position:relative;padding:.45rem 0;font-size:.85rem;}
.timeline-item::before{content:"";position:absolute;left:-1.02rem;top:.85rem;width:.55rem;height:.55rem;
  border-radius:999px;background:var(--c-muted);box-shadow:0 0 0 3px var(--c-surface);}
.timeline-item.is-alert::before{background:var(--c-danger);}
.timeline-item.is-good::before{background:var(--c-success);}

/* Table helper for wide data */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:100%;}

/* ---------------------------------------------------------------------------
   Sidebar height
   The sidebar is a flex item, so by default it stretches to the height of the
   tallest thing on the page. On a long page — the audit log especially — that
   produced a sidebar thousands of pixels tall that the reader had to scroll
   past to reach the bottom of the page. Pinning it to the viewport keeps it
   where it belongs and lets the page scroll underneath it on its own.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .sidebar-fixed {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;          /* correct on mobile browsers with a collapsing bar */
    align-self: flex-start;  /* stops the flex container stretching it */
    overflow: hidden;        /* the nav inside scrolls, never the whole rail */
  }
  /* The scrollable middle of the sidebar. `min-height:0` is required: a flex
     child will not shrink below its content without it, so the overflow would
     never engage. */
  .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the nav does not scroll the page */
  }
  .sidebar-scroll::-webkit-scrollbar { width: 6px; }
  .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--c-border); border-radius: 3px;
  }
}