/* TopHire light theme adapted to current dashboard markup */
:root{
  --c-accent:#D8F850;
  --c-pale:#F0F8D8;
  --c-bg:#FFFFFF;
  --c-surface:#F8F8F8;
  --c-text:#101010;
  --c-muted:#6B6B6B;
  --c-border:rgba(16,16,16,.12);
  --c-success:#7fbf3a;
  --c-warn:#d49d14;
  --c-danger:#dc5c4a;
  --c-info:#3f72b6;

  --r-lg:22px;
  --r-xl:28px;
  --r-pill:9999px;

  --sh-soft:0 18px 40px rgba(16,16,16,.10);
  --sh-card:0 10px 26px rgba(16,16,16,.08);
  --tr-fast:.18s ease;
  --tr-mid:.28s ease;

  /* Design System: action tiles */
  --tile-bg:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  --tile-border:rgba(16,16,16,.10);
}

*{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
body{color:var(--c-text); background:var(--c-bg);}

/* =========================================================
   Global polish (no new functionality): typography, spacing,
   consistent controls, calmer actions, better navigation.
   ========================================================= */
:root{
  --fs-h1:26px;
  --fs-h2:18px;
  --fs-body:14px;
  --fs-small:12px;

  --sp-1:6px;
  --sp-2:10px;
  --sp-3:14px;
  --sp-4:18px;
  --sp-5:24px;

  --focus-ring:0 0 0 4px rgba(216,248,80,.35);
}

.dashboard-main{ font-size:var(--fs-body); }
.topbar-title{ font-weight:900; letter-spacing:-.01em; }
.breadcrumb-bar .breadcrumb{ font-size:12px; }
.breadcrumb-bar .breadcrumb a{ color:rgba(16,16,16,.72); text-decoration:none; }
.breadcrumb-bar .breadcrumb a:hover{ text-decoration:underline; }

/* Headings: keep hierarchy consistent */
.h1,.h2,.h3,.h4,.h5{ letter-spacing:-.01em; }
.h4{ font-weight:900; }
.page-title{ font-size:var(--fs-h1); font-weight:900; }

/* Small anomaly marker (next to worker name) */
.anomaly-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:var(--r-pill);
  border:1px solid rgba(212,157,20,.35);
  background:rgba(212,157,20,.14);
  color:#6B4E00;
  font-weight:900;
  font-size:12px;
  line-height:1;
}
.anomaly-flag:hover{ filter:brightness(.98); }

/* Soft helper card inside forms */
.soft-card{
  border:1px solid rgba(16,16,16,.10);
  background:linear-gradient(180deg, rgba(216,248,80,.10), rgba(255,255,255,.70));
  border-radius:var(--r-lg);
  box-shadow:0 10px 26px rgba(16,16,16,.05);
}
.section-title{ font-size:var(--fs-h2); font-weight:900; }

/* Cards: consistent padding + subtle hover */
.glass-card,
.card.glass-card{
  border:1px solid rgba(16,16,16,.10);
}
.glass-card:hover{ box-shadow:0 14px 34px rgba(16,16,16,.10); }
.card .card-header{ background:transparent; border-bottom:1px solid rgba(16,16,16,.08); }

/* Forms: unified controls */
.form-control,
.form-select{
  border-radius:14px;
  border:1px solid rgba(16,16,16,.14);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 22px rgba(16,16,16,.04);
  transition: box-shadow var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}
.form-control::placeholder{ color:rgba(16,16,16,.38); }
.form-control:focus,
.form-select:focus{
  border-color:rgba(16,16,16,.24);
  box-shadow:var(--focus-ring);
}
.input-group-text{
  border-radius:14px;
  border:1px solid rgba(16,16,16,.14);
  background:rgba(16,16,16,.04);
}

/* Buttons: align sizes + calmer outlines */
.btn{ border-radius:14px; font-weight:900; letter-spacing:.01em; }
.btn-sm{ border-radius:12px; padding:.34rem .58rem; }
.btn-glow{ box-shadow:0 18px 30px rgba(216,248,80,.30); }
.btn-outline-soft:focus{ box-shadow:var(--focus-ring) !important; }

/* Tables: scan-friendly */
.table-premium{ font-size:13px; }
.table-premium thead th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.table-premium td{ vertical-align:middle; }
.table-premium tr:hover td{ background:rgba(216,248,80,.08); }
.table-premium .num{ text-align:right; font-variant-numeric: tabular-nums; }

/* Navigation: clearer active state, calmer hover */
.sidebar-nav{ padding-top:8px; }
.sidebar-link{
  position:relative;
  padding:10px 12px;
  border-radius:16px;
  transition: background var(--tr-fast), transform var(--tr-fast), border-color var(--tr-fast);
  border:1px solid transparent;
}
.sidebar-link:hover{
  background:rgba(216,248,80,.12);
  border-color:rgba(16,16,16,.10);
  transform: translateY(-1px);
}
.sidebar-link.is-active{
  background:rgba(216,248,80,.20);
  border-color:rgba(16,16,16,.14);
  box-shadow:0 12px 24px rgba(16,16,16,.06);
}
.sidebar-link.is-active::before{
  content:"";
  position:absolute;
  left:-6px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:99px;
  background:rgba(16,16,16,.86);
}
.side-ico{ width:28px; height:28px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(16,16,16,.04); }
.sidebar-link.is-active .side-ico{
  background: rgba(216,248,80,.62);
  color:#101010;
  border-color: rgba(120,160,30,.28);
}

/* Sidebar submenu (used for Payroll settings sections) */
.sidebar-details{ margin:2px 0; }
.sidebar-details > summary.sidebar-link{ list-style:none; cursor:pointer; }
.sidebar-details > summary.sidebar-link::-webkit-details-marker{ display:none; }
.sidebar-subitems{ display:flex; flex-direction:column; gap:6px; padding:6px 0 6px 10px; }
.sidebar-sublink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:inherit;
  text-decoration:none;
  font-size:13px;
}
.sidebar-sublink:hover{ background:rgba(216,248,80,.10); border-color:rgba(16,16,16,.10); }
.sidebar-sublink.is-active{ background:rgba(216,248,80,.18); border-color:rgba(16,16,16,.14); }
.sidebar-sublink .side-ico{ width:24px; height:24px; border-radius:9px; }

/* Alerts: calmer, more premium */
.alert{ border-radius:18px; border:1px solid rgba(16,16,16,.10); }
.alert-success{ background:rgba(127,191,58,.12); }
.alert-warning{ background:rgba(212,157,20,.12); }
.alert-danger{ background:rgba(220,92,74,.12); }
.alert-info{ background:rgba(63,114,182,.12); }

/* Empty state (useful in tables/cards where already rendered) */
.empty-state{
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(16,16,16,.18);
  background:rgba(16,16,16,.03);
  color:rgba(16,16,16,.62);
  font-size:12px;
}

/* --- Readability helpers (avoid white-on-white) --- */
/* Bootstrap's text-white-50 is too low-contrast on our light UI. */
body.app-bg .text-white-50{ color:rgba(16,16,16,.58) !important; }
.text-soft{ color:rgba(16,16,16,.62) !important; }
.text-softer{ color:rgba(16,16,16,.48) !important; }
.help-hint{
  color:rgba(16,16,16,.58);
  font-size:12px;
  line-height:1.35;
}
.form-label-soft{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(16,16,16,.62);
  margin:2px 0 4px;
}
.glass-card .text-white-50,
.card .text-white-50{
  color:rgba(16,16,16,.58) !important;
}
.chip-step{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(16,16,16,.04);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}

/* --- Premium accordion for rules (Bootstrap override in a scoped wrapper) --- */
.accordion-premium .accordion-item{ border-radius:18px; }
.accordion-premium .accordion-button{
  border-radius:18px !important;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,22,34,.12);
  box-shadow:0 10px 20px rgba(15,22,34,.06);
  font-weight:900;
  color:var(--c-text);
}
.accordion-premium .accordion-button:focus{ box-shadow:0 0 0 4px rgba(216,248,80,.35); }
.accordion-premium .accordion-button:not(.collapsed){
  background:rgba(255,255,255,.86);
  border-color:rgba(15,22,34,.18);
}
.accordion-premium .accordion-button::after{ opacity:.7; }
.accordion-premium .accordion-body{
  margin-top:10px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,22,34,.10);
  box-shadow:0 10px 22px rgba(15,22,34,.05);
}

/* --- Buttons --- */
.btn-outline-soft{
  border:1px solid rgba(15,22,34,.16) !important;
  color:rgba(16,16,16,.86) !important;
  background:rgba(255,255,255,.70) !important;
}
.btn-outline-soft:hover{
  background:rgba(216,248,80,.20) !important;
  border-color:rgba(15,22,34,.22) !important;
  color:rgba(16,16,16,.92) !important;
}
.btn-link-danger{
  padding:0;
  border:0;
  background:transparent;
  color:rgba(220,92,74,.95);
  font-weight:900;
}
.btn-link-danger:hover{ text-decoration:underline; color:rgba(220,92,74,1); }

/* -----------------------------
   Unified UI Kit: Action Tiles
   ----------------------------- */
.action-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; }
.action-tile{
  grid-column:span 6;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:var(--r-lg);
  border:1px solid var(--tile-border);
  background:var(--tile-bg);
  box-shadow:0 12px 26px rgba(16,16,16,.08);
  text-decoration:none;
  color:var(--c-text);
  transition:transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.action-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(16,16,16,.10);
  border-color:rgba(16,16,16,.14);
  color:var(--c-text);
}
.action-ico{
  width:46px;height:46px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(216,248,80,.22);
  border:1px solid rgba(16,16,16,.10);
  font-size:18px;
  flex:0 0 46px;
}
.action-body{ min-width:0; }
.action-title{ font-weight:900; letter-spacing:.2px; line-height:1.1; }
.action-sub{ font-size:12px; color:var(--c-muted); margin-top:2px; }
.action-meta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.action-badge{
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(16,16,16,.04);
  color:#1a1a1a;
}
.action-chevron{ opacity:.55; font-weight:900; }

@media (min-width: 992px){
  .action-tile{ grid-column:span 4; }
}

.app-bg{
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 8% 8%, rgba(216,248,80,.18), transparent 62%),
    radial-gradient(900px 520px at 92% 0%, rgba(16,16,16,.03), transparent 60%),
    linear-gradient(180deg, #fff, #fcfcfc);
}

.glass-nav{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(16,16,16,.06);
  transition:box-shadow .2s ease, background .2s ease;
}
.glass-nav.scrolled{
  box-shadow:0 10px 22px rgba(16,16,16,.08);
  background:rgba(255,255,255,.95);
}
body.header-premium .glass-nav{
  box-shadow:0 10px 22px rgba(16,16,16,.08);
}
body.header-premium .nav-shell{
  box-shadow:0 8px 18px rgba(16,16,16,.07);
}
body.role-admin .glass-nav{ background:linear-gradient(180deg, rgba(240,248,216,.96), rgba(255,255,255,.92)); }
body.role-ceo .glass-nav{ background:linear-gradient(180deg, rgba(232,245,250,.96), rgba(255,255,255,.92)); }
body.role-factory .glass-nav{ background:linear-gradient(180deg, rgba(255,249,232,.96), rgba(255,255,255,.92)); }
body.role-coordinator .glass-nav{ background:linear-gradient(180deg, rgba(245,239,255,.96), rgba(255,255,255,.92)); }
body.role-recruiter .glass-nav{ background:linear-gradient(180deg, rgba(232,255,247,.96), rgba(255,255,255,.92)); }
body.role-sales .glass-nav{ background:linear-gradient(180deg, rgba(255,240,232,.96), rgba(255,255,255,.92)); }
.navbar-brand{letter-spacing:.2px; color:var(--c-text) !important;}
.brand-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--c-accent);
  box-shadow:0 0 0 6px rgba(216,248,80,.35);
  margin-right:10px;transform:translateY(-1px);
}
.navbar .nav-link{color:#2a2a2a !important; opacity:.9;}
.navbar .nav-link:hover{opacity:1;}
.fw-extrabold{font-weight:800;}

.dashboard-main{
  width:min(1440px, 100%);
  margin:0 auto;
}

/* --- App Shell (Sidebar + Topbar) --- */
.app-shell{
  min-height:100vh;
  display:flex;
}

.app-sidebar{
  width:268px;
  flex:0 0 268px;
  position:sticky;
  top:0;
  height:100vh;
  padding:14px;
  border-right:1px solid rgba(16,16,16,.08);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  box-shadow: 12px 0 30px rgba(16,16,16,.04);
}
.sidebar-inner{
  height:100%;
  display:flex;
  flex-direction:column;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--c-text);
  font-weight:900;
  letter-spacing:.2px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(16,16,16,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  box-shadow:0 10px 22px rgba(16,16,16,.06);
}
.sidebar-brand:hover{ color:var(--c-text); filter:brightness(.99); }

.sidebar-role{
  margin-top:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  color:#2f2f2f;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(216,248,80,.26);
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
  overflow:auto;
  padding-right:2px;
}
.sidebar-sep{ height:1px; background:rgba(16,16,16,.08); margin:6px 10px; }

.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  text-decoration:none;
  font-weight:850;
  font-size:13px;
  color:#262626;
  border:1px solid transparent;
  transition:transform var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}
.sidebar-link:hover{
  background:rgba(216,248,80,.18);
  border-color:rgba(16,16,16,.10);
  transform:translateY(-1px);
}
.sidebar-link.is-active{
  background: rgba(216,248,80,.26);
  border-color: rgba(120,160,30,.28);
  color: #101010;
  box-shadow: 0 14px 28px rgba(16,16,16,.06);
}

.side-ico{
  width:34px;
  height:34px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(255,255,255,.72);
  color:#1a1a1a;
  flex:0 0 34px;
}
.sidebar-link.is-active .side-ico{
  background: rgba(216,248,80,.62);
  color:#101010;
  border-color: rgba(120,160,30,.28);
}

.sidebar-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(16,16,16,.08);
}
.user-mini{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 2px 10px 2px;
}
.user-mini strong{ font-size:12px; color:#161616; }
.user-mini span{ font-size:11px; color:#6b6b6b; }

.app-main{
  flex:1 1 auto;
  min-width:0;
}

.app-topbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,16,16,.06);
}
.app-topbar.scrolled{ box-shadow:0 10px 22px rgba(16,16,16,.08); background:rgba(255,255,255,.94); }
.topbar-inner{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-title{
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
  color:#121212;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:52vw;
}
.topbar-actions{ display:flex; align-items:center; gap:8px; }

.sidebar-offcanvas{
  background:rgba(255,255,255,.96);
}
.sidebar-offcanvas .offcanvas-header{
  border-bottom:1px solid rgba(16,16,16,.08);
}
.sidebar-offcanvas-footer{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(16,16,16,.08);
}
.breadcrumb-bar{
  border-bottom:1px solid rgba(16,16,16,.08);
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
}
.breadcrumb{
  padding:.5rem 0;
}
.thanks-strip{
  border-bottom:1px solid rgba(16,16,16,.08);
  background:linear-gradient(90deg, rgba(216,248,80,.28), rgba(240,248,216,.62));
  color:#1b1b1b;
  font-size:13px;
  font-weight:700;
  padding:8px 0;
}
.thanks-strip strong{
  font-weight:900;
}

.thanks-strip__close{
  border:0;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,16,16,.10);
  width:28px;
  height:28px;
  border-radius:10px;
  line-height:26px;
  text-align:center;
  font-weight:900;
  color:#1b1b1b;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.thanks-strip__close:hover{transform:translateY(-1px);background:rgba(255,255,255,.78);}
.breadcrumb-item a{
  color:#4a4a4a;
  text-decoration:none;
}
.breadcrumb-item.active{
  color:#101010;
  font-weight:700;
}

.nav-shell{
  border:1px solid rgba(16,16,16,.08);
  border-radius:14px;
  padding:6px 8px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow:0 6px 14px rgba(16,16,16,.05);
}
.role-chip{
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.12);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  color:#2f2f2f;
  background:#f6f7ec;
}
.nav-pills-wrap{
  align-items:center;
  position:relative;
}
.nav-pill-indicator{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:34px;
  border-radius:999px;
  background:rgba(216,248,80,.45);
  border:1px solid rgba(16,16,16,.12);
  box-shadow:0 8px 16px rgba(216,248,80,.22);
  opacity:0;
  transform:translateX(0);
  transition:transform .22s ease, width .22s ease, opacity .2s ease;
  pointer-events:none;
}
.nav-pill{
  border:1px solid rgba(16,16,16,.12);
  border-radius:999px;
  min-height:32px;
  padding:5px 11px !important;
  font-size:12px;
  font-weight:800;
  color:#2d2d2d !important;
  background:#fff;
}
.nav-pill:hover{
  background:#f6f7ec;
}
.nav-pill.is-active{
  background: rgba(216,248,80,.26);
  border-color: rgba(120,160,30,.28);
  /* Keep contrast: active pill sits on a light background */
  color:var(--c-text) !important;
  box-shadow:0 8px 14px rgba(16,16,16,.22);
}

.nav-icon{
  width:12px;
  height:12px;
  display:inline-block;
  margin-right:8px;
  border-radius:50%;
  background:#c3c3c3;
  flex:0 0 auto;
}
.nav-pill.is-active .nav-icon{ background:var(--c-text); }

.user-meta{
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  margin-right:4px;
}
.user-meta strong{
  font-size:12px;
  color:#161616;
}
.user-meta span{
  font-size:11px;
  color:#6b6b6b;
}

.dock-icon{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(16,16,16,.16);
  font-size:10px;
  font-weight:900;
  margin-right:5px;
  background:#fff;
}

.glass-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transition:box-shadow var(--tr-mid), transform var(--tr-mid), border-color var(--tr-fast);
}
.glass-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, rgba(216,248,80,.9), rgba(216,248,80,.25));
  opacity:.55;
}

.hover-lift{transition:transform .18s ease,box-shadow .18s ease;}
.hover-lift:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(16,16,16,.12);}

h1.fw-extrabold{
  letter-spacing:-.02em;
}

.card.glass-card .fw-bold{
  letter-spacing:-.01em;
}

.btn-glow{
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--c-accent);
  color:var(--c-text);
  font-weight:800;
  box-shadow:0 10px 20px rgba(216,248,80,.28);
}
.btn-glow:hover{filter:brightness(.98); color:var(--c-text);}
.btn{white-space:nowrap;}

.btn-outline-light{
  border-color:rgba(16,16,16,.14) !important;
  color:var(--c-text) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(240,248,216,.34)) !important;
  backdrop-filter:blur(5px);
}
.btn-outline-light:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(216,248,80,.18)) !important;
  border-color:rgba(16,16,16,.22) !important;
}

.badge-glow{
  background:var(--c-pale);
  border:1px solid rgba(16,16,16,.08);
  color:var(--c-text);
  border-radius:var(--r-pill);
  padding:.55rem .9rem;
}

.hero-wrap{padding:8vh 0 5vh;}
.hero-card{
  border-radius:var(--r-xl);
  padding:38px;
  background:#fff;
  border:1px solid var(--c-border);
  box-shadow:var(--sh-soft);
}

.stack-card{
  border-radius:var(--r-xl);
  padding:28px;
  background:var(--c-surface);
  border:1px solid rgba(16,16,16,.08);
}
.stack-hint{margin-top:14px;color:var(--c-muted);font-size:.95rem;}

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.page-head__eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#5e5e5e;
  font-weight:800;
  margin-bottom:4px;
}
.page-head__title{
  margin:0;
  font-size:clamp(26px,2.3vw,38px);
  line-height:1.08;
  font-weight:900;
}
.page-head__sub{
  margin-top:6px;
  color:var(--c-muted);
}
.quality-kpi{
  border:1px solid rgba(16,16,16,.14);
  border-radius:16px;
  padding:10px 14px;
  background:#fff;
  min-width:240px;
}
.quality-kpi.is-ok{
  background:linear-gradient(180deg, rgba(216,248,80,.34), rgba(216,248,80,.16));
  border-color:rgba(127,191,58,.42);
}
.quality-kpi.is-alert{
  background:linear-gradient(180deg, rgba(220,92,74,.20), rgba(220,92,74,.10));
  border-color:rgba(220,92,74,.36);
}
.quality-kpi__label{
  color:#5f5f5f;
  font-size:12px;
  font-weight:700;
}
.quality-kpi__value{
  font-size:2rem;
  font-weight:900;
  line-height:1.05;
}
.filters-bar{
  border-radius:16px;
}
.filters-grid .form-label{
  margin-bottom:.35rem;
}
.filters-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.chart-style-switch{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.chart-style-switch--3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.chart-style-switch__btn{
  border:1px solid rgba(16,16,16,.12);
  background:rgba(255,255,255,.75);
  color:#2d2d2d;
  border-radius:999px;
  min-height:38px;
  padding:0 10px;
  font-size:12px;
  font-weight:800;
  transition:background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.chart-style-switch__btn:hover{
  background:#f4f8de;
  border-color:rgba(16,16,16,.2);
}
.chart-style-switch__btn.is-active{
  background: rgba(216,248,80,.26);
  color: #101010;
  border-color: rgba(120,160,30,.28);
  box-shadow:0 8px 14px rgba(16,16,16,.2);
}
.filters-actions .btn{
  min-width:120px;
}
.quality-table-wrap{
  min-height:56vh;
}
.requests-table-wrap{
  min-height:56vh;
}
.empty-ok{
  min-height:56vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:8px;
  padding:24px;
}
.empty-ok__mark{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
  color:#2c4a14;
  background:#dff4b2;
  border:1px solid #b9da76;
}
.empty-ok h2{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
}
.empty-ok p{
  margin:0;
  color:var(--c-muted);
}

.impact-hero{
  border:1px solid rgba(16,16,16,.1);
  border-radius:20px;
  padding:16px 18px;
  background:
    radial-gradient(680px 260px at 84% 8%, rgba(216,248,80,.34), transparent 72%),
    linear-gradient(180deg, #fff, #fbfde9);
  box-shadow:var(--sh-card);
}
.impact-hero__lead{
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#4a4a4a;
  margin-bottom:10px;
}
.impact-hero__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.impact-hero__item{
  border:1px solid rgba(16,16,16,.1);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}
.impact-hero__num{
  font-size:1.55rem;
  font-weight:900;
  line-height:1.05;
}
.impact-hero__label{
  color:var(--c-muted);
  font-size:12px;
  margin-top:2px;
}

.kpi{
  border-radius:18px;
  padding:18px;
  background:#fff;
  border:1px solid rgba(16,16,16,.10);
  box-shadow:0 6px 14px rgba(16,16,16,.05);
  transition:transform var(--tr-fast), box-shadow var(--tr-mid), border-color var(--tr-fast);
}
.kpi--primary{
  background:linear-gradient(180deg, #ffffff, #f9fbf2);
}
.kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(16,16,16,.16);
  box-shadow:0 14px 28px rgba(16,16,16,.10);
}
.kpi-label{color:var(--c-muted); font-weight:700; font-size:.95rem;}
.kpi-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.18);
  background:rgba(16,16,16,.06);
  color:rgba(16,16,16,.70);
  font-weight:900;
  font-size:.72rem;
  line-height:1;
  cursor:help;
  transition:transform var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}
.kpi-help:hover{transform:translateY(-1px); background:rgba(16,16,16,.08); border-color:rgba(16,16,16,.26);}
.kpi-help.is-saved{background:rgba(22,181,145,.12); border-color:rgba(22,181,145,.28); color:rgba(16,16,16,.74);}
.kpi-value{font-size:2rem; font-weight:900; letter-spacing:-.5px; color:var(--c-text);}
.kpi-sub{color:var(--c-muted); font-size:.9rem;}
.kpi-mini .kpi-value{font-size:1.7rem;}

.kpi-secondary-wrap{
  border-color:rgba(16,16,16,.10);
  background:linear-gradient(180deg, #fff, #fbfcf6);
}

.mini-metric{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(16,16,16,.1);
  background:var(--c-surface);
}
.mini-label{color:var(--c-muted); font-size:.85rem; font-weight:700;}
.mini-value{font-weight:900; font-size:1.25rem; color:var(--c-text);}

.pill{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.14);
  background:var(--c-surface);
  color:var(--c-text);
  font-weight:800;
  font-size:.85rem;
}

.pill--good{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#166534;}
.pill--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12);color:#92400e;}
.pill--danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#991b1b;}

.status-dot{width:12px;height:12px;border-radius:50%;}
.status-dot.ok{background:var(--c-success);}
.status-dot.warn{background:var(--c-warn);}
.status-dot.danger{background:var(--c-danger);}

/* Normalize dark table markup to light look */
.table-dark{
  --bs-table-bg:#fff;
  --bs-table-striped-bg:#fcfcfc;
  --bs-table-hover-bg:#f7f7f7;
  --bs-table-border-color:rgba(16,16,16,.1);
  --bs-table-color:var(--c-text);
}
.table-dark thead th{
  color:#474747;
  font-weight:800;
  letter-spacing:.2px;
  font-size:.85rem;
  position:sticky;
  top:0;
  z-index:1;
  background:#fbfdf2;
}
.table-dark td{color:var(--c-text);}
.js-row-link:hover td{background:#f6f8eb;}

.request-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.request-progress__bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(16,16,16,.08);
  overflow:hidden;
}
.request-progress__bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #d8f850, #a7cf2a);
}
.request-progress__meta{
  color:var(--c-muted);
  font-size:.78rem;
  font-weight:700;
}
.request-speed{
  font-weight:800;
  line-height:1.1;
}
.request-speed__hint{
  color:var(--c-muted);
  font-size:.75rem;
}

.empty-state{
  border-radius:22px;
  padding:48px 20px;
  text-align:center;
  background:var(--c-surface);
  border:1px dashed rgba(16,16,16,.2);
}
.empty-title{font-weight:900; font-size:1.5rem;}
.empty-text{color:var(--c-muted); margin-top:6px;}

.form-control,.form-select{
  background:#fff;
  border:1px solid rgba(16,16,16,.14);
  color:var(--c-text);
}
.form-control:focus,.form-select:focus{
  background:#fff;
  border-color:rgba(216,248,80,.9);
  box-shadow:0 0 0 .25rem rgba(216,248,80,.25);
  color:var(--c-text);
}
.recruiter-data-select{
  min-height:132px;
}
.recruiter-data-select:disabled{
  background:rgba(16,16,16,.04);
  color:#7c7c7c;
}
.form-label{color:#414141; font-weight:800;}
.form-text{color:var(--c-muted) !important;}
.alert{
  border:1px solid rgba(16,16,16,.1);
  background:#fff;
  color:var(--c-text);
}

/* Existing utility usage in templates */
.text-white-50{color:var(--c-muted) !important;}
.text-white{color:var(--c-text) !important;}
.link-light{color:var(--c-text) !important;}
.badge.text-bg-dark{
  background:#f1f1f1 !important;
  color:var(--c-text) !important;
  border-color:rgba(16,16,16,.12) !important;
}

.wow-card{
  border:1px solid rgba(16,16,16,.10);
  border-radius:var(--r-lg);
  background:
    radial-gradient(680px 260px at 90% 10%, rgba(216,248,80,.30), transparent 70%),
    linear-gradient(180deg, #ffffff, #fbfde9);
  box-shadow:var(--sh-soft);
}
.wow-title{
  font-size:clamp(24px,2.1vw,34px);
  font-weight:900;
  line-height:1.1;
  color:var(--c-text);
  margin-bottom:8px;
}
.wow-subtitle{
  color:#2b2b2b;
  font-size:clamp(15px,1.1vw,18px);
}
.wow-stats{
  display:grid;
  gap:10px;
}
.wow-chip{
  border:1px solid rgba(16,16,16,.12);
  border-radius:999px;
  background:#fff;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wow-chip span{
  color:var(--c-muted);
  font-size:13px;
  font-weight:600;
}
.wow-chip strong{
  color:var(--c-text);
  font-size:16px;
  font-weight:900;
}

.insight-card{
  border:1px solid rgba(16,16,16,.1);
  border-radius:16px;
  background:#fff;
  padding:14px 16px;
  box-shadow:0 6px 14px rgba(16,16,16,.05);
  transition:transform var(--tr-fast), box-shadow var(--tr-mid), border-color var(--tr-fast);
}
.insight-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.insight-link:hover .insight-card{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(16,16,16,.09);
  border-color:rgba(16,16,16,.18);
}
.insight-label{
  color:var(--c-muted);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.insight-value{
  font-size:1.75rem;
  font-weight:900;
  color:var(--c-text);
  line-height:1.1;
  margin-top:4px;
}
.insight-note{
  color:var(--c-muted);
  font-size:.85rem;
  margin-top:4px;
}
.insight-good{background:linear-gradient(180deg, #fff, #f7fdea);}
.insight-warn{background:linear-gradient(180deg, #fff, #fff7e8);}
.insight-danger{background:linear-gradient(180deg, #fff, #ffefef);}

.insight-line{
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  border:1px solid rgba(16,16,16,.1);
}
.insight-line-good{background:#f7fdea; border-color:#d8ef9a;}
.insight-line-warn{background:#fff7e8; border-color:#f4d17a;}
.insight-line-danger{background:#ffefef; border-color:#f0b1b1;}

.chart-loading{
  position:relative;
}
.chart-skeleton{
  width:100%;
  height:100%;
  min-height:inherit;
  border-radius:14px;
  background:
    linear-gradient(90deg, rgba(16,16,16,.04) 0%, rgba(16,16,16,.09) 45%, rgba(16,16,16,.04) 100%);
  background-size:220% 100%;
  animation:skeletonShift 1.2s linear infinite;
}
@keyframes skeletonShift{
  from{background-position:100% 0;}
  to{background-position:-100% 0;}
}

.reveal-up{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
  transition-delay:var(--reveal-delay, 0ms);
}
.ui-ready .reveal-up{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:576px){
  .hero-wrap{padding:6vh 0 4vh;}
  .hero-card{padding:26px;}
}

.mobile-dock{
  display:none;
}

.install-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:86px;
  z-index:210;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(16,16,16,.14);
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 24px rgba(16,16,16,.12);
  backdrop-filter:blur(10px);
}
.install-banner__text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.install-banner__text strong{
  font-size:13px;
}
.install-banner__text span{
  color:var(--c-muted);
  font-size:12px;
}
.install-banner__actions{
  display:flex;
  gap:8px;
}

.search-overlay{
  position:fixed;
  inset:0;
  z-index:1090;
}
.search-overlay__backdrop{
  position:absolute;
  inset:0;
  background:rgba(16,16,16,.45);
  backdrop-filter:blur(8px);
}
.search-panel{
  position:relative;
  width:min(860px, calc(100% - 20px));
  margin:8vh auto 0;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(16,16,16,.14);
  box-shadow:0 24px 50px rgba(16,16,16,.2);
  overflow:hidden;
}
.search-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(16,16,16,.09);
}
.search-results{
  max-height:58vh;
  overflow:auto;
  padding:8px;
}
.search-results::-webkit-scrollbar{
  width:10px;
}
.search-results::-webkit-scrollbar-thumb{
  background:#d7d7d7;
  border-radius:999px;
  border:2px solid #fff;
}
.search-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(16,16,16,.1);
  border-radius:12px;
  padding:10px 12px;
  text-decoration:none;
  color:#151515;
  margin-bottom:8px;
  background:#fff;
}
.search-item:hover{
  background:#f8fbe9;
}
.search-item__meta{
  color:#707070;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(16,16,16,.12);
  border-radius:999px;
  padding:2px 8px;
}

.period-switch .btn{
  position:relative;
  overflow:hidden;
}
.period-switch .btn.is-going::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  animation:periodSweep .45s ease;
  pointer-events:none;
}
@keyframes periodSweep{
  from{transform:translateX(-120%);}
  to{transform:translateX(120%);}
}
.chart-panel-loading{
  opacity:.72;
  transform:scale(.996);
  transition:opacity var(--tr-fast), transform var(--tr-fast);
}
body.period-loading::before{
  content:"";
  position:fixed;
  left:0;
  top:0;
  height:3px;
  width:100%;
  z-index:500;
  background:linear-gradient(90deg, rgba(216,248,80,.2), rgba(216,248,80,.95), rgba(216,248,80,.2));
  background-size:200% 100%;
  animation:topLoading 1s linear infinite;
}
@keyframes topLoading{
  from{background-position:100% 0;}
  to{background-position:-100% 0;}
}
.search-empty{
  color:#6b6b6b;
  padding:12px;
}
.search-foot{
  border-top:1px solid rgba(16,16,16,.09);
  padding:10px 12px;
  color:#6b6b6b;
  font-size:12px;
}

.mobile-section-tabs{
  display:none;
}

.ceo-recruit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.ceo-recruit-card{
  min-height:100%;
}

@media (min-width: 992px){
  .ceo-recruit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .ceo-recruit-grid__item--leads,
  .ceo-recruit-grid__item--mix{
    grid-column:1 / -1;
  }
}

@media (min-width: 1600px){
  .ceo-recruit-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
  }
  .ceo-recruit-grid__item--leads{
    grid-column:1 / span 2;
  }
  .ceo-recruit-grid__item--partners{
    grid-column:3;
  }
  .ceo-recruit-grid__item--submitted{
    grid-column:1;
  }
  .ceo-recruit-grid__item--mix{
    grid-column:2 / span 2;
  }
}

@media (max-width: 991.98px){
  .workforce-panel__head{
    flex-direction:column;
  }
  .workforce-panel__meta{
    justify-content:flex-start;
  }
  .page-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .quality-kpi{
    width:100%;
    min-width:0;
  }
  .filters-actions{
    justify-content:stretch;
  }
  .filters-actions .btn{
    flex:1 1 0;
    min-width:0;
  }
  .chart-style-switch{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .chart-style-switch--3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .requests-table-wrap{
    min-height:0;
  }
  main.container-fluid{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .navbar .nav-link{
    padding:10px 6px;
    font-weight:700;
  }
  .nav-shell{
    border:none;
    background:transparent;
    padding:0;
  }
  .nav-pill-indicator{
    display:none;
  }
  .nav-pills-wrap{
    width:100%;
  }
  .nav-pill{
    width:100%;
    border-radius:12px;
    justify-content:flex-start;
  }

  .glass-card,
  .wow-card,
  .hero-card,
  .stack-card{
    border-radius:16px;
  }

  .kpi{
    padding:14px;
    border-radius:14px;
  }

  .kpi-value{
    font-size:1.55rem;
  }

  .mini-metric{
    padding:10px 12px;
    border-radius:12px;
  }

  .btn,
  .btn-sm{
    min-height:42px;
    border-radius:999px;
  }

  .form-control,
  .form-select{
    min-height:44px;
    border-radius:12px;
  }

  .table-responsive table{
    min-width:720px;
  }

  .btn-group{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:6px;
    padding-bottom:2px;
  }
  .btn-group .btn{
    white-space:nowrap;
    flex:0 0 auto;
  }

  #timelineChart,
  #weeklyChart,
  #funnelChart,
  #ceoWeeklyChart,
  #ceoReasonsChart,
  #ceoSlaChart,
  #ceoIssuesTrendChart,
  #adminIssuesTrendChart,
  #coordDailyChart{
    height:250px !important;
  }
}

@media (max-width: 767.98px){
  body{
    padding-bottom:84px;
  }

  .wow-title{
    font-size:clamp(20px,7vw,28px);
  }

  .wow-chip{
    padding:9px 12px;
  }
  .impact-hero__grid{
    grid-template-columns:1fr;
  }

  .insight-value{
    font-size:1.45rem;
  }

  .mobile-dock{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:200;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:8px;
    border-radius:18px;
    border:1px solid rgba(16,16,16,.12);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    box-shadow:0 14px 30px rgba(16,16,16,.14);
  }

  .mobile-dock__item{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    border-radius:12px;
    font-size:12px;
    font-weight:800;
    color:var(--c-text);
    background:#fff;
    border:1px solid rgba(16,16,16,.1);
    text-decoration:none;
  }
  .mobile-dock__item.is-active{
    background:var(--c-accent);
    border-color:rgba(16,16,16,.2);
    box-shadow:0 8px 16px rgba(16,16,16,.12);
  }
  .breadcrumb-bar{
    display:none;
  }
  .thanks-strip{
    font-size:12px;
    padding:7px 0;
  }

  .mobile-dock__item:active{
    transform:translateY(1px);
  }

  .mobile-section-tabs{
    position:sticky;
    top:62px;
    z-index:60;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px 2px 10px;
    margin-bottom:4px;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
    backdrop-filter:blur(6px);
  }
  .mobile-section-progress{
    position:absolute;
    left:2px;
    right:2px;
    bottom:0;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--c-accent) var(--p, 0%), rgba(16,16,16,.1) var(--p, 0%));
    pointer-events:none;
  }
  .mobile-section-tab{
    border:1px solid rgba(16,16,16,.12);
    background:#fff;
    border-radius:999px;
    min-height:34px;
    padding:6px 12px;
    font-size:12px;
    font-weight:800;
    color:#303030;
    white-space:nowrap;
  }
  .mobile-section-tab.is-active{
    background:var(--c-accent);
    color:var(--c-text);
    border-color:rgba(16,16,16,.18);
  }

  .mobile-sections [data-mobile-section]{
    scroll-margin-top:112px;
  }

  body.role-factory #request-form{
    order:-2;
  }
  body.role-factory .factory-requests-col{
    order:-1;
  }

  body.role-coordinator #daily-update{
    order:-1;
  }
  body.role-coordinator .coordinator-trend-col{
    order:0;
  }
  body.role-coordinator #coord-request-form{
    order:-3;
  }
  body.role-coordinator #coord-requests{
    order:-2;
  }
  body.role-recruiter #recruit-daily-update{
    order:-2;
  }
  body.role-recruiter .recruiter-trend-col{
    order:-1;
  }
  body.role-sales #sales-daily-update{
    order:-2;
  }
  body.role-sales .sales-trend-col{
    order:-1;
  }

  body.role-admin .role-admin-sections .row[data-section-title="Обзор"]{
    order:-2;
  }
  body.role-ceo .role-ceo-sections .row[data-section-title="Сигналы"]{
    order:-1;
  }

  .table-responsive{
    overflow:visible;
  }
  .mobile-cards-table{
    min-width:0 !important;
    border-collapse:separate;
    border-spacing:0 10px;
  }
  .mobile-cards-table thead{
    display:none;
  }
  .mobile-cards-table tbody,
  .mobile-cards-table tr,
  .mobile-cards-table td{
    display:block;
    width:100%;
  }
  .mobile-cards-table tr{
    border:1px solid rgba(16,16,16,.12);
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 14px rgba(16,16,16,.06);
    padding:8px 0;
    margin-bottom:10px;
  }
  .mobile-cards-table td{
    border:none !important;
    padding:9px 12px !important;
    text-align:left !important;
  }
  .mobile-cards-table td::before{
    content:attr(data-label);
    display:block;
    color:var(--c-muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:2px;
  }

  .install-banner{
    bottom:86px;
  }
}

@media (min-width: 768px){
  .install-banner{
    display:none !important;
  }
}

/* Design reset: cleaner B2B baseline */
:root{
  --c-bg:#F5F7FA;
  --c-surface:#FFFFFF;
  --c-muted:#596579;
  --c-border:rgba(16,16,16,.10);
  --sh-soft:0 8px 20px rgba(16,16,16,.06);
  --sh-card:0 4px 14px rgba(16,16,16,.05);
  --r-lg:14px;
  --r-xl:16px;
}

.app-bg{
  background:var(--c-bg);
}

.glass-nav{
  backdrop-filter:none;
  background:#fff !important;
  border-bottom:1px solid rgba(16,16,16,.10);
}

body.role-admin .glass-nav,
body.role-ceo .glass-nav,
body.role-factory .glass-nav,
body.role-coordinator .glass-nav,
body.role-recruiter .glass-nav,
body.role-sales .glass-nav{
  background:#fff !important;
}

.nav-shell{
  border:none;
  background:transparent;
  box-shadow:none !important;
  padding:0;
}

.nav-pill{
  min-height:30px;
  padding:4px 10px !important;
  font-size:12px;
  background:#fff;
  border:1px solid rgba(16,16,16,.10);
}

.nav-pill.is-active{
  background: rgba(216,248,80,.26);
  /* Keep contrast: active pill sits on a light background */
  color:var(--c-text) !important;
  border-color: rgba(120,160,30,.28);
  box-shadow:none;
}

.nav-icon,
.nav-icon--home,
.nav-icon--factory,
.nav-icon--requests,
.nav-icon--quality,
.nav-icon--login{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#A9B3C2;
}

.nav-pill.is-active .nav-icon{
  background:var(--c-text);
}

.role-chip{
  background:#fff;
  border-color:rgba(16,16,16,.14);
}

.nav-pill-indicator{
  display:none;
}

.glass-card{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  border:1px solid var(--c-border);
}

.glass-card::before{
  display:none;
}

.impact-hero,
.wow-card,
.hero-card,
.stack-card{
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--sh-card);
  border:1px solid var(--c-border);
}

.kpi,
.insight-card,
.mini-metric{
  border-radius:12px;
  box-shadow:none;
  border:1px solid var(--c-border);
  background:#fff;
}

.kpi:hover,
.insight-link:hover .insight-card{
  transform:none;
  box-shadow:none;
}

.page-head__title{
  font-size:clamp(22px,1.8vw,30px);
}

.page-head__sub{
  max-width:70ch;
}

/* CEO premium center screens */
.ceo-center-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ceo-quickbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.admin-quickbar{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.ceo-quickbar__item{
  border:1px solid rgba(16,16,16,.12);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,252,.92));
  padding:10px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.ceo-quickbar__item span{
  color:var(--c-muted);
  font-size:12px;
  font-weight:700;
}
.ceo-quickbar__item strong{
  color:#151515;
  font-size:1rem;
  font-weight:900;
  line-height:1.1;
}
.recruit-builder-checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.recruit-builder-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(16,16,16,.14);
  border-radius:999px;
  background:#fff;
  padding:6px 12px;
}
.recruit-builder-check .form-check-input{
  margin:0;
}
.recruit-builder-check .form-check-label{
  font-size:13px;
  font-weight:700;
  color:#2f2f2f;
}
.ceo-filter-grid .filters-actions,
.center-filter-grid .filters-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ceo-filter-grid .filters-actions .btn,
.center-filter-grid .filters-actions .btn{
  min-width:0;
  flex:0 1 auto;
}
.table-premium{
  --bs-table-bg:#fff;
  --bs-table-hover-bg:#f5f8fb;
  --bs-table-border-color:rgba(16,16,16,.1);
}
.table-premium thead th{
  background:#f3f6fa;
  color:#3e4a5d;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:800;
  border-bottom:1px solid rgba(16,16,16,.12);
}
.table-premium tbody td{
  border-color:rgba(16,16,16,.08);
}
.quality-table-wrap,
.requests-table-wrap{
  min-height:44vh;
}
.empty-ok{
  min-height:44vh;
}

@media (max-width: 991.98px){
  .ceo-quickbar{
    grid-template-columns:1fr;
  }
  .admin-quickbar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ceo-filter-grid .filters-actions{
    justify-content:stretch;
  }
  .ceo-filter-grid .filters-actions .btn,
  .center-filter-grid .filters-actions .btn{
    flex:1 1 auto;
  }
}

@media (max-width: 575.98px){
  .admin-quickbar{
    grid-template-columns:1fr;
  }
}

.factory-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.factory-metric-card{
  border:1px solid rgba(16,16,16,.12);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  padding:12px;
}
.factory-metric-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.factory-metric-card__head h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}
.factory-metric-card__meta{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  color:var(--c-muted);
  font-size:13px;
}
.factory-metric-card__meta strong{
  color:#171717;
}
.factory-metric-card__bar{
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background:rgba(16,16,16,.1);
  overflow:hidden;
}
.factory-metric-card__bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f08979,#dc5c4a);
}
.factory-metric-card__foot{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--c-muted);
}
.factory-metric-card__foot strong{
  color:#821f12;
  font-size:14px;
  font-weight:900;
}

@media (max-width: 991.98px){
  .factory-cards-grid{
    grid-template-columns:1fr;
  }
}


.filters-bar{
  padding:12px !important;
}

.filters-actions{
  gap:6px;
}

.filters-actions .btn{
  min-width:0;
}

.btn-glow{
  box-shadow:none;
}

.table-dark thead th{
  background:#EEF2F6;
  color:#2E3A4D;
  border-bottom:1px solid rgba(16,16,16,.10);
}

.table-dark td{
  border-color:rgba(16,16,16,.08);
}

.empty-ok{
  min-height:42vh;
}

.thanks-strip{
  display:none;
}

/* data-quality style A/B */
.style-switch{
  display:flex;
  align-items:center;
  gap:8px;
}
.style-switch__label{
  font-size:12px;
  font-weight:700;
  color:#4f5b6b;
  margin-right:2px;
}
.style-switch .btn.is-active{
  background: rgba(216,248,80,.26);
  /* Keep contrast: active button sits on a light background */
  color:var(--c-text) !important;
  border-color:#101010 !important;
}

/* premium dashboard system */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(16,16,16,.10);
  border-radius:16px;
  background:
    radial-gradient(620px 170px at 86% -18%, rgba(216,248,80,.20), transparent 64%),
    linear-gradient(180deg, #fff, #f9fbf2);
  box-shadow:0 10px 24px rgba(16,16,16,.08);
}
.page-head--compact{
  padding:12px 14px;
}
.page-head__actions{
  align-items:center;
  justify-content:flex-end;
}

.impact-hero{
  border:1px solid rgba(16,16,16,.10);
  box-shadow:0 10px 22px rgba(16,16,16,.08);
}
.impact-hero__item{
  border-color:rgba(16,16,16,.12);
  background:linear-gradient(180deg, #fff, #fbfdf4);
}
.kpi,
.insight-card{
  border-radius:16px;
}
.kpi{
  min-height:140px;
  border:1px solid rgba(16,16,16,.11);
  box-shadow:0 8px 18px rgba(16,16,16,.07);
}

.board-switch{
  position:sticky;
  top:74px;
  z-index:48;
  padding:8px 10px;
  border:1px solid rgba(16,16,16,.12);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px rgba(16,16,16,.08);
  backdrop-filter:blur(8px);
}
.board-switch .btn{
  min-width:118px;
  border-radius:999px;
  font-weight:800;
}

.table-premium{
  --bs-table-bg:#fff;
  --bs-table-striped-bg:#fbfbfb;
  --bs-table-hover-bg:#f6f8ee;
  --bs-table-border-color:rgba(16,16,16,.10);
  --bs-table-color:var(--c-text);
  border-collapse:separate;
  border-spacing:0;
}
.table-premium thead th{
  color:#3f3f3f;
  font-weight:900;
  letter-spacing:.02em;
  font-size:.78rem;
  text-transform:uppercase;
  background:linear-gradient(180deg, #f4f7e7, #edf2dd);
  border-bottom:1px solid rgba(16,16,16,.16);
  position:sticky;
  top:0;
  z-index:1;
}
.table-premium td{
  color:var(--c-text);
  border-color:rgba(16,16,16,.08);
}
.table-premium tbody tr:hover td{
  background:#f7faee;
}

.table-empty{
  text-align:center;
  color:var(--c-muted) !important;
  padding:26px 10px !important;
  font-weight:600;
}

.risk-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:800;
}
.risk-green{
  background:rgba(127,191,58,.16);
  color:#2f6519;
  border-color:rgba(127,191,58,.45);
}
.risk-yellow{
  background:rgba(212,157,20,.16);
  color:#7a5a07;
  border-color:rgba(212,157,20,.45);
}
.risk-red{
  background:rgba(220,92,74,.16);
  color:#7e2015;
  border-color:rgba(220,92,74,.45);
}

#ceoModeExecutive .kpi,
#ceoModeOperations .card.glass-card,
#ceoModeGrowth .card.glass-card{
  min-height:100%;
}

.section-head{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#4d4d4d;
}

@media (max-width: 991.98px){
  .board-switch{
    top:64px;
    padding:7px 8px;
  }
  .board-switch .btn{
    min-width:96px;
  }
  .page-head__actions{
    width:100%;
  }
}

.dq-style-scope[data-dq-style="strict"] .page-head,
.dq-style-scope[data-dq-style="strict"] .filters-bar,
.dq-style-scope[data-dq-style="strict"] .quality-table-wrap{
  box-shadow:none;
  border-color:rgba(16,16,16,.12);
}
.dq-style-scope[data-dq-style="strict"] .quality-kpi{
  background:#fff;
  border-color:rgba(16,16,16,.16);
}

.dq-style-scope[data-dq-style="premium"] .page-head{
  padding:14px 16px;
  border:1px solid rgba(16,16,16,.10);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f8fbef);
}
.dq-style-scope[data-dq-style="premium"] .quality-kpi{
  box-shadow:0 8px 20px rgba(16,16,16,.08);
  border-color:rgba(16,16,16,.10);
}
.dq-style-scope[data-dq-style="premium"] .filters-bar{
  background:linear-gradient(180deg,#fff,#fafcff);
  box-shadow:0 8px 22px rgba(16,16,16,.08);
}
.dq-style-scope[data-dq-style="premium"] .quality-table-wrap{
  box-shadow:0 10px 24px rgba(16,16,16,.08);
}
.dq-style-scope[data-dq-style="premium"] .table-dark thead th{
  background:#e9eff5;
}

.workforce-panel{
  background:
    radial-gradient(540px 160px at 82% -12%, rgba(216,248,80,.26), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,251,255,.88));
}
.workforce-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.workforce-panel__eyebrow{
  font-size:12px;
  font-weight:800;
  color:#5a677c;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:2px;
}
.workforce-panel__title{
  font-size:1.3rem;
  line-height:1.15;
  font-weight:900;
  color:#192234;
}
.workforce-panel__sub{
  margin-top:4px;
  color:#617088;
  font-size:.92rem;
}
.workforce-panel__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.workforce-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(255,255,255,.72);
  color:#223047;
  font-size:12px;
  font-weight:800;
}
.workforce-chip.is-up{
  background:rgba(223,244,178,.72);
  border-color:#c2dd86;
  color:#2b4f18;
}
.workforce-chip.is-down{
  background:rgba(255,236,236,.8);
  border-color:#efbbbb;
  color:#6d1f1f;
}

.progress-panel{
  background:
    radial-gradient(360px 120px at 90% -10%, rgba(122,183,255,.20), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,251,255,.88));
}
.progress-panel__eyebrow{
  font-size:12px;
  font-weight:800;
  color:#5a677c;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:2px;
}
.progress-panel__title{
  font-size:1.05rem;
  line-height:1.2;
  font-weight:900;
  color:#192234;
}
.progress-panel__sub{
  margin-top:4px;
  margin-bottom:8px;
  color:#617088;
  font-size:.9rem;
}
.progress-panel__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

/* Global premium lock */
:root{
  --c-bg:#f3f6fb;
  --c-surface:#ffffff;
  --c-muted:#556277;
  --c-border:rgba(15,22,34,.14);
  --sh-soft:0 16px 38px rgba(15,22,34,.10);
  --sh-card:0 10px 28px rgba(15,22,34,.08);
}

.app-bg{
  background:
    radial-gradient(920px 460px at -5% -8%, rgba(216,248,80,.30), transparent 58%),
    radial-gradient(820px 420px at 108% 0%, rgba(122,183,255,.16), transparent 54%),
    linear-gradient(180deg, #f8fbff, #eef3f9);
}

.glass-nav{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,22,34,.10);
}

.nav-shell{
  border:1px solid rgba(15,22,34,.10);
  border-radius:14px;
  padding:5px 7px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 22px rgba(15,22,34,.08) !important;
}

.nav-pill{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,22,34,.12);
}

.nav-pill.is-active{
  background:linear-gradient(180deg, #101418, #1a2230);
  border-color:#101418;
  box-shadow:0 10px 24px rgba(12,18,28,.26);
  /* Dark active pill needs a light foreground for contrast */
  color:#fff !important;
}

.nav-pill.is-active .nav-icon{ background:#fff; }

.glass-card{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(7px);
  border:1px solid rgba(15,22,34,.12);
  box-shadow:var(--sh-card);
}

.glass-card::before{
  display:block;
  opacity:.82;
  height:2px;
}

.btn-glow{
  background:linear-gradient(180deg,#dcff5f,#cde94f);
  border:1px solid rgba(15,22,34,.14);
  box-shadow:0 10px 22px rgba(188,220,64,.32);
}

.btn-outline-light{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(8px);
  border-color:rgba(15,22,34,.14) !important;
  color:#1f2a3b !important;
}

.btn-outline-light:hover{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(15,22,34,.22) !important;
}

.table-dark thead th{
  background:rgba(235,241,249,.92);
  color:#243247;
}

.impact-hero,
.wow-card,
.hero-card,
.stack-card{
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,251,255,.86));
  border:1px solid rgba(15,22,34,.12);
  box-shadow:var(--sh-soft);
}

.thanks-strip{
  display:none;
}

/* PREMIUM LIME v2 OVERRIDES */
:root{
  --c-accent:#D8F850;
  --c-bg:#FFFFFF;
  --c-surface:#F7F8FA;
  --c-border:rgba(16,16,16,.10);
}

.thanks-strip{
  display:block;
}

.btn-glow{
  border:1px solid rgba(16,16,16,.12);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(216,248,80,1), rgba(216,248,80,.78));
  color:var(--c-text);
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 10px 18px rgba(216,248,80,.22);
}
.btn-glow:hover{
  filter:brightness(.98);
  color:var(--c-text);
  box-shadow:0 14px 24px rgba(216,248,80,.22);
}
.btn-glow:active{
  transform:translateY(1px);
}

.table-premium{
  --bs-table-bg:#fff;
  --bs-table-striped-bg:#fcfcfc;
  --bs-table-hover-bg:#f8fbe9;
  --bs-table-border-color:rgba(16,16,16,.10);
  --bs-table-color:var(--c-text);
  border-collapse:separate;
  border-spacing:0;
}
.table-premium thead th{
  color:#4b4b4b;
  font-weight:900;
  letter-spacing:.02em;
  font-size:.82rem;
  text-transform:uppercase;
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(180deg, #fbfde9, #ffffff);
  border-bottom:1px solid rgba(16,16,16,.12);
}
.table-premium td{
  color:var(--c-text);
  border-color:rgba(16,16,16,.08);
}
.table-premium tbody tr:hover td{
  background:var(--bs-table-hover-bg);
}

/* Density toggle */
body.density-compact .table-premium td,
body.density-compact .table-premium th{padding-top:.45rem !important; padding-bottom:.45rem !important;}
body.density-compact .kpi{padding:1.05rem 1.1rem;}
body.density-compact .card-premium .card-body{padding:1.05rem 1.1rem;}

/* Pro Tables Pack */
.table-sticky thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
}

body.density-compact .table-premium{
  font-size: .92rem;
}

.table-premium .badge{font-weight: 600;}

.btn.is-saved{filter:brightness(1.05);}
.table-empty{
  text-align:center;
  padding:22px 14px !important;
  color:var(--c-muted) !important;
  font-weight:800;
  background:linear-gradient(180deg, #fff, #fbfcf6);
}

.chart-style-switch__btn{
  min-height:38px;
}

/* --- Quick Add (kid-friendly) --- */
.quick-add-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.quick-add-card{
  border:1px solid rgba(16,16,16,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--sh-card);
  padding:14px;
}
.quick-add-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.step-badge{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  border:1px solid rgba(16,16,16,.10);
  background:linear-gradient(180deg,#fff,#f3f7ff);
}
.quick-add-card__title{ margin:0;font-size:16px;font-weight:900; }
.quick-add-card__sub{ margin-top:4px;color:var(--c-muted);font-size:13px; }

.quick-field .form-label{
  font-size:12px;font-weight:800;color:#3e4a5d;
  text-transform:uppercase;letter-spacing:.03em;
}
.quick-field .form-control,.quick-field .form-select{
  border-radius:12px;padding:10px 12px;font-weight:700;
}
.quick-hint{ margin-top:6px;font-size:12px;color:var(--c-muted); }

.quick-advanced{
  margin-top:10px;border-top:1px dashed rgba(16,16,16,.14);padding-top:10px;
}
.quick-advanced summary{ cursor:pointer;font-weight:800;color:#2f3a4b; }

@media (max-width: 991.98px){
  .quick-add-grid{ grid-template-columns:1fr; }
}

/* Coordinator apartment redesign */
.apartment-dashboard{--space:8px;}
.apartment-summary__title{font-size:26px; line-height:1.2; font-weight:900; margin:0;}

.apartment-summary__line2 .summary-kpi{
  background:linear-gradient(180deg, #ffffff, #f8faf4);
  border:1px solid rgba(16,16,16,.10);
  border-radius:12px;
  padding:12px;
  min-height:88px;
  box-shadow:0 10px 18px rgba(16,16,16,.04);
}
.summary-kpi__label{font-size:12px; color:var(--c-muted); margin-bottom:4px; font-weight:800; letter-spacing:.02em;}
.summary-kpi__value{font-size:24px; line-height:1.1; font-weight:900; font-variant-numeric:tabular-nums; color:var(--c-text);}
.summary-kpi__value.small-value{font-size:14px; font-weight:800;}
.summary-kpi__sub{font-size:12px; color:var(--c-muted); margin-top:4px;}
.summary-kpi__value.is-negative{color:#cc3a32;}

.finance-kpi{
  background:linear-gradient(180deg, #ffffff, #f8faf4);
  border:1px solid rgba(16,16,16,.10);
  border-radius:12px;
  padding:14px;
  min-height:92px;
  box-shadow:0 10px 18px rgba(16,16,16,.04);
}
.finance-kpi__label{font-size:12px; color:var(--c-muted); margin-bottom:6px; font-weight:800; letter-spacing:.02em;}
.finance-kpi__value{font-size:22px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--c-text);}
.finance-kpi__value span{font-size:12px; color:var(--c-muted); font-weight:700;}
.finance-kpi__value.is-negative{color:#cc3a32;}
.finance-kpi--net .finance-kpi__value{font-size:26px;}

.kpi-card{
  background:linear-gradient(180deg, #ffffff, #f8faf4);
  border:1px solid rgba(16,16,16,.10);
  border-radius:12px;
  padding:14px;
  min-height:92px;
  box-shadow:0 10px 18px rgba(16,16,16,.04);
}
.kpi-card .kpi-label{font-size:12px; color:var(--c-muted); margin-bottom:6px; font-weight:800; letter-spacing:.02em;}
.kpi-card .kpi-value{font-size:22px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--c-text);}
.kpi-card .kpi-sub{font-size:12px; color:var(--c-muted); margin-top:4px;}

.risk-action-card{border-color:rgba(255,193,7,.35) !important; background:rgba(255,193,7,.07);}

.occupancy-room{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,244,.94));
  border:1px solid rgba(16,16,16,.10);
  border-radius:14px;
  padding:12px;
  box-shadow:0 12px 22px rgba(16,16,16,.05);
}
.occupancy-room:hover{border-color:rgba(216,248,80,.75); box-shadow:0 16px 26px rgba(16,16,16,.06);}
.occupancy-legend{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.occupancy-legend__item{font-size:12px; color:var(--c-text); display:inline-flex; align-items:center; gap:8px;}
.occupancy-legend__dot{width:10px; height:10px; border-radius:999px; display:inline-block;}
.occupancy-legend__dot--occupied{background:#10b981;}
.occupancy-legend__dot--free{background:transparent; border:1px dashed rgba(16,16,16,.45);}

.occupancy-meter{
  height:8px;
  border-radius:999px;
  background:rgba(16,16,16,.10);
  overflow:hidden;
}
.occupancy-meter__bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #9bd61f 0%, #d8f850 100%);
}

.bed-chips{display:flex; flex-wrap:wrap; gap:6px;}
.bed-chip{display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:4px 10px; border-radius:999px; font-size:12px; text-decoration:none;}
.bed-chip--occupied{
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.35);
  color:#0f3c28;
  font-weight:800;
}
.bed-chip--free{
  background:rgba(16,16,16,.03);
  border:1px dashed rgba(16,16,16,.25);
  color:var(--c-muted);
  min-width:28px;
  font-weight:900;
}
.bed-chip--free:hover{color:var(--c-text); border-color:rgba(216,248,80,.85); background:rgba(216,248,80,.15);}

.apartment-dashboard .nav-tabs{border-bottom:1px solid rgba(16,16,16,.10); gap:6px;}
.apartment-dashboard .nav-tabs .nav-link{
  border:1px solid rgba(16,16,16,.12);
  color:var(--c-muted);
  border-radius:10px 10px 0 0;
  padding:.45rem .8rem;
  background:rgba(255,255,255,.65);
}
.apartment-dashboard .nav-tabs .nav-link:hover{background:#f6f7ec;}
.apartment-dashboard .nav-tabs .nav-link.active{
  background:rgba(216,248,80,.22);
  border-color:rgba(216,248,80,.65);
  color:var(--c-text);
}
.apartment-dashboard .table-premium thead th{font-size:12px; color:var(--c-muted);}
.apartment-dashboard .table-premium tbody td{padding-top:.72rem; padding-bottom:.72rem;}
.apartment-dashboard .table-premium tbody tr:nth-child(2n){background:rgba(16,16,16,.02);}

#paymentCategoryFilters .btn.is-active{
  background:rgba(216,248,80,.24);
  border-color:rgba(216,248,80,.65);
  color:var(--c-text);
}

@media (max-width:991.98px){
  .apartment-summary__title{font-size:22px;}
  .summary-kpi__value{font-size:21px;}
  .finance-kpi__value{font-size:20px;}
}
/* Coordinator payroll + accounting redesign */
.payroll-redesign .payroll-kpi{
  background:linear-gradient(180deg, #ffffff, #f8faf4);
  border:1px solid rgba(16,16,16,.10);
  border-radius:12px;
  padding:12px;
  min-height:88px;
  box-shadow:0 10px 18px rgba(16,16,16,.04);
}
.payroll-kpi__label{font-size:12px; color:var(--c-muted); margin-bottom:4px; font-weight:800; letter-spacing:.02em;}
.payroll-kpi__value{font-size:24px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--c-text);}
.payroll-kpi__value.is-negative{color:#cc3a32;}
.payroll-sticky-actions{position:sticky; top:70px; z-index:7;}
.payroll-redesign .payroll-table td,.payroll-redesign .payroll-table th{padding-top:.68rem; padding-bottom:.68rem;}
.payroll-redesign .payroll-table tbody tr:nth-child(2n){background:rgba(16,16,16,.02);}

/* Payroll table columns: prevent "empty" look when controls are squeezed */
.payroll-redesign .payroll-table-card{ overflow:visible; }
.payroll-table-wrap{ overflow-x:auto; padding-bottom:.65rem; -webkit-overflow-scrolling:touch; }

/* Let the table expand to its real width and scroll horizontally instead of squeezing controls */
.payroll-redesign .payroll-table{ width:max-content; min-width:100%; }

/* Apply min-width on BOTH headers and cells (Bootstrap may ignore only-TH widths) */
.payroll-redesign .payroll-table .col-check{ width:48px; min-width:48px; }
.payroll-redesign .payroll-table .col-worker{ min-width:280px; }
.payroll-redesign .payroll-table .col-tag{ min-width:190px; }
.payroll-redesign .payroll-table .col-rate{ min-width:140px; }
.payroll-redesign .payroll-table .col-hours{ min-width:190px; }
.payroll-redesign .payroll-table .col-gross{ min-width:150px; }
.payroll-redesign .payroll-table .col-housing{ min-width:140px; }
.payroll-redesign .payroll-table .col-transport{ min-width:140px; }
.payroll-redesign .payroll-table .col-net{ min-width:160px; }
.payroll-redesign .payroll-table .col-status{ min-width:190px; }
.payroll-redesign .payroll-table .col-payment{ min-width:460px; }
.payroll-redesign .payroll-table .col-actions{ width:130px; min-width:130px; }

/* Sticky first columns: keep checkbox + worker visible on horizontal scroll */
.payroll-redesign .payroll-table th.col-check,
.payroll-redesign .payroll-table td.col-check{
  position:sticky;
  left:0;
  z-index:6;
  background:rgba(248,248,248,.96);
}
.payroll-redesign .payroll-table th.col-worker,
.payroll-redesign .payroll-table td.col-worker{
  position:sticky;
  left:48px; /* equals .col-check width */
  z-index:5;
  background:inherit;
  box-shadow: 14px 0 18px rgba(16,16,16,.06);
}
.payroll-redesign .payroll-table th.col-worker{ background:rgba(248,248,248,.96); z-index:7; }

/* Make selected rows immediately visible */
.payroll-redesign .payroll-table tr.is-selected td{
  background:rgba(216,248,80,.14) !important;
}

/* All controls inside the payroll table must stay readable */
.payroll-redesign .payroll-table .form-control,
.payroll-redesign .payroll-table .form-select{
  width:100%;
  min-width:120px;
}

/* Exception: payment cell uses flex layout (method + date) */
.payroll-payment-wrap .form-select,
.payroll-payment-wrap .form-control{
  width:auto;
}

/* Status dropdown should never collapse to just an arrow */
.payroll-redesign .payroll-td-status .payroll-status-select{
  min-width:160px;
  width:100%;
}

/* Payment method + paid date: keep readable and allow wrapping */
.payroll-payment-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}
.payroll-payment-wrap .form-select{
  min-width:170px;
  flex:1 1 170px;
}
.payroll-payment-wrap .form-control{
  min-width:150px;
  flex:1 1 150px;
}

/* Paid amount input inside payout cell */
.payroll-paid-amount{
  flex:1 1 190px;
  min-width:190px;
}
.payroll-paid-amount .input-group-text{
  font-weight:900;
}
.payroll-paid-amount .form-control{
  min-width:120px;
}

/* Payroll status: make dropdown always readable (no "white on white") */
.payroll-status-select{
  font-weight:900;
  border-radius:999px !important;
  padding-left:.78rem !important;
  padding-right:2.2rem !important;
  min-width:140px;
  color:#1f2937;
}
.payroll-status-select.is-draft{
  background:rgba(108,117,125,.18) !important;
  border-color:rgba(108,117,125,.35) !important;
}
.payroll-status-select.is-ready{
  background:rgba(255,193,7,.25) !important;
  border-color:rgba(255,193,7,.55) !important;
}
.payroll-status-select.is-paid{
  background:rgba(25,135,84,.18) !important;
  border-color:rgba(25,135,84,.45) !important;
  color:#0f5132;
}

/* Payroll tag dropdown (OK / Needs check) */
.payroll-tag-select{
  font-weight:900;
  border-radius:999px !important;
  padding-left:.78rem !important;
  padding-right:2.2rem !important;
  min-width:160px;
  color:#1f2937;
}
.payroll-tag-select.is-ok{
  background:rgba(25,135,84,.14) !important;
  border-color:rgba(25,135,84,.40) !important;
  color:#0f5132;
}
.payroll-tag-select.is-issue{
  background:rgba(220,53,69,.14) !important;
  border-color:rgba(220,53,69,.40) !important;
  color:#842029;
}


/* Payroll: performance + details row (lazy) */
.payroll-redesign .table-sticky thead th{ backdrop-filter:none !important; }
.payroll-details-row[hidden]{ display:none; }
.payroll-details-box{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(16,16,16,.10);
  border-radius:16px;
  box-shadow:0 12px 24px rgba(16,16,16,.06);
}
/* Slightly clearer column separation */
.payroll-redesign .payroll-table td,
.payroll-redesign .payroll-table th{ border-right:1px solid rgba(16,16,16,.06); }
.payroll-redesign .payroll-table td:last-child,
.payroll-redesign .payroll-table th:last-child{ border-right:none; }

.accounting-redesign .accounting-filters{position:sticky; top:70px; z-index:7;}
.accounting-redesign .kpi-card{min-height:102px;}
.accounting-journal-card{height:calc(100vh - 220px); min-height:480px; display:flex; flex-direction:column;}
.accounting-journal-table-wrap{overflow:auto;}
.accounting-journal-table td,.accounting-journal-table th{padding-top:.64rem; padding-bottom:.64rem;}
.accounting-journal-table tbody tr:nth-child(2n){background:rgba(16,16,16,.02);}
@media (max-width:1199.98px){
  .payroll-sticky-actions,.accounting-redesign .accounting-filters{position:static;}
  .accounting-journal-card{height:auto; min-height:0;}
}
/* --- Final guardrails (avoid accidental overrides from legacy CSS below) --- */
body.app-bg .sidebar-link{ border-radius:16px !important; }
body.app-bg .sidebar-link.is-active{ background:rgba(216,248,80,.20) !important; }
body.app-bg .btn-outline-soft{ border-radius:14px !important; }
body.app-bg .form-control,
body.app-bg .form-select{ border-radius:14px !important; }

/* =========================================================
   Extra polish (UI only): financial typography, toast flashes,
   premium sidebar grouping, sticky table headers.
   ========================================================= */

/* Financial readability */
.num, .money{ font-variant-numeric: tabular-nums; }
.money{ white-space:nowrap; }
.text-money{ font-variant-numeric: tabular-nums; }

/* Sticky table header helper (opt-in) */
.table-sticky thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(248,248,248,.96);
  backdrop-filter:saturate(140%) blur(6px);
}
.table-sticky{ border-collapse:separate; border-spacing:0; }

/* Sidebar grouping labels */
.sidebar-group-label{
  margin:14px 10px 6px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(16,16,16,.46);
}
.sidebar-sep{ opacity:.7; }

/* Toast-style flash messages (same data, better presentation) */
.toast-stack{ position:fixed; top:78px; right:18px; z-index:1080; display:flex; flex-direction:column; gap:10px; max-width:420px; }
.toast-item{
  border-radius:18px;
  border:1px solid rgba(16,16,16,.12);
  box-shadow:0 18px 40px rgba(16,16,16,.12);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.toast-item.is-hiding{ opacity:0; transform: translateY(-6px); }
.toast-dot{ width:10px; height:10px; border-radius:99px; margin-top:4px; flex:0 0 auto; background:rgba(16,16,16,.35); }
.toast-item.is-success .toast-dot{ background:rgba(127,191,58,.95); }
.toast-item.is-warning .toast-dot{ background:rgba(212,157,20,.95); }
.toast-item.is-danger  .toast-dot{ background:rgba(220,92,74,.95); }
.toast-item.is-info    .toast-dot{ background:rgba(63,114,182,.95); }
.toast-body{ flex:1 1 auto; }
.toast-title{ font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(16,16,16,.62); margin:0 0 2px; }
.toast-msg{ margin:0; color:rgba(16,16,16,.86); line-height:1.35; }
.toast-close{ border:0; background:transparent; font-weight:900; color:rgba(16,16,16,.45); line-height:1; padding:2px 6px; border-radius:10px; }
.toast-close:hover{ background:rgba(16,16,16,.06); color:rgba(16,16,16,.70); }
@media (max-width: 991.98px){
  .toast-stack{ left:12px; right:12px; top:68px; max-width:none; }
}

/* =========================================================
   Light theme overrides (Coordinator screens)
   Fixes: too-acid greens, white-on-white text, квартиры colors.
   ========================================================= */
body.app-bg{
  --accent: #b7e84b;
  --accent-2: #d7f8a0;
  --text: rgba(16,16,16,.92);
  --muted: rgba(16,16,16,.58);
  --border: rgba(16,16,16,.10);
  --card: rgba(255,255,255,.92);
}

body.app-bg .glass-card{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 18px 40px rgba(16,16,16,.10) !important;
}
body.app-bg .text-white-50,
body.app-bg .text-white-75{ color: var(--muted) !important; }
body.app-bg .divider-soft{ background: rgba(16,16,16,.08) !important; }

/* Buttons */
body.app-bg .btn-glow{
  background: linear-gradient(180deg, var(--accent) 0%, #c9f266 100%) !important;
  color: #111 !important;
  border: 1px solid rgba(120,160,30,.35) !important;
  box-shadow: 0 16px 34px rgba(120,160,30,.22) !important;
}
body.app-bg .btn-glow:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* Apartments / housing: chips, tabs, meters */
body.app-bg .occupancy-meter{ background: rgba(16,16,16,.07) !important; }
body.app-bg .occupancy-meter__bar{ background: linear-gradient(90deg, var(--accent) 0%, #e8ffac 100%) !important; }
body.app-bg .bed-chip--occupied{ background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.30) !important; color: rgba(16,16,16,.86) !important; }
body.app-bg .bed-chip--free{ background: rgba(16,16,16,.03) !important; border-color: rgba(16,16,16,.22) !important; color: rgba(16,16,16,.74) !important; }
body.app-bg .bed-chip--free:hover{ background: rgba(16,16,16,.05) !important; border-color: rgba(120,160,30,.35) !important; }

body.app-bg .apartment-dashboard .nav-tabs{ border-bottom:1px solid rgba(16,16,16,.10) !important; }
body.app-bg .apartment-dashboard .nav-tabs .nav-link{ border:1px solid rgba(16,16,16,.12) !important; color: rgba(16,16,16,.72) !important; background: rgba(255,255,255,.75) !important; }
body.app-bg .apartment-dashboard .nav-tabs .nav-link.active{ background: rgba(183,232,75,.22) !important; border-color: rgba(120,160,30,.35) !important; color: rgba(16,16,16,.92) !important; }
body.app-bg .apartment-dashboard .table-premium thead th{ color: rgba(16,16,16,.62) !important; }

/* Softer badges for profit */
body.app-bg .badge.bg-danger{ background: rgba(220,92,74,.14) !important; color: rgba(120,20,10,.92) !important; border: 1px solid rgba(220,92,74,.22) !important; }
body.app-bg .badge.bg-success{ background: rgba(16,185,129,.14) !important; color: rgba(10,85,55,.92) !important; border: 1px solid rgba(16,185,129,.22) !important; }
body.app-bg .badge.bg-warning{ border: 1px solid rgba(212,157,20,.18) !important; }

/* =========================================================
   Sidebar palette (match marketing site): lime accent + soft
   active state without white text.
   ========================================================= */
body.app-bg{
  background: radial-gradient(1200px 600px at 12% 0%, rgba(216,248,80,.20) 0%, rgba(216,248,80,0) 55%),
              radial-gradient(900px 520px at 100% 10%, rgba(111,208,224,.12) 0%, rgba(111,208,224,0) 55%),
              #f7f9fb;
}
body.app-bg .app-sidebar{
  background: rgba(255,255,255,.88) !important;
  border-right: 1px solid rgba(16,16,16,.08) !important;
}
body.app-bg .sidebar-link{ position:relative; color: rgba(16,16,16,.86) !important; }
body.app-bg .sidebar-link:hover{
  background: rgba(216,248,80,.16) !important;
  border-color: rgba(16,16,16,.12) !important;
}
body.app-bg .sidebar-link.is-active{
  background: rgba(216,248,80,.26) !important;
  color: #101010 !important;
  border-color: rgba(120,160,30,.28) !important;
  box-shadow: 0 14px 28px rgba(16,16,16,.06) !important;
}
body.app-bg .sidebar-link.is-active::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:99px;
  background: rgba(16,16,16,.82);
}
body.app-bg .side-ico{
  background: rgba(216,248,80,.10) !important;
  border-color: rgba(16,16,16,.12) !important;
}
body.app-bg .sidebar-link.is-active .side-ico{
  background: rgba(216,248,80,.62) !important;
  color:#101010 !important;
  border-color: rgba(120,160,30,.28) !important;
}

/* Accounting (coordinator): cleaner KPI tiles like on the main site */
body.app-bg .accounting-redesign .kpi-card{
  border-radius: 22px;
  border: 1px solid rgba(16,16,16,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(240,248,216,.55) 100%);
  box-shadow: 0 14px 30px rgba(16,16,16,.06);
  padding: 14px 16px;
}
body.app-bg .accounting-redesign .kpi-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(16,16,16,.58);
}
body.app-bg .accounting-redesign .kpi-value{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
body.app-bg .accounting-redesign .kpi-sub{
  font-size: 12px;
  color: rgba(16,16,16,.52);
  margin-top: 4px;
}
body.app-bg .accounting-redesign .accounting-filters{
  border-radius: 20px;
  padding: 10px;
  background: rgba(216,248,80,.10);
  border: 1px solid rgba(16,16,16,.08);
  backdrop-filter: blur(10px);
}




/* Housing Kanban board (drag & drop) */
.housing-board{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.housing-board__col{
  flex:0 0 280px;
  scroll-snap-align:start;
  border:1px solid rgba(16,16,16,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,244,.92));
  border-radius:16px;
  padding:10px;
  box-shadow:0 12px 22px rgba(16,16,16,.05);
}
.housing-board__col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.housing-board__col-title{font-weight:900; color:var(--c-text);}
.housing-board__col-meta{font-size:12px; color:var(--c-muted); font-weight:700;}
.housing-board__dropzone{
  min-height:60px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px;
  border-radius:14px;
  border:1px dashed rgba(16,16,16,.18);
  background:rgba(16,16,16,.01);
}
.housing-board__dropzone.is-over{
  background:rgba(216,248,80,.10);
  border-color:rgba(216,248,80,.55);
}
.resident-card{
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
  border:1px solid rgba(16,16,16,.10);
  cursor:grab;
  box-shadow:0 10px 16px rgba(16,16,16,.04);
}
.resident-card:active{cursor:grabbing;}
.resident-card.is-dragging{opacity:.55;}
.resident-card__name{font-weight:900; line-height:1.15; color:var(--c-text);}
.resident-card__meta{font-size:12px; color:var(--c-muted); margin-top:2px;}

/* Segmented tabs (page-level) */
.segmented{
  display:inline-flex;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(255,255,255,.72);
  border-radius:999px;
  padding:4px;
  gap:4px;
}
.segmented__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:#2b2b2b;
  font-weight:800;
  font-size:13px;
  border:1px solid transparent;
}
.segmented__btn:hover{background:rgba(216,248,80,.18);}
.segmented__btn.is-active{
  background:linear-gradient(180deg, rgba(216,248,80,.92), rgba(216,248,80,.62));
  border-color:rgba(16,16,16,.12);
}


/* -----------------------------
   Table tools: quick filter + sorting
------------------------------ */
.table-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(16,16,16,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.table-tools__left{ flex: 1; min-width: 220px; }
.table-tools__right{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.table-tools__count{ white-space: nowrap; }

th.th-sortable{
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
}
th.th-sortable::after{
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .35;
}
th.th-sortable.is-sorted::after{ opacity: .75; }
th.th-sortable.is-sorted[data-sort-dir="asc"]::after{ content: "↑"; }
th.th-sortable.is-sorted[data-sort-dir="desc"]::after{ content: "↓"; }

@media (max-width: 576px){
  .table-tools{ padding: 10px; }
  .table-tools__left{ min-width: 160px; }
}


/* =========================================================
   REDESIGN v2: Sidebar search, Payroll hero, Workers filters
   ========================================================= */

/* ── Sidebar search button (moved from topbar) ── */
.sidebar-search-btn{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 12px;
  margin-bottom:8px;
  border-radius:14px;
  border:1px solid rgba(16,16,16,.12);
  background:rgba(16,16,16,.03);
  color:rgba(16,16,16,.58);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--tr-fast);
}
.sidebar-search-btn:hover{
  background:rgba(216,248,80,.14);
  border-color:rgba(16,16,16,.18);
  color:rgba(16,16,16,.82);
}
.sidebar-search-ico{ font-size:14px; flex:0 0 auto; }
.sidebar-search-label{ flex:1; text-align:left; }
.sidebar-search-kbd{
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid rgba(16,16,16,.14);
  background:rgba(255,255,255,.72);
  color:rgba(16,16,16,.52);
  font-family:inherit;
}

/* ── Sidebar group label refinement ── */
.sidebar-group-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(16,16,16,.42);
  padding:6px 12px 2px;
  margin-top:2px;
}

/* =========================================================
   PAYROLL HERO
   ========================================================= */
.payroll-hero{
  border-radius:var(--r-xl);
  border:1px solid rgba(16,16,16,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(240,248,216,.45) 100%);
  box-shadow:var(--sh-card);
  padding:20px 24px;
  margin-bottom:16px;
}
.payroll-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.payroll-hero__title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#101010;
  margin:0;
}
.payroll-hero__meta{
  font-size:13px;
  color:rgba(16,16,16,.52);
  margin-top:2px;
}
.payroll-hero__actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* KPI strip */
.payroll-kpi-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.payroll-kpi-card{
  border-radius:16px;
  border:1px solid rgba(16,16,16,.08);
  background:rgba(255,255,255,.82);
  padding:12px 14px;
  transition:box-shadow var(--tr-fast);
}
.payroll-kpi-card:hover{ box-shadow:0 8px 20px rgba(16,16,16,.06); }
.payroll-kpi-card__label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(16,16,16,.48);
  margin-bottom:4px;
}
.payroll-kpi-card__value{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:#101010;
}
.payroll-kpi-card__value small{
  font-size:12px;
  font-weight:700;
  color:rgba(16,16,16,.48);
}
.payroll-kpi-card__value--accent{ color:#4a7c10; }
.payroll-kpi-card--neg .payroll-kpi-card__value{ color:var(--c-danger); }
.payroll-kpi-card--highlight{
  background:linear-gradient(180deg, rgba(216,248,80,.18) 0%, rgba(255,255,255,.82) 100%);
  border-color:rgba(120,160,30,.22);
}
.payroll-kpi-card--success .payroll-kpi-card__value{ color:var(--c-success); }

/* Status legend */
.payroll-status-legend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.payroll-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.payroll-status-chip::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
}
.payroll-status-chip--draft{
  background:rgba(16,16,16,.05);
  color:rgba(16,16,16,.62);
}
.payroll-status-chip--draft::before{ background:rgba(16,16,16,.32); }
.payroll-status-chip--ready{
  background:rgba(212,157,20,.10);
  color:#6B4E00;
}
.payroll-status-chip--ready::before{ background:#d49d14; }
.payroll-status-chip--paid{
  background:rgba(16,185,129,.10);
  color:#0a5537;
}
.payroll-status-chip--paid::before{ background:#10b981; }

/* ── Payroll Toolbar ── */
.payroll-toolbar{
  border-radius:var(--r-lg);
  border:1px solid rgba(16,16,16,.10);
  background:rgba(255,255,255,.88);
  box-shadow:0 6px 18px rgba(16,16,16,.05);
  padding:12px 16px;
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payroll-toolbar__row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.payroll-toolbar__row--bulk{
  padding-top:8px;
  border-top:1px solid rgba(16,16,16,.06);
}
.payroll-toolbar__group{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.payroll-toolbar__label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(16,16,16,.48);
}
.payroll-toolbar__counter{
  margin-left:auto;
  font-size:12px;
  color:rgba(16,16,16,.52);
}
.payroll-toolbar__select-actions{
  display:flex;
  gap:6px;
}

/* ── Collapsible filters (Payroll + Workers) ── */
.payroll-filters-wrap,
.workers-filters-wrap{
  border-radius:var(--r-lg);
  border:1px solid rgba(16,16,16,.10);
  background:rgba(255,255,255,.82);
  margin-bottom:12px;
  overflow:hidden;
}
.payroll-filters-toggle,
.workers-filters-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:rgba(16,16,16,.72);
  user-select:none;
  list-style:none;
  transition:background var(--tr-fast);
}
.payroll-filters-toggle::-webkit-details-marker,
.workers-filters-toggle::-webkit-details-marker{ display:none; }
.payroll-filters-toggle:hover,
.workers-filters-toggle:hover{ background:rgba(216,248,80,.08); }
.payroll-filters-toggle__meta,
.workers-filters-badge{
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(16,16,16,.05);
  color:rgba(16,16,16,.52);
}

.payroll-filters-body,
.workers-filters-body{
  padding:0 16px 14px;
}
.payroll-filters-grid,
.workers-filters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
}
.payroll-filter-item,
.workers-filter-item{}
.payroll-filter-item--narrow,
.workers-filter-item--narrow{
  max-width:80px;
}
.payroll-filter-actions,
.workers-filter-actions{
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding-top:8px;
}

/* =========================================================
   WORKERS HERO
   ========================================================= */
.workers-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.workers-hero__title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#101010;
  margin:0;
}
.workers-hero__meta{
  font-size:13px;
  color:rgba(16,16,16,.52);
  margin-top:2px;
}

/* ── Smaller sidebar link padding for compact look ── */
.sidebar-nav .sidebar-link{
  padding:8px 10px;
  font-size:13px;
  gap:8px;
}
.sidebar-nav .side-ico{
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:12px;
  flex:0 0 30px;
}

/* ── Responsive ── */
@media (max-width:768px){
  .payroll-kpi-strip{
    grid-template-columns:repeat(2, 1fr);
  }
  .payroll-toolbar__row{
    flex-direction:column;
    align-items:stretch;
  }
  .payroll-toolbar__counter{ margin-left:0; }
  .payroll-filters-grid,
  .workers-filters-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .workers-hero{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   REDESIGN v3: Dashboard sections, sidebar polish, factory select
   ========================================================= */

/* ── Dashboard Hero ── */
.dash-hero{
  border-radius:var(--r-xl);
  border:1px solid rgba(16,16,16,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(240,248,216,.50) 50%, rgba(232,245,250,.30) 100%);
  box-shadow:var(--sh-card);
  padding:20px 24px;
  margin-bottom:14px;
}
.dash-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.dash-hero__title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
}
.dash-hero__meta{
  font-size:13px;
  color:rgba(16,16,16,.52);
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.dash-factory-select{
  max-width:200px;
  border-radius:10px !important;
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
}
.dash-hero__kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:8px;
}
.dash-mini-kpi{
  border-radius:14px;
  border:1px solid rgba(16,16,16,.08);
  background:rgba(255,255,255,.78);
  padding:10px 12px;
  text-align:center;
}
.dash-mini-kpi__num{
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.dash-mini-kpi__label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(16,16,16,.48);
  margin-top:2px;
}

/* ── Dashboard Section Tabs ── */
.dash-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(16,16,16,.10);
  background:rgba(255,255,255,.78);
  margin-bottom:14px;
  overflow-x:auto;
}
.dash-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  color:rgba(16,16,16,.62);
  border:1px solid transparent;
  white-space:nowrap;
  transition:all var(--tr-fast);
}
.dash-tab:hover{
  background:rgba(216,248,80,.12);
  color:rgba(16,16,16,.82);
}
.dash-tab--active{
  background:linear-gradient(180deg, rgba(216,248,80,.82) 0%, rgba(216,248,80,.52) 100%);
  color:#101010;
  border-color:rgba(120,160,30,.28);
  box-shadow:0 6px 16px rgba(120,160,30,.15);
}

/* ── Sidebar polish v3 ── */
body.app-bg .app-sidebar{
  width:240px;
  flex:0 0 240px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,244,.94) 100%) !important;
  border-right:1px solid rgba(16,16,16,.06) !important;
  box-shadow:4px 0 20px rgba(16,16,16,.03) !important;
}
body.app-bg .sidebar-brand{
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
  gap:8px;
  border:1px solid rgba(16,16,16,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  box-shadow:0 6px 14px rgba(16,16,16,.04);
}
body.app-bg .sidebar-role{
  margin-top:8px;
  padding:5px 10px;
  font-size:10px;
  letter-spacing:.08em;
  border-radius:8px;
  background:rgba(216,248,80,.18);
  border:1px solid rgba(120,160,30,.18);
}

/* Compact sidebar links */
body.app-bg .sidebar-nav{
  gap:2px;
  margin-top:8px;
}
body.app-bg .sidebar-nav .sidebar-link{
  padding:7px 8px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:700;
  gap:7px;
}
body.app-bg .sidebar-nav .side-ico{
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:11px;
  flex:0 0 26px;
  border:1px solid rgba(16,16,16,.08);
}
body.app-bg .sidebar-link:hover{
  background:rgba(216,248,80,.12) !important;
  transform:none;
}
body.app-bg .sidebar-link.is-active{
  background:rgba(216,248,80,.22) !important;
  border-color:rgba(120,160,30,.22) !important;
  box-shadow:0 6px 14px rgba(16,16,16,.04) !important;
}
body.app-bg .sidebar-link.is-active::before{
  left:4px;
  top:8px;
  bottom:8px;
  width:2.5px;
}
body.app-bg .sidebar-link.is-active .side-ico{
  background:rgba(216,248,80,.55) !important;
}

/* Smaller separator */
body.app-bg .sidebar-sep{
  margin:4px 8px;
  height:1px;
  background:rgba(16,16,16,.06);
}

/* Sidebar sublinks compact */
body.app-bg .sidebar-subitems{
  gap:1px;
  padding:2px 0 2px 6px;
}
body.app-bg .sidebar-sublink{
  padding:5px 8px;
  border-radius:8px;
  font-size:12px;
}
body.app-bg .sidebar-sublink .side-ico{
  width:22px;
  height:22px;
  border-radius:7px;
  font-size:10px;
  flex:0 0 22px;
}

/* Search button polish */
body.app-bg .sidebar-search-btn{
  padding:7px 10px;
  margin-bottom:6px;
  border-radius:10px;
  font-size:12px;
  border:1px solid rgba(16,16,16,.08);
  background:rgba(16,16,16,.02);
}
body.app-bg .sidebar-search-btn:hover{
  background:rgba(216,248,80,.10);
}
body.app-bg .sidebar-search-kbd{
  font-size:9px;
  padding:1px 4px;
  border-radius:4px;
}

/* Sidebar footer compact */
body.app-bg .sidebar-footer{
  padding-top:8px;
  margin-top:auto;
}
body.app-bg .user-mini{
  padding:6px 2px;
  gap:1px;
}
body.app-bg .user-mini strong{ font-size:11px; }
body.app-bg .user-mini span{ font-size:10px; }

/* ── Responsive ── */
@media (max-width:768px){
  .dash-hero__kpis{
    grid-template-columns:repeat(2, 1fr);
  }
  .dash-tabs{
    border-radius:16px;
  }
}


/* =========================================================
   REDESIGN v4: Column toggles, bulk collapse, no breadcrumbs
   ========================================================= */

/* ── Column visibility toggle strip ── */
.payroll-col-toggles{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  margin-bottom:8px;
  border-radius:12px;
  border:1px solid rgba(16,16,16,.08);
  background:rgba(255,255,255,.75);
  overflow-x:auto;
  flex-wrap:wrap;
}
.payroll-col-toggles__label{
  font-size:11px;
  font-weight:800;
  color:rgba(16,16,16,.42);
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  margin-right:4px;
}
.payroll-col-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid rgba(16,16,16,.08);
  background:rgba(16,16,16,.02);
  font-size:11px;
  font-weight:600;
  color:rgba(16,16,16,.62);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:all .15s ease;
}
.payroll-col-toggle:hover{
  background:rgba(216,248,80,.10);
  border-color:rgba(16,16,16,.14);
}
.payroll-col-toggle:has(input:checked){
  background:rgba(216,248,80,.18);
  border-color:rgba(120,160,30,.25);
  color:rgba(16,16,16,.82);
}
.payroll-col-toggle input{
  width:12px;
  height:12px;
  margin:0;
  accent-color:#7fbf3a;
}

/* ── Bulk actions collapsible ── */
.payroll-bulk-wrap{
  border-top:1px solid rgba(16,16,16,.06);
  margin-top:6px;
}
.payroll-bulk-toggle{
  display:flex;
  align-items:center;
  padding:6px 0;
  font-size:12px;
  font-weight:700;
  color:rgba(16,16,16,.52);
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.payroll-bulk-toggle::-webkit-details-marker{display:none;}
.payroll-bulk-toggle::before{
  content:"▸";
  margin-right:6px;
  font-size:10px;
  transition:transform .15s;
}
.payroll-bulk-wrap[open] .payroll-bulk-toggle::before{
  transform:rotate(90deg);
}
.payroll-bulk-body{
  padding:6px 0;
}


/* =========================================================
   REDESIGN v5: SVG sidebar icons, search overlay fix
   ========================================================= */

/* ── SVG icons in sidebar ── */
.side-ico--svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  padding:0;
}
.side-ico--svg svg{
  width:16px;
  height:16px;
  stroke:rgba(16,16,16,.55);
  transition:stroke .15s ease;
}
body.app-bg .sidebar-link:hover .side-ico--svg svg{
  stroke:rgba(16,16,16,.78);
}
body.app-bg .sidebar-link.is-active .side-ico--svg{
  background:rgba(216,248,80,.45) !important;
  border-radius:8px !important;
  border:1px solid rgba(120,160,30,.20) !important;
  padding:3px;
}
body.app-bg .sidebar-link.is-active .side-ico--svg svg{
  stroke:rgba(16,16,16,.88);
  width:14px;
  height:14px;
}

/* Sublinks without icons: add left padding */
body.app-bg .sidebar-subitems .sidebar-sublink{
  padding-left:38px;
  font-size:12px;
  font-weight:600;
  color:rgba(16,16,16,.62);
}
body.app-bg .sidebar-subitems .sidebar-sublink:hover{
  color:rgba(16,16,16,.82);
  background:rgba(216,248,80,.08);
}
body.app-bg .sidebar-subitems .sidebar-sublink.is-active{
  color:rgba(16,16,16,.92);
  font-weight:700;
  background:rgba(216,248,80,.14);
}


/* ── Guest landing page ───────────────────────────────── */
body.guest-home .app-main{
  display:flex;
  min-height:100vh;
}
body.guest-home .app-main > main{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.guest-home .hero-wrap--landing{
  width:100%;
  padding:40px 0;
}
body.guest-home .hero-card--landing{
  max-width:860px;
  padding:48px;
  border-radius:30px;
  box-shadow:0 24px 60px rgba(16,16,16,.08);
}
body.guest-home .hero-copy{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
body.guest-home .hero-demo{
  line-height:1.7;
}
body.guest-home .hero-demo code{
  background:rgba(16,16,16,.05);
  color:#101010;
  padding:.18rem .42rem;
  border-radius:8px;
}
@media (max-width: 767.98px){
  body.guest-home .hero-card--landing{
    padding:28px 20px;
    border-radius:24px;
  }
}

/* =========================================================
   Payroll v2 — compact table + inline edit panel
   ========================================================= */

/* Compact table: no horizontal scroll */
.payroll-table--compact { width: 100%; table-layout: auto; }
.payroll-table--compact td, .payroll-table--compact th {
  padding: .5rem .75rem;
  vertical-align: middle;
  border-right: none;
}
.payroll-table--compact tbody tr.payroll-row:hover { background: rgba(216,248,80,.07); cursor: pointer; }
.payroll-table--compact tbody tr.payroll-row.is-selected td { background: rgba(216,248,80,.14) !important; }

/* Worker cell */
.payroll-worker-name { font-size: .92rem; line-height: 1.3; }
.payroll-worker-meta { font-size: .78rem; color: var(--c-muted); margin-top: 1px; }
.payroll-night-note { font-size: .72rem; color: var(--c-muted); }
.payroll-net-amount { font-weight: 700; font-size: .95rem; }

/* Status pill (read-only badge in table) */
.payroll-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.payroll-status-pill--draft { background: rgba(108,117,125,.15); color: #495057; }
.payroll-status-pill--checked, .payroll-status-pill--ready { background: rgba(255,193,7,.25); color: #856404; }
.payroll-status-pill--paid { background: rgba(25,135,84,.18); color: #0f5132; }
.payroll-tag-pill--issue { display:inline-block; font-size:.8rem; color: var(--c-danger); }

/* Edit button */
.btn-edit-row {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 8px;
  opacity: .6;
  transition: opacity .15s, background .15s;
}
.btn-edit-row:hover { opacity: 1; background: rgba(216,248,80,.25); }

/* Inline search bar */
.payroll-inline-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem .5rem;
}
.payroll-inline-search .form-control { max-width: 340px; }
.payroll-inline-count { font-size: .8rem; color: var(--c-muted); white-space: nowrap; }

/* ── Inline Edit Panel ── */
.payroll-edit-row td.payroll-edit-td { padding: 0 !important; border-top: none; }
.payroll-edit-form {
  background: linear-gradient(135deg, rgba(240,248,216,.6), rgba(255,255,255,.9));
  border-top: 3px solid var(--c-accent);
  border-bottom: 2px solid rgba(216,248,80,.3);
  padding: 1.25rem 1.5rem 1rem;
}
.payroll-edit-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.payroll-edit-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-text);
}

/* Edit grid: 4 blocks side by side */
.payroll-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.payroll-edit-block {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(16,16,16,.08);
  border-radius: 14px;
  padding: 1rem;
}
.payroll-edit-block--summary {
  background: rgba(240,248,216,.5);
  border-color: rgba(184,232,75,.4);
}
.payroll-edit-block__title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.payroll-edit-field { margin-bottom: .6rem; }
.payroll-edit-field .form-label { font-size: .78rem; margin-bottom: 3px; color: var(--c-muted); font-weight: 600; }
.payroll-edit-field .form-control,
.payroll-edit-field .form-select { font-size: .85rem; }

/* Summary block lines */
.payroll-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3rem 0;
  font-size: .85rem;
  border-bottom: 1px solid rgba(16,16,16,.06);
}
.payroll-summary-line:last-child { border-bottom: none; }
.payroll-summary-line--total {
  font-weight: 800;
  font-size: 1rem;
  padding-top: .5rem;
  border-top: 2px solid rgba(16,16,16,.1);
  border-bottom: none;
  margin-top: .25rem;
}

/* Edit action buttons */
.payroll-edit-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Details box inside edit panel */
.payroll-details-box {
  margin-top: 1rem;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(16,16,16,.10);
  border-radius: 12px;
  padding: 1rem;
}

/* =========================================================
   Payroll v3 — Split layout (table + side panel)
   ========================================================= */
.pr2 { display: flex; flex-direction: column; gap: 1rem; }

/* Header */
.pr2-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.pr2-title { font-size: 1.6rem; font-weight: 900; margin: 0; }
.pr2-meta { font-size: .85rem; color: var(--c-muted); margin-top: 2px; }
.pr2-header__right { display: flex; gap: .5rem; flex-shrink: 0; }

/* KPI row */
.pr2-kpi-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.pr2-kpi {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: .75rem 1rem;
  box-shadow: var(--sh-card);
}
.pr2-kpi__label { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 4px; }
.pr2-kpi__val { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.pr2-kpi--accent { border-color: rgba(216,248,80,.5); background: rgba(240,248,216,.4); }
.pr2-kpi--accent .pr2-kpi__val { color: #4a7c10; }
.pr2-kpi--muted .pr2-kpi__val { color: var(--c-muted); }
.pr2-kpi--warn { border-color: rgba(255,193,7,.4); background: rgba(255,248,220,.4); }
.pr2-kpi--warn .pr2-kpi__val { color: #856404; }
.pr2-kpi--highlight { border-color: rgba(216,248,80,.6); background: linear-gradient(135deg,rgba(240,248,216,.8),rgba(216,248,80,.15)); }
.pr2-kpi--highlight .pr2-kpi__val { color: #3a6b0a; font-size: 1.5rem; }
.pr2-kpi--success { border-color: rgba(25,135,84,.3); background: rgba(212,237,218,.4); }
.pr2-kpi--success .pr2-kpi__val { color: #0f5132; }

/* Toolbar */
.pr2-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: .65rem 1rem; }
.pr2-toolbar__form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pr2-toolbar__right { display: flex; align-items: center; gap: .5rem; }
.pr2-count { font-size: .8rem; color: var(--c-muted); white-space: nowrap; padding: 0 .5rem; }

/* Split layout */
.pr2-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1rem;
  align-items: start;
  min-height: 400px;
}

/* Table side */
.pr2-list {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
}
.pr2-table { width: 100%; border-collapse: collapse; }
.pr2-table thead th {
  padding: .65rem .85rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: rgba(248,248,248,.95);
  border-bottom: 2px solid var(--c-border);
}
.pr2-table tbody td { padding: .6rem .85rem; border-bottom: 1px solid rgba(16,16,16,.05); }
.pr2-row { cursor: pointer; transition: background .12s; }
.pr2-row:hover { background: rgba(216,248,80,.08); }
.pr2-row--active { background: rgba(216,248,80,.18) !important; }
.pr2-row--active td { font-weight: 600; }
.pr2-name { font-size: .88rem; font-weight: 600; color: var(--c-text); }
.pr2-sub { font-size: .74rem; color: var(--c-muted); margin-top: 1px; }
.pr2-num { font-size: .88rem; font-variant-numeric: tabular-nums; }
.pr2-pos { color: #1a6b2a; font-weight: 700; }
.pr2-neg { color: var(--c-danger); font-weight: 700; }

/* Status pill in table */
.pr2-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.pr2-pill--draft { background: rgba(108,117,125,.13); color: #555; }
.pr2-pill--ready, .pr2-pill--checked { background: rgba(255,193,7,.22); color: #7a5a00; }
.pr2-pill--paid { background: rgba(25,135,84,.16); color: #0f5132; }

/* Side panel */
.pr2-panel {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: var(--sh-soft);
}
.pr2-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--c-muted);
  text-align: center;
  gap: .75rem;
  padding: 2rem;
}
.pr2-panel__empty-icon { font-size: 2.5rem; opacity: .4; }
.pr2-panel__empty-text { font-size: .9rem; line-height: 1.5; }

.pr2-panel__content { padding: 1.25rem 1.25rem 1.5rem; }
.pr2-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--c-border);
}
.pr2-panel__name { font-size: 1.05rem; font-weight: 800; }
.pr2-panel__meta { font-size: .78rem; color: var(--c-muted); margin-top: 2px; }
.pr2-panel__close {
  background: none; border: 1px solid var(--c-border);
  border-radius: 8px; cursor: pointer; font-size: .85rem;
  padding: 2px 8px; color: var(--c-muted);
  transition: all .15s; flex-shrink: 0;
}
.pr2-panel__close:hover { background: rgba(220,53,69,.1); border-color: rgba(220,53,69,.3); color: var(--c-danger); }

/* Summary mini-cards inside panel */
.pr2-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.1rem; }
.pr2-sum-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: .5rem .75rem;
}
.pr2-sum-card__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: 2px; }
.pr2-sum-card__val { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pr2-sum-card--neg .pr2-sum-card__val { color: var(--c-muted); }
.pr2-sum-card--total { grid-column: 1 / -1; background: rgba(240,248,216,.6); border-color: rgba(184,232,75,.4); }
.pr2-sum-card--total .pr2-sum-card__val { font-size: 1.2rem; color: #3a6b0a; }

/* Form inside panel */
.pr2-form { display: flex; flex-direction: column; gap: .9rem; }
.pr2-form-section {}
.pr2-form-section__title { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.pr2-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .5rem; }
.pr2-form-field label { display: block; font-size: .75rem; font-weight: 600; color: var(--c-muted); margin-bottom: 3px; }
.pr2-form-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid var(--c-border); margin-top: .25rem; }

/* Debt badge */
.pr2-debt-badge {
  margin-top: .75rem;
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.25);
  color: #842029;
  border-radius: 10px;
  padding: .5rem .85rem;
  font-size: .82rem;
  font-weight: 700;
}

/* Mobile: stack vertically */
@media (max-width: 900px) {
  .pr2-split { grid-template-columns: 1fr; }
  .pr2-panel { position: relative; top: 0; max-height: none; }
  .pr2-split:not(.pr2-split--open) .pr2-panel { display: none; }
}

/* =========================================================
   Payroll Stripe-style (sp-*)
   ========================================================= */
.sp { display:flex; flex-direction:column; gap:.85rem; }

/* Top bar */
.sp-topbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; padding-bottom:.5rem; border-bottom:2px solid var(--c-border); }
.sp-topbar__left { display:flex; align-items:baseline; gap:.85rem; }
.sp-heading { font-size:1.5rem; font-weight:900; margin:0; letter-spacing:-.02em; }
.sp-period { font-size:.82rem; color:var(--c-muted); }
.sp-topbar__right { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.sp-month-form { display:flex; align-items:center; gap:.35rem; }
.sp-month-input { border:1px solid var(--c-border); border-radius:8px; padding:.28rem .6rem; font-size:.82rem; background:#fff; }

/* Buttons */
.sp-btn { display:inline-flex; align-items:center; gap:.3rem; border-radius:8px; padding:.3rem .75rem; font-size:.82rem; font-weight:600; cursor:pointer; border:none; transition:all .14s; white-space:nowrap; text-decoration:none; }
.sp-btn--ghost { background:#fff; border:1px solid var(--c-border); color:var(--c-text); }
.sp-btn--ghost:hover { border-color:rgba(16,16,16,.3); background:var(--c-surface); }
.sp-btn--primary { background:var(--c-text); color:#fff; }
.sp-btn--primary:hover { background:#333; }

/* KPI strip */
.sp-kpi-strip { display:flex; align-items:stretch; background:#fff; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; }
.sp-kpi { padding:.75rem 1.25rem; flex:1; }
.sp-kpi__label { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-muted); margin-bottom:4px; }
.sp-kpi__val { font-size:1.2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.sp-kpi__val--muted { color:var(--c-muted); }
.sp-kpi__val--warn { color:#9a6700; }
.sp-kpi__val--ok { color:var(--c-success); }
.sp-kpi__currency { font-size:.75rem; font-weight:600; color:var(--c-muted); }
.sp-kpi--accent { background:rgba(216,248,80,.12); }
.sp-kpi--accent .sp-kpi__val { color:#3a6b0a; }
.sp-kpi--highlight { background:rgba(240,248,216,.5); }
.sp-kpi--highlight .sp-kpi__val { color:#2d5608; font-size:1.3rem; }
.sp-kpi-sep { width:1px; background:var(--c-border); flex-shrink:0; }

/* Filter bar */
.sp-filterbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sp-search { border:1px solid var(--c-border); border-radius:8px; padding:.32rem .75rem; font-size:.85rem; width:220px; background:#fff; outline:none; transition:border .15s; }
.sp-search:focus { border-color:rgba(16,16,16,.4); box-shadow:0 0 0 3px rgba(216,248,80,.2); }
.sp-filter-pills { display:flex; gap:.3rem; }
.sp-pill { background:none; border:1px solid var(--c-border); border-radius:999px; padding:.2rem .7rem; font-size:.78rem; font-weight:600; cursor:pointer; color:var(--c-muted); transition:all .12s; }
.sp-pill--active { background:var(--c-text); border-color:var(--c-text); color:#fff; }
.sp-total-count { font-size:.78rem; color:var(--c-muted); margin-left:auto; }

/* Bulk wrap */
.sp-bulk-wrap { position:relative; }
.sp-bulk-wrap summary { list-style:none; }
.sp-bulk-wrap summary::-webkit-details-marker { display:none; }
.sp-bulk-dropdown { position:absolute; top:calc(100% + 4px); right:0; background:#fff; border:1px solid var(--c-border); border-radius:12px; padding:.75rem; box-shadow:var(--sh-soft); z-index:20; min-width:420px; }
.sp-bulk-row { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

/* Selects / inputs in bulk */
.sp-select { border:1px solid var(--c-border); border-radius:8px; padding:.28rem .5rem; font-size:.82rem; background:#fff; }

/* Table */
.sp-table-wrap { background:#fff; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; }
.sp-table { width:100%; border-collapse:collapse; }
.sp-table thead th { padding:.55rem .9rem; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c-muted); border-bottom:1px solid var(--c-border); background:rgba(248,248,248,.8); white-space:nowrap; }
.sp-col-hint { font-weight:500; text-transform:none; letter-spacing:0; opacity:.7; }
.sp-table tbody td { padding:.55rem .9rem; border-bottom:1px solid rgba(16,16,16,.05); vertical-align:middle; }
.sp-table tbody tr:last-child td { border-bottom:none; }
.sp-text-right { text-align:right; }

/* Read rows */
.sp-row--read:hover { background:rgba(16,16,16,.025); }
.sp-row--read.sp-row--editing { background:rgba(216,248,80,.07); }
.sp-row--read.sp-row--editing .sp-edit-btn { color:var(--c-text); background:rgba(216,248,80,.3); }

/* Worker cell */
.sp-worker-name { font-size:.88rem; font-weight:600; color:var(--c-text); text-decoration:none; }
.sp-worker-name:hover { text-decoration:underline; color:var(--c-text); }
.sp-worker-meta { font-size:.73rem; color:var(--c-muted); margin-top:1px; }

/* Status badge */
.sp-status { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.sp-status--draft { background:rgba(108,117,125,.1); color:#5a6270; }
.sp-status--ready,.sp-status--checked { background:rgba(234,179,8,.15); color:#854d0e; }
.sp-status--paid { background:rgba(22,163,74,.12); color:#166534; }
.sp-warn-dot { color:var(--c-danger); font-size:.65rem; margin-left:3px; vertical-align:middle; }

/* Editable value cells */
.sp-val { font-size:.88rem; font-variant-numeric:tabular-nums; }
.sp-night-suffix { font-size:.75rem; color:var(--c-muted); }
.sp-num { font-size:.88rem; font-variant-numeric:tabular-nums; }
.sp-num--muted { color:var(--c-muted); }
.sp-net-val { font-size:.92rem; font-weight:700; }
.sp-net-val--neg { color:var(--c-danger); }
.sp-remain { font-size:.72rem; color:var(--c-warn); margin-top:1px; }

/* Edit button */
.sp-edit-btn { background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; font-size:.9rem; padding:3px 7px; color:var(--c-muted); transition:all .12s; }
.sp-edit-btn:hover { background:var(--c-surface); border-color:var(--c-border); color:var(--c-text); }

/* Edit row */
.sp-row--edit td.sp-edit-td { padding:0; background:rgba(248,250,245,.6); border-top:2px solid var(--c-accent); border-bottom:2px solid rgba(216,248,80,.25); }
.sp-edit-form { padding:.85rem 1rem .75rem; }

/* Primary fields (hours + rate, always visible) */
.sp-edit-primary { display:flex; gap:.65rem; align-items:flex-end; flex-wrap:wrap; }
.sp-edit-field { display:flex; flex-direction:column; gap:3px; }
.sp-edit-field--lg { flex:1.5; }
.sp-edit-field label { font-size:.72rem; font-weight:700; color:var(--c-muted); letter-spacing:.02em; }
.sp-input { border:1px solid rgba(16,16,16,.2); border-radius:8px; padding:.32rem .6rem; font-size:.88rem; background:#fff; outline:none; width:100%; transition:border .15s, box-shadow .15s; }
.sp-input:focus { border-color:rgba(16,16,16,.5); box-shadow:0 0 0 3px rgba(216,248,80,.25); }

/* Secondary (payment details) — collapsible */
.sp-edit-secondary { margin-top:.55rem; }
.sp-edit-secondary summary { font-size:.78rem; font-weight:600; color:var(--c-muted); cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.3rem; }
.sp-edit-secondary summary::-webkit-details-marker { display:none; }
.sp-edit-secondary summary::before { content:'›'; transition:transform .15s; display:inline-block; }
.sp-edit-secondary[open] summary::before { transform:rotate(90deg); }
.sp-edit-payment { display:flex; gap:.65rem; flex-wrap:wrap; padding-top:.5rem; }

/* Edit footer */
.sp-edit-footer { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin-top:.65rem; padding-top:.55rem; border-top:1px solid var(--c-border); flex-wrap:wrap; }
.sp-edit-summary { display:flex; align-items:baseline; gap:.45rem; font-size:.85rem; font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.sp-edit-summary__sep { color:var(--c-muted); }
.sp-edit-btns { display:flex; gap:.4rem; }
.sp-link { font-size:.75rem; color:var(--c-muted); text-decoration:none; margin-left:.25rem; }
.sp-link:hover { text-decoration:underline; }

/* Empty state */
.sp-empty { text-align:center; padding:3rem 1rem; color:var(--c-muted); font-size:.9rem; }

/* Pagination */
.sp-pagination { display:flex; justify-content:center; gap:.3rem; }
.sp-page { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; border:1px solid var(--c-border); border-radius:8px; font-size:.82rem; font-weight:600; text-decoration:none; color:var(--c-text); background:#fff; transition:all .12s; }
.sp-page:hover { background:var(--c-surface); }
.sp-page--active { background:var(--c-text); color:#fff; border-color:var(--c-text); }
.sp-page--disabled { opacity:.35; pointer-events:none; }

/* Checkbox */
.sp-checkbox { width:15px; height:15px; cursor:pointer; }

/* ── Payroll: extended filter panel ── */
.sp-filter-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem .75rem;
  margin-bottom: .75rem;
}
.sp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  align-items: flex-end;
}
.sp-filter-row--secondary {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sp-filter-group { display: flex; flex-direction: column; gap: .2rem; }
.sp-filter-group--wide { flex: 1 1 200px; }
.sp-filter-group--narrow { flex: 0 0 80px; }
.sp-filter-group--actions { flex-direction: row; align-items: flex-end; gap: .4rem; }
.sp-filter-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sp-muted, #888);
}
.sp-filter-input { min-width: 160px; }
.sp-filter-select { min-width: 120px; }
.sp-filterbar--toolbar {
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: .4rem 0;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sp-filter-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: .78rem;
}
.sp-filter-active__label { color: var(--sp-muted,#888); }
.sp-filter-badge {
  background: rgba(130,190,100,.15);
  color: #a3e083;
  border-radius: 20px;
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 600;
}
.sp-filter-clear {
  color: var(--sp-muted,#888);
  text-decoration: none;
  font-size: .72rem;
  margin-left: .25rem;
}
.sp-filter-clear:hover { color: #e07070; }
/* Sortable column links */
.sp-sort-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.sp-sort-link:hover { color: var(--sp-accent,#a3e083); }
.sp-sort-link--active { color: var(--sp-accent,#a3e083); font-weight: 700; }

/* ── Payroll: IBAN field ── */
.sp-edit-secondary--open { padding: .75rem 0 0; }
.sp-edit-secondary--open .sp-edit-payment {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  padding: .75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
.sp-edit-field--iban { flex: 1 1 260px; }
.sp-iban-input {
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sp-iban-input::placeholder { text-transform: none; letter-spacing: normal; }
.sp-field-hint {
  display: block;
  font-size: .68rem;
  color: var(--sp-muted, #888);
  margin-top: .15rem;
}
.sp-required { color: #e07070; }

/* ── Partial payment display ── */
.sp-partial-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .2rem;
  font-size: .72rem;
}
.sp-partial-paid { color: #a3e083; font-weight: 600; }
.sp-partial-remain { color: #e0a060; font-weight: 600; }
.sp-paid-badge { font-size: .7rem; color: #a3e083; margin-top: .2rem; }
.sp-field-hint--inline {
  font-size: .68rem;
  color: var(--sp-muted,#888);
  font-weight: 400;
  margin-left: .35rem;
}


/* =========================================================
   RESPONSIVE UPGRADE 2026-03-08
   Phone + iPad adaptation layer
   ========================================================= */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.th-responsive-wrap{
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(16,16,16,.08);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 22px rgba(16,16,16,.05);
}
.th-responsive-wrap > table{
  margin-bottom:0;
}
.th-responsive-wrap::after{
  content:"";
  position:sticky;
  right:0;
  top:0;
  width:20px;
  height:100%;
  float:right;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(247,249,251,.96) 90%);
}
.mobile-scroll-table{
  min-width:100%;
}
.mobile-scroll-table.table-premium,
.mobile-scroll-table.table-dark,
.mobile-scroll-table.table{
  min-width:760px;
}
.mobile-cards-table td > .btn,
.mobile-cards-table td > .btn-group,
.mobile-cards-table td > .input-group,
.mobile-cards-table td > .form-control,
.mobile-cards-table td > .form-select,
.mobile-cards-table td > form .btn,
.mobile-cards-table td > form .form-control,
.mobile-cards-table td > form .form-select{
  width:100%;
}
.mobile-cards-table td .btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mobile-cards-table td .badge,
.mobile-cards-table td .status-pill,
.mobile-cards-table td .chip{
  display:inline-flex;
  width:auto;
}

@media (max-width: 1199.98px){
  .app-shell{
    display:block;
  }
  .dashboard-main{
    width:100%;
    max-width:100%;
  }
  .app-topbar{
    padding-top:var(--safe-top);
  }
  .topbar-inner{
    min-height:64px;
    padding-top:4px;
    padding-bottom:4px;
  }
  .topbar-title{
    max-width:min(72vw, 740px);
    font-size:15px;
  }
  main.container-fluid,
  .app-topbar .container-fluid,
  .thanks-strip .container-fluid{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .glass-card,
  .wow-card,
  .hero-card,
  .stack-card,
  .kpi-card,
  .dash-hero,
  .card,
  .modal-content{
    border-radius:20px;
  }
  .card-body,
  .glass-card,
  .wow-card,
  .hero-card,
  .stack-card,
  .dash-hero{
    padding-inline:16px;
  }
  .btn,
  .btn-sm,
  .form-control,
  .form-select,
  .input-group-text{
    min-height:44px;
  }
  .offcanvas.sidebar-offcanvas{
    width:min(92vw, 380px);
    border-top-right-radius:22px;
    border-bottom-right-radius:22px;
  }
  .offcanvas.sidebar-offcanvas .offcanvas-header{
    padding:16px 16px 12px;
  }
  .offcanvas.sidebar-offcanvas .offcanvas-body{
    padding:12px 14px max(16px, var(--safe-bottom));
  }
  .table-responsive,
  .quality-table-wrap,
  .requests-table-wrap,
  .payroll-table-wrap,
  .accounting-journal-table-wrap,
  .sp-table-wrap,
  .th-responsive-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-responsive table,
  .quality-table-wrap table,
  .requests-table-wrap table,
  .accounting-journal-table-wrap table,
  .th-responsive-wrap table{
    min-width:880px;
  }
  .page-head,
  .filters-actions,
  .workers-hero,
  .dash-hero__top,
  .table-tools{
    gap:10px;
  }
  .dash-tabs,
  .nav-tabs,
  .btn-group,
  .chart-style-switch,
  .mobile-section-tabs{
    scrollbar-width:none;
  }
  .dash-tabs::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar,
  .btn-group::-webkit-scrollbar,
  .chart-style-switch::-webkit-scrollbar,
  .mobile-section-tabs::-webkit-scrollbar,
  .th-responsive-wrap::-webkit-scrollbar{
    display:none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px){
  body{
    padding-bottom:0;
  }
  .topbar-inner{
    flex-wrap:nowrap;
  }
  .topbar-actions{
    flex:0 0 auto;
  }
  .dash-hero__kpis,
  .payroll-kpi-strip,
  .workers-filters-grid,
  .payroll-filters-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .filters-actions .btn,
  .table-tools__right .btn{
    min-width:unset;
  }
  .mobile-dock{
    display:none !important;
  }
}

@media (max-width: 767.98px){
  body{
    padding-bottom:calc(92px + var(--safe-bottom));
  }
  .app-topbar{
    position:sticky;
    top:0;
    z-index:120;
  }
  .topbar-inner{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
    min-height:auto;
    padding-top:6px;
    padding-bottom:6px;
  }
  .topbar-left,
  .topbar-actions{
    width:100%;
  }
  .topbar-left{
    align-items:center;
  }
  .topbar-left > .btn{
    flex:0 0 42px;
    width:42px;
    min-width:42px;
    padding-inline:0;
  }
  .topbar-title{
    max-width:calc(100vw - 96px);
    font-size:16px;
    white-space:normal;
    line-height:1.2;
  }
  .topbar-actions{
    justify-content:stretch;
  }
  .topbar-actions .btn,
  .topbar-actions .btn-group{
    width:100%;
  }
  main.container-fluid,
  .app-topbar .container-fluid,
  .thanks-strip .container-fluid{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .thanks-strip{
    padding-top:8px;
    padding-bottom:8px;
  }
  .dash-hero,
  .glass-card,
  .wow-card,
  .hero-card,
  .stack-card,
  .card{
    border-radius:18px;
  }
  .dash-hero,
  .glass-card,
  .wow-card,
  .hero-card,
  .stack-card,
  .card-body{
    padding-inline:14px;
  }
  .dash-hero__kpis,
  .payroll-kpi-strip,
  .workers-filters-grid,
  .payroll-filters-grid,
  .action-grid{
    grid-template-columns:1fr !important;
  }
  .filters-actions,
  .page-head,
  .dash-hero__top,
  .workers-hero,
  .table-tools,
  .table-tools__right{
    flex-direction:column;
    align-items:stretch;
  }
  .table-tools__left,
  .table-tools__right{
    min-width:0;
    width:100%;
  }
  .table-tools__count{
    white-space:normal;
  }
  .th-responsive-wrap{
    margin-inline:-2px;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .th-responsive-wrap::after{
    display:none;
  }
  .mobile-dock{
    left:12px;
    right:12px;
    bottom:max(10px, var(--safe-bottom));
    display:flex;
    align-items:stretch;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    padding:8px;
    border-radius:20px;
    scroll-snap-type:x proximity;
  }
  .mobile-dock__item{
    flex:1 0 74px;
    min-width:74px;
    min-height:56px;
    padding:8px 6px;
    flex-direction:column;
    gap:4px;
    text-align:center;
    line-height:1.05;
    scroll-snap-align:center;
  }
  .dock-icon{
    font-size:15px;
    line-height:1;
  }
  .mobile-cards-table{
    border-spacing:0 12px;
  }
  .mobile-cards-table tr{
    border-radius:16px;
    padding:10px 0;
  }
  .mobile-cards-table td{
    padding:10px 14px !important;
  }
  .mobile-cards-table td::before{
    font-size:10px;
    letter-spacing:.06em;
    margin-bottom:4px;
  }
  .mobile-scroll-table.table,
  .mobile-scroll-table.table-premium,
  .mobile-scroll-table.table-dark{
    min-width:680px;
  }
  .modal-dialog{
    margin:12px;
  }
  .modal-content{
    border-radius:18px;
  }
}