/*
 * SLA Monitor application theme — V16 dashboard-integrated blue edition
 * Shared by demo-dashboard.html and sla_monitor_dashboard.html.
 *
 * This file deliberately contains presentation only. Navigation behaviour,
 * view identifiers and the dashboard data model remain owned by the existing
 * HTML/JavaScript files.
 */

:root {
  --primary: #2f7fff;
  --primary-2: #67a7ff;
  --mc-action-blue: #2b7cff;
  --bg-dark: #07152a;
  --bg-mid: #0a1c35;
  --line: rgba(75, 166, 221, .19);
}

html.dark-dash {
  /* Shared navy/blue palette: slamonitor.hu brand foundation + demo UI blues. */
  --dc-bg:
    radial-gradient(circle at 82% 2%, rgba(103, 167, 255, .12), transparent 35%),
    linear-gradient(145deg, #07152a 0%, #0a1c35 48%, #102743 100%);
  --dc-topbar-bg: rgba(10, 28, 53, .96);
  --dc-topbar-border: rgba(116, 163, 216, .25);
  --dc-topbar-title: #f3f8ff;
  --dc-card-bg: linear-gradient(145deg, rgba(25, 56, 91, .93), rgba(12, 31, 56, .96));
  --dc-card-border: rgba(116, 163, 216, .25);
  --dc-card-shadow: 0 14px 32px rgba(0, 8, 22, .20), inset 0 1px 0 rgba(255, 255, 255, .018);
  --dc-surface: #102743;
  --dc-border-soft: rgba(116, 163, 216, .18);
  --dc-text: #edf5ff;
  --dc-muted: #9eb2ca;
  --dc-hover: rgba(79, 150, 255, .09);
  --dc-input-bg: rgba(7, 21, 42, .88);

  /* Status colours remain semantic and are only placed on the brand surfaces. */
  --dc-alert-ok-bg: rgba(39, 205, 159, .105);
  --dc-alert-warn-bg: rgba(244, 174, 50, .105);
  --dc-alert-crit-bg: rgba(255, 82, 101, .105);
}

html.dark-dash body {
  background:
    radial-gradient(circle at 78% 6%, rgba(103, 167, 255, .10), transparent 32%),
    linear-gradient(180deg, #061326 0%, #07182f 50%, #0a2140 100%);
}

html.dark-dash .dash-shell {
  grid-template-columns: 232px minmax(0, 1fr);
  border-color: rgba(63, 145, 199, .23);
  border-radius: 22px;
  background: #07152a;
  box-shadow: 0 28px 65px rgba(0, 7, 19, .40), 0 0 0 1px rgba(0, 188, 224, .025);
}

html.dark-dash .dash-content {
  background: var(--dc-bg);
}

html.dark-dash .dash-topbar {
  background: var(--dc-topbar-bg);
  border-color: var(--dc-topbar-border);
}

/* Official image assets are used for both application brand lockups. */
.brand-lockup .brand-logo.brand-wordmark {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  filter: none !important;
}

.brand-lockup .brand-text {
  display: none;
}

.topbar .brand-lockup .brand-logo.brand-wordmark {
  width: 185px;
  height: 44px;
  flex: 0 0 185px;
}

.sidebar-brand .brand-lockup .brand-logo.brand-wordmark {
  width: 158px;
  height: 38px;
  flex: 0 0 158px;
}

/* Shared dashboard sidebar: lighter navy layers, blue focus and thin line icons. */
html.dark-dash .dash-sidebar {
  position: relative;
  isolation: isolate;
  gap: 4px;
  padding: 22px 14px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 7%, rgba(103, 167, 255, .11), transparent 24%),
    linear-gradient(180deg, #07152a 0%, #0a1c35 55%, #102743 100%);
  border-right: 1px solid rgba(116, 163, 216, .22);
}

html.dark-dash .dash-sidebar::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(103, 167, 255, .30) 0 1px, transparent 1.25px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 38%);
}

html.dark-dash .sidebar-brand {
  min-height: 55px;
  margin: 0 2px 9px;
  padding: 0 8px 17px;
  border-bottom: 1px solid rgba(83, 163, 210, .17);
}

html.dark-dash .sidebar-brand .brand-lockup {
  gap: 0;
}

html.dark-dash .nav-section-label {
  padding: 12px 10px 5px;
  color: rgba(138, 184, 215, .58);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .105em;
}

html.dark-dash .dash-sidebar .mc-nav-group-label {
  color: #8dbaff;
}

html.dark-dash .dash-sidebar .mc-nav-group-label b {
  padding: 3px 6px;
  border-color: rgba(79, 150, 255, .34);
  background: rgba(47, 127, 255, .09);
  color: #8dbaff;
  font-size: 10px;
}

html.dark-dash .dash-sidebar .nav-item {
  position: relative;
  min-height: 44px;
  gap: 10px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #a9bdd4;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.25;
  box-shadow: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

html.dark-dash .dash-sidebar .nav-item:hover {
  border-color: rgba(65, 163, 214, .15);
  background: rgba(26, 121, 173, .09);
  color: #edf7ff;
  transform: translateX(1px);
}

html.dark-dash .dash-sidebar .nav-item.active {
  border-color: rgba(79, 150, 255, .34);
  background: linear-gradient(90deg, rgba(47, 127, 255, .20), rgba(103, 167, 255, .09));
  color: #f5fbff;
  box-shadow: inset 2px 0 0 #4f96ff, 0 9px 24px rgba(0, 8, 24, .14);
}

html.dark-dash .dash-sidebar .nav-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #a9c0d7;
  font-size: 0;
}

html.dark-dash .dash-sidebar .nav-item .icon svg {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html.dark-dash .dash-sidebar .nav-item:hover .icon {
  color: #d9ecf8;
}

html.dark-dash .dash-sidebar .nav-item.active .icon {
  border-color: rgba(79, 150, 255, .24);
  background: rgba(47, 127, 255, .13);
  color: #8dbaff;
  box-shadow: 0 0 16px rgba(47, 127, 255, .10);
}

html.dark-dash .dash-sidebar .mc-nav-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 62px;
  margin: 0 0 7px;
  padding: 8px 9px;
  border-color: rgba(79, 150, 255, .25);
  background: linear-gradient(135deg, rgba(47, 127, 255, .12), rgba(16, 39, 67, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

html.dark-dash .dash-sidebar .mc-nav-primary:hover {
  border-color: rgba(103, 167, 255, .46);
  background: linear-gradient(135deg, rgba(47, 127, 255, .18), rgba(23, 52, 84, .24));
}

html.dark-dash .dash-sidebar .mc-nav-primary.active {
  border-color: rgba(79, 150, 255, .46);
  background: linear-gradient(105deg, rgba(47, 127, 255, .25), rgba(103, 167, 255, .12));
  box-shadow: inset 2px 0 0 #4f96ff, 0 11px 28px rgba(0, 9, 25, .18);
}

html.dark-dash .dash-sidebar .mc-nav-primary .icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-color: rgba(79, 150, 255, .24);
  border-radius: 9px;
  background: rgba(47, 127, 255, .11);
}

html.dark-dash .dash-sidebar .mc-nav-copy strong {
  color: #f0f8ff;
  font-size: 15px;
  font-weight: 680;
}

html.dark-dash .dash-sidebar .mc-nav-copy small {
  margin-top: 3px;
  color: #7897b6;
  font-size: 10.5px;
}

html.dark-dash .dash-sidebar .mc-nav-divider {
  background: linear-gradient(90deg, transparent, rgba(79, 150, 255, .20), transparent);
}

@media (max-width: 900px) {
  html.dark-dash .dash-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  html.dark-dash .dash-sidebar {
    flex-flow: row nowrap;
    gap: 5px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(69, 154, 207, .17);
  }

  html.dark-dash .dash-sidebar .nav-item {
    flex: 0 0 auto;
    min-width: max-content;
  }

  html.dark-dash .dash-sidebar .mc-nav-primary {
    display: flex;
    min-height: 44px;
    margin: 0;
  }

  html.dark-dash .dash-sidebar .mc-nav-copy small,
  html.dark-dash .dash-sidebar .mc-nav-divider {
    display: none;
  }
}

@media (max-width: 720px) {
  .topbar .brand-lockup .brand-logo.brand-wordmark {
    width: 144px;
    height: 34px;
    flex: 0 0 144px;
  }

  html.dark-dash .dash-sidebar .nav-item .icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* Final V16 interaction colour contract: no gradient. */
.dash-sidebar .mc-nav-primary.active,
html.dark-dash .dash-sidebar .mc-nav-primary.active {
  border-color: var(--mc-action-blue);
  background: var(--mc-action-blue);
  background-image: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(43, 124, 255, .24);
}

.dash-sidebar .mc-nav-primary.active .icon,
html.dark-dash .dash-sidebar .mc-nav-primary.active .icon {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
}

.dash-sidebar .mc-nav-primary.active .mc-nav-copy strong,
.dash-sidebar .mc-nav-primary.active .mc-nav-copy small,
html.dark-dash .dash-sidebar .mc-nav-primary.active .mc-nav-copy strong,
html.dark-dash .dash-sidebar .mc-nav-primary.active .mc-nav-copy small {
  color: #fff;
}