/*
 * FinMil Dashboard Theme
 * Color palette derived from finmil.co.za:
 *   Navy   #0c2461
 *   Red    #c0392b
 *   White  #ffffff
 *   Gray   #f4f6f9
 */

/* ── Root variables ─────────────────────────────────── */
:root {
  --fm-navy:        #0c2461;
  --fm-navy-hover:  #1a3a7c;
  --fm-navy-light:  #e8edf8;
  --fm-red:         #c0392b;
  --fm-red-hover:   #e74c3c;
  --fm-white:       #ffffff;
  --fm-gray-bg:     #f4f6f9;
  --fm-gray-border: #dde3ec;
  --fm-text:        #2c3e50;
  --fm-text-muted:  #6b7a8d;
  --fm-shadow:      0 2px 12px rgba(12, 36, 97, 0.10);
}

/* ── Base page ──────────────────────────────────────── */
body {
  background-color: var(--fm-gray-bg) !important;
  color: var(--fm-text) !important;
}

/* ── Top header navbar (#mainNav) ───────────────────── */
#mainNav {
  background-color: var(--fm-navy) !important;
  box-shadow: var(--fm-shadow);
  border-bottom: 3px solid var(--fm-red);
}

#mainNav .navbar-brand {
  color: var(--fm-white) !important;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.3rem;
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:focus {
  color: var(--fm-red) !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: rgba(255,255,255,0.88) !important;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0.6em 1em !important;
  transition: color 0.2s;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: var(--fm-red) !important;
}

/* Remove the transparent-on-large-screens behavior from rent.css */
@media (min-width: 992px) {
  #mainNav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background-color: var(--fm-navy) !important;
  }
  #mainNav.navbar-shrink {
    background-color: var(--fm-navy) !important;
  }
}

/* ── Sidebar (#sideNav) ─────────────────────────────── */
#sideNav,
nav.sidebar {
  background-color: var(--fm-navy) !important;
  border-right: 1px solid var(--fm-navy-hover);
}

/* Logo/brand area at top of sidebar */
#sideNav .navbar-brand {
  color: var(--fm-white) !important;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 10px;
  display: block;
  text-align: center;
  background-color: var(--fm-red);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Sidebar nav links */
#sideNav .navbar-nav .nav-item .nav-link,
nav.sidebar .navbar-nav .nav-item .nav-link,
nav.sidebar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 12px 16px !important;
  letter-spacing: 0.4px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

#sideNav .navbar-nav .nav-item .nav-link:hover,
nav.sidebar .navbar-nav .nav-item .nav-link:hover,
nav.sidebar .nav-link:hover {
  color: var(--fm-white) !important;
  background-color: var(--fm-navy-hover) !important;
  border-left-color: var(--fm-red) !important;
}

/* Active sidebar item */
#sideNav .navbar-nav .nav-item.active .nav-link,
nav.sidebar .navbar-nav .nav-item.active .nav-link {
  color: var(--fm-white) !important;
  background-color: var(--fm-red) !important;
  border-left-color: var(--fm-white) !important;
}

/* Sidebar dividers */
nav.sidebar .navbar-nav > li {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

nav.sidebar .navbar-nav > li:first-child {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Content wrapper ────────────────────────────────── */
section.wrapper {
  background-color: var(--fm-gray-bg) !important;
  min-height: calc(100vh - 70px);
}

/* ── Cards ──────────────────────────────────────────── */
.card {
  border: 1px solid var(--fm-gray-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--fm-shadow) !important;
  background-color: var(--fm-white) !important;
}

.card-title {
  color: var(--fm-navy) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--fm-red);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* Station info cards on list.php */
.card-block,
.card-body {
  background-color: var(--fm-white) !important;
}

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
  background-color: var(--fm-navy) !important;
  border-color: var(--fm-navy) !important;
  color: var(--fm-white) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--fm-navy-hover) !important;
  border-color: var(--fm-navy-hover) !important;
  color: var(--fm-white) !important;
  box-shadow: 0 0 0 0.2rem rgba(12,36,97,0.3) !important;
}

.btn-success {
  background-color: #1a6b3a !important;
  border-color: #1a6b3a !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.btn-success:hover {
  background-color: #155e32 !important;
  border-color: #155e32 !important;
}

.btn-danger {
  background-color: var(--fm-red) !important;
  border-color: var(--fm-red) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.btn-danger:hover {
  background-color: var(--fm-red-hover) !important;
  border-color: var(--fm-red-hover) !important;
}

.btn-info {
  background-color: #2980b9 !important;
  border-color: #2980b9 !important;
  color: var(--fm-white) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.btn-secondary {
  background-color: #5a6a7e !important;
  border-color: #5a6a7e !important;
  color: var(--fm-white) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.btn-outline-secondary {
  color: var(--fm-navy) !important;
  border-color: var(--fm-navy) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.btn-outline-secondary:hover {
  background-color: var(--fm-navy) !important;
  color: var(--fm-white) !important;
}

/* ── Badges ─────────────────────────────────────────── */
.badge-success {
  background-color: #1a6b3a !important;
}

.badge-primary {
  background-color: var(--fm-navy) !important;
}

.badge-danger {
  background-color: var(--fm-red) !important;
}

.badge-pill {
  border-radius: 50px !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
}

/* ── Alerts (dashboard summary cards) ──────────────── */
.alert-warning {
  background-color: #fff8e6 !important;
  border-color: #f0c040 !important;
  color: #7a5a00 !important;
  border-radius: 8px !important;
  border-left: 4px solid #f0c040 !important;
}

.alert-info {
  background-color: var(--fm-navy-light) !important;
  border-color: var(--fm-navy) !important;
  color: var(--fm-navy) !important;
  border-radius: 8px !important;
  border-left: 4px solid var(--fm-navy) !important;
}

.alert-success {
  background-color: #eafaf1 !important;
  border-color: #1a6b3a !important;
  color: #155e32 !important;
  border-radius: 8px !important;
  border-left: 4px solid #1a6b3a !important;
}

.alert-danger {
  background-color: #fdf0ef !important;
  border-color: var(--fm-red) !important;
  color: #7b1f18 !important;
  border-radius: 8px !important;
  border-left: 4px solid var(--fm-red) !important;
}

/* ── Tables ─────────────────────────────────────────── */
.table thead th {
  background-color: var(--fm-navy) !important;
  color: var(--fm-white) !important;
  border-color: var(--fm-navy-hover) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--fm-navy-light) !important;
}

.thead-light th {
  background-color: var(--fm-navy-light) !important;
  color: var(--fm-navy) !important;
  font-weight: 700;
}

.table-info {
  background-color: var(--fm-navy-light) !important;
}

.table-secondary {
  background-color: #eef0f4 !important;
}

/* ── Form controls ──────────────────────────────────── */
.form-control {
  border: 1px solid var(--fm-gray-border) !important;
  border-radius: 6px !important;
  color: var(--fm-text) !important;
  background-color: var(--fm-white) !important;
}

.form-control:focus {
  border-color: var(--fm-navy) !important;
  box-shadow: 0 0 0 0.18rem rgba(12,36,97,0.18) !important;
}

select.form-control[multiple] {
  border-color: var(--fm-navy) !important;
}

/* ── Nav tabs ───────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--fm-navy) !important;
}

.nav-tabs .nav-link {
  color: var(--fm-text) !important;
  font-weight: 600;
  border-radius: 6px 6px 0 0 !important;
  border: 1px solid transparent !important;
  padding: 8px 18px !important;
  margin-right: 4px;
}

.nav-tabs .nav-link:hover {
  color: var(--fm-navy) !important;
  background-color: var(--fm-navy-light) !important;
  border-color: var(--fm-gray-border) !important;
}

.nav-tabs .nav-link.active {
  color: var(--fm-white) !important;
  background-color: var(--fm-navy) !important;
  border-color: var(--fm-navy) !important;
}

/* ── Page headings ──────────────────────────────────── */
h1, h2 {
  color: var(--fm-navy) !important;
}

h3, h4, h5 {
  color: var(--fm-navy);
}

/* Station block headings on list.php */
.card h3 {
  color: var(--fm-navy) !important;
}

/* ── Section headings with border accents ───────────── */
h5[style*="border-bottom: 2px solid"] {
  color: var(--fm-navy) !important;
}

/* ── Dashboard summary blocks ───────────────────────── */
.alert b {
  font-size: 1rem;
}

/* ── Misc helpers ───────────────────────────────────── */
.text-muted {
  color: var(--fm-text-muted) !important;
}

a {
  color: var(--fm-navy);
}

a:hover {
  color: var(--fm-red);
}

hr {
  border-top: 1px solid var(--fm-gray-border);
}

/* ── Navbar toggler (mobile) ────────────────────────── */
.navbar-toggler {
  background-color: var(--fm-red) !important;
  border-color: var(--fm-red) !important;
  color: var(--fm-white) !important;
}

/* ── Calendar day selected/today highlight ──────────── */
.dm-cal-cell.today {
  border: 2px solid var(--fm-red) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) inset !important;
}

.dm-cal-cell.selected {
  border: 2px solid var(--fm-navy) !important;
  box-shadow: 0 0 0 2px rgba(12, 36, 97, 0.15) inset !important;
}

/* ── Login / auth pages ─────────────────────────────── */
.card.auth-card {
  max-width: 440px;
  margin: 60px auto;
  border-top: 4px solid var(--fm-red) !important;
}

/* ── Smooth page feel ───────────────────────────────── */
* {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}