/* ============================================================================
   Vaahans Control Center — brand theme override for the Angle (Bootstrap 4)
   admin template. Loaded AFTER bootstrap.css + app.css so these rules win.

   Brand colors (eyedropper-verified from public/logo.png):
     amber  #FDB700   dark  #16161D
   ========================================================================== */

:root {
  --v-amber: #FDB700;
  --v-amber-600: #E0A303;
  --v-amber-700: #c68a00;
  --v-dark: #16161D;       /* logo background — used for sidebar + topbar */
  --v-dark-2: #1e1f29;     /* raised hover surface in the sidebar */
  --v-asphalt: #20212B;
  --v-sidebar-text: #9b9da6;
  --v-sidebar-muted: #6b6d78;
  --v-content-bg: #f3f4f7;
}

/* ── Content surface ───────────────────────────────────────────────────────── */
body, .wrapper > section { background-color: var(--v-content-bg); }

/* ── Top navbar (dark) ───────────────────────────────────────────────────────── */
.topnavbar {
  background-color: var(--v-dark) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(253, 183, 0, .18);
}
.topnavbar .navbar-header { background-color: var(--v-dark) !important; }
/* navbar is 60px tall natively; center the brand and let the logo nearly fill it */
.topnavbar .navbar-header .navbar-brand { padding: 0; height: 60px; display: flex; align-items: center; }
.topnavbar .navbar-nav > .nav-item > .nav-link { color: #c9cace; }
.topnavbar .navbar-nav > .nav-item > .nav-link:hover,
.topnavbar .navbar-nav > .nav-item.show > .nav-link { color: var(--v-amber); }
.brand-logo > img { max-height: 52px; width: auto; }
.brand-logo-collapsed > img { max-height: 40px; width: auto; }

/* ── Left sidebar (dark) ───────────────────────────────────────────────────────── */
.wrapper .aside-container,
.wrapper .aside-container .aside-inner,
.sidebar { background-color: var(--v-dark) !important; }

.sidebar > .sidebar-nav > li > a,
.sidebar > .sidebar-nav > li > .nav-item { color: var(--v-sidebar-text); }
.sidebar > .sidebar-nav > li > a:focus,
.sidebar > .sidebar-nav > li > a:hover { color: #fff; background-color: var(--v-dark-2); }
.sidebar-nav > li > a > em,
.sidebar-nav > li > .nav-item > em { color: var(--v-sidebar-muted); }
.sidebar-nav > li > a:hover > em { color: var(--v-amber); }

/* active item: amber left rail + amber icon + light label */
.sidebar > .sidebar-nav > li.active,
.sidebar > .sidebar-nav > li.active > a,
.sidebar > .sidebar-nav > li > a.active {
  color: #fff !important;
  background-color: rgba(253, 183, 0, .10);
  box-shadow: inset 3px 0 0 var(--v-amber);
}
.sidebar > .sidebar-nav > li.active > a > em,
.sidebar > .sidebar-nav > li > a.active > em { color: var(--v-amber) !important; }

/* SECTION SEPARATORS between module groups */
.sidebar-nav > .nav-heading {
  padding: 16px 24px 7px;
  margin-top: 6px;
  color: var(--v-sidebar-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.sidebar-nav > .nav-heading:first-of-type { border-top: 0; }

/* subnav (collapsible children) */
.sidebar-subnav-header { color: var(--v-sidebar-muted) !important; }
.sidebar .sidebar-nav .sidebar-subnav { background-color: rgba(0, 0, 0, .25); }

/* user block at the top of the sidebar */
.has-user-block { background-color: rgba(0, 0, 0, .25); }
.user-block-name { color: #fff; }
.user-block-role { color: var(--v-amber); }

/* ── Amber as the Bootstrap "primary" ───────────────────────────────────────── */
.btn-primary {
  background-color: var(--v-amber); border-color: var(--v-amber);
  color: var(--v-dark); font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--v-amber-600); border-color: var(--v-amber-600); color: var(--v-dark);
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(253, 183, 0, .4); }

.btn-outline-primary { color: var(--v-amber-700); border-color: var(--v-amber); }
.btn-outline-primary:hover { background-color: var(--v-amber); border-color: var(--v-amber); color: var(--v-dark); }

a { color: var(--v-amber-700); }
a:hover { color: var(--v-amber-600); }
.text-primary { color: var(--v-amber-700) !important; }
.bg-primary { background-color: var(--v-amber) !important; color: var(--v-dark) !important; }
.badge-primary { background-color: var(--v-amber); color: var(--v-dark); }

.form-control:focus {
  border-color: var(--v-amber);
  box-shadow: 0 0 0 .2rem rgba(253, 183, 0, .22);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--v-amber); border-color: var(--v-amber);
}
.page-item.active .page-link { background-color: var(--v-amber); border-color: var(--v-amber); color: var(--v-dark); }
.page-link { color: var(--v-amber-700); }

/* ── Login page ───────────────────────────────────────────────────────────────── */
/* solid dark (no gradient) so the logo's dark background blends seamlessly */
.full-page-background.bg-darker { background: var(--v-dark) !important; }

/* logo presented as an app-icon badge floating on the dark page */
.login-logo {
  width: 132px; height: 132px;
  border-radius: 26px;
  margin-bottom: 26px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.login-card { border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.login-sub { color: var(--v-sidebar-muted); letter-spacing: .14em; font-size: .72rem; font-weight: 700; }
.login-amber-rule { height: 3px; width: 46px; background: var(--v-amber); border-radius: 3px; margin: 8px auto 0; }

/* ── Misc polish ───────────────────────────────────────────────────────────────── */
.card { border: 0; box-shadow: 0 1px 2px rgba(16, 22, 41, .06), 0 4px 14px rgba(16, 22, 41, .05); }
.content-heading { border-bottom-color: rgba(253, 183, 0, .35); }
.stat-amber { color: var(--v-amber-700); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status-dot.on { background: #37b24d; }
.status-dot.off { background: #adb5bd; }
.table thead th { border-top: 0; color: var(--v-sidebar-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }