:root{--brand-pine:#133027;--brand-ever:#1c4036;--brand-cream:#f6f7e5;--brand-black:#181e1d;--brand-gold:#facd4c;--brand-ember:#dd671f;--color-bg:#f6f7e5;--color-surface:#fff;--color-border:#e0e1cf;--color-border-strong:#cccdb8;--color-text-heading:#181e1d;--color-text-body:#2d3a36;--color-text-muted:#5d6b66;--color-text-subtle:#8a9490;--color-accent:#dd671f;--color-accent-hover:#c45c1a;--color-accent-subtle:#dd671f1a;--color-sidebar-bg:#133027;--color-sidebar-bg-hover:#1c4036;--color-sidebar-text:#829e93;--color-sidebar-text-hover:#d4e8e0;--color-sidebar-label:#3a5c4e;--color-sidebar-subtext:#6b8a80;--color-sidebar-toggle-active:#d4e8e0;--color-sidebar-active-bg:#dd671f1f;--color-sidebar-active-border:#dd671f;--color-sidebar-active-text:#fff;--font-heading:"Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;--font:"Neue Haas Grotesk Text Pro", "Helvetica Neue", Arial, sans-serif;--text-xs:11px;--text-sm:13px;--text-base:14px;--text-md:16px;--text-lg:22px;--leading:1.6;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sidebar-width:240px;--content-padding:40px;--radius:8px;--radius-sm:6px;--radius-lg:12px;--shadow-sm:0 1px 3px #13302712, 0 1px 2px #1330270a;--shadow-md:0 4px 12px #13302717, 0 2px 4px #1330270d}@font-face{font-family:Neue Haas Grotesk Display Pro;src:url(/fonts/neue-haas-display-bold.ttf)format("truetype");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:Neue Haas Grotesk Text Pro;src:url(/fonts/neue-haas-grotesk-text-pro-roman.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Neue Haas Grotesk Text Pro;src:url(/fonts/neue-haas-grotesk-text-pro-medium.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Neue Haas Grotesk Text Pro;src:url(/fonts/neue-haas-grotesk-text-pro-bold.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);font-size:var(--text-base);line-height:var(--leading);color:var(--color-text-body);background:var(--color-bg);-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex}h1{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--color-text-heading);letter-spacing:-.4px;font-weight:500;line-height:1.25}h2{font-family:var(--font-heading);font-size:var(--text-md);color:var(--color-text-heading);font-weight:500;line-height:1.35}h3{font-family:var(--font-heading);font-size:var(--text-base);color:var(--color-text-heading);font-weight:500;line-height:1.4}p{color:var(--color-text-body);line-height:var(--leading)}.app-layout{width:100%;min-height:100vh;display:flex}.main-content{padding:var(--content-padding);flex:1;min-width:0;overflow-y:auto}.sidebar{width:var(--sidebar-width);background:var(--color-sidebar-bg);flex-direction:column;flex-shrink:0;height:100vh;display:flex;overflow:hidden}.sidebar-brand{padding:var(--sp-6) var(--sp-5) var(--sp-5);border-bottom:1px solid #ffffff12}.sidebar-brand-name{font-family:var(--font-heading);font-size:var(--text-md);color:#fff;letter-spacing:-.3px;font-weight:700}.sidebar-brand-sub{font-size:var(--text-xs);color:var(--color-sidebar-label);letter-spacing:.4px;text-transform:uppercase;margin-top:3px}.sidebar-nav{min-height:0;padding:var(--sp-3) 0 var(--sp-6);flex:1;overflow-y:auto}.nav-section{margin-bottom:var(--sp-1)}.nav-section-label{font-size:var(--text-xs);color:var(--color-sidebar-label);text-transform:uppercase;letter-spacing:.8px;padding:var(--sp-4) var(--sp-5) var(--sp-1);font-weight:500;display:block}.nav-link{padding:9px var(--sp-5);color:var(--color-sidebar-text);font-size:var(--text-base);border-left:3px solid #0000;text-decoration:none;transition:background .12s,color .12s;display:block}.nav-link:hover{background:var(--color-sidebar-bg-hover);color:var(--color-sidebar-text-hover)}.nav-link.active{background:var(--color-sidebar-active-bg);color:var(--color-sidebar-active-text);border-left-color:var(--color-sidebar-active-border);font-weight:500}.nav-toggle{width:100%;padding:9px var(--sp-5);cursor:pointer;color:var(--color-sidebar-text);font-size:var(--text-base);font-family:var(--font);text-align:left;background:0 0;border:none;border-left:3px solid #0000;justify-content:space-between;align-items:center;transition:background .12s,color .12s;display:flex}.nav-toggle:hover{background:var(--color-sidebar-bg-hover);color:var(--color-sidebar-text-hover)}.nav-toggle.active{color:var(--color-sidebar-toggle-active)}.nav-toggle-arrow{font-size:var(--text-xs);opacity:.5;transition:transform .2s;display:inline-block;transform:rotate(-90deg)}.nav-toggle-arrow.open{opacity:.7;transform:rotate(0)}.nav-sublink{padding:7px var(--sp-5) 7px 34px;color:var(--color-sidebar-subtext);font-size:var(--text-sm);border-left:3px solid #0000;text-decoration:none;transition:background .12s,color .12s;display:block}.nav-sublink:hover{background:var(--color-sidebar-bg-hover);color:var(--color-sidebar-text-hover)}.nav-sublink.active{background:var(--color-sidebar-active-bg);color:var(--color-sidebar-active-text);border-left-color:var(--color-sidebar-active-border);font-weight:500}.nav-badge{margin-left:var(--sp-2);background:var(--color-accent);color:#fff;border-radius:999px;padding:1px 7px;font-size:.7rem;font-weight:500;line-height:1.4;display:inline-block}.page-header{margin-bottom:var(--sp-8)}.page-title{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--color-text-heading);letter-spacing:-.4px;font-weight:500}.page-description{margin-top:var(--sp-2);color:var(--color-text-muted);font-size:var(--text-base)}.placeholder-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--sp-6);color:var(--color-text-muted);font-size:var(--text-base);line-height:var(--leading);box-shadow:var(--shadow-sm)}.placeholder-card p+p{margin-top:var(--sp-2)}.nav-card-grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.nav-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);color:inherit;box-shadow:var(--shadow-sm);text-decoration:none;transition:border-color .15s,box-shadow .15s;display:block}.nav-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}.nav-card-title{font-family:var(--font-heading);font-size:var(--text-base);color:var(--color-text-heading);margin-bottom:var(--sp-1);font-weight:500}.data-table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--sp-2);overflow-x:auto}.data-table{border-collapse:collapse;width:100%}.data-table th{text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);color:var(--color-text-muted);border-bottom:1px solid var(--color-border-strong);font-weight:500}.data-table td{padding:var(--sp-3) var(--sp-4);font-size:var(--text-base);color:var(--color-text-body);border-bottom:1px solid var(--color-border)}.data-table tbody tr:last-child td{border-bottom:none}.attendance-toolbar{align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-wrap:wrap;display:flex}.attendance-toolbar select,.data-table select,.data-table input[type=text]{font:inherit;font-size:var(--text-base);color:var(--color-text-body);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3)}.attendance-toolbar .toolbar-count{color:var(--color-text-muted);font-size:var(--text-sm);margin-left:auto;font-weight:500}.page-actions{margin-bottom:var(--sp-6)}.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:var(--sp-6);margin-bottom:var(--sp-6)}.form-field{gap:var(--sp-1);margin-bottom:var(--sp-4);flex-direction:column;max-width:360px;display:flex}.filters-row{gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap;display:flex}.filters-row .form-field{min-width:180px;margin-bottom:0}.form-field label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.form-field input,.form-field select{font:inherit;font-size:var(--text-base);color:var(--color-text-body);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3)}.form-field input:focus,.form-field select:focus{border-color:var(--color-accent);outline:none}.form-error{color:var(--color-accent);font-size:var(--text-sm);margin-bottom:var(--sp-4)}.form-actions{gap:var(--sp-3);display:flex}.action-buttons{gap:var(--sp-2);flex-wrap:wrap;display:flex}.action-buttons .btn{text-align:center;flex:none;min-width:84px}.form-card--compact .form-field{margin-bottom:var(--sp-3)}.status-badge{font-size:var(--text-xs);white-space:nowrap;border-radius:999px;padding:2px 10px;font-weight:500;display:inline-block}.status-badge--pending{color:#7a5b00;background:#facd4c4d}.status-badge--approved{color:#2f7a4d;background:#2f7a4d26}.status-badge--rejected{background:var(--color-accent-subtle);color:var(--color-accent)}.status-badge--cancelled{background:var(--color-border);color:var(--color-text-muted)}.data-table tr.row-pending{background:var(--color-accent-subtle);font-weight:500}.reject-inline{align-items:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.reject-inline input{font:inherit;font-size:var(--text-sm);padding:var(--sp-1) var(--sp-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm)}.reject-inline .form-error{width:100%;margin-bottom:0}.nav-card-desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading)}.login-page{background:var(--color-bg);min-height:100vh;padding:var(--sp-6);justify-content:center;align-items:center;display:flex}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-10);width:100%;max-width:380px;box-shadow:var(--shadow-md)}.login-title{font-family:var(--font-heading);font-size:var(--text-lg);color:var(--color-text-heading);margin-bottom:var(--sp-1);letter-spacing:-.4px;font-weight:700}.login-subtitle{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--sp-8)}.sidebar-footer{padding:var(--sp-4);border-top:1px solid var(--color-sidebar-label);margin-top:auto}.logout-button{width:100%;padding:var(--sp-2) var(--sp-4);border:1px solid var(--color-sidebar-label);color:var(--color-sidebar-text);font-size:var(--text-sm);cursor:pointer;text-align:left;background:0 0;border-radius:4px}:root{--status-present-solid:#008300;--status-present-tint:#00830024;--status-late-solid:#b5790c;--status-late-tint:#eda10038;--status-sick-solid:#e34948;--status-sick-tint:#e3494824;--status-vacation-solid:#1baf7a;--status-vacation-tint:#1baf7a29;--status-valid_absence-solid:#2a78d6;--status-valid_absence-tint:#2a78d624;--status-invalid_absence-solid:#eb6834;--status-invalid_absence-tint:#eb683429;--status-other-solid:#4a3aa7;--status-other-tint:#4a3aa724}.calendar-nav{align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);display:flex}.calendar-nav-label{font-family:var(--font-heading);font-weight:500;font-size:var(--text-md);color:var(--color-text-heading);text-align:center;min-width:10ch}.calendar-legend{gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-5);font-size:var(--text-sm);color:var(--color-text-body);flex-wrap:wrap;display:flex}.calendar-legend-item{align-items:center;gap:var(--sp-2);display:flex}.calendar-legend-swatch{border-radius:3px;width:12px;height:12px;display:inline-block}.calendar-grid{gap:var(--sp-2);grid-template-columns:repeat(7,1fr);display:grid}.calendar-weekday{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);padding-bottom:var(--sp-2);font-weight:500}.calendar-cell{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);min-height:64px;padding:var(--sp-2);text-align:left;font:inherit;color:var(--color-text-heading);cursor:pointer;position:relative}.calendar-cell:hover{border-color:var(--color-border-strong)}.calendar-cell--empty{visibility:hidden;cursor:default;background:0 0;border:none}.calendar-cell--neutral{background:var(--color-bg);color:var(--color-text-muted)}.calendar-cell--present{background:var(--status-present-tint);border-left:3px solid var(--status-present-solid)}.calendar-cell--late{background:var(--status-late-tint);border-left:3px solid var(--status-late-solid)}.calendar-cell--sick{background:var(--status-sick-tint);border-left:3px solid var(--status-sick-solid)}.calendar-cell--vacation{background:var(--status-vacation-tint);border-left:3px solid var(--status-vacation-solid)}.calendar-cell--valid_absence{background:var(--status-valid_absence-tint);border-left:3px solid var(--status-valid_absence-solid)}.calendar-cell--invalid_absence{background:var(--status-invalid_absence-tint);border-left:3px solid var(--status-invalid_absence-solid)}.calendar-cell--other{background:var(--status-other-tint);border-left:3px solid var(--status-other-solid)}.calendar-cell-day{font-weight:500;font-size:var(--text-sm)}.calendar-cell-comment-dot{top:var(--sp-2);right:var(--sp-2);background:var(--color-text-heading);border-radius:50%;width:6px;height:6px;position:absolute}.calendar-modal-overlay{padding:var(--sp-5);z-index:50;background:#181e1d73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.calendar-modal-card{background:var(--color-surface);border-radius:var(--radius);padding:var(--sp-6);width:100%;max-width:360px;box-shadow:0 12px 32px #181e1d33}.calendar-modal-card h2{font-size:var(--text-md);color:var(--color-text-heading);margin-bottom:var(--sp-3)}.calendar-modal-card .form-actions{margin-top:var(--sp-5)}.logout-button:hover{background:var(--color-sidebar-bg-hover);color:var(--color-sidebar-text-hover)}button.btn{font:inherit;font-size:var(--text-base);padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-heading);cursor:pointer;font-weight:500;transition:border-color .15s,background .15s}button.btn:hover:not(:disabled){border-color:var(--color-text-subtle)}button.btn:disabled{opacity:.6;cursor:not-allowed}button.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}button.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}button.btn-danger{background:var(--color-accent);border:2px solid var(--color-text-heading);color:var(--color-text-heading);padding:var(--sp-2) var(--sp-4);font-weight:700}button.btn-danger:hover:not(:disabled){background:var(--color-accent-hover)}.nav-card-value{font-size:var(--text-lg);color:var(--color-text-heading);letter-spacing:-.4px;font-weight:700}.field-hint{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--sp-1)}.empty-state{background:var(--color-bg);border:1px dashed var(--color-border-strong);border-radius:var(--radius);padding:var(--sp-8) var(--sp-6);color:var(--color-text-muted);font-size:var(--text-base);text-align:center}