/*!
 * Bramble Cloud — shared design system (v1, tenant-vanity-domain redesign).
 * Token palette derived from the brand mark (assets/imgs/nav.png — the
 * green "B"): a diagonal facet from a brighter spring green into a deeper
 * forest green. --brand-500/600 are that mark's two dominant stops.
 *
 * Loaded by every app that opts into the redesigned shell (alongside
 * brm-shell.js). Class names are unprefixed on purpose — this file is the
 * app-content design system, not the shell chrome (which ships its own
 * scoped `brm-` styles so it renders correctly even before this file loads).
 */

:root{
  --brand-50:  #eefbf2;
  --brand-100: #d3f3dd;
  --brand-200: #a6e6bd;
  --brand-300: #71d199;
  --brand-400: #43ba79;
  --brand-500: #1f9d57;   /* primary — matches the mark's lighter facet   */
  --brand-600: #167c46;   /* primary hover / active                      */
  --brand-700: #10613a;   /* the mark's darker facet                     */
  --brand-800: #0c4a2e;
  --brand-900: #083320;
  --accent-lime: #8cc63f; /* sparing use: celebratory / highlight states */

  /* The brand mark itself (assets/imgs/nav.png) is this exact diagonal —
     reused everywhere a gradient reads as "on-brand" rather than decorative:
     primary buttons, active nav states, hero banners, badges/avatars. */
  --brand-gradient: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  --brand-gradient-soft: linear-gradient(135deg, var(--brand-50) 0%, #e6f6ec 100%);
  --brand-glow: 0 8px 20px -6px rgba(16, 97, 58, .45);
  --brand-glow-lg: 0 16px 36px -10px rgba(16, 97, 58, .5);

  --bg:        #f4f6f5;
  --bg-soft:   #fafbfa;
  --surface:   #ffffff;
  --surface-2: #f7f9f8;
  --border:        rgba(15,30,23,.10);
  --border-strong: rgba(15,30,23,.18);
  --text:      #17211c;
  --muted:     #5c6b62;
  --muted-2:   #8a978f;

  --danger: #d0374f;      --danger-soft: #ffeaf0;
  --warning:#c8790a;      --warning-soft:#fff3e2;
  --info:   #2563eb;      --info-soft:   #eaf1ff;
  --success:var(--brand-600); --success-soft: var(--brand-50);

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-1: 0 1px 2px rgba(8,20,14,.05), 0 1px 1px rgba(8,20,14,.04);
  --shadow-2: 0 8px 24px rgba(8,20,14,.08);
  --shadow-3: 0 20px 48px rgba(8,20,14,.16);

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --shell-rail-w: 76px;
  --shell-topbar-h: 60px;
}

/* Light theme only for now — deliberately NOT following
   prefers-color-scheme here. This used to auto-switch to dark purely off
   the OS/browser setting regardless of the in-app theme toggle, which is
   exactly the "site keeps loading in dark mode" bug reported 2026-08-30.
   Dark theme values still exist below under html.dark-theme for whenever
   dark mode is actually designed properly — just no longer auto-applied. */
html.dark-theme{
  --bg:#0b1210; --bg-soft:#0d1613; --surface:#111c17; --surface-2:#0e1815;
  --border: rgba(220,245,232,.10); --border-strong: rgba(220,245,232,.18);
  --text:#e9f7ee; --muted:#9db3a7; --muted-2:#7d9186;
  --brand-50: rgba(31,157,87,.14);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --shadow-3: 0 20px 48px rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Soft brand-tinted glows anchored to the corners, on the flat --bg
     underneath — reads as depth without a busy pattern, and stays out of
     the way of card content since it's fixed to the viewport, not the page. */
  background-color: var(--bg);
  background-image:
    radial-gradient(760px 420px at -8% -12%, rgba(31,157,87,.10), transparent 60%),
    radial-gradient(620px 380px at 108% 8%, rgba(140,198,63,.08), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
a{ color: inherit; }

.page{ padding: 22px 26px 40px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 640px){ .page{ padding: 16px 14px 28px; } }

/* ---------- Page header ---------- */
.page-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px;
}
.page-head h1{ margin:0 0 4px; font-size:1.5rem; font-weight:800; letter-spacing:-.01em; }
.page-head p{ margin:0; color:var(--muted); font-size:.92rem; }
.page-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Hero banner (Hub welcome, KB space header, etc.) ---------- */
.hero-gradient{
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--brand-gradient); color: #fff; padding: 28px 30px;
  box-shadow: var(--brand-glow-lg);
}
.hero-gradient::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(420px 220px at 100% 0%, rgba(255,255,255,.18), transparent 60%);
}
.hero-gradient h1, .hero-gradient h2{ margin:0 0 4px; font-weight:800; letter-spacing:-.01em; position:relative; }
.hero-gradient p{ margin:0; color:rgba(255,255,255,.86); font-size:.92rem; position:relative; }

/* ---------- Cards / panels ---------- */
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card-hover:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); border-color: var(--border-strong); }
.card-pad{ padding: 20px; }
.card-head{ padding: 18px 18px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card-title{ margin:0; font-size:1.02rem; font-weight:700; }
.card-sub{ margin:2px 0 0; color:var(--muted); font-size:.85rem; }
.card-body{ padding: 18px; }

.stat-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 960px){ .stat-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; box-shadow: var(--shadow-1); overflow:hidden;
}
.stat::before{
  content:''; position:absolute; left:0; top:0; right:0; height:3px; background: var(--brand-gradient);
  opacity:.9;
}
.stat-kicker{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.stat-value{ font-size:1.5rem; font-weight:800; line-height:1; margin-bottom:6px; }
.stat-note{ font-size:.8rem; color:var(--muted); }
.stat-note.up{ color: var(--brand-600); }
.stat-note.down{ color: var(--danger); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; border:1px solid transparent; font-weight:650; font-size:.88rem;
  padding:9px 18px; cursor:pointer; text-decoration:none; line-height:1.2;
  transition: background .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{ background: var(--brand-gradient); background-size: 160% 160%; background-position: 0% 50%; color:#fff; box-shadow: var(--brand-glow); }
.btn-primary:hover{ background-position: 100% 50%; box-shadow: var(--brand-glow-lg); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover{ background: var(--bg-soft); }
.btn-soft{ background: var(--brand-50); color: var(--brand-800); }
.btn-soft:hover{ background: var(--brand-100); }
.btn-danger{ background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover{ filter: brightness(.96); }
.btn-sm{ padding:6px 13px; font-size:.8rem; }
.btn-icon{ width:36px; height:36px; padding:0; border-radius:var(--radius-md); }

/* ---------- Forms ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.82rem; font-weight:650; color:var(--text); margin-bottom:6px; }
.input, textarea.input, select.input{
  width:100%; border:1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--radius-md); min-height:42px; padding:9px 13px; font-size:.9rem;
  color: var(--text); outline:none; font-family: var(--font-sans);
}
.input:focus{ border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-50); }
.field-hint{ font-size:.78rem; color:var(--muted); margin-top:5px; }
.field-error{ font-size:.78rem; color:var(--danger); margin-top:5px; }

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; background: var(--brand-50); color: var(--brand-800);
}
.badge-muted{ background: var(--bg-soft); color: var(--muted); }
.badge-danger{ background: var(--danger-soft); color: var(--danger); }
.badge-warning{ background: var(--warning-soft); color: var(--warning); }
.badge-info{ background: var(--info-soft); color: var(--info); }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-lg); border:1px solid var(--border); }
table.brm-table{ width:100%; border-collapse:collapse; font-size:.87rem; background:var(--surface); }
table.brm-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700; padding:11px 14px; background: var(--bg-soft); border-bottom:1px solid var(--border);
}
table.brm-table td{ padding:12px 14px; border-bottom:1px solid var(--border); }
table.brm-table tr:last-child td{ border-bottom:none; }
table.brm-table tr:hover td{ background: var(--bg-soft); }

/* ---------- Empty / loading states ---------- */
.empty-state{ text-align:center; padding:48px 20px; color:var(--muted); }
.empty-state i{ font-size:1.8rem; color: var(--brand-400); margin-bottom:10px; display:block; }
.skeleton{ background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 37%, var(--bg-soft) 63%); background-size: 400% 100%; animation: brm-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes brm-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* ---------- Search ---------- */
.search-box{ position:relative; }
.search-box i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box .input{ padding-left:38px; border-radius:999px; background:var(--bg-soft); }

.min-w-0{ min-width:0; }
.text-muted{ color: var(--muted); }
.text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }