*{box-sizing:border-box}:root{--border: #d8dce2;--bg: #f2f3f5;--panel: #ffffff;--text: #1c2430;--muted: #66707e;--accent: #2563eb;--danger: #c0392b;--ok: #1e8e3e;--radius: 10px;--ring: rgba(37, 99, 235, .18);--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);--shadow-md: 0 12px 32px rgba(16, 24, 40, .14);--cell-dayoff: #f8c9d4;--cell-pto: #fdf0c2;--cell-unpaid: #cfd8e3;--cell-sick: #fbdfc0;--cell-guest: #e9d7f5;--cell-away: #d9f2d9;--cell-custom: #dbeafe}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select{touch-action:manipulation;font-family:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.page-center{min-height:100vh;display:flex;align-items:center;justify-content:center}.topbar{display:flex;align-items:center;gap:24px;background:#172335;color:#fff;padding:0 20px;height:52px;box-shadow:0 1px #ffffff0f inset,0 2px 8px #1018282e}.brand{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}.topbar-menu{display:flex;align-items:center;gap:24px;flex:1;min-width:0}.menu-btn,.menu-backdrop,.brand-select.bar-only{display:none}.topbar nav{display:flex;gap:4px;flex:1}.topbar nav a{color:#c3cbd8;text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}.topbar nav a:hover{color:#fff;background:#ffffff12}.topbar nav a.active{background:#2c3c56;color:#fff}.topbar-user{display:flex;align-items:center;gap:12px}.brand-select{background:#2c3c56;color:#fff;border:1px solid #44536d;border-radius:6px;padding:6px 8px;font-size:13px}.topbar-user small{color:#9aa7ba}.content{padding:20px;max-width:1400px;width:100%;margin:0 auto}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}.panel+.panel{margin-top:16px}h1{font-size:21px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px}h2{font-size:16px;margin:0 0 12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spacer{flex:1}input,select{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}input[type=date]{min-height:34px}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.time-input{width:76px;text-align:center;font-variant-numeric:tabular-nums}.btn{padding:7px 14px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);cursor:pointer;font-size:14px;transition:background .15s,border-color .15s,box-shadow .15s,transform .06s}.btn:hover{background:#f5f7fa}.btn:active:not(:disabled){transform:translateY(1px)}.btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:#1d4fd7}.btn-danger{color:var(--danger);border-color:#e4b6b0}.btn-danger:hover{background:#fdf3f2}.btn-ghost{background:transparent;border-color:#44536d;color:#c3cbd8}.btn-ghost:hover{background:#2c3c56;color:#fff}.btn-sm{padding:3px 8px;font-size:12px}.error-box{background:#fdeceb;border:1px solid #f0b9b3;color:var(--danger);padding:10px 14px;border-radius:8px;margin-bottom:12px}.notice-box{background:#e8f6e8;border:1px solid #b7ddb7;color:#1e6b2e;padding:10px 14px;border-radius:8px;margin-bottom:12px}.hint{color:var(--muted);font-size:12px}.badge{padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}.badge-DRAFT{background:#e8eaee;color:#4a5568}.badge-SUBMITTED{background:#fdf0c2;color:#8a6d00}.badge-APPROVED{background:#d9f2d9;color:var(--ok)}.badge-none{background:#f1f2f4;color:var(--muted)}.badge-PENDING{background:#fdf0c2;color:#8a6d00}.badge-REJECTED{background:#fdeceb;color:var(--danger)}.count-PO{background:#fdf0c2;font-weight:600}.count-NO{background:#cfd8e3;font-weight:600}.count-BO{background:#fbdfc0;font-weight:600}table.data{width:100%;border-collapse:collapse;background:#fff}table.data th,table.data td{border:1px solid var(--border);padding:8px 10px;text-align:left}table.data th{background:#f4f6f8;font-weight:600;font-size:13px;color:#3c4654}table.data tbody tr:hover>td{background:#f8fafd}table.data tr.row-over:hover>td{background:#fff6df}table.data tr.row-under:hover>td{background:#fdeaea}table.data tr.inactive td{color:#a5adb8}.grid-wrap{overflow-x:auto}table.grid{border-collapse:separate;border-spacing:0;background:#fff;width:100%;min-width:980px}table.grid th,table.grid td{border-right:1px solid #b9bfc9;border-bottom:1px solid #b9bfc9;padding:0;text-align:center;font-size:13px}table.grid thead th{border-top:1px solid #b9bfc9}table.grid th:first-child,table.grid td:first-child{border-left:1px solid #b9bfc9}table.grid thead th{background:#e2e5e9;padding:6px 8px}table.grid thead th .dow{display:block;font-size:11px;color:var(--muted)}table.grid th:first-child,table.grid td:first-child{position:sticky;left:0;z-index:2}table.grid thead th:first-child{z-index:3}table.grid tfoot td:first-child,table.grid thead th:first-child{background:#e2e5e9}table.grid td.name-cell{text-align:left;padding:6px 10px;white-space:nowrap;background:#fafbfc;font-weight:500}table.grid td.name-cell small{color:var(--muted);font-weight:400}table.grid td.cell{min-width:92px;height:38px}.cell button.cell-btn{width:100%;height:100%;min-height:38px;border:0;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);padding:2px 4px}.cell button.cell-btn:disabled{cursor:default}.cell button.cell-btn:not(:disabled):hover{outline:2px solid var(--accent);outline-offset:-2px}.cell .sub{display:block;font-size:10px;font-weight:400;color:var(--muted)}.cell-DAY_OFF{background:var(--cell-dayoff)}.cell-DAY_OFF .cell-btn{color:#b3273a}.cell-PAID_LEAVE{background:var(--cell-pto)}.cell-UNPAID_LEAVE{background:var(--cell-unpaid)}.cell-SICK{background:var(--cell-sick)}.cell-CUSTOM{background:var(--cell-custom)}.cell-away{background:var(--cell-away);font-style:italic}.away-line{display:block;font-size:10px;font-weight:500;line-height:1.4}.also-note{color:var(--ok)!important;font-style:italic}table.grid tr.guest-row td.name-cell{background:var(--cell-guest)}.name-cell-flex{display:flex;align-items:center;justify-content:space-between;gap:8px}.guest-remove{border:0;background:transparent;color:var(--danger);cursor:pointer;font-size:12px;font-weight:700;padding:0 0 0 6px;line-height:1}.guest-remove:hover{color:#8e2620}.guest-picker{margin-top:10px;padding:2px}table.grid tfoot td{background:#eef0f3;padding:6px 8px;font-weight:600}table.grid thead th.day-incomplete,table.grid tfoot td.day-incomplete{background:#fbd5d5;color:#a02020}table.grid thead th.day-holiday,table.grid tfoot td.day-holiday{background:#ddd3f2;color:#4c3a8c}table.grid thead th .holiday-name{display:block;font-size:10px;font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto}.holiday-bonus{color:#4c3a8c;font-weight:700}table.grid tfoot td .sub{display:block;font-size:10px;font-weight:500}td.total-cell{padding:4px 8px;white-space:nowrap}.adjust-btn{border:none;background:none;cursor:pointer;padding:0 2px;margin-left:4px;font-size:12px;color:var(--muted, #8a93a2);opacity:.55;vertical-align:baseline}.adjust-btn:hover{opacity:1;color:var(--accent, #2f6fed)}.override-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);margin-left:6px;vertical-align:middle}.ot{color:var(--ok);font-weight:700}.warn{color:var(--danger)}.under{color:#b3261e;font-weight:700}table.data tr.row-over>td{background:#fff6df}table.data tr.row-under>td{background:#fdeaea}.legend-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.12);vertical-align:-1px;margin-right:4px}.table-scroll{overflow-x:auto}.norm-note{white-space:nowrap;font-size:12px;color:var(--muted)}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}.legend .chip{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #b9bfc9;vertical-align:-2px;margin-right:4px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:50;animation:backdrop-in .15s ease-out}@keyframes backdrop-in{0%{background:#0f172a00}}.modal{background:#fff;border-radius:14px;padding:20px;width:460px;max-width:92vw;max-height:86vh;overflow-y:auto;box-shadow:0 20px 50px #00000040;animation:modal-in .16s ease-out}@keyframes modal-in{0%{opacity:0;transform:translateY(10px)}}.modal h2{margin-bottom:4px}.modal .subtitle{color:var(--muted);font-size:13px;margin-bottom:14px}.shift-options{display:flex;flex-direction:column;gap:10px}.shift-group-title{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}.shift-buttons{display:flex;flex-wrap:wrap;gap:6px}.shift-btn{border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}.shift-btn:hover{border-color:var(--accent);color:var(--accent)}.shift-btn.selected{background:var(--accent);border-color:var(--accent);color:#fff}.shift-btn:focus-visible,.month-cell:focus-visible,.wk-row:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}.cell button.cell-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}@media (max-width: 700px){.shift-btn{min-height:40px}}.modal-footer{display:flex;gap:8px;margin-top:16px}:root{--cat-l: #2a78d6;--cat-m: #1baf7a;--cat-s: #eda100;--cat-custom: #4a3aa7}.tl-day{padding:10px 0 4px;border-bottom:1px solid var(--border)}.tl-day:last-of-type{border-bottom:0}.tl-day-head{display:flex;gap:12px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}.tl-holiday{color:#4c3a8c;font-size:12px;font-weight:600}.tl-gap-flag{color:var(--danger);font-size:12px;font-weight:600}.tl-chart{position:relative;margin:0 4px 10px}.tl-axis{position:relative;height:18px}.tl-tick{position:absolute;top:0;bottom:-9999px;border-left:1px solid #eceef1;z-index:0}.tl-tick span{position:absolute;top:0;left:-14px;font-size:10px;color:var(--muted)}.tl-day .tl-chart{overflow:hidden}.tl-open-window{position:absolute;top:15px;height:3px;background:#d6dae0;border-radius:2px}.tl-row{position:relative;height:24px}.tl-bar{position:absolute;top:2px;height:20px;border-radius:4px;z-index:1;display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;border:1px solid;border-left-width:4px;box-sizing:border-box}.tl-bar-label{font-size:11px;font-weight:600;color:var(--text)}.tl-cat-L{background:#2a78d624;border-color:var(--cat-l)}.tl-cat-M{background:#1baf7a24;border-color:var(--cat-m)}.tl-cat-S{background:#eda10029;border-color:var(--cat-s)}.tl-cat-CUSTOM{background:#4a3aa71f;border-color:var(--cat-custom)}.tl-count{position:relative;height:20px;margin-top:6px;z-index:1}.tl-seg{position:absolute;top:0;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text);border-right:2px solid #fff;box-sizing:border-box}.tl-seg-0{background:#f1f2f4;color:var(--muted)}.tl-seg-1{background:#dce9f8}.tl-seg-2{background:#b4d2f0}.tl-seg-3{background:#86b6e6}.tl-seg-4{background:#5a99d9;color:#fff}.tl-seg-gap{background:#fdeceb;color:var(--danger);outline:1px solid #f0b9b3}.month-picker{position:relative}.month-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;width:250px;box-shadow:0 12px 30px #00000026}.month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.month-cell{border:1px solid var(--border);background:#fff;border-radius:6px;padding:8px 4px;cursor:pointer;font-size:13px}.month-cell:hover{border-color:var(--accent);color:var(--accent)}.month-cell.selected{background:var(--accent);border-color:var(--accent);color:#fff}.week-picker{position:relative}.week-popover{width:300px}.wk-head,.wk-row{display:grid;grid-template-columns:34px repeat(7,1fr);gap:2px;align-items:center}.wk-head{font-size:10px;color:var(--muted);text-align:center;margin-bottom:4px}.wk-head .wk-num{text-align:center}.wk-row{width:100%;border:1px solid transparent;background:transparent;border-radius:6px;padding:4px 2px;cursor:pointer;font-size:13px;text-align:center;margin-bottom:2px}.wk-row:hover{border-color:var(--accent);background:#f0f5fd}.wk-row.selected{background:var(--accent);border-color:var(--accent);color:#fff}.wk-row.selected .wk-num,.wk-row.selected .wk-day.dim{color:#ffffffb3}.wk-row.current:not(.selected){border-color:var(--accent)}.wk-num{font-size:10px;color:var(--muted);font-weight:600}.wk-day.dim{color:#b3bac4}.wk-day.today{font-weight:800;text-decoration:underline}.login-card{width:360px;background:#fff;border-radius:12px;padding:28px;box-shadow:0 10px 30px #0000001f;display:flex;flex-direction:column;gap:12px}.login-card input{width:100%}.login-clerk{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}.login-clerk h1{margin:0}.login-clerk .login-error{width:400px;max-width:90vw;box-sizing:border-box}.login-clerk .hint{max-width:400px;text-align:center}.clerk-skeleton{width:400px;max-width:90vw;height:430px;border-radius:16px;background:linear-gradient(100deg,#ececf1 40%,#f7f8fa,#ececf1 60%);background-size:200% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite;box-shadow:0 10px 30px #00000014;display:flex;align-items:center;justify-content:center}.clerk-skeleton-quiet{animation:none;background:#fff}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (max-width: 700px){.topbar{position:relative;z-index:60;height:52px;padding:0 6px 0 12px;gap:8px}.brand{font-size:15px}.brand-select.bar-only{display:block;margin-left:auto;max-width:130px}.brand-select.menu-only{display:none}.menu-btn{display:block;background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:10px 12px;cursor:pointer}.topbar-menu{display:none}.topbar-menu.open{display:flex;flex-direction:column;align-items:stretch;gap:14px;position:absolute;top:100%;left:0;right:0;z-index:60;background:#172335;padding:12px 16px 16px;box-shadow:0 18px 34px #0a0f1966}.topbar-menu.open nav{flex-direction:column;flex:none;gap:2px}.topbar-menu.open nav a{padding:11px 12px;font-size:15px;border-radius:8px}.topbar-menu.open .brand-select{width:100%;padding:10px;font-size:15px}.topbar-menu.open .topbar-user{justify-content:space-between;padding-top:12px;border-top:1px solid #2c3c56}.menu-backdrop{display:block;position:fixed;right:0;bottom:0;left:0;top:52px;background:#0a0f1973;z-index:50}.content{padding:10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.panel{padding:12px}h1{font-size:19px;margin-bottom:12px}input,select,.time-input{font-size:16px}.btn{min-height:40px}.btn-sm{min-height:34px}.cell button.cell-btn{min-height:44px}.row>.field{flex:1 1 42%;min-width:130px}.field>input,.field>select{width:100%;min-width:0;box-sizing:border-box}.field>.time-input{width:100%}.field:has(>.week-picker),.field:has(>.month-picker){flex-basis:100%}.week-picker,.month-picker{width:100%}.week-picker>.row,.month-picker>.row{flex-wrap:nowrap}.week-picker>.row>.btn:nth-child(2),.month-picker>.row>.btn:nth-child(2){flex:1;min-width:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-scroll{-webkit-overflow-scrolling:touch}table.data th,table.data td{padding:7px 8px}table.grid{min-width:880px}table.grid td.cell{min-width:84px}table.grid td.name-cell{max-width:46vw;overflow:hidden;text-overflow:ellipsis}.modal-backdrop{align-items:flex-end}.modal{width:100%;max-width:100%;border-radius:16px 16px 0 0;padding:16px;max-height:92dvh;padding-bottom:max(16px,env(safe-area-inset-bottom));animation:sheet-in .18s ease-out}@keyframes sheet-in{0%{transform:translateY(24px);opacity:.6}}.modal-footer{position:sticky;bottom:0;background:#fff;padding-top:10px;margin-top:12px}.month-popover{position:fixed;left:12px;right:12px;top:50%;transform:translateY(-50%);width:auto;max-width:400px;margin:0 auto;z-index:60;box-shadow:var(--shadow-md),0 0 0 100vmax #0f172a59}.week-popover{width:auto}.legend{gap:8px 12px}.guest-picker select{max-width:100%}}