:root{
  --bg:#f4f7fb;--card:#fff;--ink:#172033;--muted:#718096;--line:#e5eaf1;
  --blue:#2563eb;--blue-dark:#1d4ed8;--blue-soft:#eff6ff;--red:#dc2626;
  --green:#059669;--orange:#d97706;--purple:#7c3aed;
  --shadow:0 8px 28px rgba(15,23,42,.08);--sidebar:252px;--header:64px
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",Arial,sans-serif;font-size:16px;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.center{text-align:center}.danger{color:var(--red)}.good{color:var(--green)}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.brand-icon{width:48px;height:48px;border-radius:14px;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;flex:0 0 auto}
.brand-icon.mini{width:38px;height:38px;border-radius:11px;font-size:14px}
.brand h1{font-size:22px;line-height:1.2;margin:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.field{display:grid;gap:7px;margin:13px 0}.field label{font-size:13px;font-weight:800}
.input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 12px;outline:none;color:var(--ink)}
.input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 3px #dbeafe}
.btn{border:0;border-radius:11px;padding:10px 13px;font-weight:800;line-height:1.25}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:active{background:var(--blue-dark)}
.btn-soft{background:var(--blue-soft);color:var(--blue-dark)}
.btn-neutral{background:#eef2f7;color:#263247}.btn-danger{background:#fee2e2;color:#991b1b}.btn-full{width:100%}
.login-help{margin-top:13px;background:#f8fafc;border:1px solid #edf1f5;border-radius:12px;padding:12px;font-size:12px;color:#536174;line-height:1.6}

.app-shell{min-height:100vh;background:var(--bg)}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#fff;border-right:1px solid var(--line);z-index:40;display:flex;flex-direction:column;padding:16px 12px;transition:transform .22s ease;box-shadow:2px 0 12px rgba(15,23,42,.02)}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;border-bottom:1px solid #eef2f6}
.side-brand b{display:block;font-size:15px}.side-brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
#nav{display:grid;gap:5px;padding:14px 0;overflow-y:auto}
#nav button{border:0;background:transparent;color:#3b475a;text-align:left;border-radius:10px;padding:11px 12px;font-size:14px;font-weight:650;display:flex;align-items:center;gap:10px}
#nav button span{width:22px;text-align:center;color:#667085}
#nav button.active{background:var(--blue-soft);color:var(--blue-dark);font-weight:850}
#nav button.active span{color:var(--blue)}
.side-foot{margin-top:auto;border-top:1px solid #eef2f6;padding:14px 8px 2px;display:grid;gap:10px}
.who b{font-size:13px;display:block}.who small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.side-foot>button{border:0;background:#f4f6f8;color:#475569;border-radius:9px;padding:9px;font-size:12px;font-weight:800}

.app-shell>main{min-height:100vh;margin-left:var(--sidebar);min-width:0}
.app-shell>main>header{height:var(--header);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:30}
.hamb{display:none;width:40px;height:40px;border:0;border-radius:10px;background:#f1f5f9;color:#334155;font-size:22px;line-height:1}
.app-shell>main>header>div:nth-of-type(1){min-width:0}
.app-shell>main>header>div:nth-of-type(1)>b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-shell>main>header>div:nth-of-type(1)>b span{font-weight:600;color:#64748b}
.app-shell>main>header>div:nth-of-type(1)>small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.sync-btn{border:1px solid #dbe3ef;background:#fff;color:#334155;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:800}

#content{padding:22px;max-width:1480px;margin:0 auto}
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 18px}
.page-title h2{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em}.page-title p{margin:5px 0 0;color:var(--muted);font-size:13px}
.grid{display:grid;gap:14px;margin-bottom:14px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:0 2px 8px rgba(15,23,42,.025)}
.card h3{font-size:15px;margin:0 0 12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;min-height:88px;display:flex;flex-direction:column;justify-content:center}
.stat small{color:var(--muted);font-size:12px;font-weight:700}.stat b{font-size:24px;line-height:1.1;margin-top:6px;letter-spacing:-.02em}
.row{display:flex;gap:10px;align-items:center}.row-wrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:850;background:#f1f5f9;color:#475569;white-space:nowrap}
.badge.blue{background:#dbeafe;color:#1d4ed8}.badge.green{background:#d1fae5;color:#047857}.badge.orange{background:#ffedd5;color:#c2410c}.badge.red{background:#fee2e2;color:#b91c1c}.badge.purple{background:#ede9fe;color:#6d28d9}

.quick-list{display:grid}.quick-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #edf1f5}
.quick-item:last-child{border-bottom:0}.quick-item>div{min-width:0}.quick-item b{display:block;font-size:13px}.quick-item small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.quick-item>span{font-size:11px;color:#667085;white-space:nowrap}
.empty{padding:38px 16px;text-align:center;color:#8b95a5;font-size:14px}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{padding:10px 11px;border-bottom:1px solid var(--line);font-size:12px;text-align:left;vertical-align:middle}
.table th{background:#f8fafc;color:#536174;font-size:11px;position:sticky;top:0;z-index:1}.table tr:last-child td{border-bottom:0}
.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{padding:7px 9px;border-radius:8px;border:0;background:#eef2f7;color:#334155;font-size:11px;font-weight:800}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar .input,.toolbar select{width:auto;min-width:140px}

.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head{font-size:11px;color:var(--muted);text-align:center;padding:6px}.day{min-height:92px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px;cursor:pointer;overflow:hidden}
.day.other,.day.off{opacity:.38}.day .num{font-size:11px;font-weight:800}.events{display:grid;gap:4px;margin-top:4px}.event{padding:4px 5px;border-radius:6px;background:#dbeafe;color:#1e40af;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event.night{background:#ede9fe;color:#6d28d9}.event.field{background:#dcfce7;color:#166534}.event.office{background:#f1f5f9;color:#475569}

.org-card{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.avatar{width:42px;height:42px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.org-card b{display:block;font-size:13px}.org-card small{color:var(--muted);display:block;margin-top:3px;font-size:11px}
.notice{border:1px solid #dbeafe;background:#eff6ff;color:#1e40af;border-radius:12px;padding:12px;font-size:12px;line-height:1.55}
.check-grid{display:grid;gap:8px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.money-list{display:grid;gap:8px}
.pay-edit{max-width:120px}.pay-total,.total{font-weight:900}.sign{margin-top:30px;text-align:right}.mini{font-size:11px}

.print-area{background:#fff;color:#111;padding:20px}.payslip{max-width:850px;margin:auto}.payslip h1{text-align:center;font-size:22px;margin:0 0 18px}
.payslip .meta{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #bbb;border-bottom:0}.payslip .meta>div{padding:9px;border-right:1px solid #bbb;border-bottom:1px solid #bbb;font-size:12px}.payslip .meta>div:nth-child(4n){border-right:0}
.sum-box{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.sum-box div{border:1px solid #bbb;padding:12px;text-align:center}.sum-box b{display:block;font-size:18px;margin-top:5px}

.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.48);display:grid;place-items:center;padding:18px;z-index:100}
.modal{background:#fff;border-radius:18px;max-width:700px;width:100%;max-height:90vh;overflow:auto;padding:20px;box-shadow:var(--shadow)}.modal h3{margin:0 0 14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:999px;font-size:12px;z-index:150;max-width:88%;text-align:center}

@media(max-width:980px){
  :root{--header:58px}
  .sidebar{transform:translateX(-105%);width:min(82vw,280px);box-shadow:10px 0 30px rgba(15,23,42,.18)}
  .sidebar.open{transform:translateX(0)}
  .app-shell>main{margin-left:0}
  .app-shell>main>header{padding:0 12px;gap:9px}
  .hamb{display:grid;place-items:center;flex:0 0 auto}
  .header-actions{gap:5px}.sync-btn{padding:7px 9px;font-size:11px}
  #content{padding:15px 12px 24px}
  .page-title{align-items:flex-start;margin-bottom:14px}.page-title h2{font-size:21px}.page-title p{font-size:12px;line-height:1.45}
  .grid{gap:10px;margin-bottom:10px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3,.grid-2{grid-template-columns:1fr}
  .stat{min-height:78px;padding:13px}.stat small{font-size:11px}.stat b{font-size:21px}
  .card{padding:14px;border-radius:14px}.card h3{font-size:14px}
  .form-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}
  .calendar{gap:3px}.weekdays{gap:3px}.day{min-height:74px;padding:5px;border-radius:8px}.event{font-size:8px;padding:3px 4px}
  .payslip .meta{grid-template-columns:repeat(2,1fr)}.payslip .meta>div:nth-child(4n){border-right:1px solid #bbb}.payslip .meta>div:nth-child(2n){border-right:0}
  .sum-box{grid-template-columns:1fr}
}

@media(max-width:420px){
  html,body{font-size:15px}
  .app-shell>main>header>div:nth-of-type(1)>b{font-size:13px}
  .app-shell>main>header>div:nth-of-type(1)>small{font-size:10px}
  .sync-btn{padding:7px 8px}
  .badge{font-size:10px;padding:4px 7px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:20px}.quick-item{align-items:flex-start}.quick-item>span{font-size:10px}
}

@media print{
  body{background:#fff}.sidebar,.app-shell>main>header,.no-print,.page-title{display:none!important}
  .app-shell>main{margin:0!important}.app-shell{min-height:0}#content{margin:0;padding:0;max-width:none}
  .card{border:0;box-shadow:none;padding:0}.print-area{padding:0}.table-wrap{overflow:visible;border:0}.table{min-width:0}
  .table th,.table td{font-size:10px;padding:5px;break-inside:avoid}.payslip{width:100%;max-width:none}.sum-box{grid-template-columns:repeat(3,1fr)}
  @page{size:A4;margin:10mm}
}

/* 3.4.1 classic UI restoration: keep the earlier stable visual system */
.nav-group{display:grid;gap:3px;padding:4px 0 8px}
.nav-group+.nav-group{border-top:1px solid #eef2f6;padding-top:10px;margin-top:3px}
.nav-group-title{padding:3px 12px 5px;color:#94a3b8;font-size:10px;font-weight:850;letter-spacing:.02em}
#nav .nav-icon{width:22px!important;min-width:22px;flex:0 0 22px;text-align:center}
#nav .nav-text{width:auto!important;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left!important;color:inherit}
.role-pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900}
.role-pill.admin{background:#fee2e2;color:#b91c1c}.role-pill.my{background:#dbeafe;color:#1d4ed8}
.header-person b{display:block;font-size:14px;white-space:nowrap}.header-person b span{font-size:12px;color:#64748b;font-weight:650}.header-person small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.avatar-mini{width:34px;height:34px;border-radius:10px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.who{display:flex;align-items:center;gap:8px}.who>div:last-child{min-width:0}.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-actions{display:flex;gap:7px;flex-wrap:wrap}.quick-actions button{border:1px solid #e3e9f1;background:#fff;color:#475569;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:800}
.quick-actions button:active{background:#eff6ff;color:#1d4ed8}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.panel-head h3{margin:0}.panel-head small{font-size:10px;color:var(--muted)}
.panel-head button{border:0;background:#eef2f7;color:#475569;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:800}
.finance-list{display:grid}.finance-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #eef2f6}.finance-row:last-child{border-bottom:0}.finance-row b{font-size:12px}.finance-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.finance-row strong{font-size:12px;white-space:nowrap}.plus{color:#047857!important}.minus{color:#dc2626!important}
.pnl-strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}.pnl-month{border:1px solid #edf1f5;background:#fbfdff;border-radius:10px;padding:9px 5px;text-align:center}.pnl-month small{display:block;color:var(--muted);font-size:9px}.pnl-month b{display:block;font-size:10px;margin-top:4px}.pnl-month .pos{color:#047857}.pnl-month .neg{color:#dc2626}
.account-chip{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.account-chip b{font-size:11px}.account-chip span{font-size:10px;color:var(--muted)}
.cash-table{min-width:1020px}.pnl-table{min-width:1100px}.cash-table .num,.pnl-table td:not(:first-child){text-align:right;white-space:nowrap}
.money-list.big>div{padding:9px 0;border-bottom:1px solid #eef2f6}.money-list.big>div:last-child{border-bottom:0}
.profit-hero{border-radius:14px;padding:22px;display:grid;gap:7px}.profit-hero.positive{background:#ecfdf5;color:#065f46}.profit-hero.negative{background:#fff1f2;color:#9f1239}.profit-hero b{font-size:26px}.profit-hero span,.profit-hero small{font-size:11px}
.org-sections{display:grid;gap:12px}.org-section{padding:15px}.org-section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eef2f6;padding-bottom:9px}.org-section-head h3{margin:0}.org-section-head span{font-size:10px;color:var(--muted)}
.org-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding-top:10px}.org-card.clean{box-shadow:none}.org-info b span{font-size:11px;color:#64748b}.org-info small:empty{display:none}

/* calendar status + manpower */
.schedule-legend{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.schedule-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#64748b}.schedule-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.schedule-legend .up i{background:#3b82f6}.schedule-legend .run i{background:#16a34a}.schedule-legend .done i{background:#94a3b8}
.events .schedule-event{display:block;width:100%;border:0;border-radius:6px;padding:4px 5px;font-size:9px;font-weight:800;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.events .schedule-event.upcoming{background:#dbeafe;color:#1e40af}
.events .schedule-event.running{background:#dcfce7;color:#166534}
.events .schedule-event.done{background:#e2e8f0;color:#475569}
.day .manpower-count{margin-top:4px;font-size:9px;color:#64748b;font-weight:700}
.schedule-manpower{margin-top:14px}.manpower-grid{display:grid;gap:8px}.manpower-row{display:grid;grid-template-columns:90px minmax(0,1fr) 70px;gap:10px;align-items:center;padding:10px 11px;border:1px solid #edf1f5;border-radius:10px;background:#fff}.manpower-row .date{font-weight:850;font-size:11px}.manpower-row .people{font-size:11px;color:#475569;min-width:0}.manpower-row .count{text-align:right;font-size:11px;font-weight:850;color:#1d4ed8}
.status-badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:850}.status-badge.upcoming{background:#dbeafe;color:#1e40af}.status-badge.running{background:#dcfce7;color:#166534}.status-badge.done{background:#e2e8f0;color:#475569}

/* statistics */
.stats-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.stats-bars{display:grid;gap:9px}.stats-bar-row{display:grid;grid-template-columns:42px minmax(0,1fr) 110px;gap:8px;align-items:center}.stats-bar-row>span{font-size:10px;color:#64748b}.stats-track{height:10px;background:#eef2f6;border-radius:999px;overflow:hidden}.stats-fill{height:100%;border-radius:999px;background:#2563eb}.stats-fill.green{background:#10b981}.stats-fill.red{background:#ef4444}.stats-bar-row>b{text-align:right;font-size:10px}
.stats-table{min-width:920px}

@media(max-width:980px){
  .nav-group-title{padding-left:12px}
  .pnl-strip{grid-template-columns:repeat(4,1fr)}
  .org-list{grid-template-columns:repeat(2,1fr)}
  .manpower-row{grid-template-columns:72px minmax(0,1fr) 55px}
}
@media(max-width:560px){
  #nav button{font-size:13px;padding:10px 11px}
  #nav .nav-text{font-size:13px;line-height:1.25}
  .org-list{grid-template-columns:1fr}
  .pnl-strip{grid-template-columns:repeat(3,1fr)}
  .schedule-legend{margin-top:4px}
  .day{min-height:84px;padding:5px}.events .schedule-event{font-size:8px;padding:3px 4px}.day .manpower-count{font-size:8px}
  .manpower-row{grid-template-columns:66px minmax(0,1fr) 48px;padding:8px}.manpower-row .people{font-size:10px}
  .stats-bar-row{grid-template-columns:34px minmax(0,1fr) 88px}
}


/* restored bottom quick menu */
.bottom-quick{display:none}
.danger-link{color:#b91c1c!important;border-color:#fecaca!important;background:#fff5f5!important}
@media(max-width:980px){
  .clean-shell main{padding-bottom:82px}
  .bottom-quick{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    background:rgba(255,255,255,.97);border-top:1px solid #dfe6ef;
    box-shadow:0 -8px 26px rgba(15,23,42,.08);
    padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    backdrop-filter:blur(12px)
  }
  .bottom-quick button{
    border:0;background:transparent;color:#64748b;border-radius:10px;
    min-height:48px;display:grid;place-items:center;align-content:center;gap:2px;
    font-weight:800;padding:4px 2px
  }
  .bottom-quick button>span{font-size:19px;line-height:20px}
  .bottom-quick button>small{font-size:10px;line-height:13px;font-weight:800}
  .bottom-quick button.active{background:#eff6ff;color:#1d4ed8}
  #content{padding-bottom:16px}
}
@media(max-width:560px){
  .clean-shell main{padding-bottom:78px}
  .bottom-quick{padding-top:6px}
  .bottom-quick button{min-height:45px}
  .bottom-quick button>span{font-size:18px}
  .bottom-quick button>small{font-size:9px}
  .employee-table .actions{min-width:132px}
}


/* 3.4.4 mobile dashboard redesign + system inset fix */
:root{
  --system-top:24px;
  --system-bottom:44px;
  --dock-height:66px;
  --surface-soft:#f1f5f9;
  --navy:#10223f;
}
.sidebar-scrim{display:none}
.dash-hero{
  position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:24px 26px;margin-bottom:14px;border-radius:22px;
  background:linear-gradient(135deg,#10223f 0%,#17365f 52%,#245a98 100%);
  color:#fff;box-shadow:0 16px 38px rgba(15,35,65,.18)
}
.dash-hero:after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  right:-72px;top:-108px;background:rgba(255,255,255,.08)
}
.dash-hero>div{position:relative;z-index:1}
.dash-eyebrow{display:block;font-size:10px;letter-spacing:.13em;font-weight:900;color:#bfdbfe;margin-bottom:8px}
.dash-hero h2{margin:0;font-size:27px;line-height:1.12;letter-spacing:-.035em}
.dash-hero p{margin:8px 0 0;font-size:12px;line-height:1.5;color:#dbeafe}
.hero-chip{
  min-width:112px;min-height:86px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px)
}
.hero-chip small{font-size:10px;color:#dbeafe;font-weight:800}
.hero-chip b{font-size:31px;line-height:1;margin-top:6px}
.hero-chip em{font-size:10px;font-style:normal;color:#dbeafe;margin-top:2px}

.dash-shortcuts{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px
}
.dash-shortcuts button{
  border:1px solid #e3eaf3;background:#fff;border-radius:16px;padding:13px 9px;
  text-align:left;min-height:88px;box-shadow:0 4px 14px rgba(15,23,42,.04);
  display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center
}
.dash-shortcuts button>span{
  grid-row:1/3;width:34px;height:34px;border-radius:10px;background:#eef5ff;color:#1d4ed8;
  display:grid;place-items:center;font-size:17px;font-weight:900
}
.dash-shortcuts button>b{font-size:12px;color:#172033;white-space:nowrap}
.dash-shortcuts button>small{font-size:9px;color:#8995a8;white-space:nowrap}
.dash-shortcuts button:active{transform:translateY(1px);background:#f8fbff}

.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.metric-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid #e4eaf2;border-radius:17px;
  padding:15px 16px;min-height:112px;box-shadow:0 4px 14px rgba(15,23,42,.035)
}
.metric-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#2563eb}
.metric-card.green:before{background:#10b981}.metric-card.violet:before{background:#7c3aed}.metric-card.red:before{background:#ef4444}
.metric-card>span{display:block;font-size:11px;color:#728096;font-weight:800}
.metric-card>b{display:block;font-size:22px;line-height:1.14;letter-spacing:-.025em;color:#172033;margin-top:9px;word-break:keep-all}
.metric-card>small{display:block;font-size:9px;color:#94a3b8;margin-top:7px;line-height:1.35}
.modern-panel{border-radius:18px;box-shadow:0 5px 18px rgba(15,23,42,.035);border-color:#e4eaf2}
.modern-panels{gap:12px}.pnl-panel{margin-top:2px}

.clean-shell>main>header{
  background:rgba(255,255,255,.98);
  box-shadow:0 3px 14px rgba(15,23,42,.045)
}
.header-person b{color:#172033}
.sync-btn{border-color:#dbe4ef;background:#fff}
.role-pill.admin{background:#fff1f2;color:#be123c;border:1px solid #ffe4e6}

@media(max-width:980px){
  html,body{background:#edf2f8}
  .clean-shell>main{
    padding-bottom:calc(var(--dock-height) + var(--system-bottom) + 28px)
  }
  .clean-shell>main>header{
    box-sizing:border-box;
    height:calc(var(--header) + var(--system-top));
    padding-top:var(--system-top);
    padding-left:12px;padding-right:12px;
    position:sticky;top:0
  }
  .hamb{
    width:42px;height:42px;border-radius:13px;background:#eef3f8;
    color:#1e293b;font-size:21px
  }
  #content{padding:16px 12px 20px}
  .sidebar{
    top:0;bottom:0;
    padding-top:calc(18px + var(--system-top));
    padding-bottom:calc(14px + var(--system-bottom));
    border-radius:0 24px 24px 0;
    box-shadow:18px 0 44px rgba(15,23,42,.20)
  }
  .sidebar-scrim{
    position:fixed;inset:0;z-index:39;background:rgba(15,23,42,.38);backdrop-filter:blur(2px)
  }
  .sidebar-scrim.show{display:block}
  .side-brand{padding-bottom:13px}
  #nav{padding-top:10px}
  .dash-hero{padding:20px 18px;border-radius:20px;margin-bottom:12px}
  .dash-hero h2{font-size:24px}.dash-hero p{font-size:11px;max-width:260px}
  .hero-chip{min-width:82px;min-height:76px;border-radius:16px}
  .hero-chip b{font-size:27px}
  .dash-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
  .dash-shortcuts button{
    min-height:77px;border-radius:15px;padding:10px 8px;
    grid-template-columns:28px minmax(0,1fr);column-gap:7px
  }
  .dash-shortcuts button>span{width:28px;height:28px;border-radius:9px;font-size:14px}
  .dash-shortcuts button>b{font-size:11px}.dash-shortcuts button>small{font-size:8px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}
  .metric-card{min-height:103px;padding:14px 13px;border-radius:16px}
  .metric-card>b{font-size:20px}.metric-card>span{font-size:10px}.metric-card>small{font-size:9px}
  .modern-panels{grid-template-columns:1fr}
  .modern-panel{border-radius:17px}
  .bottom-quick{
    left:10px;right:10px;
    bottom:calc(var(--system-bottom) + 8px);
    min-height:var(--dock-height);
    border:1px solid #dfe7f0;border-radius:21px;
    padding:7px 7px;
    background:rgba(255,255,255,.985);
    box-shadow:0 12px 34px rgba(15,23,42,.20);
    overflow:hidden
  }
  .bottom-quick button{
    min-height:50px;border-radius:14px;color:#68778d;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px
  }
  .bottom-quick button>span{font-size:18px;line-height:19px;font-weight:900}
  .bottom-quick button>small{display:block;font-size:10px;line-height:12px;font-weight:900;color:inherit}
  .bottom-quick button.active{background:#eaf2ff;color:#1d4ed8}
  .toast{bottom:calc(var(--system-bottom) + var(--dock-height) + 22px)}
}

@media(max-width:560px){
  .header-person b{font-size:13px}.header-person small{font-size:10px}
  .sync-btn{font-size:10px;padding:7px 8px}.role-pill{font-size:9px;padding:5px 7px}
  .dash-hero{padding:18px 16px;gap:10px}
  .dash-hero h2{font-size:23px}
  .dash-hero p{font-size:10px}
  .hero-chip{min-width:74px;min-height:70px}
  .hero-chip b{font-size:25px}
  .dash-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-shortcuts button{min-height:72px;padding:9px 7px}
  .dash-shortcuts button>small{display:none}
  .metric-card{min-height:98px}
  .metric-card>b{font-size:18px}
  .pnl-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* 3.4.5 company header + top menu */
.company-header{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.company-brand{
  display:flex;align-items:center;gap:10px;min-width:0;flex:1
}
.company-logo-mark{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,#1d4ed8,#0f2e57);
  color:#fff;font-size:13px;font-weight:950;letter-spacing:-.03em;
  box-shadow:0 6px 16px rgba(29,78,216,.22)
}
.company-logo-mark.small{width:36px;height:36px;border-radius:11px;font-size:11px}
.company-brand>div:last-child{min-width:0}
.company-brand b{
  display:block;font-size:15px;color:#172033;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.company-brand small{display:block;margin-top:3px;color:#7b8799;font-size:10px}
.user-mini{
  min-width:0;text-align:right;line-height:1.1
}
.user-mini span{
  display:block;font-size:11px;font-weight:850;color:#334155;white-space:nowrap
}
.user-mini small{
  display:block;margin-top:3px;font-size:9px;color:#94a3b8;white-space:nowrap
}
.top-primary-menu{
  position:sticky;top:var(--header);z-index:25;
  display:flex;align-items:center;gap:7px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;
  background:#fff;border-bottom:1px solid #e5eaf1;
  padding:9px 18px;
  box-shadow:0 3px 12px rgba(15,23,42,.03)
}
.top-primary-menu::-webkit-scrollbar{display:none}
.top-primary-menu button{
  flex:0 0 auto;border:1px solid #e4eaf2;background:#fff;color:#46556b;
  border-radius:11px;padding:8px 11px;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:850;white-space:nowrap
}
.top-primary-menu button>span{color:#64748b;font-size:13px;font-weight:900}
.top-primary-menu button.active{
  background:#edf4ff;border-color:#cfe0ff;color:#1d4ed8
}
.top-primary-menu button.active>span{color:#1d4ed8}
.load-recovery{
  min-height:260px;background:#fff;border:1px solid #e4eaf2;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;box-shadow:0 6px 18px rgba(15,23,42,.04)
}
.load-recovery h3{margin:14px 0 6px;font-size:17px}
.load-recovery p{max-width:520px;margin:0 0 16px;color:#64748b;font-size:11px;line-height:1.5;word-break:break-word}

@media(max-width:980px){
  .company-header{
    height:calc(66px + var(--system-top))!important;
    padding-top:var(--system-top)!important
  }
  .company-brand{gap:8px}
  .company-logo-mark{width:39px;height:39px;border-radius:12px}
  .company-brand b{font-size:14px}
  .company-brand small{font-size:9px}
  .user-mini{display:none}
  .top-primary-menu{
    top:calc(66px + var(--system-top));
    padding:8px 10px;
    gap:6px
  }
  .top-primary-menu button{
    padding:8px 10px;border-radius:10px;font-size:10px
  }
  .top-primary-menu button>span{font-size:12px}
  #content{padding-top:12px}
}

@media(max-width:560px){
  .company-header{gap:8px!important}
  .company-brand b{font-size:13px}
  .company-brand small{font-size:9px}
  .company-logo-mark{width:37px;height:37px}
  .sync-btn{padding:7px 8px}
  .top-primary-menu{
    padding-left:10px;padding-right:10px
  }
  .top-primary-menu button{
    padding:8px 9px;font-size:10px
  }
}


/* 3.4.6 self attendance controls */
.self-clock-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:1px solid #e3eaf2;border-radius:18px;
  padding:15px 16px;margin:0 0 14px;
  box-shadow:0 5px 18px rgba(15,23,42,.04)
}
.self-clock-info{display:flex;align-items:center;gap:14px;min-width:0}
.self-clock-label{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;height:34px;border-radius:10px;background:#eef5ff;
  color:#1d4ed8;font-size:10px;font-weight:900
}
.self-clock-info>div{min-width:0}
.self-clock-info b{display:block;font-size:15px;color:#172033}
.self-clock-info small{
  display:block;margin-top:4px;color:#748197;font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.self-clock-actions{display:flex;gap:8px;flex:0 0 auto}
.self-clock-actions button{
  min-width:92px;border:0;border-radius:12px;padding:11px 14px;
  font-size:12px;font-weight:900
}
.clock-in-btn{background:#1d4ed8;color:#fff}
.clock-out-btn{background:#0f766e;color:#fff}
.self-clock-actions button:disabled{
  background:#e8edf3!important;color:#9aa6b5!important;box-shadow:none;cursor:default
}
.self-clock-actions button:not(:disabled):active{transform:translateY(1px)}

@media(max-width:560px){
  .self-clock-card{display:block;padding:13px 13px;border-radius:16px}
  .self-clock-info{gap:10px}
  .self-clock-label{min-width:78px;height:31px;font-size:9px}
  .self-clock-info b{font-size:14px}
  .self-clock-info small{font-size:9px}
  .self-clock-actions{margin-top:12px;display:grid;grid-template-columns:1fr 1fr}
  .self-clock-actions button{width:100%;min-width:0;padding:12px 10px;font-size:12px}
}


/* 3.4.7 site picker + full statistics */
.clock-modal{max-width:620px}
.clock-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.clock-modal-head h3{margin:0;font-size:18px}
.clock-modal-head p{margin:5px 0 0;color:#718096;font-size:11px;line-height:1.45}
.clock-modal-head>button{border:0;background:#eef2f7;color:#475569;width:34px;height:34px;border-radius:10px;font-size:20px}
.clock-site-list{display:grid;gap:8px;max-height:270px;overflow:auto;padding:1px}
.clock-site-option{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid #e1e8f1;background:#fff;border-radius:13px;padding:12px;
  text-align:left;color:#263247
}
.clock-site-option span{min-width:0}
.clock-site-option b{display:block;font-size:12px}
.clock-site-option small{display:block;margin-top:4px;color:#7b8799;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock-site-option em{font-style:normal;flex:0 0 auto;border-radius:999px;padding:5px 7px;background:#eef5ff;color:#1d4ed8;font-size:9px;font-weight:850}
.clock-site-option.selected{border-color:#93b8ff;background:#edf5ff;box-shadow:0 0 0 2px rgba(37,99,235,.08)}
.clock-site-empty{padding:22px 12px;text-align:center;background:#f8fafc;border:1px dashed #d8e0ea;border-radius:12px;color:#7b8799;font-size:11px}
.clock-direct{display:flex;align-items:center;gap:10px;margin:14px 0 4px;color:#94a3b8;font-size:9px}
.clock-direct:before,.clock-direct:after{content:"";height:1px;background:#e5eaf1;flex:1}

.stats-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.stats-module-grid button{
  border:1px solid #e3e9f1;background:#fff;border-radius:15px;padding:14px;text-align:left;
  min-height:98px;box-shadow:0 4px 14px rgba(15,23,42,.035)
}
.stats-module-grid button span{display:block;color:#64748b;font-size:10px;font-weight:850}
.stats-module-grid button b{display:block;color:#172033;font-size:18px;margin-top:8px;letter-spacing:-.02em}
.stats-module-grid button small{display:block;color:#94a3b8;font-size:9px;margin-top:5px;line-height:1.35}
.stats-module-grid button:active{background:#eff6ff;border-color:#bfdbfe}
.stats-kpis .stat em{font-style:normal;color:#94a3b8;font-size:9px;margin-top:6px}
.stats-section{margin-bottom:12px}
.stats-section>h3{margin-bottom:12px}
.stats-employee-table{min-width:980px}
.stats-employee-table td:first-child small{display:block;margin-top:3px;color:#94a3b8;font-size:9px}
.stats-year-table{min-width:1400px}
.stats-money-list{display:grid}
.stats-money-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eef2f6}
.stats-money-list>div:last-child{border-bottom:0}
.stats-money-list span{font-size:11px;color:#64748b}
.stats-money-list b{font-size:12px;text-align:right}
.stats-money-list .total{padding-top:13px;font-weight:900}
.stats-detail-grid{align-items:start}

@media(max-width:980px){
  .stats-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .clock-modal-bg{align-items:end;padding:0}
  .clock-modal{max-height:88vh;width:100%;border-radius:22px 22px 0 0;padding:17px 14px calc(18px + var(--system-bottom))}
  .clock-site-list{max-height:240px}
  .clock-site-option{padding:11px}
  .stats-module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stats-module-grid button{min-height:88px;padding:12px}
  .stats-module-grid button b{font-size:15px}
  .stats-module-grid button small{font-size:8px}
}


/* 3.4.8 restored receipt workflow */
.receipt-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;background:#fff;border:1px solid #e3e9f1;border-radius:15px;
  padding:10px 12px;box-shadow:0 4px 14px rgba(15,23,42,.035)
}
.receipt-toolbar .input,.receipt-toolbar select{min-width:145px}
.receipt-toolbar-actions{margin-left:auto;display:flex;gap:7px}
.receipt-stats{margin-bottom:12px}
.receipt-table{min-width:900px}
.receipt-table td.num{text-align:right;white-space:nowrap}
.receipt-actions{min-width:180px;flex-wrap:wrap}
.receipt-reason{
  display:block;margin-top:4px;color:#b91c1c;font-size:9px;line-height:1.35;
  max-width:180px;white-space:normal
}
.receipt-note{margin-top:10px}
.receipt-modal{max-width:620px}
.receipt-file{padding:9px}
.receipt-preview-wrap{
  margin-top:12px;border:1px solid #e3e9f1;border-radius:14px;
  background:#f8fafc;padding:10px;text-align:center
}
.receipt-preview-wrap img{
  max-width:100%;max-height:280px;border-radius:10px;object-fit:contain
}
.receipt-photo-modal{max-width:700px}
.receipt-photo-modal>img{
  display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:12px;
  background:#f1f5f9;object-fit:contain
}
.badge.orange{background:#fff7ed!important;color:#c2410c!important}
.badge.blue{background:#eff6ff!important;color:#1d4ed8!important}
.badge.green{background:#ecfdf5!important;color:#047857!important}
.badge.red{background:#fef2f2!important;color:#b91c1c!important}

@media(max-width:720px){
  .receipt-toolbar{display:grid;grid-template-columns:1fr 1fr}
  .receipt-toolbar .input,.receipt-toolbar select{min-width:0;width:100%}
  .receipt-toolbar-actions{grid-column:1/3;margin-left:0;display:grid;grid-template-columns:1fr 1fr}
  .receipt-toolbar-actions .btn{width:100%}
}
@media(max-width:560px){
  .receipt-modal-bg,.receipt-photo-bg{align-items:end;padding:0}
  .receipt-modal,.receipt-photo-modal{
    width:100%;max-height:90vh;overflow:auto;border-radius:22px 22px 0 0;
    padding-bottom:calc(18px + var(--system-bottom))
  }
  .receipt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* 3.4.9 department + receipt photo chooser */
.receipt-photo-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
.receipt-photo-btn{
  border:1px solid #dbe5f0;
  background:#fff;
  border-radius:14px;
  padding:14px 12px;
  text-align:left;
  min-height:92px;
  box-shadow:0 4px 12px rgba(15,23,42,.035);
}
.receipt-photo-btn span{
  display:inline-grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:10px;
  background:#eef5ff;
  color:#1d4ed8;
  font-weight:900;
  margin-bottom:8px;
}
.receipt-photo-btn b{
  display:block;
  color:#172033;
  font-size:13px;
}
.receipt-photo-btn small{
  display:block;
  margin-top:4px;
  color:#7b8799;
  font-size:9px;
}
.receipt-photo-btn:active{
  transform:translateY(1px);
  border-color:#9dbcf4;
  background:#f7fbff;
}
.receipt-hidden-file{
  position:absolute!important;
  width:1px!important;height:1px!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.receipt-file-help{
  display:block;
  margin-top:7px;
  color:#94a3b8;
  font-size:9px;
}
.receipt-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.receipt-preview-head span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#475569;
  font-size:10px;
  font-weight:800;
}
.receipt-preview-head button{
  border:0;
  background:#eef2f7;
  color:#475569;
  border-radius:9px;
  padding:7px 9px;
  font-size:9px;
  font-weight:800;
}

@media(max-width:560px){
  .receipt-photo-actions{grid-template-columns:1fr 1fr;gap:8px}
  .receipt-photo-btn{min-height:84px;padding:12px 10px}
  .receipt-photo-btn b{font-size:12px}
}


/* 3.5.0 attendance restore visibility */
.attendance-restore-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding:11px 13px;border-radius:13px;
  background:#eff6ff;border:1px solid #cfe0ff;color:#1e3a5f;
}
.attendance-restore-banner b{font-size:11px;color:#1d4ed8}
.attendance-restore-banner span{font-size:10px;line-height:1.45;color:#52647a}
.att-month-chips{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 10px;padding:1px 0 3px
}
.att-month-chips::-webkit-scrollbar{display:none}
.att-month-chip{
  flex:0 0 auto;border:1px solid #dce5ef;background:#fff;color:#64748b;
  border-radius:999px;padding:7px 11px;font-size:10px;font-weight:850
}
.att-month-chip.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}


/* 3.5.1 source-accurate September + receipt CTA */
.attendance-source-note{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding:11px 13px;border-radius:13px;
  background:#fffaf0;border:1px solid #f6d89c;color:#6b4f20;
}
.attendance-source-note b{font-size:11px;color:#a16207}
.attendance-source-note span{font-size:10px;line-height:1.5;color:#785f37}

.receipt-register-hero{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:12px;padding:18px 18px;border-radius:18px;
  background:linear-gradient(135deg,#0f2e57 0%,#1d4ed8 100%);
  color:#fff;box-shadow:0 10px 24px rgba(29,78,216,.18)
}
.receipt-register-hero>div{min-width:0}
.receipt-register-hero span{
  display:block;font-size:9px;letter-spacing:.08em;font-weight:900;color:#bfdbfe
}
.receipt-register-hero b{
  display:block;margin-top:5px;font-size:18px;line-height:1.25;color:#fff
}
.receipt-register-hero small{
  display:block;margin-top:5px;font-size:10px;line-height:1.45;color:#dbeafe
}
.receipt-primary-add{
  flex:0 0 auto;min-width:154px;padding:12px 16px!important;
  background:#fff!important;color:#1d4ed8!important;
  border:0!important;border-radius:12px!important;font-weight:900!important;
  box-shadow:0 5px 14px rgba(0,0,0,.12)
}

@media(max-width:560px){
  .receipt-register-hero{display:block;padding:15px;border-radius:16px}
  .receipt-register-hero b{font-size:16px}
  .receipt-register-hero small{font-size:9px}
  .receipt-primary-add{width:100%;margin-top:12px;min-height:46px}
}


/* 3.6.0 configurable settings, print and monthly backup */
.settings-section{margin-bottom:14px}
.settings-section>h3,.settings-section-head h3{margin:0 0 5px}
.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.settings-section-head p{margin:0;color:#7b8799;font-size:10px;line-height:1.45}
.settings-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-role-card{
  border:1px solid #e3e9f1;border-radius:15px;padding:14px;background:#fbfdff
}
.settings-role-card h4,.settings-section h4{
  margin:4px 0 10px;font-size:12px;color:#263247
}
.settings-role-card h4:not(:first-child),.settings-section h4:not(:first-child){margin-top:18px}
.settings-menu-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px
}
.settings-menu-check{
  display:flex;align-items:flex-start;gap:9px;border:1px solid #e4eaf2;background:#fff;
  border-radius:12px;padding:10px;cursor:pointer;min-height:58px
}
.settings-menu-check input{margin-top:3px;accent-color:#1d4ed8}
.settings-menu-check span{min-width:0}
.settings-menu-check b{display:block;color:#263247;font-size:11px}
.settings-menu-check small{display:block;margin-top:3px;color:#94a3b8;font-size:8px;line-height:1.3}
.settings-menu-check:has(input:checked){border-color:#b8d0ff;background:#f4f8ff}
.quick-slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.quick-slot{display:block}
.quick-slot>span{display:block;margin-bottom:4px;color:#7b8799;font-size:8px;font-weight:850}
.quick-slot select{width:100%;min-width:0}
.settings-switch{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid #eef2f6
}
.settings-switch:last-child{border-bottom:0}
.settings-switch span{min-width:0}
.settings-switch b{display:block;font-size:11px;color:#334155}
.settings-switch small{display:block;margin-top:3px;color:#94a3b8;font-size:8px}
.settings-switch input{width:18px;height:18px;accent-color:#1d4ed8;flex:0 0 auto}
.settings-save-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.monthly-backup-box{
  display:grid;grid-template-columns:minmax(170px,240px) 1fr minmax(220px,1fr);
  gap:12px;align-items:end
}
.backup-actions{display:flex;gap:8px;flex-wrap:wrap}
.backup-summary{
  border:1px solid #e4eaf2;background:#f8fafc;border-radius:12px;padding:10px 12px
}
.backup-summary span{display:block;color:#94a3b8;font-size:8px}
.backup-summary b{display:block;margin-top:3px;color:#334155;font-size:11px}
.backup-summary small{display:block;margin-top:4px;color:#7b8799;font-size:8px;line-height:1.4}
.global-print-btn{white-space:nowrap}

@media(max-width:980px){
  .settings-role-grid{grid-template-columns:1fr}
  .quick-slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .monthly-backup-box{grid-template-columns:1fr 1fr}
  .backup-summary{grid-column:1/3}
}
@media(max-width:560px){
  .settings-menu-grid{grid-template-columns:1fr 1fr}
  .quick-slot-grid{grid-template-columns:1fr 1fr}
  .monthly-backup-box{grid-template-columns:1fr}
  .backup-summary{grid-column:auto}
  .backup-actions{display:grid;grid-template-columns:1fr}
  .backup-actions .btn{width:100%}
  .settings-save-row{display:grid;grid-template-columns:1fr}
  .settings-save-row .btn{width:100%}
}

@media print{
  @page{margin:10mm}
  body{background:#fff!important}
  .sidebar,.sidebar-scrim,.company-header,.top-primary-menu,.bottom-quick,
  .toast,.global-print-btn,.sync-btn,.receipt-primary-add,
  #hamb,.page-title .row-wrap button,.toolbar button,.actions button{
    display:none!important
  }
  .app-shell,.clean-shell,main,#content{
    display:block!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:0!important;background:#fff!important
  }
  #content{padding:0!important}
  .page-title{margin:0 0 10px!important}
  .card,.stat,.self-clock-card,.settings-section{
    box-shadow:none!important;break-inside:avoid
  }
  .table-wrap{overflow:visible!important;max-height:none!important}
  table{width:100%!important;font-size:9px!important}
  th,td{padding:5px!important}
  .calendar{break-inside:auto}
}


/* 3.6.1 payroll statement print redesign */
.payroll-print-area{
  background:#eef2f6;
  padding:18px;
}
.payroll-statement{
  background:#fff;
  color:#111827;
  max-width:900px;
  margin:0 auto;
  padding:28px 30px;
  border:1px solid #d7dde5;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.payroll-print-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:15px;
  border-bottom:2px solid #172033;
}
.payroll-company span{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  color:#64748b;
}
.payroll-company b{
  display:block;
  margin-top:5px;
  font-size:16px;
  color:#172033;
}
.payroll-title-block{text-align:right}
.payroll-title-block h1{
  margin:0!important;
  text-align:right!important;
  font-size:24px!important;
  letter-spacing:.18em;
  color:#111827;
}
.payroll-title-block p{
  margin:6px 0 0;
  font-size:10px;
  color:#64748b;
}
.payroll-statement table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.payroll-statement th,
.payroll-statement td{
  border:1px solid #cfd6df;
  padding:7px 8px;
  font-size:10px;
  line-height:1.35;
  vertical-align:middle;
  word-break:keep-all;
}
.payroll-statement th{
  background:#f3f6f9;
  color:#344054;
  font-weight:850;
}
.payroll-statement td.num,
.payroll-statement th.num{text-align:right;white-space:nowrap}
.payroll-statement .center{text-align:center}
.payroll-info-table{margin-top:14px}
.payroll-info-table th{width:11%}
.payroll-info-table td{width:22%}
.payroll-two-tables{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.payroll-two-tables h2,
.payroll-section h2{
  margin:0 0 6px;
  font-size:11px;
  color:#172033;
}
.payroll-money-table th:nth-child(1){width:28%}
.payroll-money-table th:nth-child(2){width:42%}
.payroll-money-table th:nth-child(3){width:30%}
.payroll-money-table .subtotal td{
  background:#f8fafc;
  font-weight:900;
}
.payroll-money-table .subtotal td:first-child{text-align:right}
.payroll-summary-table{
  margin-top:12px;
  border:2px solid #172033!important;
}
.payroll-summary-table th,
.payroll-summary-table td{
  border-color:#aeb8c4;
  padding:10px 9px;
  font-size:11px;
}
.payroll-summary-table td{
  text-align:right;
  font-weight:850;
}
.payroll-summary-table .net-label{
  background:#eaf2ff;
  color:#174ea6;
}
.payroll-summary-table .net-value{
  background:#eaf2ff;
  color:#174ea6;
  font-size:14px;
  font-weight:950;
}
.payroll-section{margin-top:14px}
.payroll-detail-table td{text-align:center}
.payroll-work-summary th{font-size:9px}
.payroll-attendance-table{
  font-size:9px;
}
.payroll-attendance-table thead{
  display:table-header-group;
}
.payroll-attendance-table tfoot{
  display:table-row-group;
}
.payroll-attendance-table tr{
  break-inside:avoid;
  page-break-inside:avoid;
}
.payroll-attendance-table th,
.payroll-attendance-table td{
  padding:5px 5px;
  font-size:9px;
}
.payroll-attendance-table th:nth-child(1){width:5%}
.payroll-attendance-table th:nth-child(2){width:12%}
.payroll-attendance-table th:nth-child(3){width:28%}
.payroll-attendance-table th:nth-child(4){width:10%}
.payroll-attendance-table th:nth-child(5){width:9%}
.payroll-attendance-table th:nth-child(6){width:11%}
.payroll-attendance-table th:nth-child(7){width:11%}
.payroll-attendance-table th:nth-child(8){width:8%}
.payroll-attendance-table tfoot th{
  background:#eef2f6;
  font-weight:900;
}
.payroll-attendance-table .muted-cell{color:#94a3b8;padding:16px}
.payroll-confirm{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid #cfd6df;
}
.payroll-confirm p{
  margin:0 0 18px;
  text-align:center;
  font-size:10px;
  color:#475569;
}
.payroll-sign-row{
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:10px;
}
.payroll-sign-row b{margin-left:8px}
.payroll-print-foot{
  margin-top:16px;
  padding-top:8px;
  border-top:1px solid #e5e7eb;
  text-align:right;
  font-size:8px;
  color:#98a2b3;
}

@media(max-width:700px){
  .payroll-print-area{padding:0}
  .payroll-statement{
    padding:16px 12px;
    border-radius:0;
    box-shadow:none;
  }
  .payroll-print-head{align-items:flex-start}
  .payroll-title-block h1{font-size:19px!important}
  .payroll-two-tables{grid-template-columns:1fr}
  .payroll-statement th,.payroll-statement td{font-size:9px;padding:6px 5px}
  .payroll-info-table th{width:auto}
  .payroll-info-table td{width:auto}
  .payroll-sign-row{display:grid;gap:8px}
}

@media print{
  .payroll-print-area{
    padding:0!important;
    background:#fff!important;
  }
  .payroll-statement{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    color:#000!important;
  }
  .payroll-print-head{
    padding-bottom:8px!important;
    margin-bottom:0!important;
  }
  .payroll-title-block h1{font-size:20px!important}
  .payroll-company b{font-size:13px!important}
  .payroll-info-table{margin-top:8px!important}
  .payroll-two-tables{gap:8px!important;margin-top:8px!important}
  .payroll-summary-table{margin-top:8px!important}
  .payroll-section{margin-top:9px!important}
  .payroll-statement th,.payroll-statement td{
    padding:4px 5px!important;
    font-size:8.5px!important;
    line-height:1.25!important;
  }
  .payroll-two-tables h2,.payroll-section h2{
    margin-bottom:4px!important;
    font-size:9px!important;
  }
  .payroll-summary-table th,.payroll-summary-table td{
    padding:6px!important;
    font-size:9px!important;
  }
  .payroll-summary-table .net-value{font-size:11px!important}
  .payroll-attendance-table thead{display:table-header-group!important}
  .payroll-attendance-table tr{break-inside:avoid!important;page-break-inside:avoid!important}
  .payroll-confirm{margin-top:10px!important;padding-top:8px!important}
  .payroll-confirm p{margin-bottom:10px!important;font-size:8px!important}
  .payroll-sign-row{font-size:8px!important}
  .payroll-print-foot{margin-top:8px!important;font-size:7px!important}
  @page{size:A4 portrait;margin:8mm}
}


/* 3.6.2 org call + leave management */
.org-phone-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:7px;padding:7px 9px;border-radius:10px;
  background:#eff6ff;border:1px solid #cfe0ff;
  color:#1d4ed8;text-decoration:none;width:max-content;max-width:100%;
}
.org-phone-link span{font-size:12px;line-height:1}
.org-phone-link b{font-size:11px;white-space:nowrap}
.org-phone-link em{
  font-style:normal;font-size:8px;font-weight:900;
  padding:3px 5px;border-radius:999px;background:#1d4ed8;color:#fff
}
.org-phone-link:active{transform:translateY(1px);background:#dbeafe}
.org-phone-self,.org-phone-empty{margin-top:5px}

.leave-toolbar{justify-content:space-between}
.leave-toolbar input{max-width:130px}
.leave-kpis{margin-bottom:12px}
.leave-admin-card{margin-bottom:12px}
.leave-balance-table{min-width:760px}
.leave-request-table{min-width:900px}
.leave-request-table td{vertical-align:middle}
.leave-reject-reason{
  display:block;margin-top:4px;color:#b91c1c;font-size:8px;
  max-width:160px;white-space:normal;line-height:1.35
}
.leave-modal{max-width:650px}
.badge.slate{background:#f1f5f9!important;color:#475569!important}

@media(max-width:560px){
  .org-phone-link{
    min-height:38px;padding:9px 10px;
  }
  .org-phone-link b{font-size:12px}
  .leave-toolbar{
    display:grid;grid-template-columns:1fr 1fr;
  }
  .leave-toolbar input,.leave-toolbar button{width:100%;max-width:none}
  .leave-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leave-modal-bg{align-items:end;padding:0}
  .leave-modal{
    width:100%;max-height:90vh;border-radius:22px 22px 0 0;
    padding-bottom:calc(18px + var(--system-bottom))
  }
}


/* 3.7.0 attendance calendar + live workforce */
.worktime-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.worktime-preview{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #dbe5f0;
  border-radius:13px;
  background:#f8fafc;
}
.worktime-preview span{
  display:block;
  color:#94a3b8;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}
.worktime-preview b{
  display:block;
  margin-top:4px;
  color:#263247;
  font-size:12px;
}
.worktime-preview small{
  display:block;
  margin-top:4px;
  color:#7b8799;
  font-size:9px;
}

.attendance-shift-note{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 10px;
  border-radius:10px;
  background:#f1f5f9;
  color:#64748b;
  font-size:9px;
  font-weight:800;
}
.attendance-kpis{margin-bottom:12px}
.attendance-calendar-card{padding:12px}
.attendance-calendar{
  width:100%;
  min-width:0;
}
.attendance-week-head,
.attendance-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.attendance-week-head{
  border-bottom:1px solid #e6ebf2;
  margin-bottom:6px;
}
.attendance-week-head span{
  padding:7px 3px;
  text-align:center;
  color:#64748b;
  font-size:9px;
  font-weight:900;
}
.attendance-week-head .sun{color:#dc2626}
.attendance-week-head .sat{color:#2563eb}
.attendance-cal-cell{
  position:relative;
  min-height:105px;
  border:1px solid #edf1f5;
  background:#fff;
  padding:7px;
  text-align:left;
  overflow:hidden;
}
.attendance-cal-cell.empty{
  background:#fafbfc;
  border-color:#f4f6f8;
}
.attendance-cal-cell:not(.empty):active{
  background:#f4f8ff;
}
.attendance-cal-cell.today{
  box-shadow:inset 0 0 0 2px #93c5fd;
}
.attendance-cal-cell.selected{
  background:#eef5ff;
  box-shadow:inset 0 0 0 2px #2563eb;
  z-index:1;
}
.attendance-cal-cell.has-attendance .attendance-day-num{
  background:#1d4ed8;
  color:#fff;
}
.attendance-day-num{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  color:#334155;
  font-size:10px;
  font-weight:900;
}
.attendance-day-summary{
  margin-top:5px;
  min-width:0;
}
.attendance-day-summary b{
  display:block;
  color:#172033;
  font-size:10px;
}
.attendance-day-summary small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:7.5px;
}
.attendance-day-summary em{
  display:block;
  margin-top:4px;
  color:#475569;
  font-size:7.5px;
  font-style:normal;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attendance-day-summary.blank small{color:#c0c7d1}
.attendance-leave-chip{
  margin-top:5px;
  padding:3px 5px;
  border-radius:6px;
  background:#fff7ed;
  color:#c2410c;
  font-size:7px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.attendance-day-detail{margin-top:12px;margin-bottom:12px}
.attendance-day-leaves{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.attendance-day-leave-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border:1px solid #f0d7a7;
  border-radius:10px;
  background:#fffaf0;
}
.attendance-day-leave-row b{font-size:9px;color:#7c4a03}
.attendance-day-leave-row span{font-size:8px;font-weight:900;color:#c2410c}
.attendance-day-leave-row small{font-size:8px;color:#8a6b3a}
.attendance-month-table{margin-top:12px}

.dashboard-live-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.live-card{
  border:1px solid #e3e9f1;
  background:#fff;
  border-radius:16px;
  min-height:112px;
  padding:14px;
  text-align:left;
  box-shadow:0 5px 16px rgba(15,23,42,.04);
}
.live-card span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:900;
}
.live-card b{
  display:block;
  margin-top:7px;
  color:#172033;
  font-size:22px;
}
.live-card small{
  display:block;
  margin-top:6px;
  color:#7b8799;
  font-size:8px;
  line-height:1.45;
  max-height:2.9em;
  overflow:hidden;
}
.live-card.working{border-top:3px solid #10b981}
.live-card.annual{border-top:3px solid #8b5cf6}
.live-card.vacation{border-top:3px solid #f59e0b}
.live-card.leave{border-top:3px solid #64748b}
.live-card.construction{border-top:3px solid #2563eb}
.dashboard-people-panel{margin-bottom:12px}
.dashboard-people-groups{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.dashboard-people-groups>div{
  position:relative;
  padding:10px 10px 10px 24px;
  border:1px solid #e8edf3;
  border-radius:12px;
  background:#fbfdff;
  min-height:70px;
}
.dashboard-people-groups b{
  display:block;
  color:#334155;
  font-size:10px;
}
.dashboard-people-groups small{
  display:block;
  margin-top:5px;
  color:#7b8799;
  font-size:8px;
  line-height:1.4;
}
.status-dot{
  position:absolute;
  left:10px;
  top:12px;
  width:7px;
  height:7px;
  border-radius:999px;
}
.status-dot.green{background:#10b981}
.status-dot.violet{background:#8b5cf6}
.status-dot.orange{background:#f59e0b}
.status-dot.slate{background:#64748b}

.employee-status-table{min-width:1050px}
.employee-status-site{
  display:block;
  margin-top:3px;
  color:#7b8799;
  font-size:8px;
  max-width:110px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-resigned-row{
  opacity:.62;
  background:#fafafa;
}
.employee-status-kpis{margin-bottom:12px}
.badge.violet{background:#f3e8ff!important;color:#7e22ce!important}

@media(max-width:1100px){
  .dashboard-live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-people-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .worktime-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .attendance-calendar-card{
    overflow-x:auto;
    padding:8px;
  }
  .attendance-calendar{
    min-width:650px;
  }
  .attendance-cal-cell{min-height:92px}
  .dashboard-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .live-card{min-height:98px;padding:12px}
  .live-card b{font-size:18px}
}
@media(max-width:560px){
  .attendance-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .attendance-shift-note{
    grid-column:1/3;
    justify-content:center;
  }
  .attendance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .live-card{min-height:94px}
  .dashboard-people-groups{grid-template-columns:1fr 1fr}
  .worktime-grid{grid-template-columns:1fr 1fr}
}
@media print{
  .attendance-calendar{min-width:0!important}
  .attendance-cal-cell{min-height:70px!important}
  .attendance-month-table{break-before:page}
  .dashboard-live-grid,.dashboard-people-groups{break-inside:avoid}
}


/* 3.7.1 ranked organization and employee lists */
.org-section-head>div{min-width:0}
.org-section-head>div small{
  display:block;
  margin-top:3px;
  color:#7b8799;
  font-size:8px;
  font-weight:750;
}
.org-list.ranked{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.org-list.ranked .org-card{
  position:relative;
  display:grid;
  grid-template-columns:26px 42px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.org-rank{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:#f1f5f9;
  color:#64748b;
  font-size:9px;
  font-weight:900;
}
.org-card.org-leader{
  border-color:#bfd4ff;
  background:linear-gradient(135deg,#f7faff 0%,#eef5ff 100%);
  box-shadow:0 5px 14px rgba(37,99,235,.07);
}
.org-card.org-leader .org-rank{
  background:#1d4ed8;
  color:#fff;
}
.leader-badge{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:7px;
  font-style:normal;
  font-weight:900;
  vertical-align:middle;
}
.employee-status-table tbody tr td:nth-child(3){
  font-weight:800;
  color:#334155;
}
@media(max-width:560px){
  .org-list.ranked .org-card{
    grid-template-columns:24px 38px minmax(0,1fr);
    gap:8px;
  }
}


/* 3.7.2 schedule inline, graphs and classic worklogs */
.schedule-summary-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.schedule-selected-detail{
  margin-top:12px;
  margin-bottom:12px;
  border:1px solid #dbe4ee;
  box-shadow:0 5px 16px rgba(15,23,42,.04);
}
.schedule-selected-actions{display:flex;gap:7px;flex-wrap:wrap}
.schedule-inline-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.schedule-inline-grid>div{
  min-width:0;
  border:1px solid #e8edf3;
  border-radius:11px;
  padding:10px;
  background:#fbfdff;
}
.schedule-inline-grid>div.full{grid-column:1/-1}
.schedule-inline-grid small{
  display:block;
  color:#94a3b8;
  font-size:8px;
  font-weight:850;
}
.schedule-inline-grid b{
  display:block;
  margin-top:4px;
  color:#263247;
  font-size:11px;
}
.schedule-inline-grid p{
  margin:5px 0 0;
  color:#475569;
  font-size:10px;
  line-height:1.55;
  white-space:pre-wrap;
}
.schedule-event.selected{
  outline:2px solid #172033;
  outline-offset:1px;
}
.schedule-edit-modal textarea{min-height:96px}

.daily-worklog-list{
  display:grid;
  gap:12px;
}
.daily-worklog-card{
  padding:0;
  overflow:hidden;
}
.daily-worklog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e7edf3;
}
.daily-worklog-head span{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  color:#64748b;
}
.daily-worklog-head h3{
  margin:3px 0 0;
  font-size:14px;
  color:#172033;
}
.daily-workers,
.daily-task-section{
  padding:14px 16px;
}
.daily-workers{
  border-bottom:1px solid #eef2f6;
}
.daily-workers h4,
.daily-task-section h4{
  margin:0 0 9px;
  color:#334155;
  font-size:10px;
}
.daily-workers h4 em{
  margin-left:5px;
  color:#1d4ed8;
  font-size:9px;
  font-style:normal;
}
.daily-worker-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}
.daily-worker-grid span{
  min-height:36px;
  display:grid;
  place-items:center;
  padding:7px;
  border:1px solid #dbe5ef;
  border-radius:9px;
  background:#fff;
  color:#334155;
  font-size:9px;
  font-weight:850;
  text-align:center;
}
.daily-worker-grid.modal-workers{grid-template-columns:repeat(4,minmax(0,1fr))}
.daily-task-table{min-width:680px}
.daily-task-table th:nth-child(1){width:7%}
.daily-task-table th:nth-child(2){width:22%}
.daily-task-table th:nth-child(3){width:48%}
.daily-task-table th:nth-child(4){width:23%}
.daily-worklog-note{
  display:flex;
  gap:10px;
  padding:10px 16px;
  border-top:1px solid #eef2f6;
  background:#fcfcfd;
}
.daily-worklog-note b{font-size:9px;color:#64748b}
.daily-worklog-note span{font-size:9px;color:#475569}
.worklog-toolbar{
  justify-content:space-between;
}
.worklog-toolbar input{max-width:170px}
.worklog-worker-checks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.worklog-worker-checks label{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:6px;
  align-items:start;
  min-height:52px;
  border:1px solid #dfe7f0;
  border-radius:10px;
  padding:8px;
  background:#fff;
}
.worklog-worker-checks input{
  grid-row:1/3;
  margin-top:3px;
  accent-color:#1d4ed8;
}
.worklog-worker-checks span{font-size:9px;font-weight:850;color:#334155}
.worklog-worker-checks small{font-size:7.5px;color:#94a3b8}
.worklog-edit-table{min-width:760px}
.worklog-edit-table input{min-width:0}
.worklog-time-pair{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:4px;
}
.worklog-time-pair span{font-size:9px;color:#94a3b8}
.worklog-modal-head small{
  display:block;
  margin-top:4px;
  color:#7b8799;
  font-size:9px;
}

.stats-graph-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
.stats-graph:nth-child(3){grid-column:1/-1}
.stats-graph{
  overflow:hidden;
  min-height:300px;
}
.graph-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.graph-head h3{
  margin:0;
  font-size:12px;
}
.graph-head small{
  display:block;
  margin-top:3px;
  color:#94a3b8;
  font-size:8px;
}
.graph-legend{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  font-size:8px;
  color:#64748b;
}
.graph-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.graph-legend span:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:2px;
}
.graph-legend .sales:before{background:#2563eb}
.graph-legend .purchase:before{background:#f59e0b}
.stats-graph svg{
  display:block;
  width:100%;
  height:auto;
  min-height:230px;
}
.graph-grid{
  stroke:#e9eef4;
  stroke-width:1;
}
.graph-zero{
  stroke:#94a3b8;
  stroke-width:1.2;
  stroke-dasharray:4 4;
}
.graph-sales{fill:#2563eb}
.graph-purchase{fill:#f59e0b}
.graph-attendance{fill:#6366f1}
.graph-profit-line{
  fill:none;
  stroke:#334155;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.graph-profit-pos{fill:#10b981}
.graph-profit-neg{fill:#ef4444}
.graph-label{
  fill:#64748b;
  font-size:9px;
}
.graph-value{
  fill:#475569;
  font-size:8px;
  font-weight:700;
}

@media(max-width:900px){
  .schedule-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .schedule-inline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daily-worker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .worklog-worker-checks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
  .schedule-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-graph-grid{grid-template-columns:1fr}
  .stats-graph:nth-child(3){grid-column:auto}
  .stats-graph{min-height:260px}
  .daily-worker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .worklog-worker-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daily-worklog-head{align-items:flex-start}
}
@media(max-width:480px){
  .schedule-inline-grid{grid-template-columns:1fr 1fr}
  .daily-worker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  .schedule-selected-actions,
  .daily-worklog-head .actions,
  .worklog-toolbar{
    display:none!important;
  }
  .daily-worklog-card{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .daily-worker-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .stats-graph{
    break-inside:avoid;
  }
}


/* 3.7.3 external workforce worklog */
.worklog-kpis,
.external-kpis{margin-bottom:12px}
.accent-orange{
  border-color:#fed7aa!important;
  background:#fffaf5!important;
}
.accent-orange b{color:#c2410c!important}
.daily-external-workers{
  padding:14px 16px;
  border-bottom:1px solid #eef2f6;
  background:#fffdf8;
}
.external-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.external-section-head h4{
  margin:0;
  color:#7c4a03;
  font-size:10px;
}
.external-section-head h4 em{
  margin-left:5px;
  font-style:normal;
  color:#c2410c;
  font-size:9px;
}
.external-section-head>b{
  color:#9a3412;
  font-size:10px;
}
.daily-external-table{min-width:700px}
.external-input-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.external-input-head label{
  display:block;
  color:#334155;
  font-size:10px;
  font-weight:850;
}
.external-input-head small{
  display:block;
  margin-top:3px;
  color:#7b8799;
  font-size:8px;
}
.external-entry-rows{
  display:grid;
  gap:9px;
}
.external-entry-row{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  background:#fbfdff;
}
.external-entry-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px;
  gap:7px;
  margin-bottom:8px;
}
.external-entry-top select{
  width:100%;
  min-width:0;
}
.ext-remove{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #fecaca;
  border-radius:9px;
  background:#fff;
  color:#dc2626;
  font-size:17px;
  font-weight:800;
}
.external-entry-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr 1.2fr .65fr .9fr .9fr;
  gap:7px;
  align-items:end;
}
.external-entry-grid label,
.external-entry-amount label{
  display:block;
  margin-bottom:4px;
  color:#7b8799;
  font-size:7.5px;
  font-weight:800;
}
.external-entry-amount{
  min-height:42px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.external-entry-amount b{
  min-height:34px;
  display:flex;
  align-items:center;
  padding:7px 8px;
  border:1px solid #fed7aa;
  border-radius:9px;
  background:#fff7ed;
  color:#c2410c;
  font-size:9px;
}
.external-toolbar{
  justify-content:space-between;
}
.external-toolbar input{max-width:170px}
.external-worker-table{min-width:1000px}

@media(max-width:900px){
  .external-entry-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:600px){
  .external-input-head{
    align-items:stretch;
    flex-direction:column;
  }
  .external-entry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .worklog-kpis,
  .external-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* 3.8.0 finance Excel import */
.finance-import-bg{
  align-items:flex-start;
  padding:18px;
  overflow:auto;
}
.finance-import-modal{
  width:min(1500px,96vw);
  max-width:none;
  max-height:none;
  margin:10px auto 30px;
}
.finance-import-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.finance-import-head h3{margin:0;font-size:16px}
.finance-import-head p{margin:4px 0 0;color:#7b8799;font-size:9px}
.finance-import-head>button{
  width:34px;height:34px;border:0;border-radius:10px;background:#f1f5f9;
  font-size:20px;color:#475569
}
.import-summary{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.import-summary span{
  display:inline-flex;align-items:center;gap:5px;padding:7px 10px;
  border-radius:999px;font-size:9px;font-weight:850
}
.import-summary .ok{background:#ecfdf3;color:#047857}
.import-summary .duplicate{background:#fff7ed;color:#c2410c}
.import-summary .error{background:#fef2f2;color:#b91c1c}
.import-account-box{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:8px;border:1px solid #dbe5ef;border-radius:12px;background:#f8fafc
}
.import-account-box label{font-size:9px;font-weight:850;color:#334155}
.import-account-box select{min-width:220px}
.import-account-box small{font-size:8px;color:#7b8799}
.import-help{
  margin-bottom:8px;padding:9px 11px;border-radius:10px;
  background:#f8fafc;color:#64748b;font-size:8.5px;line-height:1.45
}
.finance-import-table-wrap{
  max-height:62vh;
  border:1px solid #e5eaf0;
  border-radius:12px;
}
.finance-import-table{
  min-width:1050px;
}
.finance-import-table thead th{
  position:sticky;top:0;z-index:2;background:#eef3f8
}
.finance-import-table td{vertical-align:middle}
.finance-import-table .import-cell{
  min-width:90px;
  width:100%;
  padding:6px 7px;
  font-size:9px;
}
.finance-import-table td:nth-child(1){min-width:105px}
.import-row-duplicate{background:#fffaf2}
.import-row-error{background:#fff5f5}
.import-status{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:74px;padding:5px 7px;border-radius:999px;font-size:8px;font-weight:900
}
.import-status.ok{background:#dcfce7;color:#166534}
.import-status.duplicate{background:#ffedd5;color:#c2410c}
.import-status.error{background:#fee2e2;color:#b91c1c}
.import-status.replace{background:#e0e7ff;color:#4338ca}
.replace-check{
  display:inline-flex;align-items:center;gap:4px;padding:5px 7px;
  border-radius:8px;background:#eef2ff;color:#4338ca;font-size:8px;font-weight:850
}
.replace-check input{accent-color:#4f46e5}
@media(max-width:700px){
  .finance-import-bg{padding:0}
  .finance-import-modal{
    width:100%;margin:0;border-radius:0;min-height:100vh;padding:14px 12px calc(18px + var(--system-bottom))
  }
  .finance-import-table-wrap{max-height:65vh}
  .import-account-box{align-items:stretch}
  .import-account-box select{width:100%;min-width:0}
}


/* 3.8.2 multi-account cash details */
.cash-filter-toolbar{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(220px,1fr) auto;
  gap:9px;
  align-items:center;
}
.cash-filter-toolbar select{width:100%}
.account-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:7px 10px;border:1px solid #dbe5ef;border-radius:10px;
  background:#f8fafc;color:#64748b;font-size:9px;font-weight:850;white-space:nowrap
}
.cash-category-title{
  margin:18px 2px 10px;
}
.cash-category-title h2{
  margin:0;font-size:14px;color:#172033
}
.cash-category-title p{
  margin:4px 0 0;color:#7b8799;font-size:9px
}
.cash-category-detail-list{
  display:grid;
  gap:11px;
}
.cash-category-section{
  overflow:hidden;
}
.cash-category-section .panel-head{
  margin-bottom:8px
}
.cash-category-section h3{
  margin:0;color:#263247;font-size:12px
}
.cash-category-section small{
  color:#7b8799;font-size:8px
}
.cash-category-table{min-width:820px}
.cash-account-manager{width:min(900px,94vw);max-width:none}
.cash-account-manager .table{min-width:700px}

.cash-bar-graph{
  min-height:280px!important;
}
.cash-bar-list{
  display:grid;
  gap:11px;
  margin-top:10px;
}
.cash-bar-row{
  display:grid;
  grid-template-columns:minmax(140px,220px) 1fr;
  gap:12px;
  align-items:center;
}
.cash-bar-label{
  min-width:0;
}
.cash-bar-label b{
  display:block;color:#334155;font-size:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cash-bar-label small{
  display:block;margin-top:3px;color:#7b8799;font-size:7.5px;
  line-height:1.35
}
.cash-bar-lines{
  display:grid;gap:4px
}
.cash-bar-lines>div{
  height:9px;border-radius:999px;background:#eef2f6;overflow:hidden
}
.cash-bar{
  display:block;height:100%;border-radius:999px;min-width:2px
}
.cash-bar.income{background:#2563eb}
.cash-bar.expense{background:#f59e0b}

@media(max-width:720px){
  .cash-filter-toolbar{
    grid-template-columns:1fr 1fr;
  }
  .account-count{grid-column:1/3}
  .cash-bar-row{
    grid-template-columns:1fr;
    gap:5px;
  }
}
@media(max-width:520px){
  .cash-filter-toolbar{
    grid-template-columns:1fr;
  }
  .account-count{grid-column:auto}
  .cash-account-manager{
    width:100%;max-width:none
  }
}


/* 3.8.3 cash category cumulative totals */
.cash-category-cumulative{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e8edf3;
}
.cash-category-cumulative>div{
  min-width:0;
  padding:10px 11px;
  border:1px solid #e5eaf0;
  border-radius:11px;
  background:#f8fafc;
}
.cash-category-cumulative span{
  display:block;
  color:#7b8799;
  font-size:8px;
  font-weight:850;
}
.cash-category-cumulative b{
  display:block;
  margin-top:4px;
  color:#263247;
  font-size:11px;
}
.cash-category-cumulative .income{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.cash-category-cumulative .income b{color:#1d4ed8}
.cash-category-cumulative .expense{
  border-color:#fed7aa;
  background:#fff7ed;
}
.cash-category-cumulative .expense b{color:#c2410c}
.cash-category-cumulative .net-plus{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.cash-category-cumulative .net-plus b{color:#15803d}
.cash-category-cumulative .net-minus{
  border-color:#fecaca;
  background:#fef2f2;
}
.cash-category-cumulative .net-minus b{color:#b91c1c}

@media(max-width:650px){
  .cash-category-cumulative{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* 3.8.4 integrated cash category graph */
.stats-cash-category-feature{
  margin-bottom:12px;
  padding:16px;
  border:1px solid #dbe5ef;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.stats-cash-category-feature .graph-head{
  margin-bottom:12px;
}
.stats-cash-category-feature .graph-head h3{
  font-size:14px;
}
.cash-category-graph-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.cash-category-graph-kpis>div{
  padding:10px 11px;
  border:1px solid #e5eaf0;
  border-radius:11px;
  background:#f8fafc;
}
.cash-category-graph-kpis span{
  display:block;
  color:#7b8799;
  font-size:8px;
  font-weight:850;
}
.cash-category-graph-kpis b{
  display:block;
  margin-top:4px;
  color:#263247;
  font-size:11px;
}
.cash-category-graph-list{
  display:grid;
  gap:10px;
}
.cash-category-graph-row{
  display:grid;
  grid-template-columns:minmax(145px,230px) minmax(0,1fr);
  gap:12px;
  padding:10px 0;
  border-top:1px solid #eef2f6;
}
.cash-category-graph-row:first-child{border-top:0}
.cash-category-graph-name{
  min-width:0;
}
.cash-category-graph-name b{
  display:block;
  color:#263247;
  font-size:10px;
}
.cash-category-graph-name small{
  display:block;
  margin-top:4px;
  color:#7b8799;
  font-size:7.5px;
  line-height:1.4;
}
.cash-category-graph-name strong{
  font-size:7.5px;
}
.cash-category-graph-bars{
  display:grid;
  gap:6px;
}
.cash-category-graph-line{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) minmax(90px,auto);
  align-items:center;
  gap:7px;
}
.cash-category-graph-line>span{
  color:#64748b;
  font-size:8px;
  font-weight:850;
}
.cash-category-graph-line>div{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#eef2f6;
}
.cash-category-graph-line i{
  display:block;
  height:100%;
  border-radius:999px;
}
.cash-category-graph-line i.income{background:#2563eb}
.cash-category-graph-line i.expense{background:#f59e0b}
.cash-category-graph-line>b{
  text-align:right;
  color:#334155;
  font-size:8px;
  white-space:nowrap;
}
@media(max-width:700px){
  .cash-category-graph-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cash-category-graph-row{
    grid-template-columns:1fr;
    gap:7px;
  }
}


/* 3.9.0 unified approval workflow */
.bottom-quick.hidden-by-sidebar,
.app-shell.sidebar-open .bottom-quick{
  display:none!important;
}
.app-shell.sidebar-open .sidebar{
  padding-bottom:calc(20px + var(--system-bottom,0px));
}
.approval-settings-grid{
  display:grid;
  gap:9px;
}
.approval-setting-row{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(220px,1.2fr);
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid #e5eaf0;
  border-radius:12px;
  background:#fbfdff;
}
.settings-switch.compact{
  padding:0;
  border:0;
  background:transparent;
}
.approval-inline{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.approval-inline small{
  color:#7b8799;
  font-size:7.5px;
}
.approval-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  min-height:24px;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
}
.approval-badge.slate{background:#eef2f6;color:#64748b}
.approval-badge.orange{background:#fff7ed;color:#c2410c}
.approval-badge.green{background:#ecfdf3;color:#047857}
.approval-badge.red{background:#fef2f2;color:#b91c1c}
.approval-request-btn{
  border:1px solid #bfdbfe;
  border-radius:8px;
  background:#eff6ff;
  color:#1d4ed8;
  min-height:28px;
  padding:5px 8px;
  font-size:8px;
  font-weight:900;
}
.approval-kpis{margin-bottom:12px}
.approval-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.approval-tabs button{
  border:1px solid #dbe5ef;
  border-radius:10px;
  background:#fff;
  color:#64748b;
  padding:8px 11px;
  font-size:9px;
  font-weight:850;
}
.approval-tabs button.active{
  border-color:#2563eb;
  background:#eff6ff;
  color:#1d4ed8;
}
.approval-table{min-width:980px}
.approval-table td small{
  display:block;
  margin-top:3px;
  color:#7b8799;
  font-size:7.5px;
}
.approval-module-chip{
  display:inline-flex;
  padding:5px 7px;
  border-radius:8px;
  background:#f1f5f9;
  color:#334155;
  font-size:8px;
  font-weight:900;
}
.btn-mini.approve{
  border-color:#bbf7d0!important;
  background:#ecfdf3!important;
  color:#047857!important;
}
.btn-mini.reject{
  border-color:#fecaca!important;
  background:#fef2f2!important;
  color:#b91c1c!important;
}
.approval-cell{
  min-width:118px;
}
@media(max-width:720px){
  .approval-setting-row{
    grid-template-columns:1fr;
  }
  .approval-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* 3.9.1 sidebar scroll hardening */
.sidebar{
  overflow:hidden;
}
#nav{
  flex:1 1 auto;
  min-height:0;
  align-content:start;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:22px;
}
.side-foot{
  flex:0 0 auto;
}
@media(max-width:900px){
  .sidebar.open{
    height:100dvh;
    max-height:100dvh;
  }
  .sidebar.open #nav{
    overflow-y:auto;
    padding-bottom:calc(28px + var(--system-bottom,0px));
  }
  .sidebar.open + main,
  .app-shell.sidebar-open main{
    touch-action:none;
  }
  .bottom-quick.hidden-by-sidebar,
  .app-shell.sidebar-open .bottom-quick{
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(120%)!important;
  }
}


/* 3.9.2 printable executive approval boxes */
.document-print-card{
  max-width:980px;
  margin:0 auto;
}
.print-approval-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:2px solid #1f2937;
}
.print-doc-caption span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:850;
}
.print-doc-caption b{
  display:block;
  margin-top:4px;
  color:#111827;
  font-size:18px;
  letter-spacing:.08em;
}
.print-doc-caption small{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:8px;
}
.print-approval-box{
  display:grid;
  grid-template-columns:30px repeat(2,92px);
  border:1px solid #374151;
  background:#fff;
}
.print-approval-label{
  display:grid;
  place-items:center;
  writing-mode:vertical-rl;
  min-height:112px;
  padding:8px 4px;
  border-right:1px solid #374151;
  color:#111827;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.print-approval-cell{
  display:grid;
  grid-template-rows:28px 22px 42px 20px;
  min-height:112px;
  border-right:1px solid #374151;
}
.print-approval-cell:last-child{border-right:0}
.print-approval-role,
.print-approval-name,
.print-approval-sign,
.print-approval-date{
  display:grid;
  place-items:center;
  text-align:center;
}
.print-approval-role{
  border-bottom:1px solid #d1d5db;
  font-size:9px;
  font-weight:900;
  color:#111827;
}
.print-approval-name{
  border-bottom:1px solid #e5e7eb;
  color:#374151;
  font-size:8px;
  font-weight:800;
}
.print-approval-sign span{
  display:inline-grid;
  place-items:center;
  min-width:42px;
  min-height:24px;
  border-radius:999px;
  padding:3px 7px;
  font-size:8px;
  font-weight:900;
}
.print-approval-sign .green{background:#ecfdf3;color:#047857}
.print-approval-sign .orange{background:#fff7ed;color:#c2410c}
.print-approval-sign .red{background:#fef2f2;color:#b91c1c}
.print-approval-sign .slate{background:#f1f5f9;color:#64748b}
.print-approval-sign .sign-blank{
  border:1px dashed #cbd5e1;
  background:#fff;
  color:#94a3b8;
}
.print-approval-date{
  border-top:1px solid #e5e7eb;
  color:#64748b;
  font-size:7px;
}
.print-document-body h1,
.document-print-card .payslip h1{
  margin:8px 0 22px;
  text-align:center;
  color:#111827;
  font-size:24px;
  letter-spacing:.28em;
}
.print-doc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid #9ca3af;
  border-left:1px solid #9ca3af;
}
.print-doc-grid>div{
  min-height:72px;
  padding:12px;
  border-right:1px solid #9ca3af;
  border-bottom:1px solid #9ca3af;
}
.print-doc-grid span{
  display:block;
  color:#64748b;
  font-size:8px;
  font-weight:800;
}
.print-doc-grid b{
  display:block;
  margin-top:8px;
  color:#111827;
  font-size:12px;
}
.print-total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding:14px 16px;
  border:2px solid #374151;
}
.print-total-line span{font-size:10px;font-weight:900;color:#374151}
.print-total-line b{font-size:15px;color:#111827}
.print-detail-box,
.print-receipt-note{
  margin-top:16px;
  padding:16px;
  border:1px solid #9ca3af;
}
.print-detail-box p,
.print-receipt-note p{
  margin:5px 0 15px;
  min-height:28px;
  color:#374151;
  font-size:10px;
}
.print-applicant{
  margin-top:34px;
  text-align:right;
  color:#374151;
  font-size:10px;
}
.settlement-approval-screen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.settlement-approval-screen>div:first-child b{
  display:block;
  color:#263247;
  font-size:10px;
}
.settlement-approval-screen>div:first-child small{
  display:block;
  margin-top:4px;
  color:#7b8799;
  font-size:8px;
}
@media(max-width:650px){
  .print-approval-header{
    grid-template-columns:1fr;
  }
  .print-approval-box{
    justify-self:end;
    grid-template-columns:28px repeat(2,86px);
  }
  .settlement-approval-screen{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media print{
  .document-print-card{
    width:100%!important;
    max-width:none!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
  }
  .print-approval-header{
    break-inside:avoid;
    page-break-inside:avoid;
  }
  .print-approval-box{
    grid-template-columns:28px repeat(2,88px);
  }
  .settlement-approval-screen{
    display:none!important;
  }
}


/* 3.9.3 print-only approval headers */
.print-only-approval{
  display:none!important;
}
@media print{
  .print-only-approval{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 14px 0!important;
    padding:0!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .print-only-approval .print-approval-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:14px!important;
    margin:0 0 12px 0!important;
    padding:0 0 10px 0!important;
    border-bottom:2px solid #1f2937!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .print-only-approval .print-doc-caption,
  .print-only-approval .print-approval-box{
    display:grid!important;
  }
  .print-only-approval .print-approval-box{
    grid-template-columns:28px 88px 88px!important;
    border:1px solid #374151!important;
    background:#fff!important;
  }
  .print-only-approval .print-approval-label,
  .print-only-approval .print-approval-cell,
  .print-only-approval .print-approval-role,
  .print-only-approval .print-approval-name,
  .print-only-approval .print-approval-sign,
  .print-only-approval .print-approval-date{
    visibility:visible!important;
  }
}


/* 3.9.4 approval signatures + clean mobile business UI */
.print-approval-cell{
  grid-template-rows:30px 58px 20px!important;
  min-height:108px!important;
}
.print-approval-name{display:none!important}
.print-approval-sign{
  position:relative;
  min-height:58px;
  padding:4px;
}
.print-signature-wrap{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  position:relative;
}
.print-signature-image{
  display:block;
  max-width:76px;
  max-height:44px;
  width:auto;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
.print-signature-status{
  position:absolute;
  right:2px;
  bottom:0;
  padding:1px 4px;
  border-radius:999px;
  font-size:6px;
  font-weight:900;
  background:#fff;
  border:1px solid #dbe3ec;
}
.print-signature-status.green{color:#047857}
.print-signature-status.orange{color:#c2410c}
.print-signature-status.red{color:#b91c1c}
.print-signature-status.slate{color:#64748b}

.approval-signature-settings{overflow:hidden}
.approval-signature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.approval-signature-card{
  border:1px solid #e3e9f1;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#fff 0%,#f9fbfe 100%);
}
.approval-signature-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.approval-signature-head b{display:block;color:#172033;font-size:13px}
.approval-signature-head small{display:block;margin-top:4px;color:#7b8799;font-size:9px;line-height:1.45}
.approval-signature-state{
  flex:0 0 auto;
  border-radius:999px;
  padding:5px 8px;
  font-size:8px;
  font-weight:900;
}
.approval-signature-state.ready{background:#ecfdf3;color:#047857}
.approval-signature-state.empty{background:#f1f5f9;color:#64748b}
.approval-signature-preview{
  height:112px;
  margin-top:12px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#fff;
  display:grid;
  place-items:center;
  color:#94a3b8;
  font-size:9px;
  overflow:hidden;
}
.approval-signature-preview.has-image{border-style:solid}
.approval-signature-preview img{max-width:88%;max-height:88%;object-fit:contain}
.approval-signature-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.signature-file-btn{cursor:pointer}
.approval-signature-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#f4f8ff;
  color:#526276;
  font-size:9px;
  line-height:1.5;
}
.cash-approval-screen{
  border-color:#dce7f7!important;
  background:linear-gradient(135deg,#f8fbff 0%,#fff 58%,#fff8f2 100%)!important;
}

/* clean visual refresh inspired by the uploaded mobile reference */
:root{
  --primary:#0b57d0;
  --primary-strong:#063d99;
  --accent:#ff7a00;
  --ink:#172033;
  --muted:#778398;
  --line:#e6ebf2;
  --surface:#ffffff;
  --page:#f6f8fb;
}
body{
  background:var(--page)!important;
  color:var(--ink);
}
.company-header{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #edf1f5!important;
  box-shadow:0 6px 24px rgba(24,39,75,.05)!important;
}
.company-logo-mark,.brand-icon{
  background:linear-gradient(135deg,#0b57d0,#063d99)!important;
  color:#fff!important;
  box-shadow:0 7px 16px rgba(11,87,208,.22);
}
.card,.stat,.settings-section{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(25,42,70,.055)!important;
}
.stat{position:relative;overflow:hidden}
.stat:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  border-radius:20px 0 0 20px;
  background:#d9e7ff;
}
.stat.accent-orange:before{background:var(--accent)}
.stat.accent-green:before{background:#16a36a}
.stat.accent-red:before{background:#e05252}
.stat.accent-blue:before{background:var(--primary)}
.btn{
  border-radius:13px!important;
  min-height:40px;
  font-weight:850!important;
}
.btn-primary{
  background:linear-gradient(135deg,#0b57d0,#1769e8)!important;
  border-color:#0b57d0!important;
  box-shadow:0 7px 16px rgba(11,87,208,.18)!important;
}
.btn-soft{
  background:#f4f8ff!important;
  color:#0b57d0!important;
  border-color:#d7e6ff!important;
}
.btn-neutral{background:#fff!important;border-color:#e2e8f0!important;color:#475569!important}
.page-title h2{color:#172033!important;letter-spacing:-.02em}
.page-title p{color:#7b8799!important}
.toolbar{
  border-radius:16px;
}
.input,select,textarea{
  border-radius:12px!important;
  border-color:#dfe6ef!important;
  background:#fff!important;
}
.input:focus,select:focus,textarea:focus{
  border-color:#79a9f3!important;
  box-shadow:0 0 0 3px rgba(11,87,208,.08)!important;
  outline:none!important;
}
.table-wrap{
  border:1px solid #edf1f5!important;
  border-radius:15px!important;
  background:#fff;
}
.table thead th{
  background:#f7f9fc!important;
  color:#526276!important;
  border-bottom:1px solid #e6ebf2!important;
}
.table tbody tr:hover{background:#fbfdff}
.sidebar{
  background:#fff!important;
  border-right:1px solid #edf1f5!important;
}
#nav button.active{
  background:linear-gradient(90deg,#edf5ff,#fff7ef)!important;
  color:#0b57d0!important;
  border-color:#dce9fb!important;
}
.top-primary-menu{
  background:#fff!important;
  border:1px solid #e8edf4!important;
  border-radius:16px!important;
  box-shadow:0 8px 24px rgba(25,42,70,.05)!important;
}
.top-primary-menu button.active{
  background:#edf5ff!important;
  color:#0b57d0!important;
}
.bottom-quick{
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #edf1f5!important;
  box-shadow:0 -10px 28px rgba(25,42,70,.07)!important;
}
.bottom-quick button.active{
  color:#0b57d0!important;
}
.approval-setting-row{
  border-radius:15px!important;
  background:#fbfdff!important;
}
@media(max-width:650px){
  .approval-signature-grid{grid-template-columns:1fr}
  .card,.stat,.settings-section{border-radius:17px!important}
  #content{padding-left:12px!important;padding-right:12px!important}
  .page-title{gap:10px}
  .page-title h2{font-size:22px!important}
  .page-title .row-wrap{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .page-title .row-wrap .btn{width:100%}
  .settlement-approval-screen{
    border-radius:17px!important;
    padding:14px!important;
  }
}
@media print{
  .approval-signature-settings,.cash-approval-screen{display:none!important}
  .print-approval-cell{grid-template-rows:30px 58px 20px!important;min-height:108px!important}
  .print-signature-image{mix-blend-mode:normal!important;filter:none!important}
  .print-signature-status{background:#fff!important}
}


/* 3.9.4 mobile visual refresh + worklog/external hotfix release */
.mobile-reference-header{
  min-height:86px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 22px!important;
  background:#fff!important;
  border-bottom:1px solid #e8edf3!important;
  box-shadow:0 8px 28px rgba(23,32,51,.055)!important;
}
.header-start,.header-end{display:flex;align-items:center;gap:10px;min-width:0}
.header-start{justify-content:flex-start}
.header-end{justify-content:flex-end}
.centered-brand{justify-self:center!important;display:flex!important;align-items:center!important;gap:12px!important}
.brand-mark{
  position:relative;
  width:48px!important;height:48px!important;min-width:48px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#0a5bd7,#063e9f)!important;
  box-shadow:0 9px 20px rgba(10,91,215,.24)!important;
  font-size:16px!important;
}
.brand-mark i{
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  right:-3px;top:5px;background:#ff8a00;
  border:2px solid #fff;
}
.brand-copy b{
  display:block;
  color:#182236!important;
  font-size:20px!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  white-space:nowrap;
}
.brand-copy small{
  display:block;
  margin-top:3px;
  color:#8993a3!important;
  font-size:10px!important;
  font-weight:700;
}
.brand-copy small em{
  margin-left:4px;
  color:#0a5bd7;
  font-style:normal;
  font-weight:900;
}
.right-hamb{
  width:52px!important;height:52px!important;
  border-radius:16px!important;
  border:1px solid #e5eaf1!important;
  background:#f7f9fc!important;
  color:#172033!important;
  font-size:25px!important;
  box-shadow:none!important;
}
.sync-icon{
  min-height:42px!important;
  border-radius:14px!important;
  border:1px solid #dfe7f1!important;
  background:#fff!important;
  color:#405169!important;
  font-weight:850!important;
}
.clean-shell main{
  background:linear-gradient(180deg,#f7f9fc 0%,#f4f7fb 100%)!important;
}
#content{
  max-width:1440px!important;
}
.page-title{
  padding:4px 2px 2px;
}
.page-title h2{
  font-size:25px!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
}
.page-title p{
  margin-top:5px!important;
  font-size:11px!important;
}
.card{
  border-color:#e7ecf2!important;
  box-shadow:0 12px 34px rgba(29,45,72,.06)!important;
}
.stat{
  min-height:96px!important;
  padding:17px 18px!important;
}
.stat small{font-size:10px!important;color:#8290a4!important}
.stat b{font-size:23px!important;letter-spacing:-.035em!important}
.table thead th{
  height:42px;
  font-size:9px!important;
  font-weight:900!important;
  text-transform:none!important;
}
.table tbody td{border-bottom-color:#eef2f6!important}
.panel-head h3{font-size:14px!important;letter-spacing:-.02em}
.bottom-quick{
  border:1px solid #e3e8ef!important;
  border-radius:28px 28px 0 0!important;
}
.bottom-quick button span{
  font-size:22px!important;
  line-height:1!important;
}
.bottom-quick button small{
  font-size:10px!important;
  margin-top:5px!important;
  font-weight:850!important;
}
.bottom-quick button.active{
  color:#0a5bd7!important;
}
.bottom-quick button.active span{
  filter:drop-shadow(0 5px 8px rgba(10,91,215,.18));
}
.daily-worklog-list>.card,
.external-worker-table{
  animation:nwFadeIn .18s ease-out;
}
@keyframes nwFadeIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .mobile-reference-header{
    min-height:96px!important;
    grid-template-columns:52px 1fr 52px!important;
    padding:12px 16px!important;
    position:sticky!important;
    top:0!important;
    z-index:45!important;
  }
  .header-start{width:52px}
  .header-start .role-pill{display:none!important}
  .sync-icon{
    width:46px!important;height:46px!important;min-height:46px!important;
    padding:0!important;display:grid!important;place-items:center!important;
    font-size:20px!important;border-radius:50%!important;
  }
  .sync-icon span{display:none!important}
  .header-end{width:52px}
  .header-end .user-mini{display:none!important}
  .right-hamb{
    width:46px!important;height:46px!important;
    border-radius:50%!important;
    padding:0!important;
    display:grid!important;place-items:center!important;
  }
  .centered-brand{
    gap:9px!important;
    justify-self:center!important;
    max-width:calc(100vw - 140px);
  }
  .brand-mark{
    width:42px!important;height:42px!important;min-width:42px!important;
    border-radius:13px!important;font-size:14px!important;
  }
  .brand-copy b{font-size:18px!important;max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .brand-copy small{font-size:9px!important}
  .top-primary-menu{display:none!important}
  #content{
    padding:18px 14px calc(112px + var(--system-bottom,0px))!important;
  }
  .page-title{margin-bottom:15px!important}
  .page-title h2{font-size:24px!important}
  .grid{gap:11px!important}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat{min-height:88px!important;padding:15px!important}
  .stat b{font-size:20px!important}
  .card{border-radius:19px!important;padding:15px!important}
  .bottom-quick{
    left:12px!important;right:12px!important;bottom:calc(10px + var(--system-bottom,0px))!important;
    width:auto!important;
    border-radius:24px!important;
    min-height:82px!important;
    padding:9px 7px!important;
    box-shadow:0 14px 38px rgba(18,34,61,.15)!important;
    background:rgba(255,255,255,.985)!important;
  }
  .bottom-quick button{
    border-radius:16px!important;
    min-width:0!important;
  }
  .bottom-quick button.active{
    background:#eef5ff!important;
  }
  .cash-filter-toolbar,.finance-toolbar{
    border:1px solid #e6ebf2!important;
    padding:10px!important;
    background:#fff!important;
    border-radius:16px!important;
  }
}


/* 3.9.6 organization hierarchy graph */
.org-chart-card{
  overflow:hidden!important;
  padding:20px!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f7f9fc 100%)!important;
}
.org-chart-scroll{
  overflow-x:auto;
  overflow-y:visible;
  padding:6px 8px 18px;
  -webkit-overflow-scrolling:touch;
}
.org-tree{
  --org-line:#b9c7da;
  --org-blue:#0b57d0;
  --org-navy:#16335f;
  position:relative;
  min-width:760px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.org-tree-top{
  display:grid;
  justify-items:center;
  gap:10px;
  position:relative;
  z-index:2;
}
.org-tree-person{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:220px;
  max-width:280px;
  padding:11px 13px;
  border:1px solid #dfe7f1;
  border-radius:15px;
  background:#fff;
  box-shadow:0 7px 20px rgba(25,42,70,.06);
}
.org-tree-person.representative{
  min-width:270px;
  padding:15px 18px;
  border:2px solid #0b57d0;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(11,87,208,.14);
  background:linear-gradient(145deg,#fff 0%,#f2f7ff 100%);
}
.org-tree-person.executive{border-color:#c8d8ee}
.org-tree-avatar{
  width:40px;height:40px;min-width:40px;border-radius:13px;
  display:grid;place-items:center;
  background:#eaf2ff;color:#0b57d0;
  font-size:15px;font-weight:950;
}
.org-tree-person.representative .org-tree-avatar{
  width:48px;height:48px;min-width:48px;
  background:linear-gradient(145deg,#0b57d0,#063e9f);
  color:#fff;
  box-shadow:0 7px 16px rgba(11,87,208,.22);
}
.org-tree-person-info{min-width:0;flex:1}
.org-tree-person-info>span{
  display:block;color:#8894a6;font-size:8px;font-weight:850;
}
.org-tree-person-info>b{
  display:block;margin-top:2px;color:#182236;
  font-size:13px;font-weight:950;letter-spacing:-.02em;
}
.org-tree-person.representative .org-tree-person-info>b{font-size:16px}
.org-tree-person-info>b em{
  margin-left:5px;color:#5f6f84;font-size:10px;font-style:normal;font-weight:800;
}
.org-tree-person-info>small{display:block;margin-top:3px;color:#8a96a7;font-size:8px}
.org-tree-person .org-phone-link{
  display:inline-flex!important;
  width:auto!important;
  min-height:0!important;
  margin-top:5px!important;
  padding:4px 7px!important;
  border-radius:8px!important;
  gap:4px!important;
}
.org-tree-person .org-phone-link span{font-size:9px}
.org-tree-person .org-phone-link b{font-size:8px}
.org-tree-person .org-phone-link em{font-size:7px}
.org-tree-extras{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.org-tree-vline{
  width:2px;height:28px;
  background:var(--org-line);
  flex:0 0 auto;
}
.org-tree-vline.branch-stem{height:34px}
.org-tree-spine{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
}
.org-tree-dept{
  position:relative;
  min-width:248px;
  max-width:300px;
  padding:12px;
  border:1px solid #dfe6ef;
  border-radius:17px;
  background:#fff;
  box-shadow:0 8px 22px rgba(25,42,70,.055);
}
.org-tree-dept.spine{
  border-color:#c7d8ee;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.org-tree-dept-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:9px;padding-bottom:8px;
  border-bottom:1px solid #edf1f5;
}
.org-tree-dept-title span{font-size:11px;font-weight:950;color:#18345f}
.org-tree-dept-title em{
  padding:3px 6px;border-radius:999px;
  background:#edf4ff;color:#0b57d0;
  font-size:8px;font-style:normal;font-weight:900;
}
.org-tree-dept .org-tree-person{
  min-width:0;max-width:none;width:100%;
  box-shadow:none;border-radius:12px;padding:9px 10px;
}
.org-tree-dept .org-tree-person.leader{
  border-color:#bcd0ea;
  background:#f6faff;
}
.org-tree-dept .org-tree-avatar{
  width:34px;height:34px;min-width:34px;border-radius:10px;font-size:12px;
}
.org-tree-members{display:grid;gap:7px;margin-top:7px}
.org-tree-branches{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:26px;
  width:min(100%,1100px);
  align-items:start;
}
.org-tree-branches:before{
  content:"";
  position:absolute;
  left:calc(12.5%);
  right:calc(12.5%);
  top:-18px;
  height:2px;
  background:var(--org-line);
}
.org-tree-branches.single:before{display:none}
.org-tree-branches .org-tree-dept:before{
  content:"";
  position:absolute;
  left:50%;top:-18px;
  width:2px;height:18px;
  background:var(--org-line);
  transform:translateX(-50%);
}
@media(max-width:800px){
  .org-chart-card{padding:13px!important}
  .org-chart-scroll{padding:4px 0 12px}
  .org-tree{min-width:0;width:100%}
  .org-tree-person.representative{min-width:min(280px,92vw);max-width:92vw}
  .org-tree-spine{width:100%}
  .org-tree-dept{min-width:0;max-width:none;width:min(320px,92vw)}
  .org-tree-branches{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:22px;
  }
  .org-tree-branches:before{
    left:50%;right:auto;top:-16px;
    width:2px;height:calc(100% - 10px);
    transform:translateX(-50%);
  }
  .org-tree-branches .org-tree-dept{
    z-index:1;
  }
  .org-tree-branches .org-tree-dept:before{
    left:50%;top:-12px;height:12px;
  }
}
@media print{
  .org-chart-scroll{overflow:visible!important}
  .org-tree{min-width:0!important}
  .org-tree-person,.org-tree-dept{box-shadow:none!important}
}


/* 3.9.7 chat alarm restoration */
[data-page="chat"]{position:relative!important}
.chat-unread-badge{
  position:absolute;
  top:4px;
  right:6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  border:2px solid #fff;
  font-size:8px;
  line-height:1;
  font-weight:950;
  box-shadow:0 4px 10px rgba(229,57,53,.24);
  z-index:3;
}
#nav [data-page="chat"] .chat-unread-badge{top:50%;right:10px;transform:translateY(-50%)}
.top-primary-menu [data-page="chat"] .chat-unread-badge{top:3px;right:3px}
.bottom-quick [data-page="chat"] .chat-unread-badge{top:2px;right:calc(50% - 24px)}
.chat-alert-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid #dbe8fb;
  border-radius:16px;
  background:linear-gradient(135deg,#f5f9ff 0%,#fff 70%);
}
.chat-alert-bar>div{display:flex;align-items:center;gap:10px;min-width:0}
.chat-alert-icon{
  width:38px;height:38px;min-width:38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#eaf2ff;
  font-size:18px;
}
.chat-alert-bar b{display:block;color:#18345f;font-size:11px}
.chat-alert-bar small{display:block;margin-top:3px;color:#7b8799;font-size:9px;line-height:1.35}
.chat-message-row.mine{background:#f7fbff}
.chat-compose{position:sticky;bottom:0;background:#fff;padding-top:6px}
@media(max-width:650px){
  .chat-alert-bar{padding:11px 12px}
  .chat-alert-bar .btn{min-height:36px!important;padding:7px 9px!important;font-size:9px!important}
  .bottom-quick [data-page="chat"] .chat-unread-badge{top:0;right:calc(50% - 22px)}
}


/* 3.9.8 app install/update UX */
.app-update-card{position:relative;overflow:hidden}
.app-update-card:before{
  content:"";position:absolute;right:-34px;top:-44px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(11,87,208,.12),rgba(11,87,208,0) 68%);pointer-events:none;
}
.update-version-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 10px;
  border-radius:999px;background:#edf4ff;color:#0b57d0;font-size:10px;font-weight:950;border:1px solid #d9e7fb;
}
.app-update-status{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:13px 14px;
  border-radius:15px;border:1px solid #e2e8f0;background:#f8fafc;
}
.app-update-status>div{min-width:0}.app-update-status b{display:block;font-size:11px;color:#26364f}
.app-update-status small{display:block;margin-top:4px;font-size:9px;line-height:1.45;color:#7a879a}
.app-update-status>span{white-space:nowrap;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900}
.app-update-status.ready{border-color:#ccebdc;background:#f5fcf8}.app-update-status.ready>span{background:#dff6e9;color:#087044}
.app-update-status.need{border-color:#f5dec0;background:#fffaf3}.app-update-status.need>span{background:#fff0d9;color:#a85d00}
.app-update-status.play{border-color:#d5e5fb;background:#f5f9ff;display:block}
.app-update-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.app-update-note{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding:10px 11px;border-radius:12px;background:#f7f8fa;color:#69778b;font-size:9px;line-height:1.5}
.app-update-note b{flex:0 0 auto;color:#34445c;font-size:9px}
@media(max-width:650px){
  .app-update-actions{display:grid;grid-template-columns:1fr 1fr}
  .app-update-actions .btn{width:100%;font-size:9px!important;padding:9px 7px!important}
}

/* Newline Tech brand + copy/paste controls */
.company-logo-img{display:block;object-fit:cover;border-radius:14px;flex:0 0 auto;box-shadow:0 4px 14px rgba(15,23,42,.12)}
.company-logo-img.side-logo{width:42px;height:42px}
.company-logo-img.header-logo{width:42px;height:42px}
.home-brand-link{cursor:pointer;user-select:none}
.home-brand-link:focus-visible{outline:3px solid #93c5fd;outline-offset:3px;border-radius:12px}
.modal-copy-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.modal-copy-head h3{margin:0}
.schedule-selected-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:560px){
  .company-logo-img.side-logo{width:38px;height:38px}
  .company-logo-img.header-logo{width:36px;height:36px}
  .modal-copy-head{align-items:flex-start;flex-direction:column}
}

/* Schedule ↔ attendance live linkage */
.schedule-event span{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-event small{display:block;margin-top:2px;font-size:10px;line-height:1.2;opacity:.85;font-weight:600}
.manpower-site-line{padding:5px 0}
.manpower-site-line+.manpower-site-line{border-top:1px dashed rgba(148,163,184,.45);margin-top:5px}
.manpower-site-line .badge{margin-left:6px}
.manpower-units{margin-left:6px;font-size:12px;font-weight:700;color:#475569}
#attScheduleSelect{min-height:42px}
#attSiteInput[readonly]{background:#f8fafc;color:#334155;font-weight:700}


/* 3.9.20 — left menu button + clearly labeled sync/update controls */
.mobile-reference-header{
  grid-template-columns:minmax(170px,1fr) auto minmax(270px,1fr)!important;
}
.header-start{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  min-width:0!important;
}
.left-hamb{
  width:auto!important;
  min-width:88px!important;
  height:46px!important;
  padding:0 14px!important;
  border-radius:14px!important;
  border:1px solid #dfe6ef!important;
  background:#f7f9fc!important;
  color:#172033!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-size:23px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
.left-hamb span{
  display:inline!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
}
.header-end{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
}
.header-text-action{
  width:auto!important;
  min-width:126px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 13px!important;
  border-radius:13px!important;
  border:1px solid #cfd9e6!important;
  background:#fff!important;
  color:#26364d!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:12px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.header-text-action b{
  font-size:17px!important;
  line-height:1!important;
}
.header-text-action span{
  display:inline!important;
  font-size:12px!important;
  font-weight:950!important;
}
.header-text-action.update-action{
  border-color:#bfd5ff!important;
  background:#edf5ff!important;
  color:#0b57d0!important;
}

@media(max-width:760px){
  .mobile-reference-header{
    min-height:134px!important;
    height:auto!important;
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    grid-template-rows:56px 48px!important;
    gap:6px 10px!important;
    padding:10px 14px 12px!important;
  }
  .header-start{
    grid-column:1!important;
    grid-row:1!important;
    width:52px!important;
  }
  .header-start .role-pill{display:none!important}
  .left-hamb{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:25px!important;
  }
  .left-hamb span{display:none!important}
  .centered-brand{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    max-width:calc(100vw - 140px)!important;
  }
  .header-end{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .header-end .user-mini{display:none!important}
  .header-text-action{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }
  .header-text-action span{
    display:inline!important;
    font-size:12px!important;
  }
  .header-text-action b{font-size:16px!important}
}


/* 3.9.26 stable PC organization chart + leave emphasis */
.org-chart-legend{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  margin:-4px 0 10px;
  padding:0 4px;
  color:#5f6f84;
  font-size:10px;
  font-weight:850;
}
.org-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.org-chart-legend i{width:16px;height:12px;border-radius:4px;display:inline-block}
.org-legend-active{background:#fff;border:1px solid #cfd9e6}
.org-legend-leave{
  border:2px solid #dc2626;
  background:
    repeating-linear-gradient(45deg,rgba(220,38,38,.08) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(-45deg,rgba(220,38,38,.05) 0 2px,transparent 2px 7px),
    #fff8f8;
}
.org-chart-card{overflow:hidden!important}
.org-chart-scroll{
  overflow-x:auto!important;
  overflow-y:visible!important;
  width:100%;
  max-width:100%;
}
.org-tree{
  box-sizing:border-box;
  width:max-content;
  min-width:100%;
  padding:4px 24px 14px;
}
.org-company-root{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:270px;
  padding:14px 18px;
  border:2px solid #0b57d0;
  border-radius:18px;
  background:linear-gradient(145deg,#fff 0%,#f2f7ff 100%);
  box-shadow:0 12px 30px rgba(11,87,208,.12);
}
.org-company-mark{
  width:48px;height:48px;min-width:48px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#0b57d0,#063e9f);
  color:#fff;
  font-size:15px;
  font-weight:950;
}
.org-company-root b{display:block;color:#17325c;font-size:16px;font-weight:950;letter-spacing:.01em}
.org-company-root small{display:block;margin-top:2px;color:#8290a4;font-size:9px;font-weight:800}
.org-tree-meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-bottom:1px;
}
.org-tree-meta>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8894a6;
  font-size:8px;
  font-weight:850;
}
.org-leave-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  background:#dc2626;
  color:#fff;
  font-size:8px;
  font-weight:950;
  line-height:1.35;
  letter-spacing:.02em;
}
.org-tree-spine .org-tree-dept{
  width:300px;
  min-width:300px;
  max-width:300px;
  box-sizing:border-box;
}
.org-tree-dept-title>div{
  display:flex;
  align-items:center;
  gap:6px;
}
.org-dept-leave{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border:1px solid #fecaca;
  border-radius:999px;
  background:#fff1f2;
  color:#c81e1e;
  font-size:8px;
  font-weight:950;
  white-space:nowrap;
}
.org-tree-branches{
  grid-template-columns:repeat(var(--org-team-count,1),300px)!important;
  width:max-content!important;
  max-width:none!important;
  gap:28px!important;
  justify-content:center;
}
.org-tree-branches .org-tree-dept{
  width:300px;
  min-width:300px;
  max-width:300px;
  box-sizing:border-box;
}
.org-tree-branches:before{
  left:150px!important;
  right:150px!important;
}
.org-tree-person{
  box-sizing:border-box;
  overflow:hidden;
}
.org-tree-person.org-on-leave,
.org-tree-dept .org-tree-person.org-on-leave,
.org-tree-person.representative.org-on-leave{
  border:2px solid #dc2626!important;
  background:
    repeating-linear-gradient(45deg,rgba(220,38,38,.07) 0 2px,transparent 2px 8px),
    repeating-linear-gradient(-45deg,rgba(220,38,38,.045) 0 2px,transparent 2px 8px),
    #fff8f8!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.08),0 8px 20px rgba(127,29,29,.08)!important;
}
.org-tree-person.org-on-leave .org-tree-avatar{
  background:#fee2e2!important;
  color:#b91c1c!important;
  box-shadow:none!important;
}
.org-tree-person.org-on-leave .org-tree-person-info>b,
.org-tree-person.representative.org-on-leave .org-tree-person-info>b{
  color:#991b1b!important;
}
.org-tree-person.org-on-leave .org-tree-person-info>b em{
  color:#b91c1c!important;
}
@media(max-width:800px){
  .org-chart-legend{justify-content:flex-start;margin-top:0}
  .org-tree{width:100%!important;min-width:0!important;padding:2px 0 10px}
  .org-company-root{min-width:min(280px,92vw);max-width:92vw;box-sizing:border-box}
  .org-tree-spine .org-tree-dept{
    width:min(320px,92vw);min-width:0;max-width:none;
  }
  .org-tree-branches{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    width:100%!important;
    gap:22px!important;
  }
  .org-tree-branches .org-tree-dept{
    width:min(320px,92vw);min-width:0;max-width:none;
  }
  .org-tree-branches:before{
    left:50%!important;
    right:auto!important;
  }
}


/* Employee home: monthly assigned construction schedule */
.employee-project-list{display:grid;gap:10px;margin-top:10px}
.employee-project-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:var(--card,#fff)}
.employee-project-row>div{min-width:0;display:grid;gap:4px}
.employee-project-row b{font-size:14px;line-height:1.35;white-space:normal}
.employee-project-row small{font-size:12px;line-height:1.35;color:var(--muted,#6b7280)}
.employee-project-row .badge{flex:0 0 auto}
@media(max-width:640px){.employee-project-row{align-items:flex-start;padding:11px 12px}.employee-project-row b{font-size:13.5px}.employee-project-row small{font-size:11.5px}}


.ceo-home-hero{align-items:stretch;gap:18px}
.ceo-home-hero .ceo-hero-copy{min-width:260px;flex:1}
.ceo-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;flex:1.4}
.ceo-hero-metrics>div{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center}
.ceo-hero-metrics small,.ceo-hero-metrics em{color:rgba(255,255,255,.82);font-style:normal}
.ceo-hero-metrics b{font-size:24px;margin:3px 0}
.role-pill.ceo{background:#eaf2ff;color:#1d4ed8;border-color:#bfdbfe}
.ceo-approval-panel{margin-top:14px}
@media(max-width:800px){.ceo-home-hero{display:block}.ceo-hero-metrics{grid-template-columns:1fr;margin-top:14px}}


/* 3.9.54 mobile text integrity + CEO summary layout */
html,body,button,input,select,textarea,.card,.panel-head,.stat,.badge{
  word-break:keep-all;
  overflow-wrap:normal;
}
.table-wrap{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}
.table th,.table td{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.table td b,.table td small,.table th span{
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.external-company-settlement .table{min-width:1540px}
.external-tax-invoices .table{min-width:1040px}
.external-direct-payment-detail .table{min-width:1420px}
.external-worker-table{min-width:1040px}
.ceo-project-table{min-width:760px}
.ceo-people-metric b{white-space:nowrap}
.sales-purchase-table{min-width:1180px}

@media(max-width:760px){
  .table{
    width:max-content!important;
    min-width:100%!important;
  }
  .table th,.table td{
    white-space:nowrap!important;
    line-height:1.35!important;
  }
  .table td small{
    display:inline!important;
    margin-left:5px!important;
    white-space:nowrap!important;
  }
  .panel-head h3,.panel-head small,.page-title h2,.page-title p,.stat small{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .ceo-home-hero{
    display:block!important;
  }
  .ceo-hero-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:14px!important;
  }
  .ceo-hero-metrics .ceo-project-metric{
    grid-column:1 / -1;
  }
  .ceo-hero-metrics>div{
    min-width:0!important;
    padding:11px 10px!important;
  }
  .ceo-hero-metrics .ceo-people-metric b{
    font-size:15px!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
  }
  .ceo-hero-metrics em{
    white-space:nowrap!important;
  }
  .external-toolbar,.finance-toolbar{
    flex-wrap:nowrap!important;
  }
}


/* 3.9.55 sales/purchase cash reconciliation */
.sales-reconcile-table{min-width:1620px}
.trade-outstanding-table{min-width:1120px}
.trade-total-kpis,.trade-balance-kpis{margin-top:12px}
.trade-reconcile-note{
  margin:10px 2px 14px;padding:10px 12px;border-radius:12px;
  background:#f8fafc;color:#64748b;font-size:10px;line-height:1.5;
  word-break:keep-all
}
.trade-match-list{display:grid;gap:4px;min-width:190px}
.trade-match-list span{
  display:block;white-space:nowrap;font-size:10px;color:#334155;
  padding:4px 6px;border-radius:8px;background:#f1f5f9
}
.trade-outstanding-card{margin-top:12px}
.trade-outstanding-card .panel-head>b{font-size:18px;white-space:nowrap}
@media(max-width:760px){
  .sales-reconcile-table{min-width:1500px!important}
  .trade-outstanding-table{min-width:1040px!important}
  .trade-total-kpis,.trade-month-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .trade-balance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .trade-total-kpis .stat b,.trade-month-kpis .stat b,.trade-balance-kpis .stat b{
    font-size:16px!important;white-space:nowrap!important
  }
}


/* 3.9.56 cash parties + reconciled schedule summary */
.cash-table{min-width:1420px}
.cash-category-table{min-width:1080px}
.schedule-summary-grid .schedule-actual-total{min-width:220px}
.schedule-summary-grid .schedule-actual-total b,
.schedule-summary-grid .schedule-actual-total em{white-space:nowrap}
@media(max-width:760px){
  .cash-table{min-width:1380px!important}
  .cash-category-table{min-width:1050px!important}
  .schedule-summary-grid .schedule-actual-total{
    grid-column:1 / -1;
  }
}


/* 3.9.57 payroll item editor */
.payroll-items-modal{max-width:980px!important}
.payroll-items-editor-section{margin:14px 0;padding:14px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.payroll-custom-row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(220px,1.3fr) minmax(120px,.65fr) auto;gap:8px;align-items:center;margin-top:8px}
.payroll-custom-row .pay-item-amount{text-align:right}
.payroll-all-employees{margin-top:14px}
.payroll-all-table{min-width:920px}
@media(max-width:760px){
  .payroll-items-modal{width:min(96vw,980px)!important}
  .payroll-custom-row{grid-template-columns:1fr 1fr;gap:7px}
  .payroll-custom-row .pay-item-basis{grid-column:1 / -1}
  .payroll-custom-row .pay-item-remove{justify-self:end}
  .payroll-all-table{min-width:880px!important}
}


/* 3.9.59 annual cash category stats + employee full schedule */
.cash-year-stats{margin-bottom:14px}
.cash-year-stats .panel-head{align-items:flex-start}
.cash-year-totals{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.cash-year-totals span{white-space:nowrap;padding:6px 9px;border-radius:9px;background:#f8fafc;color:#475569}
.cash-year-table{min-width:720px}
.employee-own-schedule-table{min-width:760px}
@media(max-width:760px){
  .cash-year-totals{justify-content:flex-start}
  .cash-year-table{min-width:700px!important}
  .employee-own-schedule-table{min-width:720px!important}
}


/* 3.9.60 clean statistics dashboard */
.stats-clean-filter{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.stats-clean-filter label{font-weight:800;color:#334155;white-space:nowrap}
.stats-clean-filter .input{max-width:190px}
.stats-clean-kpis{margin-bottom:14px}
.stats-clean-kpis .stat{min-height:110px}
.stats-clean-kpis .stat b{font-size:22px}
.stats-clean-kpis .stat em{display:block;margin-top:6px;font-style:normal;font-size:11px;color:#64748b;word-break:keep-all}
.stats-clean-sections{align-items:stretch;margin-bottom:14px}
.stats-clean-card{padding:0;overflow:hidden}
.stats-clean-card .panel-head{padding:16px 18px;border-bottom:1px solid #e2e8f0;margin:0}
.stats-clean-card .panel-head button{white-space:nowrap}
.stats-clean-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:6px 18px 16px}
.stats-clean-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #eef2f7;min-width:0}
.stats-clean-list>div span{font-size:12px;color:#64748b;word-break:keep-all}
.stats-clean-list>div b{font-size:14px;color:#0f172a;white-space:nowrap}
.stats-clean-list>div.warn b{color:#dc2626}
.stats-clean-list>div.total{grid-column:1/-1;border-bottom:0;margin-top:4px;padding:13px 12px;border-radius:11px;background:#f8fafc}
.stats-clean-list>div.total b{font-size:17px}
.stats-clean-graph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.stats-money-chart{padding:16px 16px 12px;min-width:0}
.stats-money-chart .graph-head h3{font-size:15px;color:#0f172a}
.stats-money-chart .graph-head small{font-size:10px;line-height:1.45;color:#64748b}
.stats-money-chart svg{min-height:255px}
.graph-money-value,.graph-profit-value{font-size:7px;font-weight:900;paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linejoin:round}
.stats-chart-numbers{display:flex;gap:7px;overflow-x:auto;padding:8px 2px 3px;scrollbar-width:thin}
.stats-chart-numbers>div{flex:0 0 112px;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;padding:9px 10px;display:grid;gap:4px}
.stats-chart-numbers>div b{font-size:11px;color:#0f172a}
.stats-chart-numbers>div span,.stats-chart-numbers>div em{font-size:9px;line-height:1.35;font-style:normal;white-space:nowrap}
.stats-chart-numbers>div span{color:#334155}
.stats-chart-numbers>div em{color:#dc2626;font-weight:700}
.stats-chart-numbers.profit>div em{color:#64748b;font-weight:600}
.stats-chart-numbers.profit>div span.plus{color:#059669;font-weight:800}
.stats-chart-numbers.profit>div span.minus{color:#dc2626;font-weight:800}
.stats-clean-employee,.stats-clean-year{margin-top:14px}
.stats-clean-employee-table{min-width:780px}
.stats-clean-year-table{min-width:1540px}
@media(max-width:900px){
  .stats-clean-sections,.stats-clean-graph-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .stats-clean-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats-clean-kpis .stat{min-height:96px!important;padding:12px!important}
  .stats-clean-kpis .stat b{font-size:16px!important;white-space:nowrap!important}
  .stats-clean-kpis .stat em{font-size:10px!important}
  .stats-clean-list{grid-template-columns:1fr;padding:4px 14px 14px}
  .stats-clean-list>div.total{grid-column:auto}
  .stats-clean-employee-table{min-width:760px!important}
  .stats-clean-year-table{min-width:1500px!important}
  .stats-money-chart{padding:13px 10px 10px}
  .stats-money-chart svg{min-height:230px}
  .stats-chart-numbers>div{flex-basis:108px}
}


/* 3.9.61 admin/CEO monthly workforce spend */
.ceo-home-hero .ceo-hero-metrics{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.ceo-home-hero .ceo-project-metric,
.ceo-home-hero .ceo-people-metric{
  grid-column:span 2;
}
.ceo-home-hero .ceo-spend-metric{
  grid-column:span 3;
  background:rgba(255,255,255,.19);
}
.ceo-home-hero .ceo-spend-metric b{
  font-size:21px;
  white-space:nowrap;
}
.admin-home-hero{
  align-items:stretch;
  gap:18px;
}
.admin-home-hero .admin-hero-copy{
  min-width:250px;
  flex:1;
}
.admin-hero-metrics{
  flex:1.5;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.admin-hero-metrics>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.14);
}
.admin-hero-metrics small,.admin-hero-metrics em{
  color:rgba(255,255,255,.82);
  font-style:normal;
  word-break:keep-all;
}
.admin-hero-metrics b{
  margin:4px 0;
  font-size:20px;
  color:#fff;
  white-space:nowrap;
}
@media(max-width:900px){
  .admin-home-hero{display:block!important}
  .admin-hero-metrics{margin-top:14px}
}
@media(max-width:760px){
  .ceo-home-hero .ceo-hero-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ceo-home-hero .ceo-project-metric{grid-column:1 / -1!important}
  .ceo-home-hero .ceo-people-metric,
  .ceo-home-hero .ceo-spend-metric{grid-column:span 1!important}
  .ceo-home-hero .ceo-spend-metric b{font-size:14px!important;letter-spacing:-.04em}
  .admin-hero-metrics{
    grid-template-columns:1fr!important;
  }
  .admin-hero-metrics b{font-size:17px!important}
}


/* 3.9.63 payroll summary + CEO payroll view */
.payroll-summary-card{margin-top:14px}
.payroll-summary-table{min-width:860px}
.payroll-summary-table th,.payroll-summary-table td{text-align:center}
.payroll-summary-table td.num{text-align:right}
.payroll-zero-units{opacity:.72;background:#fafafa}
.payroll-zero-units td:first-child b{color:#64748b}
.payroll-all-employees{margin-top:12px}
.payroll-all-employees .panel-head small{word-break:keep-all}
@media(max-width:760px){
  .payroll-summary-table{min-width:820px!important}
  .payroll-all-table{min-width:900px!important}
}


/* 3.9.64 company-wide schedule + payroll signatures */
.company-schedule-list{margin-top:14px}
.company-schedule-view-table{min-width:820px}
.viewer-summary{margin-bottom:12px}

.payroll-confirmation-footer{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.payroll-confirm-company,.payroll-confirm-worker{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:14px 16px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  min-width:0;
}
.payroll-confirm-company>span,.payroll-confirm-worker>span{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.payroll-confirm-company>b,.payroll-confirm-worker>b{
  font-size:16px;
  white-space:nowrap;
}
.payroll-confirm-company img,.payroll-confirm-worker img{
  width:auto;
  height:58px;
  max-width:150px;
  object-fit:contain;
  margin-left:auto;
}
.payroll-confirm-company em,.payroll-confirm-worker em{
  margin-left:auto;
  font-size:11px;
  color:#94a3b8;
  font-style:normal;
  white-space:nowrap;
}
.payroll-confirm-worker small{
  display:block;
  font-size:10px;
  color:#64748b;
  white-space:nowrap;
}
.payroll-sign-modal{max-width:820px!important}
.payroll-sign-canvas-wrap{
  margin:14px 0;
  padding:10px;
  border:2px dashed #cbd5e1;
  border-radius:14px;
  background:#fff;
}
#payrollSignCanvas{
  display:block;
  width:100%;
  height:220px;
  border-radius:10px;
  background:#fff;
  touch-action:none;
}
.payroll-sign-row-rich{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px!important;
  align-items:stretch!important;
}
.payroll-sign-party{
  min-height:86px;
  padding:10px 12px;
  border:1px solid #dbe3ee;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.payroll-sign-party>span{
  font-size:11px;
  color:#64748b;
  font-weight:800;
  white-space:nowrap;
}
.payroll-sign-party>b{white-space:nowrap}
.payroll-sign-party img{
  height:58px;
  width:auto;
  max-width:150px;
  object-fit:contain;
  margin-left:auto;
}
.payroll-sign-party em{
  margin-left:auto;
  color:#94a3b8;
  font-size:10px;
  font-style:normal;
  white-space:nowrap;
}
.payroll-sign-party small{
  font-size:9px;
  color:#64748b;
  white-space:nowrap;
}
@media print{
  .no-print{display:none!important}
  .payroll-confirmation-footer{display:none!important}
}
@media(max-width:760px){
  .company-schedule-view-table{min-width:760px!important}
  .payroll-confirmation-footer{grid-template-columns:1fr}
  .payroll-confirm-company,.payroll-confirm-worker{min-height:80px;padding:11px 12px;gap:8px}
  .payroll-confirm-company img,.payroll-confirm-worker img{height:50px;max-width:120px}
  .payroll-sign-row-rich{grid-template-columns:1fr!important}
  #payrollSignCanvas{height:190px}
}


/* 3.9.66 payroll layout, admin finalization, visible mobile quick dock */
.payroll-statement,
.payroll-statement section,
.payroll-statement table{min-width:0}
.payroll-statement th,
.payroll-statement td{
  overflow-wrap:anywhere;
  word-break:normal;
}
.payroll-money-table td:nth-child(2){overflow-wrap:anywhere;word-break:break-word}
.payroll-confirm-company,
.payroll-confirm-worker,
.payroll-sign-party{flex-wrap:wrap}
.payroll-confirm-company img,
.payroll-confirm-worker img,
.payroll-sign-party img{flex:0 0 auto}
.payroll-company-finalization{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
}
.payroll-final-state{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:0;
}
.payroll-final-state small{
  font-size:9px!important;
  color:#64748b;
  white-space:normal!important;
  text-align:right;
}
.payroll-finalize-btn{white-space:nowrap}
.payroll-final-wait{white-space:nowrap}
.payroll-sign-locked{
  color:#047857!important;
  font-weight:800;
  white-space:normal!important;
}

@media(max-width:760px){
  .payroll-print-area{
    width:100%;
    overflow:hidden;
    padding:0!important;
    border-radius:14px;
  }
  .payroll-statement{
    width:100%;
    max-width:100%;
    padding:14px 10px!important;
    overflow:hidden;
  }
  .payroll-print-head{
    gap:8px;
    align-items:flex-start;
  }
  .payroll-company b{font-size:13px}
  .payroll-title-block h1{font-size:17px!important;letter-spacing:.08em}
  .payroll-title-block p{font-size:9px}

  .payroll-info-table{
    width:100%;
    table-layout:fixed!important;
  }
  .payroll-info-table th{
    width:14%!important;
    padding:6px 3px!important;
    font-size:8px!important;
    text-align:center;
  }
  .payroll-info-table td{
    width:19.33%!important;
    padding:6px 4px!important;
    font-size:8.5px!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .payroll-two-tables{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .payroll-two-tables section{min-width:0}
  .payroll-money-table th,
  .payroll-money-table td{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  .payroll-summary-table tbody{display:block}
  .payroll-summary-table tr{
    display:grid;
    grid-template-columns:38% 62%;
    width:100%;
  }
  .payroll-summary-table th,
  .payroll-summary-table td{
    display:block;
    width:auto!important;
    min-width:0;
    padding:8px 7px!important;
    font-size:9px!important;
    border-top:0;
  }
  .payroll-summary-table td{text-align:right}

  .payroll-work-summary,
  .payroll-attendance-section{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:3px;
  }
  .payroll-work-summary .payroll-detail-table{min-width:520px}
  .payroll-attendance-table{min-width:680px!important}
  .payroll-attendance-table th,
  .payroll-attendance-table td{
    white-space:nowrap;
    word-break:keep-all;
  }
  .payroll-attendance-table th:nth-child(3),
  .payroll-attendance-table td:nth-child(3){
    white-space:normal;
    min-width:150px;
  }

  .payroll-confirmation-footer{gap:9px}
  .payroll-confirm-company,
  .payroll-confirm-worker,
  .payroll-sign-party{
    min-height:0!important;
    padding:11px!important;
    gap:7px!important;
  }
  .payroll-confirm-company>b,
  .payroll-confirm-worker>b,
  .payroll-sign-party>b{
    font-size:13px;
    white-space:normal;
  }
  .payroll-confirm-company img,
  .payroll-confirm-worker img,
  .payroll-sign-party img{
    height:44px!important;
    max-width:105px!important;
    margin-left:auto;
  }
  .payroll-confirm-worker small,
  .payroll-sign-party small{
    width:100%;
    white-space:normal!important;
    text-align:right;
  }
  .payroll-company-finalization{
    width:100%;
    margin-left:0;
    justify-content:flex-end;
  }
  .payroll-finalize-btn{
    min-height:38px;
    padding:9px 13px;
    font-size:11px;
  }

  .bottom-quick{
    background:linear-gradient(135deg,#10223f 0%,#17365f 55%,#245a98 100%)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 12px 34px rgba(15,35,65,.34),0 0 0 1px rgba(37,99,235,.08)!important;
    padding:7px!important;
  }
  .bottom-quick button{
    color:#e6effb!important;
    min-height:54px!important;
    border-radius:14px!important;
    transition:transform .12s ease,background .12s ease,color .12s ease;
  }
  .bottom-quick button>span{
    width:30px;
    height:30px;
    border-radius:10px;
    display:grid!important;
    place-items:center;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:17px!important;
    line-height:30px!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .bottom-quick button>small{
    color:inherit!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  .bottom-quick button.active{
    background:#fff!important;
    color:#17365f!important;
    box-shadow:0 4px 12px rgba(5,20,40,.22);
  }
  .bottom-quick button.active>span{
    background:#eaf2ff;
    color:#1d4ed8;
    box-shadow:none;
  }
  .bottom-quick button:active{transform:translateY(1px) scale(.98)}
}

@media(max-width:420px){
  .payroll-statement{padding:12px 7px!important}
  .payroll-info-table th{font-size:7.5px!important}
  .payroll-info-table td{font-size:8px!important;padding-left:3px!important;padding-right:3px!important}
  .bottom-quick{left:7px!important;right:7px!important}
  .bottom-quick button>small{font-size:9px!important}
}

@media print{
  .payroll-statement{overflow:visible!important}
  .payroll-summary-table tbody{display:table-row-group!important}
  .payroll-summary-table tr{display:table-row!important}
  .payroll-summary-table th,
  .payroll-summary-table td{display:table-cell!important;width:auto!important}
  .payroll-work-summary,
  .payroll-attendance-section{overflow:visible!important}
  .payroll-work-summary .payroll-detail-table,
  .payroll-attendance-table{min-width:0!important}
  .payroll-company-finalization{margin-left:auto!important;width:auto!important}
}


/* 3.9.72 payroll responsive polish */
.payroll-summary-card{
  overflow:hidden;
}
.payroll-total-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.payroll-total-cell{
  min-width:0;
  padding:13px 10px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  text-align:center;
}
.payroll-total-cell span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.payroll-total-cell b{
  display:block;
  min-width:0;
  margin-top:5px;
  color:#172033;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  letter-spacing:-.035em;
}
.payroll-total-cell.gross{background:#eff6ff;border-color:#bfdbfe}
.payroll-total-cell.deduct{background:#fff7ed;border-color:#fed7aa}
.payroll-total-cell.net{background:#ecfdf5;border-color:#a7f3d0}
.payroll-total-cell.gross b{color:#1d4ed8}
.payroll-total-cell.deduct b{color:#c2410c}
.payroll-total-cell.net b{color:#047857}

.payroll-all-mobile{display:none}
.payroll-all-table{
  width:100%;
  min-width:760px;
}
.payroll-all-table th,
.payroll-all-table td{
  vertical-align:middle;
  white-space:nowrap;
}

.payroll-view-only{
  display:inline-flex!important;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:10px 16px!important;
  border:1px solid #93c5fd!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#3b82f6 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(37,99,235,.22);
}
.payroll-view-only span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:8px;
  background:rgba(255,255,255,.16);
  font-size:13px;
}
.payroll-view-only b{
  color:#fff;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.payroll-view-only:active{
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(37,99,235,.18);
}

.payroll-net-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
  width:100%;
}
.payroll-net-summary>div{
  min-width:0;
  padding:12px 8px;
  border:1px solid #dbe5f0;
  border-radius:12px;
  background:#f8fafc;
  text-align:center;
}
.payroll-net-summary span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.payroll-net-summary b{
  display:block;
  min-width:0;
  margin-top:5px;
  color:#172033;
  font-size:16px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.payroll-net-summary .gross{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.payroll-net-summary .gross b{color:#1d4ed8}
.payroll-net-summary .deduct{
  background:#fff7ed;
  border-color:#fed7aa;
}
.payroll-net-summary .deduct b{color:#c2410c}
.payroll-net-summary .net{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.payroll-net-summary .net b{
  color:#047857;
  font-size:17px;
}

@media(max-width:900px){
  .payroll-total-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .payroll-summary-card,
  .payroll-all-employees{
    padding:12px!important;
    overflow:hidden;
  }
  .payroll-summary-card .panel-head,
  .payroll-all-employees .panel-head{
    gap:8px;
    align-items:flex-start;
  }
  .payroll-total-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .payroll-total-cell{
    padding:11px 7px;
  }
  .payroll-total-cell span{
    font-size:8px;
  }
  .payroll-total-cell b{
    font-size:13px;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .payroll-all-desktop{display:none!important}
  .payroll-all-mobile{
    display:grid;
    gap:9px;
  }
  .payroll-employee-card{
    min-width:0;
    padding:12px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 10px rgba(15,23,42,.04);
  }
  .payroll-employee-card.zero{
    background:#f8fafc;
    opacity:.78;
  }
  .payroll-employee-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:9px;
  }
  .payroll-employee-head>div{min-width:0}
  .payroll-employee-head b{
    display:block;
    color:#172033;
    font-size:14px;
  }
  .payroll-employee-head small{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:9px;
  }
  .payroll-employee-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:10px;
  }
  .payroll-employee-metrics>div{
    min-width:0;
    padding:8px;
    border-radius:10px;
    background:#f8fafc;
  }
  .payroll-employee-metrics span{
    display:block;
    color:#64748b;
    font-size:8px;
    font-weight:850;
  }
  .payroll-employee-metrics b{
    display:block;
    margin-top:3px;
    color:#263247;
    font-size:11px;
    line-height:1.2;
    white-space:nowrap;
    letter-spacing:-.035em;
  }
  .payroll-employee-metrics .net{
    background:#ecfdf5;
  }
  .payroll-employee-metrics .net b{color:#047857}
  .payroll-mobile-edit{
    width:100%;
    margin-top:9px;
    min-height:38px;
  }

  .payroll-view-only{
    width:100%;
    justify-content:center;
    min-height:48px;
    border-radius:14px!important;
  }
  .payroll-view-only b{font-size:13px}

  .payroll-net-summary{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px;
    margin-top:8px;
  }
  .payroll-net-summary>div{
    padding:9px 3px;
    border-radius:9px;
  }
  .payroll-net-summary span{
    font-size:7.5px;
  }
  .payroll-net-summary b{
    margin-top:4px;
    font-size:clamp(10px,3vw,13px);
    letter-spacing:-.065em;
  }
  .payroll-net-summary .net b{
    font-size:clamp(10.5px,3.15vw,13.5px);
  }
}

@media(max-width:390px){
  .payroll-total-cell b{font-size:12px}
  .payroll-employee-metrics b{font-size:10px}
  .payroll-net-summary{
    gap:4px;
  }
  .payroll-net-summary>div{
    padding-left:2px;
    padding-right:2px;
  }
  .payroll-net-summary span{font-size:7px}
  .payroll-net-summary b{
    font-size:10px;
    letter-spacing:-.075em;
  }
  .payroll-net-summary .net b{font-size:10.5px}
}

@media print{
  .payroll-net-summary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .payroll-net-summary>div{
    padding:8px 6px!important;
  }
  .payroll-net-summary span{font-size:8px!important}
  .payroll-net-summary b{font-size:11px!important}
}


/* payroll approval + SMS + stable view-button layout */
.page-title>.row-wrap:has(.payroll-view-only){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  min-width:0;
}
.payroll-view-only{
  box-sizing:border-box!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#2563eb!important;
  background-image:none!important;
  border:1px solid #1d4ed8!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(37,99,235,.22)!important;
}
.payroll-view-only::before,
.payroll-view-only::after{display:none!important}
.payroll-view-only span{
  flex:0 0 25px;
}
.btn-sms{
  background:#0f766e!important;
  border:1px solid #0f766e!important;
  color:#fff!important;
  font-weight:850!important;
  white-space:nowrap;
}
.btn-sms:active{transform:translateY(1px)}
.payroll-row-actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.payroll-sms-all{
  min-height:38px;
  padding:8px 12px!important;
}
.payroll-mobile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}
.payroll-mobile-actions .payroll-mobile-edit{
  margin-top:0!important;
  width:100%;
}
.payroll-mobile-actions .btn-sms{
  width:100%;
  min-height:38px;
}
.payroll-approval-card{
  margin:14px 0;
  border-color:#fde68a;
  background:linear-gradient(180deg,#fffef8 0%,#fff 100%);
}
.payroll-approval-card .panel-head{
  align-items:flex-start;
  gap:12px;
}
.payroll-approval-card .panel-head small{
  display:block;
  margin-top:4px;
  color:#64748b;
  line-height:1.45;
}
.payroll-approval-table{
  min-width:760px;
}
.payroll-approval-table td small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:9px;
}
.payroll-approval-finalize{
  min-width:86px;
  white-space:nowrap;
}

@media(max-width:760px){
  .page-title:has(.payroll-view-only){
    display:grid!important;
    grid-template-columns:1fr;
    align-items:stretch!important;
    gap:10px!important;
  }
  .page-title>.row-wrap:has(.payroll-view-only){
    width:100%!important;
    display:block!important;
  }
  .payroll-view-only{
    width:100%!important;
    max-width:100%!important;
    min-height:48px!important;
    margin:0!important;
    justify-content:center!important;
    border-radius:14px!important;
  }
  .payroll-approval-card{
    padding:12px!important;
  }
  .payroll-approval-card .table-wrap{
    overflow:auto;
  }
  .payroll-approval-table{
    min-width:700px!important;
  }
}


/* 3.9.79 construction schedule calendar sized like attendance calendar */
.schedule-calendar-card{
  padding:12px!important;
  overflow:hidden;
}
.schedule-calendar-inner{
  width:100%;
  min-width:0;
}
.schedule-cal-head{
  min-height:46px;
  margin-bottom:6px;
}
.schedule-cal-head h3{
  margin:0!important;
  font-size:15px!important;
  font-weight:900;
}
.schedule-cal-head button{
  width:38px;
  height:38px;
  border-radius:10px;
  font-size:22px;
}
.schedule-weekdays{
  border-bottom:1px solid #e6ebf2;
  margin-bottom:6px;
}
.schedule-weekdays span{
  padding:7px 3px!important;
  text-align:center;
  color:#64748b;
  font-size:9px!important;
  font-weight:900;
}
.schedule-weekdays span:first-child{color:#dc2626}
.schedule-weekdays span:last-child{color:#2563eb}
.schedule-calendar-grid{
  width:100%;
  min-width:0;
  gap:0!important;
}
.schedule-calendar-grid .day{
  min-height:105px!important;
  padding:7px!important;
  border-radius:0!important;
  border:1px solid #edf1f5!important;
  background:#fff;
  overflow:hidden;
}
.schedule-calendar-grid .day.other{
  background:#fafbfc;
  border-color:#f4f6f8!important;
}
.schedule-calendar-grid .day.today{
  opacity:1!important;
  box-shadow:inset 0 0 0 2px #93c5fd;
}
.schedule-calendar-grid .day>b{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 5px;
  border-radius:8px;
  color:#334155;
  font-size:10px!important;
  font-weight:900;
}
.schedule-calendar-grid .day.today>b{
  background:#1d4ed8;
  color:#fff;
}
.schedule-calendar-grid .events{
  gap:4px!important;
  margin-top:5px!important;
}
.schedule-calendar-grid .schedule-event{
  min-height:28px;
  padding:5px 6px!important;
  border-radius:7px!important;
  font-size:9px!important;
  line-height:1.15;
}
.schedule-calendar-grid .schedule-event span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.schedule-calendar-grid .schedule-event small{
  display:block;
  margin-top:2px;
  font-size:7.5px;
  font-weight:750;
  opacity:.82;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.schedule-calendar-grid .manpower-count{
  margin-top:5px!important;
  font-size:7.5px!important;
  line-height:1.2;
}

@media(max-width:720px){
  .schedule-calendar-card{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:8px!important;
  }
  .schedule-calendar-inner{
    min-width:650px;
  }
  .schedule-calendar-grid .day{
    min-height:92px!important;
    padding:6px!important;
  }
  .schedule-calendar-grid .schedule-event{
    min-height:25px;
    padding:4px 5px!important;
    font-size:8.5px!important;
  }
  .schedule-calendar-grid .schedule-event small{
    font-size:7px;
  }
}


/* 3.9.81 work-time summaries + colored schedule dates */
.work-time-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:10px 0 12px;
}
.work-time-summary>div{
  min-width:0;
  padding:11px 12px;
  border:1px solid #dbe5f0;
  border-radius:12px;
  background:#f8fafc;
}
.work-time-summary span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:850;
}
.work-time-summary b{
  display:block;
  margin-top:4px;
  color:#172033;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.03em;
}
.work-time-summary>div:first-child{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.work-time-summary>div:first-child b{color:#1d4ed8}
.work-time-summary>div:last-child{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.work-time-summary>div:last-child b{color:#047857}

.attendance-time-list .attendance-time-item{
  align-items:flex-start;
}
.attendance-time-item>div{
  min-width:0;
}
.attendance-time-item>div>b{
  color:#172033;
  font-size:12px;
}
.attendance-time-item>div>small{
  line-height:1.55;
}
.attendance-time-item>div>small strong{
  color:#334155;
  font-size:10px;
  font-weight:850;
}
.recent-attendance-panel .work-time-summary{
  margin-top:2px;
}
.payroll-month-work .work-time-summary{
  margin-top:8px;
}

/* schedule date badge: attendance-calendar style */
.schedule-calendar-grid .day.has-schedule>b{
  color:#fff!important;
}
.schedule-calendar-grid .day.schedule-day-upcoming>b{
  background:#2563eb!important;
}
.schedule-calendar-grid .day.schedule-day-running>b{
  background:#16a34a!important;
}
.schedule-calendar-grid .day.schedule-day-done>b{
  background:#64748b!important;
}
/* today must always be red */
.schedule-calendar-grid .day.today{
  box-shadow:inset 0 0 0 2px #ef4444!important;
  background:#fffafa!important;
}
.schedule-calendar-grid .day.today>b{
  background:#dc2626!important;
  color:#fff!important;
  box-shadow:0 0 0 2px #fee2e2;
}
.schedule-calendar-grid .day.today .schedule-event{
  border-left:2px solid #dc2626;
}

.payroll-attendance-table th:nth-child(8){width:16%}
.payroll-attendance-table th:nth-child(9){width:8%}

@media(max-width:560px){
  .work-time-summary{
    gap:7px;
  }
  .work-time-summary>div{
    padding:9px 8px;
  }
  .work-time-summary span{
    font-size:8px;
  }
  .work-time-summary b{
    font-size:13px;
  }
  .attendance-time-item>div>b{
    font-size:11px;
  }
  .attendance-time-item>div>small strong{
    font-size:9px;
  }
}


/* secure payroll image sharing */
.payroll-share-modal{
  max-width:620px;
}
.payroll-share-queue{
  display:grid;
  gap:8px;
  margin-top:12px;
  max-height:52vh;
  overflow:auto;
}
.payroll-share-queue-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid #dbe5f0;
  border-radius:13px;
  background:#fff;
}
.payroll-share-queue-row>div{
  min-width:0;
}
.payroll-share-queue-row b{
  display:block;
  color:#172033;
  font-size:13px;
}
.payroll-share-queue-row small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:9px;
  line-height:1.4;
}
.payroll-share-queue-row .btn{
  flex:0 0 auto;
  min-width:86px;
}
@media(max-width:560px){
  .payroll-share-queue-row{
    align-items:stretch;
    flex-direction:column;
  }
  .payroll-share-queue-row .btn{
    width:100%;
  }
}


/* 3.9.92 header user + schedule actual split + personal attendance totals */
.schedule-actual-split b{
  display:block;
  margin-top:5px;
  color:#1d4ed8!important;
  font-size:13px!important;
  font-weight:950!important;
  line-height:1.35;
  white-space:nowrap;
}
.schedule-actual-split em{
  display:block;
  margin-top:4px;
  color:#c2410c!important;
  font-size:10px!important;
  font-style:normal;
  font-weight:900!important;
  line-height:1.35;
  white-space:nowrap;
}
.attendance-month-total-strip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.attendance-month-total-strip>div{
  min-width:0;
  padding:12px 14px;
  border:1px solid #dbe5f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 14px rgba(15,23,42,.035);
}
.attendance-month-total-strip>div:first-child{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.attendance-month-total-strip>div:last-child{
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.attendance-month-total-strip span{
  display:block;
  color:#64748b;
  font-size:9px;
  font-weight:900;
}
.attendance-month-total-strip b{
  display:block;
  margin-top:4px;
  color:#172033;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.03em;
}
.attendance-month-total-strip>div:first-child b{color:#1d4ed8}
.attendance-month-total-strip>div:last-child b{color:#047857}

@media(max-width:760px){
  .mobile-reference-header .header-end .user-mini{
    display:flex!important;
    position:absolute!important;
    top:11px!important;
    right:13px!important;
    width:auto!important;
    max-width:90px!important;
    height:46px!important;
    padding:0 8px!important;
    border:1px solid #dbe5f0!important;
    border-radius:12px!important;
    background:#fff!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
    z-index:2!important;
  }
  .mobile-reference-header .header-end .user-mini span{
    display:block!important;
    max-width:74px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#172033!important;
    font-size:10px!important;
    font-weight:950!important;
  }
  .mobile-reference-header .header-end .user-mini small{
    display:none!important;
  }
  .centered-brand{
    max-width:calc(100vw - 190px)!important;
  }
  .schedule-actual-split b{
    font-size:11px!important;
  }
  .schedule-actual-split em{
    font-size:9px!important;
  }
}
@media(max-width:420px){
  .mobile-reference-header .header-end .user-mini{
    max-width:78px!important;
    padding:0 6px!important;
  }
  .mobile-reference-header .header-end .user-mini span{
    max-width:64px!important;
    font-size:9.5px!important;
  }
  .centered-brand{
    max-width:calc(100vw - 175px)!important;
  }
  .attendance-month-total-strip>div{
    padding:10px;
  }
  .attendance-month-total-strip b{
    font-size:14px;
  }
}


/* employee identity header + remembered-name login + install link */
.login-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:14px;
}
.login-tabs .btn{
  min-width:0;
  padding:9px 5px;
  font-size:10px;
  white-space:normal;
  line-height:1.2;
}
.login-remember{
  display:flex;
  align-items:center;
  gap:7px;
  margin:-3px 0 12px;
  color:#475569;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.login-remember input{
  width:17px;
  height:17px;
  accent-color:#2563eb;
}
.login-download-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  margin-top:10px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

@media(max-width:760px){
  .mobile-reference-header .header-end .user-mini{
    min-width:78px!important;
    max-width:94px!important;
    height:48px!important;
    padding:5px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
  }
  .mobile-reference-header .header-end .user-mini span{
    display:block!important;
    max-width:78px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#172033!important;
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:950!important;
  }
  .mobile-reference-header .header-end .user-mini small{
    display:block!important;
    max-width:78px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#64748b!important;
    font-size:8px!important;
    line-height:1.15!important;
    font-weight:850!important;
  }
}
@media(max-width:420px){
  .login-tabs{gap:4px}
  .login-tabs .btn{font-size:9px;padding:8px 3px}
  .mobile-reference-header .header-end .user-mini{
    min-width:70px!important;
    max-width:82px!important;
  }
  .mobile-reference-header .header-end .user-mini span,
  .mobile-reference-header .header-end .user-mini small{
    max-width:68px!important;
  }
}


/* employee personal payroll: remove all print-only UI */
body:has(.role-pill.my) #doPrint,
body:has(.role-pill.my) .payroll-print-foot,
body:has(.role-pill.my) .payroll-print-only,
body:has(.role-pill.my) [data-payroll-print]{
  display:none!important;
}
body:has(.role-pill.my) .payroll-print-area{
  box-shadow:none;
}


/* 4.0.0 admin login merge + configurable home shortcut */
.login-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.home-shortcut-settings .settings-section-head{
  margin-bottom:12px;
}
.home-shortcut-editor{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.home-shortcut-preview{
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-shortcut-preview img,
.home-shortcut-preview .home-shortcut-default,
#homeShortcutPreview{
  width:96px;
  height:96px;
  border-radius:22px;
  object-fit:cover;
  box-shadow:0 8px 22px rgba(15,23,42,.14);
  border:1px solid #dbe5f0;
  background:#fff;
}
.home-shortcut-default,
#homeShortcutPreview.home-shortcut-default{
  display:grid;
  place-items:center;
  background:#224472;
  color:#fff;
  font-size:24px;
  font-weight:950;
}
.home-shortcut-fields{
  min-width:0;
}
@media(max-width:560px){
  .home-shortcut-editor{
    grid-template-columns:82px minmax(0,1fr);
    gap:12px;
  }
  .home-shortcut-preview img,
  .home-shortcut-preview .home-shortcut-default,
  #homeShortcutPreview{
    width:74px;
    height:74px;
    border-radius:18px;
  }
}


/* 3.9.147 full statistics on admin / CEO dashboard */
.dashboard-schedule-panel{margin-bottom:16px}
.dashboard-full-stats{margin-top:18px}
.dashboard-stats-title{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:0 0 14px;padding:18px 20px;border:1px solid #dbe5ef;border-radius:18px;
  background:linear-gradient(135deg,#f8fbff 0%,#ffffff 58%,#f8fafc 100%);
}
.dashboard-stats-title span{display:block;margin-bottom:5px;font-size:10px;font-weight:900;letter-spacing:.08em;color:#2563eb}
.dashboard-stats-title h2{margin:0;font-size:20px;line-height:1.3;color:#0f172a}
.dashboard-stats-title p{margin:5px 0 0;font-size:11px;color:#64748b}
.dashboard-stats-kpis{margin-bottom:14px}
.dashboard-stats-sections{margin-bottom:14px}
.dashboard-stats-graphs{margin-bottom:14px}
.dashboard-stats-table{margin-top:14px}
.dashboard-full-stats .stats-clean-year-table{min-width:1540px}
@media(max-width:760px){
  .dashboard-stats-title{align-items:flex-start;flex-direction:column;padding:15px}
  .dashboard-stats-title h2{font-size:17px}
  .dashboard-stats-title .btn{width:100%}
  .dashboard-full-stats{margin-top:14px}
}


/* 3.9.150 approved compact management dashboard */
.home-overview{
  margin-bottom:14px;
  padding:18px;
  border:1px solid #dfe7f1;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.home-overview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.home-overview-head>div{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.home-section-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border-radius:12px;
  background:#eef6ff;
  color:#2563eb;
  font-size:19px;
  font-weight:900;
}
.home-overview-head h2{margin:0;color:#0f172a;font-size:18px;letter-spacing:-.03em}
.home-overview-head small{display:block;margin-top:3px;color:#64748b;font-size:10px;font-weight:600}
.home-overview-head button{
  border:0;
  background:#f1f5f9;
  color:#475569;
  border-radius:10px;
  padding:8px 10px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.home-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.home-overview-metric{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:126px;
  padding:14px 14px 13px 16px;
  border:1px solid #e4eaf2;
  border-radius:17px;
  background:#fff;
  text-align:left;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.home-overview-metric:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#2563eb;
}
.home-overview-metric.cyan:before{background:#0891b2}
.home-overview-metric.violet:before{background:#7c3aed}
.home-overview-metric.orange:before{background:#f59e0b}
.home-overview-metric.red:before{background:#ef4444}
.home-overview-metric.green:before{background:#10b981}
.home-overview-metric.indigo:before{background:#4f46e5}
.home-overview-metric.teal:before{background:#14b8a6}
.home-overview-metric>span{
  display:block;
  color:#64748b;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
}
.home-overview-metric>b{
  display:block;
  margin-top:9px;
  color:#0f172a;
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.home-overview-metric.red>b{color:#dc2626}
.home-overview-metric.orange>b{color:#ea580c}
.home-overview-metric.green>b{color:#047857}
.home-overview-metric>small{
  display:block;
  margin-top:9px;
  min-height:30px;
  color:#64748b;
  font-size:10px;
  line-height:1.5;
  font-weight:650;
  letter-spacing:-.015em;
  word-break:keep-all;
}
.home-overview-metric:active{transform:translateY(1px);background:#f8fbff}

.dashboard-people-panel{
  border-radius:20px;
  padding:17px;
  box-shadow:0 7px 22px rgba(15,23,42,.05);
}
.dashboard-people-panel .panel-head h3,
.dashboard-schedule-panel .panel-head h3,
.home-finance-panel .panel-head h3{font-size:16px;color:#0f172a}
.dashboard-people-panel .panel-head small,
.dashboard-schedule-panel .panel-head small,
.home-finance-panel .panel-head small{font-size:10px;color:#64748b;line-height:1.45}
.dashboard-people-groups>div{
  min-height:84px;
  padding:13px 12px 12px 28px;
  border-radius:14px;
  background:#fff;
}
.dashboard-people-groups b{font-size:12px;color:#1e293b}
.dashboard-people-groups small{font-size:9px;color:#64748b;line-height:1.45}
.dashboard-people-groups .status-dot{left:12px;top:16px}

.dashboard-schedule-panel{
  margin-bottom:14px;
  border-radius:20px!important;
  padding:17px!important;
  box-shadow:0 7px 22px rgba(15,23,42,.05)!important;
}
.dashboard-schedule-panel .quick-list,
.dashboard-schedule-panel .schedule-list{margin-top:2px}

.home-stats-shortcut{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 14px;
  padding:17px 18px;
  border:1px solid #dfe8f4;
  border-radius:20px;
  background:linear-gradient(135deg,#fff 0%,#f7fbff 100%);
  text-align:left;
  box-shadow:0 7px 22px rgba(15,23,42,.045);
}
.home-stats-shortcut>div{min-width:0}
.home-stats-shortcut span{display:block;color:#2563eb;font-size:10px;font-weight:900}
.home-stats-shortcut b{display:block;margin-top:4px;color:#0f172a;font-size:17px;line-height:1.3;letter-spacing:-.025em}
.home-stats-shortcut small{display:block;margin-top:4px;color:#64748b;font-size:10px;line-height:1.4}
.home-stats-shortcut strong{
  flex:0 0 auto;
  padding:12px 15px;
  border-radius:13px;
  background:#eaf4ff;
  color:#1d4ed8;
  font-size:12px;
  white-space:nowrap;
}

.home-finance-panel{
  margin-bottom:14px;
  padding:17px;
  border-radius:20px;
  box-shadow:0 7px 22px rgba(15,23,42,.05);
}
.home-finance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:22px;
  row-gap:0;
}
.home-finance-grid>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:12px 4px;
  border-bottom:1px solid #eef2f7;
}
.home-finance-grid>div span{color:#64748b;font-size:11px;font-weight:650;white-space:nowrap}
.home-finance-grid>div b{
  color:#0f172a;
  font-size:14px;
  letter-spacing:-.025em;
  text-align:right;
  white-space:nowrap;
}
.home-finance-grid>div.danger b{color:#dc2626}
.home-finance-grid>div.ok b{color:#059669}
.home-finance-grid>div.total{
  margin-top:4px;
  padding:13px 10px;
  border-bottom:0;
  border-radius:12px;
  background:#f8fafc;
}
.home-finance-grid>div.total b{font-size:16px}

.dashboard-detailed-stats{margin-top:14px}
.dashboard-detailed-stats .dashboard-stats-title{
  padding:16px 18px;
  border-radius:18px;
}
.dashboard-detailed-stats .dashboard-stats-title h2{font-size:17px}

@media(max-width:980px){
  .home-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .home-overview{padding:13px 12px;border-radius:18px}
  .home-overview-head{margin-bottom:11px}
  .home-section-icon{width:34px;height:34px;flex-basis:34px;font-size:17px}
  .home-overview-head h2{font-size:15px}
  .home-overview-head small{font-size:9px}
  .home-overview-head button{font-size:9px;padding:7px 8px}
  .home-overview-grid{gap:9px}
  .home-overview-metric{
    min-height:120px;
    padding:13px 11px 12px 14px;
    border-radius:16px;
  }
  .home-overview-metric>span{font-size:10px}
  .home-overview-metric>b{margin-top:8px;font-size:17px;letter-spacing:-.055em}
  .home-overview-metric>small{margin-top:7px;min-height:32px;font-size:9px;line-height:1.55}
  .dashboard-people-panel,.dashboard-schedule-panel,.home-finance-panel{padding:14px!important;border-radius:18px!important}
  .dashboard-people-groups{gap:8px}
  .dashboard-people-groups>div{min-height:78px;padding:12px 10px 10px 26px}
  .dashboard-people-groups b{font-size:11px}
  .dashboard-people-groups small{font-size:8.5px}
  .home-stats-shortcut{display:block;padding:15px;border-radius:18px}
  .home-stats-shortcut b{font-size:14px}
  .home-stats-shortcut small{font-size:9px}
  .home-stats-shortcut strong{display:block;margin-top:12px;text-align:center;padding:11px;font-size:11px}
  .home-finance-grid{grid-template-columns:1fr;column-gap:0}
  .home-finance-grid>div{padding:11px 3px}
  .home-finance-grid>div span{font-size:10px}
  .home-finance-grid>div b{font-size:13px}
  .home-finance-grid>div.total b{font-size:15px}
}
@media(max-width:390px){
  .home-overview-metric>b{font-size:15px}
  .home-overview-metric>small{font-size:8.5px}
}


/* 3.9.151 linked settlement labor/tax details */
.settlement-linked-row>span{display:flex!important;flex-direction:column;gap:3px}
.settlement-linked-row>span>small{display:block;color:#64748b;font-size:9px;font-weight:650;line-height:1.35}
.settlement-linked-details{margin-top:14px;align-items:start}
.settlement-linked-details .panel{padding:0;overflow:hidden}
.settlement-linked-details .panel-head{padding:15px 16px;margin:0;border-bottom:1px solid #e8edf3}
.settlement-linked-details .panel-head h3{font-size:14px}
.settlement-linked-details .panel-head small{display:block;margin-top:3px;font-size:9px;color:#64748b}
.settlement-linked-details .table{min-width:560px}
.settlement-linked-details .table th{font-size:10px}
.settlement-linked-details .table td{font-size:10px}
@media(max-width:760px){
  .settlement-linked-details{grid-template-columns:1fr!important}
  .settlement-linked-details .table{min-width:520px}
}


/* 3.9.157 exact approved admin/CEO mobile dashboard */
.image-match-dashboard{
  width:100%;
  max-width:980px;
  margin:0 auto;
  display:grid;
  gap:14px;
  padding:0 0 10px;
}
.image-home-overview,
.image-home-card{
  border:1px solid #e3e9f1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.image-home-overview{padding:18px}
.image-home-section-head,
.image-home-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.image-home-section-head{margin-bottom:14px}
.image-home-section-head>div,
.image-home-card-head>div{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.image-home-section-head h2,
.image-home-card-head h3{
  margin:0;
  color:#0f172a;
  font-weight:900;
  letter-spacing:-.035em;
}
.image-home-section-head h2{font-size:20px}
.image-home-card-head h3{font-size:17px}
.image-home-section-head>small,
.image-home-card-head small{
  color:#64748b;
  font-size:10px;
  line-height:1.45;
  font-weight:600;
}
.image-home-card-head small{display:block;margin-top:3px}
.image-home-head-icon,
.image-card-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:#1877f2;
  background:#eef6ff;
  font-weight:900;
}
.image-home-head-icon{
  width:34px;height:34px;border-radius:11px;font-size:19px;
}
.image-card-icon{
  width:38px;height:38px;border-radius:11px;font-size:19px;
}
.image-home-card-head button{
  flex:0 0 auto;
  border:1px solid #dfe7f0;
  border-radius:12px;
  background:#f8fafc;
  color:#172033;
  padding:9px 12px;
  font-size:10px;
  font-weight:900;
}
.image-chevron{font-size:25px;color:#0f172a;line-height:1}
.image-home-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.image-home-kpi{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:152px;
  padding:14px 12px 13px 15px;
  border:1px solid #e5eaf1;
  border-radius:18px;
  background:#fff;
  text-align:left;
  box-shadow:0 4px 13px rgba(15,23,42,.035);
}
.image-home-kpi:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:#2b7fff;
}
.image-home-kpi.kpi-violet:before{background:#8b5cf6}
.image-home-kpi.kpi-red:before{background:#ff4d5e}
.image-home-kpi.kpi-green:before{background:#20c997}
.image-home-kpi.kpi-orange:before{background:#ff9418}
.image-home-kpi .kpi-icon{
  display:inline-grid;
  place-items:center;
  width:25px;height:25px;
  border-radius:8px;
  margin-bottom:5px;
  color:#2680eb;
  background:#eef6ff;
  font-size:12px;
  font-weight:900;
}
.image-home-kpi.kpi-violet .kpi-icon{color:#7c3aed;background:#f3efff}
.image-home-kpi.kpi-red .kpi-icon{color:#ef3340;background:#fff0f1}
.image-home-kpi.kpi-green .kpi-icon{color:#0ca678;background:#eafbf6}
.image-home-kpi.kpi-orange .kpi-icon{color:#f97316;background:#fff5e8}
.image-home-kpi>em{
  display:block;
  color:#334155;
  font-size:11px;
  line-height:1.25;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
.image-home-kpi>em i{
  color:#64748b;
  font-style:normal;
  font-weight:650;
}
.image-home-kpi>b{
  display:block;
  margin-top:8px;
  color:#0f172a;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.image-home-kpi.kpi-red>b{color:#e11d2e}
.image-home-kpi.kpi-orange>b{color:#f97316}
.image-home-kpi>small{
  display:block;
  margin-top:10px;
  color:#64748b;
  font-size:9px;
  line-height:1.55;
  font-weight:650;
  white-space:nowrap;
}
.image-home-card{padding:18px}
.image-people-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.image-people-grid>div{
  position:relative;
  min-height:82px;
  padding:14px 12px 12px 34px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:#fff;
}
.image-people-grid .dot{
  position:absolute;
  left:14px;top:18px;
  width:10px;height:10px;border-radius:50%;
}
.image-people-grid .dot.green{background:#20c997}
.image-people-grid .dot.violet{background:#8b5cf6}
.image-people-grid .dot.orange{background:#ffad32}
.image-people-grid .dot.slate{background:#7890a8}
.image-people-grid b{
  display:block;
  color:#172033;
  font-size:12px;
  font-weight:900;
}
.image-people-grid small{
  display:block;
  margin-top:7px;
  color:#64748b;
  font-size:9px;
  font-weight:600;
}
.image-schedule-list{margin-top:13px}
.image-schedule-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(150px,.9fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 4px;
  border-top:1px solid #eef2f6;
}
.image-schedule-row:first-child{border-top:0}
.image-schedule-row>div{min-width:0}
.image-schedule-row b{
  display:block;
  color:#172033;
  font-size:12px;
  font-weight:900;
}
.image-schedule-row small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:9px;
}
.image-schedule-row>span{
  color:#64748b;
  font-size:9px;
  white-space:nowrap;
  text-align:right;
}
.image-schedule-row>em{
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
.image-schedule-row>em.running{background:#e8f3ff;color:#1877f2}
.image-schedule-row>em.upcoming{background:#fff4df;color:#d97706}
.image-schedule-row>em.done{background:#eef2f7;color:#64748b}
.image-home-stats{
  cursor:pointer;
}
.image-home-stats .image-home-card-head{margin-bottom:13px}
.image-stats-button{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:14px;
  background:linear-gradient(90deg,#edf7ff 0%,#dceeff 100%);
  color:#0866d9;
  font-size:13px;
  font-weight:900;
}
.image-home-finance{padding-bottom:16px}
.image-finance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;
  margin-top:12px;
}
.finance-col>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 2px;
  border-top:1px solid #edf1f5;
}
.finance-col>div:first-child{border-top:0}
.finance-col span{
  color:#64748b;
  font-size:10px;
  font-weight:650;
  white-space:nowrap;
}
.finance-col b{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.finance-col .danger b{color:#ef233c}
.finance-col .ok b{color:#0aa36e}

@media(max-width:620px){
  .image-match-dashboard{gap:12px}
  .image-home-overview,.image-home-card{border-radius:18px}
  .image-home-overview{padding:13px 10px}
  .image-home-card{padding:14px 12px}
  .image-home-section-head{margin-bottom:11px}
  .image-home-section-head h2{font-size:15px}
  .image-home-section-head>small{font-size:8px;white-space:nowrap}
  .image-home-head-icon{width:30px;height:30px;font-size:15px}
  .image-card-icon{width:32px;height:32px;font-size:15px}
  .image-home-card-head h3{font-size:14px}
  .image-home-card-head small{font-size:8px}
  .image-home-card-head button{padding:7px 8px;font-size:8px}
  .image-home-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .image-home-kpi{
    min-height:126px;
    padding:10px 6px 9px 8px;
    border-radius:14px;
  }
  .image-home-kpi:before{width:3px}
  .image-home-kpi .kpi-icon{
    width:20px;height:20px;border-radius:6px;
    margin-bottom:4px;font-size:9px;
  }
  .image-home-kpi>em{font-size:8px}
  .image-home-kpi>b{
    margin-top:7px;
    font-size:11px;
    letter-spacing:-.06em;
  }
  .image-home-kpi>small{
    margin-top:7px;
    font-size:6.8px;
    line-height:1.55;
    letter-spacing:-.025em;
  }
  .image-people-grid{gap:7px;margin-top:11px}
  .image-people-grid>div{min-height:70px;padding:11px 7px 9px 25px;border-radius:12px}
  .image-people-grid .dot{left:10px;top:14px;width:8px;height:8px}
  .image-people-grid b{font-size:10px}
  .image-people-grid small{margin-top:5px;font-size:7.5px}
  .image-schedule-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    padding:11px 1px;
  }
  .image-schedule-row>span{
    grid-column:1/2;
    grid-row:2;
    text-align:left;
    font-size:7.5px;
  }
  .image-schedule-row>em{
    grid-column:2;
    grid-row:1/3;
    padding:6px 8px;
    font-size:8px;
  }
  .image-schedule-row b{font-size:10px}
  .image-schedule-row small{font-size:7.5px}
  .image-stats-button{min-height:43px;font-size:11px}
  .image-finance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
  .finance-col>div{padding:9px 0}
  .finance-col span{font-size:8px}
  .finance-col b{font-size:10px}
}
@media(max-width:390px){
  .image-home-kpi-grid{gap:5px}
  .image-home-kpi{padding-left:7px;padding-right:5px}
  .image-home-kpi>b{font-size:10px}
  .image-home-kpi>small{font-size:6.2px}
  .image-home-section-head>small{font-size:7px}
}


/* 3.9.176 approved reference dashboard exact-match */
.nw-svg-icon{display:block;width:1em;height:1em;flex:0 0 auto}
.reference-dashboard-shell{background:#f7f9fc!important}
.reference-dashboard-shell main{background:#f7f9fc!important}
.reference-dashboard-shell #content{max-width:1540px!important;padding-top:14px!important}

.reference-header{
  min-height:76px!important;
  height:76px!important;
  display:grid!important;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:10px 24px!important;
  background:rgba(255,255,255,.99)!important;
  border-bottom:1px solid #edf1f6!important;
  box-shadow:0 4px 16px rgba(31,49,78,.04)!important;
}
.reference-header .header-start{justify-content:flex-start!important}
.reference-header .header-end{justify-content:flex-end!important}
.reference-menu-btn{
  width:54px!important;height:54px!important;
  border:1px solid #e8edf4!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#0c1f43!important;
  box-shadow:0 6px 18px rgba(23,39,70,.07)!important;
  padding:14px!important;
}
.reference-menu-btn .header-svg{width:100%;height:100%;stroke-width:2.4}
.reference-header .centered-brand{
  display:flex!important;
  align-items:center!important;
  justify-self:center!important;
  gap:12px!important;
  max-width:none!important;
}
.reference-header .header-logo{
  width:58px!important;height:58px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  box-shadow:0 7px 16px rgba(19,71,136,.18)!important;
}
.reference-header .brand-copy b{
  color:#071638!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
}
.reference-header .brand-copy small{
  color:#586a89!important;
  font-size:11px!important;
  margin-top:5px!important;
  font-weight:700!important;
}
.reference-header .brand-copy small em{
  color:#075ee8!important;
  font-size:11px!important;
  font-weight:950!important;
}
.reference-role-card{
  min-width:126px;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #e8edf4;
  border-radius:16px;
  background:#fff;
  color:#0b1b40;
  box-shadow:0 6px 18px rgba(23,39,70,.055);
  padding:8px 12px;
}
.reference-role-card .role-svg{width:22px;height:22px}
.reference-role-card span{display:flex;align-items:center}
.reference-role-card b{
  font-size:13px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}
.reference-role-card .role-chevron{width:16px;height:16px}

.reference-actions{
  width:auto;
  max-width:1540px;
  margin:14px auto 0;
  padding:0 22px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.reference-action{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid #d9e3ef;
  border-radius:14px;
  background:#fff;
  color:#142441;
  font-weight:950;
  font-size:15px;
  box-shadow:0 3px 10px rgba(28,44,74,.025);
}
.reference-action .action-svg{width:25px;height:25px}
.reference-action.update-reference{
  border-color:#95c3ff;
  background:linear-gradient(180deg,#f4f9ff 0%,#eaf5ff 100%);
  color:#0563eb;
}
.reference-action.update-reference .action-svg{stroke-width:2.5}

.reference-dashboard-shell .image-match-dashboard{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  padding:0 0 18px!important;
}
.reference-dashboard-shell .image-home-overview{grid-column:1/-1}
.reference-dashboard-shell .image-home-people{grid-column:1}
.reference-dashboard-shell .image-home-schedule{grid-column:2}
.reference-dashboard-shell .image-home-stats{grid-column:1}
.reference-dashboard-shell .image-home-finance{grid-column:1/-1}

.reference-dashboard-shell .image-home-overview,
.reference-dashboard-shell .image-home-card{
  border:1px solid #e6ebf2!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 9px 24px rgba(19,35,64,.055)!important;
}
.reference-dashboard-shell .image-home-overview{padding:18px!important}
.reference-dashboard-shell .image-home-card{padding:17px!important}
.reference-dashboard-shell .image-home-section-head{
  margin-bottom:14px!important;
}
.reference-dashboard-shell .image-home-section-head h2{
  font-size:21px!important;
  color:#0b1838!important;
  font-weight:950!important;
}
.reference-dashboard-shell .image-home-section-head>small{
  font-size:11px!important;
  color:#536585!important;
  font-weight:750!important;
}
.reference-dashboard-shell .image-home-head-icon,
.reference-dashboard-shell .image-card-icon{
  background:transparent!important;
  color:#087af2!important;
  border-radius:0!important;
}
.reference-dashboard-shell .image-home-head-icon{width:32px!important;height:32px!important}
.reference-dashboard-shell .image-card-icon{width:34px!important;height:34px!important}
.reference-dashboard-shell .section-svg{width:100%;height:100%;stroke-width:2.35}

.reference-dashboard-shell .image-home-kpi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
}
.reference-dashboard-shell .image-home-kpi{
  min-height:138px!important;
  border:1px solid #e8edf4!important;
  border-radius:15px!important;
  padding:13px 12px 12px 15px!important;
  box-shadow:0 3px 11px rgba(22,38,67,.035)!important;
}
.reference-dashboard-shell .image-home-kpi:before{width:3px!important}
.reference-dashboard-shell .image-home-kpi .kpi-icon{
  width:27px!important;height:27px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:6px!important;
  border-radius:7px!important;
}
.reference-dashboard-shell .kpi-svg{width:20px;height:20px;stroke-width:2.2}
.reference-dashboard-shell .image-home-kpi>em{
  color:#23314c!important;
  font-size:11px!important;
  font-weight:900!important;
}
.reference-dashboard-shell .image-home-kpi>b{
  margin-top:7px!important;
  color:#081637!important;
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.055em!important;
}
.reference-dashboard-shell .image-home-kpi.kpi-red>b{color:#ee2334!important}
.reference-dashboard-shell .image-home-kpi.kpi-orange>b{color:#ff6d00!important}
.reference-dashboard-shell .image-home-kpi>small{
  margin-top:10px!important;
  color:#60708c!important;
  font-size:9.5px!important;
  line-height:1.52!important;
  font-weight:700!important;
}

.reference-dashboard-shell .image-home-card-head h3{
  color:#0b1838!important;
  font-size:18px!important;
  font-weight:950!important;
}
.reference-dashboard-shell .image-home-card-head small{
  color:#63748e!important;
  font-size:9.5px!important;
  font-weight:650!important;
}
.reference-dashboard-shell .image-home-card-head button{
  border:1px solid #e4eaf1!important;
  border-radius:12px!important;
  background:#fbfcfe!important;
  color:#172441!important;
  padding:9px 13px!important;
  font-size:10px!important;
  font-weight:950!important;
}
.reference-dashboard-shell .image-people-grid{gap:10px!important;margin-top:13px!important}
.reference-dashboard-shell .image-people-grid>div{
  min-height:74px!important;
  padding:13px 12px 11px 36px!important;
  border-radius:12px!important;
  border-color:#e7edf3!important;
}
.reference-dashboard-shell .image-people-grid .dot{
  left:15px!important;top:17px!important;width:11px!important;height:11px!important;
}
.reference-dashboard-shell .image-people-grid b{
  font-size:12px!important;color:#14213f!important;font-weight:950!important;
}
.reference-dashboard-shell .image-people-grid small{
  margin-top:5px!important;font-size:9px!important;color:#6b7b95!important;
}

.reference-dashboard-shell .image-schedule-list{margin-top:12px!important}
.reference-dashboard-shell .image-schedule-row{
  grid-template-columns:minmax(0,1.3fr) minmax(180px,.85fr) auto!important;
  gap:12px!important;
  padding:12px 4px!important;
}
.reference-dashboard-shell .image-schedule-row b{font-size:12px!important;color:#101c39!important}
.reference-dashboard-shell .image-schedule-row small{font-size:9px!important;color:#697a95!important}
.reference-dashboard-shell .image-schedule-row>span{font-size:9px!important;color:#60708d!important}
.reference-dashboard-shell .image-schedule-row>em{
  padding:7px 11px!important;font-size:9px!important;
}
.reference-dashboard-shell .image-schedule-row>em.running{background:#e7f2ff!important;color:#0875e8!important}

.reference-dashboard-shell .image-home-stats .image-home-card-head{margin-bottom:12px!important}
.reference-dashboard-shell .image-stats-button{
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,#e9f6ff,#d8edff)!important;
  color:#0565e8!important;
  font-size:13px!important;
  font-weight:950!important;
}
.reference-dashboard-shell .stats-button-svg{width:22px;height:22px;stroke-width:2.4}
.reference-dashboard-shell .image-home-finance{padding-bottom:14px!important}
.reference-dashboard-shell .image-finance-grid{margin-top:11px!important;gap:0 18px!important}
.reference-dashboard-shell .finance-col>div{padding:10px 2px!important}
.reference-dashboard-shell .finance-col span{font-size:10px!important;color:#60718d!important}
.reference-dashboard-shell .finance-col b{font-size:13px!important;color:#101c39!important}
.reference-dashboard-shell .finance-col .danger b{color:#f0142f!important}
.reference-dashboard-shell .finance-col .ok b{color:#08a66d!important}

#nav .nav-icon{
  display:grid!important;
  place-items:center!important;
  width:24px!important;height:24px!important;
}
#nav .nav-svg{width:20px;height:20px;stroke-width:2}
#nav button.active{
  background:linear-gradient(135deg,#123d73,#0b2c56)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(12,47,91,.18)!important;
}
#nav button.active .nav-icon,
#nav button.active .nav-text{color:#fff!important}

@media(min-width:981px){
  .reference-dashboard-shell .sidebar{
    background:#fff!important;
    box-shadow:2px 0 14px rgba(22,39,68,.025)!important;
  }
  .reference-dashboard-shell .reference-header .header-start{visibility:hidden}
  .reference-dashboard-shell .reference-actions{padding-left:22px;padding-right:22px}
  .reference-dashboard-shell #content{padding-left:22px!important;padding-right:22px!important}
}

@media(max-width:980px){
  .reference-dashboard-shell main{
    padding-bottom:calc(88px + var(--system-bottom,0px))!important;
  }
  .reference-header{
    min-height:88px!important;
    height:88px!important;
    grid-template-columns:64px minmax(0,1fr) 126px!important;
    gap:8px!important;
    padding:10px 16px!important;
    position:sticky!important;
    top:0!important;
    z-index:45!important;
  }
  .reference-header .header-start{width:64px!important}
  .reference-menu-btn{
    display:grid!important;
    width:54px!important;height:54px!important;
    padding:14px!important;
  }
  .reference-header .centered-brand{gap:9px!important}
  .reference-header .header-logo{width:54px!important;height:54px!important}
  .reference-header .brand-copy b{font-size:22px!important}
  .reference-header .brand-copy small{font-size:10px!important}
  .reference-role-card{
    min-width:118px!important;
    min-height:54px!important;
    padding:8px 9px!important;
    gap:7px!important;
  }
  .reference-role-card .role-svg{width:21px;height:21px}
  .reference-role-card b{font-size:12px!important}
  .reference-role-card .role-chevron{width:14px;height:14px}
  .reference-actions{
    margin-top:10px!important;
    padding:0 16px!important;
    gap:10px!important;
  }
  .reference-action{
    min-height:50px!important;
    border-radius:13px!important;
    font-size:13px!important;
    gap:9px!important;
  }
  .reference-action .action-svg{width:22px;height:22px}
  .reference-dashboard-shell #content{
    padding:16px 14px calc(108px + var(--system-bottom,0px))!important;
  }
  .reference-dashboard-shell .image-match-dashboard{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }
  .reference-dashboard-shell .image-home-overview,
  .reference-dashboard-shell .image-home-people,
  .reference-dashboard-shell .image-home-schedule,
  .reference-dashboard-shell .image-home-stats,
  .reference-dashboard-shell .image-home-finance{grid-column:1!important}
  .reference-dashboard-shell .image-home-overview,
  .reference-dashboard-shell .image-home-card{
    border-radius:18px!important;
    box-shadow:0 7px 20px rgba(19,35,64,.05)!important;
  }
  .reference-dashboard-shell .image-home-overview{padding:14px 12px!important}
  .reference-dashboard-shell .image-home-card{padding:15px 13px!important}
  .reference-dashboard-shell .image-home-section-head h2{font-size:17px!important}
  .reference-dashboard-shell .image-home-section-head>small{font-size:9px!important}
  .reference-dashboard-shell .image-home-head-icon{width:29px!important;height:29px!important}
  .reference-dashboard-shell .image-card-icon{width:30px!important;height:30px!important}
  .reference-dashboard-shell .image-home-kpi-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .reference-dashboard-shell .image-home-kpi{
    min-height:132px!important;
    padding:10px 7px 9px 9px!important;
    border-radius:13px!important;
  }
  .reference-dashboard-shell .image-home-kpi .kpi-icon{
    width:23px!important;height:23px!important;margin-bottom:5px!important;
  }
  .reference-dashboard-shell .kpi-svg{width:17px;height:17px}
  .reference-dashboard-shell .image-home-kpi>em{font-size:8.5px!important}
  .reference-dashboard-shell .image-home-kpi>b{font-size:13px!important;margin-top:7px!important}
  .reference-dashboard-shell .image-home-kpi>small{
    margin-top:7px!important;font-size:7px!important;line-height:1.5!important;
  }
  .reference-dashboard-shell .image-home-card-head h3{font-size:15px!important}
  .reference-dashboard-shell .image-home-card-head small{font-size:8px!important}
  .reference-dashboard-shell .image-home-card-head button{font-size:8.5px!important;padding:7px 9px!important}
  .reference-dashboard-shell .image-people-grid>div{min-height:68px!important;padding:11px 8px 9px 31px!important}
  .reference-dashboard-shell .image-people-grid .dot{left:12px!important;top:14px!important;width:10px!important;height:10px!important}
  .reference-dashboard-shell .image-people-grid b{font-size:10.5px!important}
  .reference-dashboard-shell .image-people-grid small{font-size:8px!important}
  .reference-dashboard-shell .image-schedule-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:11px 2px!important;
  }
  .reference-dashboard-shell .image-schedule-row>span{
    grid-column:1!important;grid-row:2!important;text-align:left!important;font-size:8px!important;
  }
  .reference-dashboard-shell .image-schedule-row>em{
    grid-column:2!important;grid-row:1/3!important;font-size:8px!important;padding:6px 9px!important;
  }
  .reference-dashboard-shell .image-schedule-row b{font-size:10.5px!important}
  .reference-dashboard-shell .image-schedule-row small{font-size:8px!important}
  .reference-dashboard-shell .image-stats-button{min-height:44px!important;font-size:11.5px!important}
  .reference-dashboard-shell .image-finance-grid{gap:0 10px!important}
  .reference-dashboard-shell .finance-col span{font-size:8px!important}
  .reference-dashboard-shell .finance-col b{font-size:10px!important}

  .reference-bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(10px + var(--system-bottom,0px))!important;
    min-height:78px!important;
    padding:7px!important;
    border:0!important;
    border-radius:24px!important;
    background:linear-gradient(135deg,#123d73 0%,#062c57 100%)!important;
    box-shadow:0 16px 38px rgba(6,34,67,.24)!important;
  }
  .reference-bottom-nav button{
    min-height:62px!important;
    border-radius:16px!important;
    color:#fff!important;
    background:transparent!important;
    gap:5px!important;
  }
  .reference-bottom-nav button>span{
    width:28px!important;height:28px!important;
    display:grid!important;place-items:center!important;
    font-size:inherit!important;
  }
  .reference-bottom-nav .bottom-svg{width:24px;height:24px;stroke-width:2}
  .reference-bottom-nav button>small{
    display:block!important;
    margin:0!important;
    color:inherit!important;
    font-size:10px!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  .reference-bottom-nav button.active{
    background:#fff!important;
    color:#0a69ee!important;
    box-shadow:0 4px 12px rgba(3,25,56,.14)!important;
  }
}

@media(max-width:560px){
  .reference-header{
    grid-template-columns:58px minmax(0,1fr) 108px!important;
    padding-left:10px!important;padding-right:10px!important;
  }
  .reference-menu-btn{width:50px!important;height:50px!important}
  .reference-header .header-logo{width:48px!important;height:48px!important}
  .reference-header .brand-copy b{font-size:18px!important}
  .reference-header .brand-copy small{font-size:8.5px!important}
  .reference-role-card{min-width:102px!important;padding:7px 7px!important}
  .reference-role-card .role-svg{width:18px;height:18px}
  .reference-role-card b{font-size:10.5px!important}
  .reference-actions{padding:0 10px!important;gap:8px!important}
  .reference-action{min-height:46px!important;font-size:11.5px!important}
  .reference-dashboard-shell #content{padding-left:10px!important;padding-right:10px!important}
  .reference-dashboard-shell .image-home-kpi-grid{gap:5px!important}
  .reference-dashboard-shell .image-home-kpi{padding-left:7px!important;padding-right:5px!important}
  .reference-dashboard-shell .image-home-kpi>b{font-size:11px!important}
  .reference-dashboard-shell .image-home-kpi>small{font-size:6.3px!important}
  .reference-dashboard-shell .image-home-section-head>small{font-size:7.5px!important}
  .reference-bottom-nav{left:8px!important;right:8px!important}
  .reference-bottom-nav button>small{font-size:9px!important}
}


/* 3.9 dashboard configurable layout + dynamic user card */
.reference-header .header-end{
  justify-self:end!important;
  justify-content:flex-end!important;
  min-width:0!important;
}
.reference-role-card{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
}
.reference-role-card .role-user-copy{
  min-width:0;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  line-height:1.1!important;
}
.reference-role-card .role-user-copy b{
  display:block!important;
  max-width:92px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0b1b40!important;
  font-size:12px!important;
  font-weight:950!important;
}
.reference-role-card .role-user-copy small{
  display:block!important;
  max-width:92px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#65758e!important;
  font-size:8.5px!important;
  font-weight:800!important;
}
.reference-dashboard-shell .image-match-dashboard>[data-home-section]:not([data-home-section="overview"]){
  grid-column:auto!important;
}

.home-layout-settings .settings-section-head{margin-bottom:16px}
.home-layout-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.home-layout-group{
  min-width:0;
  padding:15px;
  border:1px solid #e6ebf2;
  border-radius:16px;
  background:#fbfdff;
}
.home-layout-group h4{
  margin:0 0 5px;
  color:#10203d;
  font-size:14px;
  font-weight:950;
}
.home-order-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.home-order-row{
  min-height:58px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 9px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}
.home-order-number{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eaf4ff;
  color:#0867e8;
  font-size:11px;
  font-weight:950;
}
.home-order-name{min-width:0}
.home-order-name b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#14213e;
  font-size:11px;
  font-weight:900;
}
.home-order-name small{
  display:block;
  margin-top:3px;
  color:#7a879a;
  font-size:8.5px;
  font-weight:700;
}
.home-order-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.home-order-actions .btn{
  width:34px;
  height:34px;
  padding:0!important;
  display:grid;
  place-items:center;
  border-radius:9px!important;
  font-size:15px!important;
  font-weight:950!important;
}

@media(max-width:980px){
  .reference-header .header-end{
    width:auto!important;
    justify-self:end!important;
  }
  .reference-role-card{
    min-width:118px!important;
    max-width:126px!important;
  }
  .reference-role-card .role-user-copy b,
  .reference-role-card .role-user-copy small{
    max-width:72px!important;
  }
  .home-layout-groups{grid-template-columns:1fr}
}

@media(max-width:560px){
  .reference-role-card{
    min-width:102px!important;
    max-width:108px!important;
    padding-left:6px!important;
    padding-right:6px!important;
    gap:5px!important;
  }
  .reference-role-card .role-user-copy b{
    max-width:58px!important;
    font-size:10px!important;
  }
  .reference-role-card .role-user-copy small{
    max-width:58px!important;
    font-size:7.5px!important;
  }
  .reference-role-card .role-chevron{width:12px!important;height:12px!important}
  .home-order-row{grid-template-columns:28px minmax(0,1fr) auto;gap:7px;padding:7px}
  .home-order-actions{gap:3px}
  .home-order-actions .btn{width:31px;height:31px}
}


/* mobile fixed user corner + visual dashboard layout editor */
.home-layout-settings .home-layout-groups{
  grid-template-columns:1fr!important;
}
.home-layout-settings .home-layout-group-wide{
  width:100%;
}
.home-order-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.home-order-section-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.home-layout-preview-card{
  position:relative;
  min-width:0;
  border:1px solid #e5ebf3!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(18,37,69,.055)!important;
  overflow:hidden;
}
.home-layout-preview-card.kpi-preview{
  min-height:132px;
  display:flex!important;
  flex-direction:column;
  justify-content:space-between;
  padding:12px!important;
  border-radius:15px!important;
}
.home-layout-preview-card.kpi-preview:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  border-radius:15px 0 0 15px;
  background:#1680f5;
}
.home-layout-preview-card.kpi-preview-yearSales:before{background:#8759f2}
.home-layout-preview-card.kpi-preview-monthProfit:before{background:#ff4052}
.home-layout-preview-card.kpi-preview-attendance:before{background:#22bf8a}
.home-layout-preview-card.kpi-preview-monthPurchase:before{background:#ff8a18}
.home-layout-preview-card.kpi-preview-cash:before{background:#29bd91}
.home-layout-preview-card.kpi-preview-settlement:before{background:#ff4052}
.home-layout-preview-card.section-preview{
  min-height:112px;
  padding:13px!important;
  border-radius:16px!important;
}
.home-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.home-layout-preview-card .home-order-number{
  background:#edf6ff!important;
  color:#0873ea!important;
}
.home-layout-preview-card .home-order-name b{
  font-size:11px!important;
  color:#172542!important;
}
.home-layout-preview-card .home-order-name strong{
  display:block;
  margin-top:9px;
  color:#0b1837;
  font-size:15px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.035em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-layout-preview-card.section-preview .home-order-name strong{
  color:#0d6fe8;
  font-size:12px;
}
.home-layout-preview-card .home-order-name small{
  margin-top:8px!important;
  font-size:8px!important;
}
.home-layout-preview-card .home-order-actions .btn{
  background:#f7faff!important;
  border:1px solid #dce7f3!important;
  color:#0c5fd3!important;
}
.menu-rename-settings h4{
  margin:18px 0 10px;
  color:#10203d;
  font-size:14px;
  font-weight:950;
}
.menu-name-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.menu-name-edit{
  min-width:0;
  display:grid;
  gap:7px;
  padding:11px;
  border:1px solid #e5ebf2;
  border-radius:13px;
  background:#fbfdff;
}
.menu-name-edit span{min-width:0}
.menu-name-edit b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#14213e;
  font-size:11px;
  font-weight:900;
}
.menu-name-edit small{
  display:block;
  margin-top:3px;
  color:#7a879a;
  font-size:8px;
  font-weight:700;
}
.menu-name-edit .input{
  min-height:40px;
  font-size:11px;
}
.custom-name-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.custom-name-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}
.custom-name-row>span{
  color:#7b879a;
  font-weight:900;
}

@media(max-width:980px){
  .reference-header{
    position:sticky!important;
  }
  .reference-header .header-end{
    position:absolute!important;
    top:50%!important;
    right:12px!important;
    left:auto!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    z-index:60!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
  }
  .reference-header .centered-brand{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    z-index:40!important;
    max-width:210px!important;
  }
  .reference-role-card{
    margin:0!important;
    min-width:116px!important;
    max-width:132px!important;
    min-height:52px!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    transform:none!important;
  }
  .home-order-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .home-order-section-grid,
  .menu-name-grid,
  .custom-name-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  .reference-header .header-end{
    right:8px!important;
  }
  .reference-header .centered-brand{
    max-width:175px!important;
  }
  .reference-role-card{
    min-width:101px!important;
    max-width:112px!important;
  }
  .reference-role-card .role-svg{
    width:17px!important;
    height:17px!important;
  }
  .reference-role-card .role-user-copy b{
    max-width:60px!important;
  }
  .reference-role-card .role-user-copy small{
    max-width:60px!important;
  }
  .home-order-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .home-layout-preview-card.kpi-preview{
    min-height:122px;
    padding:10px!important;
  }
}


/* 3.9.194 mobile user badge hard-fixed + pinch zoom companion */
@media(max-width:980px){
  .reference-header .header-end{
    position:fixed!important;
    top:calc(var(--system-top, 0px) + 10px)!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    z-index:9999!important;
    pointer-events:auto!important;
  }
  .reference-header .reference-role-card{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
    width:auto!important;
    min-width:116px!important;
    max-width:138px!important;
    min-height:52px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:7px 8px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 7px 20px rgba(20,40,72,.11)!important;
  }
  .reference-header .reference-role-card .role-user-copy{
    min-width:0!important;
    max-width:82px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:2px!important;
  }
  .reference-header .reference-role-card .role-user-copy b,
  .reference-header .reference-role-card .role-user-copy small{
    display:block!important;
    width:100%!important;
    max-width:82px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:left!important;
  }
  .reference-header .reference-role-card .role-user-copy b{
    font-size:11px!important;
    line-height:1.15!important;
  }
  .reference-header .reference-role-card .role-user-copy small{
    font-size:8px!important;
    line-height:1.15!important;
  }
  .reference-header .centered-brand{
    padding-right:120px!important;
    padding-left:58px!important;
    box-sizing:border-box!important;
  }
}
@media(max-width:560px){
  .reference-header .header-end{
    top:calc(var(--system-top, 0px) + 8px)!important;
    right:7px!important;
  }
  .reference-header .reference-role-card{
    min-width:100px!important;
    max-width:112px!important;
    min-height:48px!important;
    padding:6px!important;
    gap:4px!important;
  }
  .reference-header .reference-role-card .role-user-copy{
    max-width:60px!important;
  }
  .reference-header .reference-role-card .role-user-copy b,
  .reference-header .reference-role-card .role-user-copy small{
    max-width:60px!important;
  }
  .reference-header .centered-brand{
    padding-right:105px!important;
    padding-left:52px!important;
  }
}


/* payroll live recalculation editor */
.payroll-editor-live-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
  padding:12px;
  border:1px solid #dce8f5;
  border-radius:14px;
  background:#f8fbff;
}
.payroll-editor-live-summary>div{
  min-width:0;
  padding:10px;
  border-radius:11px;
  background:#fff;
  border:1px solid #e7edf4;
}
.payroll-editor-live-summary span{
  display:block;
  color:#66758e;
  font-size:9px;
  font-weight:800;
}
.payroll-editor-live-summary b{
  display:block;
  margin-top:5px;
  color:#11203d;
  font-size:13px;
  font-weight:950;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.payroll-editor-live-summary .total{
  background:#eef7ff;
  border-color:#cfe5ff;
}
.payroll-editor-live-summary .total b{color:#075fd7}
.payroll-auto-tax-row{
  background:#f8fbff;
  border-radius:10px;
}
.payroll-auto-tax-row .pay-item-label,
.payroll-auto-tax-row .pay-item-basis,
.payroll-auto-tax-row .pay-item-amount{
  background:#f4f7fb!important;
  color:#40516d!important;
}
.payroll-auto-badge{
  align-self:center;
  justify-self:center;
  white-space:nowrap;
}
@media(max-width:760px){
  .payroll-editor-live-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .payroll-editor-live-summary .total{
    grid-column:1/-1;
  }
}


/* labor cards visibility + stats section removed */
.reference-dashboard-shell .image-home-kpi-grid{
  grid-auto-rows:minmax(0,auto)!important;
  overflow:visible!important;
  max-height:none!important;
}
.reference-dashboard-shell .image-home-overview{
  overflow:visible!important;
  max-height:none!important;
}
.reference-dashboard-shell [data-home-kpi="employeeLabor"],
.reference-dashboard-shell [data-home-kpi="externalLabor"]{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}


/* corporate card purchase accounting */
.card-toolbar{
  display:grid;
  grid-template-columns:minmax(140px,180px) minmax(170px,220px) minmax(220px,1fr) auto;
  gap:8px;
  align-items:center;
}
.card-kpis{margin:14px 0}
.card-overview{margin-bottom:14px}
.card-overview .money-list>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #eef2f7;
}
.card-overview .money-list>div:last-child{border-bottom:0}
.card-purchase-table td small{display:block;margin-top:3px;color:#748098;font-size:10px}
.card-purchase-table td.num,.card-import-modal td.num{text-align:right;white-space:nowrap}
.card-import-modal{width:min(1180px,96vw)!important;max-width:1180px!important}
.card-import-modal .table-wrap{max-height:56vh;overflow:auto}
.card-import-modal select,
.card-account-modal select,
.card-rule-modal select{min-width:150px}
.card-account-modal,.card-rule-modal{width:min(1080px,95vw)!important;max-width:1080px!important}
.card-account-modal .table-wrap,.card-rule-modal .table-wrap{max-height:62vh;overflow:auto}
.card-account-modal td:nth-child(4){max-width:360px;white-space:normal}
.switch-mini{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:10px;font-weight:800}
.settlement-card-detail{margin-top:14px}
.settlement-card-detail .table-wrap{max-height:340px;overflow:auto}
.inner-modal{z-index:10050!important}
@media(max-width:980px){
  .card-toolbar{grid-template-columns:1fr 1fr}
  .card-toolbar #cardSearch{grid-column:1/-1}
  .card-toolbar #cardSearchBtn{grid-column:1/-1}
  .card-overview{grid-template-columns:1fr!important}
  .card-purchase-table{min-width:920px}
  .card-import-modal table{min-width:980px}
}
@media(max-width:560px){
  .card-toolbar{grid-template-columns:1fr}
  .card-toolbar #cardSearch,.card-toolbar #cardSearchBtn{grid-column:auto}
  .card-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .card-account-modal,.card-rule-modal,.card-import-modal{width:97vw!important}
}


/* 3.9.238 payroll unit-rate column */
.payroll-all-table{min-width:900px!important}
@media(max-width:760px){
  .payroll-employee-metrics .net{grid-column:1 / -1}
}


/* 3.9.239 payroll forecast calculator */
.payroll-forecast-toolbar{margin-bottom:14px}
.payroll-forecast-toolbar input{min-width:180px}
.payroll-forecast-summary .panel-head{align-items:flex-start}
.payroll-forecast-notice{
  margin:10px 0 14px;
  padding:11px 13px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#1e40af;
  font-size:11px;
  line-height:1.55;
  font-weight:750;
}
.payroll-forecast-table{min-width:980px!important}
.payroll-forecast-rate{
  display:grid;
  grid-template-columns:minmax(140px,.7fr) minmax(220px,1fr);
  gap:10px;
  margin:14px 0;
}
.payroll-forecast-rate>div,
.payroll-forecast-rate>label{
  min-width:0;
  padding:12px;
  border:1px solid #dbe5f0;
  border-radius:12px;
  background:#f8fafc;
}
.payroll-forecast-rate span{
  display:block;
  margin-bottom:6px;
  color:#64748b;
  font-size:10px;
  font-weight:900;
}
.payroll-forecast-rate b{
  display:block;
  color:#172033;
  font-size:16px;
}
.payroll-forecast-live{margin:12px 0}
.payroll-forecast-modal .panel-head .badge{white-space:nowrap}
@media(max-width:760px){
  .payroll-forecast-toolbar input{width:100%;min-width:0}
  .payroll-forecast-rate{grid-template-columns:1fr 1fr;gap:7px}
  .payroll-forecast-rate>div,
  .payroll-forecast-rate>label{padding:10px}
  .payroll-forecast-notice{font-size:10px}
}
@media(max-width:390px){
  .payroll-forecast-rate{grid-template-columns:1fr}
}