/* portal.css — Plurimi Portal · Meridian Private design system */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Cream theme tokens (default) ───────────────────────────────────────────── */
:root {
  /* Paper / backgrounds */
  --cream-50:  #faf7f2;
  --cream-100: #f3eee2;
  --cream-200: #e8e1d4;
  --paper:     #ffffff;
  --tile:      #f7f2e8;

  /* Ink */
  --ink-900: #1a1816;
  --ink-700: #3a3530;
  --ink-500: #6c655c;
  --ink-400: #8a8276;
  --ink-300: #a8a092;

  /* Forest */
  --forest-900: #0e2620;
  --forest-800: #16352c;
  --forest-700: #1a3a3a;
  --forest-600: #2b5a4e;
  --forest-500: #4a7d6e;
  --forest-300: #95b3a4;
  --forest-100: #d8e4dc;
  --forest-50:  #eaf1ec;

  /* Brass */
  --brass-700: #8a6a30;
  --brass:     #b8924a;
  --brass-300: #d8b774;
  --brass-100: #f0e2bf;

  /* Status */
  --hot:      #c2562b;
  --hot-soft: #f4d8c8;
  --warn:     #d49a36;

  /* Rules */
  --rule:      #d8d0c0;
  --rule-soft: #e8e1d4;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows — warm-tinted */
  --shadow-sm: 0 1px 2px rgba(40,30,18,.05), 0 1px 0 rgba(40,30,18,.02);
  --shadow-md: 0 4px 14px rgba(40,30,18,.08), 0 1px 3px rgba(40,30,18,.04);
  --shadow-lg: 0 22px 48px rgba(20,18,12,.18);

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h:  56px;

  /* Semantic aliases (used by components) */
  --bg:        var(--cream-50);
  --bg-card:   var(--paper);
  --border:    var(--rule-soft);
  --text:      var(--ink-900);
  --text-dim:  var(--ink-500);
  --accent:    var(--brass);
  --accent-2:  var(--brass-300);
  --good:      var(--forest-600);
  --bad:       var(--hot);
  --info:      var(--forest-500);
}

/* ── Dark theme ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --cream-50:  #0d1017; --cream-100:#141923; --cream-200:#1c2230;
  --paper:     #161b25; --tile:#1c2230;
  --ink-900:   #e9e6df; --ink-700:#c8c3ba; --ink-500:#8b8478; --ink-400:#696358; --ink-300:#4f4a40;
  --forest-900:#5eead4; --forest-800:#5eead4; --forest-700:#4ed1bd;
  --forest-600:#3bb8a4; --forest-500:#2a8a7c;
  --forest-300:#1a4a44; --forest-100:#1a2f2c; --forest-50:#131e1c;
  --brass-700: #d8b774; --brass:#f0c674; --brass-300:#fbd99b; --brass-100:#3a3220;
  --rule:      #2a3340; --rule-soft:#1f2632;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 22px 48px rgba(0,0,0,.6);
  --bg:        var(--cream-50);
  --bg-card:   var(--paper);
  --border:    var(--rule-soft);
  --text:      var(--ink-900);
  --text-dim:  var(--ink-500);
  --accent:    var(--brass);
  --accent-2:  var(--brass-300);
  --good:      var(--forest-600);
  --bad:       var(--hot);
  --info:      var(--forest-500);
}

/* ── Sage theme ─────────────────────────────────────────────────────────────── */
[data-theme="salesforce"] {
  --cream-50:  #f3f5f0; --cream-100:#e8ede1; --cream-200:#d9e0d3;
  --paper:     #ffffff; --tile:#eef2e8;
  --ink-900:   #1f2a3a; --ink-700:#344055; --ink-500:#5b6677; --ink-400:#7a8390;
  --forest-900:#15301f; --forest-700:#2a6f4a; --forest-600:#3b8d63;
  --forest-500:#5fb085; --forest-300:#95d2b1; --forest-100:#d4ecdf; --forest-50:#e9f4ee;
  --brass:     #d4a574;
  --rule:      #d6dccd; --rule-soft:#e3e6df;
  --bg:        var(--cream-50);
  --bg-card:   var(--paper);
  --border:    var(--rule-soft);
  --text:      var(--ink-900);
  --text-dim:  var(--ink-500);
  --accent:    var(--brass);
  --accent-2:  var(--brass-300);
  --good:      var(--forest-600);
  --bad:       var(--hot);
  --info:      var(--forest-500);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ───────────────────────────────────────────────────────────────────── */
html, body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 90% -10%, var(--forest-50) 0%, transparent 50%),
    radial-gradient(900px 500px at -10% 110%, var(--brass-100) 0%, transparent 60%),
    var(--cream-50);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--brass-700); text-decoration: none; }
a:hover { color: var(--brass); }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}

/* ── Eyebrow utility ────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: 5px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.topbar-logo img { height: 28px; width: auto; }
.topbar-logo-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.topbar-breadcrumb {
  flex: 1;
  font-size: 0.78rem;
  color: var(--ink-400);
}

#topbar-clock {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  min-width: 90px;
  text-align: right;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-500);
}

.role-badge {
  background: var(--brass-100);
  color: var(--brass-700);
  border: 1px solid var(--brass-300);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-logout-btn {
  background: none;
  border: 1px solid var(--rule-soft);
  color: var(--ink-500);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.76rem;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.topbar-logout-btn:hover { border-color: var(--hot); color: var(--hot); background: var(--hot-soft); }

/* ── Topbar nav (pill links replacing sidebar) ───────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 1rem;
}
.topnav-link {
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.topnav-link:hover { background: var(--cream-100); color: var(--ink-900); }
.topnav-link.active { background: var(--forest-900); color: var(--cream-50); }
[data-theme="dark"] .topnav-link.active { background: var(--forest-700); color: #0d1017; }

/* ── Theme switcher ──────────────────────────────────────────────────────────── */
.theme-switcher {
  display: flex;
  gap: 2px;
  background: var(--cream-100);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.theme-btn {
  background: none;
  border: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.theme-btn:hover { color: var(--ink-900); background: var(--cream-200); }
.theme-btn.active { background: var(--forest-900); color: var(--cream-50); }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
#layout {
  display: flex;
  padding-top: var(--topbar-h);
  min-height: 100vh;
}

/* ── Sidebar — hidden, navigation lives in topbar ───────────────────────────── */
#sidebar { display: none; }

/* ── Main content ───────────────────────────────────────────────────────────── */
#content {
  margin-left: 0;
  flex: 1;
  padding: 2rem 2.25rem;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Dashed divider ─────────────────────────────────────────────────────────── */
hr.divider, .dashed-rule {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 1.5rem 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 28px 32px 24px;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: 5px;
}
.card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}
.card-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink-900);
  margin-top: 4px;
}

/* ── KPI grid ───────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

/* ── Section headers ────────────────────────────────────────────────────────── */
.section-header {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 1.25rem;
}
.section-sub {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}

/* ── Tables ─────────────────────────────────────────────────────────────────── */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.data-table th {
  text-align: left;
  padding: 0.5rem 0.85rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  border-bottom: 1px dashed var(--rule);
  white-space: nowrap;
  background: var(--tile);
}
table.data-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  color: var(--ink-700);
}
table.data-table tr:hover td { background: var(--cream-100); }

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  padding: 4px;
  background: var(--cream-100);
  border-radius: var(--radius-pill);
  width: fit-content;
}
.tab-btn {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink-500);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--ink-900); background: var(--cream-200); }
.tab-btn.active {
  background: var(--paper);
  color: var(--forest-900);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule-soft);
  background: transparent;
  color: var(--ink-700);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--cream-100); border-color: var(--rule); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--forest-900);
  color: var(--cream-50);
  border-color: var(--forest-900);
}
.btn-primary:hover { background: var(--forest-700); border-color: var(--forest-700); color: var(--cream-50); }
[data-theme="dark"] .btn-primary { color: #0d1017; background: var(--forest-700); border-color: var(--forest-700); }

.btn-danger {
  background: var(--hot-soft);
  color: var(--hot);
  border-color: rgba(194,86,43,.25);
}
.btn-danger:hover { background: var(--hot); color: var(--cream-50); }

.btn-neutral {
  background: var(--tile);
  border: 1px solid var(--rule-soft);
  color: var(--ink-700);
}
.btn-neutral:hover { background: var(--cream-200); }
.btn-sm { padding: 4px 10px; font-size: 0.72rem; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: 0.35rem;
}
.form-control {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  color: var(--ink-900);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  border-color: var(--forest-600);
  box-shadow: 0 0 0 3px rgba(42,90,78,.10);
}
.form-control option { background: var(--paper); color: var(--ink-900); }
textarea.form-control { resize: vertical; min-height: 80px; }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.badge-warn  { background: var(--brass-100);  color: var(--brass-700); }
.badge-good  { background: var(--forest-50);  color: var(--forest-600); }
.badge-bad   { background: var(--hot-soft);   color: var(--hot); }
.badge-info  { background: var(--forest-100); color: var(--forest-700); }
.badge-dim   { background: var(--cream-200);  color: var(--ink-400); }

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert-warn  { background: var(--brass-100);  border-color: var(--brass-300);  color: var(--brass-700); }
.alert-good  { background: var(--forest-50);  border-color: var(--forest-100); color: var(--forest-600); }
.alert-bad   { background: var(--hot-soft);   border-color: rgba(194,86,43,.3); color: var(--hot); }
.alert-info  { background: var(--forest-100); border-color: var(--forest-300); color: var(--forest-700); }

/* ── Expander ───────────────────────────────────────────────────────────────── */
details.expander {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
details.expander summary {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink-700);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
details.expander summary::before {
  content: '▶';
  font-size: 0.58rem;
  color: var(--brass-700);
  transition: transform 0.15s;
}
details.expander[open] summary::before { transform: rotate(90deg); }
details.expander .expander-body {
  padding: 0.85rem 1.25rem 1.25rem;
  border-top: 1px dashed var(--rule);
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--rule-soft);
  border-top-color: var(--forest-600);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--ink-400);
  font-size: 0.85rem;
}

/* ── Transaction card (AML banker view) ─────────────────────────────────────── */
.trx-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.trx-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
}
.trx-card-header:hover { background: var(--cream-100); }
.trx-card-body {
  display: none;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px dashed var(--rule);
}
.trx-card.expanded .trx-card-body { display: block; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.flex  { display: flex; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.text-dim    { color: var(--ink-500); }
.text-good   { color: var(--forest-600); }
.text-bad    { color: var(--hot); }
.text-warn   { color: var(--warn); }
.text-accent { color: var(--brass); }
.text-sm     { font-size: 0.78rem; }
.mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar { display: none; }
  #content { margin-left: 0; padding: 1.25rem; }
}