/* custom-theme.css
   Palette based on: Blue, LightBlue, SkyBlue, DeepSkyBlue, DodgerBlue,
   CornflowerBlue, SteelBlue, RoyalBlue, MediumBlue, DarkBlue, MidnightBlue, Navy
   Default brand color = LightBlue (#ADD8E6)
*/

/* -------------------------
   1) Palette / Variables
   ------------------------- */
:root{
  /* Primary semantic (default brand) */
  --brand-lightblue: #ADD8E6;   /* Light Blue - default */
  --brand-sky:       #87CEEB;   /* Sky Blue */
  --brand-deepsky:   #00BFFF;   /* Deep Sky Blue */
  --brand-dodger:    #1E90FF;   /* Dodger Blue */
  --brand-cornflower:#6495ED;   /* Cornflower Blue */
  --brand-steel:     #4682B4;   /* Steel Blue */
  --brand-royal:     #4169E1;   /* Royal Blue */
  --brand-blue:      #0000FF;   /* Blue - pure */
  --brand-medium:    #0000CD;   /* Medium Blue */
  --brand-dark:      #00008B;   /* Dark Blue */
  --brand-midnight:  #191970;   /* Midnight Blue */
  --brand-navy:      #000080;   /* Navy */

  /* Semantic variables used throughout */
  --brand-primary: var(--brand-lightblue);
  --brand-primary-dark: var(--brand-dodger);
  --brand-contrast: #ffffff;
  --brand-text-dark: #0b2b4a; /* dark text for better readability over light bg */
  --brand-muted: rgba(11,43,74,0.08); /* soft shadow color */
  --brand-border: rgba(0,0,0,0.06);
  --brand-radius: .375rem;
  --brand-focus: 0 0 0 0.2 rgba(30,144,255,0.18);
}

/* Utility classes to quickly switch theme color (use in markup if needed) */
.btn-theme-dodger { --brand-primary: var(--brand-dodger); --brand-primary-dark: var(--brand-deepsky); }
.btn-theme-cornflower { --brand-primary: var(--brand-cornflower); --brand-primary-dark: var(--brand-royal); }
.btn-theme-royal { --brand-primary: var(--brand-royal); --brand-primary-dark: var(--brand-medium); }

/* -------------------------
   2) Global overrides
   ------------------------- */
a { color: var(--brand-primary); text-decoration: none; transition: color .12s ease-in-out; }
a:hover, a:focus { color: var(--brand-primary-dark); text-decoration: underline; outline: none; }

/* Prefer white text on primary backgrounds */
.text-on-brand { color: var(--brand-contrast) !important; }

/* small helpers */
.brand-gradient {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--brand-contrast);
}

/* -------------------------
   3) Navbar / Top header
   ------------------------- */
/* AdminLTE top-nav uses .main-header.navbar */
.main-header.navbar,
.navbar.navbar-primary,
.navbar.navbar-light {
  background: var(--brand-primary) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 6px var(--brand-muted) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.02), transparent) !important;
}

.main-header .navbar-brand, .navbar .navbar-brand {
  color: var(--brand-contrast) !important;
  font-weight: 600;
  letter-spacing: .2px;
}

.main-header .navbar-brand img.brand-image {
  height: 36px;
  width: auto;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Navbar links */
.main-header .nav-link, .navbar .nav-link {
  color: var(--brand-contrast) !important;
}
.main-header .nav-link:hover, .navbar .nav-link:hover {
  color: rgba(255,255,255,0.95) !important;
}

/* Dropdown */
.dropdown-menu {
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(11,43,74,0.12);
}
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(0,0,0,0.03);
}

/* Mobile toggler */
.navbar-toggler {
  border-color: rgba(255,255,255,0.12);
}

/* -------------------------
   4) Buttons (primary / brand)
   ------------------------- */
.btn-brand, .btn-primary.brand-btn {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  color: var(--brand-contrast) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 6px 18px rgba(11,43,74,0.08);
  border-radius: var(--brand-radius);
  padding: .5rem .9rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-brand:hover, .btn-brand:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11,43,74,0.12);
  outline: none;
}
.btn-brand:active { transform: translateY(0); }

/* Secondary / outline style */
.btn-brand-outline {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}
.btn-brand-outline:hover { background: var(--brand-primary); color: var(--brand-contrast); }

/* Small search button */
.btn-search {
  background: linear-gradient(90deg, var(--brand-sky) 0%, var(--brand-dodger) 100%);
  color: #fff;
  border: none;
  padding: .45rem .8rem;
  border-radius: 0 .375rem .375rem 0;
}
.btn-search:hover { filter: brightness(0.96); transform: translateY(-1px); }

/* -------------------------
   5) Card / Panel headers
   ------------------------- */
.card .brand-header {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  color: var(--brand-contrast) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.card .brand-header h3.card-title { color: var(--brand-contrast) !important; }

/* Card shadow & radius */
.card {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,43,74,0.06);
  border: 1px solid var(--brand-border);
}

/* -------------------------
   6) Breadcrumbs
   ------------------------- */
.breadcrumb .breadcrumb-item a {
  color: var(--brand-primary) !important;
}
.breadcrumb .breadcrumb-item.active {
  color: rgba(0,0,0,0.56);
}

/* -------------------------
   7) Small boxes (dashboard widgets)
   ------------------------- */
.small-box {
  border-radius: 8px;
  color: #fff;
  overflow: hidden;
}
.small-box .inner h3 { font-size: 1.8rem; font-weight: 700; }
.small-box.bg-info { background: linear-gradient(90deg, var(--brand-dodger), var(--brand-cornflower)) !important; }
.small-box.bg-success { background: linear-gradient(90deg, var(--brand-sky), var(--brand-lightblue)) !important; color: #063048; }
.small-box.bg-warning { background: linear-gradient(90deg, var(--brand-royal), var(--brand-medium)) !important; }
.small-box.bg-danger  { background: linear-gradient(90deg, var(--brand-midnight), var(--brand-dark)) !important; }

/* Icon visual in small-box */
.small-box .icon { opacity: .18; font-size: 48px; }

/* -------------------------
   8) Forms / Inputs / Modal
   ------------------------- */
.form-control:focus, .input-group .form-control:focus {
  box-shadow: var(--brand-focus) !important;
  border-color: var(--brand-primary-dark) !important;
}

/* Modal primary buttons */
.modal .btn-brand {
  min-width: 86px;
}

/* -------------------------
   9) Tables / DataTables tweaks
   ------------------------- */
.table thead th { background: rgba(0,0,0,0.02); }
.table tbody tr:hover { background: rgba(0,0,0,0.02); }

/* -------------------------
   10) Homepage-specific tweaks
   ------------------------- */
.content-wrapper { background: #f8fbff; } /* subtle very-light-blue page background */
.logo { border-radius: 6px; }

/* Search input group */
.input-group .form-control {
  border-radius: .375rem 0 0 .375rem;
  border-right: 0;
}

/* -------------------------
   11) Accessibility / responsive helpers
   ------------------------- */
@media (max-width: 767.98px) {
  .brand-text { font-size: 0.95rem; }
  .nav-link img, .brand-image { height: 30px; width: auto; }
}

/* -------------------------
   12) Extras: utility color classes for blocks
   ------------------------- */
.bg-blue { background: var(--brand-blue) !important; color: #fff !important; }
.bg-lightblue { background: var(--brand-lightblue) !important; color: #063048 !important; }
.bg-dodger { background: linear-gradient(90deg,var(--brand-dodger),var(--brand-deepsky)) !important; color: #fff !important; }
.bg-cornflower { background: linear-gradient(90deg,var(--brand-cornflower),var(--brand-royal)) !important; color: #fff !important; }
.bg-steel { background: var(--brand-steel) !important; color: #fff !important; }

/* -------------------------
   13) Important overrides to ensure AdminLTE theme uses our colors
   ------------------------- */
/* If AdminLTE defines .bg-primary, override gently */
.bg-primary, .btn-primary {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: var(--brand-contrast) !important;
}