/**
 * Theme: Slate & Fire
 * Light slate blue-grey with ice blue and fire orange accents.
 * Based on malfunctiondz_slate_v1 design system.
 * Logo unchanged — theme only.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Slate system (from reference) */
  --s0:   #F0F2F5;
  --s1:   #E2E6EC;
  --s2:   #CDD4DD;
  --s3:   #B0BCCA;
  --s4:   #8898A8;
  --s5:   #5C6E7E;
  --s6:   #3E5060;
  --s7:   #2A3A47;
  --s8:   #1E2D38;
  --s9:   #141F28;

  /* App surfaces */
  --bg: #D6DCE3;
  --panel: #E8ECF0;
  --card: #E8ECF0;
  --card-up: #EFF2F5;
  --card-hdr: #2A3A47;

  /* Ice blue — primary accent */
  --ice: #5AACCA;
  --ice-soft: #A8D4E6;
  --ice-pale: rgba(90, 172, 202, 0.12);
  --ice-rim: rgba(90, 172, 202, 0.3);

  /* Fire orange — secondary accent */
  --fire: #F06020;
  --fire-mid: #D85518;
  --fire-pale: rgba(240, 96, 32, 0.1);
  --fire-rim: rgba(240, 96, 32, 0.35);

  /* Status */
  --green: #2EAA72;
  --warn: #D4920A;
  --danger: #D63C3C;

  /* Text */
  --ink: #1A2830;
  --ink-mid: #2E4050;
  --ink-3: #4A6070;
  --ink-4: #6A8090;
  --ink-dim: #95A8B5;
  --muted: #6A8090;

  /* Borders */
  --border: rgba(42, 58, 71, 0.12);
  --border-ice: rgba(90, 172, 202, 0.25);

  /* Map to platform variable names (so existing CSS keeps working) */
  --og-red: var(--fire);
  --og-red-hover: var(--fire-mid);
  --og-blue: var(--s7);
  --og-blue-dark: var(--s8);
  --og-blue-rgb: 42, 58, 71;
  --og-white: #EDF1F5;
  --og-white-rgb: 237, 241, 245;
  --primary: var(--ice);
  --accent: var(--fire);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 25px rgba(26, 40, 48, 0.12);
  --font: 'Barlow', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --og-surface: var(--card-hdr);
  --og-surface-solid: var(--s8);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.plat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 3px solid var(--fire);
  background: var(--card-hdr);
  color: var(--og-white);
}
.plat-topbar__left { display: flex; align-items: center; gap: 14px; }
.plat-topbar__right { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.plat-brand { letter-spacing: 0.2px; font-family: 'Barlow Condensed', var(--font); font-weight: 700; }
.plat-nav { display: flex; align-items: center; gap: 10px; }
.plat-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--og-white);
  opacity: 0.92;
}
.plat-nav__link:hover { opacity: 1; text-decoration: none; background: rgba(255, 255, 255, 0.1); }
.plat-nav__link.is-active { opacity: 1; background: rgba(255, 255, 255, 0.16); outline: 2px solid rgba(255, 255, 255, 0.18); }
.plat-sep { opacity: 0.55; padding: 0 2px; }
.plat-page { padding: 16px 12px; }
.plat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  border: none;
  font-family: 'Barlow Condensed', var(--font);
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(240, 96, 32, 0.3);
}
.plat-btn:hover { text-decoration: none; filter: brightness(0.98); }
.plat-flagstripe {
  height: 6px;
  background: linear-gradient(90deg, var(--fire), var(--ice));
}

/* App section bodies: light slate gradient (not dark) */
body.app-manifest,
body.app-aircraft,
body.app-loft,
body.app-lms {
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
}
body.app-manifest .plat-topbar,
body.app-manifest .plat-flagstripe,
body.app-manifest .plat-page,
body.app-aircraft .plat-topbar,
body.app-aircraft .plat-flagstripe,
body.app-aircraft .plat-page,
body.app-loft .plat-topbar,
body.app-loft .plat-flagstripe,
body.app-loft .plat-page,
body.app-lms .plat-topbar,
body.app-lms .plat-flagstripe,
body.app-lms .plat-page {
  position: relative;
  z-index: 1;
}
body.app-manifest .plat-page,
body.app-aircraft .plat-page,
body.app-loft .plat-page,
body.app-lms .plat-page {
  background: transparent !important;
}

/* Fixed background — light slate with subtle ice/fire gradients */
html:has(body.app-aircraft),
html:has(body.app-manifest),
html:has(body.app-loft),
html:has(body.app-lms) {
  min-height: 100%;
  background: #B8C2CC;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(90, 172, 202, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(240, 96, 32, 0.06) 0%, transparent 50%),
    linear-gradient(170deg, #CBD3DC 0%, #D6DCE3 50%, #CDD4DC 100%);
  background-attachment: fixed;
}

/* Slate & Fire: light content — dashboard/main use dark text + light cards */
body.app-manifest .manifest-dash,
body.app-aircraft .manifest-dash,
body.app-loft .manifest-dash,
body.app-lms .manifest-dash { color: var(--ink); }
body.app-manifest .manifest-dash .dash-sub,
body.app-aircraft .manifest-dash .dash-sub,
body.app-loft .manifest-dash .dash-sub,
body.app-lms .manifest-dash .dash-sub { color: var(--muted); }
body.app-manifest .manifest-dash .dash-sidebar,
body.app-aircraft .manifest-dash .dash-sidebar,
body.app-loft .manifest-dash .dash-sidebar,
body.app-lms .manifest-dash .dash-sidebar {
  background: var(--card-hdr);
  border-right-color: rgba(0, 0, 0, 0.15);
}
body.app-manifest .manifest-dash .dash-card,
body.app-aircraft .manifest-dash .dash-card,
body.app-loft .manifest-dash .dash-card,
body.app-lms .manifest-dash .dash-card {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink);
}
body.app-manifest .manifest-dash .dash-card__desc,
body.app-aircraft .manifest-dash .dash-card__desc,
body.app-loft .manifest-dash .dash-card__desc,
body.app-lms .manifest-dash .dash-card__desc { color: var(--ink-4); }
body.app-manifest .manifest-dash .dash-btn--ghost,
body.app-aircraft .manifest-dash .dash-btn--ghost,
body.app-loft .manifest-dash .dash-btn--ghost,
body.app-lms .manifest-dash .dash-btn--ghost {
  background: var(--s1);
  color: var(--ink);
  border-color: var(--border);
}
body.app-manifest .manifest-dash .dash-btn--ghost:hover,
body.app-aircraft .manifest-dash .dash-btn--ghost:hover,
body.app-loft .manifest-dash .dash-btn--ghost:hover,
body.app-lms .manifest-dash .dash-btn--ghost:hover {
  background: var(--s2);
  color: var(--ink);
}
body.app-manifest .manifest-dash .ops-field label,
body.app-aircraft .manifest-dash .ops-field label,
body.app-loft .manifest-dash .ops-field label,
body.app-lms .manifest-dash .ops-field label { color: var(--muted); }
body.app-manifest .manifest-dash .ops-field input,
body.app-manifest .manifest-dash .ops-field select,
body.app-manifest .manifest-dash .ops-field textarea,
body.app-aircraft .manifest-dash .ops-field input,
body.app-aircraft .manifest-dash .ops-field select,
body.app-aircraft .manifest-dash .ops-field textarea,
body.app-loft .manifest-dash .ops-field input,
body.app-loft .manifest-dash .ops-field select,
body.app-loft .manifest-dash .ops-field textarea,
body.app-lms .manifest-dash .ops-field input,
body.app-lms .manifest-dash .ops-field select,
body.app-lms .manifest-dash .ops-field textarea {
  background: var(--card-up);
  border-color: var(--border);
  color: var(--ink);
}
body.app-manifest .manifest-dash .ops-table th,
body.app-manifest .manifest-dash .ops-table td,
body.app-aircraft .manifest-dash .ops-table th,
body.app-aircraft .manifest-dash .ops-table td,
body.app-loft .manifest-dash .ops-table th,
body.app-loft .manifest-dash .ops-table td,
body.app-lms .manifest-dash .ops-table th,
body.app-lms .manifest-dash .ops-table td {
  border-color: var(--border);
  color: var(--ink);
}
body.app-manifest .manifest-dash .ops-table th,
body.app-aircraft .manifest-dash .ops-table th,
body.app-loft .manifest-dash .ops-table th,
body.app-lms .manifest-dash .ops-table th { background: var(--s1); }
body.app-manifest .manifest-dash .ops-table tr,
body.app-aircraft .manifest-dash .ops-table tr,
body.app-loft .manifest-dash .ops-table tr,
body.app-lms .manifest-dash .ops-table tr { background: var(--panel); }
body.app-manifest .manifest-dash .ops-dim,
body.app-aircraft .manifest-dash .ops-dim,
body.app-loft .manifest-dash .ops-dim,
body.app-lms .manifest-dash .ops-dim { color: var(--muted); }
body.app-manifest .manifest-dash .ops-userlink,
body.app-aircraft .manifest-dash .ops-userlink,
body.app-loft .manifest-dash .ops-userlink,
body.app-lms .manifest-dash .ops-userlink { color: var(--primary); }
body.app-manifest .manifest-dash .dash-tile-item,
body.app-aircraft .manifest-dash .dash-tile-item,
body.app-loft .manifest-dash .dash-tile-item,
body.app-lms .manifest-dash .dash-tile-item {
  background: var(--s1);
  color: var(--ink);
}