/* ============================================================
   VitalZone — Shared Design System v2.0
   Centralises all repeated styles and introduces a clean,
   spacious design language across every page.
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  --vz-navy:      #111827;
  --vz-navy-mid:  #1f2d47;
  --vz-accent:    #2563eb;
  --vz-accent-h:  #1d4ed8;
  --vz-bg:        #f0f4f8;
  --vz-card:      #ffffff;
  --vz-border:    #e2e8f0;
  --vz-text:      #1e293b;
  --vz-muted:     #64748b;
  --vz-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --vz-shadow:    0 4px 24px rgba(15,23,42,.1);
  --vz-radius:    .6rem;
  --vz-nav-h:     62px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--vz-bg);
  color: var(--vz-text);
  padding-top: var(--vz-nav-h);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: .9rem;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vz-accent); }

/* ---------- Top Navigation ---------- */
.navbar-custom {
  background: var(--vz-navy);
  height: var(--vz-nav-h);
  padding: 0 1.75rem;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.35);
}

/* Brand */
.navbar-custom .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  padding: 0;
  text-decoration: none;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vz-accent);
  color: #fff;
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .04em;
  width: 26px;
  height: 26px;
  border-radius: .4rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(37,99,235,.35);
}
.brand-accent { color: var(--vz-accent); }

/* Toggler */
.navbar-custom .navbar-toggler {
  border: 1px solid rgba(255,255,255,.2);
  padding: .25rem .5rem;
}
.navbar-custom .navbar-toggler-icon { filter: invert(1); }

/* Nav links */
.navbar-custom .nav-link {
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  font-weight: 500;
  padding: .38rem .7rem !important;
  border-radius: .4rem;
  white-space: nowrap;
  transition: background .14s, color .14s;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.navbar-custom .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}
.navbar-custom .nav-link.active {
  color: #fff;
  background: var(--vz-accent);
  box-shadow: 0 0 0 1px rgba(37,99,235,.5);
}

/* Dropdown menu */
.navbar-custom .dropdown-menu {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
  padding: .4rem 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  min-width: 200px;
}
.navbar-custom .dropdown-item {
  color: rgba(255,255,255,.75);
  font-size: .83rem;
  font-weight: 400;
  padding: .45rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: background .12s, color .12s;
}
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
  background: var(--vz-accent);
  color: #fff;
}
.navbar-custom .dropdown-divider {
  border-top: 1px solid rgba(255,255,255,.1);
  margin: .3rem 0;
}

/* User avatar pill */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--vz-accent);
  color: #fff;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Reports dropdown toggle — highlight when on a reports page */
.navbar-custom .nav-link.reports-active {
  color: #fff;
  background: rgba(37,99,235,.45);
}

/* ---------- Main Layout ---------- */
.vz-main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.75rem 2.5rem 3rem;
}
.vz-main.wide { max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }

@media (max-width: 992px) { .vz-main { padding: 1.25rem 1.5rem 2rem; } }
@media (max-width: 576px)  { .vz-main { padding: 1rem 1rem 1.5rem; } }

/* ---------- Page Header ---------- */
.d-flex.justify-content-between.flex-wrap.flex-md-nowrap.align-items-center.pb-2.mb-3.border-bottom {
  padding-bottom: .65rem !important;
  margin-bottom: 1.5rem !important;
  border-bottom-color: var(--vz-border) !important;
}
.d-flex.justify-content-between h1.h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--vz-border) !important;
  border-radius: var(--vz-radius) !important;
  box-shadow: var(--vz-shadow-sm) !important;
  overflow: hidden;
}
.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--vz-border) !important;
  padding: .85rem 1.25rem !important;
  font-weight: 600;
  font-size: .88rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 1.25rem !important; }

/* ---------- Stat Cards (SB-Admin style) ---------- */
.stat-card { transition: box-shadow .2s; }
.stat-card:hover { box-shadow: var(--vz-shadow) !important; }
.border-left-primary { border-left: 4px solid #0d6efd !important; }
.border-left-success { border-left: 4px solid #198754 !important; }
.border-left-warning { border-left: 4px solid #ffc107 !important; }
.border-left-info    { border-left: 4px solid #0dcaf0 !important; }
.border-left-danger  { border-left: 4px solid #dc3545 !important; }
.text-gray-300 { color: #cbd5e1 !important; }
.text-gray-800 { color: var(--vz-text) !important; }
.text-xs { font-size: .73rem; letter-spacing: .04em; }
.font-weight-bold { font-weight: 700 !important; }

/* ---------- Filter Bar ---------- */
.filter-bar {
  background: var(--vz-card);
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-radius);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--vz-shadow-sm);
}
.filter-bar .form-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--vz-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .25rem;
}
.filter-bar .form-control,
.filter-bar .form-select { font-size: .875rem; }

/* ---------- Import / Tool Card ---------- */
.import-card, .tool-card {
  background: #f7fafc;
  border: 1px solid var(--vz-border);
  border-radius: var(--vz-radius);
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.25rem;
}
.import-card h5, .tool-card h5 {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* ---------- Tables ---------- */
.table {
  font-size: .865rem;
  color: var(--vz-text);
  margin-bottom: 0;
}
.table thead th {
  background: #f8fafc;
  border-top: none;
  border-bottom: 2px solid var(--vz-border) !important;
  color: var(--vz-muted);
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .7rem 1rem;
  white-space: nowrap;
}
.table tbody td {
  padding: .72rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  border-top: none;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #f5f8ff; transition: background .1s; }

/* Remove Bootstrap bordered table grid lines, use cleaner row separators only */
.table-bordered { border: none !important; }
.table-bordered td, .table-bordered th { border: none !important; }
.table-bordered tbody td { border-bottom: 1px solid #f1f5f9 !important; }
.table-bordered thead th { border-bottom: 2px solid var(--vz-border) !important; }

/* Row selection */
.table tbody tr.selected-row td { background: #eff3ff !important; }
.row-checkbox, #selectAll {
  cursor: pointer;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--vz-accent);
}

/* ---------- Bulk Actions Bar ---------- */
.bulk-actions-bar {
  background: #f0f4ff;
  border: 1px solid #cdd6ff;
  border-radius: .45rem;
  padding: .6rem 1rem;
}

/* ---------- Buttons ---------- */
.btn-clear {
  background-color: #64748b;
  color: #fff;
  border: none;
}
.btn-clear:hover { background-color: #475569; color: #fff; }

/* Import/Export toolbar dropdown */
.btn-io {
  background: #fff;
  border: 1px solid var(--vz-border);
  color: var(--vz-text);
  font-size: .8rem;
  font-weight: 500;
  padding: .28rem .75rem;
  border-radius: .4rem;
  box-shadow: var(--vz-shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.btn-io:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--vz-text);
  box-shadow: 0 2px 6px rgba(15,23,42,.1);
}
.btn-io .fa { font-size: .75rem; opacity: .7; }
/* Import modal info text */
.import-info {
  background: #f0f9ff;
  border-left: 3px solid #38bdf8;
  border-radius: .35rem;
  padding: .65rem 1rem;
  font-size: .82rem;
  color: #0c4a6e;
  margin-bottom: 1rem;
}

/* ---------- Multi-row add forms ---------- */
.multi-row {
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--vz-border);
  padding-bottom: 1rem;
}
.remove-row { color: #dc2626; cursor: pointer; margin-top: 2rem; }

/* ---------- Shift Type Badge ---------- */
.shift-type-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: .3rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---------- Invoice status badges ---------- */
.status-paid {
  background-color: #d1fae5;
  color: #065f46;
  padding: .2rem .5rem;
  border-radius: .25rem;
  font-weight: 600;
  display: inline-block;
  font-size: .8rem;
}
.status-unpaid {
  background-color: #fee2e2;
  color: #991b1b;
  padding: .2rem .5rem;
  border-radius: .25rem;
  font-weight: 600;
  display: inline-block;
  font-size: .8rem;
}

/* ---------- Select2 ---------- */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 38px;
  border-color: #dee2e6;
  border-radius: .375rem;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1;
  color: var(--vz-text);
  font-size: .875rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ---------- Modal ---------- */
.modal-content {
  border: none;
  border-radius: var(--vz-radius);
  box-shadow: 0 20px 60px rgba(15,23,42,.2);
}
.modal-header {
  background: var(--vz-navy);
  color: #fff;
  border-radius: var(--vz-radius) var(--vz-radius) 0 0;
  padding: .9rem 1.25rem;
}
.modal-header .modal-title { font-size: .95rem; font-weight: 600; }
.modal-header .btn-close { filter: invert(1) brightness(2); }

/* ---------- Login Page ---------- */
body.login-page {
  background: linear-gradient(145deg, #1a2540 0%, #1e3a5f 50%, #0d6efd 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}
.login-box {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  padding: 2.5rem;
}
.login-logo {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--vz-navy);
  letter-spacing: -.03em;
  margin-bottom: .15rem;
}
.login-logo span { color: var(--vz-accent); }
.login-box .form-control:focus {
  border-color: var(--vz-accent);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
}
.btn-login {
  background: var(--vz-accent);
  border: none;
  color: #fff;
  width: 100%;
  padding: .7rem;
  font-weight: 600;
  border-radius: .5rem;
  font-size: .95rem;
  transition: background .2s;
}
.btn-login:hover { background: var(--vz-accent-h); color: #fff; }

/* ---------- Schedule Board ---------- */
.table-responsive {
  overflow-x: auto;
  position: relative;
}
#schedule-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}

/* ---------- Misc Utilities ---------- */
.pagination { margin-top: 1rem; }
.color-preview {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid var(--vz-border);
}
.log-details {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-btn { cursor: pointer; color: #0891b2; }
.share-btn:hover { color: #0e7490; }
.action-btn { cursor: pointer; color: var(--vz-accent); }
.action-btn:hover { color: var(--vz-accent-h); }
.static-message { font-style: italic; color: var(--vz-muted); padding-top: .5rem; }
.table th a { text-decoration: none; color: inherit; }
.table th a:hover { text-decoration: underline; }