/* ═══════════════════════════════════════════════════════════════════════════════ */
/* APS Marketplace Intelligence — Design System Tokens                             */
/* Brand source: airplane.solutions  |  Logo SVG: aps_logo.svg                    */
/* ═══════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ────────────────────────────────────────────────────
     BRAND COLORS
  ──────────────────────────────────────────────────── */
  --aps-blue:          #0487c8;   /* Primary — from aps_logo.svg */
  --aps-blue-hover:    #0569a0;   /* Hover / pressed */
  --aps-blue-light:    #e8f4fd;   /* Tinted background */
  --aps-blue-mid:      #b3d9f0;   /* Border / dividers on blue bg */
  --aps-navy:          #06111e;   /* AppBar / Drawer / dark surfaces */
  --aps-navy-mid:      #0b1c2f;   /* Slightly lighter dark surface */
  --aps-text:          #292929;   /* Body text — from aps_logo.svg */

  /* ────────────────────────────────────────────────────
     NEUTRAL SCALE
  ──────────────────────────────────────────────────── */
  --neutral-0:    #ffffff;
  --neutral-50:   #f8fafc;
  --neutral-100:  #f3f5f8;
  --neutral-200:  #e8ecf0;
  --neutral-300:  #d1d9e0;
  --neutral-400:  #9ba8b4;
  --neutral-500:  #6e7681;
  --neutral-700:  #3d4a56;
  --neutral-900:  #1a2332;

  /* ────────────────────────────────────────────────────
     SEMANTIC COLORS
  ──────────────────────────────────────────────────── */
  --color-success:     #107c10;
  --color-success-bg:  #f0faf0;
  --color-warning:     #c75a00;
  --color-warning-bg:  #fff4e5;
  --color-error:       #d13438;
  --color-error-bg:    #fef0f0;
  --color-info:        #0487c8;
  --color-info-bg:     #e8f4fd;
  --color-purple:      #7c3aed;
  --color-purple-bg:   #f5f3ff;

  /* ────────────────────────────────────────────────────
     ALIAS TOKENS (legacy compat + MudBlazor overrides)
  ──────────────────────────────────────────────────── */
  --primary:      var(--aps-blue);
  --primary-dark: var(--aps-blue-hover);
  --sidebar:      var(--aps-navy);
  --text:         var(--aps-text);
  --muted:        var(--neutral-500);
  --border:       var(--neutral-200);
  --bg:           var(--neutral-100);
  --surface:      var(--neutral-0);
  --danger:       var(--color-error);
  --warn:         var(--color-warning);
  --ok:           var(--color-success);
  --purple:       var(--color-purple);

  /* ────────────────────────────────────────────────────
     TYPOGRAPHY
  ──────────────────────────────────────────────────── */
  --font-family:      'Outfit', system-ui, -apple-system, sans-serif;
  --font-size-xs:     11px;
  --font-size-sm:     12px;
  --font-size-base:   13px;
  --font-size-md:     14px;
  --font-size-lg:     16px;
  --font-size-xl:     18px;
  --font-size-2xl:    22px;
  --font-size-3xl:    28px;

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

  --line-height-tight:  1.25;
  --line-height-base:   1.5;
  --line-height-relaxed: 1.75;

  /* ────────────────────────────────────────────────────
     SPACING  (base 4 px)
  ──────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ────────────────────────────────────────────────────
     BORDER RADIUS
  ──────────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────────────────
     ELEVATION / SHADOWS
  ──────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px  rgba(6,17,30,0.06);
  --shadow-sm:  0 1px 4px  rgba(6,17,30,0.09);
  --shadow-md:  0 4px 12px rgba(6,17,30,0.12);
  --shadow-lg:  0 8px 24px rgba(6,17,30,0.16);
  --shadow-xl:  0 16px 40px rgba(6,17,30,0.20);

  /* ────────────────────────────────────────────────────
     TRANSITIONS
  ──────────────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   320ms ease;

  /* ────────────────────────────────────────────────────
     Z-INDEX SCALE
  ──────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ── Global Adjustments ── */
body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: var(--text);
}

/* ── MudContainer Compact ── */
.mud-container {
  padding: 0 !important;
}

/* ── MudPaper Borders ── */
.mud-paper {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.mud-paper.mud-paper-elevation-1 {
  box-shadow: none !important;
}

/* ── MudTable Styling ── */
.mud-table {
  font-size: 12px !important;
}

.mud-table-head {
  background: var(--bg) !important;
}

.mud-table-head th {
  background: var(--bg) !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

.mud-table-body td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}

.mud-table tbody tr:hover td {
  background: #f8fafc !important;
}

/* ── MudText Adjustments ── */
.mud-typography-h5 {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.mud-typography-subtitle1 {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.mud-typography-body2 {
  font-size: 12px !important;
}

.mud-typography-caption {
  font-size: 11px !important;
  color: var(--muted) !important;
}

/* ── MudTabs Compact ── */
.mud-tabs {
  margin-bottom: 16px !important;
}

.mud-tab {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  min-height: auto !important;
  text-transform: none !important;
}

.mud-tab.mud-tab-active {
  border-bottom: 3px solid var(--primary) !important;
}

.mud-tabs-panels {
  padding: 0 !important;
}

/* ── MudSelect Compact ── */
.mud-input-control {
  margin: 0 !important;
}

.mud-input-slot {
  padding: 6px 8px !important;
}

.mud-input-label {
  font-size: 12px !important;
}

.mud-input {
  font-size: 12px !important;
}

/* ── MudGrid Compact ── */
.mud-grid {
  margin: 0 !important;
}

.mud-grid-item {
  padding: 8px !important;
}

/* ── Toolbar Content ── */
.mud-table-toolbar {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  gap: 12px !important;
}

.mud-table-toolbar button,
.mud-table-toolbar > div > button {
  padding: 4px 12px !important;
  font-size: 12px !important;
  height: 32px !important;
}

/* ── MudButton Compact ── */
.mud-button-root {
  text-transform: none !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
}

.mud-button-text .mud-button-label {
  font-size: 12px !important;
}

/* ── MudChip Styling ── */
.mud-chip {
  font-size: 11px !important;
  padding: 2px 8px !important;
  height: auto !important;
  border-radius: 4px !important;
}

/* ── KPI Cards (MudPaper) ── */
.kpi-card {
  border-top: 3px solid var(--primary) !important;
  padding: 16px !important;
}

.kpi-label {
  font-size: 11px !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}

.kpi-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.kpi-sub {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

/* ── Badges ── */
.mud-chip.mud-chip-color-primary {
  background: #eff6ff !important;
  color: var(--primary) !important;
}

.mud-chip.mud-chip-color-success {
  background: #f0faf0 !important;
  color: var(--ok) !important;
}

.mud-chip.mud-chip-color-warning {
  background: #fff4e5 !important;
  color: var(--warn) !important;
}

.mud-chip.mud-chip-color-secondary {
  background: #f5f3ff !important;
  color: var(--purple) !important;
}

/* ── Alert Cards ── */
.mud-alert {
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.mud-alert.mud-alert-standard-error {
  background: #fef0f0 !important;
  border-left: 3px solid var(--danger) !important;
}

.mud-alert.mud-alert-standard-warning {
  background: #fff4e5 !important;
  border-left: 3px solid var(--warn) !important;
}

/* ── MudTextField Compact ── */
.mud-textfield {
  margin: 0 !important;
}

.mud-textfield-variant-outlined .mud-input-outlined {
  padding: 6px 8px !important;
  font-size: 12px !important;
}

.mud-textfield-variant-outlined.mud-textfield-dense {
  margin: 0 !important;
}

/* ── Drawer (Sidebar) ── */
.mud-drawer {
  background: var(--sidebar) !important;
}

.mud-drawer-content {
  padding: 0 !important;
}

.mud-nav-menu {
  padding: 8px 8px !important;
}

.mud-nav-item {
  padding: 8px 10px !important;
  font-size: 13px !important;
  margin-bottom: 2px !important;
}

/* ── AppBar (Topbar) ── */
.mud-appbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

.mud-appbar-dense {
  height: 48px !important;
}

/* ── Matrix Table Override ── */
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.matrix-table thead th {
  background: var(--sidebar) !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 8px 12px !important;
  text-align: right;
  border: none !important;
}

.matrix-table thead th:first-child,
.matrix-table thead th:nth-child(2) {
  text-align: left !important;
}

.matrix-table tbody td {
  padding: 8px 12px !important;
  text-align: right;
  border-bottom: 1px solid var(--border) !important;
}

.matrix-table tbody td:first-child {
  text-align: left !important;
  font-weight: 500;
}

.matrix-table tbody td:nth-child(2) {
  text-align: left !important;
}

.matrix-header-row td {
  background: var(--sidebar) !important;
  color: #ffffff !important;
  font-weight: 700;
  text-align: left !important;
}

.matrix-subtotal-row td {
  background: #eef2f7 !important;
  font-weight: 700 !important;
  border-top: 1px solid #c8d0db !important;
}

.matrix-total-row td {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.matrix-zero {
  color: #dde0e5;
}

.matrix-total-col {
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}

/* ── Spacing Utilities ── */
.mud-pa-6 {
  padding: 20px !important;
}

.mud-mb-4 {
  margin-bottom: 16px !important;
}

.mud-ml-2 {
  margin-left: 8px !important;
}

/* ── Loading Indicator ── */
.mud-progress-circular {
  margin: 16px auto !important;
}

/* ── Focus States ── */
.mud-input-outlined .mud-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(4, 135, 200, 0.15) !important;
}

/* ── Print Optimization ── */
@media print {
  .mud-table-toolbar {
    display: none !important;
  }

  .mud-drawer {
    display: none !important;
  }
}