: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}