/* ============================================================
   ProjectDone PMS — SITE WORKS theme (brutalist identity)
   Loaded LAST: redefines every token layer and overrides chrome
   + components. Same identity as projectdone.pro public site.
   Tokens: concrete paper / ink / hazard yellow. Square, hard-
   shadowed, mono-labeled. Status hues stay meaningful (law:
   status is never color-only — labels/icons carry it too).
   ============================================================ */

:root {
  /* SITE WORKS core tokens */
  --paper: #F4F2EC;
  --paper2: #ECE9E0;
  --ink: #0A0A0A;
  --haz: #FFD400;
  /* non-swapping chrome tokens (V3 dark parity): rail surfaces stay
     black and hazard text stays true ink in BOTH themes */
  --rail: #0A0A0A;
  --rail-text: #F4F2EC;
  --onhaz: #0A0A0A;
  --rent: #E63B12;
  --ok: #1E7A3C;
  --warn: #9A7200;
  --mut: #55554C;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --grot: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;

  /* header.php inline tokens (var() cascade redefines every use) */
  --primary: #0A0A0A;
  --secondary: #55554C;
  --success: #1E7A3C;
  --danger: #E63B12;
  --warning: #B88900;
  --info: #0A0A0A;

  /* modern-dashboard tokens */
  --dash-primary: #0A0A0A;
  --dash-primary-rgb: 10, 10, 10;
  --dash-success: #1E7A3C;
  --dash-success-rgb: 30, 122, 60;
  --dash-warning: #B88900;
  --dash-warning-rgb: 184, 137, 0;
  --dash-danger: #E63B12;
  --dash-danger-rgb: 230, 59, 18;
  --dash-info: #0A0A0A;
  --dash-info-rgb: 10, 10, 10;
  --dash-card-bg: #F4F2EC;
  --dash-card-border: #0A0A0A;
  --dash-card-shadow: 6px 6px 0 #0A0A0A;
  --dash-body-bg: #ECE9E0;
  --dash-text-main: #0A0A0A;
  --dash-text-muted: #55554C;
  --dash-border-radius: 0;
  --gradient-welcome: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%);
  --gradient-primary: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%);
  --gradient-success: linear-gradient(135deg, #1E7A3C 0%, #1E7A3C 100%);
  --gradient-warning: linear-gradient(135deg, #FFD400 0%, #FFD400 100%);
  --gradient-danger: linear-gradient(135deg, #E63B12 0%, #E63B12 100%);
  --gradient-info: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 100%);

  /* Bootstrap token layer */
  --bs-primary: #0A0A0A;
  --bs-primary-rgb: 10, 10, 10;
  --bs-body-bg: #ECE9E0;
  --bs-body-color: #0A0A0A;
  --bs-border-color: #0A0A0A;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: #0A0A0A;
  --bs-link-hover-color: #7A6700;
}

/* ── base ─────────────────────────────────────────────── */
body {
  font-family: var(--grot) !important;
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(rgba(10,10,10,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.035) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  color: var(--ink) !important;
}
::selection { background: var(--haz); color: var(--ink); }
a { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ── top navbar: ink band, hazard brand ───────────────── */
.navbar {
  background-color: var(--rail) !important;
  border-bottom: 3px solid var(--rail) !important;
  z-index: 1030 !important; /* V3.1: above transformed cards/content (stacking contexts), below open dropdowns (1100) */
  box-shadow: 0 3px 0 var(--haz) !important;
}
.navbar .navbar-brand, .navbar a, .navbar .nav-link, .navbar button { color: var(--rail-text) !important; }
.navbar .navbar-brand { font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.navbar .dropdown-menu {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--ink);
}
.navbar .dropdown-item { color: var(--ink) !important; }
.navbar .dropdown-item:hover { background: var(--haz); color: var(--onhaz) !important; }

/* ── sidebar: ink rail, hazard active state ───────────── */
.sidebar {
  background-color: var(--rail) !important;
  border-right: 3px solid var(--rail) !important;
}
.sidebar .nav-link {
  color: #C9C6BC !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-left: 4px solid transparent;
  border-radius: 0 !important;
  padding: .7rem 1rem !important;
}
.sidebar .nav-link:hover { background-color: #1c1c1c !important; color: var(--rail-text) !important; }
.sidebar .nav-link.active {
  background-color: var(--haz) !important;
  color: var(--onhaz) !important;
  border-left-color: var(--onhaz);
  font-weight: 700;
}
.sidebar .nav-link i, .sidebar .nav-link .bi { color: inherit !important; }

/* ── cards: paper plates, hard shadows, square ────────── */
.card, .dash-card {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ink) !important;
}
.dash-card:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ink) !important; }
.card-header, .dash-card-header {
  background: var(--paper2) !important;
  border-bottom: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.card-footer { background: var(--paper2) !important; border-top: 2px solid var(--ink) !important; }

/* welcome banner: ink block, hazard rule, no gradient */
.welcome-banner {
  background: var(--rail) !important;
  border: 2px solid var(--rail) !important;
  border-radius: 0 !important;
  border-bottom: 6px solid var(--haz) !important;
  box-shadow: 8px 8px 0 rgba(10,10,10,.25) !important;
  color: var(--rail-text) !important;
}
.welcome-banner .banner-pattern { display: none !important; }

/* stat icon tiles: square, ink/hazard */
.stat-icon-wrapper {
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
  background: var(--haz) !important;
  color: var(--onhaz) !important;
}

/* ── buttons: square, hard shadow, mono ───────────────── */
.btn {
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary, .btn-info {
  background: var(--haz) !important;
  border-color: var(--ink) !important;
  color: var(--onhaz) !important;
}
.btn-success { background: var(--ok) !important; border-color: var(--ink) !important; color: #fff !important; }
.btn-danger  { background: var(--rent) !important; border-color: var(--ink) !important; color: #fff !important; }
.btn-warning { background: var(--haz) !important; border-color: var(--ink) !important; color: var(--onhaz) !important; }
.btn-secondary { background: var(--paper2) !important; border-color: var(--ink) !important; color: var(--ink) !important; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
  background: var(--paper) !important; color: var(--ink) !important; border-color: var(--ink) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: var(--haz) !important; color: var(--onhaz) !important;
}
.btn-sm { font-size: 11px; padding: .3rem .6rem; }
.btn-link { box-shadow: none !important; border-color: transparent !important; }

/* ── badges: square mono plates, hue + label ──────────── */
.badge {
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: .45em .7em !important;
}
.badge.bg-primary, .badge.bg-info { background: var(--rail) !important; color: var(--haz) !important; }
.badge.bg-success { background: var(--ok) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--rent) !important; color: #fff !important; }
.badge.bg-warning { background: var(--haz) !important; color: var(--onhaz) !important; }
.badge.bg-secondary { background: var(--paper2) !important; color: var(--ink) !important; }
.badge.bg-light, .badge.bg-dark { background: var(--paper) !important; color: var(--ink) !important; }

/* ── tables: ink grid, mono headers ───────────────────── */
.table { border: 2px solid var(--ink) !important; background: var(--paper); }
.table th, .table thead th {
  background: var(--rail) !important;
  color: var(--haz) !important;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid var(--ink) !important;
}
.table td { border: 2px solid var(--ink) !important; color: var(--ink); background: var(--paper); }
.table-striped tbody tr:nth-of-type(odd) td { background: var(--paper2) !important; }
.table-hover tbody tr:hover td { background: rgba(255,212,0,.25) !important; }

/* ── forms: square, 2px ink, paper2 fill ──────────────── */
.form-control, .form-select {
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  min-height: 42px;
}
.form-control:focus, .form-select:focus {
  background: #fff !important;
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}
.form-label, label { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mut); }
.form-control::placeholder { color: #9a968a; }
.input-group-text {
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
  background: var(--paper2) !important;
  color: var(--ink) !important;
  font-family: var(--mono);
}
.form-check-input { border: 2px solid var(--ink) !important; border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--rail) !important; border-color: var(--ink) !important; }

/* ── alerts / modals / dropdowns / pagination ─────────── */
.alert { border-radius: 0 !important; border: 2px solid var(--ink) !important; box-shadow: 5px 5px 0 var(--ink); font-size: 14px; }
.alert-success { background: #E3F2E7 !important; color: var(--ok) !important; }
.alert-danger  { background: #FBE3DC !important; color: var(--rent) !important; }
.alert-warning { background: #FFF3BF !important; color: var(--warn) !important; }
.alert-info    { background: var(--paper2) !important; color: var(--ink) !important; }
.modal-content { border-radius: 0 !important; border: 2px solid var(--ink) !important; box-shadow: 10px 10px 0 var(--ink) !important; background: var(--paper) !important; }
.modal-header, .modal-footer { border-color: var(--ink) !important; background: var(--paper2) !important; }
.dropdown-menu { border-radius: 0 !important; border: 2px solid var(--ink) !important; box-shadow: 6px 6px 0 var(--ink) !important; background: var(--paper) !important; }
.dropdown-item:hover { background: var(--haz) !important; color: var(--onhaz) !important; }
.pagination .page-link {
  border-radius: 0 !important; border: 2px solid var(--ink) !important;
  background: var(--paper) !important; color: var(--ink) !important;
  font-family: var(--mono); font-weight: 700; margin: 0 2px;
}
.pagination .page-item.active .page-link { background: var(--rail) !important; color: var(--haz) !important; }
.pagination .page-link:hover { background: var(--haz) !important; color: var(--onhaz) !important; }
.list-group-item { border: 2px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper) !important; color: var(--ink) !important; }

/* progress bars, tabs, misc */
.progress { border: 2px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper2) !important; height: 18px !important; }
.progress-bar { background: var(--haz) !important; color: var(--onhaz); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.nav-tabs { border-bottom: 2px solid var(--ink) !important; }
.nav-tabs .nav-link { border: 2px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper2); color: var(--ink) !important; font-family: var(--mono); font-size: 12px; text-transform: uppercase; margin-right: 4px; }
.nav-tabs .nav-link.active { background: var(--rail) !important; color: var(--haz) !important; }
.text-muted { color: var(--mut) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ink) !important; }
hr { border-color: var(--ink) !important; opacity: 1 !important; }
.bg-white { background-color: var(--paper) !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-pill, .rounded-circle { border-radius: 0 !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: 6px 6px 0 var(--ink) !important; }

/* login (auth layout) */
.auth-wrapper {
  min-height: 100vh;
  background:
    linear-gradient(rgba(10,10,10,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.04) 1px, transparent 1px),
    var(--paper) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}

/* ── dark theme: SITE WORKS ink mode ──────────────────── */
[data-theme="dark"] {
  --paper: #141412;
  --paper2: #1C1C19;
  --ink: #F4F2EC;
  /* V3: chrome surfaces do NOT swap — rail stays black, on-hazard text stays ink */
  --rail: #000000;
  --rail-text: #F4F2EC;
  --onhaz: #0A0A0A;
  --mut: #B9B6AA;
  --dash-card-bg: #1C1C19;
  --dash-card-border: #F4F2EC;
  --dash-card-shadow: 6px 6px 0 rgba(244,242,236,.25);
  --dash-body-bg: #0E0E0C;
  --dash-text-main: #F4F2EC;
  --dash-text-muted: #B9B6AA;
  --bs-body-bg: #0E0E0C;
  --bs-body-color: #F4F2EC;
}
[data-theme="dark"] body { background-image: none !important; }
[data-theme="dark"] .navbar { box-shadow: 0 3px 0 var(--haz) !important; }
[data-theme="dark"] .table td, [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td { background: #1C1C19 !important; color: #F4F2EC; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #1C1C19 !important; color: #F4F2EC !important; }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: #24241F !important; }
[data-theme="dark"] .stat-icon-wrapper { color: var(--onhaz) !important; }

/* ── motion discipline ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   V2 POLISH — 0-flaw pass (2026-09-11)
   Audit findings closed: link-rgb leak, Bootstrap utility leaks,
   outline-button hues, table-light variant, code elements,
   radius leaks, dark-theme link visibility, light-mode calm.
   ============================================================ */
:root {
  --bs-link-color-rgb: 10, 10, 10;
}
[data-theme="dark"] {
  --bs-link-color: #FFD400;
  --bs-link-color-rgb: 255, 212, 0;
  --bs-link-hover-color: #F4F2EC;
}

/* Bootstrap utilities must carry the identity */
.text-dark { color: var(--ink) !important; }
.text-secondary { color: var(--mut) !important; }
.text-success { color: var(--ok) !important; }
.text-danger, .text-error { color: var(--rent) !important; }
.text-warning { color: var(--warn) !important; }
.text-primary { color: var(--ink) !important; }
.text-info { color: var(--mut) !important; }
.breadcrumb-item.active { color: var(--mut) !important; }
.btn-dark { background: var(--rail) !important; border-color: var(--ink) !important; color: var(--haz) !important; }
.btn-dark:hover { background: var(--haz) !important; color: var(--onhaz) !important; }
.legend-dot { border: 2px solid var(--ink) !important; }
.bg-light { background-color: var(--paper2) !important; color: var(--ink) !important; }
code, kbd, .code {
  color: var(--ink) !important;
  background: var(--paper2) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: .1em .4em;
  font-family: var(--mono) !important;
  font-size: .85em;
}
.navbar .bi-building, .navbar i.text-primary, .top-nav-guest .brand i { color: var(--haz) !important; text-shadow: none !important; }

/* table-light variant into the identity */
.table-light, .table-light th, .table-light td { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--ink) !important; }

/* outline buttons carry token hues */
.btn-outline-primary { color: var(--ink) !important; }
.btn-outline-success { color: var(--ok) !important; border-color: var(--ok) !important; }
.btn-outline-success:hover { background: var(--ok) !important; color: #fff !important; }
.btn-outline-danger { color: var(--rent) !important; border-color: var(--rent) !important; }
.btn-outline-danger:hover { background: var(--rent) !important; color: #fff !important; }
.btn-outline-info { color: var(--ink) !important; border-color: var(--ink) !important; }
.btn-outline-info:hover { background: var(--rail) !important; color: var(--haz) !important; }
.btn-outline-warning { color: var(--warn) !important; border-color: var(--warn) !important; }
.btn-outline-warning:hover { background: var(--haz) !important; color: var(--onhaz) !important; }

/* radius leaks */
.legend-dot { border-radius: 0 !important; }
.dash-progress-track, .dash-progress-bar { border-radius: 0 !important; }

/* light-mode refinement: calmer blueprint grid, softer inner table lines */
html:not([data-theme="dark"]) body {
  background-image:
    linear-gradient(rgba(10,10,10,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.025) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}
html:not([data-theme="dark"]) .table td { border-width: 1px !important; }
html:not([data-theme="dark"]) .table th,
html:not([data-theme="dark"]) .table thead th { border-width: 2px !important; }

/* ============================================================
   V3 DARK PARITY (2026-09-11) — the dark token swap (--ink↔paper)
   was flipping chrome surfaces: navbar/sidebar/table-headers/
   active states rendered paper-white inside dark mode. Fixed via
   non-swapping tokens: --rail (always black), --rail-text (always
   paper), --onhaz (always true ink on hazard yellow).
   ============================================================ */