/* ============================================================================
   Pantheon overrides — loaded AFTER the Upbond theme CSS.
   Brand/UX tweaks, dashboard copper gradient, and the dark theme.
   ============================================================================ */

/* Light-mode topbar: bright, near-white header. */
#page-topbar,
.navbar-header {
  background-color: #fafbfc !important;
}
#page-topbar {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Light-mode page background: grayer than the theme default #f2f6f7. */
body,
#layout-wrapper,
.main-content,
.page-content {
  background-color: #e1e4e9 !important;
}

/* Light-mode sidebar: charcoal fading down into copper, with a dark backdrop
   behind the logo so the copper mark reads clearly. */
.vertical-menu {
  background: linear-gradient(
    180deg,
    #1f2022 0%,
    #1f2022 26%,
    #3a2c20 50%,
    #6e4a2e 74%,
    #a9764a 88%,
    #c99065 100%
  ) !important;
}
.navbar-brand-box {
  background: #1f2022 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 22px !important;
}
.navbar-brand-box .logo { text-align: left !important; }
#sidebar-menu ul li a { color: #ece7e1 !important; }
#sidebar-menu ul li a i { color: #d9cfc4 !important; }
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li.mm-active > a i { color: #ffffff !important; }
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a { background-color: rgba(255, 255, 255, 0.14) !important; }
.menu-title { color: rgba(255, 255, 255, 0.6) !important; }

/* Bigger brand logo — sidebar width unchanged, just a larger lockup. */
.navbar-brand-box .logo-lg img { height: 32px !important; }
.navbar-brand-box .logo-sm img { height: 28px !important; }

/* Topbar search: a touch darker than the gray header so it reads as a field. */
.app-search .form-control,
.app-search .input-group {
  background-color: #eef0f3 !important;
}
.app-search .form-control {
  color: #495057 !important;
}
.app-search .form-control::placeholder {
  color: #9a9ea6 !important;
}
.app-search span {
  color: #74788d !important;
}

/* Subtle copper gradient on primary avatar / stat icon circles. */
.avatar-title.bg-primary {
  background-image: linear-gradient(135deg, #9a5e30, #874f27);
}

/* Dashboard-only copper wash, entering from the bottom-right corner. */
.page-content.dash-corner {
  background-image: linear-gradient(
    315deg,
    rgba(151, 94, 48, 0.42) 0%,
    rgba(151, 94, 48, 0.16) 32%,
    transparent 62%
  );
}

/* ============================================================================
   DARK THEME  (html[data-theme="dark"])
   ============================================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] #layout-wrapper {
  background-color: #0d0f13 !important;
  color: #d7dade !important;
}
html[data-theme="dark"] .main-content { background-color: transparent !important; }
html[data-theme="dark"] .page-content { background-color: #0d0f13 !important; }
html[data-theme="dark"] .page-content.dash-corner {
  background-image: linear-gradient(
    315deg,
    rgba(214, 138, 79, 0.34) 0%,
    rgba(214, 138, 79, 0.10) 30%,
    transparent 60%
  ) !important;
}

/* Sidebar */
html[data-theme="dark"] .vertical-menu {
  background: linear-gradient(
    180deg,
    #15171d 0%,
    #15171d 26%,
    #2a2016 50%,
    #5e3f28 74%,
    #946a44 88%,
    #c2895f 100%
  ) !important;
  border-right: 1px solid #23262e;
}
html[data-theme="dark"] #sidebar-menu ul li a { color: #aab0ba !important; }
html[data-theme="dark"] #sidebar-menu ul li a i { color: #8b919b !important; }
html[data-theme="dark"] #sidebar-menu ul li a:hover,
html[data-theme="dark"] #sidebar-menu ul li a:hover i,
html[data-theme="dark"] #sidebar-menu ul li a.active,
html[data-theme="dark"] #sidebar-menu ul li a.active i,
html[data-theme="dark"] #sidebar-menu ul li.mm-active > a,
html[data-theme="dark"] #sidebar-menu ul li.mm-active > a i { color: #fff !important; }
html[data-theme="dark"] .menu-title { color: #6b7280 !important; }

/* Topbar */
html[data-theme="dark"] #page-topbar,
html[data-theme="dark"] .navbar-header,
html[data-theme="dark"] .navbar-brand-box { background: #15171d !important; box-shadow: none; }
html[data-theme="dark"] .header-item { color: #d7dade !important; }
html[data-theme="dark"] .app-search .form-control,
html[data-theme="dark"] .app-search .input-group { background-color: #0f1115 !important; }
html[data-theme="dark"] .app-search .form-control { color: #e8eaed !important; }
html[data-theme="dark"] .app-search span { color: #7e8590 !important; }

/* Cards & text */
html[data-theme="dark"] .card { background: #1b1e26 !important; border: 1px solid #262a33 !important; color: #d7dade; }
html[data-theme="dark"] .card-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #e8eaed !important; }
html[data-theme="dark"] .text-muted { color: #9aa0aa !important; }
html[data-theme="dark"] .text-body { color: #d7dade !important; }
html[data-theme="dark"] .page-title-box h4 { color: #e8eaed; }

/* Tables */
html[data-theme="dark"] .table { color: #d7dade; }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #262a33 !important; background-color: transparent !important; }
html[data-theme="dark"] .table thead th { color: #9aa0aa; }

/* Borders & dividers */
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr { border-color: #262a33 !important; }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0f1115 !important;
  border-color: #2a2f39 !important;
  color: #e8eaed !important;
}
html[data-theme="dark"] .form-control::placeholder { color: #7e8590 !important; }
html[data-theme="dark"] .bg-light { background-color: #20242c !important; }
html[data-theme="dark"] .badge.bg-light { background-color: #23272f !important; color: #cfd4da !important; }

/* Dropdown */
html[data-theme="dark"] .dropdown-menu { background: #1b1e26 !important; border: 1px solid #262a33; }
html[data-theme="dark"] .dropdown-item { color: #d7dade !important; }
html[data-theme="dark"] .dropdown-item:hover { background: #262a33 !important; }
html[data-theme="dark"] .dropdown-divider { border-color: #262a33; }

/* Breadcrumb */
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a { color: #9aa0aa; }
html[data-theme="dark"] .breadcrumb-item.active { color: #d7dade; }

/* Footer */
html[data-theme="dark"] .footer { background: #15171d !important; color: #9aa0aa; }

/* Alerts */
html[data-theme="dark"] .alert-light { background: #1b1e26 !important; color: #d7dade; border-color: #262a33; }
html[data-theme="dark"] .alert-warning { background: #2a2410 !important; color: #e0c074; border-color: #3a3015; }

/* Buttons: keep light outline buttons legible on dark */
html[data-theme="dark"] .btn-light { background: #23272f; border-color: #2a2f39; color: #d7dade; }
html[data-theme="dark"] .btn-outline-secondary { color: #aab0ba; border-color: #3a3f49; }

/* ============================================================================
   READABILITY — larger base fonts (the stock theme runs small)
   ============================================================================ */
body { font-size: 0.9rem; }
.font-size-12 { font-size: 12.5px !important; }
.font-size-13 { font-size: 13.5px !important; }
.card-title { font-size: 16px; }
.table > :not(caption) > * > * { font-size: 0.9rem; }

/* Sidebar leaf links: white on the dark/copper gradient, in both themes. */
#sidebar-menu ul li a { font-size: 14px; color: rgba(255, 255, 255, 0.82) !important; }
#sidebar-menu ul li a i { color: rgba(255, 255, 255, 0.7) !important; }
#sidebar-menu ul li a:hover,
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active { color: #ffffff !important; }
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i { color: #ffffff !important; }

/* ============================================================================
   SIDEBAR ACCORDION GROUPS
   ============================================================================ */
/* Parent headers: white + bold + a touch larger than the leaf links so the
   hierarchy reads clearly on the dark/copper gradient. */
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 13px 22px 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}
.nav-group-toggle:hover { color: #ffffff; opacity: 0.85; }
.nav-group-icon { font-size: 16px; }
.nav-group-caret { font-size: 16px; margin-left: auto; transition: transform 0.25s ease; opacity: 0.85; }
/* The grid-rows 0fr -> 1fr trick animates to auto height smoothly. */
.nav-group-body { display: grid; transition: grid-template-rows 0.25s ease; }