/* ============================================================================
 * THEME: GREENTECH 2026 — Modern Sans
 * Light-first, alb pur, verde brand sofisticat. 100% sans-serif, fără codițe.
 * Inter (UI + titluri) + JetBrains Mono (numere/cod).
 * ============================================================================ */

/* Fonturile sunt încărcate local din assets/fonts/fonts.css de fiecare pagină.
   Acel import garantează disponibilitate la print/PDF chiar și fără internet. */

html, :root {
  /* === Surfaces (light first) === */
  --paper:        #ffffff;
  --paper-2:      #fafaf7;
  --cream:        #ffffff;
  --cream-2:      #f5f5f2;

  /* === Text (high contrast on white) === */
  --ink:          #0a1410;
  --ink-2:        #2a3530;
  --muted:        #6b7670;
  --muted-soft:   #9aa5a0;

  /* === Brand green — sophisticated, not neon === */
  --forest:       #0a1410;     /* near-black with green hint, for hero/header */
  --forest-2:     #1a2520;
  --moss:         #2a6f4a;     /* main brand green, deep & rich */
  --moss-light:   #3d9963;
  --green-accent: #4caf76;
  --green-pale:   #ecf5ee;     /* very light green tint for backgrounds */

  /* === Warm accents (used sparingly) === */
  --sun:          #d4a017;     /* warm gold, sophisticated */
  --gold:         #d4a017;
  --rust:         #c4593e;     /* terracotta, muted */
  --coral:        #e8967a;

  /* === Lines & borders === */
  --line:         #e8e5dd;
  --line-soft:    #f0ede5;
  --line-strong:  #d4d0c4;

  /* === Olive utility === */
  --olive:        #5a6862;

  /* === Shadows (soft, layered, modern) === */
  --shadow-xs: 0 1px 2px rgba(10, 20, 16, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 20, 16, 0.05), 0 1px 3px rgba(10, 20, 16, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 20, 16, 0.07), 0 2px 6px rgba(10, 20, 16, 0.04);
  --shadow-lg: 0 16px 48px rgba(10, 20, 16, 0.10), 0 4px 12px rgba(10, 20, 16, 0.06);
  --shadow-xl: 0 32px 80px rgba(10, 20, 16, 0.15), 0 8px 24px rgba(10, 20, 16, 0.08);

  /* === Gradient accents (subtle, classy) === */
  --grad-button:  linear-gradient(180deg, #2a6f4a 0%, #235e3e 100%);
  --grad-hero:    linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
  --grad-card:    linear-gradient(180deg, #ffffff 0%, #fdfcf8 100%);
  --grad-dark:    linear-gradient(135deg, #0a1410 0%, #1a2520 100%);
}

/* ====== BASE ====== */
* { box-sizing: border-box; }
html, body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern', 'liga', 'tnum';
  letter-spacing: 0;
}
body::before { display: none !important; }  /* kill old dot grid */

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, .hero h1, .page-title, .htitle, .cc-name, .modal-head h2 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  font-feature-settings: 'ss01', 'ss02', 'kern', 'liga';
}
.hero h1 { font-size: 48px !important; line-height: 1.05 !important; font-weight: 700 !important; font-variation-settings: 'opsz' 96, 'SOFT' 30; }
@media (max-width: 760px) { .hero h1 { font-size: 36px !important; } }

/* ====== FORȚEAZĂ SERIF peste tot — eliminăm orice Inter/Manrope rezidual ====== */
/* html[lang] dă specificitate (0,1,0) + * adaugă universal — bate selectoarele inline din pagini */
html[lang] *, html[lang] *::before, html[lang] *::after {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* Headings cu Inter weight 700 (selector mai specific ca să câștige peste regula html[lang] *) */
html[lang] h1, html[lang] h2, html[lang] h3, html[lang] h4, html[lang] h5, html[lang] h6,
html[lang] .hero h1, html[lang] .page-title, html[lang] .htitle, html[lang] .cc-name,
html[lang] .modal-head h2, html[lang] .salary-modal-head h2, html[lang] .menu-drawer-head h3,
html[lang] .cover-title, html[lang] .bc-headline, html[lang] .wc-name, html[lang] .wc-name-input,
html[lang] .kpi-tile .kpi-value, html[lang] .kpis .cell .num {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* Monospace (JetBrains Mono) pentru numere/cod */
html[lang] .mono, html[lang] code, html[lang] pre, html[lang] kbd, html[lang] samp, html[lang] var, html[lang] tt,
html[lang] input.mono, html[lang] td.mono, html[lang] span.mono, html[lang] .num,
html[lang] .fc-plate, html[lang] .row-plate, html[lang] .leasing-card-plate,
html[lang] .salary-amount, html[lang] .salary-amount-net,
html[lang] .wp-bank-info .val.mono, html[lang] .wp-bank-card .val.mono,
html[lang] .salary-table td.right, html[lang] .sal-table td.right,
html[lang] .wp-salary-row .amount, html[lang] .wp-salary-row .month,
html[lang] [class*="mono"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
html[lang] em, html[lang] i, html[lang] .italic {
  font-style: italic !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Removed gradient text from cover - cleaner */
.cover-title .accent, .bc-headline .accent, .page-title .light {
  color: var(--moss) !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--moss) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* ====== HEADER — clean white with dark logo, subtle shadow ====== */
header.topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line-soft) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 16px 0 !important;
}
header.topbar .brand-logo path,
header.topbar .brand-logo g[fill] {
  fill: var(--forest) !important;
}

/* Burger button — bigger, more elegant */
.burger-btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
.burger-btn:hover {
  background: var(--green-pale) !important;
  border-color: var(--moss) !important;
}
.burger-btn span {
  background: var(--ink) !important;
  height: 1.8px !important;
  width: 20px !important;
  border-radius: 1px;
}

/* ====== BURGER MENU — REDESIGNED ====== */
.menu-overlay {
  background: rgba(10, 20, 16, 0.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.menu-drawer {
  width: 380px !important;
  right: -400px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  box-shadow: -16px 0 48px rgba(10, 20, 16, 0.12), -2px 0 8px rgba(10, 20, 16, 0.04) !important;
  border-left: none !important;
}
.menu-drawer.open { right: 0 !important; }

.menu-drawer-head {
  padding: 28px 28px 20px !important;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft) !important;
}
.menu-drawer-head h3 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}
.menu-drawer-head h3::after {
  content: 'Greentech Professionals SRL';
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 4px;
  font-style: normal;
}
.menu-close {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 18px !important;
  transition: all 0.15s !important;
}
.menu-close:hover {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

.menu-items {
  padding: 16px 16px !important;
  gap: 2px;
}
.menu-items a, .menu-items .menu-parent {
  color: var(--ink-2) !important;
  background: transparent !important;
  border-left: none !important;
  border-radius: 10px !important;
  padding: 13px 16px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s ease !important;
  gap: 14px !important;
}
.menu-items a:hover, .menu-items .menu-parent:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-left: none !important;
  transform: translateX(2px);
}
.menu-items .menu-parent .icon, .menu-items a .icon {
  font-size: 18px !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--cream-2);
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.menu-items a:hover .icon, .menu-items .menu-parent:hover .icon {
  background: var(--green-pale);
}
.menu-items a.active, .menu-sub a.active {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  font-weight: 600 !important;
  border-left: none !important;
}
.menu-items a.active .icon, .menu-sub a.active .icon {
  background: var(--moss) !important;
  color: #fff !important;
}
.menu-sub a.active::before { display: none !important; }

.menu-sub {
  background: transparent !important;
  padding: 4px 0 8px 16px !important;
  margin-left: 18px;
  border-left: 1.5px solid var(--line) !important;
}
.menu-sub a {
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  margin-left: 0 !important;
}
.menu-sub a .icon {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
}

.menu-items .menu-parent .chevron {
  margin-left: auto !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  opacity: 1 !important;
  transition: transform 0.2s ease !important;
}
.menu-items .menu-parent[aria-expanded="true"] {
  background: var(--cream-2) !important;
  color: var(--ink) !important;
}
.menu-items .badge {
  background: var(--rust) !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-xs);
}
.menu-drawer-foot {
  padding: 16px 28px !important;
  border-top: 1px solid var(--line-soft) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  background: var(--paper-2);
}

/* ====== HERO — clean, big, generous ====== */
.hero {
  background: var(--grad-hero) !important;
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 72px 0 56px !important;
}
.hero h1 {
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}
.hero .lead {
  font-size: 16px !important;
  color: var(--muted) !important;
  max-width: 720px;
  line-height: 1.6 !important;
}
.hero .lead strong {
  color: var(--ink) !important;
  font-weight: 600;
}
.hero .breadcrumb {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  margin-bottom: 16px !important;
}
.hero .breadcrumb a { color: var(--moss) !important; font-weight: 600; }

/* ====== CARDS — universal corporate ====== */
.kpi-tile, .hub-card, .worker-card, .fleet-card,
.cert-row, .project-card, .country-card,
.leasing-card, .country-map-card, .modal-box,
.toolbar, .banner-info, .salary-modal-box, .score-modal-box,
.payslip-modal-box, .wp-section, .group-section {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-xs) !important;
  border-radius: 14px !important;
}

/* KPI tiles - cleaner, modern */
.kpi-tile {
  padding: 20px 24px !important;
  border-left-width: 1px !important;
  transition: all 0.2s ease !important;
  position: relative;
  overflow: hidden;
}
.kpi-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--moss);
  border-radius: 2px;
}
.kpi-tile.soon::before, .kpi-tile.hours::before { background: var(--sun); }
.kpi-tile.expired::before, .kpi-tile.alert::before, .kpi-tile.absences::before { background: var(--rust); }
.kpi-tile.workers::before, .kpi-tile.valid::before { background: var(--green-accent); }
.kpi-tile:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  border-color: var(--line-strong) !important;
}
.kpi-tile .kpi-label {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
.kpi-tile .kpi-value {
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1;
}
.kpi-tile .kpi-sub { color: var(--muted) !important; }

/* Hub cards — bento corporate */
.hub-card {
  padding: 28px 30px !important;
  gap: 12px;
  border-left-width: 1px !important;
}
.hub-card.clickable {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.hub-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--moss) !important;
}
.hub-card .htitle {
  color: var(--ink) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.hub-card .htitle::after { color: var(--moss) !important; font-weight: 800; }
.hub-card .hdesc {
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.hub-card .hcount-pill {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  border: 1px solid rgba(42, 111, 74, 0.18) !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}
.hub-card .hcount-pill.bad { background: #fcecea !important; color: var(--rust) !important; border-color: rgba(196, 89, 62, 0.2) !important; }
.hub-card .hcount-pill.empty { background: var(--cream-2) !important; color: var(--muted) !important; border-color: var(--line) !important; }
.hub-card .hcount-pill.coming { background: #fdf6e3 !important; color: #8b6a17 !important; border-color: rgba(212, 160, 23, 0.25) !important; }
.hub-card.coming-soon {
  background: var(--paper-2) !important;
  border-style: dashed !important;
  opacity: 0.7;
}
.hub-card .badge-soon {
  background: var(--sun) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* ====== BUTTONS ====== */
.btn, .add-btn, .clear-btn, button.btn, .fleet-tab,
.wp-bank-trigger, .btn-save, .btn-cancel {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}
.btn { padding: 10px 18px !important; font-size: 13px !important; }
.btn.primary, .add-btn, button.add-btn, .btn-save,
button[type="submit"]:not(.btn-cancel) {
  background: var(--grad-button) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, var(--shadow-sm) !important;
}
.btn.primary:hover, .add-btn:hover, .btn-save:hover {
  background: linear-gradient(180deg, #235e3e 0%, #1c4e33 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, var(--shadow-md) !important;
  transform: translateY(-1px);
}
.btn.ghost, .clear-btn, .btn-cancel {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn.ghost:hover, .clear-btn:hover, .btn-cancel:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
}
.btn.warn {
  background: #fdf6e3 !important;
  border: 1px solid rgba(212, 160, 23, 0.3) !important;
  color: #8b6a17 !important;
}
.btn.warn:hover { background: #fbecbf !important; }

/* ====== TOOLBAR ====== */
.toolbar {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-xs) !important;
}
.toolbar input, .toolbar select,
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea, select {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  transition: all 0.15s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--moss) !important;
  box-shadow: 0 0 0 3px rgba(42, 111, 74, 0.10) !important;
  outline: none !important;
}

/* ====== FOOTER ====== */
footer.foot {
  background: var(--ink) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-top: none !important;
  padding: 32px 0 !important;
  font-size: 12px !important;
}
footer.foot .copyright strong { color: #fff !important; }

/* ====== TABLES ====== */
table thead th, .fleet thead th, .salary-table th, .sal-table thead th, .pontaj-table th {
  background: var(--paper-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  padding: 12px 14px !important;
}
table td, .fleet td, .salary-table td, .sal-table td {
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink-2) !important;
  padding: 12px 14px !important;
}
table tr:hover, .fleet tr:hover, .sal-table tbody tr:hover {
  background: var(--paper-2) !important;
}
tfoot tr, .sal-table tfoot td, .pontaj-table tfoot td {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  font-weight: 700 !important;
  border-top: 1px solid rgba(42, 111, 74, 0.2) !important;
}

/* ====== FLEET TABS ====== */
.fleet-tabs { border-bottom: 1px solid var(--line) !important; }
.fleet-tab { color: var(--muted) !important; background: transparent !important; padding: 14px 22px !important; }
.fleet-tab:hover { color: var(--ink) !important; background: var(--paper-2) !important; }
.fleet-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--moss) !important;
}
.fleet-tab.active::after { background: var(--moss) !important; }
.fleet-tab .count {
  background: var(--cream-2) !important;
  color: var(--muted) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
}
.fleet-tab.active .count {
  background: var(--moss) !important;
  color: #fff !important;
}
.fleet-tab.leasing.active { border-bottom-color: var(--sun) !important; color: var(--ink) !important; }
.fleet-tab.leasing.active .count { background: var(--sun) !important; color: var(--ink) !important; }

/* ====== MODALS ====== */
.modal-overlay, .score-modal-overlay, .salary-modal-overlay {
  background: rgba(10, 20, 16, 0.5) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.modal-box, .salary-modal-box, .score-modal-box, .payslip-modal-box {
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-xl) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.modal-head, .salary-modal-head {
  background: var(--paper-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 22px 26px !important;
}
.score-modal-head {
  background: var(--grad-dark) !important;
  color: #fff !important;
}
.modal-head h2, .salary-modal-head h2 {
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}
.modal-close {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: 8px !important;
}
.modal-close:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.modal-foot, .salary-modal-foot {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--line) !important;
  padding: 16px 26px !important;
}

/* ====== WORKER CARDS ====== */
.worker-card {
  background: var(--paper) !important;
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--moss) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-xs) !important;
}
.worker-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--line-strong) !important;
  border-left-color: var(--moss) !important;
}
.worker-card.inactive { border-left-color: var(--muted) !important; opacity: 0.7; }
.worker-card.archived { border-left-color: var(--rust) !important; opacity: 0.5; }
.wc-name, .wc-head-text input, .wc-name-input {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  background: transparent !important;
  border: none !important;
}
.wc-avatar {
  background: linear-gradient(135deg, var(--green-pale), #fff) !important;
  border: 1px solid var(--line) !important;
  color: var(--moss) !important;
  font-weight: 700 !important;
}

/* Score badge clean */
.wc-score-badge {
  border-color: #fff !important;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm) !important;
  font-weight: 700 !important;
}
.wc-score-badge.wc-score-excellent { background: var(--moss) !important; color: #fff !important; }
.wc-score-badge.wc-score-good { background: var(--green-accent) !important; color: #fff !important; }
.wc-score-badge.wc-score-ok { background: var(--sun) !important; color: var(--ink) !important; }
.wc-score-badge.wc-score-attention { background: var(--rust) !important; color: #fff !important; }
.wc-score-badge.wc-score-critical {
  background: #b8332a !important; color: #fff !important;
  animation: scorePulseCrit 2.4s ease-in-out infinite;
}
@keyframes scorePulseCrit {
  0%, 100% { box-shadow: 0 0 0 1px var(--line), 0 0 0 0 rgba(184, 51, 42, 0.4); }
  50% { box-shadow: 0 0 0 1px var(--line), 0 0 0 6px rgba(184, 51, 42, 0); }
}

/* ====== STATUS PILLS ====== */
.status-pill, .row-status, .leasing-card-status, .grade-pill, .cc-badge {
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 4px 11px !important;
  text-transform: none !important;
}
.status-pill.paid, .status-pill.ok, .row-status.active {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  border: 1px solid rgba(42, 111, 74, 0.2) !important;
}
.status-pill.pending, .status-pill.soon {
  background: #fdf6e3 !important;
  color: #8b6a17 !important;
  border: 1px solid rgba(212, 160, 23, 0.3) !important;
}
.status-pill.expired, .status-pill.warn {
  background: #fcecea !important;
  color: var(--rust) !important;
  border: 1px solid rgba(196, 89, 62, 0.25) !important;
}

/* Site chips and role chips */
.wc-site-chip, .site-chip, .row-site-chip {
  background: var(--paper-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
}
.wc-site-chip.active {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  border-color: rgba(42, 111, 74, 0.25) !important;
}
.wc-role-chip {
  background: var(--paper-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
}
.wc-role-chip.active {
  background: var(--moss) !important;
  color: #fff !important;
  border-color: var(--moss) !important;
}

/* ====== BANNER INFO ====== */
.banner-info {
  background: #f5f8ee !important;
  border: 1px solid rgba(42, 111, 74, 0.2) !important;
  border-left: 4px solid var(--moss) !important;
  border-radius: 12px !important;
  color: var(--ink-2) !important;
}
.banner-info b { color: var(--moss) !important; }

/* ====== WP SECTIONS (worker profile) ====== */
.wp-section {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs) !important;
}
.wp-section-head {
  background: transparent !important;
  border: none !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  margin-bottom: 14px;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
}
.wp-section-head span { color: var(--ink) !important; }
.wp-grid { padding-top: 4px !important; }
.wp-grid input, .wp-grid select, .wp-grid textarea {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
}

/* WP foot */
.wp-foot {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--line) !important;
}
.wp-foot .archive-btn { color: #8b6a17 !important; border-color: rgba(212, 160, 23, 0.4) !important; background: var(--paper) !important; }
.wp-foot .delete-btn { color: var(--rust) !important; border-color: rgba(196, 89, 62, 0.3) !important; background: var(--paper) !important; }

/* ====== BANK CARDS ====== */
.wp-bank-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--moss) !important;
  border-radius: 10px !important;
}
.wp-bank-card.primary {
  background: linear-gradient(180deg, #fff8e1 0%, #fff 100%) !important;
  border-left-color: var(--sun) !important;
}
.wp-bank-card.revolut { border-left-color: #0075eb !important; }
.wp-bank-name { color: var(--ink) !important; }
.wp-bank-info .val { color: var(--ink) !important; }
.wp-bank-info .val.mono { color: var(--moss) !important; font-weight: 600; }
.wp-bank-info .lbl { color: var(--muted) !important; }
.wp-bank-primary-tag {
  background: var(--sun) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* ====== SALARY rows ====== */
.wp-salary-row {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--moss) !important;
  border-radius: 10px !important;
}
.wp-salary-row.pending {
  background: #fef8e7 !important;
  border-left-color: var(--sun) !important;
}
.wp-salary-row .month, .wp-salary-row .amount { color: var(--ink) !important; }
.wp-salary-summary .tile {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--moss) !important;
  border-radius: 10px !important;
}
.wp-salary-summary .tile.last-paid { border-left-color: var(--sun) !important; }
.wp-salary-summary .tile.pending { border-left-color: var(--rust) !important; }
.wp-salary-summary .tile .val { color: var(--ink) !important; }

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }

/* ====== FOCUS RINGS ====== */
*:focus-visible {
  outline: 2px solid var(--moss) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(42, 111, 74, 0.12) !important;
  border-radius: 6px;
}

/* ====== PROGRESS BARS ====== */
.score-bar-fill, .leasing-progress-fill, .cc-bar-fill {
  background: linear-gradient(90deg, var(--moss) 0%, var(--green-accent) 100%) !important;
}

/* % pills (Salarii) */
.hours-pct.ok {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  border-color: rgba(42, 111, 74, 0.25) !important;
}
.hours-pct.mid {
  background: #fdf6e3 !important;
  color: #8b6a17 !important;
  border-color: rgba(212, 160, 23, 0.3) !important;
}
.hours-pct.low {
  background: #fcecea !important;
  color: var(--rust) !important;
  border-color: rgba(196, 89, 62, 0.3) !important;
}

/* ====== KPI cells (Flota) ====== */
.kpis {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-xs) !important;
  gap: 1px;
  overflow: hidden;
}
.kpis .cell { background: var(--paper) !important; padding: 18px 22px !important; }
.kpis .cell:hover { background: var(--paper-2) !important; }
.kpis .cell.active { background: var(--green-pale) !important; box-shadow: inset 0 -3px 0 var(--moss) !important; }
.kpis .cell .num {
  color: var(--ink) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: -0.02em;
}
.kpis .cell.warn .num { color: var(--rust) !important; }
.kpis .cell.alert .num { color: #8b6a17 !important; }

/* ====== BANK CHIP IN SALARII ====== */
.bank-chip {
  background: var(--green-pale) !important;
  border: 1px solid rgba(42, 111, 74, 0.2) !important;
  border-left: 2px solid var(--moss) !important;
  border-radius: 6px !important;
  color: var(--ink-2) !important;
}
.bank-chip .bank-name { color: var(--moss) !important; font-weight: 600; }
.bank-chip:hover { background: rgba(42, 111, 74, 0.12) !important; }
.bank-chip.empty {
  background: #fcecea !important;
  border-left-color: var(--rust) !important;
  border-color: rgba(196, 89, 62, 0.2) !important;
}

/* Action buttons in salarii rows */
.btn-edit-extras, .btn-payslip-row, .btn-payment-order, .row-action {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-weight: 600 !important;
  transition: all 0.15s;
}
.btn-edit-extras:hover, .btn-payslip-row:hover,
.btn-payment-order:hover:not(:disabled), .row-action:hover {
  background: var(--moss) !important;
  color: #fff !important;
  border-color: var(--moss) !important;
}

/* ====== EMPTY STATES ====== */
.empty-state {
  background: var(--paper-2) !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 12px !important;
  color: var(--muted) !important;
  padding: 32px 20px !important;
}
.empty-state h3 { color: var(--ink) !important; }

/* ====== Country cards on profile ====== */
.country-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
}

/* ====== Misc cleanups ====== */
.skip-link { background: var(--ink) !important; color: #fff !important; }
label, .toolbar label, .modal-field label, .field label { color: var(--muted) !important; font-weight: 600 !important; }
.divider { background: var(--line) !important; }
.section-label { color: var(--muted) !important; }

/* Make team badge subtle */
.team-badge, .wc-team-badge {
  background: var(--cream-2) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Active badge button "+ ACTIV" */
.btn.active, button[class*="active"]:not(.fleet-tab):not(.menu-items a) {
  background: var(--green-pale) !important;
  color: var(--moss) !important;
  border: 1px solid rgba(42, 111, 74, 0.25) !important;
}

/* Fix the wc-name visual */
.worker-cell .wc-name { color: var(--ink) !important; font-weight: 600 !important; }
.worker-cell .wc-meta { color: var(--muted) !important; font-size: 12px; }

/* Score modal */
.score-modal-head .score-circle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--sun) !important;
}
.score-modal-head .score-circle .v { color: #fff !important; }
.score-modal-head h2 { color: #fff !important; }
.score-modal-head .grade-pill {
  background: var(--sun) !important;
  color: var(--ink) !important;
}
.score-component {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--moss) !important;
}
.score-component .lbl, .score-component .val { color: var(--ink) !important; }
.score-component.weak { border-left-color: var(--rust) !important; }
.score-component.weak .lbl { color: var(--rust) !important; }

/* ============================================================================
 * MOBILE RESPONSIVE (≤ 768px)
 * ============================================================================ */
@media (max-width: 768px) {
  /* Hero compact */
  .hero { padding: 32px 0 24px !important; }
  .hero h1 { font-size: 32px !important; line-height: 1.1 !important; }
  .hero .lead { font-size: 14px !important; }
  .container { padding: 0 16px !important; }

  /* KPI grids stack to 2-column */
  .kpi-grid, .stats-grid, .leasing-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .kpi-tile { padding: 14px 16px !important; }
  .kpi-tile .kpi-value, .kpi-value { font-size: 22px !important; }

  /* Hub grid full-width single column */
  .hub-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .hub-card { padding: 20px !important; }

  /* Projects grid */
  .projects-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Toolbar wraps cleanly */
  .toolbar .container { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .toolbar input[type="text"] { min-width: 0 !important; width: 100% !important; }
  .toolbar select { width: 100% !important; }
  .view-toggle { width: 100% !important; }
  .view-toggle button { flex: 1 !important; padding: 9px 8px !important; font-size: 10px !important; }
  .add-btn { margin-left: 0 !important; width: 100% !important; }

  /* Cards-grid: full-width */
  .cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Worker card scaling */
  .worker-card { padding: 16px !important; }
  .wc-name, .wc-name-input { font-size: 15px !important; }
  .wc-score-badge { top: 38px !important; left: 38px !important; width: 26px !important; height: 26px !important; font-size: 11px !important; }

  /* Tables — horizontal scroll wrapper */
  .table-wrap, .sal-table-wrap, [class*="-wrap"][class*="table"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table, .fleet, .sal-table { font-size: 12px !important; min-width: 720px !important; }

  /* Modals full-screen on mobile */
  .modal-overlay, .score-modal-overlay, .salary-modal-overlay,
  .pontaj-modal-overlay, .expense-modal-overlay, .progress-modal-overlay,
  .project-modal-overlay {
    padding: 0 !important;
  }
  .modal-box, .salary-modal-box, .score-modal-box, .payslip-modal-box,
  .pontaj-modal-box, .expense-modal-box, .progress-modal-box,
  .project-modal-box {
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }
  .modal-head, .modal-grid { padding: 16px !important; }
  .modal-grid { grid-template-columns: 1fr !important; }
  .modal-field.full { grid-column: 1 !important; }

  /* Footer simpler */
  footer.foot .container { flex-direction: column !important; gap: 6px !important; text-align: center !important; }

  /* Country cards stack */
  .country-cards-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Worker profile modal — make it scrollable, full-screen */
  .wp-box, .wp-modal-box { max-width: 100% !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; }
  .wp-body { padding: 14px 16px !important; }
  .wp-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .wp-foot { flex-direction: column !important; gap: 8px !important; }
  .wp-foot .danger-actions { width: 100% !important; }
  .wp-foot button { width: 100% !important; }

  /* Fleet tabs scroll horizontally */
  .fleet-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .fleet-tab { white-space: nowrap !important; padding: 12px 16px !important; font-size: 14px !important; }

  /* Profil companie pages: scale down to fit screen */
  .profile-page { width: 100% !important; padding: 14mm !important; transform: scale(1) !important; }
  .profile-stage { padding: 12px !important; }

  /* Profile cards in profile-companie */
  .pp-stats { grid-template-columns: 1fr 1fr !important; gap: 6mm !important; }
  .pp-services { grid-template-columns: 1fr !important; gap: 4mm !important; }
  .pp-meta-grid { grid-template-columns: 1fr !important; }
  .cover-title { font-size: 36pt !important; }

  /* Burger menu drawer larger on mobile */
  .menu-drawer { width: 100vw !important; right: -100vw !important; }
  .menu-items a, .menu-items .menu-parent { padding: 16px 20px !important; font-size: 16px !important; }
  .menu-items a .icon, .menu-items .menu-parent .icon { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .menu-sub a { padding: 13px 18px !important; font-size: 15px !important; }

  /* Buttons larger touch targets */
  .btn, button.btn, .clear-btn { padding: 12px 18px !important; min-height: 44px !important; }
  .btn.small { padding: 8px 14px !important; min-height: 36px !important; }

  /* CTA row on project cards: stack vertically on very small */
  .project-card .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .project-card .btn-pontaj, .project-card .btn-expense,
  .project-card .btn-progress, .project-card .cta-btn { width: 100% !important; justify-content: center !important; }

  /* iOS zoom prevention — toate input-urile editabile minimum 16px (iOS zoomează la focus dacă <16px) */
  /* Tipuri: text/number/email/password/tel/url/search/date/month/time/datetime-local/week/color/file + textarea + select */
  input[type="text"], input[type="number"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
  input[type="month"], input[type="time"], input[type="datetime-local"], input[type="week"],
  input:not([type]), textarea, select {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  /* Excepție: celule de pontaj (matrice densă 15+ muncitori × 30 zile) — păstrăm 16px să evităm iOS zoom, cu padding minim */
  .pontaj-cell, input.pontaj-cell,
  td input[type="text"][maxlength="2"], td input[type="text"][maxlength="3"],
  input.pontaj-input, input.day-cell-input {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 2px 4px !important;
    line-height: 1.1 !important;
  }
  /* Tabel pontaj: lățime mai mare pe mobile pentru cellele 44px tap-target */
  .pontaj-table th { min-width: 44px !important; height: 44px !important; }
  .pontaj-table th.col-name, .pontaj-table td.col-name { min-width: 140px !important; }
  /* Inputuri inline mici (chip-uri rol, mini-edit) */
  .wc-name-input, input.inline-edit, input.mini-input {
    font-size: 16px !important;
    min-height: 36px !important;
  }

  /* Touch target minimum 44×44px global pentru link-uri și butoane mici */
  a.icon-btn, a.link-btn, button.icon-btn, button.small,
  .menu-close, .burger-btn, .modal-close, .close-btn,
  [role="button"], .chip-toggle, .tab-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Click-to-call: tel: links — accent color + tap-target */
  a[href^="tel:"] {
    color: var(--moss, #3d6e54) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 4px 6px !important;
    display: inline-block !important;
    min-height: 44px !important;
    line-height: 36px !important;
  }
  a[href^="tel:"]::before { content: "📞 "; opacity: 0.7; }

  /* Tabele — fallback wrapping pentru tabele FĂRĂ părinte cu overflow-x; nu invadează .table-wrap, .sal-table-wrap, etc. */
  /* Strategie: doar tabelele care nu au un wrap explicit (parent matching [class*="wrap"], [class*="scroll"]) */
  main > .container > table:not(.no-mobile-wrap),
  main > table:not(.no-mobile-wrap),
  main section > table:not(.no-mobile-wrap) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Skip link visibility on mobile (a11y) */
  .skip-link:focus {
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: var(--forest, #1a4d3a) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
  }

  /* Modaluri custom care nu au folosit .modal-box: forțăm full-width pe mobile */
  [class*="modal-box"], [class*="modal"][role="dialog"] > div:not(.modal-overlay) {
    max-width: 100% !important;
  }
}

/* Tablet only */
@media (min-width: 769px) and (max-width: 1024px) {
  .hub-grid, .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .country-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}