/* =============================================================================
   cc_style.css — Endless Command Center
   Version: 1.0
   Last updated: April 2025
   Theme: Professional dark executive — navy / gold / warm white
   Fonts: Playfair Display + IBM Plex Sans + IBM Plex Mono
   Priority: Mobile-first (iPhone 14/15 base = 390px), scales to desktop
   ============================================================================= */


/* =============================================================================
   SECTION 1: CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   All colors, spacing, typography, and animation values defined here.
   Never hardcode these values anywhere else in this file.
   ============================================================================= */

:root {

  /* --- Color Palette ---
     Navy scale: deep background → mid surfaces → elevated panels
     Gold scale: primary accent → muted states → text
     Neutral scale: body text → secondary text → muted / disabled
  */

  /* Navy (background / surface hierarchy) */
  --navy-deepest:   #090d14;   /* Page background — almost black */
  --navy-deep:      #0d1520;   /* Primary surface — main panels */
  --navy-mid:       #111d2e;   /* Secondary surface — cards, tabs */
  --navy-raised:    #162437;   /* Elevated surface — modals, popovers */
  --navy-border:    #1e3050;   /* Subtle borders */
  --navy-divider:   #243a5c;   /* Stronger dividers */
  --navy-hover:     #1a2e48;   /* Hover state on surfaces */

  /* Gold (accent / action / status-positive) */
  --gold-bright:    #d4a843;   /* Primary CTA — buttons, active states */
  --gold-mid:       #b8912e;   /* Hover / pressed on gold */
  --gold-muted:     #7a5e1a;   /* Disabled gold / inactive badge */
  --gold-faint:     #2a1f08;   /* Gold tint background — subtle highlight */
  --gold-text:      #e8c060;   /* Gold used as text color (readable on navy) */
  --gold-glow:      rgba(212, 168, 67, 0.12);  /* Ambient glow for gold elements */

  /* Neutral text hierarchy */
  --text-primary:   #f0ead8;   /* Headings — warm white */
  --text-body:      #c8bfa8;   /* Body copy */
  --text-secondary: #8a8070;   /* Labels, secondary info */
  --text-muted:     #504840;   /* Disabled, placeholder */
  --text-inverse:   #090d14;   /* Text on gold buttons */

  /* Status colors — scoped to license lifecycle states */
  --status-active:      #3ea66e;   /* Active license — green */
  --status-active-bg:   rgba(62, 166, 110, 0.10);
  --status-inactive:    #5a7fa8;   /* Inactive — slate blue */
  --status-inactive-bg: rgba(90, 127, 168, 0.10);
  --status-suspended:   #d4842a;   /* Suspended — amber */
  --status-suspended-bg:rgba(212, 132, 42, 0.10);
  --status-terminated:  #b84040;   /* Terminated — red */
  --status-terminated-bg:rgba(184, 64, 64, 0.10);
  --status-expired:     #6e6058;   /* Expired — muted grey-brown */
  --status-expired-bg:  rgba(110, 96, 88, 0.10);

  /* Server / health status */
  --health-ok:      #3ea66e;
  --health-warn:    #d4a843;
  --health-error:   #b84040;
  --health-unknown: #5a7fa8;

  /* --- Spacing Scale (8px base grid) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* --- Typography Scale --- */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Letter spacing for display contexts */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 8px 28px rgba(0, 0, 0, 0.6);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 0 16px rgba(212, 168, 67, 0.18);
  --shadow-inset:inset 0 1px 3px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout --- */
  --sidebar-width:     240px;
  --topbar-height:     56px;
  --bottomnav-height:  64px;
  --content-max:       960px;
  --panel-max:         640px;

  /* --- Z-Index Stack --- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-topmost: 400;
}


/* =============================================================================
   SECTION 2: RESET & BASE
   Minimal reset. Preserves useful browser defaults.
   ============================================================================= */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;  /* Prevent font scaling on iOS rotation */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--navy-deepest);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height — correct on iOS */
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent long license keys or mono strings from breaking layout */
* {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Restore monospace elements to not break */
code, pre, .mono {
  word-break: normal;
  overflow-wrap: normal;
  overflow-x: auto;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--gold-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--gold-bright);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* Remove spinner arrows on number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* =============================================================================
   SECTION 3: TYPOGRAPHY SYSTEM
   Utility classes for all text treatments used across the app.
   ============================================================================= */

/* --- Display / Heading (Playfair Display) --- */

.type-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.type-display-md {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.type-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* --- Body / UI text (IBM Plex Sans) --- */

.type-heading {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.type-subheading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.type-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.type-muted {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* --- Mono (IBM Plex Mono) --- */

.type-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  color: var(--text-body);
}

.type-mono-key {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--gold-text);
}

/* --- Gold accent text --- */

.type-gold {
  color: var(--gold-text);
}

.type-accent {
  color: var(--gold-bright);
  font-weight: var(--weight-semibold);
}


/* =============================================================================
   SECTION 4: LAYOUT SHELL
   App-level layout — mobile: stacked (topbar + content + bottom nav)
   Desktop (≥768px): sidebar + main content
   ============================================================================= */

/* --- App wrapper --- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Authentication screen overlay --- */
#auth-screen {
  position: fixed;
  inset: 0;
  background: var(--navy-deepest);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--navy-mid);
  border: 1px solid var(--navy-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-xl);
  text-align: center;
}

.auth-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.auth-tagline {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.auth-gold-bar {
  width: 40px;
  height: 2px;
  background: var(--gold-bright);
  margin: 0 auto var(--space-7);
  border-radius: var(--radius-pill);
}

/* --- Top bar (mobile) --- */
#topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  height: var(--topbar-height);
  background: var(--navy-deep);
  border-bottom: 1px solid var(--navy-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  flex-shrink: 0;
}

.topbar-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.topbar-wordmark span {
  color: var(--gold-bright);
}

.topbar-project-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--navy-raised);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.topbar-project-selector:hover {
  border-color: var(--navy-divider);
}

.topbar-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
}

.topbar-project-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-project-chevron {
  color: var(--text-secondary);
  font-size: 10px;
}

/* --- Main content area --- */
#main-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(var(--bottomnav-height) + var(--space-4));
}

/* --- Bottom navigation (mobile) --- */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  height: var(--bottomnav-height);
  background: var(--navy-deep);
  border-top: 1px solid var(--navy-border);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch support */
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.nav-item:active {
  background: var(--navy-hover);
}

.nav-item.active {
  /* Active tab gold top border indicator */
}

.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--gold-bright);
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}

.nav-item-icon {
  font-size: 18px;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  line-height: 1;
}

.nav-item.active .nav-item-icon {
  color: var(--gold-bright);
}

.nav-item-label {
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-item.active .nav-item-label {
  color: var(--gold-text);
}

/* --- Sidebar hidden on mobile --- */
#sidebar {
  display: none;
}

/* --- Tab panels (content views) --- */
.tab-panel {
  display: none;
  padding: var(--space-5) var(--space-4);
  animation: fadeUp 200ms ease forwards;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.tab-panel.active {
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================================================
   MOBILE VISUAL POLISH (< 768px)
   Clean card aesthetic. Refined bottom nav. Readable typography.
   ============================================================================= */

/* Topbar — cleaner mobile header */
#topbar {
  background: var(--navy-deepest);
  border-bottom: 1px solid var(--navy-border);
  padding: 0 var(--space-5);
}

/* Main content — proper breathing room above bottom nav */
#main-content {
  background: var(--navy-deepest);
}

/* Cards — elevated surface with clear separation */
.license-card,
.client-card,
.onboarding-card {
  background: var(--navy-deep);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

.license-card:active,
.client-card:active {
  border-color: var(--navy-divider);
  background: var(--navy-hover);
}

/* Bottom nav — refined */
#bottom-nav {
  background: var(--navy-deepest);
  border-top: 1px solid var(--navy-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.nav-item.active::before {
  left: 25%;
  right: 25%;
}

/* SyncStrip — compact on mobile */
.sync-strip {
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  gap: var(--space-2);
}

.sync-strip-label {
  min-width: 70px;
  font-size: 11px;
}

/* Filter chips — horizontal scroll on mobile */
.filter-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

/* Settings sections — card-style on mobile */
.settings-section {
  background: var(--navy-deep);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* --- Desktop layout override (≥768px) --- */
@media (min-width: 768px) {

  #topbar {
    display: none; /* Desktop uses sidebar wordmark instead */
  }

  #bottom-nav {
    display: none;
  }

  #app {
    flex-direction: row;
  }

  /* Sidebar navigation */
  #sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: var(--navy-deep);
    border-right: 1px solid var(--navy-border);
    overflow-y: auto;
  }

  .sidebar-header {
    padding: var(--space-7) var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--navy-border);
    flex-shrink: 0;
  }

  .sidebar-wordmark {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
  }

  .sidebar-wordmark span {
    color: var(--gold-bright);
  }

  .sidebar-tagline {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: var(--space-1);
  }

  .sidebar-project {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--navy-border);
    flex-shrink: 0;
  }

  .sidebar-nav {
    flex: 1;
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar-nav-item:hover {
    background: var(--navy-hover);
  }

  .sidebar-nav-item.active {
    background: var(--gold-faint);
    border: 1px solid rgba(212, 168, 67, 0.15);
  }

  .sidebar-nav-item .nav-icon {
    font-size: 16px;
    color: var(--text-secondary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
  }

  .sidebar-nav-item.active .nav-icon,
  .sidebar-nav-item:hover .nav-icon {
    color: var(--gold-text);
  }

  .sidebar-nav-item .nav-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    transition: color var(--transition-fast);
  }

  .sidebar-nav-item.active .nav-label {
    color: var(--gold-text);
    font-weight: var(--weight-semibold);
  }

  .sidebar-nav-item:hover .nav-label {
    color: var(--text-body);
  }

  .sidebar-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--navy-border);
    flex-shrink: 0;
  }

  #main-content {
    flex: 1;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding-bottom: var(--space-7);
  }

  .tab-panel {
    padding: var(--space-7) var(--space-8);
    max-width: var(--content-max);
  }
}


/* =============================================================================
   SECTION 5: PAGE HEADER COMPONENT
   Used at the top of each tab panel to title the section.
   ============================================================================= */

.page-header {
  margin-bottom: var(--space-6);
}

.page-header-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-2);
}

.page-header-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.page-header-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}


/* =============================================================================
   SECTION 6: CARD COMPONENT
   Base surface for all content blocks, panels, and data displays.
   ============================================================================= */

.card {
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--navy-border);
}

.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.card-subtitle {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.card-body {
  padding: var(--space-5);
}

.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--navy-border);
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Card variant: raised (modal / popover surfaces) */
.card--raised {
  background: var(--navy-raised);
  border-color: var(--navy-divider);
  box-shadow: var(--shadow-lg);
}

/* Card variant: gold accent (featured / alert cards) */
.card--gold {
  border-color: rgba(212, 168, 67, 0.25);
  background: linear-gradient(
    135deg,
    var(--navy-mid) 0%,
    rgba(42, 31, 8, 0.4) 100%
  );
}

/* Card variant: flat (no border, flush with background) */
.card--flat {
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Card variant: compact spacing */
.card--compact .card-body {
  padding: var(--space-3) var(--space-4);
}

.card--compact .card-header {
  padding: var(--space-3) var(--space-4);
}

/* Stacked cards (grid) */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =============================================================================
   SECTION 7: BUTTON SYSTEM
   All interactive buttons. Never use raw <button> styling outside this section.
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  user-select: none;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary: gold fill — main CTAs (Generate, Save, Activate) */
.btn-primary {
  background: var(--gold-bright);
  color: var(--text-inverse);
  border-color: var(--gold-bright);
}

.btn-primary:hover {
  background: var(--gold-mid);
  border-color: var(--gold-mid);
  box-shadow: var(--shadow-gold);
}

/* Secondary: ghost with gold border — secondary actions */
.btn-secondary {
  background: transparent;
  color: var(--gold-text);
  border-color: rgba(212, 168, 67, 0.35);
}

.btn-secondary:hover {
  background: var(--gold-faint);
  border-color: var(--gold-bright);
}

/* Ghost: subtle — tertiary / row actions */
.btn-ghost {
  background: transparent;
  color: var(--text-body);
  border-color: var(--navy-border);
}

.btn-ghost:hover {
  background: var(--navy-hover);
  border-color: var(--navy-divider);
  color: var(--text-primary);
}

/* Danger: destructive actions (Suspend, Terminate, Delete) */
.btn-danger {
  background: transparent;
  color: var(--status-terminated);
  border-color: rgba(184, 64, 64, 0.35);
}

.btn-danger:hover {
  background: rgba(184, 64, 64, 0.08);
  border-color: var(--status-terminated);
}

/* Danger solid: final confirm of destructive action */
.btn-danger-solid {
  background: var(--status-terminated);
  color: #fff;
  border-color: var(--status-terminated);
}

.btn-danger-solid:hover {
  background: #9a3030;
}

/* --- Size modifiers --- */
.btn-sm {
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-base);
}

.btn-full {
  width: 100%;
}

/* Icon-only button (square) */
.btn-icon {
  padding: 8px;
  border-radius: var(--radius-md);
}

/* Button with loading state */
.btn.loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =============================================================================
   SECTION 8: FORM ELEMENTS
   Inputs, selects, textareas, toggles, checkboxes.
   ============================================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group + .form-group {
  margin-top: var(--space-5);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-label.required::after {
  content: ' *';
  color: var(--gold-text);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--status-terminated);
}

/* --- Input / Textarea / Select base --- */
.input,
.textarea,
.select {
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: 10px var(--space-4);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--gold-mid);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.12);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input.input--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

/* Select with custom chevron */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: '▾';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
  font-size: 12px;
}

/* Input with inline prefix (e.g. key prefix label) */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group-prefix {
  background: var(--navy-raised);
  border: 1px solid var(--navy-border);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 10px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.input-group .input {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --- Toggle switch --- */
.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--navy-raised);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toggle input:checked ~ .toggle-track {
  background: var(--gold-muted);
  border-color: var(--gold-mid);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition-spring), background var(--transition-fast);
  pointer-events: none;
}

.toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: var(--gold-bright);
}

.toggle-label {
  font-size: var(--text-sm);
  color: var(--text-body);
}

/* --- Checkbox --- */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  background: var(--navy-deep);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.checkbox.checked {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

.checkbox.checked::after {
  content: '✓';
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* --- Copy-to-clipboard input (read-only, with copy button) --- */
.input-copy-group {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.input-copy-group .input {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
  background: var(--navy-raised);
  color: var(--gold-text);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  flex: 1;
  min-width: 0;
}

.input-copy-btn {
  background: var(--navy-raised);
  border: 1px solid var(--navy-border);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.input-copy-btn:hover {
  color: var(--gold-text);
  background: var(--navy-hover);
}

.input-copy-btn.copied {
  color: var(--status-active);
}


/* =============================================================================
   SECTION 9: BADGE / STATUS PILL SYSTEM
   License lifecycle states + server health indicators.
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* License states */
.badge--active {
  background: var(--status-active-bg);
  color: var(--status-active);
}
.badge--active::before { background: var(--status-active); }

.badge--inactive {
  background: var(--status-inactive-bg);
  color: var(--status-inactive);
}
.badge--inactive::before { background: var(--status-inactive); }

.badge--suspended {
  background: var(--status-suspended-bg);
  color: var(--status-suspended);
}
.badge--suspended::before { background: var(--status-suspended); }

.badge--terminated {
  background: var(--status-terminated-bg);
  color: var(--status-terminated);
}
.badge--terminated::before { background: var(--status-terminated); }

.badge--expired {
  background: var(--status-expired-bg);
  color: var(--status-expired);
}
.badge--expired::before { background: var(--status-expired); }

/* Tier badges (no dot) */
.badge--tier {
  background: var(--gold-faint);
  color: var(--gold-text);
  border: 1px solid rgba(212, 168, 67, 0.2);
}
.badge--tier::before { display: none; }

/* Health indicators */
.badge--ok      { background: var(--status-active-bg);    color: var(--health-ok);      }
.badge--warn    { background: var(--status-suspended-bg); color: var(--health-warn);     }
.badge--error   { background: var(--status-terminated-bg);color: var(--health-error);    }
.badge--unknown { background: var(--status-inactive-bg);  color: var(--health-unknown);  }

.badge--ok::before      { background: var(--health-ok);      animation: pulse 2s infinite; }
.badge--warn::before    { background: var(--health-warn);    animation: pulse 1.5s infinite; }
.badge--error::before   { background: var(--health-error);   animation: pulse 1s infinite; }
.badge--unknown::before { background: var(--health-unknown); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}


/* =============================================================================
   SECTION 10: LICENSE KEY LIST / TABLE
   Tab 1 — Licenses. Displays key rows with actions.
   Mobile: card list. Desktop: table.
   ============================================================================= */

/* --- Mobile card list --- */
.license-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.license-card {
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-fast);
  cursor: pointer;
}

.license-card:hover {
  border-color: var(--navy-divider);
}

.license-card.active-state {
  border-left: 3px solid var(--status-active);
}

.license-card.suspended-state {
  border-left: 3px solid var(--status-suspended);
}

.license-card.terminated-state {
  border-left: 3px solid var(--status-terminated);
  opacity: 0.6;
}

.license-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.license-client-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.license-client-email {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.license-key-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold-text);
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--navy-deep);
  border-radius: var(--radius-sm);
  display: inline-block;
}

.license-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--navy-border);
}

.license-meta-item {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.license-meta-item strong {
  color: var(--text-body);
  font-weight: var(--weight-medium);
}

.license-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- Desktop table --- */
@media (min-width: 768px) {

  .license-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--navy-border);
    border-radius: var(--radius-lg);
  }

  .license-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .license-table thead th {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
    background: var(--navy-deep);
    text-align: left;
    border-bottom: 1px solid var(--navy-border);
    white-space: nowrap;
  }

  .license-table tbody tr {
    border-bottom: 1px solid var(--navy-border);
    transition: background var(--transition-fast);
    cursor: pointer;
  }

  .license-table tbody tr:last-child {
    border-bottom: none;
  }

  .license-table tbody tr:hover {
    background: var(--navy-hover);
  }

  .license-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    color: var(--text-body);
  }

  .license-table td:first-child {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }

  .license-table .col-key {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--gold-text);
    letter-spacing: 0.04em;
  }

  .license-table .col-actions {
    text-align: right;
    white-space: nowrap;
  }
}


/* =============================================================================
   SECTION 11: STAT / METRIC TILE
   Used on dashboards, Server Health tab, quota displays.
   ============================================================================= */

.stat-tile {
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-tile-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.stat-tile-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.stat-tile-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.stat-tile--gold .stat-tile-value {
  color: var(--gold-text);
}

.stat-tile--active .stat-tile-value {
  color: var(--status-active);
}

.stat-tile--warn .stat-tile-value {
  color: var(--status-suspended);
}

.stat-tile--error .stat-tile-value {
  color: var(--status-terminated);
}

/* Stat tile grid */
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stat-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =============================================================================
   SECTION 12: PROGRESS / QUOTA BAR
   Used for Apps Script quota display, seat usage.
   ============================================================================= */

.progress-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.progress-bar-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

.progress-bar-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-body);
}

.progress-track {
  height: 4px;
  background: var(--navy-raised);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--gold-bright);
  transition: width var(--transition-slow);
}

.progress-fill--ok   { background: var(--status-active); }
.progress-fill--warn { background: var(--status-suspended); }
.progress-fill--crit { background: var(--status-terminated); }


/* =============================================================================
   SECTION 13: ONBOARDING CHECKLIST
   Tab 3 — 7-step client onboarding tracker.
   ============================================================================= */

.onboarding-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--navy-border);
  position: relative;
}

.onboarding-step:last-child {
  border-bottom: none;
}

/* Connecting line between steps */
.onboarding-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 44px;
  bottom: -1px;
  width: 2px;
  background: var(--navy-border);
}

.onboarding-step.completed::after {
  background: var(--status-active);
  opacity: 0.4;
}

.onboarding-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy-raised);
  border: 2px solid var(--navy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-base);
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.onboarding-step.completed .onboarding-step-icon {
  background: var(--status-active-bg);
  border-color: var(--status-active);
  color: var(--status-active);
}

.onboarding-step.active .onboarding-step-icon {
  background: var(--gold-faint);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.12);
}

.onboarding-step-body {
  flex: 1;
  min-width: 0;
}

.onboarding-step-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.onboarding-step.completed .onboarding-step-title {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.onboarding-step-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: var(--leading-relaxed);
}

.onboarding-step-timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}


/* =============================================================================
   SECTION 14: ACTIVITY LOG
   Tab 6 — Audit log of all CC actions.
   ============================================================================= */

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--navy-border);
}

.activity-entry:last-child {
  border-bottom: none;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  margin-top: 5px;
}

.activity-dot--gold     { background: var(--gold-bright); }
.activity-dot--green    { background: var(--status-active); }
.activity-dot--amber    { background: var(--status-suspended); }
.activity-dot--red      { background: var(--status-terminated); }
.activity-dot--blue     { background: var(--status-inactive); }

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--leading-snug);
}

.activity-text strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.activity-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.activity-filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.filter-chip {
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--navy-divider);
  color: var(--text-body);
}

.filter-chip.active {
  background: var(--gold-faint);
  border-color: rgba(212, 168, 67, 0.3);
  color: var(--gold-text);
}


/* =============================================================================
   SECTION 15: MODAL SYSTEM
   Full-screen overlay modals for key actions, confirmations, detail views.
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 13, 20, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--navy-raised);
  border: 1px solid var(--navy-divider);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg);
  width: 100%;
  max-width: var(--panel-max);
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: translateY(24px);
  transition: transform var(--transition-slow);
}

.modal-overlay.open .modal {
  transform: translateY(0);
}

/* Pull handle bar (mobile sheet style) */
.modal-handle {
  width: 36px;
  height: 4px;
  background: var(--navy-border);
  border-radius: var(--radius-pill);
  margin: var(--space-3) auto var(--space-2);
  flex-shrink: 0;
}

.modal-header {
  padding: var(--space-2) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--navy-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--navy-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--navy-divider);
  color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--navy-border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Desktop: center-positioned modal (not bottom sheet) */
@media (min-width: 768px) {

  .modal-overlay {
    align-items: center;
  }

  .modal {
    border-radius: var(--radius-xl);
    max-height: 80vh;
  }

  .modal-handle {
    display: none;
  }
}


/* =============================================================================
   SECTION 16: TOAST / NOTIFICATION SYSTEM
   Brief feedback messages. Auto-dismiss after 3s.
   ============================================================================= */

#toast-container {
  position: fixed;
  bottom: calc(var(--bottomnav-height) + var(--space-4));
  left: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
}

@media (min-width: 768px) {
  #toast-container {
    bottom: var(--space-6);
    left: auto;
    right: var(--space-6);
    width: 320px;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--navy-raised);
  border: 1px solid var(--navy-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text-body);
  pointer-events: auto;
  animation: toastIn 250ms var(--transition-spring) forwards;
}

.toast.dismissing {
  animation: toastOut 200ms ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.toast--success { border-left: 3px solid var(--status-active);    }
.toast--warn    { border-left: 3px solid var(--status-suspended);  }
.toast--error   { border-left: 3px solid var(--status-terminated); }
.toast--info    { border-left: 3px solid var(--status-inactive);   }


/* =============================================================================
   SECTION 17: SEARCH / FILTER BAR
   Used above license list, client directory, activity log.
   ============================================================================= */

.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.search-input-wrapper {
  flex: 1;
  min-width: 180px;
  position: relative;
}

.search-input-wrapper .input {
  padding-left: var(--space-8);
}

.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* Result count */
.search-result-count {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}


/* =============================================================================
   SECTION 18: SERVER HEALTH PANEL
   Tab 5 — Endpoint monitoring, fingerprint alerts, bookmarks, maintenance log.
   ============================================================================= */

/* Endpoint status card */
.endpoint-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--navy-mid);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.endpoint-status-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.endpoint-status-icon--ok      { background: var(--status-active-bg);     }
.endpoint-status-icon--warn    { background: var(--status-suspended-bg);   }
.endpoint-status-icon--error   { background: var(--status-terminated-bg);  }

.endpoint-status-info {
  flex: 1;
  min-width: 0;
}

.endpoint-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fingerprint alert rows */
.fp-alert-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--navy-border);
}

.fp-alert-row:last-child {
  border-bottom: none;
}

.fp-machine-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bookmark link rows */
.bookmark-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--navy-border);
  text-decoration: none;
  transition: background var(--transition-fast);
  margin: 0 calc(-1 * var(--space-5));
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.bookmark-row:last-child {
  border-bottom: none;
}

.bookmark-row:hover {
  background: var(--navy-hover);
}

.bookmark-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-body);
  font-weight: var(--weight-medium);
}

.bookmark-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Maintenance log */
.maint-entry {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--navy-border);
}

.maint-entry:last-child {
  border-bottom: none;
}

.maint-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.maint-entry-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.maint-entry-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.maint-entry-notes {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}


/* =============================================================================
   SECTION 19: SETTINGS SECTIONS
   Tab 7 — Grouped settings with section headers and dividers.
   ============================================================================= */

.settings-section {
  margin-bottom: var(--space-7);
}

.settings-section-header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--navy-border);
}

.settings-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.settings-section-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--navy-border);
  flex-wrap: wrap;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}

.settings-row-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: var(--leading-relaxed);
}

.settings-row-control {
  flex-shrink: 0;
}


/* =============================================================================
   SECTION 20: PROJECT SELECTOR DROPDOWN
   Appears when tapping the project chip in topbar.
   ============================================================================= */

.project-dropdown {
  position: absolute;
  top: calc(var(--topbar-height) + var(--space-2));
  left: var(--space-4);
  right: var(--space-4);
  background: var(--navy-raised);
  border: 1px solid var(--navy-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-overlay);
  overflow: hidden;
  max-width: 320px;

  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.project-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.project-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--navy-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.project-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.project-option:hover {
  background: var(--navy-hover);
}

.project-option.selected {
  background: var(--gold-faint);
}

.project-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
}

.project-option-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}

.project-option-prefix {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.project-option-add {
  border-top: 1px solid var(--navy-border);
  color: var(--gold-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.project-option-add:hover {
  background: var(--gold-faint);
}


/* =============================================================================
   SECTION 21: EMPTY STATES
   Shown when a list has no data.
   ============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  gap: var(--space-3);
}

.empty-state-icon {
  font-size: 36px;
  color: var(--text-muted);
  line-height: 1;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-tight);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 280px;
  line-height: var(--leading-relaxed);
}


/* =============================================================================
   SECTION 22: DIVIDER, SPACER, UTILITY CLASSES
   ============================================================================= */

.divider {
  height: 1px;
  background: var(--navy-border);
  margin: var(--space-5) 0;
}

.divider--gold {
  background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
}

/* Vertical spacers */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Flex utilities */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Text utilities */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visibility */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Scroll containers */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar (webkit) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--navy-divider);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Danger zone box (used in Settings > Data) */
.danger-zone {
  border: 1px solid rgba(184, 64, 64, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: rgba(184, 64, 64, 0.04);
}

.danger-zone-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--status-terminated);
  margin-bottom: var(--space-2);
}

.danger-zone-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Session info strip (in Settings or auth context) */
.session-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-deep);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.session-strip-time {
  font-family: var(--font-mono);
  color: var(--text-body);
}


/* =============================================================================
   SECTION 23: SYNC STATUS STRIP (V2)
   Persistent indicator below topbar — device + last push age.
   Pull banner appears below it when cloud snapshot is newer.
   ============================================================================= */

.sync-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--navy-border);
  background: var(--navy-deep);
  transition: background var(--transition-base);
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.sync-strip--ok {
  background: var(--navy-deep);
  border-bottom-color: var(--navy-border);
}

.sync-strip--warn {
  background: rgba(212, 132, 42, 0.06);
  border-bottom-color: rgba(212, 132, 42, 0.25);
}

.sync-strip-label {
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  min-width: 80px;
}

.sync-strip-status {
  color: var(--text-body);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-strip--warn .sync-strip-status {
  color: var(--status-suspended);
}

.sync-strip-btn {
  flex-shrink: 0;
}

/* Pull banner — appears below sync strip when newer snapshot detected */
.pull-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  background: rgba(90, 127, 168, 0.10);
  border-bottom: 1px solid rgba(90, 127, 168, 0.25);
  flex-wrap: wrap;
}

.pull-banner-text {
  flex: 1;
  color: var(--text-body);
}

/* Extra-small button variant for strips */
.btn-xs {
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}