/*
 * AGALID Aurora Tech — calm, high-clarity visual identity.
 * A presentation-only layer inspired by soft atmospheric light rather than
 * a literal background image, so it stays sharp and inexpensive at any size.
 */

:root {
  --ag-aurora-ink: #11131a;
  --ag-aurora-muted: #626978;
  --ag-aurora-blue: #4f7cff;
  --ag-aurora-indigo: #635bff;
  --ag-aurora-violet: #8b7cf6;
  --ag-aurora-cyan: #79d9f4;
  --ag-aurora-line: rgba(69, 78, 112, .14);
  --ag-aurora-glass: rgba(255, 255, 255, .88);
  --ag-aurora-glass-strong: rgba(255, 255, 255, .96);
  --ag-aurora-shadow: 0 16px 46px rgba(46, 52, 92, .11), 0 2px 8px rgba(36, 43, 74, .05);
  --ag-aurora-field:
    radial-gradient(ellipse 48% 105% at 13% 6%, rgba(113, 185, 255, .30) 0%, rgba(113, 185, 255, .10) 43%, transparent 72%),
    radial-gradient(ellipse 42% 115% at 83% 0%, rgba(112, 92, 255, .30) 0%, rgba(139, 124, 246, .10) 47%, transparent 73%),
    radial-gradient(ellipse 52% 90% at 55% 42%, rgba(205, 210, 255, .32) 0%, rgba(220, 225, 255, .12) 44%, transparent 75%),
    linear-gradient(180deg, #edf3ff 0%, #f7f8ff 52%, #fbfbfd 100%);
}

html[data-theme="dark"] {
  --ag-aurora-ink: #f7f8fc;
  --ag-aurora-muted: #b4bbcb;
  --ag-aurora-line: rgba(194, 201, 232, .16);
  --ag-aurora-glass: rgba(18, 22, 36, .88);
  --ag-aurora-glass-strong: rgba(20, 24, 39, .96);
  --ag-aurora-shadow: 0 18px 52px rgba(0, 0, 0, .34), 0 2px 9px rgba(0, 0, 0, .20);
  --ag-aurora-field:
    radial-gradient(ellipse 50% 110% at 11% 4%, rgba(42, 111, 214, .24) 0%, rgba(42, 111, 214, .07) 47%, transparent 74%),
    radial-gradient(ellipse 45% 110% at 84% 0%, rgba(104, 83, 235, .26) 0%, rgba(104, 83, 235, .07) 48%, transparent 74%),
    radial-gradient(ellipse 54% 95% at 55% 42%, rgba(93, 104, 173, .16) 0%, transparent 72%),
    linear-gradient(180deg, #111528 0%, #111522 54%, #10131c 100%);
}

html[data-horizon="v1"] body,
html[data-horizon="v1"] button,
html[data-horizon="v1"] input,
html[data-horizon="v1"] select,
html[data-horizon="v1"] textarea {
  font-family: Inter, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

html[data-horizon="v1"] h1,
html[data-horizon="v1"] h2,
html[data-horizon="v1"] h3,
html[data-horizon="v1"] .rail .brand .bt {
  font-family: Inter, "SF Pro Display", "Segoe UI Variable Display", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  text-rendering: geometricPrecision;
}

/* The command rail gets the visual identity; the map remains untouched. */
html[data-horizon="v1"] .rail {
  color: var(--ag-aurora-ink);
  background:
    radial-gradient(ellipse 34% 150% at 12% -30%, rgba(92, 173, 255, .38), transparent 72%),
    radial-gradient(ellipse 32% 180% at 86% -55%, rgba(112, 92, 255, .34), transparent 72%),
    linear-gradient(104deg, rgba(246, 250, 255, .98), rgba(238, 241, 255, .97) 58%, rgba(246, 243, 255, .98)) !important;
  border-bottom: 1px solid rgba(86, 94, 135, .16);
  box-shadow: 0 8px 28px rgba(61, 71, 116, .08), inset 0 1px rgba(255, 255, 255, .82);
}

html[data-theme="dark"][data-horizon="v1"] .rail {
  background:
    radial-gradient(ellipse 34% 160% at 12% -30%, rgba(43, 123, 225, .25), transparent 72%),
    radial-gradient(ellipse 34% 180% at 86% -55%, rgba(105, 81, 224, .26), transparent 72%),
    linear-gradient(104deg, rgba(15, 21, 39, .99), rgba(23, 24, 48, .99) 60%, rgba(25, 21, 48, .99)) !important;
  border-bottom-color: rgba(188, 197, 232, .14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .04);
}

html[data-horizon="v1"] .rail .brand::before {
  border-color: var(--ag-aurora-indigo);
  filter: drop-shadow(0 3px 6px rgba(99, 91, 255, .24));
}

html[data-horizon="v1"] .rail .brand .bt {
  color: var(--ag-aurora-ink);
  font-weight: 790;
  letter-spacing: .30em;
}

html[data-horizon="v1"] .rail .brand .bt small,
html[data-horizon="v1"] .rail .me .id {
  color: var(--ag-aurora-muted);
}

html[data-horizon="v1"] .rail .me {
  min-height: 46px;
  padding: 4px 6px 4px 5px;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: background .2s var(--hz-ease), border-color .2s var(--hz-ease), transform .2s var(--hz-ease);
}

html[data-horizon="v1"] .rail .me:hover,
html[data-horizon="v1"] .rail .me:focus-visible {
  background: rgba(255, 255, 255, .54);
  border-color: rgba(83, 91, 130, .13);
  transform: translateY(-1px);
}

html[data-theme="dark"][data-horizon="v1"] .rail .me:hover,
html[data-theme="dark"][data-horizon="v1"] .rail .me:focus-visible {
  background: rgba(255, 255, 255, .055);
}

html[data-horizon="v1"] .rail .me .av {
  color: #fff;
  background: linear-gradient(145deg, #191c2b 0%, #353664 62%, #635bff 145%);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 14px rgba(43, 45, 84, .20), inset 0 1px rgba(255, 255, 255, .16);
}

html[data-horizon="v1"] .rail .me .nm {
  color: var(--ag-aurora-ink);
  font-weight: 700;
}

html[data-horizon="v1"] .rail .langbtn,
html[data-horizon="v1"] .hz-live-chip,
html[data-horizon="v1"] .hz-icon-button,
html[data-horizon="v1"] .rail .logout {
  border-color: rgba(76, 84, 119, .13);
  background: rgba(255, 255, 255, .60);
  box-shadow: inset 0 1px rgba(255, 255, 255, .66);
}

html[data-theme="dark"][data-horizon="v1"] .rail .langbtn,
html[data-theme="dark"][data-horizon="v1"] .hz-live-chip,
html[data-theme="dark"][data-horizon="v1"] .hz-icon-button,
html[data-theme="dark"][data-horizon="v1"] .rail .logout {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(207, 212, 235, .13);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

html[data-horizon="v1"] .rail .langbtn span.on {
  color: #fff;
  background: linear-gradient(135deg, #202438, #5650d8);
  box-shadow: 0 4px 12px rgba(61, 58, 143, .18);
}

html[data-horizon="v1"] .geosearch .box {
  color: var(--ag-aurora-muted);
  background: var(--ag-aurora-glass-strong);
  border-color: rgba(75, 83, 118, .16);
  border-radius: 17px;
  box-shadow: 0 10px 25px rgba(52, 60, 101, .08), inset 0 1px rgba(255, 255, 255, .78);
}

html[data-horizon="v1"] .geosearch .box:focus-within {
  border-color: rgba(99, 91, 255, .42);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, .09), 0 12px 30px rgba(52, 60, 101, .10);
}

html[data-horizon="v1"] .geosearch .box::after {
  color: #5e6473;
  background: rgba(240, 242, 250, .92);
  border-color: rgba(72, 80, 114, .12);
}

html[data-theme="dark"][data-horizon="v1"] .geosearch .box::after {
  color: #c2c8d8;
  background: rgba(255, 255, 255, .06);
}

/* Atmospheric field for application surfaces, built from CSS and kept subtle. */
html[data-horizon="v1"] .page-panel,
html[data-horizon="v1"] #pageDash {
  background: var(--ag-aurora-field) !important;
  border-color: var(--ag-aurora-line);
  box-shadow: var(--ag-aurora-shadow);
}

html[data-horizon="v1"] .page-head,
html[data-horizon="v1"] #pageDash .page-head {
  background: var(--ag-aurora-glass) !important;
  border-bottom-color: var(--ag-aurora-line);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

html[data-horizon="v1"] .page-head h1 {
  color: var(--ag-aurora-ink);
  font-weight: 740;
  letter-spacing: -.035em;
}

html[data-horizon="v1"] #dashBody .hz-dash-kpi,
html[data-horizon="v1"] #dashBody .hz-dash-mini,
html[data-horizon="v1"] #dashBody .hz-dash-card,
html[data-horizon="v1"] .rp-metric-card,
html[data-horizon="v1"] .rp-chart-card,
html[data-horizon="v1"] .rp-smart-summary {
  background: rgba(255, 255, 255, .84) !important;
  border-color: rgba(76, 84, 119, .12) !important;
  box-shadow: 0 10px 28px rgba(49, 56, 92, .075), inset 0 1px rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(15px) saturate(1.04);
  -webkit-backdrop-filter: blur(15px) saturate(1.04);
}

html[data-theme="dark"][data-horizon="v1"] #dashBody .hz-dash-kpi,
html[data-theme="dark"][data-horizon="v1"] #dashBody .hz-dash-mini,
html[data-theme="dark"][data-horizon="v1"] #dashBody .hz-dash-card,
html[data-theme="dark"][data-horizon="v1"] .rp-metric-card,
html[data-theme="dark"][data-horizon="v1"] .rp-chart-card,
html[data-theme="dark"][data-horizon="v1"] .rp-smart-summary {
  background: rgba(21, 26, 43, .84) !important;
  border-color: rgba(196, 202, 231, .12) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .035) !important;
}

/* Map overlays share the material but never veil the actual map. */
html[data-horizon="v1"] .mapctrl,
html[data-horizon="v1"] #objBtn,
html[data-horizon="v1"] .objects,
html[data-horizon="v1"] .detail,
html[data-horizon="v1"] .hz-attention-panel {
  background: var(--ag-aurora-glass-strong);
  border-color: var(--ag-aurora-line);
  box-shadow: var(--ag-aurora-shadow);
}

html[data-horizon="v1"] .hz-nav {
  color: var(--ag-aurora-muted);
  background: var(--ag-aurora-glass-strong);
  border-color: rgba(76, 84, 119, .14);
  box-shadow: 0 18px 44px rgba(44, 48, 85, .16), 0 2px 8px rgba(40, 45, 74, .06), inset 0 1px rgba(255, 255, 255, .74);
}

html[data-horizon="v1"] .hz-nav a:hover {
  color: var(--ag-aurora-ink);
  background: rgba(91, 91, 145, .07);
}

html[data-horizon="v1"] .hz-nav a.on {
  color: #fff !important;
  background: linear-gradient(135deg, #191d2b 0%, #2b3048 62%, #524dc2 135%) !important;
  box-shadow: 0 8px 18px rgba(34, 37, 65, .18), inset 0 1px rgba(255, 255, 255, .10) !important;
}

html[data-theme="dark"][data-horizon="v1"] .hz-nav a.on {
  background: linear-gradient(135deg, #eceeff 0%, #d8dcff 65%, #bfc0ff 130%) !important;
  color: #161925 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
}

/* Future-safe treatment if the capacity card is enabled again. */
html[data-horizon="v1"] #subCard > div {
  background:
    radial-gradient(circle at 92% 0%, rgba(131, 121, 255, .55), transparent 43%),
    radial-gradient(circle at 8% 100%, rgba(83, 173, 255, .34), transparent 48%),
    linear-gradient(145deg, #171b2c, #292c53 58%, #3b357a) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(29, 32, 67, .28) !important;
}

/* Login and empty backgrounds use the same identity without loading imagery. */
html[data-horizon="v1"] #login {
  background: #000 !important;
}

html[data-horizon="v1"] #login .card {
  color: #f7faff;
  background: linear-gradient(145deg, rgba(5, 10, 23, .84), rgba(8, 15, 31, .74));
  border: 1px solid rgba(172, 205, 255, .30);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="dark"][data-horizon="v1"] #login .card {
  background: linear-gradient(145deg, rgba(5, 10, 23, .84), rgba(8, 15, 31, .74));
}

@media (max-width: 900px) {
  html[data-horizon="v1"] .rail {
    background:
      radial-gradient(ellipse 58% 170% at 4% -35%, rgba(92, 173, 255, .34), transparent 74%),
      radial-gradient(ellipse 54% 190% at 96% -50%, rgba(112, 92, 255, .30), transparent 74%),
      linear-gradient(104deg, rgba(247, 250, 255, .99), rgba(239, 241, 255, .98)) !important;
  }

  html[data-theme="dark"][data-horizon="v1"] .rail {
    background:
      radial-gradient(ellipse 58% 180% at 4% -35%, rgba(43, 123, 225, .22), transparent 74%),
      radial-gradient(ellipse 54% 190% at 96% -50%, rgba(105, 81, 224, .24), transparent 74%),
      linear-gradient(104deg, rgba(15, 21, 39, .99), rgba(24, 23, 46, .99)) !important;
  }
}

@media (max-width: 700px) {
  html[data-horizon="v1"] .rail {
    box-shadow: 0 7px 24px rgba(50, 58, 101, .08);
  }

  html[data-horizon="v1"] .hz-nav {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -10px 30px rgba(44, 48, 85, .12), inset 0 1px rgba(255, 255, 255, .82);
  }

  html[data-theme="dark"][data-horizon="v1"] .hz-nav {
    background: rgba(16, 20, 34, .95);
  }

  html[data-horizon="v1"] .page-panel,
  html[data-horizon="v1"] #pageDash {
    background:
      radial-gradient(ellipse 75% 58% at 16% 0%, rgba(113, 185, 255, .24), transparent 72%),
      radial-gradient(ellipse 72% 58% at 88% 0%, rgba(112, 92, 255, .23), transparent 72%),
      linear-gradient(180deg, #f2f5ff 0%, #fafafd 58%, #fbfbfd 100%) !important;
  }

  html[data-theme="dark"][data-horizon="v1"] .page-panel,
  html[data-theme="dark"][data-horizon="v1"] #pageDash {
    background: var(--ag-aurora-field) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-horizon="v1"] .rail .me {
    transition: none;
  }
}

/* Navigation 2035 — restrained, precise and unmistakably AGALID. */
html[data-horizon="v1"] .hz-nav {
  height: 62px;
  gap: 4px;
  padding: 7px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 248, 253, .91)) !important;
  border: 1px solid rgba(53, 60, 91, .13);
  border-radius: 22px;
  box-shadow:
    0 22px 54px rgba(38, 43, 72, .15),
    0 4px 12px rgba(38, 43, 72, .06),
    inset 0 1px rgba(255, 255, 255, .92) !important;
  isolation: isolate;
}

html[data-theme="dark"][data-horizon="v1"] .hz-nav {
  background:
    linear-gradient(180deg, rgba(25, 30, 48, .95), rgba(16, 20, 34, .94)) !important;
  border-color: rgba(187, 196, 235, .13);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .38),
    inset 0 1px rgba(255, 255, 255, .06) !important;
}

html[data-horizon="v1"] .hz-nav a {
  position: relative;
  min-width: 98px;
  height: 48px;
  gap: 8px;
  padding: 0 14px;
  overflow: hidden;
  color: #656b7d;
  border: 1px solid transparent;
  border-radius: 15px;
  font-size: 11.5px;
  font-weight: 670;
  line-height: 1;
  letter-spacing: -.08px;
  white-space: nowrap;
  isolation: isolate;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

html[data-horizon="v1"] .hz-nav a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  stroke-width: 1.85;
  transition: transform .2s ease;
}

html[data-horizon="v1"] .hz-nav a span {
  position: relative;
  z-index: 1;
}

html[data-horizon="v1"] .hz-nav a:hover {
  color: #272d3e;
  background: rgba(74, 78, 115, .055);
  border-color: rgba(66, 72, 103, .08);
  transform: translateY(-1px);
}

html[data-horizon="v1"] .hz-nav a:hover svg {
  transform: scale(1.055);
}

html[data-horizon="v1"] .hz-nav a.on {
  color: #fff !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(127, 119, 255, .46), transparent 44%),
    linear-gradient(135deg, #171c2c 0%, #292e49 58%, #4942a6 145%) !important;
  border-color: rgba(255, 255, 255, .10);
  box-shadow:
    0 10px 24px rgba(35, 39, 70, .22),
    inset 0 1px rgba(255, 255, 255, .15) !important;
  transform: translateY(-1px);
}

html[data-horizon="v1"] .hz-nav a.on::before {
  position: absolute;
  right: 18px;
  bottom: 4px;
  left: 18px;
  display: block;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #9fdcff, #b7a7ff, transparent);
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(152, 190, 255, .72);
}

html[data-theme="dark"][data-horizon="v1"] .hz-nav a {
  color: #9ca5bb;
}

html[data-theme="dark"][data-horizon="v1"] .hz-nav a:hover {
  color: #f1f4ff;
  background: rgba(178, 188, 230, .075);
  border-color: rgba(189, 198, 237, .09);
}

html[data-theme="dark"][data-horizon="v1"] .hz-nav a.on {
  color: #111522 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .88), transparent 42%),
    linear-gradient(135deg, #f4f6ff 0%, #dce1ff 64%, #b8b9ff 145%) !important;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 11px 27px rgba(0, 0, 0, .30) !important;
}

@media (max-width: 900px) {
  html[data-horizon="v1"] .hz-nav {
    overflow-x: auto;
    overflow-y: hidden;
  }

  html[data-horizon="v1"] .hz-nav a {
    min-width: 78px;
    padding: 0 10px;
  }
}

@media (max-width: 700px) {
  html[data-horizon="v1"] .hz-nav {
    height: var(--hz-dock);
    gap: 2px;
    padding: 5px 7px max(5px, env(safe-area-inset-bottom));
    overflow-x: auto;
    border-radius: 0;
  }

  html[data-horizon="v1"] .hz-nav a {
    min-width: 58px;
    height: 44px;
    gap: 5px;
    padding: 0 7px;
    border-radius: 13px;
    font-size: 10px;
  }

  html[data-horizon="v1"] .hz-nav a svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-horizon="v1"] .hz-nav a,
  html[data-horizon="v1"] .hz-nav a svg {
    transition: none;
  }
}