/* ══════════════════════════════════════════════════════════════════
   Silverline Outlet — Shared Design System (CDN core)
   Aesthetic: Control Room Dark
   Fonts: Outfit (UI) · IBM Plex Mono (codes)

   This file contains ONLY rules that are shared across all
   Silverline WebApps: design tokens, base reset, navigation,
   generic page layout, app switcher, and hub cards.

   App-specific page styles live in /css/apps/<app>.css and are
   loaded after this file by each WebApp's _Layout.cshtml.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — layered depth */
  --bg-void:     #080710;
  --bg-base:     #0d0c14;
  --bg-surface:  #13111e;
  --bg-raised:   #1a1828;
  --bg-overlay:  #201e30;
  --bg-card:     #13111e;

  /* Text */
  --txt-hi:   #ede9ff;
  --txt-mid:  #8c88a8;
  --txt-lo:   #4e4b65;

  /* Borders */
  --bdr-1: rgba(255,255,255,0.04);
  --bdr-2: rgba(255,255,255,0.08);
  --bdr-3: rgba(255,255,255,0.13);

  /* Status — Pending (red) */
  --red:      #f0423f;
  --red-dim:  rgba(240, 66, 63, 0.10);
  --red-glow: rgba(240, 66, 63, 0.28);

  /* Status — Approved (green) */
  --grn:      #17c964;
  --grn-dim:  rgba(23, 201, 100, 0.10);
  --grn-glow: rgba(23, 201, 100, 0.28);

  /* Status — Warning (amber) */
  --amber:     #f5a623;
  --amber-dim: rgba(245, 166, 35, 0.12);

  /* Accent */
  --accent:     #7b6ef6;
  --accent-dim: rgba(123, 110, 246, 0.14);

  /* Type */
  --font-ui:   'Outfit',        sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Layout */
  --nav-h: 50px;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 11px;

  /* Aliases kept for login page markup */
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);

  /* Motion */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t1: 110ms;
  --t2: 210ms;
  --t3: 360ms;
}

/* ── Base reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--bg-void);
  color: var(--txt-hi);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   Navigation
   ══════════════════════════════════════════════════════════════════ */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: rgba(8, 7, 16, 0.80);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--bdr-1);
}

/* Brand */
.nav-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--txt-hi);
  line-height: 1;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--txt-lo);
  text-transform: uppercase;
  line-height: 1;
}

/* Separator */
.nav-sep {
  width: 1px;
  height: 18px;
  background: var(--bdr-2);
  margin: 0 14px;
  flex-shrink: 0;
}

/* Tab links */
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-mid);
  transition: color var(--t1) var(--ease), background var(--t1) var(--ease);
  white-space: nowrap;
}
.nav-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-tab:hover  { color: var(--txt-hi); background: var(--bg-raised); }
.nav-tab.is-active {
  color: var(--txt-hi);
  background: var(--bg-raised);
}

/* ══════════════════════════════════════════════════════════════════
   Page layout (common defaults — override max-width per app)
   ══════════════════════════════════════════════════════════════════ */
.app-main {
  background: var(--bg-base);
  min-height: calc(100dvh - var(--nav-h));
  overflow-x: hidden;
}

.page-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 22px 72px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bdr-1);
  flex-wrap: wrap;
}

.header-title h1 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.header-title p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--txt-mid);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   App Switcher (shared across all WebApps)
   ══════════════════════════════════════════════════════════════════ */
.app-switcher {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.app-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--txt-lo);
  transition: color var(--t1) var(--ease), background var(--t1) var(--ease), border-color var(--t1) var(--ease);
  cursor: pointer;
}
.app-switcher-btn:hover,
.app-switcher-btn.is-open {
  color: var(--txt-hi);
  background: var(--bg-raised);
  border-color: var(--bdr-2);
}
.app-switcher-btn svg { width: 16px; height: 16px; }

.app-switcher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-overlay);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: 300;
}
.app-switcher-dropdown.is-open {
  display: block;
  animation: dropdown-in 0.15s var(--ease) both;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-switcher-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--txt-lo);
  padding: 4px 8px 8px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.app-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--txt-mid);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  transition: color var(--t1) var(--ease), background var(--t1) var(--ease), border-color var(--t1) var(--ease);
  line-height: 1.2;
}
.app-grid-item:hover {
  color: var(--txt-hi);
  background: var(--bg-raised);
  border-color: var(--bdr-2);
}
.app-grid-item.is-current {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: rgba(123,110,246,0.25);
}

.app-grid-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  border: 1px solid var(--bdr-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.app-grid-item.is-current .app-grid-icon {
  background: var(--accent-dim);
  border-color: rgba(123,110,246,0.3);
}

/* ══════════════════════════════════════════════════════════════════
   Hub cards — used on index pages across apps
   ══════════════════════════════════════════════════════════════════ */
.hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.hub-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--bdr-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.hub-card:hover {
  background: var(--bg-raised);
  border-color: var(--bdr-3);
}

.hub-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  border-radius: var(--r-md);
  color: var(--accent);
}
.hub-card-icon svg { width: 20px; height: 20px; }

.hub-card-content h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt-hi);
}
.hub-card-content p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--txt-mid);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   Responsive (shared)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .page-header { flex-direction: column; align-items: stretch; }
}