/* ======================================================================
   AESTHETIC INTEL — HOK FINANCE PRO UI
   ----------------------------------------------------------------------
   A UI-only redesign inspired by the supplied HOK Finance Dashboard.
   It intentionally preserves all existing PHP routes, forms, data hooks,
   integration logic and JavaScript selectors.
   ====================================================================== */

:root {
  --hok-rail: #181b1e;
  --hok-rail-2: #22262a;
  --hok-side: #eaf1f6;
  --hok-side-deep: #dce7ee;
  --hok-canvas: #f7fafc;
  --hok-card: #ffffff;
  --hok-card-soft: #f1f6f9;
  --hok-ink: #11171b;
  --hok-ink-soft: #263139;
  --hok-muted: #6f7d86;
  --hok-muted-2: #93a0a8;
  --hok-line: #dbe4ea;
  --hok-line-soft: #e8eef2;
  --hok-black-card: #1b1f22;
  --hok-blue-card: #dce7ef;
  --hok-accent: #1f3d53;
  --hok-success: #4e8b73;
  --hok-danger: #a2534e;
  --hok-warning: #a7833f;
  --hok-shadow-soft: 0 14px 38px rgba(44, 63, 75, .065);
  --hok-shadow-float: 0 18px 50px rgba(36, 50, 59, .11);
  --hok-rail-width: 72px;
  --hok-sidebar-width: 282px;
  --hok-radius-xl: 18px;
  --hok-radius-lg: 14px;
  --hok-radius-md: 11px;
  --hok-radius-sm: 8px;
}

/* ----------------------------------------------------------------------
   Base / canvas
   ---------------------------------------------------------------------- */
html,
body {
  background: var(--hok-canvas) !important;
}

body {
  color: var(--hok-ink) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px;
  letter-spacing: -.01em;
}

.app-body {
  min-height: 100vh;
  padding: 0 !important;
  background: var(--hok-canvas) !important;
}

.app-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: var(--hok-sidebar-width) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hok-canvas) !important;
  box-shadow: none !important;
}

.main-content,
.app-content {
  min-width: 0 !important;
  width: 100% !important;
  padding: 30px clamp(26px, 3vw, 46px) 72px !important;
  color: var(--hok-ink) !important;
  background: var(--hok-canvas) !important;
  border-radius: 0 !important;
}

.main-content > *,
.app-content > * {
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}

::selection {
  color: #fff;
  background: #263a48;
}

a {
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------
   Sidebar — dark icon rail + pale contextual navigation panel
   ---------------------------------------------------------------------- */
.sidebar,
body.sidebar-expanded .sidebar,
body:not(.sidebar-expanded) .sidebar,
.sidebar:hover,
.sidebar:focus-within {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  width: var(--hok-sidebar-width) !important;
  min-width: var(--hok-sidebar-width) !important;
  max-width: var(--hok-sidebar-width) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 14px 16px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--hok-ink) !important;
  background:
    linear-gradient(90deg,
      var(--hok-rail) 0,
      var(--hok-rail) var(--hok-rail-width),
      var(--hok-side) var(--hok-rail-width),
      var(--hok-side) 100%) !important;
  border: 0 !important;
  border-right: 1px solid #d5e0e7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

.sidebar-desktop-toggle {
  display: none !important;
}

.sidebar-brand,
body.sidebar-expanded .sidebar-brand,
body:not(.sidebar-expanded) .sidebar-brand,
.sidebar:hover .sidebar-brand,
.sidebar:focus-within .sidebar-brand {
  width: 100% !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 18px 12px 13px 10px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: stretch !important;
  color: var(--hok-ink) !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.sidebar .brand-mark {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar .brand-mark img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) opacity(.92);
}

.sidebar .brand-copy,
body.sidebar-expanded .sidebar .brand-copy,
body:not(.sidebar-expanded) .sidebar .brand-copy,
.sidebar:hover .brand-copy,
.sidebar:focus-within .brand-copy {
  display: grid !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  line-height: 1.15;
}

.sidebar .brand-copy strong {
  color: #172027 !important;
  font-size: .96rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
}

.sidebar .brand-copy small {
  margin-top: 5px;
  color: #7d8b94 !important;
  font-size: .66rem !important;
  font-weight: 650 !important;
  letter-spacing: .025em;
}

.sidebar .nav-list,
body.sidebar-expanded .sidebar .nav-list,
body:not(.sidebar-expanded) .sidebar .nav-list,
.sidebar:hover .nav-list,
.sidebar:focus-within .nav-list {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 0 8px !important;
  display: block !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #bdcbd3 transparent;
}

.sidebar .nav-section-label,
body.sidebar-expanded .sidebar .nav-section-label,
body:not(.sidebar-expanded) .sidebar .nav-section-label,
.sidebar:hover .nav-section-label,
.sidebar:focus-within .nav-section-label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 15px 0 7px calc(var(--hok-rail-width) + 15px) !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #8a979f !important;
  font-size: .58rem !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.sidebar .nav-link,
.sidebar .nav-group-title,
body.sidebar-expanded .sidebar .nav-link,
body.sidebar-expanded .sidebar .nav-group-title,
body:not(.sidebar-expanded) .sidebar .nav-link,
body:not(.sidebar-expanded) .sidebar .nav-group-title,
.sidebar:hover .nav-link,
.sidebar:hover .nav-group-title,
.sidebar:focus-within .nav-link,
.sidebar:focus-within .nav-group-title {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 45px !important;
  margin: 1px 0 !important;
  padding: 0 12px 0 10px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 18px !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: stretch !important;
  color: #37444c !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none !important;
  font-size: .79rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  transition: background .16s ease, color .16s ease !important;
}

.sidebar .nav-link::before,
.sidebar .nav-group-title::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  z-index: 0;
  width: 52px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 9px;
  background: transparent;
  transition: background .16s ease, transform .16s ease;
  pointer-events: none;
}

.sidebar .nav-link::after {
  content: "";
  position: absolute;
  left: 64px;
  top: 50%;
  width: 13px;
  height: 30px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  border-radius: 8px 0 0 8px;
  background: var(--hok-side);
  transition: transform .16s ease;
  pointer-events: none;
}

.sidebar .nav-link:hover,
.sidebar .nav-group-title:hover {
  color: #101619 !important;
  background: linear-gradient(90deg, transparent 0, transparent var(--hok-rail-width), rgba(255,255,255,.42) var(--hok-rail-width), rgba(255,255,255,.42) 100%) !important;
}

.sidebar .nav-link:hover::before,
.sidebar .nav-group-title:hover::before {
  background: #262b2f;
}

.sidebar .nav-link.active {
  color: #11171b !important;
  background: linear-gradient(90deg, transparent 0, transparent var(--hok-rail-width), rgba(255,255,255,.72) var(--hok-rail-width), rgba(255,255,255,.72) 100%) !important;
}

.sidebar .nav-link.active::before {
  background: #ffffff !important;
  box-shadow: 0 7px 16px rgba(0,0,0,.16);
}

.sidebar .nav-link.active::after {
  transform: translateY(-50%) scaleX(1);
}

.sidebar .nav-icon,
body.sidebar-expanded .sidebar .nav-icon,
body:not(.sidebar-expanded) .sidebar .nav-icon {
  position: relative !important;
  z-index: 2 !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  margin: 0 auto !important;
  color: #c4cdd2 !important;
  opacity: 1 !important;
}

.sidebar .nav-link:hover .nav-icon,
.sidebar .nav-group-title:hover .nav-icon {
  color: #ffffff !important;
}

.sidebar .nav-link.active .nav-icon {
  color: #181b1e !important;
}

.sidebar .nav-link > .nav-text,
.sidebar .nav-group-title > .nav-text,
body.sidebar-expanded .sidebar .nav-link > .nav-text,
body.sidebar-expanded .sidebar .nav-group-title > .nav-text,
body:not(.sidebar-expanded) .sidebar .nav-link > .nav-text,
body:not(.sidebar-expanded) .sidebar .nav-group-title > .nav-text,
.sidebar:hover .nav-link > .nav-text,
.sidebar:hover .nav-group-title > .nav-text,
.sidebar:focus-within .nav-link > .nav-text,
.sidebar:focus-within .nav-group-title > .nav-text {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar .nav-group {
  width: 100% !important;
}

.sidebar .nav-group-title .nav-icon:last-child {
  width: 13px !important;
  height: 13px !important;
  margin-left: auto !important;
  color: #7f8d95 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar .nav-group.open .nav-group-title .nav-icon:last-child {
  transform: rotate(90deg) !important;
}

.sidebar .nav-submenu,
body.sidebar-expanded .sidebar .nav-group.open .nav-submenu,
body:not(.sidebar-expanded) .sidebar .nav-group.open .nav-submenu {
  position: static !important;
  width: auto !important;
  margin: 2px 0 7px calc(var(--hok-rail-width) + 12px) !important;
  padding: 4px 0 4px 12px !important;
  display: grid !important;
  gap: 2px !important;
  border: 0 !important;
  border-left: 1px solid #cbd7de !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.sidebar .nav-group:not(.open) .nav-submenu {
  display: none !important;
}

.sidebar .nav-sublink {
  min-height: 34px !important;
  padding: 7px 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #5a6871 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: .69rem !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
}

.sidebar .nav-sublink:hover,
.sidebar .nav-sublink.active {
  color: #182025 !important;
  background: rgba(255,255,255,.75) !important;
}

.sidebar .nav-sublink > span:first-child {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  border: 1px solid #ccd8df;
  border-radius: 7px;
  color: #53626b;
  background: rgba(255,255,255,.62);
  font-size: .52rem;
  font-weight: 850;
}

.sidebar .nav-beta-badge,
.sidebar .boulevard-api-nav__badge {
  margin-left: auto;
  padding: 3px 5px;
  color: #66747d;
  background: #dce5ea;
  border: 0;
  border-radius: 5px;
  font-size: .47rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
}

.sidebar-user {
  width: 100% !important;
  min-height: 72px !important;
  margin: auto 0 0 !important;
  padding: 12px 11px 0 10px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 30px !important;
  gap: 16px !important;
  align-items: center !important;
  border: 0 !important;
  border-top: 1px solid rgba(37, 50, 57, .09) !important;
  background: transparent !important;
}

.sidebar-user .avatar {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  color: #181b1e !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.16) !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
}

.sidebar-user-copy,
body.sidebar-expanded .sidebar-user-copy,
body:not(.sidebar-expanded) .sidebar-user-copy {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sidebar-user-copy strong {
  display: block;
  overflow: hidden;
  color: #172027 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-user-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #7a8992 !important;
  font-size: .57rem !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-logout {
  width: 29px !important;
  height: 29px !important;
  display: grid !important;
  place-items: center !important;
  color: #65747d !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid #cfdae0 !important;
  border-radius: 8px !important;
}

.sidebar-logout:hover {
  color: #11171b !important;
  background: #fff !important;
}

.sidebar-logout .nav-icon {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

.mobile-app-bar,
.sidebar-scrim {
  display: none;
}

/* ----------------------------------------------------------------------
   Page typography / controls
   ---------------------------------------------------------------------- */
.page-head,
.page-heading {
  margin: 0 0 22px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 0 !important;
  background: transparent !important;
}

.page-head h1,
.page-heading h1 {
  margin: 2px 0 0 !important;
  color: #101619 !important;
  font-size: clamp(1.85rem, 2.35vw, 2.8rem) !important;
  font-weight: 820 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.page-head p,
.page-heading p {
  max-width: 760px;
  margin: 9px 0 0 !important;
  color: #75838c !important;
  font-size: .78rem !important;
  line-height: 1.55 !important;
}

.eyebrow {
  color: #71808a !important;
  font-size: .58rem !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.btn,
button.btn,
a.btn {
  min-height: 37px !important;
  padding: 9px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #172027 !important;
  background: #edf3f6 !important;
  border: 1px solid #d7e1e7 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: .7rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  transform: translateY(-1px) !important;
  color: #11171b !important;
  background: #e5edf2 !important;
  border-color: #c9d6de !important;
}

.btn-primary,
a.btn-primary,
button.btn-primary {
  color: #ffffff !important;
  background: #1c2023 !important;
  border-color: #1c2023 !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  color: #fff !important;
  background: #2b3034 !important;
  border-color: #2b3034 !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  color: #2b363d !important;
  background: #f7fafc !important;
  border-color: #d9e3e9 !important;
}

.btn-danger,
a.btn-danger,
button.btn-danger {
  color: #fff !important;
  background: #934b47 !important;
  border-color: #934b47 !important;
}

.btn-small {
  min-height: 31px !important;
  padding: 7px 10px !important;
  font-size: .63rem !important;
}

input,
select,
textarea {
  color: #182127 !important;
  background: #fbfdfe !important;
  border: 1px solid #d7e1e7 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #91a6b4 !important;
  box-shadow: 0 0 0 3px rgba(74, 98, 113, .09) !important;
  outline: 0 !important;
}

label {
  color: #36434b;
}

/* ----------------------------------------------------------------------
   Core card system — intentionally flatter and denser like the reference
   ---------------------------------------------------------------------- */
.panel,
.content-card,
.form-panel,
.kpi-card,
.source-card,
.empty-state,
.alert,
.feature-panel {
  border: 1px solid var(--hok-line) !important;
  border-radius: var(--hok-radius-lg) !important;
  background: var(--hok-card) !important;
  box-shadow: none !important;
}

.panel,
.content-card,
.form-panel {
  padding: 18px !important;
}

.panel-head,
.card-head {
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 0 !important;
}

.panel-head h2,
.card-head h2,
.panel h2,
.content-card h2 {
  color: #152027 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

.muted,
.panel p,
.content-card p {
  color: #71808a;
}

.kpi-grid {
  gap: 12px !important;
}

.kpi-card {
  position: relative !important;
  min-height: 122px !important;
  padding: 15px !important;
  overflow: hidden !important;
}

.kpi-card::before {
  display: none !important;
}

.kpi-card small {
  color: #77858e !important;
  font-size: .62rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.kpi-card strong {
  margin-top: 8px !important;
  color: #12181c !important;
  font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
  font-weight: 820 !important;
  letter-spacing: -.05em !important;
}

.table-wrap {
  overflow: auto !important;
  border: 1px solid #dce5ea !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

table {
  width: 100%;
  border-collapse: collapse !important;
  color: #253038 !important;
  background: #fff !important;
}

thead th {
  padding: 11px 12px !important;
  color: #78858d !important;
  background: #f3f7f9 !important;
  border-bottom: 1px solid #dce5ea !important;
  font-size: .57rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

tbody td {
  padding: 11px 12px !important;
  color: #334048 !important;
  border-bottom: 1px solid #e8eef2 !important;
  font-size: .7rem !important;
}

tbody tr:last-child td {
  border-bottom: 0 !important;
}

tbody tr:hover td {
  background: #f8fbfc !important;
}

.status,
.validation-badge {
  border-radius: 999px !important;
  font-size: .55rem !important;
  font-weight: 850 !important;
}

/* ----------------------------------------------------------------------
   HOK-style business dashboard
   ---------------------------------------------------------------------- */
.page-business-dashboard .main-content {
  padding-top: 26px !important;
}

.hok-dashboard {
  display: grid !important;
  gap: 18px !important;
}

.hok-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 2px;
}

.hok-dashboard-heading {
  min-width: 0;
}

.hok-dashboard-heading .hok-kicker {
  display: block;
  margin-bottom: 5px;
  color: #697982;
  font-size: .62rem;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hok-dashboard-heading h1 {
  margin: 0;
  color: #11171b;
  font-size: clamp(2rem, 3vw, 3.15rem);
  font-weight: 820;
  line-height: .98;
  letter-spacing: -.065em;
}

.hok-dashboard-heading p {
  max-width: 720px;
  margin: 10px 0 0;
  color: #76848d;
  font-size: .77rem;
  line-height: 1.55;
}

.hok-dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.hok-period-box {
  min-width: 204px;
  padding: 7px 9px 7px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #fff;
}

.hok-period-box label {
  color: #89969e;
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hok-period-box select {
  min-height: 27px !important;
  padding: 0 24px 0 0 !important;
  color: #202a30 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: .68rem !important;
  font-weight: 760 !important;
}

.hok-period-context {
  display: none;
}

.hok-source-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hok-line);
  border-radius: 12px;
  background: #fff;
}

.hok-source-health .ai-live-source-state {
  min-height: 58px;
  padding: 11px 13px !important;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #74828b;
  border: 0 !important;
  border-right: 1px solid var(--hok-line) !important;
  background: transparent !important;
}

.hok-source-health .ai-live-source-state:last-child {
  border-right: 0 !important;
}

.hok-source-health .ai-live-source-state strong {
  color: #263139;
  font-size: .66rem;
  font-weight: 800;
}

.hok-source-health .ai-live-source-state small {
  margin-top: 2px;
  font-size: .56rem;
}

.ai-live-source-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.ai-live-source-state.is-live .ai-live-source-dot,
.ai-live-source-state.is-ready .ai-live-source-dot {
  color: var(--hok-success) !important;
  background: var(--hok-success) !important;
}

.ai-live-source-state.is-error .ai-live-source-dot {
  color: var(--hok-danger) !important;
  background: var(--hok-danger) !important;
}

.ai-live-source-state.is-loading .ai-live-source-dot {
  color: var(--hok-warning) !important;
  background: var(--hok-warning) !important;
}

.hok-dashboard-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(300px, .82fr);
  gap: 14px;
  align-items: stretch;
}

.hok-performance-card,
.hok-connections-card,
.hok-operations-card,
.hok-insight-card {
  border: 1px solid var(--hok-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.hok-performance-card {
  min-height: 392px;
  padding: 19px 20px 18px;
  display: flex;
  flex-direction: column;
}

.hok-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.hok-card-head small {
  display: block;
  color: #8b979f;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hok-card-head h2 {
  margin: 4px 0 0;
  color: #151b1f;
  font-size: 1.02rem;
  font-weight: 820;
  letter-spacing: -.025em;
}

.hok-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: #4a7e69;
  background: #edf6f1;
  border: 1px solid #d5e8df;
  border-radius: 999px;
  font-size: .54rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hok-live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b957d;
}

.hok-primary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hok-line-soft);
  border-bottom: 1px solid var(--hok-line-soft);
}

.hok-primary-metric {
  min-width: 0;
  min-height: 134px;
  padding: 17px 16px 15px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hok-line-soft);
  background: #fff;
}

.hok-primary-metric:last-child {
  border-right: 0;
}

.hok-primary-metric small {
  color: #7f8c94;
  font-size: .61rem;
  font-weight: 730;
}

.hok-primary-metric strong {
  margin-top: 10px;
  color: #12181c;
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 820;
  line-height: 1;
  letter-spacing: -.055em;
}

.hok-primary-metric .ai-snapshot-trend {
  margin-top: auto;
  padding-top: 10px;
  font-size: .58rem;
  font-weight: 760;
}

.hok-primary-metric em {
  margin-top: 4px;
  color: #97a2a9;
  font-size: .5rem;
  font-style: normal;
}

.hok-secondary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.hok-secondary-metric {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--hok-line-soft);
  border-radius: 9px;
  background: #f6f9fb;
}

.hok-secondary-metric span {
  color: #84919a;
  font-size: .56rem;
  font-weight: 720;
}

.hok-secondary-metric strong {
  color: #202a30;
  font-size: .92rem;
  font-weight: 820;
  letter-spacing: -.025em;
}

.hok-connections-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.hok-connection-stack {
  display: grid;
  gap: 10px;
}

.hok-connection-card {
  position: relative;
  min-height: 105px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #172027;
  background: var(--hok-blue-card);
  border: 0;
  border-radius: 11px;
}

.hok-connection-card:first-child {
  color: #fff;
  background: var(--hok-black-card);
}

.hok-connection-card:first-child .hok-connection-kicker,
.hok-connection-card:first-child .hok-connection-note,
.hok-connection-card:first-child .hok-connection-status {
  color: rgba(255,255,255,.7) !important;
}

.hok-connection-card:first-child .hok-connection-status.is-connected {
  color: #9dd1b8 !important;
}

.hok-connection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hok-connection-kicker {
  color: #637580;
  font-size: .51rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hok-connection-head h3 {
  margin: 4px 0 0;
  color: inherit;
  font-size: .86rem;
  font-weight: 820;
}

.hok-connection-status {
  color: #64747d;
  font-size: .51rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hok-connection-status.is-connected {
  color: #4c816b;
}

.hok-connection-status.is-error {
  color: #a2534e;
}

.hok-connection-metrics {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hok-connection-metrics div {
  display: grid;
  gap: 2px;
}

.hok-connection-metrics span {
  color: inherit;
  opacity: .62;
  font-size: .49rem;
  font-weight: 700;
}

.hok-connection-metrics strong {
  color: inherit;
  font-size: .75rem;
  font-weight: 820;
}

.hok-connection-note {
  display: none;
}

.hok-connection-links {
  margin-top: 9px;
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}

.hok-connection-links a {
  color: inherit;
  opacity: .72;
  font-size: .54rem;
  font-weight: 760;
  text-decoration: none;
}

.hok-connection-links a:hover {
  opacity: 1;
}

.hok-dashboard-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
  gap: 14px;
}

.hok-operations-card,
.hok-insight-card {
  min-height: 300px;
  padding: 18px;
}

.hok-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}

.hok-metric-row {
  min-width: 0;
  min-height: 55px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label value" "change change";
  gap: 3px 12px;
  align-items: center;
  border-bottom: 1px solid var(--hok-line-soft);
}

.hok-metric-row:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.hok-metric-row > span {
  grid-area: label;
  color: #77858e;
  font-size: .6rem;
  font-weight: 720;
}

.hok-metric-row > strong {
  grid-area: value;
  color: #182127;
  font-size: .83rem;
  font-weight: 820;
}

.hok-metric-row > em {
  grid-area: change;
  color: #87949c;
  font-size: .52rem;
  font-style: normal;
  font-weight: 730;
}

.hok-metric-row > em.is-positive,
.ai-snapshot-trend.is-positive {
  color: var(--hok-success) !important;
}

.hok-metric-row > em.is-negative,
.ai-snapshot-trend.is-negative {
  color: var(--hok-danger) !important;
}

.hok-insights {
  display: grid;
  gap: 0;
}

.hok-insights .ai-live-insight,
.hok-insights .ai-live-insight-loading {
  min-height: 0 !important;
  padding: 11px 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  color: #263139 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hok-line-soft) !important;
  border-radius: 0 !important;
}

.hok-insights .ai-live-insight:last-child {
  border-bottom: 0 !important;
}

.hok-insights .ai-live-insight > span:first-child {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  color: #1b2429 !important;
  background: #e8eef2 !important;
  border-radius: 50% !important;
  font-size: .58rem !important;
  font-weight: 850 !important;
}

.hok-insights .ai-live-insight.is-high > span:first-child,
.hok-insights .ai-live-insight.is-negative > span:first-child {
  color: #8e4743 !important;
  background: #f6e8e7 !important;
}

.hok-insights .ai-live-insight.is-positive > span:first-child,
.hok-insights .ai-live-insight.is-low > span:first-child {
  color: #447762 !important;
  background: #e7f1ec !important;
}

.hok-insights .ai-live-insight small {
  color: #89959c !important;
  font-size: .49rem !important;
  font-weight: 850 !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
}

.hok-insights .ai-live-insight strong {
  display: block !important;
  margin-top: 2px;
  color: #1b2429 !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
}

.hok-insights .ai-live-insight p {
  margin: 3px 0 0 !important;
  color: #71808a !important;
  font-size: .58rem !important;
  line-height: 1.4 !important;
}

.hok-dashboard .ai-live-no-sources {
  padding: 15px 16px !important;
  border: 1px solid #eadfbf !important;
  border-radius: 11px !important;
  background: #fffaf0 !important;
}

.hok-weekly-brief {
  margin: 0 !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  color: #fff !important;
  background: #1c2023 !important;
  border: 0 !important;
  border-radius: 12px !important;
}

.hok-weekly-brief .ai-focus-brief-mark {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: #1c2023 !important;
  background: #fff !important;
  border-radius: 50% !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
}

.hok-weekly-brief .ai-focus-brief-copy span,
.hok-weekly-brief .ai-focus-brief-copy p {
  color: rgba(255,255,255,.65) !important;
}

.hok-weekly-brief .ai-focus-brief-copy h2 {
  color: #fff !important;
}

.hok-weekly-brief .btn-primary {
  color: #1c2023 !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Deep analysis stays functional but visually recedes from executive view. */
.ai-deep-analysis {
  overflow: hidden !important;
  margin-top: 2px !important;
  border: 1px solid var(--hok-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.ai-deep-analysis > summary {
  min-height: 64px !important;
  padding: 14px 17px !important;
  color: #263139 !important;
  background: #f2f6f8 !important;
  border: 0 !important;
  cursor: pointer;
}

.ai-deep-analysis > summary span:first-child {
  color: #7e8c94 !important;
  font-size: .55rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.ai-deep-analysis > summary strong {
  color: #1f292f !important;
  font-size: .69rem !important;
  font-weight: 770 !important;
}

.ai-deep-analysis-body {
  padding: 16px !important;
  background: #fff !important;
}

/* ----------------------------------------------------------------------
   Admin dashboard
   ---------------------------------------------------------------------- */
.page-admin-dashboard .ai-admin-page-head {
  align-items: flex-start !important;
}

.hok-admin-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(310px, .7fr);
  gap: 14px;
  margin-bottom: 14px;
}

.hok-admin-primary-card {
  min-height: 270px;
  padding: 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: #fff;
  background: #1b1f22;
  border-radius: 14px;
}

.hok-admin-primary-card .eyebrow {
  color: rgba(255,255,255,.55) !important;
}

.hok-admin-primary-card h2 {
  max-width: 650px;
  margin: 8px 0 0;
  color: #fff !important;
  font-size: clamp(1.55rem, 2.3vw, 2.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
}

.hok-admin-primary-card p {
  max-width: 680px;
  margin: 10px 0 0;
  color: rgba(255,255,255,.62) !important;
  font-size: .7rem !important;
  line-height: 1.55 !important;
}

.hok-admin-primary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.14);
}

.hok-admin-primary-stats div {
  padding: 14px 12px 0 0;
}

.hok-admin-primary-stats span {
  display: block;
  color: rgba(255,255,255,.5);
  font-size: .52rem;
  font-weight: 780;
}

.hok-admin-primary-stats strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 820;
  letter-spacing: -.04em;
}

.hok-admin-side-card {
  padding: 17px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hok-line);
  border-radius: 14px;
  background: var(--hok-side);
}

.hok-admin-side-card h3 {
  margin: 0;
  color: #1b252b;
  font-size: .88rem;
  font-weight: 820;
}

.hok-admin-side-card p {
  margin: 5px 0 14px;
  color: #71808a;
  font-size: .62rem;
  line-height: 1.5;
}

.hok-admin-quick-links {
  margin-top: auto;
  display: grid;
  gap: 7px;
}

.hok-admin-quick-links a {
  min-height: 43px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #263139;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(129,151,164,.22);
  border-radius: 8px;
  font-size: .65rem;
  font-weight: 760;
  text-decoration: none;
}

.hok-admin-quick-links a:hover {
  background: #fff;
}

.page-admin-dashboard .ai-admin-kpi-grid {
  margin-bottom: 14px !important;
}

.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) {
  color: #fff !important;
  background: #1b1f22 !important;
  border-color: #1b1f22 !important;
}

.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) small,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) strong,
.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(1) .ai-admin-kpi-note {
  color: #fff !important;
}

.page-admin-dashboard .ai-admin-kpi-grid .kpi-card:nth-child(2) {
  background: #dce7ef !important;
}

.ai-admin-kpi-note {
  margin-top: auto;
  color: #87949c !important;
  font-size: .55rem !important;
}

.page-admin-dashboard .ai-admin-intelligence-panel {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

.page-admin-dashboard .ai-admin-intelligence-head {
  padding: 19px !important;
  border-bottom: 1px solid var(--hok-line) !important;
}

.page-admin-dashboard .ai-admin-capability-grid {
  gap: 0 !important;
}

.page-admin-dashboard .ai-admin-capability-card {
  min-height: 210px !important;
  padding: 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--hok-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.page-admin-dashboard .ai-admin-capability-card:last-child {
  border-right: 0 !important;
}

/* ----------------------------------------------------------------------
   Integration / reporting / general inner pages
   ---------------------------------------------------------------------- */
.source-grid,
.integration-grid,
.card-grid {
  gap: 12px !important;
}

.source-card {
  min-height: 155px !important;
  padding: 15px !important;
}

.source-card:hover {
  transform: translateY(-1px) !important;
  border-color: #c8d5dc !important;
  box-shadow: var(--hok-shadow-soft) !important;
}

.source-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: #1f292f !important;
  background: #e8eff3 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.form-grid,
.form-stack {
  gap: 13px !important;
}

.form-panel label,
.content-card label {
  font-size: .65rem !important;
  font-weight: 760 !important;
}

.alert {
  padding: 12px 14px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
  line-height: 1.5 !important;
}

.alert-info {
  color: #35505f !important;
  background: #edf5f8 !important;
  border-color: #d3e2e9 !important;
}

.alert-success {
  color: #416d5c !important;
  background: #edf6f1 !important;
  border-color: #d6e8df !important;
}

.alert-danger,
.alert-error {
  color: #8d4a46 !important;
  background: #fbefee !important;
  border-color: #efd7d5 !important;
}

/* ----------------------------------------------------------------------
   Login — premium, quiet, client-facing
   ---------------------------------------------------------------------- */
.public-body.page-login,
.public-body.page-login-google {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 8%, rgba(193, 210, 221, .42), transparent 28rem),
    radial-gradient(circle at 92% 88%, rgba(206, 214, 232, .42), transparent 30rem),
    #edf3f6 !important;
}

.ai-login-shell {
  min-height: 100vh !important;
  padding: clamp(20px, 4vw, 54px) !important;
  display: grid !important;
  place-items: center !important;
}

.ai-login-frame {
  width: min(1180px, 100%) !important;
  min-height: 700px !important;
  display: grid !important;
  grid-template-columns: .92fr 1.08fr !important;
  overflow: hidden !important;
  border: 1px solid rgba(111, 133, 146, .2) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 30px 80px rgba(47, 65, 76, .13) !important;
}

.ai-login-story {
  position: relative !important;
  min-height: 700px !important;
  padding: 48px 46px 38px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: #fff !important;
  background: #1b1f22 !important;
}

.ai-login-story::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.018);
}

.ai-login-wordmark {
  position: relative;
  z-index: 2;
  width: 160px !important;
}

.ai-login-story-copy {
  position: relative;
  z-index: 2;
  margin-top: auto !important;
  max-width: 470px !important;
}

.ai-login-story-copy h2 {
  margin: 13px 0 13px !important;
  color: #fff !important;
  font-size: clamp(2.25rem, 4vw, 4rem) !important;
  font-weight: 790 !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

.ai-login-story-copy p {
  color: rgba(255,255,255,.66) !important;
  font-size: .82rem !important;
  line-height: 1.65 !important;
}

.ai-login-kicker {
  color: #a9c8d8 !important;
  font-size: .58rem !important;
  font-weight: 850 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.ai-login-mini-dashboard {
  position: relative;
  z-index: 2;
  margin-top: 24px !important;
  padding: 15px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(12px);
}

.ai-login-mini-grid > div {
  border-right-color: rgba(255,255,255,.12) !important;
}

.ai-login-mini-grid small,
.ai-login-mini-head span {
  color: rgba(255,255,255,.56) !important;
}

.ai-login-mini-grid strong {
  color: #fff !important;
}

.ai-login-source-row {
  position: relative;
  z-index: 2;
}

.ai-login-source-row span {
  color: rgba(255,255,255,.68) !important;
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.035) !important;
}

.ai-login-card {
  min-height: 700px !important;
  padding: clamp(50px, 7vw, 95px) clamp(42px, 7vw, 92px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: #1b2429 !important;
  background: #fff !important;
}

.ai-login-heading h1 {
  color: #13191d !important;
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
  font-weight: 810 !important;
  letter-spacing: -.055em !important;
}

.ai-login-heading p {
  color: #7d8a93 !important;
}

.ai-login-form label > span {
  color: #344148 !important;
  font-size: .66rem !important;
  font-weight: 760 !important;
}

.ai-login-form input {
  min-height: 50px !important;
  background: #fbfcfd !important;
}

.ai-login-primary {
  min-height: 50px !important;
  color: #fff !important;
  background: #1b1f22 !important;
  border-color: #1b1f22 !important;
  border-radius: 8px !important;
}

.google-config-warning {
  border: 1px solid #eadbb5 !important;
  border-radius: 9px !important;
  color: #795c27 !important;
  background: #fffaf0 !important;
}

/* ----------------------------------------------------------------------
   Floating controls
   ---------------------------------------------------------------------- */
.app-body .theme-toggle {
  position: fixed !important;
  top: 21px !important;
  right: 24px !important;
  bottom: auto !important;
  z-index: 180 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #37434b !important;
  background: #fff !important;
  border: 1px solid #dce5ea !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(39, 54, 64, .08) !important;
}

.app-body .theme-toggle .theme-label {
  display: none !important;
}

.app-body .theme-toggle svg {
  width: 15px !important;
  height: 15px !important;
}

.ai-cam-admin-button {
  border-radius: 12px !important;
  background: #1b1f22 !important;
  box-shadow: 0 14px 34px rgba(28, 31, 34, .18) !important;
}

/* ----------------------------------------------------------------------
   Dark mode remains supported without changing application behavior.
   ---------------------------------------------------------------------- */
html[data-theme="dark"] {
  --hok-canvas: #111517;
  --hok-card: #1a2024;
  --hok-card-soft: #20272c;
  --hok-side: #1d252a;
  --hok-side-deep: #283239;
  --hok-ink: #edf2f4;
  --hok-ink-soft: #d5dde1;
  --hok-muted: #95a2aa;
  --hok-line: #2c363c;
  --hok-line-soft: #252e33;
}

html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] body {
  background: var(--hok-canvas) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] body.sidebar-expanded .sidebar,
html[data-theme="dark"] body:not(.sidebar-expanded) .sidebar {
  background: linear-gradient(90deg, #111416 0, #111416 var(--hok-rail-width), #1d252a var(--hok-rail-width), #1d252a 100%) !important;
  border-right-color: #2d373c !important;
}

html[data-theme="dark"] .sidebar .brand-copy strong,
html[data-theme="dark"] .sidebar-user-copy strong,
html[data-theme="dark"] .sidebar .nav-link,
html[data-theme="dark"] .sidebar .nav-group-title,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .page-heading h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .content-card h2 {
  color: #edf2f4 !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .source-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .hok-performance-card,
html[data-theme="dark"] .hok-connections-card,
html[data-theme="dark"] .hok-operations-card,
html[data-theme="dark"] .hok-insight-card,
html[data-theme="dark"] .hok-source-health {
  color: #e8edef !important;
  background: #1a2024 !important;
  border-color: #2c363c !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #eef2f4 !important;
  background: #171d21 !important;
  border-color: #303b41 !important;
}

/* ----------------------------------------------------------------------
   Responsive behavior
   ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root {
    --hok-sidebar-width: 252px;
    --hok-rail-width: 66px;
  }

  .hok-dashboard-primary {
    grid-template-columns: minmax(0, 1.45fr) minmax(275px, .75fr);
  }

  .hok-dashboard-secondary {
    grid-template-columns: 1fr;
  }

  .hok-admin-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .app-shell {
    display: block !important;
  }

  .sidebar,
  body.sidebar-expanded .sidebar,
  body:not(.sidebar-expanded) .sidebar,
  .sidebar:hover,
  .sidebar:focus-within {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 300 !important;
    width: min(310px, 86vw) !important;
    min-width: min(310px, 86vw) !important;
    max-width: min(310px, 86vw) !important;
    height: 100dvh !important;
    transform: translateX(-103%) !important;
    transition: transform .22s ease !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 280 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: rgba(11, 16, 19, .44) !important;
    backdrop-filter: blur(2px);
    transition: opacity .2s ease, visibility .2s ease !important;
  }

  body.sidebar-open .sidebar-scrim {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-app-bar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 250 !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(247,250,252,.94) !important;
    border-bottom: 1px solid #dce5ea !important;
    backdrop-filter: blur(14px);
  }

  .mobile-menu {
    width: 37px !important;
    height: 37px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: #1b1f22 !important;
    border: 0 !important;
    border-radius: 9px !important;
  }

  .mobile-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #1d272d !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .mobile-brand img {
    width: 27px !important;
    height: 27px !important;
  }

  .main-content,
  .app-content {
    padding: 84px 18px 58px !important;
  }

  .app-body .theme-toggle {
    top: 11px !important;
    right: 14px !important;
    z-index: 270 !important;
  }

  .hok-dashboard-header {
    display: grid;
  }

  .hok-dashboard-actions {
    justify-content: flex-start;
  }

  .hok-dashboard-primary {
    grid-template-columns: 1fr;
  }

  .hok-connection-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hok-connection-card {
    min-height: 130px;
  }
}

@media (max-width: 740px) {
  .main-content,
  .app-content {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .page-head,
  .page-heading {
    display: grid !important;
    align-items: start !important;
  }

  .page-head h1,
  .page-heading h1,
  .hok-dashboard-heading h1 {
    font-size: 2rem !important;
  }

  .hok-dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .hok-period-box {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hok-source-health,
  .hok-primary-metrics,
  .hok-secondary-metrics,
  .hok-connection-stack,
  .hok-metric-list,
  .hok-admin-primary-stats {
    grid-template-columns: 1fr;
  }

  .hok-source-health .ai-live-source-state,
  .hok-primary-metric {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hok-line-soft) !important;
  }

  .hok-source-health .ai-live-source-state:last-child,
  .hok-primary-metric:last-child {
    border-bottom: 0 !important;
  }

  .hok-secondary-metrics {
    gap: 7px;
  }

  .hok-dashboard-secondary {
    grid-template-columns: 1fr;
  }

  .hok-metric-row:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--hok-line-soft);
  }

  .hok-metric-row:last-child {
    border-bottom: 0;
  }

  .hok-weekly-brief {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  .hok-weekly-brief .btn {
    grid-column: 1 / -1;
  }

  .ai-login-shell {
    padding: 12px !important;
  }

  .ai-login-frame {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
  }

  .ai-login-story {
    min-height: 300px !important;
    padding: 30px 26px !important;
  }

  .ai-login-story-copy h2 {
    font-size: 2.35rem !important;
  }

  .ai-login-mini-dashboard,
  .ai-login-source-row {
    display: none !important;
  }

  .ai-login-card {
    min-height: 0 !important;
    padding: 36px 25px 42px !important;
  }
}

@media print {
  .sidebar,
  .mobile-app-bar,
  .theme-toggle,
  .ai-cam-admin-launcher {
    display: none !important;
  }

  .app-shell {
    display: block !important;
  }

  .main-content,
  .app-content {
    padding: 0 !important;
    background: #fff !important;
  }
}