/* ==========================================================
   Tool Hub Retheme 4
   Alta product-dark pass: based on observed Avigilon Alta login.
   Cleaner navy, restrained Avigilon blue, flatter cards, hex geometry.
   Sandbox only.
   ========================================================== */

:root:not([data-theme="light"]),
:root[data-theme="dark"] {
  color-scheme: dark;
  --r4-bg: #181F32;
  --r4-bg-deep: #07142A;
  --r4-surface: #0D1C34;
  --r4-surface-2: #10223F;
  --r4-inset: rgba(90, 116, 166, .24);
  --r4-text: #F4F4F6;
  --r4-muted: #B5BED0;
  --r4-dim: #7E8BA3;
  --r4-primary: #006ED7;
  --r4-primary-2: #087BE8;
  --r4-accent: #2C83D8;
  --r4-border: rgba(90, 116, 166, .28);
  --r4-border-strong: rgba(86, 142, 211, .42);
  --r4-success: #29C46A;
  --r4-warning: #F3A737;
  --r4-danger: #FF5A66;
  --r4-shadow: 0 14px 34px rgba(0, 0, 0, .24);
  --r4-soft-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  --r4-page:
    radial-gradient(circle at 88% 34%, rgba(0, 110, 215, .20), transparent 28rem),
    linear-gradient(100deg, #02050A 0%, #07142A 42%, #0B2142 100%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --r4-bg: #F4F6FA;
  --r4-bg-deep: #EAF0F8;
  --r4-surface: #FFFFFF;
  --r4-surface-2: #F7F9FC;
  --r4-inset: #EEF3FA;
  --r4-text: #142033;
  --r4-muted: #4F5D73;
  --r4-dim: #6F7D92;
  --r4-primary: #006ED7;
  --r4-primary-2: #087BE8;
  --r4-accent: #2C83D8;
  --r4-border: rgba(37, 55, 82, .14);
  --r4-border-strong: rgba(0, 110, 215, .24);
  --r4-success: #188A4A;
  --r4-warning: #9D6400;
  --r4-danger: #C83C46;
  --r4-shadow: 0 12px 28px rgba(20, 32, 51, .10);
  --r4-soft-shadow: 0 8px 18px rgba(20, 32, 51, .08);
  --r4-page:
    radial-gradient(circle at 88% 34%, rgba(0, 110, 215, .10), transparent 28rem),
    linear-gradient(100deg, #FFFFFF 0%, #F5F8FC 52%, #EDF4FF 100%);
}

html,
body {
  background: var(--r4-bg) !important;
  color: var(--r4-text) !important;
  font-family: "IBM Plex Sans", Graphik, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: normal;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: var(--r4-page);
}

body::after {
  content: "";
  position: fixed;
  inset: -18% -8% -8% 42%;
  z-index: -2;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(60deg, transparent 0 46%, rgba(44, 131, 216, .30) 47% 48%, transparent 49% 100%),
    linear-gradient(120deg, transparent 0 46%, rgba(44, 131, 216, .24) 47% 48%, transparent 49% 100%),
    linear-gradient(0deg, transparent 0 46%, rgba(44, 131, 216, .18) 47% 48%, transparent 49% 100%);
  background-size: 320px 184px;
  mask-image: linear-gradient(90deg, transparent, black 22%, black 82%, transparent);
}
[data-theme="light"] body::after { opacity: .16; }

.ambient-bg,
.ambient-bg canvas {
  opacity: .10 !important;
  mix-blend-mode: screen !important;
}
[data-theme="light"] .ambient-bg,
[data-theme="light"] .ambient-bg canvas { opacity: .05 !important; }

/* Shell: product UI, not command centre */
.topbar {
  top: 16px !important;
  width: min(1360px, calc(100% - 48px)) !important;
  height: 64px !important;
  padding: 12px 24px !important;
  border: 1px solid var(--r4-border) !important;
  border-radius: 14px !important;
  background: rgba(13, 28, 52, .84) !important;
  box-shadow: var(--r4-soft-shadow) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
}
[data-theme="light"] .topbar { background: rgba(255, 255, 255, .88) !important; }

.brand { min-width: 210px !important; }
.brand-logo {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: linear-gradient(140deg, #006ED7 10%, #1A7DDC 54%, #8CB342 100%) !important;
  box-shadow: none !important;
}
.brand-logo::before {
  content: "A";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -.08em;
}
.brand-title {
  color: var(--r4-text) !important;
  font-size: 13px !important;
  letter-spacing: .12em !important;
  font-weight: 700 !important;
}
.brand-sub {
  color: var(--r4-dim) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}
.search { flex: 1.7 1 380px !important; max-width: 560px !important; }
.spacer { flex: .35 1 70px !important; }
.search input {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--r4-inset) !important;
  color: var(--r4-text) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
}
.search::before { color: var(--r4-primary-2) !important; opacity: .95 !important; }
.search input:focus,
.operator-form input:focus {
  outline: 2px solid rgba(0, 110, 215, .52) !important;
  outline-offset: 2px !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.theme-toggle,
.operator-button,
.status {
  min-height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid var(--r4-border) !important;
  background: rgba(90, 116, 166, .16) !important;
  color: var(--r4-text) !important;
  box-shadow: none !important;
}
.operator-button { color: #FFFFFF !important; background: var(--r4-primary) !important; font-weight: 700 !important; }
.theme-toggle:hover,
.operator-button:hover { border-color: var(--r4-border-strong) !important; box-shadow: none !important; }
.status.ok { color: var(--r4-success) !important; background: rgba(41, 196, 106, .10) !important; }
.status-dot { box-shadow: none !important; }

main {
  width: min(1360px, calc(100% - 48px)) !important;
  margin-top: 20px !important;
  padding-top: 76px !important;
}
.layout-grid { gap: 18px !important; }

/* Hero: tighter product landing treatment */
.greeting-section,
.greeting { min-height: 178px !important; }
.greeting {
  padding: 26px 30px !important;
  border: 1px solid var(--r4-border) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(90deg, rgba(2, 5, 10, .52), rgba(13, 28, 52, .70)),
    linear-gradient(135deg, var(--r4-surface), var(--r4-surface-2)) !important;
  box-shadow: var(--r4-soft-shadow) !important;
}
[data-theme="light"] .greeting { background: linear-gradient(135deg, #FFFFFF, #F5F9FF) !important; }
.greeting::before {
  content: "ALTA VIDEO · INTERNAL TOOLS" !important;
  top: 24px !important;
  left: 30px !important;
  color: var(--r4-primary-2) !important;
  font: 700 11px/1 "IBM Plex Sans", ui-sans-serif, sans-serif !important;
  letter-spacing: .18em !important;
}
.greeting > div:first-child { padding-top: 18px !important; max-width: 760px !important; }
.greeting .date {
  margin-top: 22px !important;
  color: var(--r4-dim) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}
.greeting h1 {
  max-width: 740px !important;
  margin-top: 7px !important;
  color: var(--r4-text) !important;
  font-size: clamp(34px, 4vw, 50px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
}
.greeting p {
  max-width: 760px !important;
  color: var(--r4-muted) !important;
  font-size: 15px !important;
}
.clock {
  min-width: 220px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--r4-border) !important;
  border-radius: 12px !important;
  background: rgba(90, 116, 166, .12) !important;
  box-shadow: none !important;
}
.clock-time {
  color: var(--r4-text) !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  font-weight: 500 !important;
}
.clock-tz { color: var(--r4-primary-2) !important; }

/* Components */
.section-heading { margin-bottom: 10px !important; }
.section-heading .label {
  color: var(--r4-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
.section-heading .rule { background: linear-gradient(90deg, rgba(0, 110, 215, .72), transparent) !important; }
.section-heading .count {
  border: 1px solid var(--r4-border) !important;
  border-radius: 12px !important;
  color: var(--r4-primary-2) !important;
  background: rgba(90, 116, 166, .12) !important;
}
.app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
.app-card {
  min-height: 142px !important;
  padding: 18px !important;
  border: 1px solid var(--r4-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(16, 34, 63, .86), rgba(13, 28, 52, .92)) !important;
  box-shadow: var(--r4-soft-shadow) !important;
  transition: border-color .18s ease, transform .18s ease, background .18s ease !important;
}
[data-theme="light"] .app-card { background: #FFFFFF !important; }
.app-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  opacity: 1 !important;
  background: var(--r4-primary) !important;
  mask-image: none !important;
}
.app-card::after,
.cta::after,
.panel::after,
.operator-card::after { display: none !important; animation: none !important; }
.app-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--r4-border-strong) !important;
  box-shadow: var(--r4-shadow) !important;
}
.app-top { margin-bottom: 18px !important; }
.app-code,
.kind,
.news-date,
.tag,
.eyebrow,
.operator-eyebrow {
  border: 1px solid rgba(0, 110, 215, .42) !important;
  border-radius: 12px !important;
  background: rgba(0, 110, 215, .12) !important;
  color: #55A7F2 !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
}
[data-theme="light"] .app-code,
[data-theme="light"] .kind,
[data-theme="light"] .news-date,
[data-theme="light"] .tag,
[data-theme="light"] .eyebrow,
[data-theme="light"] .operator-eyebrow { color: var(--r4-primary) !important; }
.app-card h3 {
  color: var(--r4-text) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  font-weight: 700 !important;
}
.app-card p { color: var(--r4-muted) !important; font-size: 13px !important; }
.app-health {
  border: 1px solid rgba(41, 196, 106, .38) !important;
  border-radius: 10px !important;
  background: rgba(41, 196, 106, .10) !important;
  color: var(--r4-success) !important;
}

.cta,
.panel,
.docs-panel,
.operator-card {
  border: 1px solid var(--r4-border) !important;
  border-radius: 14px !important;
  background: rgba(13, 28, 52, .82) !important;
  box-shadow: var(--r4-soft-shadow) !important;
}
[data-theme="light"] .cta,
[data-theme="light"] .panel,
[data-theme="light"] .docs-panel,
[data-theme="light"] .operator-card { background: #FFFFFF !important; }
.cta {
  min-height: 176px !important;
  grid-template-columns: minmax(0, 1fr) minmax(282px, 340px) !important;
  padding: 20px !important;
}
.cta h2 {
  color: var(--r4-text) !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
}
.cta p { color: var(--r4-muted) !important; font-size: 14px !important; }
.cta-side {
  border: 1px solid var(--r4-border) !important;
  border-radius: 14px !important;
  background: rgba(2, 5, 10, .32) !important;
}
[data-theme="light"] .cta-side { background: #F7F9FC !important; }
.metric {
  border: 1px solid var(--r4-border) !important;
  border-radius: 12px !important;
  background: rgba(90, 116, 166, .16) !important;
}
.metric strong { color: var(--r4-text) !important; }
.metric div { color: var(--r4-dim) !important; }
.launch,
.operator-submit,
.secondary-launch {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--r4-primary) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.launch:hover,
.operator-submit:hover,
.secondary-launch:hover { background: var(--r4-primary-2) !important; box-shadow: none !important; }

.doc-row,
.news-item,
.setup-list li,
.note-list li,
.tool-facts div {
  border: 1px solid var(--r4-border) !important;
  border-radius: 12px !important;
  background: rgba(7, 20, 42, .48) !important;
  box-shadow: none !important;
}
[data-theme="light"] .doc-row,
[data-theme="light"] .news-item,
[data-theme="light"] .setup-list li,
[data-theme="light"] .note-list li,
[data-theme="light"] .tool-facts div { background: #F7F9FC !important; }
.doc-row:hover,
.news-item:hover { border-color: var(--r4-border-strong) !important; box-shadow: none !important; transform: none !important; }
.doc-title,
.news-title { color: var(--r4-text) !important; }
.doc-host,
.news-meta { color: var(--r4-muted) !important; }
code { color: #72B7F5 !important; overflow-wrap: anywhere; }
.footer { color: var(--r4-dim) !important; }

.operator-modal {
  overflow-y: auto !important;
  background: rgba(2, 5, 10, .66) !important;
}
.operator-card {
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
}
.operator-form input {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--r4-inset) !important;
  color: var(--r4-text) !important;
}

/* Proxy/detail page alignment */
.tool-page,
.tool-hero,
.instruction-panel {
  border-color: var(--r4-border) !important;
  background-color: rgba(13, 28, 52, .84) !important;
  color: var(--r4-text) !important;
  box-shadow: var(--r4-soft-shadow) !important;
  border-radius: 14px !important;
}
[data-theme="light"] .tool-page,
[data-theme="light"] .tool-hero,
[data-theme="light"] .instruction-panel { background-color: #FFFFFF !important; }
.tool-hero h1,
.instruction-panel h2 { color: var(--r4-text) !important; }
.tool-hero p,
.setup-list p,
.note-list p,
.tool-facts span { color: var(--r4-muted) !important; }

@media (max-width: 1180px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cta { grid-template-columns: 1fr !important; }
}

@media (max-width: 820px) {
  .topbar { width: calc(100% - 20px) !important; height: auto !important; padding: 10px !important; }
  main { width: calc(100% - 20px) !important; padding-top: 118px !important; }
  .brand { min-width: 0 !important; }
  .search { order: 5; flex-basis: 100% !important; max-width: none !important; }
  .greeting-section,
  .greeting { min-height: 0 !important; }
  .greeting { padding: 22px !important; }
  .greeting::before { position: static !important; display: block !important; margin-bottom: 14px !important; }
  .greeting .date { margin-top: 0 !important; }
  .greeting h1 { font-size: clamp(32px, 10vw, 46px) !important; }
  .clock { min-width: 0 !important; width: 100% !important; }
  .app-grid { grid-template-columns: 1fr !important; }
  .app-card { min-height: 128px !important; }
}