/* =====================================================================
   AssuredSignage theme on top of AdminLTE 3 (Bootstrap 4).
   Brand palette from sparkfuturetechnologies.com:
     brand blue   #3C72FC   dark navy #0A0E1A   surface #0F0D1D
   ===================================================================== */

:root {
  --as-primary: #3C72FC;
  --as-primary-rgb: 60, 114, 252;
  --as-primary-hover: #2a5fe6;
  --as-dark: #0A0E1A;
  --as-surface: #0F0D1D;
}

/* ---- Top navbar: dark navy with blue underline ---- */
.as-topbar {
  background: linear-gradient(90deg, var(--as-dark) 0%, var(--as-surface) 100%);
  border-bottom: 2px solid var(--as-primary);
}
.as-topbar .nav-link { color: #cdd3df !important; }
.as-topbar .nav-link:hover { color: #fff !important; }

/* ---- Sidebar brand area (holds the white SparkFuture logo) ---- */
.as-brand {
  background: var(--as-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.as-brand-logo { max-height: 36px; max-width: 90%; }

/* Dark sidebar surface to match the brand */
.sidebar-dark-primary { background-color: #0c1322; }
.sidebar-dark-primary .nav-header { color: #6f7891; letter-spacing: .04em; }

/* Active / hover menu item in brand blue */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:focus,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
  background-color: var(--as-primary);
  color: #fff;
  box-shadow: 0 0 8px rgba(var(--as-primary-rgb), .45);
}
.nav-sidebar .nav-link:hover { background-color: rgba(255,255,255,.06); }

/* ---- Buttons / links in brand blue ---- */
.btn-primary {
  background-color: var(--as-primary);
  border-color: var(--as-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--as-primary-hover) !important;
  border-color: var(--as-primary-hover) !important;
}
.btn-outline-primary {
  color: var(--as-primary);
  border-color: var(--as-primary);
}
.btn-outline-primary:hover { background-color: var(--as-primary); border-color: var(--as-primary); }
a { color: var(--as-primary); }
a:hover { color: var(--as-primary-hover); }
.badge-primary { background-color: var(--as-primary); }

/* ---- Small-box dashboard widget accents ---- */
.small-box.as-box-primary { background-color: var(--as-primary) !important; color: #fff; }
.small-box.as-box-dark { background-color: var(--as-dark) !important; color: #fff; }

/* Cards a touch softer */
.card { box-shadow: 0 1px 3px rgba(10,14,26,.08); }
.table thead th { border-top: none; }

/* ---- Login page (AdminLTE login-box) ---- */
body.login-page { background: #f0f2f6; }
.login-logo-bar {
  background: linear-gradient(90deg, var(--as-dark) 0%, var(--as-surface) 100%);
  border-radius: .25rem .25rem 0 0;
  padding: 1.4rem 0;
  text-align: center;
}
.login-logo-bar img { max-height: 40px; }
.login-card-body { border-top: 3px solid var(--as-primary); }