/*
 * Admin theme: layout and brand styling for the Bootstrap 5 admin interface.
 */

:root {
  color-scheme: light;
  --admin-red: #f34541;
  --admin-green: #49bf67;
  --admin-muted: #999999;
  --admin-dark: #2b2d30;
  --admin-banana: #fcd052;
  --admin-brand: var(--admin-red);
  /* Slate palette (matches auth) */
  --admin-slate-50: #f8fafc;
  --admin-slate-100: #f1f5f9;
  --admin-slate-200: #e2e8f0;
  --admin-slate-300: #cbd5e1;
  --admin-slate-400: #94a3b8;
  --admin-slate-500: #64748b;
  --admin-slate-600: #475569;
  --admin-slate-700: #334155;
  --admin-slate-800: #1e293b;
  --admin-slate-900: #0f172a;
  --admin-nav-bg: #f8fafc;
  --admin-nav-border: #e2e8f0;
  --admin-body-bg: var(--admin-slate-50);
  --admin-surface-1: #ffffff;
  --admin-surface-2: var(--admin-slate-100);
  --admin-surface-3: var(--admin-slate-200);
  --admin-text-strong: var(--admin-slate-900);
  --admin-text-default: var(--admin-slate-700);
  --admin-text-soft: var(--admin-slate-600);
  --admin-text-muted: var(--admin-slate-500);

  /* Drive Bootstrap's own muted colour from the admin token. This replaces a
     `.text-muted { ... !important }` override and also fixes .text-body-secondary,
     which the override never covered. */
  --bs-secondary-color: var(--admin-text-muted);
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --admin-nav-bg: #0f172a;
  --admin-nav-border: #334155;
  --admin-body-bg: #0b1220;
  --admin-surface-1: #0f172a;
  --admin-surface-2: #1e293b;
  --admin-surface-3: #334155;
  --admin-text-strong: #f8fafc;
  --admin-text-default: #e2e8f0;
  --admin-text-soft: #cbd5e1;
  --admin-text-muted: #94a3b8;

  /* Drive Bootstrap's own muted colour from the admin token. This replaces a
     `.text-muted { ... !important }` override and also fixes .text-body-secondary,
     which the override never covered. */
  --bs-secondary-color: var(--admin-text-muted);
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--admin-body-bg);
  color: var(--admin-text-default);
  font-family: 'DM Sans', var(--bs-body-font-family), system-ui, sans-serif;
}

body.without-footer #footer {
  display: none;
}

/* ─── Top navbar ──────────────────────────────────────────────────── */

header .navbar {
  --navbar-fg: #fff;
  --navbar-fg-muted: rgb(255 255 255 / 85%);
  --navbar-hover-bg: rgb(255 255 255 / 15%);

  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--admin-brand);
  color: var(--navbar-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Light / Auto (resolved light): sky-above-horizon gradient through the day. */
html[data-time-header-active] header .navbar {
  background: linear-gradient(
    180deg,
    var(--time-header-sky, #fff) 0%,
    var(--time-header-horizon, #fff) 100%
  );
  transition:
    --time-header-sky 0.75s ease,
    --time-header-horizon 0.75s ease,
    color 0.5s ease,
    box-shadow 0.5s ease;
}

html.time-header--instant[data-time-header-active] header .navbar {
  transition: none;
}

/* Dark theme: navy under the logo, brand warmth only on the right (orange mark stays visible). */
:root[data-bs-theme="dark"] header .navbar {
  background: linear-gradient(
    90deg,
    var(--intranet-colewood-navy, #2e3548) 0%,
    var(--intranet-colewood-navy, #2e3548) min(240px, 38%),
    color-mix(in oklch, var(--intranet-colewood-navy, #2e3548) 55%, var(--intranet-colewood, #ff7700) 45%) 100%
  );
}

html[data-time-header-tone="light"] header .navbar {
  --navbar-fg: var(--admin-text-strong, #0f172a);
  --navbar-fg-muted: var(--admin-text-default, #334155);
  --navbar-hover-bg: rgb(15 23 42 / 8%);
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

html[data-time-header-tone="dark"] header .navbar,
:root[data-bs-theme="dark"] header .navbar {
  --navbar-fg: #fff;
  --navbar-fg-muted: rgb(255 255 255 / 85%);
  --navbar-hover-bg: rgb(255 255 255 / 15%);
}

header .navbar .navbar-brand {
  color: var(--navbar-fg);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0;
  margin: 0;
  line-height: 56px;
  text-decoration: none;
  white-space: nowrap;
}

header .navbar .navbar-brand:hover,
header .navbar .navbar-brand:focus {
  color: var(--navbar-fg);
  text-decoration: none;
}

/* Sidebar toggler */
header .navbar .sidebar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  border-radius: 0.375rem;
  color: var(--navbar-fg);
  transition: background-color 0.15s, color 0.15s;
}
header .navbar .sidebar-toggler:hover,
header .navbar .sidebar-toggler:focus-visible {
  background-color: var(--navbar-hover-bg);
  color: var(--navbar-fg);
  outline: none;
}

/* User dropdown */
header .navbar .user-menu {
  display: flex;
  align-items: center;
  height: 56px;
}

/* Legacy plain toggle (gravatar + name); contact chip uses its own nav styles */
header .navbar .user-menu .dropdown-toggle:not(.contact-chip) {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 8px;
  gap: 0;
  color: var(--navbar-fg);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

header .navbar .user-menu .dropdown-toggle:not(.contact-chip):hover,
header .navbar .user-menu .dropdown-toggle:not(.contact-chip):focus-visible {
  background-color: var(--navbar-hover-bg);
  color: var(--navbar-fg);
}

/* Hide the BS5 default caret so only our FA chevron shows */
header .navbar .user-menu .dropdown-toggle::after {
  display: none;
}

header .navbar .user-menu .dropdown-menu {
  min-width: 200px;
  border: 1px solid var(--admin-surface-3);
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0.5rem 0;
  margin-top: 6px;
  background: var(--admin-surface-1);
}

header .navbar .user-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--admin-text-default);
}

header .navbar .user-menu .dropdown-item:hover,
header .navbar .user-menu .dropdown-item:focus-visible {
  background-color: var(--admin-surface-2);
  color: var(--admin-text-strong);
}

header .navbar .user-menu .dropdown-item.active,
header .navbar .user-menu .dropdown-item.active:hover,
header .navbar .user-menu .dropdown-item.active:focus-visible {
  color: #fff;
  background-color: var(--admin-brand);
}

header .navbar .user-menu .dropdown-item.active i,
header .navbar .user-menu .dropdown-item.active .theme-mode-check,
header .navbar .user-menu .dropdown-item.active span {
  color: inherit;
}

header .navbar .user-menu .dropdown-header {
  color: var(--admin-text-muted);
}

/* ─── Sidebar (expanded 200px / collapsed 50px icon-only) ────────────── */

/* Below lg the same element is a Bootstrap offcanvas drawer (.offcanvas-lg on
   the aside); geometry there belongs to Bootstrap. At lg+ the offcanvas reset
   forces width:auto !important on the aside itself, so the static sidebar's
   geometry lives on the inner .sidebar-nav, which the reset leaves alone. */
#admin-sidebar {
  background: var(--admin-nav-bg);
}

@media (max-width: 991.98px) {
  #admin-sidebar {
    --bs-offcanvas-width: 280px;
  }
}

@media (min-width: 992px) {
  #admin-sidebar {
    flex: 0 0 auto;
  }

  #admin-sidebar nav.sidebar-nav {
    width: 200px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--admin-nav-border);
    transition: width 0.2s ease;
  }

  body.sidebar-collapsed #admin-sidebar nav.sidebar-nav {
    width: 50px;
  }
}

#admin-sidebar .sidebar-nav,
#admin-sidebar .nav,
#admin-sidebar .nav-item,
#admin-sidebar .collapse,
#admin-sidebar .nav-children {
  width: 100%;
}
#admin-sidebar .nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
#admin-sidebar .nav-item { display: block; }

#admin-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  line-height: 1.25;
  color: var(--admin-text-default);
  text-decoration: none;
  background: var(--admin-nav-bg);
  border-bottom: 1px solid var(--admin-surface-3);
  transition: background-color 0.15s, color 0.15s;
  box-sizing: border-box;
}

#admin-sidebar .nav-link:hover { background: var(--admin-surface-2); color: var(--admin-text-strong); }
#admin-sidebar .nav-link.active { color: var(--admin-brand); background: var(--admin-surface-1); font-weight: 600; border-left: 3px solid var(--admin-brand); padding-left: calc(0.75rem - 3px); }
#admin-sidebar .nav-icon { width: 1.25rem; flex-shrink: 0; color: var(--admin-text-muted); }
#admin-sidebar .nav-link:hover .nav-icon,
#admin-sidebar .nav-link.active .nav-icon { color: var(--admin-brand); }
#admin-sidebar .nav-caret { margin-left: auto; font-size: 0.625rem; color: var(--admin-text-muted); transition: transform 0.2s; }
#admin-sidebar .nav-link[aria-expanded="true"] > .nav-caret { transform: rotate(90deg); color: var(--admin-brand); }

#admin-sidebar .nav-children {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--admin-surface-2);
}
#admin-sidebar .nav-children .nav-link { padding: 0.4rem 0.75rem 0.4rem 2rem; font-size: 0.8125rem; color: var(--admin-text-soft); background: var(--admin-surface-2); }
/* Second-level group (PPC → Google Ads). The toggle sits at child depth and
   its own children step in again, so the hierarchy reads at a glance. */
#admin-sidebar .nav-children .nav-group-toggle { padding-right: 0.75rem; }
#admin-sidebar .nav-grandchildren .nav-link { padding-left: 3rem; }
#admin-sidebar .nav-children .nav-link:hover { background: var(--admin-surface-3); color: var(--admin-text-strong); }
/* Suppress hover flash on child items while the group is still animating open/closed */
#admin-sidebar .collapsing .nav-children .nav-link { pointer-events: none; }
#admin-sidebar .nav-children .nav-link.active { color: var(--admin-brand); background: var(--admin-surface-3); }
#admin-sidebar .nav-children .nav-link .nav-icon { font-size: 0.8125rem; width: 1.125rem; }

/* Collapsed sidebar (desktop only — the class has no meaning in the drawer) */
@media (min-width: 992px) {
/* Collapsed: icon-only, hover expands nav item inline (like full sidebar) */
body.sidebar-collapsed #admin-sidebar {
  overflow: visible;
}
body.sidebar-collapsed #admin-sidebar .sidebar-nav,
body.sidebar-collapsed #admin-sidebar .nav,
body.sidebar-collapsed #admin-sidebar .nav-item {
  overflow: visible;
}
body.sidebar-collapsed #admin-sidebar .nav-caret {
  display: none;
}
/* When collapsed, show caret on hover for group items (indicates sub-items; group opens on click only) */
body.sidebar-collapsed #admin-sidebar .nav-item:hover > .nav-link .nav-caret {
  display: inline-block;
}
body.sidebar-collapsed #admin-sidebar .nav-link {
  position: relative;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  width: 50px;
  min-width: 50px;
  overflow: hidden;
  transition: width 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}
body.sidebar-collapsed #admin-sidebar .nav-item:hover .nav-link {
  width: 200px;
  min-width: 200px;
  background: var(--admin-surface-1);
  color: var(--admin-text-strong);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
body.sidebar-collapsed #admin-sidebar .nav > .nav-item > .nav-link .nav-text {
  width: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
body.sidebar-collapsed #admin-sidebar .nav > .nav-item:hover > .nav-link .nav-text {
  width: auto;
  opacity: 1;
  margin-left: 0.5rem;
}
body.sidebar-collapsed #admin-sidebar .nav > .nav-item:hover > .nav-link .nav-icon,
body.sidebar-collapsed #admin-sidebar .nav > .nav-item:hover > .nav-link .nav-text {
  color: var(--admin-text-strong);
}
body.sidebar-collapsed #admin-sidebar .collapse {
  display: none !important;
}
/* Group expands on click only when collapsed; .show is added by Bootstrap on click */
body.sidebar-collapsed #admin-sidebar .collapse.show {
  display: block !important;
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children {
  padding: 0;
  border: none;
  background: transparent;
}
/* Sub-items when group is open (click-expanded): icon-only by default, expand on hover */
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.4rem 0.75rem;
  width: 50px;
  min-width: 50px;
  overflow: hidden;
  border-bottom: 1px solid var(--admin-surface-3);
  color: var(--admin-text-soft);
  background: var(--admin-nav-bg);
  transition: width 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-item:hover .nav-link {
  width: 200px;
  min-width: 200px;
  background: var(--admin-surface-1);
  color: var(--admin-text-strong);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link:hover {
  background: var(--admin-surface-2);
  color: var(--admin-text-strong);
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link.active {
  color: var(--admin-brand);
  background: var(--admin-surface-1);
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link .nav-text {
  width: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-item:hover .nav-link .nav-text {
  width: auto;
  opacity: 1;
  margin-left: 0.5rem;
  color: inherit;
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link .nav-icon {
  flex-shrink: 0;
  color: var(--admin-text-muted);
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-item:hover .nav-link .nav-icon {
  color: var(--admin-text-strong);
}
body.sidebar-collapsed #admin-sidebar .collapse.show .nav-children .nav-link.active .nav-icon {
  color: var(--admin-brand);
}
body.sidebar-collapsed #admin-sidebar .nav-children .nav-item {
  display: block;
}
/* Children when parent not hovered (collapse hidden): icon-only fallback - not visible */
body.sidebar-collapsed #admin-sidebar .collapse .nav-children .nav-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.4rem 0.75rem;
  width: 50px;
  min-width: 50px;
  overflow: hidden;
  color: var(--admin-text-soft);
  background: var(--admin-nav-bg);
}
body.sidebar-collapsed #admin-sidebar .collapse:not(.show) .nav-children .nav-link .nav-text {
  width: 0;
  opacity: 0;
  overflow: hidden;
}
body.sidebar-collapsed #admin-sidebar .nav-link.active {
  padding-left: 0.5rem;
  border-left-width: 3px;
}
}

#content {
  min-width: 276px;
  background: var(--admin-body-bg);
}

#content-wrapper {
  padding-bottom: 24px;
}

#page-content {
  padding-top: 20px !important;
}

#content #flash-messages {
  margin-top: 10px;
}

/* Tighten the gap beneath flash messages; default page top padding remains when no flash exists. */
#content #flash-messages + #page-content {
  padding-top: 8px !important;
}

/* Cards in main content (dashboard, etc.) — match auth card aesthetic */
#content .card {
  border: 1px solid var(--admin-surface-3);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  background: var(--admin-surface-1);
  color: var(--admin-text-default);
}

#content .card .card-header {
  background: var(--admin-surface-1);
  border-bottom: 1px solid var(--admin-surface-3);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--admin-text-strong);
}

#content .card .card-body {
  padding: 1.25rem;
}

/* ─── Admin auth pages (login, forgotten password) ───────────────────────── */
.admin-auth-page {
  min-height: 100vh;
  font-family: 'DM Sans', var(--bs-body-font-family), system-ui, sans-serif;
}

.auth-split {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

@media (min-width: 992px) {
  .auth-split {
    flex-direction: row;
  }
}

.auth-brand-panel {
  flex: 1;
  min-height: 180px;
  background: var(--admin-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem;
}

@media (min-width: 992px) {
  .auth-brand-panel {
    min-height: 100vh;
    flex: 0 0 45%;
  }
}

.auth-brand-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.auth-brand-logo {
  max-width: 240px;
  height: auto;
}

@media (min-width: 992px) {
  .auth-brand-logo {
    max-width: 280px;
  }
}

.auth-brand-tagline {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.auth-brand-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.03) 100%);
  pointer-events: none;
}

.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-body-bg);
  padding: 2.5rem 1.5rem;
}

@media (min-width: 992px) {
  .auth-form-panel {
    flex: 1;
    padding: 3rem;
  }
}

.auth-form-wrapper {
  width: 100%;
  max-width: 420px;
}

.auth-form-wrapper #flash-messages {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.auth-form-wrapper .alert h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.auth-form-wrapper .alert p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.table-condensed > :not(caption) > * > * {
  padding: 0.35rem 0.5rem;
}

/* Flatty-named utilities are gone: .text-green/.text-red -> .text-success/.text-danger,
   .green-background/.red-background/.muted-background -> BS5 .table-* variants,
   .text-dark and .banana-background deleted (Bootstrap owns the former; the latter's
   only consumers were fully inline-styled emails that never load this file).
   .text-muted is not redefined here either — see --bs-secondary-color in the
   :root blocks above, which colours it, .text-body-secondary and BS5's own
   muted text consistently and without !important. */