/* =====================================================================
   HR & PAYROLL — premium theme v1  (loaded after Velzon; replaces brand-theme.css)
   ink #1D2233 · indigo #3730A3 · surface #F4F5F9 · card #FFFFFF · saffron #E8A33D
   status: present #15935F · absent #D23F57 · half #D98A12 · leave #2F6FDB · off #7A4FD1
   ===================================================================== */
:root{
  --ink:#1D2233; --ink-2:#4A5068; --ink-3:#7C8299; --line:#E6E8F0; --line-2:#F0F1F6;
  --bg:#F4F5F9; --card:#FFFFFF;
  --brand:#3730A3; --brand-2:#4B44C6; --brand-tint:#EEEDFB; --brand-tint-2:#E0DEF8;
  --saffron:#E8A33D; --saffron-tint:#FDF3E2;
  --ok:#15935F; --ok-t:#E5F5EE; --bad:#D23F57; --bad-t:#FBE9EC; --half:#D98A12; --half-t:#FCF1DF;
  --leave:#2F6FDB; --leave-t:#E7EFFC; --off:#7A4FD1; --off-t:#F0EAFB; --mute-t:#EEF0F4;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(29,34,51,.04),0 4px 14px rgba(29,34,51,.05);

  --vz-font-sans-serif:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vz-body-font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --vz-body-color:var(--ink); --vz-body-bg:var(--bg); --vz-heading-color:var(--ink);
  --vz-primary:#3730A3; --vz-primary-rgb:55,48,163; --vz-primary-text-emphasis:#2B2585;
  --vz-primary-bg-subtle:#EEEDFB; --vz-primary-border-subtle:#D6D3F6;
  --vz-success:#15935F; --vz-success-rgb:21,147,95; --vz-success-bg-subtle:#E5F5EE;
  --vz-danger:#D23F57; --vz-danger-rgb:210,63,87; --vz-danger-bg-subtle:#FBE9EC;
  --vz-warning:#D98A12; --vz-warning-rgb:217,138,18; --vz-warning-bg-subtle:#FCF1DF;
  --vz-info:#2F6FDB; --vz-info-rgb:47,111,219; --vz-info-bg-subtle:#E7EFFC;
  --vz-secondary:#7C8299; --vz-secondary-rgb:124,130,153;
  --vz-link-color:#3730A3; --vz-link-hover-color:#2B2585; --vz-link-color-rgb:55,48,163;
  --vz-border-color:var(--line); --vz-border-radius:var(--r-sm);
  --vz-card-bg:#fff; --vz-light:#F4F5F9; --vz-light-rgb:244,245,249;
  --vz-header-bg:#fff; --vz-header-border:var(--line);
  --vz-vertical-menu-bg:#fff; --vz-vertical-menu-border:var(--line);
  --vz-vertical-menu-item-color:#4A5068; --vz-vertical-menu-item-hover-color:#3730A3; --vz-vertical-menu-item-active-color:#3730A3;
  --vz-vertical-menu-sub-item-color:#4A5068; --vz-vertical-menu-title-color:#9AA0B4;
}
html,body{ font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--bg) !important; }
body{ font-size:14px; -webkit-font-smoothing:antialiased; }
.main-content,.page-content,[data-layout="vertical"] .main-content{ background:var(--bg) !important; }
.page-content{ padding:calc(70px + 22px) 10px 60px; }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-weight:700; letter-spacing:-.01em; }
a{ color:var(--brand); } a:hover{ color:#2B2585; }
.text-muted{ color:var(--ink-3) !important; }
.table, .pb-stat b, .pb-net, input[type=number], .tnum{ font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--brand) !important; outline-offset:2px; }

/* ---------- sidebar ---------- */
.app-menu{ background:#fff !important; border-right:1px solid var(--line) !important; box-shadow:none !important; }
.navbar-brand-box{ padding:0 18px !important; height:70px; display:flex; align-items:center; border-bottom:1px solid var(--line-2); background:#fff !important; }
.pb-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.pb-brand img{ width:38px; height:38px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid var(--line); }
.pb-brand-mark{ width:38px; height:38px; border-radius:10px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; flex:none; }
.pb-brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.pb-brand-text b{ color:var(--ink); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.pb-brand-text small{ color:var(--ink-3); font-size:11.5px; }
.navbar-menu .navbar-nav .menu-title{ padding:16px 14px 6px !important; }
.navbar-menu .navbar-nav .menu-title span{ color:#9AA0B4 !important; font-size:11.5px !important; font-weight:600 !important; letter-spacing:.02em; text-transform:none !important; }
.navbar-menu .navbar-nav .nav-link{ margin:1px 8px; padding:9px 12px !important; border-radius:var(--r-sm); color:var(--ink-2) !important; font-weight:500; font-size:14px; display:flex; align-items:center; gap:10px; transition:background .12s,color .12s; }
.navbar-menu .navbar-nav .nav-link i{ font-size:18px !important; color:var(--ink-3); margin:0 !important; min-width:auto !important; }
.navbar-menu .navbar-nav .nav-link:hover{ background:var(--line-2); color:var(--ink) !important; }
.navbar-menu .navbar-nav .nav-link.active{ background:var(--brand-tint) !important; color:var(--brand) !important; font-weight:600; position:relative; }
.navbar-menu .navbar-nav .nav-link.active i{ color:var(--brand) !important; }
.navbar-menu .navbar-nav .nav-link.active::before{ content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--saffron); }
[data-sidebar-size="sm"] .pb-brand-text{ display:none; }

/* ---------- topbar ---------- */
#page-topbar{ background:rgba(255,255,255,.92) !important; backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line) !important; box-shadow:none !important; }
.hamburger-icon span{ background-color:var(--ink-2) !important; }
.pb-top-date{ align-items:center; gap:6px; color:var(--ink-2); font-weight:500; font-size:13.5px; background:var(--line-2); padding:6px 12px; border-radius:999px; }
.pb-user{ display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:999px; }
.pb-user-av{ width:34px; height:34px; border-radius:50%; background:var(--brand-tint); color:var(--brand); font-weight:700; display:grid; place-items:center; font-size:13px; }
.pb-user-name{ font-weight:600; font-size:13.5px; line-height:1.1; } .pb-user-role{ color:var(--ink-3); font-size:12px; }
.btn-icon{ width:36px; height:36px; display:inline-grid; place-items:center; padding:0; border-radius:50%; }

/* ---------- page head (replaces old title strip) ---------- */
.page-title-box{ background:transparent !important; box-shadow:none !important; border:0 !important; padding:4px 0 18px !important; margin:0 !important; }
.page-title-box h4{ font-size:22px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:-.015em; color:var(--ink) !important; padding:0 !important; }
.page-title-box h4::after{ display:none !important; }
.page-title-box .breadcrumb{ font-size:13px; }
.pb-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:4px 0 20px; }
.pb-head h4{ font-size:24px; margin:0 0 4px; letter-spacing:-.02em; }
.pb-head p{ margin:0; color:var(--ink-3); font-size:14px; }

/* ---------- cards ---------- */
.card{ background:var(--card); border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow) !important; margin-bottom:20px; }
.card-header{ background:transparent !important; border-bottom:1px solid var(--line-2) !important; padding:16px 20px; }
.card-body{ padding:20px; }
.card-title,.card h5,.card h6{ color:var(--ink) !important; }
.card h6.text-danger,.card h6.text-primary{ color:var(--ink) !important; font-weight:700; font-size:14.5px; }

/* ---------- buttons ---------- */
.btn{ border-radius:var(--r-sm); font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .12s,box-shadow .12s,color .12s; }
.btn-lg{ font-size:15px; padding:11px 22px; border-radius:10px; }
.btn-sm{ font-size:12.5px; padding:5px 10px; }
.btn-primary{ --vz-btn-bg:var(--brand); --vz-btn-border-color:var(--brand); --vz-btn-hover-bg:#2B2585; --vz-btn-hover-border-color:#2B2585; --vz-btn-active-bg:#25207A; --vz-btn-active-border-color:#25207A; --vz-btn-disabled-bg:#8D88D6; --vz-btn-disabled-border-color:#8D88D6; background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(55,48,163,.25); }
.btn-primary:hover{ background:#2B2585; border-color:#2B2585; color:#fff; }
.btn-light{ background:#fff; border:1px solid var(--line); color:var(--ink-2); } .btn-light:hover{ background:var(--line-2); color:var(--ink); border-color:var(--line); }
.btn-soft-primary{ background:var(--brand-tint); color:var(--brand); border:0; } .btn-soft-primary:hover{ background:var(--brand); color:#fff; }
.btn-soft-success{ background:var(--ok-t); color:var(--ok); border:0; } .btn-soft-success:hover{ background:var(--ok); color:#fff; }
.btn-soft-danger{ background:var(--bad-t); color:var(--bad); border:0; } .btn-soft-danger:hover{ background:var(--bad); color:#fff; }
.btn-soft-info{ background:var(--leave-t); color:var(--leave); border:0; } .btn-soft-info:hover{ background:var(--leave); color:#fff; }
.btn-soft-secondary,.btn-soft-dark{ background:var(--mute-t); color:var(--ink-2); border:0; } .btn-soft-secondary:hover,.btn-soft-dark:hover{ background:var(--ink-2); color:#fff; }
.btn-danger{ background:var(--bad); border-color:var(--bad); } .btn-success{ background:var(--ok); border-color:var(--ok); }
.btn-gold{ background:var(--saffron); border-color:var(--saffron); color:#3B2A06; }

/* ---------- forms ---------- */
label,.form-label{ font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.form-control,.form-select{ border:1px solid var(--line); border-radius:var(--r-sm); font-size:14px; padding:9px 12px; color:var(--ink); background-color:#fff; transition:border-color .12s, box-shadow .12s; }
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(55,48,163,.12); }
.form-control-sm,.form-select-sm{ padding:6px 10px; font-size:13px; }
.form-check-input:checked{ background-color:var(--brand); border-color:var(--brand); }
.form-switch .form-check-input{ width:2.4em; height:1.3em; cursor:pointer; }
.form-check-label{ font-weight:500; color:var(--ink-2); cursor:pointer; }

/* ---------- tables ---------- */
.table{ --vz-table-bg:transparent; color:var(--ink); margin-bottom:0; }
.table>:not(caption)>*>*{ padding:11px 14px; border-bottom-color:var(--line-2); }
.table thead th,.table-light th,thead.table-light th{ background:#FAFAFC !important; color:var(--ink-3) !important; font-weight:600; font-size:12.5px; border-bottom:1px solid var(--line) !important; white-space:nowrap; }
.table tfoot th,.table tfoot td{ background:#FAFAFC; font-weight:700; border-top:1px solid var(--line); }
.table-hover>tbody>tr:hover>*{ background:#FAFAFE; }
.table-bordered>:not(caption)>*>*{ border-color:var(--line-2); }
.table-sm>:not(caption)>*>*{ padding:7px 10px; }
.table-responsive{ border-radius:var(--r-md); }

/* ---------- badges / alerts ---------- */
.badge{ font-weight:600; border-radius:999px; padding:4px 9px; font-size:11.5px; }
.bg-primary-subtle{ background:var(--brand-tint) !important; } .text-primary{ color:var(--brand) !important; }
.alert{ border:0; border-radius:var(--r-md); font-weight:500; padding:12px 16px; }
.alert-success{ background:var(--ok-t); color:#0E6B45; } .alert-danger{ background:var(--bad-t); color:#A3263B; }
.alert-warning{ background:var(--half-t); color:#8A5600; } .alert-info{ background:var(--leave-t); color:#1D4E9E; }

/* ---------- chips ---------- */
.pb-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; line-height:1.6; white-space:nowrap; }
.c-green{ background:var(--ok-t); color:var(--ok); } .c-red{ background:var(--bad-t); color:var(--bad); } .c-amber{ background:var(--half-t); color:#A86600; }
.c-blue{ background:var(--leave-t); color:var(--leave); } .c-violet{ background:var(--off-t); color:var(--off); } .c-grey{ background:var(--mute-t); color:var(--ink-2); }

/* ---------- stat strip ---------- */
.pb-stats{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.pb-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; position:relative; overflow:hidden; }
.pb-stat::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--c,var(--ink-3)); }
.pb-stat span{ display:block; color:var(--ink-3); font-size:12.5px; font-weight:500; }
.pb-stat b{ display:block; font-size:22px; font-weight:700; color:var(--ink); margin-top:2px; letter-spacing:-.01em; }
.s-green{ --c:var(--ok); } .s-red{ --c:var(--bad); } .s-amber{ --c:var(--half); } .s-blue{ --c:var(--leave); } .s-violet{ --c:var(--off); } .s-grey{ --c:#A3A8BB; }
.pb-stat-hero{ background:var(--ink); border-color:var(--ink); } .pb-stat-hero::before{ background:var(--saffron); }
.pb-stat-hero span{ color:#B8BCCB; } .pb-stat-hero b{ color:#fff; }
@media (max-width:1199px){ .pb-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:575px){ .pb-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- toolbar / search ---------- */
.pb-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--line-2); }
.pb-search{ display:flex; align-items:center; gap:8px; background:var(--line-2); border-radius:var(--r-sm); padding:0 12px; min-width:240px; flex:0 1 320px; }
.pb-search i{ color:var(--ink-3); } .pb-search input{ border:0; background:transparent; padding:9px 0; outline:none; width:100%; font-size:14px; color:var(--ink); }
.pb-table td{ vertical-align:middle; }
.pb-name{ font-weight:600; color:var(--ink); line-height:1.25; }
.pb-meta{ color:var(--ink-3); font-size:12.5px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.pb-table .pb-meta{ display:block; }
.pb-net{ color:var(--ink); font-weight:700; }
.pb-empty{ text-align:center; padding:48px 20px !important; } .pb-empty i{ font-size:40px; color:var(--brand); background:var(--brand-tint); width:76px; height:76px; border-radius:50%; display:inline-grid; place-items:center; margin-bottom:12px; }

/* ---------- daily attendance ---------- */
.pb-datenav{ display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.pb-datenav a,.pb-datenav span{ width:38px; height:38px; display:grid; place-items:center; color:var(--ink-2); font-size:20px; text-decoration:none; }
.pb-datenav a:hover{ background:var(--line-2); } .pb-datenav .disabled{ color:#C9CCD8; }
.pb-datenav input{ border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); height:38px; padding:0 10px; font-weight:600; color:var(--ink); outline:none; font-family:inherit; }
.pb-att-row{ display:grid; grid-template-columns:minmax(220px,1fr) auto auto; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line-2); }
.pb-att-row:last-child{ border-bottom:0; } .pb-att-row.changed{ background:#FBFAFF; box-shadow:inset 3px 0 0 var(--saffron); }
.pb-att-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.pb-avatar{ width:38px; height:38px; border-radius:50%; background:var(--brand-tint); color:var(--brand); font-weight:700; display:grid; place-items:center; flex:none; }
.pb-seg{ display:inline-flex; background:var(--line-2); border-radius:10px; padding:3px; gap:2px; }
.pb-seg button{ border:0; background:transparent; min-width:40px; height:32px; border-radius:8px; font-weight:700; font-size:12.5px; color:var(--ink-3); cursor:pointer; font-family:inherit; transition:background .1s,color .1s; }
.pb-seg button:hover{ background:#fff; color:var(--ink); }
.pb-seg .seg-present.on{ background:var(--ok); color:#fff; } .pb-seg .seg-absent.on{ background:var(--bad); color:#fff; }
.pb-seg .seg-half_day.on{ background:var(--half); color:#fff; } .pb-seg .seg-leave.on{ background:var(--leave); color:#fff; }
.pb-seg .seg-weekly_off.on,.pb-seg .seg-holiday.on{ background:var(--off); color:#fff; }
.pb-times{ display:flex; align-items:center; gap:6px; color:var(--ink-3); }
.pb-times input{ border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px; font-size:13px; width:118px; font-family:inherit; color:var(--ink); }
.pb-savebar{ position:sticky; bottom:12px; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 8px 28px rgba(29,34,51,.12); padding:10px 10px 10px 18px; margin-top:-4px; }
.pb-savebar span{ color:var(--ink-3); font-weight:500; } .pb-savebar.dirty span{ color:#A86600; font-weight:600; }
@media (max-width:991px){ .pb-att-row{ grid-template-columns:1fr; gap:10px; } .pb-seg{ width:100%; justify-content:space-between; } .pb-seg button{ flex:1; } }

/* ---------- rules page ---------- */
.pb-tabs .card-body{ display:flex; flex-direction:column; gap:2px; }
.pb-tab{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500; text-decoration:none; }
.pb-tab i{ font-size:18px; color:var(--ink-3); } .pb-tab:hover{ background:var(--line-2); color:var(--ink); }
.pb-tab.active{ background:var(--brand-tint); color:var(--brand); font-weight:600; } .pb-tab.active i{ color:var(--brand); }
.pb-summary h6{ display:flex; gap:6px; align-items:center; font-size:14px; } .pb-summary ul{ padding-left:16px; margin:0; color:var(--ink-2); font-size:13px; line-height:1.55; } .pb-summary li{ margin-bottom:6px; }
.pb-summary b{ color:var(--ink); font-weight:600; }
.pb-days{ display:flex; flex-wrap:wrap; gap:8px; }
.pb-day input{ position:absolute; opacity:0; pointer-events:none; }
.pb-day span{ display:inline-grid; place-items:center; min-width:56px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; font-weight:600; color:var(--ink-2); cursor:pointer; background:#fff; user-select:none; }
.pb-day input:checked+span{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pb-day input:focus-visible+span{ outline:2px solid var(--brand); outline-offset:2px; }
.pb-days-sm .pb-day span{ min-width:44px; height:34px; font-size:12.5px; } .pb-day-wide span{ min-width:auto !important; }
.pb-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.pb-option{ position:relative; margin:0; cursor:pointer; }
.pb-option input{ position:absolute; opacity:0; pointer-events:none; }
.pb-option>span{ display:flex; flex-direction:column; gap:2px; height:100%; padding:12px 14px 12px 40px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; position:relative; }
.pb-option>span::before{ content:""; position:absolute; left:14px; top:15px; width:16px; height:16px; border-radius:50%; border:2px solid #C5C8D6; background:#fff; }
.pb-option b{ color:var(--ink); font-weight:600; font-size:13.5px; } .pb-option small{ color:var(--ink-3); font-size:12.5px; line-height:1.4; }
.pb-option input:checked+span{ border-color:var(--brand); background:#FAFAFF; box-shadow:0 0 0 3px rgba(55,48,163,.08); }
.pb-option input:checked+span::before{ border-color:var(--brand); background:radial-gradient(circle,var(--brand) 0 4px,#fff 5px); }
.pb-option input:focus-visible+span{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- payroll details modal ---------- */
.modal-content{ border:0; border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(29,34,51,.25); }
.pb-calc h6{ font-size:13px; color:var(--ink-3) !important; font-weight:600; margin:14px 0 4px; } .pb-calc h6:first-child{ margin-top:0; }
.pb-calc-total td{ font-weight:700; border-top:1px solid var(--line); }
.pb-calc-net{ display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff; border-radius:var(--r-md); padding:14px 16px; margin:12px 0 8px; }
.pb-calc-net span{ color:#B8BCCB; font-weight:500; } .pb-calc-net b{ font-size:20px; color:#fff; font-variant-numeric:tabular-nums; }
.pb-calc-net{ box-shadow:inset 3px 0 0 var(--saffron); }

/* ---------- dashboard ---------- */
.pb-hello h2{ font-size:26px; letter-spacing:-.02em; margin:0 0 4px; } .pb-hello p{ color:var(--ink-3); margin:0; }
.pb-ribbon-card .card-body{ padding:22px 24px; }
.pb-ribbon-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pb-ribbon-top .big{ font-size:44px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.pb-ribbon-top .big small{ font-size:18px; color:var(--ink-3); font-weight:600; letter-spacing:0; }
.pb-ribbon{ display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--line-2); gap:2px; }
.pb-ribbon i{ display:block; height:100%; }
.pb-ribbon .r-p{ background:var(--ok); } .pb-ribbon .r-hd{ background:var(--half); } .pb-ribbon .r-l{ background:var(--leave); } .pb-ribbon .r-off{ background:var(--off); } .pb-ribbon .r-a{ background:var(--bad); } .pb-ribbon .r-n{ background:#D5D8E3; }
.pb-legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; }
.pb-legend a{ display:flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:500; text-decoration:none; }
.pb-legend a b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.pb-legend .dot{ width:10px; height:10px; border-radius:3px; }
.pb-list{ list-style:none; margin:0; padding:0; } .pb-list li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-2); } .pb-list li:last-child{ border-bottom:0; }
.pb-list .grow{ flex:1; min-width:0; } .pb-list .t{ color:var(--ink-2); font-weight:600; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }
.pb-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pb-action{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink); font-weight:600; text-decoration:none; background:#fff; }
.pb-action i{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:var(--brand-tint); color:var(--brand); flex:none; }
.pb-action:hover{ border-color:var(--brand-tint-2); background:#FBFBFF; color:var(--ink); }
.pb-kv{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); } .pb-kv:last-child{ border-bottom:0; } .pb-kv span{ color:var(--ink-3); } .pb-kv b{ font-variant-numeric:tabular-nums; }
.pb-device{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); background:var(--line-2); font-weight:500; }
.pb-pulse{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(21,147,95,.5); animation:pbPulse 2s infinite; }
.pb-pulse.off{ background:var(--bad); animation:none; }
@keyframes pbPulse{ 0%{ box-shadow:0 0 0 0 rgba(21,147,95,.45);} 70%{ box-shadow:0 0 0 8px rgba(21,147,95,0);} 100%{ box-shadow:0 0 0 0 rgba(21,147,95,0);} }
@media (prefers-reduced-motion:reduce){ .pb-pulse{ animation:none; } * { transition:none !important; } }

/* ---------- footer ---------- */
.footer{ background:transparent !important; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px; }

/* ---------- legacy pages: soften the old cream/maroon section boxes ---------- */
.emp-sec{ background:#fff !important; border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow); padding:20px !important; }
.emp-sec h6{ color:var(--ink) !important; border-bottom:1px solid var(--line-2) !important; font-size:15px; }
.emp-sec h6 i{ color:var(--brand); }
.bg-galaxy-transparent{ background:transparent !important; }

/* ---------- print ---------- */
@media print{
  .app-menu,#page-topbar,.footer,.pb-savebar,.pb-toolbar,.no-print,.pb-head form,.btn{ display:none !important; }
  .main-content{ margin:0 !important; } .page-content{ padding:0 !important; }
  body,.main-content,.page-content{ background:#fff !important; } .card{ box-shadow:none !important; border:0 !important; }
}

/* ---------- v1.1 tighten sidebar + payroll table ---------- */
.navbar-menu .navbar-nav .menu-title{ padding:14px 20px 4px !important; line-height:1.2 !important; margin:0 !important; }
.navbar-menu .navbar-nav .nav-item{ margin:0 !important; }
.navbar-menu .navbar-nav .nav-link{ line-height:1.3 !important; padding:8px 12px !important; min-height:0 !important; }
#scrollbar{ height:calc(100vh - 70px); overflow-y:auto; padding-bottom:16px; }
.pb-table{ font-size:13px; } .pb-table>:not(caption)>*>*{ padding:10px 10px; }
.pb-table td:first-child,.pb-table th:first-child{ white-space:nowrap; padding-left:16px; position:sticky; left:0; background:#fff; z-index:1; }
.pb-table thead th:first-child,.pb-table tfoot th:first-child{ background:#FAFAFC !important; }
.pb-table .pb-meta{ display:block; white-space:nowrap; }
.pb-table td,.pb-table th{ white-space:nowrap; }