/*
Theme Name: RaspAP default
Author: @billz
Author URI: https://github.com/billz
Description: Default theme for RaspAP
License: GNU General Public License v3.0
*/

/* Light Mode */
:root {
  --raspap-theme-color: #155EEF;
  --raspap-theme-lighter: #447ef2;
  --raspap-theme-darker: #114bbf;
}

/* Typography */
a {
  --bs-link-color: var(--raspap-theme-color);
  --bs-link-hover-color: var(--raspap-theme-color);
}

/* Elements */

/* Icons */
i.fa.fa-bars {
  color: #d1d3e2;
}
i.fa.fa-bars:hover{
  color: #6e707e;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--raspap-theme-color);
  --bs-btn-border-color: var(--raspap-theme-color);
  --bs-btn-hover-bg: var(--raspap-theme-darker);
  --bs-btn-hover-border-color: var(--raspap-theme-darker);
  --bs-btn-active-bg: var(--raspap-theme-darker);
  --bs-btn-active-border-color: var(--raspap-theme-darker);
  --bs-btn-disabled-bg: var(--raspap-theme-lighter);
  --bs-btn-disabled-border-color: var(--raspap-theme-lighter);
}

.btn-outline-primary {
  --bs-btn-color: var(--raspap-theme-color);
  --bs-btn-border-color: var(--raspap-theme-color);
  --bs-btn-hover-bg: var(--raspap-theme-color);
  --bs-btn-hover-border-color: var(--raspap-theme-color);
  --bs-btn-active-bg: var(--raspap-theme-color);
  --bs-btn-active-border-color: var(--raspap-theme-color);
  --bs-btn-disabled-color: var(--raspap-theme-color);
  --bs-btn-disabled-border-color: var(--raspap-theme-color);
}

html:not([data-bs-theme="dark"]) .btn-outline-warning {
  --bs-btn-color: #333;
}

.btn-light {
  --bs-btn-color: var(--raspap-theme-darker);
  --bs-btn-hover-color: var(--raspap-theme-darker);
  --bs-btn-active-color: var(--raspap-theme-darker);
  --bs-btn-disabled-color: var(--raspap-theme-darker);
}

.btn-link {
  --bs-link-color: var(--raspap-theme-color);
  --bs-link-hover-color: var(--raspap-theme-darker);
}

/* Forms */
.form-check-input:checked {
  background-color: var(--raspap-theme-color); 
  border-color: var(--raspap-theme-color); 
}

/* Layout */

/* Sidebar - permanently dark, independent of the light/dark toggle.
   UniFi's own sidebar never changes with light/dark mode; only the main
   content area does. Targets .sb-sidenav-light (SB-Admin's real sidebar
   class) - the old bare ".sidebar" rule below was dead code, no element
   in the DOM has that class alone. */
.sb-sidenav-light,
#layoutSidenav_nav {
  background-color: #0A1130 !important;
  color: rgba(255, 255, 255, 0.62);
}
.sb-sidenav-light .sb-sidenav-menu .nav-link {
  color: rgba(255, 255, 255, 0.62);
}
.sb-sidenav-light .sb-sidenav-menu .nav-link .sb-nav-link-icon {
  color: rgba(255, 255, 255, 0.42);
}
.sb-sidenav-light .sb-sidenav-menu .nav-link:hover,
.sb-sidenav-light .sb-sidenav-menu .nav-link.active {
  color: #ffffff;
}
.sb-sidenav-light .sb-sidenav-footer {
  background-color: #070c22;
}

/* Sidebar item hover + active state - background pill + inset left accent,
   no layout shift (inset box-shadow instead of a real border). */
.sb-sidenav .sb-nav-link-icon {
  margin: 2px 10px;
  border-radius: 8px;
  transition: background-color .12s ease, color .12s ease;
}
.sb-sidenav .sb-nav-link-icon:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
.sb-sidenav .sb-nav-link-icon .nav-link {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.sb-sidenav .sb-nav-link-icon:hover .nav-link {
  color: #ffffff;
}
.sb-sidenav .sb-nav-link-icon i.sb-nav-link-icon {
  color: rgba(255, 255, 255, 0.42);
}
.sb-sidenav .sb-nav-link-icon:hover i.sb-nav-link-icon {
  color: #ffffff;
}
.sb-sidenav .sb-nav-link-icon.active {
  background-color: rgba(21, 94, 239, 0.16);
  box-shadow: inset 3px 0 0 0 var(--raspap-theme-color);
}
.sb-sidenav .sb-nav-link-icon.active .nav-link {
  color: #ffffff;
  font-weight: 600;
}
.sb-sidenav .sb-nav-link-icon.active i.sb-nav-link-icon {
  color: var(--raspap-theme-color);
}

/* Collapsed sidebar - icon-only rail (UniFi-style), desktop only.
   The stock SB Admin rule this overrides (dist/sb-admin/css/styles.css)
   pairs body.sb-sidenav-toggled with a full off-screen slide of the whole
   nav panel (transform: translateX(-225px)) - icons included. This
   replaces that with a narrow rail instead: icons stay visible/centered,
   only the text label hides. Scoped to the same @media(min-width: 992px)
   breakpoint as the stock rule so mobile's full slide-in/out drawer is
   left untouched. */
@media (min-width: 992px) {
  body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    transform: translateX(0);
    width: 68px;
    overflow-x: hidden;
  }
  /* index.php's <body> always carries sb-nav-fixed, whose own rule
     (dist/sb-admin/css/styles.css) positions the content pane with
     padding-left: 225px (nav is position:fixed there, not a real flex
     item, so margin-based offsets do nothing to move content over -
     they just add on top of the padding instead of replacing it). Must
     override padding-left here to match, not margin-left - an earlier
     margin-left version left the 225px padding fully in place and added
     68px more on top of it, so collapsing made the content pane 293px
     from the left edge - narrower than the 225px expanded state, i.e.
     backwards from the intended "collapse to gain width" effect.

     Also must explicitly reset margin-left to 0: the stock (non-fixed,
     pure-flex) desktop collapse rule sets margin-left: -225px on this
     same element to compensate for nav's reserved flex space when it
     slides fully off-screen - but nav here isn't a flex item at all
     (it's position:fixed under sb-nav-fixed), so that -225px has no
     gap to compensate for and instead just drags the content pane
     157px off the left edge of the viewport. */
  body.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
    padding-left: 68px;
    margin-left: 0;
  }
  body.sb-sidenav-toggled .sb-sidenav .nav-label {
    display: none;
  }
  body.sb-sidenav-toggled .sb-sidenav .nav-link {
    display: flex;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body.sb-sidenav-toggled .sb-sidenav i.sb-nav-link-icon {
    margin-right: 0;
  }
  /* The logo+status widget above the nav items (renderStatus() in
     includes/functions.php: brand logo + "Status"/Hotspot/Mem/CPU text)
     has no icon-rail equivalent - its 70px logo alone exceeds the 68px
     rail, and there's no room for the status text, so hide it entirely
     while collapsed rather than let it overflow into the main content. */
  body.sb-sidenav-toggled .sb-sidenav .row.g-0 {
    display: none;
  }

  /* Top navbar in the collapsed state: the "VS-CAP" wordmark hides (it
     relocates to the footer instead, see .footer-brand below) and the
     hamburger toggle becomes the first visible item, sized to the same
     68px column as the rail so it lines up flush left under it. Bootstrap's
     own "me-lg-auto" utility on #sidebarToggle is left alone so the
     right-side icon group still gets pushed to the far right as before. */
  body.sb-sidenav-toggled .sb-topnav .sidebar-brand-text {
    display: none;
  }
  body.sb-sidenav-toggled .sb-topnav #sidebarToggle {
    width: 68px;
    display: flex;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Footer brand - hidden by default, shown only when the sidebar is
   collapsed (see the .sidebar-brand-text hide rule above), taking over
   the bottom-right slot the removed "Get Insiders" link used to occupy
   (see includes/footer.php). */
.footer-brand {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
.footer-brand img {
  width: 20px;
  height: 20px;
}
.footer-brand span {
  color: var(--raspap-theme-color);
  font-weight: 600;
}
@media (min-width: 992px) {
  body.sb-sidenav-toggled .footer-brand {
    display: inline-flex;
  }
}

/* Brand wordmark lives in the top navbar (includes/navbar.php), which is
   white (.sb-topnav.navbar-light below) - not inside the dark sidebar.
   White text here was invisible against that white background (a leftover
   from an earlier assumption that this lived in the sidebar), which also
   left a large blank gap before the hamburger toggle since the invisible
   text still occupied its full 2rem-font layout width. Matches the accent
   blue used for the "VS-CAP" wordmark on the login page for consistency. */
.sidebar-brand-text {
  color: var(--raspap-theme-color);
}
.sidebar-brand-text:focus,
.sidebar-brand-text:hover {
  color: var(--raspap-theme-darker);
}

#navbar-system-mode.active {
  color: var(--raspap-theme-color);
}

/* Top navbar - clean white bar, hairline separator from the gray content */
.sb-topnav.navbar-light {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Main content background */
body {
  background-color: #f4f6fb;
}

/* Card shape - rounded corners, soft shadow instead of a heavy drop-shadow */
:root {
  --bs-card-border-radius: 0.625rem;
}
.card.shadow {
  box-shadow: 0 1px 2px rgba(16, 24, 64, .06), 0 1px 3px rgba(16, 24, 64, .08) !important;
}

/* Card header - understated (icon + label on a neutral surface) instead of
   a solid theme-color block. Uses Bootstrap 5.3's own dark-mode-aware
   tokens, so this adapts to the light/dark toggle automatically with no
   separate entry needed in the dark-mode block below. */
.card .card-header,
.modal-header {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
}
.card-body {
  color: #495057;
}
.card-footer, .modal-footer {
  background-color: #f2f1f0;
}

/* --- Page Specific --- */
/* Login: fully self-contained in app/css/base.css (.login-shell and its
   local custom properties) - deliberately not themed from here, so the
   sign-in screen keeps its own brand palette regardless of the accent
   colour an admin picks for the rest of the panel. */

/* Dashboard */
.connection-item,
.connection-item > i,
.connections-left > .connection-item > span  {
  color: var(--raspap-text-light);
}

.connection-item > a.active > span,
.connection-item > a.active > i {
  color: var(--raspap-theme-color) !important;
}

.ip-info-toggle {
  background: #e3e3e3;
}
.ip-info-toggle button {
  color: var(--raspap-theme-color);
}
.ip-info-toggle button.active {
  background: var(--raspap-theme-color);
  color: white;
}

.band.active {
  border-color: var(--raspap-theme-color);
  color: var(--raspap-theme-color);
}

.device-label {
  color: var(--raspap-theme-color);
}

.status-item {
  color: var(--raspap-text-light);
}
.status-item.active > span {
  color: var(--raspap-theme-color) !important;
}
.status-item.active > div > i {
  color: var(--raspap-theme-color) !important;
}

.client-type i {
  color: var(--raspap-theme-color);
  border: 2px solid var(--raspap-theme-color);
}

.client-type i.badge-icon {
  background: var(--raspap-theme-color);
  color: var(--raspap-offwhite);
}

.client-count {
  background: var(--raspap-theme-color);
  color: var(--raspap-offwhite);
}

/* WiFi Client */
.signal-icon .signal-bar {
  background: var(--raspap-theme-color); 
}

/*
Theme Name: Lights Out
Author: @billz
Author URI: https://github.com/billz
Description: A Bootstrap dark mode theme for RaspAP
License: GNU General Public License v3.0
*/
/* Dark Mode */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] footer,
html[data-bs-theme="dark"] .sb-topnav,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal:not(#modal-admin-login) .modal-body,
html[data-bs-theme="dark"] .modal:not(#modal-admin-login) .modal-footer {
  background-color: var(--bs-dark) !important;
  color: var(--bs-light) !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal:not(#modal-admin-login) .modal-body,
html[data-bs-theme="dark"] .modal:not(#modal-admin-login) .modal-footer {
  border-color: var(--bs-secondary);
}

html[data-bs-theme="dark"] .sb-topnav #sidebarToggle,
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .table > * > * > * {
  color: var(--bs-light) !important;
}
/* Sidebar is permanently dark (see the unconditional .sb-sidenav-light
   block above) and no longer needs a dark-mode-specific variant. */

html[data-bs-theme="dark"] .sb-status,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .info-item-xs {
  color: var(--bs-secondary) !important;
}

html[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-link-active-color: var(--bs-light);
  --bs-nav-tabs-link-active-bg: var(--bs-dark);
  --bs-nav-tabs-link-active-border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-dark);
  --bs-nav-tabs-border-color: var(--bs-secondary);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary);
}

html[data-bs-theme="dark"] .ip-info-toggle {
  background: transparent;
  border: 2px solid var(--raspap-text-light);
}