/* ============================================================================
   BMS theme: the Load Board's design applied to Moving Software.

   Loaded after custom.css, so it only restyles existing classes: font (Exo 2), a black-and-white palette with thin
   grey borders, small radii, black primary buttons, grey pill navigation, and italic uppercase page titles.
   Nothing here changes layout or behavior. Colors that carry meaning (green money, red balances, status chips,
   warnings) are kept. Dark mode (body.dark-mode) follows the Load Board's dark palette.
   ========================================================================== */

:root {
  --ink: #111827;
  --ink2: #374151;
  --mute: #6b7280;
  --line: #e5e7eb;
  --soft: #f3f4f6;
  --bg: #f6f7f9;
  --green: #15803d;
  --red: #b91c1c;
  --r: 8px;
  --rc: 12px;

  /* the variables custom.css already reads */
  --sidebar-active: #111827;
  --brand-color: #111827;
  --primary: #111827;
  --primary-hover: #000000;
  --sidebar-hover: #f6f7f9;
  --text-sidebar: #374151;
  --text-sidebar-label: #6b7280;

  /* Bootstrap */
  --bs-primary: #111827;
  --bs-primary-rgb: 17, 24, 39;
  --bs-body-font-family: 'Exo 2', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: #111827;
  --bs-link-color: #111827;
  --bs-link-hover-color: #000000;
  --bs-border-color: #e5e7eb;
}

/* ---------- type ---------- */
body {
  font-family: 'Exo 2', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--ink); }
a:hover { color: #000; }

/* ---------- header ---------- */
.main-header { background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; }
.header-brand-link { color: var(--ink); }
.header-brand-name { font-weight: 700; letter-spacing: 0; }
.header-brand-icon { color: var(--ink); }
.header-icon-btn { color: var(--ink2); border-radius: 10px; }
.header-icon-btn:hover { background: var(--soft); color: var(--ink); }
.header-user-btn:hover { background: var(--soft); }
.user-avatar-default { background: var(--soft); color: var(--ink); }

/* ---------- sidebar: grey pill navigation ---------- */
.sidebar { background: #fff; border-right: 1px solid var(--line); }
.nav-label { color: var(--mute); letter-spacing: .6px; font-size: .68rem; }
.sidebar-nav .nav-item { margin: 2px 12px; }
.sidebar-nav .nav-link { padding: 10px 14px; border-radius: 10px; color: var(--ink2); font-size: .92rem; font-weight: 500; }
.sidebar-nav .nav-link:hover { background: var(--bg); color: var(--ink); }
.sidebar-nav .nav-link.active { background: #f1f2f4; color: var(--ink); font-weight: 700; }
.sidebar-nav .nav-link.active .nav-icon { color: var(--ink); }
.nav-icon { color: var(--ink2); font-size: 1.25rem; }
.sidebar-nav .nav-link:hover .nav-icon { color: var(--ink); }

/* ---------- page titles: heavy italic caps, like the logo ---------- */
.page-title, .est-page-title {
  font-size: 1.6rem; font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.15; color: var(--ink);
}
.page-subtitle, .est-page-sub { color: var(--mute); font-size: .88rem; }
.page-title i, .page-title .bx { color: var(--ink) !important; }
.est-page-icon { background: var(--soft) !important; color: var(--ink) !important; border-radius: 10px; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line) !important; border-radius: var(--rc) !important; box-shadow: none !important; background: #fff; }
.card-header {
  background: #fff !important; border-bottom: 1px solid var(--line) !important; border-radius: var(--rc) var(--rc) 0 0 !important;
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--ink2);
}
.stat-card { border: 1px solid var(--line); border-radius: var(--rc); box-shadow: none; }
.stat-card:hover { transform: none; box-shadow: none; border-color: #d1d5db; }
.stat-number { color: var(--ink); }
.stat-label { color: var(--mute); }
/* the tinted icon squares become neutral; the numbers keep their meaning */
.stat-icon.blue, .stat-icon.green, .stat-icon.orange, .stat-icon.purple, .stat-icon.teal { background: var(--soft); color: var(--ink); }
.welcome-card { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); border-radius: var(--rc); }
.welcome-card::after { background: rgba(255,255,255,.05); }

/* ---------- tables ---------- */
.table th, .table thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #64748b; background: #f8fafc;
}
.table td { color: var(--ink); }
.table tbody tr:hover { background: #f9fafb; }

/* ---------- forms ---------- */
.form-label { color: var(--ink2); font-weight: 600; }
.form-control, .form-select { border: 1px solid #d1d5db; border-radius: var(--r); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(17,24,39,.06); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(17,24,39,.08); }

/* ---------- buttons: black primary, white outline ---------- */
.btn { border-radius: var(--r); font-weight: 600; }
.btn-primary { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: #000 !important; border-color: #000 !important; color: #fff !important; }
.btn-outline-primary { color: var(--ink) !important; border-color: var(--line) !important; background: #fff; }
.btn-outline-primary:hover { background: var(--soft) !important; color: var(--ink) !important; border-color: #d1d5db !important; }
.btn-outline-secondary { color: var(--ink2); border-color: var(--line); background: #fff; }
.btn-outline-secondary:hover { background: var(--soft); color: var(--ink); border-color: #d1d5db; }
.btn-secondary { background: var(--soft); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: #e5e7eb; border-color: #d1d5db; color: var(--ink); }
.btn-link { color: var(--ink); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(17,24,39,.12); }

/* Bootstrap's blue helpers become the ink color */
.text-primary { color: var(--ink) !important; }
.bg-primary { background-color: var(--ink) !important; }
.border-primary { border-color: var(--ink) !important; }
.badge.bg-primary { background-color: var(--ink) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ink); color: #fff; }
.nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--ink); }
.page-link { color: var(--ink); }
.page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.progress-bar { background-color: var(--ink); }
.dropdown-menu { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(17,24,39,.08); }
.dropdown-item { font-weight: 500; }
.dropdown-item:active, .dropdown-item.active { background: var(--soft); color: var(--ink); }
.modal-content { border: 1px solid var(--line); border-radius: var(--rc); }
.modal-title { font-weight: 700; }
.alert { border-radius: 10px; }

/* ---------- accents that pages set for themselves (inline <style> in the pages) ---------- */
.est-job-link { color: var(--ink) !important; }
.est-sort-link.active, .est-sort-link.active i { color: var(--ink) !important; }
.badge.bg-primary-subtle { background-color: var(--soft) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.badge-new { background: var(--soft); color: var(--ink2); }
.user-avatar-default { background: var(--soft); }
.table { font-size: .86rem; }          /* Exo 2 is a little wider than the old font: keeps wide tables inside the page */
.table th, .table td { padding-left: .6rem; padding-right: .6rem; }

.settings-menu-list li a .s-bullet, .settings-menu-list li a.active .s-bullet { background: var(--ink) !important; }
.settings-menu-list li a.active { color: var(--ink) !important; background: var(--soft) !important; }

/* ---------- sign-in, register and reset pages ---------- */
.login-right { background: linear-gradient(160deg, #0b0f19 0%, #1f2937 100%); }
.login-left h1, .login-left h2, .login-wrap h1, .login-wrap h2 { font-weight: 700; }
.login-left .btn-primary, .login-wrap .btn-primary { background: var(--ink) !important; border-color: var(--ink) !important; }

/* ---------- estimates list ---------- */
.est-filter-btn:hover { border-color: #9ca3af; color: var(--ink); background: var(--bg); }
.est-search-input:focus { border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(17,24,39,.06); }
.est-filter-dropdown:focus-within { border-color: #9ca3af; }


/* ============================================================================
   Buttons: one system
     primary = black, secondary = white with a thin border, and only these keep a color of their own:
     green (confirm / money), red (delete / danger), amber (warning).
   ========================================================================== */
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; letter-spacing: .01em; }
.btn:disabled, .btn.disabled { opacity: .55; }
.btn-sm { border-radius: 7px; }
.btn-lg { border-radius: 10px; font-weight: 700; }

.btn-success { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus { background: #166534 !important; border-color: #166534 !important; color: #fff !important; }
.btn-danger { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus { background: #991b1b !important; border-color: #991b1b !important; color: #fff !important; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; color: #111827; }
.btn-warning:hover, .btn-warning:focus { background: #d97706; border-color: #d97706; color: #111827; }
.btn-info, .btn-light { background: var(--soft); border-color: var(--line); color: var(--ink); }
.btn-info:hover, .btn-light:hover { background: #e5e7eb; border-color: #d1d5db; color: var(--ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }

.btn-outline-success { color: var(--green); border-color: #bbf7d0; background: #fff; }
.btn-outline-success:hover { background: #f0fdf4; border-color: #86efac; color: #166534; }
.btn-outline-danger { color: var(--red); border-color: #fecaca; background: #fff; }
.btn-outline-danger:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.btn-outline-warning { color: #b45309; border-color: #fde68a; background: #fff; }
.btn-outline-warning:hover { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.btn-outline-info, .btn-outline-dark { color: var(--ink2); border-color: var(--line); background: #fff; }
.btn-outline-info:hover, .btn-outline-dark:hover { background: var(--soft); color: var(--ink); border-color: #d1d5db; }
.btn-check:checked + .btn-outline-primary, .btn-outline-primary.active { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.btn-group > .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.btn-close:focus { box-shadow: 0 0 0 3px rgba(17,24,39,.12); }

/* buttons the pages style for themselves with a navy inline color: now black */
.btn[style*="background:#1a2b5c"], .btn[style*="background: #1a2b5c"],
button[style*="background:#1a2b5c"], a[style*="background:#1a2b5c"] { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.btn[style*="background:#1a2b5c"]:hover, .btn[style*="background: #1a2b5c"]:hover { background: #000 !important; }
.modal-header[style*="1a2b5c"] { background: var(--ink) !important; }
.modal-header[style*="1a2b5c"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.form-submit-bar .btn-submit, .btn-submit { background: var(--ink) !important; border-radius: var(--r); font-weight: 700; }
.form-submit-bar .btn-submit:hover, .btn-submit:hover { background: #000 !important; }
.stp-btn { color: var(--ink) !important; }
.inv-quick-count { color: var(--ink) !important; }
.inv-quick-icon-wrap svg { stroke: var(--ink2) !important; }
.svc-cuft-input { background: var(--soft) !important; color: var(--ink) !important; }

/* calendar */
.cal-nav-btn { border-radius: var(--r); }
.cal-nav-btn:hover { background: var(--soft); border-color: #d1d5db; color: var(--ink); }
body .cal-nav-btn.today-btn, body .cal-submit-btn { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: var(--r); }
body .cal-nav-btn.today-btn:hover, body .cal-submit-btn:hover { background: #000; border-color: #000; color: #fff; }

/* estimates list: the row action buttons are one quiet family; only delete and confirm keep their color */
.est-action-btn { border-radius: 8px; font-weight: 600; }
.est-action-btn.est-action-view, .est-action-btn.est-action-edit, .est-action-btn.est-action-track, .est-action-btn.est-action-complete { color: var(--ink2); border-color: var(--line); background: #fff; }
.est-action-btn.est-action-view:hover, .est-action-btn.est-action-edit:hover, .est-action-btn.est-action-track:hover, .est-action-btn.est-action-complete:hover { color: var(--ink); border-color: #d1d5db; background: var(--soft); }
.est-action-btn.est-action-delete { color: var(--red); border-color: #fecaca; background: #fff; }
.est-action-btn.est-action-delete:hover { border-color: #fca5a5; background: #fef2f2; }
.est-action-btn.est-action-confirm { color: var(--green); border-color: #bbf7d0; background: #fff; }
.est-action-btn.est-action-confirm:hover { border-color: #86efac; background: #f0fdf4; }

/* ============================================================================
   Dark mode: the Load Board's dark palette
   ========================================================================== */
body.dark-mode { --green: #4ade80; --red: #f87171; --ink: #f3f4f6; --ink2: #d1d5db; --mute: #9ca3af; --line: #2d3748; --soft: #252d3f; --bg: #0f1420; }
body.dark-mode { background: var(--bg); color: #e5e7eb; --bs-body-color: #e5e7eb; --bs-link-color: #e5e7eb; --bs-link-hover-color: #fff; --bs-border-color: #2d3748; }
body.dark-mode a { color: #e5e7eb; }
body.dark-mode .main-header, body.dark-mode .sidebar { background: #131826; border-color: #2d3748; }
body.dark-mode .header-brand-link, body.dark-mode .header-icon-btn { color: #e5e7eb; }
body.dark-mode .header-icon-btn:hover, body.dark-mode .header-user-btn:hover { background: #252d3f; }
body.dark-mode .sidebar-nav .nav-link { color: #cbd5e1; }
body.dark-mode .sidebar-nav .nav-link:hover { background: #1c2333; color: #fff; }
body.dark-mode .sidebar-nav .nav-link.active { background: #252d3f; color: #fff; }
body.dark-mode .sidebar-nav .nav-link.active .nav-icon, body.dark-mode .sidebar-nav .nav-link:hover .nav-icon { color: #fff; }
body.dark-mode .nav-icon { color: #9ca3af; }
body.dark-mode .nav-label { color: #6b7280; }
body.dark-mode .page-title, body.dark-mode .est-page-title { color: #f3f4f6; }
body.dark-mode .est-page-icon { background: #252d3f !important; color: #e5e7eb !important; }
body.dark-mode .card, body.dark-mode .stat-card { background: #1a1f2e !important; border-color: #2d3748 !important; }
body.dark-mode .card-header { background: #1a1f2e !important; border-color: #2d3748 !important; color: #cbd5e1; }
body.dark-mode .stat-icon.blue, body.dark-mode .stat-icon.green, body.dark-mode .stat-icon.orange,
body.dark-mode .stat-icon.purple, body.dark-mode .stat-icon.teal { background: #252d3f; color: #e5e7eb; }
body.dark-mode .welcome-card { background: linear-gradient(135deg, #1a1f2e 0%, #252d3f 100%); border: 1px solid #2d3748; }
body.dark-mode .table th, body.dark-mode .table thead th { background: #1e2535; color: #94a3b8; }
body.dark-mode .table tbody tr:hover { background: #1c2333; }
body.dark-mode .btn-primary { background: #f3f4f6 !important; border-color: #f3f4f6 !important; color: #111827 !important; }
body.dark-mode .btn-primary:hover { background: #fff !important; border-color: #fff !important; color: #000 !important; }
body.dark-mode .btn-outline-primary, body.dark-mode .btn-outline-secondary { background: transparent; color: #e5e7eb !important; border-color: #374151 !important; }
body.dark-mode .btn-outline-primary:hover, body.dark-mode .btn-outline-secondary:hover { background: #252d3f !important; color: #fff !important; }
body.dark-mode .text-primary { color: #e5e7eb !important; }
body.dark-mode .bg-primary, body.dark-mode .badge.bg-primary { background-color: #374151 !important; }
body.dark-mode .form-control, body.dark-mode .form-select { border-color: #374151; }
body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { border-color: #6b7280; box-shadow: 0 0 0 3px rgba(229,231,235,.08); }
body.dark-mode .form-check-input:checked { background-color: #e5e7eb; border-color: #e5e7eb; }
body.dark-mode .dropdown-menu, body.dark-mode .modal-content { background: #1a1f2e; border-color: #2d3748; }
body.dark-mode .dropdown-item:active, body.dark-mode .dropdown-item.active { background: #252d3f; color: #fff; }
body.dark-mode .est-job-link, body.dark-mode .est-sort-link.active, body.dark-mode .est-sort-link.active i { color: #e5e7eb !important; }
body.dark-mode .badge.bg-primary-subtle { background-color: #252d3f !important; color: #e5e7eb !important; border-color: #374151 !important; }
body.dark-mode .settings-menu-list li a .s-bullet, body.dark-mode .settings-menu-list li a.active .s-bullet { background: #e5e7eb !important; }
body.dark-mode .settings-menu-list li a.active { color: #fff !important; background: #252d3f !important; }
body.dark-mode .page-item.active .page-link { background: #e5e7eb; border-color: #e5e7eb; color: #111827; }

/* buttons, dark mode */
body.dark-mode .btn-success { background: #16a34a !important; border-color: #16a34a !important; }
body.dark-mode .btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
body.dark-mode .btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; }
body.dark-mode .btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
body.dark-mode .btn-warning { background: #f59e0b; color: #111827; }
body.dark-mode .btn-info, body.dark-mode .btn-light, body.dark-mode .btn-secondary { background: #252d3f; border-color: #374151; color: #e5e7eb; }
body.dark-mode .btn-info:hover, body.dark-mode .btn-light:hover, body.dark-mode .btn-secondary:hover { background: #2d3748; color: #fff; }
body.dark-mode .btn-dark { background: #f3f4f6; border-color: #f3f4f6; color: #111827; }
body.dark-mode .btn-outline-success { background: transparent; color: #4ade80; border-color: #166534; }
body.dark-mode .btn-outline-success:hover { background: rgba(74,222,128,.1); color: #86efac; }
body.dark-mode .btn-outline-danger { background: transparent; color: #f87171; border-color: #7f1d1d; }
body.dark-mode .btn-outline-danger:hover { background: rgba(248,113,113,.1); color: #fca5a5; }
body.dark-mode .btn-outline-warning { background: transparent; color: #fbbf24; border-color: #78350f; }
body.dark-mode .btn-outline-info, body.dark-mode .btn-outline-dark { background: transparent; color: #cbd5e1; border-color: #374151; }
body.dark-mode .btn-outline-info:hover, body.dark-mode .btn-outline-dark:hover { background: #252d3f; color: #fff; }
body.dark-mode .btn[style*="background:#1a2b5c"], body.dark-mode .btn[style*="background: #1a2b5c"],
body.dark-mode button[style*="background:#1a2b5c"], body.dark-mode a[style*="background:#1a2b5c"] { background: #f3f4f6 !important; color: #111827 !important; border-color: #f3f4f6 !important; }
body.dark-mode .modal-header[style*="1a2b5c"] { background: #252d3f !important; }
body.dark-mode .form-submit-bar .btn-submit, body.dark-mode .btn-submit { background: #f3f4f6 !important; color: #111827 !important; }
body.dark-mode .btn-submit:hover { background: #fff !important; }
body.dark-mode .stp-btn, body.dark-mode .inv-quick-count { color: #e5e7eb !important; }
body.dark-mode .inv-quick-icon-wrap svg { stroke: #cbd5e1 !important; }
body.dark-mode .svc-cuft-input { background: #252d3f !important; color: #e5e7eb !important; }
body.dark-mode .cal-nav-btn:hover { background: #252d3f; color: #fff; }
body.dark-mode .cal-nav-btn.today-btn, body.dark-mode .cal-submit-btn { background: #f3f4f6; border-color: #f3f4f6; color: #111827; }
body.dark-mode .est-action-btn.est-action-view, body.dark-mode .est-action-btn.est-action-edit, body.dark-mode .est-action-btn.est-action-track, body.dark-mode .est-action-btn.est-action-complete { background: #252d3f; border-color: #374151; color: #cbd5e1; }
body.dark-mode .est-action-btn.est-action-view:hover, body.dark-mode .est-action-btn.est-action-edit:hover, body.dark-mode .est-action-btn.est-action-track:hover, body.dark-mode .est-action-btn.est-action-complete:hover { background: #2d3748; color: #fff; }
body.dark-mode .est-action-btn.est-action-delete { background: rgba(248,113,113,.08); border-color: #7f1d1d; color: #f87171; }
body.dark-mode .est-action-btn.est-action-confirm { background: rgba(74,222,128,.08); border-color: #166534; color: #4ade80; }