/*
 * Shared Nohmad Flux theme layer for the placeholder dashboard.
 * Keep structural feature-specific styles in index.html for now.
 * Reuse this file as the base visual system when Flux moves to a real app shell.
 */

:root {
  color-scheme: dark;

  --page-bg: #0f1419;
  --bg-950: #091016;
  --bg-900: #121920;
  --bg-850: #1a242d;
  --panel-800: rgba(16, 24, 32, 0.92);
  --panel-700: rgba(18, 28, 37, 0.86);
  --line-soft: rgba(0, 127, 128, 0.24);
  --line-strong: rgba(69, 217, 165, 0.42);

  --text-100: #f3fbfb;
  --text-200: #d6e8e8;
  --text-300: #a9c0c2;
  --text-400: #718b90;

  --brand-500: #007f80;
  --brand-400: #119a9b;
  --brand-300: #45d9a5;

  --ok-500: #45d9a5;
  --warn-500: #f29b38;
  --bad-500: #f36a6a;
  --info-500: #3dc6c7;

  --danger-line: rgba(243, 106, 106, 0.45);
  --danger-bg-top: rgba(98, 28, 28, 0.6);
  --danger-bg-bottom: rgba(45, 15, 15, 0.8);
  --danger-text: #ffd9d9;

  --body-radial-a: rgba(0, 127, 128, 0.16);
  --body-radial-b: rgba(69, 217, 165, 0.12);
  --body-radial-c: rgba(242, 155, 56, 0.08);
  --field-bg: rgba(8, 14, 19, 0.82);
  --details-bg: rgba(10, 17, 23, 0.82);
  --details-line: rgba(0, 127, 128, 0.2);
  --pre-bg: rgba(6, 11, 16, 0.9);
  --tile-bg: rgba(18, 27, 35, 0.76);
  --card-bg: rgba(14, 22, 29, 0.8);
  --chart-bg: rgba(9, 15, 21, 0.84);
  --tab-bg: rgba(13, 20, 27, 0.8);
  --tab-button-bg: rgba(18, 26, 34, 0.88);
  --chip-bg: rgba(13, 21, 28, 0.8);
  --latest-bg: rgba(12, 20, 26, 0.82);
  --phase-l1: #f29b38;
  --phase-l2: #eef8f8;
  --phase-l3: #119a9b;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-soft: 0 24px 60px rgba(2, 7, 12, 0.34);
  --shadow-focus: 0 0 0 3px rgba(69, 217, 165, 0.18);
}

:root[data-theme='light'] {
  color-scheme: light;

  --page-bg: #eff4f4;
  --bg-950: #f7fbfb;
  --bg-900: #edf4f4;
  --bg-850: #e4efef;
  --panel-800: rgba(255, 255, 255, 0.92);
  --panel-700: rgba(248, 251, 251, 0.95);
  --line-soft: rgba(0, 127, 128, 0.16);
  --line-strong: rgba(0, 127, 128, 0.32);

  --text-100: #102025;
  --text-200: #17353a;
  --text-300: #446267;
  --text-400: #6a8184;

  --brand-500: #007f80;
  --brand-400: #109394;
  --brand-300: #45d9a5;

  --ok-500: #11855d;
  --warn-500: #b96d09;
  --bad-500: #b63232;
  --info-500: #0c8788;

  --danger-line: rgba(182, 50, 50, 0.38);
  --danger-bg-top: rgba(251, 216, 216, 0.88);
  --danger-bg-bottom: rgba(248, 200, 200, 0.9);
  --danger-text: #7b1f1f;

  --body-radial-a: rgba(0, 127, 128, 0.14);
  --body-radial-b: rgba(69, 217, 165, 0.12);
  --body-radial-c: rgba(242, 155, 56, 0.08);
  --field-bg: rgba(255, 255, 255, 0.92);
  --details-bg: rgba(247, 251, 251, 0.96);
  --details-line: rgba(0, 127, 128, 0.22);
  --pre-bg: rgba(233, 241, 241, 0.96);
  --tile-bg: rgba(237, 244, 244, 0.9);
  --card-bg: rgba(244, 248, 248, 0.92);
  --chart-bg: rgba(239, 246, 246, 0.92);
  --tab-bg: rgba(248, 251, 251, 0.86);
  --tab-button-bg: rgba(233, 242, 242, 0.84);
  --chip-bg: rgba(232, 240, 240, 0.85);
  --latest-bg: rgba(241, 247, 247, 0.9);
  --phase-l1: #d66f00;
  --phase-l2: #5e6466;
  --phase-l3: #007f80;

  --shadow-soft: 0 20px 42px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 127, 128, 0.16);
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(1200px 720px at 8% -10%, var(--body-radial-a), transparent 58%),
    radial-gradient(860px 560px at 95% 0%, var(--body-radial-b), transparent 56%),
    linear-gradient(180deg, var(--page-bg), var(--page-bg));
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line-soft) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line-soft) 40%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.28;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 85%);
}

body::after {
  content: '';
  position: fixed;
  right: -10vw;
  bottom: -14vw;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, var(--body-radial-c), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

.app {
  max-width: 1380px;
  margin: 0 auto;
  padding: 52px var(--space-5) 84px;
  position: relative;
  z-index: 1;
}

.topbar {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
}

.title-wrap {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}

.brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-300) 38%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand-400) 84%, transparent), color-mix(in srgb, var(--brand-500) 92%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--brand-500) 26%, transparent);
  position: relative;
  overflow: hidden;
}

.brand-mark::before,
.brand-mark::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

.brand-mark::before {
  width: 14px;
  height: 30px;
  top: 11px;
  left: 12px;
  transform: rotate(-22deg);
}

.brand-mark::after {
  width: 14px;
  height: 30px;
  right: 12px;
  bottom: 11px;
  transform: rotate(-22deg);
}

.eyebrow {
  margin: 2px 0 0;
  color: var(--brand-300);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.title-wrap h1,
.panel h2,
.tab-panel h3,
.org-users-layout h3,
.site-card h3,
.dialog-head h3,
.dialog-add h4,
.latest-block h4,
.metric-value,
.wallboard-title,
.lms-tree-head strong {
  font-family: 'Bebas Neue', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.title-wrap h1 {
  font-size: clamp(3.1rem, 8vw, 5.35rem);
  line-height: 0.92;
}

.subtitle {
  margin: 0;
  color: var(--text-300);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 60ch;
}

.top-meta {
  max-width: 540px;
}

.auth-line {
  line-height: 1.35;
}

.pill,
.badge,
.legend-chip,
.wallboard-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.pill {
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  letter-spacing: 0.12em;
  backdrop-filter: blur(16px);
}

.pill strong {
  color: var(--brand-300);
}

.badge {
  background: color-mix(in srgb, var(--chip-bg) 92%, transparent);
  letter-spacing: 0.16em;
}

.account-menu summary,
.btn-subtle {
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  backdrop-filter: blur(16px);
}

label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

input,
select {
  min-height: 44px;
  padding: 10px 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  background: var(--field-bg);
}

button {
  min-height: 42px;
  padding: 9px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.btn-primary {
  border-color: color-mix(in srgb, var(--brand-300) 34%, transparent);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
  color: #f7fffe;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand-500) 24%, transparent);
}

.panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-800) 100%, transparent), color-mix(in srgb, var(--panel-700) 100%, transparent));
  backdrop-filter: blur(18px);
}

#sitesCard,
#dashboardCard,
#wallboardCard {
  position: relative;
  overflow: hidden;
}

#sitesCard::before,
#dashboardCard::before,
#wallboardCard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 60%);
  pointer-events: none;
}

.desktop-table-wrap,
.history-table-wrap,
.picker-results,
.access-list,
.tab-panel,
.metric-tile,
.site-card,
.org-users-layout > section,
.latest-block,
.dialog.dialog {
  border-color: var(--details-line);
}

.desktop-table-wrap,
.history-table-wrap {
  background: color-mix(in srgb, var(--card-bg) 96%, transparent);
}

th {
  background: color-mix(in srgb, var(--details-bg) 96%, transparent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

td code,
.topic {
  border-color: var(--details-line);
  border-radius: 10px;
}

.org-users-layout h3,
.site-card h3,
.tab-panel h3 {
  line-height: 1;
}

.tab-button {
  font-size: 11px;
}

.tab-button[aria-selected='true'] {
  border-color: color-mix(in srgb, var(--brand-300) 32%, transparent);
  color: #f7fffe;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

.metric-tile h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.metric-value {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 0.92;
}

.legend-chip,
.wallboard-badge {
  letter-spacing: 0.12em;
}

.footer {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 86%, transparent);
  padding-top: var(--space-4);
}

@media (max-width: 620px) {
  .app {
    padding: var(--space-6) var(--space-3) 56px;
  }

  .brand-lockup {
    gap: var(--space-3);
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}