:root{--font: "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif;--text: #1f2937;--text-muted: #667085;--text-faint: #98a2b3;--cursor-default: auto;--cursor-pointer: pointer;--panel-bg: #ffffff;--border: #e4e8f0;--border-strong: #cdd4e0;--accent: #2f6d5b;--accent-dark: #21503f;--accent-soft: #e6f1ee;--caret-color: #000000;--focus-ring: rgba(47, 109, 91, .22);--radius-lg: 14px;--radius-md: 10px;--radius-sm: 7px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);--shadow-md: 0 10px 30px rgba(16, 24, 40, .09);--shadow-modal: 0 24px 60px rgba(16, 24, 40, .22);--header-row-h: 34px;--header-buffer-h: 22px;--body-row-h: 30px}*{box-sizing:border-box}body{font-family:var(--font);font-size:10pt;color:var(--text);background:radial-gradient(circle at 20% 0%,#eef3fb,#f4f7fb 45%,#edf0f6);background-attachment:fixed;margin:0;padding:0;cursor:var(--cursor-default)}button,select,a,[role=button],input[type=checkbox],.settings-checkbox,.toggle-earlier,.modal-checkbox,.btn-remove-holiday{cursor:var(--cursor-pointer)}.app-container{max-width:1300px;margin:28px auto;box-shadow:var(--shadow-md);border:1px solid var(--border);border-radius:var(--radius-lg);background-color:var(--panel-bg);overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(135deg,#2b5346,#1b3a30);color:#fff}.topbar-title{font-size:12.5pt;font-weight:600;letter-spacing:.2px}.auth-area{display:flex;align-items:center;gap:10px}.auth-area img{width:26px;height:26px;border-radius:50%}.auth-area button{font-family:var(--font);font-size:9.5pt;padding:6px 14px;border:1px solid rgba(255,255,255,.55);background:#ffffff14;color:#fff;border-radius:999px;cursor:var(--cursor-pointer);transition:background .15s ease}.auth-area button:hover{background:#fff3}.auth-area .user-email{font-size:9pt;opacity:.9}.local-mode-banner{background:#fbf3d9;color:#7a5c00;padding:8px 20px;font-size:9pt;border-bottom:1px solid var(--border)}nav{display:flex;align-items:center;gap:4px;background-color:#f2f4f8;padding:8px;border-bottom:1px solid var(--border)}nav button{font-family:var(--font);font-size:9.7pt;font-weight:600;padding:7px 16px;border:1px solid transparent;background-color:transparent;color:var(--text);cursor:var(--cursor-pointer);border-radius:999px;transition:background .15s ease,color .15s ease}nav button:hover{background-color:#1018280a}nav button.active{background-color:#fff;color:var(--accent-dark);border-color:var(--border);box-shadow:var(--shadow-sm)}.view{display:none;padding:18px 20px;background-color:var(--panel-bg)}.view.active{display:block}.pto-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:12px;font-size:9.5pt;flex-wrap:wrap}.pto-toolbar button{font-family:var(--font);font-size:9.5pt;font-weight:600;padding:7px 14px;border:1px solid var(--border-strong);background:#fff;color:var(--text);border-radius:999px;cursor:var(--cursor-pointer);box-shadow:var(--shadow-sm);transition:background .15s ease,border-color .15s ease}.pto-toolbar button:hover{background:#f7f8fa;border-color:var(--accent)}.toggle-earlier{cursor:var(--cursor-pointer);-webkit-user-select:none;user-select:none;color:var(--text)}.toggle-earlier input{accent-color:var(--accent);cursor:var(--cursor-pointer)}.save-indicator{color:var(--text);font-style:italic;margin-left:auto}.table-scroll{max-height:70vh;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-md)}.table-scroll table{margin:0;width:100%}#pto-table .note-cell,#pto-table #col-notes{min-width:260px}.table-scroll thead th{position:sticky;z-index:5}.table-scroll thead tr:nth-child(1) th{top:0}.table-scroll thead tr:nth-child(2) th{top:var(--header-row-h);position:sticky}.table-scroll thead tr:nth-child(3) th{top:calc(var(--header-row-h) * 2);position:sticky;height:var(--header-buffer-h)}#pto-table-body td:first-child,#pto-table-body td:nth-child(2){position:sticky;z-index:2}#pto-table thead #col-from,#pto-table thead #col-to{z-index:6}table{border-collapse:separate;border-spacing:0;table-layout:auto;width:auto}th,td{border:1px solid var(--border);padding:4px 6px;min-width:70px;height:22px;background-clip:padding-box}th{background-color:#f7f8fb;color:var(--text);text-align:center;font-weight:600;vertical-align:middle}#pto-table thead tr:nth-child(1) th,#pto-table thead tr:nth-child(2) th{height:var(--header-row-h);box-sizing:border-box}#pto-table thead tr.header-buffer th{height:var(--header-buffer-h);box-sizing:border-box;padding:0}#settings-view table{border:none}#settings-view td{border:none;padding:4px 5px}.bg-holiday{background-color:#e9f4e2}.bg-personal{background-color:#e2edf8}.bg-sick{background-color:#fbe7dc}.bg-vacation{background-color:#fbf1d4}.calc-box{border:1px solid var(--border);border-radius:var(--radius-md);padding:0;overflow:hidden;box-shadow:var(--shadow-sm)}.calc-box th{background-color:#f2f4f8;border-bottom:1px solid var(--border);text-align:left;padding:6px 10px}.calc-box td{padding:4px 10px;border:none}.calc-box input{border:none;text-align:right;width:80px;background:transparent;font-size:10pt;color:var(--text)}.calc-box input:focus{outline:none;box-shadow:0 0 0 2px var(--focus-ring);border-radius:4px}.label-col{font-weight:600;text-align:right;width:220px;color:var(--text)}.value-col{width:100px}.value-col input,.value-col select{width:90px}.value-col input[type=date]{width:150px}#pto-table th.header-main{border-bottom:2px solid var(--border-strong);vertical-align:middle}#pto-table th.header-sub{background-color:#f7f8fb;font-weight:500;color:var(--text);width:90px}.th-vac-used{background-color:#fbf1d4}.th-pers-used{background-color:#e2edf8}.th-hol-used{background-color:#e9f4e2}.th-sick-used{background-color:#fbe7dc}.th-vac-bal{background-color:#f0e0a6}.th-pers-bal{background-color:#c9dcef}.th-hol-bal{background-color:#c9e3bd}.th-sick-bal{background-color:#f4cfb7}.max-accrual-legend{display:flex;align-items:center;gap:8px;font-size:9pt;flex-wrap:wrap}.legend-title{font-weight:600;color:var(--text)}.legend-chip{padding:4px 10px;border-radius:999px;border:1px solid var(--border)}.legend-chip b{font-weight:600}.chip-vac{background-color:#fbf1d4}.chip-pers{background-color:#e2edf8}.chip-hol{background-color:#e9f4e2}.chip-sick{background-color:#fbe7dc}#pto-table-body td,#pto-table-body th{height:var(--body-row-h);box-sizing:border-box}#pto-table-body td{text-align:right}#pto-table-body .pay-period{text-align:center;background-color:#fafbfc;color:var(--text)}#pto-table-body tr.current-period .pay-period{background-color:#d7ecdf;color:var(--accent-dark);font-weight:600}#pto-table-body tr.before-anchor td{color:var(--text-faint)}#pto-table-body tr.before-anchor .balance-cell{background-color:#fafbfc}#pto-table-body .pto-input-cell,#pto-table-body .balance-cell{width:90px}#pto-table th.col-group-start,#pto-table th.th-vac-used,#pto-table th.th-vac-bal,#pto-table #col-notes,#pto-table-body td.col-group-start,#pto-table-body .balance-cell.bal-vac,#pto-table-body .note-cell{border-left:2px solid var(--border-strong)}#pto-table-body td.pto-input-cell{background-color:#fcfcfa}#pto-table-body tr.row-focused .pay-period{background-color:#cfe3f5}#pto-table-body tr.row-focused.current-period .pay-period{background-color:#b9d9e8}#pto-table-body tr.virt-spacer td{border:none;padding:0;height:auto}#pto-table-body .pto-input-cell,#pto-table-body .note-cell{padding:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c3cad6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom 3px left 4px;background-size:9px 9px}#pto-table-body .pto-input,#pto-table-body .note-input{width:100%;height:100%;border:none;text-align:right;padding:4px 8px;box-sizing:border-box;font-family:var(--font);font-size:10.5pt;background:transparent;color:var(--text);caret-color:var(--caret-color)}#pto-table-body .note-input{text-align:left}#pto-table-body .pto-input:focus,#pto-table-body .note-input:focus{outline:none;border-radius:5px;box-shadow:inset 0 0 0 2px var(--accent);margin:2px;width:calc(100% - 4px);height:calc(100% - 4px);position:relative;z-index:10}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}#pto-table-body .balance-cell{background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .3s ease-out;text-align:right}.bal-vac{background-image:linear-gradient(to right,#fbf1d4 50%,transparent 50%)}.bal-pers{background-image:linear-gradient(to right,#e2edf8 50%,transparent 50%)}.bal-hol{background-image:linear-gradient(to right,#e9f4e2 50%,transparent 50%)}.bal-sick{background-image:linear-gradient(to right,#fbe7dc 50%,transparent 50%)}#holidays-table{border-radius:var(--radius-md);overflow:hidden}#holidays-table th{text-align:left}#holidays-table td{background-color:#fafbfc}#holidays-table input{width:100%;box-sizing:border-box}#holidays-table .btn-remove-holiday{cursor:var(--cursor-pointer);color:#b3492f;border:none;background:none;font-size:11pt;border-radius:999px;width:26px;height:26px}#holidays-table .btn-remove-holiday:hover{background:#fbe7dc}input[type=text],input[type=number],input[type=date],select{font-family:var(--font);font-size:10.5pt;color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 8px;background-color:#fff;transition:border-color .15s ease,box-shadow .15s ease;caret-color:var(--caret-color)}input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:var(--cursor-pointer)}#pto-table-body input[type=number],#pto-table-body input[type=text]{border:none;border-radius:0}.calc-box input{border-radius:0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#141e1e73;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100}.modal-overlay[hidden]{display:none}.modal-box{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);padding:26px 28px;width:380px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow-y:auto}.modal-box h2{margin:0 0 10px;font-size:13.5pt;font-weight:600;color:var(--accent-dark)}.modal-box p{margin:0 0 16px;font-size:9.5pt;color:var(--text);line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-actions button{font-family:var(--font);font-size:9.5pt;font-weight:600;padding:8px 16px;border:1px solid var(--border-strong);background:#fff;color:var(--text);border-radius:999px;cursor:var(--cursor-pointer);transition:background .15s ease}.modal-actions button:hover{background:#f5f6f8}.modal-actions button.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.modal-actions button.btn-primary:hover{background:var(--accent-dark)}.modal-field{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9.5pt;font-weight:600;margin-bottom:10px}.modal-field input,.modal-field select{font-size:10pt;padding:5px 8px;width:110px;font-weight:400}.modal-checkbox{display:flex;align-items:center;gap:6px;font-size:9.5pt;font-weight:400;margin:-4px 0 14px;color:var(--text)}.modal-checkbox input{accent-color:var(--accent)}.modal-fieldset{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px 2px;margin:0 0 4px}.modal-fieldset legend{font-size:9pt;font-weight:600;color:var(--text);padding:0 4px}.modal-fieldset .modal-field{padding:4px 8px;border-radius:var(--radius-sm)}.checkbox-cell{text-align:left}.settings-checkbox{display:inline-flex;align-items:flex-start;gap:7px;font-weight:400;max-width:260px;line-height:1.35}.settings-checkbox input{margin-top:3px;accent-color:var(--accent)}