/* ─────────────────────────────────────────────────────────────
   fos-skin.css — MudBlazor visual overrides
   Loaded AFTER MudBlazor.min.css. Re-shapes Mud components to
   match the FosPlanner design system without forking the lib.
   Reference from App.razor / _Host.cshtml:
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="css/fos-skin.css" rel="stylesheet" />
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons&family=Material+Icons+Round');
@import url('./tokens-fosplanner.css');

/* ── App canvas ─────────────────────────────────────────── */
html, body {
  background: var(--bg-app) !important;
  font-family: var(--font-sans) !important;
  color: var(--fg-primary) !important;
}

/* ── MudPaper / MudCard → 14px radius + soft double-shadow ── */
.mud-paper {
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-hairline);
}
.mud-paper.mud-elevation-0 { box-shadow: none !important; border: 1px solid var(--border-hairline); }
.mud-paper.mud-elevation-8,
.mud-paper.mud-elevation-12,
.mud-paper.mud-elevation-16,
.mud-paper.mud-elevation-24 { box-shadow: var(--shadow-modal) !important; border-radius: var(--radius-3xl) !important; }

/* ── MudButton → sentence case + 8px radius + 38px medium ── */
.mud-button-root {
  text-transform: none !important;
  letter-spacing: var(--tracking-button) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--weight-semibold) !important;
}
.mud-button-root.mud-button-filled { box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 33%, transparent) !important; }
.mud-button-root.mud-button-filled:hover { box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 38%, transparent) !important; }

/* Sizes — match our 32 / 38 / 44 height scale */
.mud-button-root.mud-button-medium { height: 38px; padding: 0 16px; }
.mud-button-root.mud-button-small  { height: 32px; padding: 0 12px; font-size: 12px !important; }
.mud-button-root.mud-button-large  { height: 44px; padding: 0 18px; }

/* MudButtonGroup — only outer buttons get radius, inner buttons are square */
.mud-button-group .mud-button-root {
  border-radius: 0 !important;
}
.mud-button-group .mud-button-root:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.mud-button-group .mud-button-root:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
.mud-button-group .mud-button-root:first-child:last-child {
  border-radius: var(--radius-md) !important;
}

/* Tonal — use Filled + Color.Inherit then add .fos-tonal */
.mud-button-root.fos-tonal {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.mud-button-root.fos-tonal:hover { background: var(--primary-edge) !important; }

/* Ghost — Outlined */
.mud-button-root.mud-button-outlined {
  background: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-primary) !important;
  box-shadow: none !important;
}

/* ── MudChip → status pill (small / medium heights, paired tint) ── */
.mud-chip {
  border-radius: var(--radius-pill) !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 11px !important;
  height: 24px !important;
  padding: 0 8px !important;
}
.mud-chip-size-small { height: 20px !important; font-size: 10px !important; padding: 0 8px !important; }

/* Status chip helpers — pair with MudChip Color="Color.Inherit" Style="…" or use these classes */
.fos-chip-success { background: var(--success-bg) !important; color: var(--success) !important; }
.fos-chip-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.fos-chip-danger  { background: var(--danger-bg)  !important; color: var(--danger)  !important; }
.fos-chip-info    { background: var(--info-bg)    !important; color: var(--info)    !important; }
.fos-chip-neutral { background: var(--neutral-bg) !important; color: var(--neutral) !important; }

/* Station chips: render inline at call sites using Station.Color
   (e.g. Style="background:{color}22;color:{color}") — no global rules. */

/* ── MudAppBar → 76px height + warm-white bottom border ── */
.mud-appbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.mud-appbar.mud-appbar-dense { height: 56px !important; }

/* ── MudDrawer → 232px + hairline border instead of shadow ── */
.mud-drawer {
  box-shadow: none !important;
  border-right: 1px solid var(--border-hairline) !important;
}

/* ── MudNavMenu items → pill highlight + primary tint when active ── */
.mud-nav-item .mud-nav-link {
  border-radius: var(--radius-md) !important;
  margin: 2px 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}
.mud-nav-item .mud-nav-link.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-weight: var(--weight-semibold);
}

/* ── MudTable / MudDataGrid → hairline rows + warm header ── */
.mud-table thead .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell {
  background: var(--bg-muted) !important;
  color: var(--fg-tertiary) !important;
  font-size: 10px !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.mud-table tbody .mud-table-cell,
.mud-data-grid .mud-table-body .mud-table-cell {
  border-bottom: 1px solid var(--border-hairline) !important;
}

/* ── MudTextField / MudInput → 9px radius + warm fill ── */
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-lg) !important; }
.mud-input-filled { background: var(--bg-warm) !important; border-radius: var(--radius-lg) !important; }

/* ── MudDialog → 18px shell radius + soft modal shadow ── */
.mud-dialog { border-radius: var(--radius-3xl) !important; box-shadow: var(--shadow-modal) !important; }

/* ── MudAvatar → keep round but allow our station colors ── */
.mud-avatar { font-weight: var(--weight-semibold); letter-spacing: -0.5px; }

/* ── Section label → reusable .t-section-label already in tokens ── */

/* ── Motif utility classes (consumed by FosX kit components) ── */

/* Signature tinted icon tile. Background/color come inline from the component. */
.fos-icon-tile { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:8px; }
.fos-icon-tile--sm { width:24px; height:24px; border-radius:6px; }
.fos-icon-tile--md { width:30px; height:30px; border-radius:8px; }
.fos-icon-tile--lg { width:36px; height:36px; border-radius:9px; }

/* 4px station-color left accent for rows/cards. Background comes inline. */
.fos-station-accent { width:4px; align-self:stretch; border-radius:2px; flex-shrink:0; }

/* Page scaffolding. */
.fos-page { padding:22px 28px 36px; }
.fos-page-stack { display:flex; flex-direction:column; gap:18px; }

/* ── Compact segmented control (skins MudToggleGroup via .fos-segmented) ── */
.fos-segmented.mud-toggle-group {
  display:inline-grid !important;           /* Mud uses display:grid — inline-grid keeps content-width */
  grid-auto-flow: column;                   /* items flow horizontally next to each other */
  grid-auto-columns: auto;                  /* each column sizes to its content */
  width:auto !important; gap:2px; padding:3px; margin:3px 0;
  background:var(--bg-warm); border-radius:var(--radius-lg);
  border:none !important; outline:none !important; box-shadow:none !important;
}
.fos-segmented .mud-toggle-item {
  border:none !important; border-radius:var(--radius-md) !important;
  background:transparent !important; color:var(--fg-secondary) !important;
  font-size:12.5px; font-weight:var(--weight-semibold); letter-spacing:.1px;
  padding:5px 12px !important; min-height:0 !important; text-transform:none !important;
}
.fos-segmented .mud-toggle-item.mud-toggle-item-selected {
  background:var(--bg-surface) !important; color:var(--primary) !important;
  box-shadow:var(--shadow-sm);
}

/* ── Underline tabs (skins MudTabs via .fos-tabs) ── */
.fos-tabs .mud-tabs-toolbar { min-height:0; border-bottom:1px solid var(--border-hairline); background:transparent; }
.fos-tabs .mud-tab {
  text-transform:none !important; min-width:0; min-height:0; padding:12px 14px;
  font-size:13px; font-weight:var(--weight-medium); color:var(--fg-secondary);
}
.fos-tabs .mud-tab.mud-tab-active { color:var(--primary); font-weight:var(--weight-semibold); }
.fos-tabs .mud-tab-slider { background:var(--primary); height:2px; }

/* Per-event color tinting intentionally not included: Event has no Color
   in the domain. If/when reintroduced, restore .fos-event-blue/purple/teal
   classes here and pass a key to FosShell. */