/* ============================================================================
   AURUM — premium black / white / gold theme for the Drip Feed (MAR-555)
   Loaded AFTER app.css. Scoped under body.aurum so it overrides the legacy
   Tailwind 1.x / Jetstream class vocabulary without touching the cascade
   elsewhere. Uber skeleton (high-contrast, bold type) + Figma polish (rounded
   cards, soft depth) + Notion whitespace. One gold accent.
   ============================================================================ */

:root {
  --ink:      #0B0B0D;
  --ink-2:    #131419;
  --ink-3:    #1C1E26;
  --paper:    #F4F3EF;   /* warm app background */
  --card:     #FFFFFF;
  --line:     #E7E4DC;
  --line-2:   #F0EEE8;
  --text:     #16171A;
  --muted:    #6B6C72;
  --muted-2:  #9B9CA2;
  --gold:     #C8A35B;
  --gold-2:   #B58C3C;   /* hover / deep */
  --gold-3:   #8C6B27;   /* text-on-light gold */
  --gold-tint:rgba(200,163,91,.12);
  --gold-line:rgba(200,163,91,.40);
  --ok:       #3F8F5B;
  --warn:     #C2922B;
  --danger:   #C0492F;
  --radius:   14px;
  --radius-sm:10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,16,22,.05);
  --shadow:    0 1px 2px rgba(16,16,22,.04), 0 10px 30px -16px rgba(16,16,22,.18);
  --shadow-lg: 0 30px 70px -28px rgba(16,16,22,.32);
  --sidebar-w: 264px;
  --font-ui:      'Satoshi','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display: 'Clash Display','Satoshi',system-ui,sans-serif;
}

/* ---------- base ---------- */
body.aurum {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
body.aurum .font-sans { font-family: var(--font-ui) !important; }
body.aurum h1, body.aurum h2, body.aurum h3,
body.aurum .aurum-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 600;
}
body.aurum a { color: inherit; }

/* kill the legacy gray app canvas */
body.aurum .min-h-screen.bg-gray-100,
body.aurum .bg-gray-100 { background-color: transparent !important; }

/* ============================================================================
   SHELL — fixed dark sidebar + light content
   ============================================================================ */
.aurum-shell { display:flex; min-height:100vh; background:var(--paper); }
.aurum-main  { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
               margin-left: var(--sidebar-w); }

/* ---------- sidebar ---------- */
.aurum-sidebar {
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:40;
  background:linear-gradient(180deg,#0B0B0D 0%, #101117 100%);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; padding:22px 16px;
  color:#C9CACE;
}
.aurum-brand { display:flex; align-items:center; gap:10px; padding:6px 10px 22px; }
.aurum-brand .mark {
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,var(--gold) 0%, #E7CB86 50%, var(--gold-2) 100%);
  display:grid; place-items:center; color:#1a1408; font-family:var(--font-display);
  font-weight:700; font-size:16px; box-shadow:0 6px 16px -6px rgba(200,163,91,.6);
}
.aurum-brand .word {
  font-family:var(--font-display); font-weight:600; font-size:18px; color:#fff;
  letter-spacing:-0.02em;
}
.aurum-brand .word b { color:var(--gold); font-weight:600; }

.aurum-sec-label {
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#6A6B73; padding:14px 12px 7px;
}

.aurum-nav { display:flex; flex-direction:column; gap:2px; }
.aurum-link {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  font-size:14px; font-weight:500; color:#B7B8BE; text-decoration:none;
  transition:all .16s ease; position:relative;
}
.aurum-link .dot { width:6px; height:6px; border-radius:50%; background:#42434B; flex:none; transition:all .16s ease; }
.aurum-link:hover { background:rgba(255,255,255,.05); color:#fff; }
.aurum-link:hover .dot { background:var(--gold); }
.aurum-link.is-active {
  background:linear-gradient(90deg, rgba(200,163,91,.16), rgba(200,163,91,.04));
  color:#fff; box-shadow:inset 0 0 0 1px rgba(200,163,91,.18);
}
.aurum-link.is-active .dot { background:var(--gold); box-shadow:0 0 10px var(--gold); }
.aurum-link.is-active::before {
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--gold);
}

/* tool switcher pill at top of sidebar */
.aurum-tool {
  margin:2px 4px 8px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.aurum-tool .lbl { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6A6B73; }
.aurum-tool .val { display:flex; align-items:center; justify-content:space-between; gap:8px;
                   color:#fff; font-weight:600; font-size:14px; margin-top:2px; }
.aurum-tool .val svg { width:15px; height:15px; color:var(--gold); }

.aurum-spacer { flex:1 1 auto; }

/* user block bottom */
.aurum-user {
  margin-top:10px; padding:11px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:11px;
}
.aurum-user .av {
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold),var(--gold-2)); color:#1a1408;
  font-weight:700; font-family:var(--font-display);
}
.aurum-user .who { min-width:0; }
.aurum-user .who .nm { color:#fff; font-weight:600; font-size:13.5px; line-height:1.1; }
.aurum-user .who .em { color:#7E7F86; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aurum-logout { color:#8A8B92; font-size:12.5px; padding:4px; border-radius:8px; cursor:pointer; background:none; border:none; }
.aurum-logout:hover { color:var(--gold); }

/* ============================================================================
   TOPBAR (the {{ $header }} slot)
   ============================================================================ */
body.aurum header.bg-white.shadow,
.aurum-topbar {
  background:rgba(244,243,239,.82) !important; backdrop-filter:saturate(140%) blur(10px);
  box-shadow:none !important; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.aurum-topbar-inner { max-width:none; padding:20px 36px; }
body.aurum header .font-semibold.text-xl,
body.aurum header h2 { font-family:var(--font-display); font-size:22px; color:var(--ink); font-weight:600; }

/* ============================================================================
   CONTENT + CARDS
   ============================================================================ */
.aurum-content { padding:8px 0 60px; }
body.aurum main .max-w-7xl { max-width:none !important; padding-left:36px; padding-right:36px; }

/* cards: any white panel becomes a premium card */
body.aurum .bg-white.shadow,
body.aurum .bg-white.shadow.sm\:rounded-lg,
body.aurum .bg-white.rounded-lg,
body.aurum .bg-white.overflow-hidden.shadow {
  background:var(--card) !important;
  border:1px solid var(--line);
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden;
}

/* section title (x-jet-section-title) */
body.aurum .aurum-section h3, body.aurum h3.text-lg { font-family:var(--font-display); }

/* ============================================================================
   TABLES
   ============================================================================ */
body.aurum table { border-collapse:separate; border-spacing:0; }
body.aurum thead th,
body.aurum th.bg-gray-50,
body.aurum .bg-gray-50 {
  background:#FBFAF7 !important;
  color:var(--muted) !important;
  font-size:11px !important; letter-spacing:.08em; font-weight:600 !important;
  border-bottom:1px solid var(--line) !important;
}
body.aurum tbody.divide-y > tr, body.aurum .divide-y > * { border-color:var(--line-2) !important; }
body.aurum tbody tr { transition:background .14s ease; }
body.aurum tbody tr:hover { background:#FCFBF8 !important; }
body.aurum tbody td { color:var(--text); font-size:13.5px; }
body.aurum tbody td a { color:var(--ink); font-weight:600; }
body.aurum tbody td a:hover { color:var(--gold-3); }

/* row action links: refined, gold on hover */
body.aurum tbody td button.text-blue-400,
body.aurum tbody td a.text-gray-400,
body.aurum tbody td button.text-gray-400 { color:var(--muted) !important; font-weight:500; }
body.aurum tbody td button.text-blue-400:hover,
body.aurum tbody td a.text-gray-400:hover,
body.aurum tbody td button.text-gray-400:hover { color:var(--gold-3) !important; }
body.aurum tbody td button.text-yellow-400 { color:var(--warn) !important; }
body.aurum tbody td button.text-green-400, body.aurum tbody td .text-green-400 { color:var(--ok) !important; }
body.aurum tbody td button.text-red-500 { color:var(--danger) !important; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
/* legacy primary CTA (bg-gray-800 .text-white) -> premium GOLD button */
body.aurum .bg-gray-800 {
  background:linear-gradient(135deg,var(--gold) 0%, #D9B66E 58%, var(--gold-2) 100%) !important;
  color:#1a1408 !important; border-radius:11px !important;
  letter-spacing:.03em; font-weight:700 !important;
  box-shadow:0 10px 24px -13px rgba(200,163,91,.75);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
body.aurum .bg-gray-800.text-white, body.aurum .bg-gray-800 * { color:#1a1408 !important; }
body.aurum .bg-gray-800:hover { transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 14px 30px -12px rgba(200,163,91,.85) !important; }

/* gold CTA helper */
body.aurum .btn-gold, body.aurum .aurum-cta {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:linear-gradient(135deg,var(--gold) 0%, #D9B66E 60%, var(--gold-2) 100%);
  color:#1a1408 !important; font-weight:700; border:none;
  padding:10px 18px; border-radius:11px; text-transform:none; letter-spacing:0;
  box-shadow:0 10px 24px -12px rgba(200,163,91,.7); transition:all .15s ease;
}
body.aurum .btn-gold:hover, body.aurum .aurum-cta:hover { transform:translateY(-1px); filter:brightness(1.04); }

/* ============================================================================
   FORMS (x-jet-input / select / labels)
   ============================================================================ */
body.aurum label, body.aurum .block.font-medium.text-sm.text-gray-700 { color:var(--text); font-weight:600; }
body.aurum input[type=text], body.aurum input[type=email], body.aurum input[type=password],
body.aurum input[type=number], body.aurum select, body.aurum textarea,
body.aurum .form-input, body.aurum .form-checkbox {
  border-color:var(--line) !important; border-radius:10px !important;
  background:#fff; color:var(--text); transition:box-shadow .15s ease, border-color .15s ease;
}
body.aurum input:focus, body.aurum select:focus, body.aurum textarea:focus {
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px var(--gold-tint) !important; outline:none;
}
body.aurum .form-checkbox:checked { background-color:var(--gold) !important; border-color:var(--gold) !important; }

/* ============================================================================
   BADGES / pills (status)
   ============================================================================ */
.aurum-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:var(--radius-pill); font-size:11.5px; font-weight:600; line-height:1.4; }
.aurum-badge .d { width:6px; height:6px; border-radius:50%; }
.aurum-badge.is-running { background:var(--gold-tint); color:var(--gold-3); }
.aurum-badge.is-running .d { background:var(--gold); }
.aurum-badge.is-stopped { background:#F0EFEA; color:var(--muted); }
.aurum-badge.is-stopped .d { background:var(--muted-2); }

/* stat number accent */
.aurum-stat { font-family:var(--font-display); font-size:26px; color:var(--ink); font-weight:600; }
.aurum-stat .u { color:var(--gold); }

/* pagination */
body.aurum .bg-white.px-4.py-3.border-t { background:#FBFAF7 !important; border-color:var(--line) !important; }

/* page fade-in */
@keyframes aurum-fade { from { opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }
.aurum-content > * { animation:aurum-fade .4s cubic-bezier(.2,.7,.3,1) both; }

/* ============================================================================
   RESPONSIVE — sidebar collapses to a slide-over under 1024px
   ============================================================================ */
.aurum-burger { display:none; }
@media (max-width:1023px) {
  .aurum-main { margin-left:0; }
  .aurum-sidebar { transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-lg); }
  .aurum-sidebar.is-open { transform:translateX(0); }
  .aurum-burger { display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:11px; border:1px solid var(--line);
    background:#fff; color:var(--ink); cursor:pointer; }
  .aurum-topbar-inner, body.aurum main .max-w-7xl { padding-left:18px; padding-right:18px; }
  .aurum-scrim { position:fixed; inset:0; background:rgba(11,11,13,.45); z-index:39; }
}