/* Afterhrs Radar v2.09 — solid dashboard and navigation system. */
:root {
  --v209-canvas: #070d15;
  --v209-sidebar: #0b1420;
  --v209-surface: #101c2a;
  --v209-surface-raised: #152437;
  --v209-surface-active: #173a52;
  --v209-line: #2c425a;
  --v209-line-strong: #416482;
  --v209-text: #f4f8fc;
  --v209-muted: #a9bacb;
  --v209-accent: #5edcf3;
  --v209-accent-strong: #1daee0;
  --v209-good: #83d9b6;
  --v209-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

html[data-hq-theme="velvet_day"] {
  --v209-canvas: #f1ece9;
  --v209-sidebar: #e6dcd8;
  --v209-surface: #fffaf7;
  --v209-surface-raised: #f4e8e4;
  --v209-surface-active: #ead4d8;
  --v209-line: #cdb9bd;
  --v209-line-strong: #ad8f98;
  --v209-text: #2d2028;
  --v209-muted: #675760;
  --v209-accent: #8d3558;
  --v209-accent-strong: #7a294a;
  --v209-good: #32745f;
  --v209-shadow: 0 14px 28px rgba(70, 42, 54, 0.12);
}

/* Desktop sidebar: always present, substantial, and made of solid blocks. */
@media (min-width: 951px) {
  html[data-text-size] body.owner-mode.owner-dashboard-v2-ready .shell {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  html[data-text-size] body.owner-mode.owner-dashboard-v2-ready .sidebar {
    display: flex !important;
    width: 300px !important;
    transform: none !important;
  }

  html[data-text-size="largest"] body.owner-mode.owner-dashboard-v2-ready .shell {
    grid-template-columns: 330px minmax(0, 1fr) !important;
  }

  html[data-text-size="largest"] body.owner-mode.owner-dashboard-v2-ready .sidebar {
    width: 330px !important;
  }

  body.owner-mode.owner-dashboard-v2-ready.hq-sidebar-collapsed .shell {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  body.owner-mode.owner-dashboard-v2-ready.hq-sidebar-collapsed .sidebar {
    display: flex !important;
    width: 96px !important;
    padding-inline: 12px !important;
  }

  body.owner-mode.owner-dashboard-v2-ready main {
    grid-column: 2 !important;
  }
}

body.owner-mode.owner-dashboard-v2-ready .sidebar,
body.creator-mode .sidebar,
body.agency-mode .sidebar {
  border-right: 1px solid var(--v209-line) !important;
  background: var(--v209-sidebar) !important;
  box-shadow: 12px 0 30px rgba(0, 0, 0, 0.2) !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar nav {
  gap: 10px !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-section-label {
  display: block !important;
  margin: 14px 4px 2px !important;
  color: var(--v209-muted) !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-item,
body.owner-mode.owner-dashboard-v2-ready .od-owner-nav button {
  width: 100% !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 8px !important;
  background: var(--v209-surface) !important;
  color: var(--v209-text) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-item:hover,
:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-item:focus-visible,
body.owner-mode.owner-dashboard-v2-ready .od-owner-nav button:hover,
body.owner-mode.owner-dashboard-v2-ready .od-owner-nav button:focus-visible {
  border-color: var(--v209-line-strong) !important;
  background: var(--v209-surface-raised) !important;
  transform: translateY(-1px);
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-item.active,
body.owner-mode.owner-dashboard-v2-ready .od-owner-nav button.active {
  border-color: var(--v209-accent) !important;
  background: var(--v209-surface-active) !important;
  color: var(--v209-text) !important;
  box-shadow: inset 5px 0 0 var(--v209-accent), 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .nav-item > span,
body.owner-mode.owner-dashboard-v2-ready .od-owner-nav button > span {
  color: var(--v209-accent) !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .agency-switcher,
:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .sidebar-promo-card,
:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .user-chip {
  border: 1px solid var(--v209-line) !important;
  border-radius: 8px !important;
  background: var(--v209-surface) !important;
  padding: 14px !important;
}

:where(body.owner-mode, body.creator-mode, body.agency-mode) .sidebar .sidebar-logout {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 10px !important;
  border: 1px solid var(--v209-line-strong) !important;
  border-radius: 8px !important;
  background: var(--v209-surface-raised) !important;
  color: var(--v209-text) !important;
}

/* Chatter navigation uses the same solid rectangular language. */
body.hq-theme .portal-menu {
  padding: 16px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 10px !important;
  background: var(--v209-sidebar) !important;
  box-shadow: var(--v209-shadow) !important;
}

body.hq-theme .portal-menu nav {
  gap: 10px !important;
}

body.hq-theme .portal-menu nav button {
  min-height: 56px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 7px !important;
  background: var(--v209-surface) !important;
  color: var(--v209-text) !important;
  box-shadow: none !important;
}

body.hq-theme .portal-menu nav button:hover,
body.hq-theme .portal-menu nav button:focus-visible {
  border-color: var(--v209-line-strong) !important;
  background: var(--v209-surface-raised) !important;
}

body.hq-theme .portal-menu nav button.active {
  border-color: var(--v209-accent) !important;
  background: var(--v209-surface-active) !important;
  color: var(--v209-text) !important;
  box-shadow: inset 5px 0 0 var(--v209-accent) !important;
}

/* Agency dashboard: clear solid layers instead of floating translucent pieces. */
body.owner-mode.owner-dashboard-v2-ready {
  background: var(--v209-canvas) !important;
}

.agency-hq-home,
.os-page {
  display: grid !important;
  gap: 20px !important;
}

.agency-hq-home .hq-topbar,
.os-page > .os-head {
  height: auto !important;
  min-height: 0 !important;
  padding: 24px 26px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 12px !important;
  background: var(--v209-surface) !important;
  box-shadow: var(--v209-shadow) !important;
}

.agency-hq-home .hq-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.85fr) !important;
  align-items: center !important;
}

.agency-hq-home .hq-topbar > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.agency-hq-home .hq-topbar .hq-theme-picker {
  grid-column: 1 / -1;
  width: 100%;
}

.agency-hq-home .hq-topbar .hq-theme-picker select,
.agency-hq-home .hq-topbar > div:last-child > button {
  width: 100% !important;
}

.agency-hq-home .hq-command-bar,
.agency-hq-home .hq-focus-strip,
.agency-hq-home .hq-card,
.os-page .os-card,
.os-page .hq-card {
  border: 1px solid var(--v209-line) !important;
  border-radius: 12px !important;
  background: var(--v209-surface) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.agency-hq-home .hq-morning-brief {
  padding: 18px 20px !important;
  border: 1px solid var(--v209-line) !important;
  border-left: 6px solid var(--v209-good) !important;
  border-radius: 9px !important;
  background: var(--v209-surface-raised) !important;
}

.agency-hq-home .hq-focus-strip {
  padding: 24px !important;
}

.agency-hq-home .hq-focus-strip > nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

.agency-hq-home .hq-focus-strip > nav button {
  border: 1px solid var(--v209-line) !important;
  border-radius: 7px !important;
  background: var(--v209-surface-raised) !important;
}

.agency-hq-home .hq-focus-strip > nav button.active {
  border-color: var(--v209-accent) !important;
  background: var(--v209-surface-active) !important;
  box-shadow: none !important;
}

.agency-hq-home :is(.hq-priority, .hq-attention-row, .hq-shift-row, .hq-outcomes article, .hq-pin, .hq-resource) {
  border-color: var(--v209-line) !important;
  border-radius: 8px !important;
  background: var(--v209-surface-raised) !important;
}

.agency-hq-home .hq-creator-pulse {
  border-color: var(--v209-line) !important;
  background: var(--v209-surface) !important;
}

/* Resource Library redesign. */
.hq-resource-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hq-resource-overview article {
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--v209-line);
  border-radius: 10px;
  background: var(--v209-surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.hq-resource-overview span,
.hq-resource-overview small {
  color: var(--v209-muted);
}

.hq-resource-overview strong {
  color: var(--v209-accent);
  font-size: var(--ahr-kpi-size) !important;
  line-height: 1 !important;
}

.hq-resource-layout {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.hq-resource-categories {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--v209-line);
  border-radius: 10px;
  background: var(--v209-surface);
  box-shadow: var(--v209-shadow);
}

.hq-resource-categories header {
  display: grid;
  gap: 7px;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 0 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.hq-resource-categories nav {
  display: grid;
  gap: 9px;
}

.hq-resource-categories nav button {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center !important;
  min-height: 58px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 7px !important;
  background: var(--v209-surface-raised) !important;
  color: var(--v209-text) !important;
}

.hq-resource-categories nav button:hover,
.hq-resource-categories nav button:focus-visible {
  border-color: var(--v209-line-strong) !important;
}

.hq-resource-categories nav button.active {
  border-color: var(--v209-accent) !important;
  background: var(--v209-surface-active) !important;
  box-shadow: inset 5px 0 0 var(--v209-accent) !important;
}

.hq-resource-category-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--v209-line-strong);
  border-radius: 6px;
  background: var(--v209-sidebar);
  color: var(--v209-accent);
  font-weight: 900;
}

.hq-resource-categories nav button > strong {
  display: grid;
  min-width: 34px;
  min-height: 34px;
  place-items: center;
  border-radius: 6px;
  background: var(--v209-sidebar);
  color: var(--v209-muted);
}

.hq-resource-tip {
  padding: 15px;
  border: 1px solid var(--v209-line);
  border-radius: 7px;
  background: var(--v209-sidebar);
}

.hq-resource-tip p {
  margin: 7px 0 0;
  color: var(--v209-muted);
}

.hq-resource-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.hq-resource-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid var(--v209-line) !important;
  border-radius: 10px !important;
  background: var(--v209-surface) !important;
}

.hq-resource-search {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hq-resource-search > span {
  color: var(--v209-accent);
  font-weight: 900;
}

.hq-resource-search input {
  width: 100% !important;
  border-color: var(--v209-line-strong) !important;
  background: var(--v209-sidebar) !important;
}

.hq-resource-result-count {
  padding: 11px 14px;
  border: 1px solid var(--v209-line);
  border-radius: 7px;
  background: var(--v209-surface-raised);
  color: var(--v209-muted);
  white-space: nowrap;
}

.hq-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hq-resource {
  display: grid;
  gap: 14px;
  min-height: 240px;
  padding: 18px;
  border: 1px solid var(--v209-line) !important;
  border-radius: 10px !important;
  background: var(--v209-surface) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.hq-resource footer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  margin-top: auto;
}

.hq-resource footer :is(a, button) {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v209-line) !important;
  border-radius: 7px !important;
  background: var(--v209-surface-raised) !important;
  color: var(--v209-text) !important;
  text-decoration: none;
}

.hq-resource-empty {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 280px;
  padding: 34px;
  border: 2px dashed var(--v209-line-strong);
  border-radius: 12px;
  background: var(--v209-surface);
}

.hq-resource-empty-icon {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid var(--v209-accent);
  border-radius: 10px;
  background: var(--v209-surface-active);
  color: var(--v209-accent);
  font-size: 44px !important;
  font-weight: 300;
}

.hq-resource-empty h3 {
  margin: 8px 0;
}

.hq-resource-empty p {
  margin: 0;
  color: var(--v209-muted);
}

@media (max-width: 1250px) {
  .agency-hq-home .hq-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hq-resource-layout {
    grid-template-columns: 1fr;
  }

  .hq-resource-categories {
    position: static;
  }

  .hq-resource-categories nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .agency-hq-home .hq-topbar,
  .os-page > .os-head {
    padding: 20px 16px !important;
  }

  .hq-resource-overview,
  .hq-resource-grid,
  .hq-resource-categories nav,
  .hq-resource-toolbar,
  .hq-resource-empty {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hq-resource-result-count {
    width: 100%;
  }

  .hq-resource-empty {
    justify-items: center;
    min-height: 0;
    padding: 28px 18px;
  }

  .hq-resource-empty button {
    width: 100%;
  }

  .hq-resource footer {
    grid-template-columns: 1fr;
  }
}