:root{
  --pt-bg:#f5f7fb; --pt-card:#ffffff; --pt-text:#172033; --pt-muted:#6b7280; --pt-primary:#2563eb; --pt-primary-2:#0ea5e9; --pt-border:#e5e7eb; --pt-success:#16a34a; --pt-danger:#dc2626; --pt-warning:#f59e0b;
}
*{box-sizing:border-box} body{margin:0;background:var(--pt-bg);color:var(--pt-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:#0f172a;color:#e5e7eb;padding:20px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;margin-bottom:24px}.brand-badge{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--pt-primary),var(--pt-primary-2));display:grid;place-items:center;color:#fff}.nav-link-pt{display:flex;align-items:center;gap:10px;color:#cbd5e1;text-decoration:none;padding:11px 12px;border-radius:14px;margin:4px 0}.nav-link-pt:hover,.nav-link-pt.active{background:#1e293b;color:#fff}.main{flex:1;min-width:0;padding:20px 24px 80px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.page-title{font-size:26px;font-weight:800;margin:0}.card-pt{background:var(--pt-card);border:1px solid var(--pt-border);border-radius:22px;box-shadow:0 12px 35px rgba(15,23,42,.06)}.stat-card{padding:18px}.stat-value{font-size:30px;font-weight:800}.stat-label{color:var(--pt-muted);font-size:13px}.btn-pt{border-radius:13px;padding:10px 14px;border:0;background:var(--pt-primary);color:white;text-decoration:none;font-weight:700}.btn-pt:hover{color:white;background:#1d4ed8}.btn-soft{background:#eef2ff;color:#1e40af}.table{vertical-align:middle}.badge-soft{border-radius:999px;padding:.4rem .7rem;font-weight:700;font-size:12px}.badge-present,.badge-active,.badge-approved,.badge-synced,.badge-completed,.badge-online{background:#dcfce7;color:#166534}.badge-pending,.badge-incomplete,.badge-pulled{background:#fef3c7;color:#92400e}.badge-danger,.badge-failed,.badge-rejected,.badge-offline,.badge-needs_attention{background:#fee2e2;color:#991b1b}.form-control,.form-select{border-radius:13px;border-color:var(--pt-border);padding:10px 12px}.mobile-bottom{display:none}.hide-mobile{}@media(max-width:900px){.sidebar{display:none}.main{padding:16px 14px 96px}.page-title{font-size:22px}.topbar{align-items:flex-start;gap:10px}.mobile-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--pt-border);z-index:50}.mobile-bottom a{padding:9px 4px;text-align:center;text-decoration:none;color:#475569;font-size:11px}.mobile-bottom .ico{display:block;font-size:18px}.hide-mobile{display:none!important}.card-pt{border-radius:18px}.table-responsive{border-radius:16px}.stat-value{font-size:24px}}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#dbeafe,transparent 28%),linear-gradient(135deg,#eff6ff,#f8fafc)}.login-card{width:min(430px,92vw);padding:30px}.mini-muted{color:var(--pt-muted);font-size:13px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.two-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.two-grid{grid-template-columns:1fr}}@media(max-width:560px){.kpi-grid{grid-template-columns:1fr}}


/* v6 polish: topbar identity, cleaner status badges, better responsive table feel */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:230px;
  max-width:320px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(226,232,240,.9);
  border-radius:22px;
  padding:10px 12px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(10px);
}
.user-avatar{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  background:linear-gradient(135deg,var(--pt-primary),var(--pt-primary-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  flex:0 0 auto;
}
.user-meta{
  min-width:0;
  line-height:1.15;
}
.user-meta strong,
.user-meta small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-meta strong{
  font-size:14px;
}
.user-meta small{
  margin-top:3px;
  color:var(--pt-muted);
  font-size:12px;
}
.user-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-bottom:2px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.badge-check_in{background:#dbeafe;color:#1e40af}
.badge-check_out{background:#ede9fe;color:#5b21b6}
.badge-break_out{background:#ffedd5;color:#9a3412}
.badge-break_in{background:#e0f2fe;color:#075985}
.badge-absent,.badge-terminated{background:#fee2e2;color:#991b1b}
.badge-on_leave,.badge-holiday,.badge-weekend{background:#ecfccb;color:#3f6212}
.badge-inactive{background:#e5e7eb;color:#374151}
.table td,.table th{padding:.78rem .75rem}
.table thead th{color:#0f172a;font-size:13px;text-transform:none}
@media(max-width:900px){
  .topbar-actions{width:100%;justify-content:flex-start}
  .user-pill{width:100%;max-width:none;min-width:0}
}


/* v7 reports module */
.report-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.report-meta span{
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:999px;
  padding:7px 12px;
  color:#475569;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.report-kpi{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.report-kpi span{
  color:var(--pt-muted);
  font-size:13px;
}
.report-kpi strong{
  font-size:26px;
  letter-spacing:-.03em;
}
.report-progress{
  height:9px;
  min-width:90px;
  border-radius:99px;
  background:#e5e7eb;
}
.report-progress .progress-bar{
  background:linear-gradient(90deg,var(--pt-primary),var(--pt-primary-2));
  border-radius:99px;
}
@media(max-width:700px){
  .report-meta{display:grid}
  .report-kpi{min-height:auto}
}


/* v8 salary/report refinements + scroll-to-top */
.scroll-top-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px;
  height:46px;
  border:0;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--pt-primary),var(--pt-primary-2));
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(37,99,235,.28);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:.18s ease;
  z-index:999;
}
.scroll-top-btn.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.scroll-top-btn:hover{
  transform:translateY(-2px);
}
.report-kpi strong{
  white-space:nowrap;
}
@media(max-width:700px){
  .scroll-top-btn{
    right:16px;
    bottom:86px;
  }
}


/* v9 payroll/report consistency */
.report-meta strong{color:#0f172a}.card-pt .stat-value{letter-spacing:-.03em}


/* v12 shifts module */
.badge-inactive{background:#e5e7eb;color:#374151}
.badge-active{background:#dcfce7;color:#166534}


/* v13 edit/delete polish */
details summary{cursor:pointer;font-weight:700;color:#2563eb}
details[open] summary{color:#0f172a}
.table .btn-sm{padding:.34rem .65rem;font-size:.78rem}.badge-cancelled{background:#e5e7eb;color:#374151}


/* v14 overtime and night shift */
.report-kpi strong{line-height:1.1}.overtime-note{background:#f8fafc;border:1px solid rgba(226,232,240,.95);border-radius:18px;padding:14px}.badge-incomplete{background:#fef3c7;color:#92400e}

/* v15 deviations */
.badge-incomplete{background:#fef3c7;color:#92400e}.badge-present{background:#dcfce7;color:#166534}


/* v16 policies/reports */
.table-wide{min-width:1200px}
.report-table{min-width:2100px}
.report-table-wrap{border-radius:18px}
.report-table th,.report-table td{white-space:nowrap}
.report-meta{display:flex;flex-wrap:wrap;gap:8px}
.report-meta span{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:999px;padding:8px 12px;box-shadow:0 10px 24px rgba(15,23,42,.04)}

/* v17 filters */
.filter-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.filter-bar .btn{white-space:nowrap}

/* v18 modern sortable headers */
.sort-link{color:inherit;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.sort-link:hover{color:#2563eb;text-decoration:none}
thead th{white-space:nowrap}
.filter-bar{position:relative}
@media (max-width: 768px){
  .filter-bar{grid-template-columns:1fr}
}

/* v19 compact filters + sortable headers */
.filter-bar{
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, .8fr) auto auto;
  align-items:end;
}
.filter-bar.card-soft{
  padding:12px;
  border-radius:18px;
}
.sort-link{
  border-radius:10px;
  padding:2px 4px;
  transition:background .15s ease,color .15s ease;
}
.sort-link:hover{
  background:rgba(37,99,235,.08);
  color:#2563eb;
}
@media (max-width: 900px){
  .filter-bar{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .filter-bar{grid-template-columns:1fr}
}

/* v20 small UX fixes */
.anchor-section{
  scroll-margin-top:24px;
}
.anchor-section:target{
  outline:2px solid rgba(37,99,235,.20);
  box-shadow:0 0 0 6px rgba(37,99,235,.06);
}
.payroll-total-box{
  border:1px solid rgba(15,23,42,.04);
}
.payroll-progress{
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}