/* ==========================================================================
   KCC palette — shared across all AdminLTE portals
   --------------------------------------------------------------------------
   Colours sampled from the KCC emblem itself (img/sscLogo.png):
     navy  #002060  (dominant, 1209px)   gold  #F0E0A0 (991px)
   The pale emblem gold has no contrast on white, so anything that sits on a
   light surface uses the deeper --kcc-gold-ink instead; the pale tone is kept
   for accents on navy, where it belongs.

   MUST be the LAST stylesheet on the page. online_plugins/css/bootstrap.min.css
   re-declares .btn-primary at identical specificity on several portals, so
   whichever loads last wins.

   Colour only. No layout, no spacing, nothing structural, so it cannot break
   a page it has never been tested against.
   ========================================================================== */

:root {
  --kcc-navy-900: #001640;
  --kcc-navy: #002060;
  --kcc-navy-600: #0d3277;
  --kcc-navy-400: #34528f;
  --kcc-gold: #f0e0a0;
  --kcc-gold-mid: #d8c274;
  --kcc-gold-ink: #9a7b1e;
  --kcc-line: #e3e7ec;
}

/* --- top bar -------------------------------------------------------------- */

.main-header.navbar,
.navbar-white,
.navbar-light.navbar-white {
  background-color: var(--kcc-navy) !important;
  border-bottom: 1px solid rgba(240, 224, 160, .28) !important;
}

.main-header .nav-link,
.main-header .navbar-brand,
.main-header .brand-text,
.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
}

.main-header .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--kcc-gold) !important;
}

/* --- sidebar --------------------------------------------------------------
   Do NOT force the sidebar background. Portals ship different AdminLTE skins
   (reg/col run pro-theme with `sidebar-light-success`, others use dark ones),
   and repainting it fights whatever each portal already has.

   Text colour is therefore scoped by skin. An unscoped light text colour is
   what turned reg's menu into white-on-white: its sidebar is white, not dark.
   Substring matching on the class covers every AdminLTE accent variant
   (sidebar-light-success, sidebar-dark-primary, and the rest).
   ------------------------------------------------------------------------ */

/* Active item reads the same on either skin: navy fill, gold edge, white text. */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--kcc-navy) !important;
  border-left: 3px solid var(--kcc-gold) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nav-sidebar .nav-link.active i,
.nav-sidebar > .nav-item > .nav-link.active i {
  color: var(--kcc-gold) !important;
}

/* --- light sidebars (reg, col, and any sidebar-light-*) --- */

[class*="sidebar-light"] .nav-sidebar .nav-link {
  color: #22334d !important;
}

[class*="sidebar-light"] .nav-sidebar .nav-link i,
[class*="sidebar-light"] .nav-sidebar .nav-link .right,
[class*="sidebar-light"] .nav-sidebar .nav-link p {
  color: inherit !important;
}

[class*="sidebar-light"] .nav-sidebar .nav-link:hover {
  background-color: #eef2f8 !important;
  color: var(--kcc-navy) !important;
}

[class*="sidebar-light"] .nav-sidebar .nav-treeview .nav-link {
  color: #3d4d66 !important;
}

[class*="sidebar-light"] .nav-sidebar .nav-header {
  color: #6a7789 !important;
  font-weight: 600;
}

[class*="sidebar-light"] .brand-link,
[class*="sidebar-light"] .brand-link .brand-text {
  color: var(--kcc-navy) !important;
  font-weight: 600;
}

/* --- dark sidebars --- */

[class*="sidebar-dark"] .nav-sidebar .nav-link {
  color: #d7dfeb !important;
}

[class*="sidebar-dark"] .nav-sidebar .nav-link i,
[class*="sidebar-dark"] .nav-sidebar .nav-link .right,
[class*="sidebar-dark"] .nav-sidebar .nav-link p {
  color: inherit !important;
}

[class*="sidebar-dark"] .nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

[class*="sidebar-dark"] .nav-sidebar .nav-treeview .nav-link {
  color: #c2ccdb !important;
}

[class*="sidebar-dark"] .nav-sidebar .nav-header {
  color: var(--kcc-gold-mid) !important;
  font-weight: 600;
}

[class*="sidebar-dark"] .brand-link,
[class*="sidebar-dark"] .brand-link .brand-text {
  color: #fff !important;
}

/* --- primary controls ----------------------------------------------------- */

.btn-primary,
.btn-info {
  background-color: var(--kcc-navy) !important;
  border-color: var(--kcc-navy) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: var(--kcc-navy-600) !important;
  border-color: var(--kcc-navy-600) !important;
}

.btn-primary:focus,
.btn-info:focus {
  box-shadow: 0 0 0 3px rgba(0, 32, 96, .20) !important;
}

.btn-outline-primary {
  color: var(--kcc-navy) !important;
  border-color: var(--kcc-navy) !important;
}

.btn-outline-primary:hover {
  background-color: var(--kcc-navy) !important;
  color: #fff !important;
}

.bg-primary,
.bg-info {
  background-color: var(--kcc-navy) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--kcc-navy) !important;
}

.badge-primary,
.badge-info {
  background-color: var(--kcc-navy) !important;
  color: #fff !important;
}

/* --- links ---------------------------------------------------------------- */

a {
  color: var(--kcc-navy-600);
}

a:hover {
  color: var(--kcc-navy);
}

/* --- cards / panels ------------------------------------------------------- */

.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
  background-color: var(--kcc-navy) !important;
  border-bottom: 0;
  color: #fff !important;
}

.card-primary.card-outline,
.card-info.card-outline {
  border-top: 3px solid var(--kcc-navy) !important;
}

.card-header .card-title {
  font-weight: 600;
}

/* --- tabs / pills --------------------------------------------------------- */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--kcc-navy) !important;
  color: #fff !important;
}

.nav-tabs .nav-link.active {
  border-top: 2px solid var(--kcc-navy);
  color: var(--kcc-navy) !important;
  font-weight: 600;
}

/* --- forms ---------------------------------------------------------------- */

.form-control:focus,
.custom-select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--kcc-navy-400) !important;
  box-shadow: 0 0 0 3px rgba(0, 32, 96, .12) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--kcc-navy) !important;
  border-color: var(--kcc-navy) !important;
}

/* --- tables --------------------------------------------------------------- */

.table thead th {
  background-color: #f4f6f9;
  border-bottom: 2px solid var(--kcc-line);
  color: var(--kcc-navy);
  font-weight: 600;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 32, 96, .04);
}

/* DataTables paging */
.page-item.active .page-link {
  background-color: var(--kcc-navy) !important;
  border-color: var(--kcc-navy) !important;
}

.page-link {
  color: var(--kcc-navy-600);
}

/* --- small stat boxes ----------------------------------------------------- */

.small-box.bg-primary,
.small-box.bg-info {
  background-color: var(--kcc-navy) !important;
  color: #fff !important;
}

.small-box .icon {
  color: rgba(255, 255, 255, .18) !important;
}

/* --- footer --------------------------------------------------------------- */

.main-footer {
  border-top: 1px solid var(--kcc-line);
  color: #5b6572;
}

.main-footer a,
.main-footer strong {
  color: var(--kcc-navy);
}

/* --- misc accents --------------------------------------------------------- */

.progress-bar,
.bg-gradient-primary,
.bg-gradient-info {
  background-color: var(--kcc-navy) !important;
  background-image: none !important;
}

.callout.callout-info {
  border-left-color: var(--kcc-navy) !important;
}

.alert-info {
  background-color: #eef2fa;
  border-color: #cfd9ee;
  color: #1b2c4d;
}

/* Gold is reserved for emphasis on navy. On light surfaces use the deeper ink
   tone so the text stays legible. */
.text-gold {
  color: var(--kcc-gold-ink) !important;
}