.attendance-page{--page-bg:#f3f4f6;--paper:#fff;--border:#d1d5db;--border-soft:#e5e7eb;--text:#1a1a1a;--muted:#555;--teal:#195353;--teal-deep:#102b31;--error:#991b1b;--success:#0f5132;--present:#15803d;--present-soft:#dcfce7;--away:#92400e;--away-soft:#fff7ed;--shadow:0 1px 2px #0000000a, 0 10px 28px #0000000f;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-serif:"Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif}@scope(.attendance-page){.attendance-page *{box-sizing:border-box}.attendance-page{min-height:100vh;color:var(--text);background:var(--page-bg);font-family:var(--font-sans)}.attendance-page button,.attendance-page input,.attendance-page select,.attendance-page textarea{font:inherit}.attendance-page input,.attendance-page select,.attendance-page textarea{color:inherit}.app-shell{width:min(720px,100%);min-height:100vh;margin:0 auto;padding:20px 14px 40px}.app-header{text-align:center;margin-bottom:8px;position:relative}.attendance-nav{position:absolute;top:0;left:0}.brand-row{flex-direction:column;align-items:center;gap:10px;margin-bottom:8px;display:flex}.header-date{justify-content:center;margin-top:4px;display:flex}.holiday-note{color:var(--away);margin:8px 0 0;font-size:13px;font-weight:600}.brand-logo{background:var(--paper);border-radius:50%;width:48px;height:48px;padding:2px;box-shadow:0 1px 2px #00000014}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 2px;font-size:10px;font-weight:700}.page-title{font-family:var(--font-serif);letter-spacing:-.03em;margin:0;font-size:clamp(28px,7vw,40px);font-weight:400;line-height:1.05}.field-label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-size:10px;font-weight:700;display:block}.date-selector{flex-direction:column;align-items:center;gap:2px;display:inline-flex}.date-selector .field-label{text-align:center;margin-bottom:0}.date-selector input[type=date]{border:1px solid var(--border);text-align:center;background:#fff;border-radius:4px;width:11.5rem;max-width:11.5rem;padding:6px 8px;font-size:14px;font-weight:600}.date-selector input[type=date]:focus{border-color:var(--teal);outline:2px solid #19535340}.toolbar{gap:10px;margin-top:22px;margin-bottom:12px;display:grid}.toolbar__bar{justify-content:space-between;align-items:center;gap:40px;display:flex}.toolbar__left{justify-self:start}.toolbar__right{justify-self:end}.attendance-summary{color:var(--muted);margin:0;font-size:12px;line-height:1.4}.attendance-list{box-shadow:none;background:0 0;border:none;gap:12px;display:grid}.attendance-row{background:var(--paper);border:1.5px solid var(--border);border-radius:4px;padding:18px 16px;box-shadow:0 1px 2px #0000000a}.attendance-row.is-present{background:linear-gradient(90deg, var(--present-soft), #fff 42%);border-color:#86efac;box-shadow:0 1px 2px #15803d14}.attendance-row.is-away{background:linear-gradient(90deg, var(--away-soft), #fff 42%);border-color:#fdba74;box-shadow:0 1px 2px #92400e14}.attendance-row__main{justify-content:space-between;align-items:center;gap:12px;display:flex}.attendance-row__identity{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.attendance-avatar{letter-spacing:.02em;border:1px solid #1a1a1a14;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:14px;font-weight:800;display:inline-flex}.attendance-row__name{min-width:0;font-family:var(--font-serif);letter-spacing:-.02em;margin:0;font-size:20px;font-weight:500;line-height:1.15}.attendance-row__actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.choice-btn{border:1px solid var(--border);cursor:pointer;letter-spacing:.02em;background:#f5f5f5;justify-content:center;align-items:center;gap:6px;min-width:96px;min-height:40px;padding:8px 12px;font-size:12px;font-weight:700;transition:background .15s,border-color .15s,color .15s,transform .12s;display:inline-flex}.choice-btn:hover:not(:disabled){border-color:var(--teal)}.choice-btn:active:not(:disabled){transform:scale(.98)}.choice-btn:disabled{opacity:.55;cursor:not-allowed}.choice-btn--present.is-selected{background:var(--present);border-color:var(--present);color:#fff}.choice-btn--away.is-selected{background:var(--away);border-color:var(--away);color:#fff}.choice-check{justify-content:center;align-items:center;width:1.1em;font-size:15px;font-weight:800;line-height:1;display:inline-flex}.choice-caret{opacity:.85;font-size:10px}.away-menu{position:relative}.away-menu__list{z-index:20;background:var(--paper);border:1px solid var(--border);min-width:168px;box-shadow:var(--shadow);margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);right:0}.away-menu__list button{text-align:left;cursor:pointer;background:0 0;border:none;width:100%;min-height:40px;padding:8px 10px;font-size:13px;font-weight:600}.away-menu__list button:hover,.away-menu__list button.is-active{color:var(--teal);background:#f3f4f6}.leave-type-field{margin-top:12px;margin-left:58px}.leave-type-field select{border:1px solid var(--border);background:#fff;width:100%;padding:9px 10px}.leave-type-field select:focus{border-color:var(--teal);outline:2px solid #19535340}.field-hint{color:var(--muted);margin-top:4px;font-size:12px;display:block}.field-hint--error{color:var(--error)}.btn{cursor:pointer;letter-spacing:.14em;text-transform:uppercase;border:none;min-height:46px;padding:12px 16px;font-size:11px;font-weight:800;transition:opacity .2s}.btn:hover:not(:disabled){opacity:.92}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--teal);color:#fff;width:80%;margin-left:auto;margin-right:auto;display:block}.btn--secondary{width:100%;color:var(--teal);border:1px solid var(--teal);background:0 0}.btn--mark-all{background:var(--teal);color:#fff;border:1px solid var(--teal);width:auto;min-width:140px;box-shadow:0 1px 2px #00000014,0 8px 18px #1953532e}.btn--add{width:auto;min-height:46px;color:var(--teal);border:1px solid var(--teal);letter-spacing:.14em;text-transform:uppercase;background:#fff;padding:12px 16px;font-size:11px;font-weight:800;box-shadow:0 1px 2px #0000000d}.btn--add-confirm{background:var(--teal);color:#fff;width:auto;min-height:36px;padding:8px 12px}.btn--add-cancel{width:auto;min-height:36px;color:var(--muted);border:1px solid var(--border);background:0 0;padding:8px 12px}.add-employee-form{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.add-employee-form__field{flex:160px}.add-employee-form__field input{border:1px solid var(--border);background:#fff;width:100%;min-height:36px;padding:8px 10px}.add-employee-form__field input:focus{border-color:var(--teal);outline:2px solid #19535340}.add-employee-form__error{width:100%;color:var(--error);margin:0;font-size:12px}.remove-employee-btn{border:1px solid var(--border);width:28px;height:28px;color:var(--muted);cursor:pointer;background:#fff;flex-shrink:0;margin-left:4px;font-size:18px;line-height:1}.remove-employee-btn:hover:not(:disabled){border-color:var(--error);color:var(--error)}.remove-employee-btn:disabled{opacity:.5;cursor:not-allowed}.submit-bar{background:0 0;flex-direction:column;align-items:stretch;margin-top:24px;padding:0;display:flex}.submit-hint{color:var(--muted);margin:0 0 8px;font-size:13px}.submit-hint--error{color:var(--error)}.banner{border:1px solid var(--border);background:#ffffffb8;margin:0 0 10px;padding:10px 12px;font-size:14px}.banner--error{color:var(--error);background:#fef2f2;border-color:#fecaca}.banner__detail{word-break:break-word;margin-top:4px;font-size:12px;font-weight:600;display:inline-block}.banner--success{color:var(--success);background:#f0fdf4;border-color:#dcfce7}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=420px){.attendance-row__main{flex-direction:column;align-items:flex-start}.attendance-row__actions{width:100%}.choice-btn,.away-menu{flex:1}.away-menu .choice-btn{width:100%}.leave-type-field{margin-left:0}}@media (width<=560px){.toolbar__bar{gap:16px}}}