#employees-panel{color:#151719;font-size:13px;line-height:1.45}#employees-panel[hidden],#employees-panel [hidden]{display:none!important}#employees-panel *{box-sizing:border-box}#employees-panel button,#employees-panel input,#employees-panel select{font:inherit;color:#151719;-webkit-text-fill-color:#151719}#employees-panel button{cursor:pointer}#employees-panel button:disabled{opacity:.55;cursor:wait}.staff-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}.staff-layout.has-detail{grid-template-columns:minmax(0,1.55fr) minmax(350px,1fr)}.staff-list{min-width:0}.staff-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.staff-actions p{margin:0;color:#647067}.staff-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#20b879}.staff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.staff-stats>div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eceef1;box-shadow:0 2px 9px #171d2c04;border-radius:10px;padding:18px 12px}.staff-stats p{margin:0;font-size:11px;color:#666}.staff-stats strong{display:block;font-size:28px;line-height:1.25;color:#111}.staff-stat-icon{border-radius:50%;display:grid;place-items:center;width:40px;height:40px;background:#eaf3ff;color:#2075d6;font-size:25px}.staff-stat-icon.green{background:#e8f9ef;color:#18aa65}.staff-stat-icon.red{background:#fff0f0;color:#e44349}.staff-filters{display:grid;grid-template-columns:1.4fr 1fr .85fr;gap:10px;background:#fff;padding:14px;border:1px solid #eceef1;border-radius:10px}.staff-filters label,.staff-period label,.staff-connect label{display:grid;gap:6px;font-weight:600;font-size:12px}#employees-panel input,#employees-panel select{width:100%;min-width:0;border:1px solid #dfe2e6;border-radius:7px;padding:10px;background:#fff;min-height:38px}.staff-sync,.staff-foot{font-size:11px;color:#737984;margin:10px 0}.staff-table-wrap{overflow:auto;background:#fff;border-radius:9px;border:1px solid #eef0f3}.staff-table,.staff-days{border-collapse:collapse;width:100%;font-size:12px}.staff-table th,.staff-days th{background:#f5f6f8;font-weight:600;color:#24282d;text-align:left}.staff-table td,.staff-table th{padding:12px 9px;border-bottom:1px solid #f0f1f4}.staff-table td small{display:block;color:#8a8f99;font-size:10px}.staff-person{display:flex;gap:10px;align-items:center;min-width:165px}.staff-person b{font-size:12px;display:block}.staff-photo{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff3c6;flex-shrink:0}.staff-photo.large{width:76px;height:76px}.staff-badge{display:inline-block;border-radius:20px;padding:3px 8px;font-size:10px;white-space:nowrap;font-weight:600}.staff-badge.present{color:#168251;background:#e9faef}.staff-badge.absent{color:#bc3540;background:#fff0f1}.staff-badge.pending{color:#8b6d0b;background:#fff7d9}.staff-muted{color:#848a94;font-size:11px}.staff-view{background:#f2f4f7;border:0;padding:5px 12px;border-radius:5px;white-space:nowrap}.staff-selected{background:#fffcf0}.staff-detail{padding:16px;background:#fff;border:1px solid #eceef2;box-shadow:0 2px 12px #171d2c04;border-radius:11px;min-width:0}.staff-back{background:none;border:0;padding:0;margin-bottom:18px;font-size:12px}.staff-profile{display:flex;align-items:center;gap:13px}.staff-profile h2{font-size:18px;line-height:1.25;margin:0 0 4px;letter-spacing:-.5px}.staff-profile p,.staff-profile small{margin:0;color:#6a7180;font-size:12px}.staff-profile small{display:block;margin-top:5px}.staff-photo-change{display:inline-block;padding:5px 0;margin:6px 0 12px;text-decoration:underline;cursor:pointer;font-size:11px}.staff-tabs{display:flex;gap:4px;background:#f6f7f9;padding:4px;border-radius:8px;margin:0 0 20px}.staff-tabs button{flex:1;border:0;background:transparent;border-radius:6px;padding:10px 6px;font-weight:600}.staff-tabs button.active{background:#ffcf19}.staff-detail h3{font-size:14px;letter-spacing:-.2px;margin:16px 0 12px}.staff-period{display:grid;grid-template-columns:1fr 1fr;gap:8px}.staff-period-caption{font-size:11px;color:#7b818b}.staff-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.staff-summary>div{border:1px solid #f0f1f4;border-radius:8px;padding:14px 12px}.staff-summary span{font-size:10px;color:#626a75;display:block}.staff-summary strong{font-size:23px;line-height:1.3;display:block;margin-top:6px;letter-spacing:-.8px}.staff-days{font-size:10px;white-space:nowrap}.staff-days th,.staff-days td{padding:8px 5px;border-bottom:1px solid #f0f2f4}.staff-days .staff-badge{font-size:9px;padding:2px 5px}.staff-primary,.staff-button{padding:9px 13px;border-radius:7px;border:1px solid #dfe2e7;background:#fff;min-height:36px;font-weight:600}.staff-primary{background:#ffce19;border-color:#ffce19}.staff-error{color:#b72731!important;font-size:12px}.staff-error:empty{display:none}.staff-note{background:#fff9df;color:#79671b;padding:10px;border-radius:6px;font-size:11px}.staff-info dt{font-size:11px;color:#7c8390;margin-top:16px}.staff-info dd{margin:3px 0 0;overflow-wrap:anywhere}.staff-empty{padding:30px;text-align:center;color:#78808d}.staff-connect{max-width:520px;margin:24px auto;background:#fff;border:1px solid #e9ecf0;border-radius:14px;padding:28px}.staff-connect h2{font-size:25px;margin:12px 0}.staff-connect p{color:#69717c}.staff-connect form{display:grid;gap:16px;margin:24px 0}.staff-connect small{color:#7a808a}.staff-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;color:#97801a}
@media(min-width:1200px){.staff-layout.has-detail .staff-stats>div{padding:13px 9px}.staff-layout.has-detail .staff-person{min-width:130px}.staff-layout.has-detail .staff-table td,.staff-layout.has-detail .staff-table th{padding:11px 6px}}
@media(max-width:1100px){.staff-layout.has-detail{grid-template-columns:1fr}.staff-layout.has-detail .staff-list{display:none}.staff-detail{max-width:700px;width:100%;margin:auto}}@media(max-width:600px){.staff-filters{grid-template-columns:1fr 1fr}.staff-filters label:first-child{grid-column:1/-1}.staff-stats{gap:6px}.staff-stats>div{padding:12px 8px;gap:5px}.staff-stat-icon{display:none}.staff-stats strong{font-size:24px}.staff-connect{padding:18px;margin:12px 0}.staff-detail{padding:12px}.staff-summary strong{font-size:21px}.staff-table{min-width:580px}}
/* Keep attendance geometry independent from product-table styles. */
#employees-panel .staff-list{display:flex;flex-direction:column}#employees-panel .staff-actions{order:0}#employees-panel .staff-filters{order:1;margin-bottom:14px;padding:12px}#employees-panel .staff-stats{order:2;margin-bottom:4px}#employees-panel .staff-sync{order:3}#employees-panel .staff-list>.staff-table-wrap{order:4}#employees-panel .staff-foot{order:5}#employees-panel label{margin:0}#employees-panel .staff-table td,#employees-panel .staff-table th{height:auto;padding:9px 7px;text-align:left}#employees-panel .staff-days td,#employees-panel .staff-days th{height:auto;padding:7px 5px;text-align:left;min-width:0}#employees-panel table th:first-child,#employees-panel table td:first-child{width:auto}#employees-panel table td img{width:34px;height:34px}#employees-panel .staff-period{margin:0;gap:8px}#employees-panel .staff-period input{padding:7px;min-height:34px}#employees-panel .staff-period button{margin:0;min-height:32px;padding:6px 10px}#employees-panel .staff-summary{margin-top:12px}#employees-panel .staff-person b{font-size:11px}#employees-panel .staff-table{table-layout:auto}#employees-panel .staff-days{table-layout:auto}#employees-panel .staff-detail h3{margin:12px 0 8px}
#employees-panel svg{width:20px;height:20px;flex-shrink:0;vertical-align:middle}#employees-panel .staff-badge{display:inline-flex;align-items:center;gap:4px}#employees-panel .staff-badge svg{width:12px;height:12px}#employees-panel .staff-stat-icon svg{width:26px;height:26px}#employees-panel .staff-tabs button{display:flex;align-items:center;justify-content:center;gap:6px}#employees-panel .staff-tabs svg{width:16px;height:16px}#employees-panel .staff-summary>div{position:relative;padding:15px 10px 15px 58px;min-height:91px}#employees-panel .summary-icon{position:absolute;left:10px;top:23px;width:39px;height:39px;display:grid;place-items:center;border-radius:50%}#employees-panel .summary-icon svg{width:23px;height:23px}#employees-panel .green{color:#20ae66;background:#e8faef}#employees-panel .blue{color:#2683f8;background:#eaf3ff}#employees-panel .yellow{color:#e6ad0d;background:#fff7da}#employees-panel .red{color:#ef4652;background:#fff0f1}#employees-panel .staff-summary strong{font-size:21px}#employees-panel .staff-person{gap:10px}#employees-panel .staff-table th:nth-child(1){width:28px}#employees-panel .staff-table td:nth-child(3){min-width:115px;max-width:180px;color:#5e6675}#employees-panel .staff-table td:nth-child(4){min-width:105px}#employees-panel .staff-table td:nth-child(5){min-width:105px}#employees-panel .staff-table td,#employees-panel .staff-table th{padding:11px 10px}#employees-panel .staff-table tr.staff-absent{background:#fffafb}#employees-panel .staff-days tr.staff-absent{background:#fff0f1}#employees-panel .running-label{display:block;font-size:9px;color:#289459}#employees-panel .staff-person b{font-weight:650;font-size:12px;line-height:1.35}#employees-panel .staff-table td:nth-child(2){min-width:185px}#employees-panel .staff-table th{font-size:11px}#employees-panel .staff-summary span{font-size:10px;color:#24282f}#employees-panel .staff-detail{padding:16px}#employees-panel .staff-period{grid-template-columns:1fr 1fr}#employees-panel .staff-detail .staff-foot{line-height:1.5}
@media(min-width:1200px){#employees-panel .staff-layout.has-detail{grid-template-columns:minmax(0,1.6fr) minmax(390px,1fr)}#employees-panel .has-detail .staff-table td,#employees-panel .has-detail .staff-table th{padding:10px 6px}#employees-panel .has-detail .staff-table td:nth-child(2){min-width:160px}#employees-panel .has-detail .staff-table td:nth-child(3){min-width:100px}#employees-panel .has-detail .staff-table td:nth-child(4),#employees-panel .has-detail .staff-table td:nth-child(5){min-width:90px}}
#dashboard #employees-panel table{min-width:0;width:100%;table-layout:auto}#dashboard #employees-panel .staff-days td,#dashboard #employees-panel .staff-days th{width:auto;min-width:0;max-width:none;font-size:10px;padding:8px 5px;white-space:nowrap}#dashboard #employees-panel .staff-table td:nth-child(2){width:32%;min-width:170px}#dashboard #employees-panel input,#dashboard #employees-panel select{margin-top:0}#dashboard #employees-panel .staff-table th{font-weight:600}#dashboard #employees-panel .staff-table td{height:auto}#dashboard #employees-panel .staff-period-caption{margin:8px 0}#dashboard #employees-panel .staff-days .staff-badge{font-size:9px}
@media(max-width:650px){#dashboard #employees-panel .staff-table{min-width:620px}}
/* Attendance state pills: filled symbols and generous reference proportions. */
#dashboard #employees-panel .staff-badge{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-width:112px;min-height:32px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:750;line-height:1.3;letter-spacing:-.15px;border:0}
#dashboard #employees-panel .staff-badge.present{background:#e4f9eb;color:#16843e}
#dashboard #employees-panel .staff-badge.absent{background:#ffe8eb;color:#bd1526}
#dashboard #employees-panel .staff-badge.pending{background:#fff6d9;color:#b87908}
#dashboard #employees-panel .staff-badge svg{width:18px;height:18px;stroke-width:2.6}
#dashboard #employees-panel .staff-badge svg circle{fill:currentColor;stroke:none}
#dashboard #employees-panel .staff-badge svg path{stroke:#fff}
#dashboard #employees-panel .staff-badge.present svg{color:#18aa50}
#dashboard #employees-panel .staff-badge.absent svg{color:#df1326}
#dashboard #employees-panel .staff-badge.pending svg{color:#ecaa12}
#dashboard #employees-panel .staff-table td:nth-child(4){min-width:138px;padding-left:14px;padding-right:14px}
#dashboard #employees-panel .staff-table th:nth-child(4){padding-left:14px}
#dashboard #employees-panel .staff-table tr.staff-absent{background:#fff}
#dashboard #employees-panel .staff-days tr.staff-absent{background:#ffeaed}
#dashboard #employees-panel .staff-days tr.staff-absent td{border-bottom-color:#ffeaed;color:#833442}
#dashboard #employees-panel .staff-days .staff-badge{font-size:11px;min-width:96px;min-height:27px;padding:4px 8px;gap:6px}
#dashboard #employees-panel .staff-days .staff-badge svg{width:15px;height:15px}
#dashboard #employees-panel .staff-days td,#dashboard #employees-panel .staff-days th{font-size:11px;padding:7px 5px}
#dashboard #employees-panel .staff-days th{font-weight:700}
#dashboard #employees-panel .staff-stats>div{padding:18px 14px;gap:14px;border-radius:13px;box-shadow:0 3px 14px #25324e06}
#dashboard #employees-panel .staff-stats p{display:flex;flex-direction:column;font-size:12px;color:#687183;line-height:1.5}
#dashboard #employees-panel .staff-stats strong{order:-1;font-size:30px;line-height:1.15;margin-bottom:4px;font-weight:800;letter-spacing:-1px}
#dashboard #employees-panel .staff-stat-icon{width:48px;height:48px;flex:0 0 48px}
#dashboard #employees-panel .staff-stat-icon.green{background:#e7f9ef;color:#1aba61}
#dashboard #employees-panel .staff-stat-icon.red{background:#ffeaed;color:#e30c21}
#dashboard #employees-panel .staff-stat-icon.green svg circle,#dashboard #employees-panel .staff-stat-icon.red svg circle{fill:currentColor;stroke:none}
#dashboard #employees-panel .staff-stat-icon.green svg path,#dashboard #employees-panel .staff-stat-icon.red svg path{stroke:white;stroke-width:2.8}
#dashboard #employees-panel .staff-stat-icon svg{width:29px;height:29px}
@media(max-width:600px){#dashboard #employees-panel .staff-stats>div{padding:12px 8px;gap:7px}#dashboard #employees-panel .staff-stat-icon{display:grid;width:30px;height:30px;flex-basis:30px}#dashboard #employees-panel .staff-stat-icon svg{width:21px;height:21px}#dashboard #employees-panel .staff-stats p{font-size:10px}#dashboard #employees-panel .staff-stats strong{font-size:24px}}
/* Compact proportions, retaining the approved filled status design. */
#dashboard #employees-panel .staff-badge{min-width:88px;min-height:25px;padding:4px 9px;font-size:11px;gap:6px;font-weight:700}
#dashboard #employees-panel .staff-badge svg{width:14px;height:14px}
#dashboard #employees-panel .staff-table td:nth-child(4){min-width:112px;padding-left:10px;padding-right:10px}
#dashboard #employees-panel .staff-table th:nth-child(4){padding-left:10px}
#dashboard #employees-panel .staff-days .staff-badge{min-width:80px;min-height:22px;padding:3px 7px;font-size:10px;gap:5px}
#dashboard #employees-panel .staff-days .staff-badge svg{width:13px;height:13px}
#dashboard #employees-panel .staff-period-total{display:block;color:#7b8290;font-size:9px;line-height:1.4;margin-top:4px}
/* Table header and actions match the soft gray reference. */
#dashboard #employees-panel .staff-table th{background:#f4f5f7;color:#1b1e24;font-size:12px;font-weight:750;height:42px;padding-top:11px;padding-bottom:11px}
#dashboard #employees-panel .staff-table th:nth-child(5),#dashboard #employees-panel .staff-table td:nth-child(5){padding-left:16px;padding-right:24px;min-width:132px}
#dashboard #employees-panel .staff-table th:last-child,#dashboard #employees-panel .staff-table td:last-child{padding-left:12px;padding-right:14px;min-width:94px;text-align:center}
#dashboard #employees-panel .staff-view{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:70px;height:31px;padding:5px 11px;background:#eff1f5;border:0;border-radius:9px;color:#344054;font-size:12px;font-weight:600;line-height:1;transition:background .15s}
#dashboard #employees-panel .staff-view svg{width:13px;height:13px}
#dashboard #employees-panel .staff-view:hover{background:#e5e8ee}
#dashboard #employees-panel .staff-view:focus-visible{outline:2px solid #dba500;outline-offset:2px}