@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400..700&display=swap');
:root{--bg:#f6f7f9;--card:#fff;--text:#17191d;--muted:#70757f;--line:#e8eaee;--primary:#1f6feb;--primary-2:#1557b0;--success:#19945b;--warning:#d88700;--danger:#d64545;--info:#4b78d0;--sidebar:#fff;--radius:18px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Google Sans Flex","Google Sans",Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}body{font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px;z-index:50;transition:.24s ease}.sidebar.collapsed{width:78px}.brand-row{height:52px;display:flex;align-items:center;gap:10px;padding:2px 4px 12px;border-bottom:1px solid var(--line)}.brand-mark{width:38px;height:38px;border-radius:12px;background:#111827;color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;flex:0 0 auto}.brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:15px}.brand-copy small,.user-mini small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-toggle{margin-left:auto}.sidebar.collapsed .brand-copy,.sidebar.collapsed .nav-item span,.sidebar.collapsed .user-mini div,.sidebar.collapsed .logout-link{display:none}.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}.nav-list{padding:14px 0;display:flex;flex-direction:column;gap:4px;overflow:auto}.nav-item{height:42px;display:flex;align-items:center;gap:12px;border-radius:12px;padding:0 12px;color:#555b65;font-weight:560;transition:.15s}.nav-item:hover{background:#f3f5f8;color:#111}.nav-item.active{background:#eef4ff;color:#1e5fbd}.nav-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}.user-mini{display:flex;align-items:center;gap:10px;padding:7px}.user-mini>div{min-width:0;display:flex;flex-direction:column}.avatar{width:34px;height:34px;border-radius:50%;background:#edf1f7;display:grid;place-items:center;font-weight:700;color:#435066;flex:0 0 auto}.logout-link{display:block;padding:9px 7px;color:var(--muted);font-size:12px}.main-area{margin-left:248px;min-height:100vh;transition:.24s ease}.sidebar.collapsed~.main-area{margin-left:78px}.topbar{height:78px;padding:0 28px;background:rgba(246,247,249,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(232,234,238,.8)}.topbar-left{display:flex;align-items:center;gap:12px}.breadcrumb{font-size:11px;color:#8b9098;margin-bottom:2px}.topbar h1{font-size:21px;margin:0;letter-spacing:-.35px}.top-actions{display:flex;align-items:center;gap:10px}.global-search{width:min(36vw,420px);height:42px;background:#fff;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 12px;position:relative}.global-search svg{width:18px;height:18px;fill:none;stroke:#8a9098;stroke-width:1.8}.global-search input{border:0;outline:0;width:100%;background:transparent}.search-results{display:none;position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(20,30,50,.12);padding:7px}.search-results.show{display:block}.search-result{display:block;padding:9px;border-radius:10px}.search-result:hover{background:#f5f7fa}.icon-btn{width:36px;height:36px;border:0;background:transparent;border-radius:10px;color:#717680}.icon-btn:hover{background:#f1f3f6}.mobile-menu{display:none}.page-content{padding:24px 28px 48px;max-width:1600px;margin:0 auto}.metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;position:relative;min-height:100px}.metric-label{color:var(--muted);font-size:12px}.metric-value{font-size:28px;font-weight:690;margin-top:13px;letter-spacing:-.7px}.metric-value.small{font-size:21px}.metric-dot{position:absolute;right:16px;top:17px;width:8px;height:8px;border-radius:50%;background:#9ba1aa}.metric-dot.success{background:var(--success)}.metric-dot.warning{background:var(--warning)}.metric-dot.danger{background:var(--danger)}.metric-dot.info{background:var(--info)}.section-gap{margin-top:16px}.grid-3-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.panel h2{font-size:17px;margin:4px 0 0;letter-spacing:-.25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:#9398a1}.muted{color:var(--muted)}.readable{line-height:1.7;max-width:850px}.text-link{color:#1d62c4;font-weight:600;font-size:12px}.big-number{font-size:28px;font-weight:700;margin:26px 0}.mini-stat,.check-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.list-clean{margin-top:12px}.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.list-row:first-child{border-top:0}.list-row>div{display:flex;flex-direction:column}.list-row small,.block{color:var(--muted);display:block;margin-top:3px}.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#f0f2f5;color:#5c626b;font-size:11px;font-weight:650;white-space:nowrap}.badge.success,.status-active{background:#e9f7f0;color:#187c50}.badge.danger,.status-terminated{background:#fff0f0;color:#ba3b3b}.badge.warning,.status-probation{background:#fff6e6;color:#a66b00}.status-on_leave{background:#eef4ff;color:#2d65b8}.chart-empty{height:230px;margin-top:12px}.bars{height:100%;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--line);padding:18px 4px 0}.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.bar{width:min(32px,75%);min-height:6px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#5f8fe8,#d5e2fb)}.bar-wrap small{font-size:10px;color:#989ea7}.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.toolbar-actions,.filter-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.filter-bar input,.filter-bar select,.report-filter select{height:40px}.btn{height:40px;border-radius:11px;border:1px solid var(--line);padding:0 14px;background:#fff;font-weight:620;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:#1f6feb;color:#fff;border-color:#1f6feb}.btn-primary:hover{background:#195fc8}.btn-soft{background:#fff}.btn-block{width:100%}.btn:disabled{opacity:.48;cursor:not-allowed}.btn-payroll{height:48px;background:#17191d;color:#fff;border-color:#17191d;padding:0 22px;letter-spacing:.02em}.table-panel{padding:0;overflow:hidden}.table-wrap{overflow:auto}table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}th{height:45px;text-align:left;font-size:11px;color:#767c85;font-weight:650;background:#fafbfc;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--line);padding:0 16px}td{padding:13px 16px;border-bottom:1px solid #f0f1f3;color:#434851;vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr:hover td{background:#fbfcfd}.right{text-align:right}.person-cell{display:flex;align-items:center;gap:10px}.person-cell>div{display:flex;flex-direction:column}.person-cell small{font-size:11px;color:var(--muted);margin-top:3px}.row-action{color:#1f62bf;font-weight:600;font-size:12px}.empty-state{text-align:center;padding:38px;color:#8a9099}.empty-state.compact{padding:16px}.form-panel{max-width:1100px}.form-section{padding:4px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}.form-section:last-of-type{border-bottom:0}.form-section-title{display:flex;gap:12px;margin-bottom:18px}.form-section-title>span{width:28px;height:28px;border-radius:9px;background:#eef4ff;color:#2a63bd;display:grid;place-items:center;font-size:11px;font-weight:700}.form-section-title h3{margin:1px 0 4px;font-size:16px}.form-section-title p{margin:0;color:var(--muted);font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.form-grid label,.form-stack label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#5b616a;font-weight:600}.span-2{grid-column:span 2}.form-grid input,.form-grid select,.form-stack input,.form-stack select,.filter-bar input,.filter-bar select,.report-filter select{width:100%;border:1px solid #dfe2e7;background:#fff;border-radius:11px;padding:0 11px;height:42px;outline:none;color:#222}.form-grid input:focus,.form-grid select:focus,.form-stack input:focus{border-color:#88aee8;box-shadow:0 0 0 3px #eef4ff}.sticky-form-actions{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}.back-link{font-size:12px;color:var(--muted)}.page-subtitle{margin:5px 0 0;font-size:18px}.config-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.config-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;min-height:128px;display:flex;justify-content:space-between;gap:12px}.config-card h3{font-size:15px;margin:6px 0}.config-card p{color:var(--muted);font-size:12px;margin:0;line-height:1.45}.config-count{font-size:24px;align-self:flex-end}.org-preview{padding:30px 10px 8px;display:flex;flex-direction:column;align-items:center}.org-node{border:1px solid var(--line);background:#fafbfc;border-radius:12px;padding:10px 16px;min-width:120px;text-align:center}.org-node.primary{background:#1f2937;color:#fff;border-color:#1f2937}.org-line{height:25px;border-left:1px solid #cfd4dc}.org-row{display:flex;gap:12px;position:relative}.payroll-hero{background:linear-gradient(135deg,#111827,#243247);color:#fff;border-radius:20px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:18px}.payroll-hero h2{font-size:26px;margin:6px 0}.payroll-hero p{margin:0;color:#c8d0dc}.payroll-hero .eyebrow{color:#91a4bf}.status-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:24px}.status-flow span{background:#f3f5f8;border:1px solid var(--line);padding:7px 9px;border-radius:9px;font-size:11px}.status-flow b{color:#a0a6af}.small-note{font-size:11px;line-height:1.55}.template-token-box{display:flex;flex-wrap:wrap;gap:8px}.template-token-box span{font-family:ui-monospace,monospace;background:#f4f6f8;border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:11px}.report-card{cursor:pointer}.report-card:hover{border-color:#cfd8e8;transform:translateY(-1px)}.alert{border-radius:12px;padding:11px 13px;margin:0 0 14px;background:#eef4ff;color:#2f5f9f}.alert-danger{background:#fff0f0;color:#a63333}.alert-warning{background:#fff7e8;color:#9a6500}.alert-success{background:#eaf7f0;color:#177349}.auth-body{display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#e8f0ff,transparent 36%),#f6f7f9;padding:28px}.auth-shell{width:min(440px,100%)}.setup-shell{width:min(720px,100%)}.auth-brand{display:flex;align-items:center;gap:10px;margin:0 0 14px}.auth-brand>div{display:flex;flex-direction:column}.auth-brand small{color:var(--muted);font-size:11px}.auth-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 24px 70px rgba(28,39,57,.08)}.auth-card h1{font-size:28px;margin:7px 0}.form-stack{display:flex;flex-direction:column;gap:13px;margin-top:20px}.auth-card hr{border:0;border-top:1px solid var(--line);margin:7px 0}.success-box{background:#edf8f2;border:1px solid #d4efdf;color:#1a734d;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;margin-bottom:15px}.grid-2 .form-stack{}.mobile-backdrop{display:none}
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(3,1fr)}.config-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);box-shadow:20px 0 50px rgba(24,32,46,.12)}.sidebar.mobile-open{transform:translateX(0);width:248px}.main-area,.sidebar.collapsed~.main-area{margin-left:0}.mobile-menu{display:grid;place-items:center}.sidebar-toggle{display:none}.mobile-backdrop.show{display:block;position:fixed;inset:0;background:rgba(8,15,25,.28);z-index:40}.topbar{padding:0 16px}.page-content{padding:18px 16px 40px}.global-search{display:none}.grid-3-1,.grid-2{grid-template-columns:1fr}.config-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.payroll-hero{align-items:flex-start;flex-direction:column}.top-avatar{display:none}}
@media(max-width:620px){.metric-grid,.compact-grid{grid-template-columns:repeat(2,1fr)}.metric-card{min-height:88px;padding:13px}.metric-value{font-size:24px}.config-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.page-toolbar{align-items:stretch;flex-direction:column}.page-toolbar .btn-primary{align-self:flex-start}.filter-bar{display:grid;grid-template-columns:1fr 1fr;width:100%}.filter-bar .search-inline{grid-column:1/-1}.topbar h1{font-size:18px}.breadcrumb{display:none}.topbar{height:64px}.panel{padding:16px}.auth-card{padding:20px}.org-row{flex-direction:column}.org-line{height:14px}.payroll-hero h2{font-size:21px}}

/* HRM v1.1 - employee code, office attendance, construction states */
.input-readonly{background:#f5f6f8!important;color:#5f6670!important;cursor:not-allowed}.field-hint{font-size:10px;color:#8a9098;font-weight:500;line-height:1.35}.toggle-field{min-height:62px;border:1px solid #e4e7eb;border-radius:13px;padding:11px 13px;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:18px;background:#fafbfc}.toggle-field>span:first-child{display:flex;flex-direction:column;gap:3px}.toggle-field small{color:var(--muted);font-size:11px;font-weight:500}.toggle-control{position:relative;width:42px;height:24px;flex:0 0 auto}.toggle-control input{position:absolute;opacity:0;pointer-events:none}.toggle-control i{position:absolute;inset:0;border-radius:999px;background:#d8dde4;transition:.18s}.toggle-control i:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.16);transition:.18s}.toggle-control input:checked+i{background:#1f6feb}.toggle-control input:checked+i:after{transform:translateX(18px)}
.construction-state{min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 28px}.construction-icon{width:76px;height:76px;border-radius:24px;background:#f2f5f9;display:grid;place-items:center;margin-bottom:18px}.construction-icon svg{width:35px;height:35px;fill:none;stroke:#536276;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.construction-kicker{font-size:10px;font-weight:750;letter-spacing:.13em;color:#7f8792}.construction-state h2{font-size:25px;letter-spacing:-.45px;margin:8px 0 8px}.construction-state>p{max-width:690px;color:var(--muted);line-height:1.65;margin:0}.construction-roadmap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 26px}.construction-roadmap span{padding:7px 10px;border:1px solid var(--line);background:#fafbfc;border-radius:999px;color:#606773;font-size:11px}
.attendance-banner{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.attendance-banner h2{font-size:20px;margin:4px 0 5px}.attendance-banner p{margin:0;color:var(--muted);line-height:1.5;max-width:780px}.build-chip{padding:8px 11px;border-radius:999px;background:#edf4ff;color:#245fae;font-weight:700;font-size:11px;white-space:nowrap}.attendance-metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.attendance-toolbar{margin-top:4px}.attendance-filter{flex-wrap:nowrap}.filter-static{height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid #dfe2e7;border-radius:11px;background:#fff;font-weight:600;color:#4f5660}.attendance-panel{overflow:hidden}.attendance-table-head{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.attendance-table-head h2{margin:0 0 3px;font-size:17px}.attendance-table-head p{margin:0}.attendance-table{min-width:1280px}.attendance-table th{top:0}.attendance-table td{padding:10px 12px}.attendance-check{width:54px;text-align:center!important}.attendance-mark{width:17px;height:17px;accent-color:#1f6feb}.attendance-input{height:36px;min-width:110px;border:1px solid #dfe2e7;border-radius:9px;background:#fff;padding:0 9px;outline:none}.attendance-input:focus{border-color:#88aee8;box-shadow:0 0 0 2px #eef4ff}.attendance-input.numeric{min-width:72px;width:72px}.attendance-input.note{min-width:150px}.attendance-row:not(.is-marked){opacity:.68}.attendance-row.is-marked{opacity:1}.attendance-row td small{color:#9298a1;font-size:10px}.attendance-savebar{position:sticky;bottom:0;z-index:4;padding:12px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.attendance-savebar>span{display:flex;flex-direction:column;gap:2px}.attendance-savebar small{font-size:11px;color:var(--muted)}
@media(max-width:900px){.attendance-metrics{grid-template-columns:repeat(2,1fr)}.attendance-banner{align-items:flex-start}.attendance-table-head{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.construction-state{min-height:420px;padding:34px 18px}.construction-state h2{font-size:21px}.attendance-banner{flex-direction:column}.attendance-metrics{grid-template-columns:repeat(2,1fr)}.attendance-filter{display:grid;grid-template-columns:1fr 1fr}.attendance-filter select,.attendance-filter input,.filter-static{width:100%}.attendance-savebar{align-items:stretch;flex-direction:column}.attendance-savebar .btn{width:100%}}

/* HRM v1.2 - horizontal monthly office attendance */
.attendance-month-banner{align-items:flex-start}.attendance-legend{display:flex;align-items:center;justify-content:flex-end;gap:13px;flex-wrap:wrap;max-width:560px;font-size:10px;color:#69707c;padding-top:7px}.attendance-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.attendance-legend .dot{width:7px;height:7px;border-radius:50%}.attendance-legend .dot.work{background:#139267}.attendance-legend .dot.paid{background:#c98108}.attendance-legend .dot.unpaid{background:#d14235}.attendance-legend .dot.holiday{background:#7357dc}.attendance-legend .dot.off{background:#8d8d9d}.month-toolbar{margin-bottom:12px}.attendance-month-actions{display:flex;align-items:center;gap:8px}.attendance-sheet-panel{overflow:hidden;padding:0;background:#fff}.attendance-sheet-scroll{width:100%;overflow:auto;max-height:calc(100vh - 280px);scrollbar-width:thin}.attendance-month-table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;font-size:11px}.attendance-month-table th,.attendance-month-table td{border-right:1px solid #e7e8ed;border-bottom:1px solid #e7e8ed;background:#fff}.attendance-month-table thead th{position:sticky;top:0;z-index:8;background:#fafafe;height:52px;padding:5px 4px;text-align:center;color:#5b6270;font-size:9px}.attendance-month-table thead th.day-head{min-width:39px;width:39px}.day-head span{display:block;font-size:8px;color:#888e9b;font-weight:700;text-transform:uppercase}.day-head b{display:block;margin-top:2px;font-size:11px;color:#39404e}.day-head em{display:block;font-style:normal;font-size:6px;color:#5c58df;margin-top:1px}.day-head.is-sunday{background:#fff5f4}.day-head.is-sunday b,.day-head.is-sunday span{color:#d94c42}.day-head.is-today{background:#f0efff;box-shadow:inset 0 0 0 2px #c9c5ff}.sticky-col{position:sticky!important;z-index:10!important}.sticky-stt{left:0;min-width:40px;width:40px;text-align:center!important}.sticky-employee{left:40px;min-width:220px;width:220px}.attendance-month-table thead .sticky-col{z-index:15!important;background:#fafafe}.attendance-month-table tbody .sticky-col{background:#fff}.attendance-month-table tbody tr:hover .sticky-col{background:#fbfbfe}.col-stt{color:#6f7480;font-size:10px}.month-person{min-width:0;padding:6px 8px}.month-person .avatar{width:31px;height:31px;font-size:10px;border-radius:9px}.month-person strong{font-size:11px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.month-person small{font-size:8px;color:#78808d;display:block;white-space:nowrap}.day-cell{min-width:39px;width:39px;height:44px;padding:2px;text-align:center;cursor:default;background:#fff;transition:background .14s ease,box-shadow .14s ease}.day-cell[data-editable="1"]{cursor:pointer}.day-cell[data-editable="1"]:hover{box-shadow:inset 0 0 0 2px #8f88f5;position:relative;z-index:3}.day-cell.is-sunday:not(.has-record){background:#f6f5f7}.day-cell.is-today{box-shadow:inset 0 0 0 2px #b8b3ff}.day-cell-inner{height:38px;min-width:34px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.day-cell-inner b{font-size:10px;color:#b0b4bc}.day-cell-inner small{font-size:6px;line-height:1.05;max-width:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.day-cell.has-record.type-work .day-cell-inner{background:#eff9f5}.day-cell.has-record.type-work b{color:#057a5b}.day-cell.has-record.type-paid_leave .day-cell-inner,.day-cell.has-record.type-comp_leave .day-cell-inner{background:#fff6e9}.day-cell.has-record.type-paid_leave b,.day-cell.has-record.type-comp_leave b{color:#b87000}.day-cell.has-record.type-unpaid_leave .day-cell-inner{background:#fff0ef}.day-cell.has-record.type-unpaid_leave b{color:#c83c32}.day-cell.has-record.type-holiday .day-cell-inner{background:#f1edff}.day-cell.has-record.type-holiday b{color:#6e4ed9}.day-cell.has-record.type-business_trip .day-cell-inner{background:#edf5ff}.day-cell.has-record.type-business_trip b{color:#2671b9}.day-cell.has-record.type-off .day-cell-inner{background:#f3f3f5}.day-cell.has-record.type-off b{color:#7d7d8b}.summary-head{min-width:62px;width:62px;background:#fafafe!important;font-size:9px!important}.summary-cell{min-width:62px;width:62px;text-align:center;padding:3px 4px;background:#fff}.summary-cell b{display:block;font-size:10px;color:#303642}.summary-cell small{display:block;font-size:7px;color:#8b909b;margin-top:2px}.attendance-modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(25,28,39,.22);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:16px}.attendance-modal-backdrop[hidden]{display:none}.attendance-quick-modal{width:min(430px,100%);background:#fff;border:1px solid #e5e3f4;border-radius:20px;box-shadow:0 24px 80px rgba(35,31,72,.18);padding:18px;position:relative;animation:attendanceModalIn .18s ease-out}.attendance-quick-modal.small{width:min(390px,100%)}@keyframes attendanceModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}.attendance-modal-close{position:absolute;right:14px;top:14px;width:31px;height:31px;border:0;border-radius:10px;background:#f4f2fb;color:#6d6a79;font-size:20px;line-height:1;cursor:pointer}.attendance-modal-title{padding-right:38px;margin-bottom:14px}.attendance-modal-title h3{margin:0 0 4px;font-size:17px}.attendance-modal-title p{margin:0;color:#777d89;font-size:11px}.field-label{display:block;font-size:10px;font-weight:700;color:#656b78;margin:10px 0 5px}.attendance-modal-select,.attendance-quick-modal input[type="date"],.attendance-quick-modal input[type="text"]{width:100%;height:40px;border:1px solid #dedde8;border-radius:11px;background:#fff;padding:0 11px;outline:none}.attendance-modal-select:focus,.attendance-quick-modal input:focus{border-color:#9b94f5;box-shadow:0 0 0 3px #f1efff}.session-label{margin-top:13px}.attendance-session-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.session-card{min-height:58px;text-align:left;border:1px solid #e2e1eb;background:#fff;border-radius:12px;padding:9px 10px;cursor:pointer}.session-card:first-child{grid-column:1/-1}.session-card strong{display:block;font-size:11px;color:#444a56;margin-bottom:3px}.session-card span{display:block;font-size:8px;color:#8a909c}.session-card.active{border-color:#9f98f6;background:#f4f2ff;box-shadow:inset 0 0 0 1px #b8b2ff}.attendance-detail-toggle{border:0;background:transparent;color:#645bd9;font-size:9px;font-weight:700;padding:11px 1px 4px;cursor:pointer}.attendance-detail-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding-top:5px}.attendance-detail-fields>div{min-width:0}.attendance-detail-fields .wide{grid-column:1/-1}.attendance-detail-fields label{display:block;font-size:8px;color:#7b818d;margin-bottom:4px}.attendance-detail-fields input{width:100%;height:36px;border:1px solid #e0e1e7;border-radius:9px;padding:0 8px}.attendance-modal-actions{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:7px;margin-top:16px;padding-top:12px;border-top:1px solid #efeff3}.btn-danger-soft{border:0;background:#fff0ef;color:#c53b32}.holiday-name-label{margin-top:10px}
@media(max-width:900px){.attendance-month-banner{flex-direction:column}.attendance-legend{justify-content:flex-start}.attendance-sheet-scroll{max-height:calc(100vh - 240px)}.sticky-employee{min-width:190px;width:190px}.month-person strong{max-width:130px}}
@media(max-width:620px){.month-toolbar{align-items:stretch}.month-toolbar .attendance-filter{grid-template-columns:1fr}.attendance-month-actions{justify-content:space-between}.attendance-month-actions .badge:nth-child(2){display:none}.attendance-sheet-panel{margin-left:-12px;margin-right:-12px;border-radius:0}.attendance-sheet-scroll{max-height:calc(100vh - 220px)}.sticky-stt{min-width:32px;width:32px}.sticky-employee{left:32px;min-width:160px;width:160px}.month-person{padding:5px}.month-person .avatar{display:none}.month-person strong{max-width:145px}.attendance-quick-modal{border-radius:18px}.attendance-session-grid{grid-template-columns:1fr}.session-card:first-child{grid-column:auto}.attendance-detail-fields{grid-template-columns:1fr 1fr}.attendance-detail-fields .wide{grid-column:1/-1}.attendance-modal-actions{grid-template-columns:1fr 1fr}.attendance-modal-actions span{display:none}.attendance-modal-actions .btn{width:100%}}