/* ====================================================
   Leave Analytics — style.css
   ==================================================== */

:root {
  --sidebar-width   : 242px;
  --sidebar-bg      : rgba(44, 112, 80, .88);
  --sidebar-hover   : rgba(255,255,255,.10);
  --sidebar-active  : rgba(255,255,255,.18);
  --navbar-bg       : rgba(39, 102, 73, .88);
  --primary         : #3b9a6d;
  --primary-dark    : #2b7a56;
  --navbar-h        : 58px;
  --transition      : .2s ease;

  /* Table colours */
  --th-bg           : #347d5a;
  --th-color        : #ffffff;
  --th-border       : rgba(255,255,255,.16);
  --td-color        : #173424;
  --td-border       : rgba(59, 154, 109, .12);
  --row-stripe      : rgba(244, 251, 246, .96);
  --row-hover       : rgba(231, 245, 236, .98);

  /* Surface */
  --card-radius     : .9rem;
  --body-bg         : #eef7f1;

  /* Glass */
  --glass-card      : rgba(255,255,255,.88);
  --glass-header    : rgba(246, 252, 248, .92);
  --glass-border    : rgba(59, 154, 109, .08);
  --glass-blur      : blur(16px) saturate(1.5);
  --glass-shadow    : 0 14px 34px rgba(43, 122, 86, .07), 0 2px 6px rgba(0,0,0,.04);
}

/* ══════════════════════════════════
   BASE
══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background :
    radial-gradient(circle at top left, rgba(152, 208, 171, .14), transparent 28%),
    linear-gradient(160deg, #f7fcf8 0%, #eef7f1 38%, #e9f4ed 100%);
  background-attachment: fixed;
  background-size: cover;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size  : 14px;
  color      : var(--td-color);
  min-height : 100vh;
}

.wrapper      { padding-top: var(--navbar-h); min-height: 100vh; }
.bg-navbar    {
  background    : var(--navbar-bg) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom : 1px solid rgba(255,255,255,.10) !important;
}
.navbar-brand,
.navbar-brand span {
  color: #ffffff !important;
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: #ffffff !important;
}
.main-content {
  min-height: calc(100vh - var(--navbar-h));
  overflow-x: hidden;
  position  : relative;
  isolation : isolate;
}
.main-content::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(112, 193, 133, .08), transparent 18%),
    radial-gradient(circle at 88% 24%, rgba(39, 133, 84, .06), transparent 22%),
    radial-gradient(circle at 50% 88%, rgba(197, 230, 206, .12), transparent 26%);
  pointer-events: none;
  z-index    : -1;
}

/* ══════════════════════════════════
   SIDEBAR
══════════════════════════════════ */
.sidebar-nav {
  width      : var(--sidebar-width);
  background : var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-right: 1px solid rgba(255,255,255,.08);
  position   : sticky;
  top        : var(--navbar-h);
  height     : calc(100vh - var(--navbar-h));
  overflow-y : auto;
  flex-shrink: 0;
  transition : transform var(--transition);
  z-index    : 1000;
}

.sidebar-nav .nav-link {
  color         : rgba(244,252,247,.94);
  border-radius : .45rem;
  padding       : .52rem .85rem;
  font-size     : .87rem;
  font-weight   : 500;
  transition    : background var(--transition), color var(--transition), box-shadow var(--transition);
  white-space   : nowrap;
  letter-spacing: .01em;
}
.sidebar-nav .nav-link i { font-size: .95rem; opacity: .85; }
.sidebar-nav .nav-link:hover {
  background: var(--sidebar-hover);
  color     : #fff;
}
.sidebar-nav .nav-link.active {
  background : var(--sidebar-active);
  color      : #fff;
  font-weight: 600;
  box-shadow : inset 3px 0 0 var(--primary);
}

.sidebar-divider { border-color: rgba(200,214,240,.12) !important; }
.sidebar-label {
  color         : rgba(232,247,238,.72);
  font-size     : .68rem;
  font-weight   : 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sidebar-footer { color: rgba(232,247,238,.68); font-size: .72rem; }

/* ══════════════════════════════════
   CARDS
══════════════════════════════════ */
.card {
  border-radius: var(--card-radius) !important;
  border       : 1px solid var(--glass-border) !important;
  background   : var(--glass-card) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow   : var(--glass-shadow) !important;
}
.card-header {
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  font-size    : .88rem;
  font-weight  : 600;
  color        : #163626;
  background   : var(--glass-header) !important;
  border-bottom: 1px solid rgba(32, 96, 64, .10) !important;
  padding      : .85rem 1.1rem !important;
}
.card-body,
.card,
.table,
.table td,
.table th,
.dataTables_wrapper,
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: var(--td-color);
}

/* ══════════════════════════════════
   KPI CARDS
══════════════════════════════════ */
.kpi-card {
  transition   : transform .18s, box-shadow .18s;
  overflow     : hidden;
  position     : relative;
}
.kpi-card::after {
  content   : '';
  position  : absolute;
  inset     : 0 0 auto 0;
  height    : 3px;
  background: linear-gradient(90deg, #3b9a6d, #a6dcbc);
  opacity   : 0;
  transition: opacity .2s;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(59,154,109,.14) !important; cursor: pointer; }
.kpi-card:hover::after { opacity: 1; }
a.kpi-card { text-decoration: none; color: inherit; display: block; }
a.card-clickable {
  text-decoration : none;
  color           : inherit;
  display         : flex;
  flex-direction  : column;
  transition      : transform .18s, box-shadow .18s;
  cursor          : pointer;
}
a.card-clickable:hover {
  transform  : translateY(-3px);
  box-shadow : 0 10px 30px rgba(59,154,109,.12) !important;
  color      : inherit;
}

.kpi-icon {
  width        : 44px;
  height       : 44px;
  border-radius: .6rem;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 1.2rem;
  margin-bottom: .65rem;
  flex-shrink  : 0;
}
.kpi-icon-sm {
  width        : 32px;
  height       : 32px;
  border-radius: .45rem;
  font-size    : .95rem;
  margin-bottom: 0;
}
.kpi-value {
  font-size     : 1.8rem;
  font-weight   : 800;
  line-height   : 1;
  margin-bottom : .2rem;
  letter-spacing: -.04em;
  color         : #173424;
}
.kpi-label {
  font-size     : .72rem;
  color         : #355a48;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight   : 600;
}
.kpi-sub {
  font-size : .75rem;
  color     : #476957;
  margin-top: .2rem;
}

/* Colour overrides for values */
.kpi-value.val-success { color: #059669; }
.kpi-value.val-warning { color: #d97706; }
.kpi-value.val-danger  { color: #dc2626; }
.kpi-value.val-info    { color: #1d7f54; }
.kpi-value.val-purple  { color: #1d7f54; }

/* Purple utility */
.text-purple      { color: #3b9a6d !important; }
.bg-purple-subtle { background: rgba(31,143,95,.12) !important; }
.text-muted { color: #547160 !important; }

/* ══════════════════════════════════
   TABLE CORE
   — Sticky headers need:
     1. border-collapse: separate (not collapse)
     2. The DIRECT scroll parent to be the overflow container
     3. No overflow:hidden on ANY ancestor
══════════════════════════════════ */

/* Scroll wrapper — this is the ONLY overflow container */
.tbl-outer {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  background   : rgba(255,255,255,.92);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  overflow-x   : auto;           /* horizontal scroll */
  overflow-y   : auto;           /* vertical scroll  */
  max-height   : 520px;          /* triggers vertical scroll */
  -webkit-overflow-scrolling: touch;
}

.table-responsive {
  background   : rgba(255,255,255,.90);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive.table-scroll,
.table-responsive[style*="max-height"] {
  overflow-y: auto;
}

/* When inside a card with no header just round all corners */
.card > .tbl-outer:first-child {
  border-radius: var(--card-radius);
}

.table {
  margin-bottom  : 0 !important;
  font-size      : .845rem;
  border-collapse: separate;     /* REQUIRED for position:sticky on thead */
  border-spacing : 0;
  width          : 100%;
  color          : var(--td-color);
}

/* ── FROZEN HEADER ── */
.table thead th {
  background   : var(--th-bg);
  color        : var(--th-color);          /* #c8d6f0 — high contrast on dark */
  font-size    : .72rem;
  font-weight  : 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding      : .85rem 1rem;
  border-bottom: 2px solid var(--th-border) !important;
  border-top   : none !important;
  border-right : 1px solid var(--th-border) !important;
  white-space  : nowrap;
  /* === THE FREEZE === */
  position     : sticky;
  top          : 0;
  z-index      : 20;
}
.table thead th:last-child { border-right: none !important; }

.table-responsive .table thead th,
.tbl-outer .table thead th {
  top: 0;
}

/* ── BODY CELLS ── */
.table tbody tr td {
  background   : rgba(255,255,255,.96);
  padding      : .68rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--td-border);
  border-top   : none !important;
  color        : var(--td-color);           /* #1e2433 — strong contrast on white */
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(even) td { background: var(--row-stripe); }
.table tbody tr:hover td { background: var(--row-hover) !important; }

/* Row counter column */
.table thead th.col-num,
.table tbody td.col-num {
  width     : 48px;
  text-align: center;
  color     : #6b7280;
  font-size : .78rem;
}

/* Numeric right-align */
.table td.num, .table th.num {
  text-align        : right;
  font-variant-numeric: tabular-nums;
}
.table td.num { font-weight: 600; }

/* ══════════════════════════════════
   DATATABLES SKIN
══════════════════════════════════ */
.dataTables_wrapper { padding: 0; }

/* When DataTables manages its own scroll via scrollY, the outer wrapper
   must not compete with a max-height or overflow-y of its own.
   Apply .tbl-dt-scroll to the .tbl-outer in this case. */
.tbl-outer.tbl-dt-scroll {
  max-height: none !important;
  overflow-y: visible;
}
/* DataTables scroll body inherits the rounded-bottom from the card */
.tbl-outer.tbl-dt-scroll .dataTables_scrollBody {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
/* Keep the DataTables scrollHead header styled consistently */
.tbl-outer.tbl-dt-scroll .dataTables_scrollHeadInner table thead th,
.tbl-outer.tbl-dt-scroll .dataTables_scrollHead table thead th {
  border-top: none !important;
}

/* ── Toolbar ── */
.dt-toolbar {
  padding    : .75rem 1rem;
  background : rgba(248, 252, 249, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,154,109,.08);
  display    : flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap  : wrap;
  gap        : .5rem;
}

/* ── Length selector ── */
.dataTables_length label {
  font-size  : .82rem;
  color      : #234734;
  display    : flex;
  align-items: center;
  gap        : .4rem;
  margin     : 0;
  white-space: nowrap;
  font-weight: 500;
}
.dataTables_length select {
  padding      : .28rem .55rem;
  font-size    : .82rem;
  border       : 1.5px solid rgba(136, 185, 154, .38);
  border-radius: .4rem;
  background   : #ffffff;
  color        : #1e2433;
  cursor       : pointer;
  font-weight  : 600;
}
.dataTables_length select:focus {
  outline   : none;
  border-color: var(--primary);
  box-shadow : 0 0 0 3px rgba(59,154,109,.14);
}

/* ── Search ── */
.dataTables_filter label {
  font-size  : .82rem;
  color      : #234734;
  display    : flex;
  align-items: center;
  gap        : .4rem;
  margin     : 0;
  font-weight: 500;
}
.dataTables_filter input {
  padding      : .32rem .8rem .32rem 2.1rem;
  font-size    : .83rem;
  border       : 1.5px solid rgba(136, 185, 154, .38);
  border-radius: .45rem;
  background   : #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23536f60' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") .6rem center / 14px no-repeat;
  color        : #1e2433;
  width        : 210px;
  transition   : border-color .2s, box-shadow .2s, width .2s;
  font-weight  : 500;
}
.dataTables_filter input::placeholder { color: #9ca3af; }
.dataTables_filter input:focus {
  outline     : none;
  border-color: var(--primary);
  box-shadow  : 0 0 0 3px rgba(59,154,109,.12);
  width       : 260px;
}

/* ── DT Buttons ── */
.dt-buttons { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.dt-button {
  display      : inline-flex !important;
  align-items  : center;
  gap          : .3rem;
  padding      : .32rem .85rem !important;
  font-size    : .8rem !important;
  font-weight  : 600 !important;
  border-radius: .45rem !important;
  border       : 1.5px solid !important;
  cursor       : pointer !important;
  transition   : all .15s !important;
  white-space  : nowrap;
  line-height  : 1.5 !important;
  box-shadow   : none !important;
  background   : transparent !important;
}
.dt-button:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(59,154,109,.18) !important; }

.dt-button.btn-excel { border-color:#198754 !important; color:#198754 !important; }
.dt-button.btn-excel:hover { background:#198754 !important; color:#fff !important; }

.dt-button.btn-pdf   { border-color:#dc3545 !important; color:#dc3545 !important; }
.dt-button.btn-pdf:hover { background:#dc3545 !important; color:#fff !important; }

.dt-button.btn-csv   { border-color:#2563eb !important; color:#2563eb !important; }
.dt-button.btn-csv:hover { background:#2563eb !important; color:#fff !important; }

.dt-button.btn-print { border-color:#6b7280 !important; color:#6b7280 !important; }
.dt-button.btn-print:hover { background:#6b7280 !important; color:#fff !important; }

/* ── Info ── */
.dataTables_info {
  font-size  : .8rem;
  color      : #234734;
  padding    : .65rem 1rem !important;
  font-weight: 500;
}

/* ── Pagination ── */
.dataTables_paginate { padding: .5rem 1rem !important; }
.dataTables_paginate .paginate_button {
  padding      : .3rem .65rem !important;
  margin       : 0 2px !important;
  font-size    : .8rem !important;
  border-radius: .4rem !important;
  border       : 1px solid transparent !important;
  color        : #234734 !important;
  cursor       : pointer;
  transition   : all .14s;
  font-weight  : 500;
}
.dataTables_paginate .paginate_button:hover {
  background  : var(--row-hover) !important;
  border-color: #c7d2f0 !important;
  color       : var(--primary) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background  : var(--primary) !important;
  border-color: var(--primary) !important;
  color       : #fff !important;
  font-weight : 700;
  box-shadow  : 0 2px 8px rgba(59,154,109,.28);
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  color     : #c4cdd8 !important;
  background: transparent !important;
  cursor    : default;
}

/* ── Footer bar ── */
.dt-footer {
  background   : rgba(242, 250, 245, .82);
  border-top   : 1px solid rgba(59,154,109,.08);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  flex-wrap    : wrap;
  gap          : .25rem;
}

/* DataTables FixedHeader z-index fix (must be above sidebar, below modal) */
table.fixedHeader-floating {
  z-index   : 1030 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
table.fixedHeader-floating thead th {
  position: static !important;  /* override sticky inside floated clone */
  background: var(--th-bg) !important;
  color     : var(--th-color) !important;
  border-bottom: 2px solid var(--th-border) !important;
}

/* ══════════════════════════════════
   EXPORT BUTTONS (page header group)
══════════════════════════════════ */
.export-group { display: inline-flex; align-items: center; gap: .4rem; }
.export-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : .35rem;
  padding      : .38rem .9rem;
  font-size    : .8rem;
  font-weight  : 600;
  border-radius: .5rem;
  border       : 1.5px solid;
  cursor       : pointer;
  transition   : all .15s;
  text-decoration: none;
  white-space  : nowrap;
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  box-shadow   : 0 10px 24px rgba(43, 122, 86, .08);
}
.export-btn-excel { border-color:#198754; color:#198754; background:rgba(255,255,255,.48); }
.export-btn-excel:hover { background:#198754; color:#fff; }
.export-btn-pdf   { border-color:#dc3545; color:#dc3545; background:rgba(255,255,255,.48); }
.export-btn-pdf:hover { background:#dc3545; color:#fff; }
.export-btn-csv   { border-color:#3b9a6d; color:#3b9a6d; background:rgba(255,255,255,.72); }
.export-btn-csv:hover { background:#3b9a6d; color:#fff; }
.export-btn-print { border-color:#6b7280; color:#6b7280; background:rgba(255,255,255,.48); }
.export-btn-print:hover { background:#6b7280; color:#fff; }

/* ══════════════════════════════════
   BADGES — soft style
══════════════════════════════════ */
.badge {
  font-size    : .73rem !important;
  font-weight  : 600 !important;
  padding      : .3em .65em !important;
  border-radius: .35rem !important;
  letter-spacing: .01em;
}
.badge-soft-success  { background:#d1fae5; color:#065f46 !important; }
.badge-soft-warning  { background:#fef3c7; color:#92400e !important; }
.badge-soft-danger   { background:#fee2e2; color:#991b1b !important; }
.badge-soft-info     { background:#e7f6ec; color:#14593b !important; }
.badge-soft-secondary{ background:#f1f5f9; color:#374151 !important; }
.badge-soft-purple   { background:#ede9fe; color:#5b21b6 !important; }

/* ══════════════════════════════════
   FILTER CARD
══════════════════════════════════ */
.filter-card .card-body { background: rgba(248, 252, 249, .94); }
.filter-card .form-label {
  font-size     : .74rem;
  font-weight   : 700;
  color         : #374151;     /* was #5a6a85 — better contrast */
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom : .35rem;
}
.filter-card .form-control,
.filter-card .form-select {
  font-size  : .84rem;
  border     : 1.5px solid rgba(255,255,255,.75);
  border-radius: .45rem;
  background : rgba(255,255,255,.56);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color      : #1e2433;
  color      : #173424;
  font-weight: 500;
}
.filter-card .form-control:focus,
.filter-card .form-select:focus {
  border-color: var(--primary);
  background  : rgba(255,255,255,.76);
  box-shadow  : 0 0 0 3px rgba(59,154,109,.12);
}

.form-control,
.form-select,
.form-check-input {
  border-color: rgba(136, 185, 154, .34);
}
.form-control,
.form-select {
  background  : rgba(255,255,255,.96);
  backdrop-filter: blur(10px) saturate(1.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.22);
  color       : #163626;
}
.form-control::placeholder {
  color: #6c8577;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow  : 0 0 0 3px rgba(59,154,109,.12);
}
.btn-primary {
  background-color: var(--primary);
  border-color    : var(--primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-dark);
  border-color    : var(--primary-dark);
}
.btn-outline-secondary {
  background   : rgba(255,255,255,.86);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  color        : #355a48;
  border-color : rgba(59,154,109,.16);
}

/* ══════════════════════════════════
   DROP ZONE
══════════════════════════════════ */
.drop-zone {
  border    : 2px dashed rgba(98, 161, 122, .42);
  border-radius: .875rem;
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: border-color .2s, background .2s;
  cursor    : pointer;
}
.drop-zone.drag-over,
.drop-zone:hover { border-color: var(--primary); background: rgba(236, 248, 240, .82); }

/* ══════════════════════════════════
   MANAGEMENT PAGE SPECIFICS
══════════════════════════════════ */

/* Risk flag cards */
.risk-card {
  border-left : 4px solid;
  border-radius: .6rem;
  padding     : .85rem 1rem;
  font-size   : .85rem;
}
.risk-high   { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.risk-medium { border-color: #d97706; background: #fffbeb; color: #92400e; }
.risk-low    { border-color: #059669; background: #f0fdf4; color: #065f46; }
.risk-info   { border-color: #2563eb; background: #eff6ff; color: #1e40af; }

/* Heatmap cells */
.hm-cell {
  width       : 100%;
  height      : 36px;
  display     : flex;
  align-items : center;
  justify-content: center;
  border-radius: .3rem;
  font-size   : .76rem;
  font-weight : 700;
  cursor      : default;
  transition  : transform .15s;
}
.hm-cell:hover { transform: scale(1.08); z-index: 5; position: relative; }
.hm-0  { background: #f1f5f9; color: #9ca3af; }
.hm-1  { background: #dbeafe; color: #1e40af; }
.hm-2  { background: #bfdbfe; color: #1d4ed8; }
.hm-3  { background: #93c5fd; color: #1e3a8a; }
.hm-4  { background: #60a5fa; color: #1e3a8a; }
.hm-5  { background: #3b82f6; color: #fff; }
.hm-6  { background: #2563eb; color: #fff; }
.hm-7  { background: #ef4444; color: #fff; }

/* Progress bar for approval rate */
.approval-bar { height: 8px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
.approval-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }

/* Insight box */
.insight-box {
  background   : linear-gradient(135deg, rgba(18, 72, 49, .88) 0%, rgba(32, 110, 74, .80) 100%);
  border-radius: var(--card-radius);
  color        : #ebfff1;
  padding      : 1.25rem 1.5rem;
}
.insight-box h6 { color: #a7f3bf; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.insight-item {
  display    : flex;
  align-items: flex-start;
  gap        : .6rem;
  padding    : .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size  : .85rem;
  line-height: 1.45;
}
.insight-item:last-child { border-bottom: none; }
.insight-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }

/* ══════════════════════════════════
   SCROLLBAR
══════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4cbd8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9aa0af; }

/* ══════════════════════════════════
   EMPTY STATE
══════════════════════════════════ */
.empty-state {
  padding   : 2.5rem 1.5rem;
  text-align: center;
  color     : #547160;
}
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .65rem; opacity: .45; }
.empty-state p { font-size: .88rem; margin: 0; font-weight: 500; }

/* ══════════════════════════════════
   RESPONSIVE SIDEBAR
══════════════════════════════════ */
@media (max-width: 991.98px) {
  .sidebar-nav {
    position : fixed;
    top      : var(--navbar-h);
    left     : 0;
    height   : calc(100vh - var(--navbar-h));
    transform: translateX(-100%);
    z-index  : 1040;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar-nav.show { transform: translateX(0); }
  .main-content { width: 100%; }
}
#sidebarOverlay {
  display : none;
  position: fixed;
  inset   : 0;
  background: rgba(0,0,0,.45);
  z-index : 1039;
}
#sidebarOverlay.show { display: block; }

/* ══════════════════════════════════
   PRINT
══════════════════════════════════ */
@media print {
  .sidebar-nav, nav.navbar, .filter-card, .export-group,
  .dt-buttons, .dataTables_filter, .dataTables_length,
  .dataTables_paginate, .dt-toolbar { display: none !important; }
  .main-content { margin: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
  .table thead th {
    background: #1a2238 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ══════════════════════════════════
   ANIMATIONS
══════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e8ecf4 25%, #f4f6fc 50%, #e8ecf4 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: .35rem;
}
.kpi-card { animation: fadeInUp .3s ease both; }
.kpi-card:nth-child(1) { animation-delay: .04s; }
.kpi-card:nth-child(2) { animation-delay: .08s; }
.kpi-card:nth-child(3) { animation-delay: .12s; }
.kpi-card:nth-child(4) { animation-delay: .16s; }
.kpi-card:nth-child(5) { animation-delay: .20s; }
.kpi-card:nth-child(6) { animation-delay: .24s; }

/* ══════════════════════════════════
   GLASS MODALS
══════════════════════════════════ */
.modal-content {
  background   : rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border       : 1px solid rgba(255,255,255,.72);
  box-shadow   : 0 24px 64px rgba(18,68,45,.16), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: var(--card-radius) !important;
}
.modal-header {
  background   : rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}
.modal-footer {
  background   : rgba(248,249,255,.75);
  border-top   : 1px solid rgba(0,0,0,.06);
  border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
}

/* ══════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════ */
.settings-tab-nav {
  display     : flex;
  gap         : .5rem;
  flex-wrap   : wrap;
  padding     : .5rem;
  background  : rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: .9rem;
  border      : 1px solid rgba(255,255,255,.65);
  box-shadow  : 0 2px 12px rgba(31,143,95,.10);
}
.settings-tab-btn {
  display      : inline-flex;
  align-items  : center;
  gap          : .45rem;
  padding      : .55rem 1.15rem;
  border-radius: .65rem;
  font-size    : .86rem;
  font-weight  : 600;
  color        : #4b5563;
  text-decoration: none;
  border       : 1.5px solid transparent;
  transition   : all .2s;
  cursor       : pointer;
  white-space  : nowrap;
}
.settings-tab-btn i { font-size: .95rem; }
.settings-tab-btn:hover {
  background  : rgba(31,143,95,.08);
  color       : var(--primary);
  border-color: rgba(31,143,95,.2);
}
.settings-tab-btn.active {
  background  : var(--primary);
  color       : #fff !important;
  box-shadow  : 0 4px 14px rgba(31,143,95,.35);
  border-color: var(--primary);
}

/* Notification type card color accents */
.notif-accent-bar {
  height         : 4px;
  border-radius  : var(--card-radius) var(--card-radius) 0 0;
  margin         : -1px -1px 0;
}
.notif-card-header {
  border-top: none !important;
  border-radius: 0 !important;
}

/* SMTP info guide section */
.smtp-guide-item {
  padding      : .7rem .9rem;
  border-radius: .5rem;
  border       : 1px solid rgba(0,0,0,.06);
  background   : rgba(248,250,255,.7);
  margin-bottom: .5rem;
  font-size    : .82rem;
}
.smtp-guide-item:last-child { margin-bottom: 0; }
.smtp-guide-item .guide-title {
  font-weight  : 600;
  font-size    : .83rem;
  margin-bottom: .25rem;
  color        : #1e2433;
}
.smtp-guide-item code {
  background  : rgba(31,143,95,.1);
  color       : var(--primary);
  padding     : .1em .35em;
  border-radius: .25em;
  font-size   : .8rem;
}

/* Var pill hints */
.var-pill {
  display     : inline-block;
  background  : rgba(31,143,95,.08);
  color       : var(--primary);
  border      : 1px solid rgba(31,143,95,.18);
  padding     : .15em .55em;
  border-radius: .35rem;
  font-size   : .75rem;
  font-family : var(--bs-font-monospace, monospace);
  font-weight : 600;
  cursor      : pointer;
  transition  : all .15s;
  user-select : none;
}
.var-pill:hover {
  background  : var(--primary);
  color       : #fff;
  border-color: var(--primary);
}