/* ============================================================
   BIGFIX HRMS — clean & minimal theme
   Loaded AFTER Bootstrap 5.3 so it wins. Restyles shared
   components site-wide (colour, spacing, borders only — no
   layout/structure changes, so it is safe across all pages).
   ============================================================ */

:root {
  /* ---- palette ---- */
  --app-bg:        #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #fbfcfd;
  --border:        #e6e8eb;
  --border-strong: #d7dbe0;
  --text:          #2b3440;
  --muted:         #6b7280;
  --brand:         #4c6ef5;
  --brand-hover:   #3b5bdb;
  --brand-soft:    #eef2ff;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow-sm:     0 1px 2px rgba(16, 24, 40, .04);
  --shadow:        0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);

  /* ---- Bootstrap variable overrides (cascade into components) ---- */
  --bs-body-bg:          var(--app-bg);
  --bs-body-color:       var(--text);
  --bs-secondary-color:  var(--muted);
  --bs-border-color:     var(--border);
  --bs-border-radius:    var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-primary:          #4c6ef5;
  --bs-primary-rgb:      76, 110, 245;   /* recolours .bg-primary / .text-primary / .border-primary */
  --bs-link-color:       #4c6ef5;
  --bs-link-color-rgb:   76, 110, 245;
  --bs-link-hover-color: #3b5bdb;
}

body {
  background: var(--app-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------- Cards ---------------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-cap-bg: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.card-header { border-bottom: 1px solid var(--border); font-weight: 600; }

/* ---------------- Buttons ---------------- */
.btn { --bs-btn-border-radius: var(--radius-sm); font-weight: 500; }
.btn-lg { --bs-btn-border-radius: var(--radius); }
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 76, 110, 245;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 76, 110, 245;
}
.btn-secondary {
  --bs-btn-color: #364152;
  --bs-btn-bg: #eef1f5;
  --bs-btn-border-color: #e3e7ec;
  --bs-btn-hover-color: #1f2937;
  --bs-btn-hover-bg: #e3e7ec;
  --bs-btn-hover-border-color: #d7dbe0;
  --bs-btn-active-bg: #d7dbe0;
  --bs-btn-active-border-color: #d7dbe0;
}

/* ---------------- Tables ---------------- */
.table {
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--brand-soft);
  --bs-table-cell-padding-y: .65rem;
  --bs-table-cell-padding-x: .85rem;
  vertical-align: middle;
}
.table > thead th { font-weight: 600; }

/* ---------------- Forms ---------------- */
.form-control, .form-select {
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(76, 110, 245, .15);
}
.form-label { font-weight: 500; color: #384150; }

/* ---------------- Alerts / badges ---------------- */
.alert { border: 1px solid var(--border); border-radius: var(--radius); }
.badge { font-weight: 600; border-radius: 6px; }

/* ---------------- Dropdowns / modals ---------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .10);
}
.modal-content { border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------------- Nav / pagination accents ---------------- */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand); }
.page-link { color: var(--brand); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }

/* ---------------- Employee top navbar (base.html) ---------------- */
.app-navbar { background: #1f2937; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.app-navbar .navbar-brand { font-weight: 600; letter-spacing: .01em; }

/* ---------------- Misc ---------------- */
hr { border-color: var(--border); opacity: 1; }
.footer { color: var(--muted); }

/* ============================================================
   Override the copy-pasted "rainbow" design shared across the
   employee pages (dashboard, profile, history, leave, report…)
   and includes/sidebar.html. theme.css loads last, and
   !important custom-property declarations win regardless of
   document order, so this calms the whole system from one place.
   ============================================================ */
:root {
  --primary-gradient:   linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
  --info-gradient:      linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
  --admin-gradient:     linear-gradient(135deg, #4c6ef5 0%, #3b5bdb 100%) !important;
  --highlight-gradient: linear-gradient(135deg, #4c6ef5 0%, #6366f1 100%) !important;
  --success-gradient:   linear-gradient(135deg, #12b76a 0%, #039855 100%) !important;
  --warning-gradient:   linear-gradient(135deg, #f79009 0%, #dc6803 100%) !important;
  --danger-gradient:    linear-gradient(135deg, #f04438 0%, #d92d20 100%) !important;
  --dark-gradient:      linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  --base-bg:            #f5f6f8 !important;
}

/* Flatten the tinted page backgrounds */
body {
  background: var(--app-bg) !important;
  background-image: none !important;
}

/* Cards: flat surface, subtle border/shadow, no animation or blur */
.glass-card,
.analytics-card {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  animation: none !important;
}
.glass-card::before,
.analytics-card::before {
  background: var(--brand) !important;
  animation: none !important;
}

/* Sidebar active item: solid brand instead of gradient */
.nav-link.active,
.sidebar .nav-link.active {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Structural chrome that used hardcoded gradient literals
   (navbar, modal/card headers). Flatten to clean surfaces —
   colour/border only, no layout.
   NOTE: the admin sidebar (.sidebar / its .offcanvas) is deliberately
   NOT flattened. base_admin.html styles it as a self-consistent dark
   gradient with white link text and cyan icons; flattening it to a light
   surface left the white text invisible (only icons showed). Keep it dark. */
.navbar-primary {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
}
.modal-header {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.card-header {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Readability guard: many templates put `text-white` / `text-light`
   directly on (or inside) these headers back when they had dark gradient
   backgrounds. Now that the chrome is flattened to light surfaces, that
   text renders white-on-light (invisible). Re-point only that text to the
   theme's readable colour. Badges and buttons are excluded so their own
   colouring (e.g. a coloured pill with white text) is left intact. */
.navbar-primary.text-white,
.navbar-primary.text-light,
.modal-header.text-white,
.modal-header.text-light,
.card-header.text-white,
.card-header.text-light,
.navbar-primary .text-white:not(.badge):not(.btn),
.navbar-primary .text-light:not(.badge):not(.btn),
.modal-header .text-white:not(.badge):not(.btn),
.modal-header .text-light:not(.badge):not(.btn),
.card-header .text-white:not(.badge):not(.btn),
.card-header .text-light:not(.badge):not(.btn) {
  color: var(--text) !important;
}