/* ==============================================================================
   FieldEye HQ — Sequence Emerald & Deep Teal Design System
   ============================================================================== */

:root {
  /* Page Canvas & Card Surfaces */
  --bg-page: #F4F6F8;            /* Sequence Light Page Canvas */
  --surface-card: #FFFFFF;       /* Crisp White Container Cards */
  --surface-hover: #F8FAF9;     /* Soft Mint Grey Row Hover */
  --sidebar-light: #F7F9FA;      /* Sequence Light Sidebar Canvas */

  /* Hairline Borders */
  --border-subtle: #E8ECEB;      /* Soft Card Border */
  --border-light: #DFE4E2;       /* Input & Table Border */

  /* FieldEye Emerald & Deep Teal Palette */
  --primary-teal: #0B4F46;       /* Deep Emerald Teal Header & Hero */
  --primary-teal-hover: #073B34;
  --accent-emerald: #00A86B;     /* Primary Emerald Green CTA */
  --accent-mint: #00E676;        /* Neon Mint Accent */

  /* Sequence Soft Light Badges */
  --badge-success-bg: #E6F9F3;   /* Active - Soft Mint Green */
  --badge-success-text: #00A86B;

  --badge-primary-bg: #EBF7F5;   /* Trial - Soft Teal */
  --badge-primary-text: #0B4F46;

  --badge-danger-bg: #FFF1F2;    /* Suspended - Soft Crimson */
  --badge-danger-text: #E11D48;

  --badge-warning-bg: #FFFBEB;   /* Expiring Soon - Soft Amber */
  --badge-warning-text: #D97706;

  /* Typography Scale */
  --font-sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --text-dark: #0F172A;
  --text-muted: #64748B;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Glassmorphism & Clean Surface Cards */
.fe-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.fe-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* Primary Sequence Emerald Button */
.btn-emerald {
  background-color: var(--accent-emerald);
  color: #ffffff;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 168, 107, 0.2);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-emerald:hover {
  background-color: #008f5a;
  box-shadow: 0 6px 16px rgba(0, 168, 107, 0.3);
  transform: translateY(-1px);
}

/* Deep Teal Hero Banner Button */
.btn-teal {
  background-color: var(--primary-teal);
  color: #ffffff;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-teal:hover {
  background-color: var(--primary-teal-hover);
}

/* Sequence Soft Light Status Pill Badges */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-soft-success {
  background-color: var(--badge-success-bg);
  color: var(--badge-success-text);
}

.badge-soft-primary {
  background-color: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

.badge-soft-danger {
  background-color: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}

.badge-soft-warning {
  background-color: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}

/* License Capacity Progress Bar */
.progress-channel {
  width: 100%;
  height: 6px;
  background-color: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--accent-emerald);
  border-radius: 3px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}