:root{color-scheme:light;--blue:#215ea8;--line:#d5deea;--bg:#eef3f8;--text:#172334;--muted:#657286;--public:#ffe2a8;--paid:#cfe5ff;--work:#d5f2d7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Yu Gothic UI','Meiryo',sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation;min-height:38px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--text);padding:8px 13px;font-weight:700}button:hover{border-color:var(--blue);color:var(--blue)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{width:100%;min-height:42px;border:1px solid #aebdce;border-radius:8px;padding:9px 11px;background:white;color:var(--text)}input[type=checkbox]{width:18px;min-height:18px}label{display:grid;gap:6px;font-weight:600}input:focus,button:focus-visible,select:focus{outline:3px solid #bcd8fa;outline-offset:1px}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#17477f;color:white}.danger{color:#a12c25}.muted,small{color:var(--muted)}header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 28px;background:white;border-bottom:1px solid var(--line)}.brand{font-size:20px;font-weight:800;color:var(--blue)}.brand span{font-weight:400;color:var(--muted);font-size:15px}header small{display:block;margin-top:4px}.wrap{max-width:1500px;margin:auto;padding:22px 28px 50px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.toolbar select{width:auto;max-width:360px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:21px;margin-bottom:18px;box-shadow:0 4px 16px #294a7009}.card h2,.card h3{margin:0 0 10px}h1{font-size:25px;margin:4px 0 9px}h2{font-size:19px}p{line-height:1.75}.note{border:1px solid #9ec4ee;border-radius:9px;background:#eef7ff;color:#174f89;padding:10px 13px;line-height:1.6;margin:12px 0}.warning{background:#fff7e6;border-color:#e6bf75;color:#7d560c}.badge{display:inline-block;padding:4px 9px;font-size:12px;border-radius:100px;background:#edf2f7;color:#536175;white-space:nowrap}.badge.open{background:#d5f2d7;color:#176326}.badge.issue{background:#ffe2a8;color:#775316}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin:18px 0}.tabs button{border:0;border-bottom:3px solid transparent;background:transparent;border-radius:0;padding:12px 18px}.tabs button.active{border-color:var(--blue);color:var(--blue)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.metric{padding:16px 20px;background:white;border:1px solid var(--line);border-radius:12px}.metric strong{font-size:28px;display:block;margin-top:6px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form{display:grid;gap:15px}.actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}.scroll{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:9px}table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}th,td{padding:10px;border-bottom:1px solid var(--line);border-right:1px solid #e6ebf2;white-space:nowrap;text-align:center}th{background:#f4f7fb;font-weight:700}thead th{position:sticky;top:0;z-index:2}th.sticky{position:sticky;left:0;z-index:3;min-width:160px;text-align:left}tbody th.sticky{z-index:1;background:white}.request-cell{min-width:57px;height:54px;cursor:pointer}.requested_off,.calendar-day.requested_off{background:var(--public)}.paid,.calendar-day.paid{background:var(--paid)}.work,.calendar-day.work{background:var(--work)}.public_off,.calendar-day.public_off{background:#e7ddf6}.changed{box-shadow:inset 0 0 0 2px #b38d32}.conflict{box-shadow:inset 0 0 0 3px #b42318}.count th{background:#fff5df}.count td{background:#fff9ed;font-weight:800;color:#80520d}.legend{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.legend span{border-radius:99px;padding:5px 12px;font-size:12px}.sun{color:#bd3030}.sat{color:#2865b1}.portal-shell{width:min(100%,680px);margin:auto}.leave-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar-weekday{text-align:center;font-size:12px;padding:5px}.calendar-day{min-width:0;min-height:90px;border:1px solid var(--line);border-radius:9px;background:white;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.calendar-day strong{font-size:16px}.calendar-day span{font-size:11px}.calendar-day small{font-size:9px}.calendar-day.blank{visibility:hidden}.calendar-day.outside{opacity:.25}.sticky-submit{position:sticky;bottom:12px;width:100%;min-height:49px;margin-top:18px;box-shadow:0 5px 18px #183c6b3d}.login{max-width:480px;margin:7vh auto}.login .brand{margin-bottom:25px;font-size:28px}.login button{width:100%}dialog{border:1px solid var(--line);border-radius:15px;width:min(570px,calc(100% - 28px));max-height:90vh;overflow:auto;padding:24px;box-shadow:0 20px 80px #183c6b40}dialog::backdrop{background:#17233480}dialog h2{margin-top:0}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172334;color:white;max-width:90%;padding:14px 22px;border-radius:10px;z-index:100;box-shadow:0 5px 25px #0003}.error{color:#b42318;white-space:pre-wrap}.staff-line{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}.staff-line:last-child{border:0}.staff-line strong{display:block}.history{font-size:12px;padding:10px 0;border-bottom:1px solid var(--line)}.empty{padding:40px;text-align:center;color:var(--muted)}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}a{color:var(--blue)}.save-status{font-size:12px;color:#176326}pre{white-space:pre-wrap;word-break:break-word;font-size:12px}.checkrow{display:flex;align-items:center;gap:8px}.checkrow label{display:flex}.count-num{font-size:16px}.tinylogo{width:30px;height:30px;background:var(--blue);color:white;border-radius:8px;display:inline-grid;place-items:center;margin-right:7px}@media(max-width:760px){header{padding:14px 16px}.wrap{padding:16px 12px 35px}.metrics{grid-template-columns:repeat(2,1fr);gap:8px}.grid2,.export-grid{grid-template-columns:1fr}.card{padding:15px}.tabs{overflow:auto}.tabs button{padding:11px;white-space:nowrap}.calendar-day{min-height:77px}.brand{font-size:17px}.brand span{font-size:12px}.toolbar select{max-width:100%}.staff-line{flex-wrap:wrap}.request-cell{min-width:53px}}

/* Admin request overview: viewport-sized frame, fixed-width dates, native scroll. */
html,body,#app{width:100%;min-width:0;max-width:100%}
header{flex-wrap:wrap;min-width:0;max-width:100%}
header>*,.wrap,.card,.toolbar,.row,.tabs,.grid2,.export-grid{min-width:0;max-width:100%}
.row>*,.toolbar>*{min-width:0;max-width:100%}
.wrap{width:100%}
.card{width:100%}
.toolbar select{min-width:0;max-width:100%;text-overflow:ellipsis}
.toolbar>.muted{overflow-wrap:anywhere}
.grid2,.export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tabs{flex-wrap:wrap;overflow:visible}
.tabs button{flex:0 1 auto;white-space:normal;overflow-wrap:break-word}
.submission-summary{display:flex;flex-wrap:wrap;gap:8px 12px;width:100%;margin:14px 0}
.summary-item{display:inline-flex;align-items:baseline;gap:5px;flex:0 0 auto;white-space:nowrap;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.summary-item strong{font-size:18px;color:var(--blue);font-variant-numeric:tabular-nums}
.summary-item.issue{background:#fff7e6;border-color:#e6bf75}
.summary-item.issue strong{color:#80520d}
.request-card{min-width:0;width:100%;max-width:100%}
.period-length{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.request-scroll{display:block;width:100%;min-width:0;max-width:100%;max-height:65vh;overflow:auto;isolation:isolate;overscroll-behavior-x:contain;scrollbar-gutter:stable}
.request-table{table-layout:fixed;border-collapse:separate;border-spacing:0;max-width:none;min-width:0}
.request-table .staff-col{width:176px}
.request-table .date-col{width:72px}
.request-table th,.request-table td{box-sizing:border-box;padding:8px 5px}
.request-table th.sticky{width:176px;min-width:176px;max-width:176px;left:0;position:sticky;white-space:normal;overflow-wrap:anywhere;background:#fff;border-right:2px solid #b7c8dc}
.request-table thead th{top:0;position:sticky;z-index:3;height:74px;background:#f4f7fb}
.request-table thead th.sticky{z-index:5;background:#f4f7fb}
.request-table tbody th.sticky{z-index:2}
.request-table .count th.sticky{background:#fff5df}
.request-table .date-head,.request-table .request-cell{width:72px;min-width:72px;max-width:72px}
.request-table .date-head>span,.request-table .date-head>small{display:block}
.request-table .date-head>small{color:inherit;font-size:11px;margin-top:3px}
.request-table .month-label{height:16px;font-size:10px;line-height:16px;font-weight:700;white-space:nowrap}
.request-table .month-boundary{border-left:2px solid #91a9c5}
.request-table .request-cell{height:54px;white-space:nowrap;font-size:12px}
.request-table .sticky .badge{max-width:100%;white-space:normal;line-height:1.4}
.request-table .sticky button{max-width:100%;white-space:normal}
.request-help{overflow-wrap:anywhere}
@media(max-width:760px){
 .grid2,.export-grid{grid-template-columns:minmax(0,1fr)}
 header .row{gap:6px}
 .tabs button{padding:10px 9px}
 .submission-summary{gap:7px}
 .summary-item{padding:7px 9px}
 .request-table .request-cell{min-width:72px}
}

/* Compact admin grid. The staff and date columns keep their established widths. */
.request-table th,.request-table td{padding:3px 4px}
.request-table thead th{height:40px;padding-top:3px;padding-bottom:3px;line-height:1.1}
.request-table .month-label{height:12px;font-size:9px;line-height:12px}
.request-table .date-head>small{display:inline;font-size:10px;margin-top:0;margin-left:3px}
.request-table .date-head>span:not(.month-label){display:inline;font-size:11px}
.request-table .count th,.request-table .count td{height:30px;padding:3px 4px;font-size:11px;line-height:1.2}
.request-table .count .count-num{font-size:13px;line-height:1}
.request-table .paid-count td,.request-table .paid-count th.sticky{background:#edf5ff;color:#215183}
.request-table .request-cell{height:44px;font-size:11px;line-height:1.2}
.request-table tbody tr:not(.count)>th.sticky{height:44px;vertical-align:middle}
.request-table .staff-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0}
.request-table .staff-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.15;font-size:11px}
.request-table .staff-state.badge{flex:0 0 auto;max-width:80px;padding:2px 4px;font-size:9px;line-height:1.15;white-space:normal}
.request-table .staff-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:12px;margin-top:2px;line-height:1}
.request-table .staff-meta small{font-size:9px;line-height:1}
.request-table .staff-meta button{min-height:20px;padding:2px 5px;border-radius:5px;font-size:10px;line-height:1.2}
.request-table .request-time{font-size:10px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.15px}
.request-table .read-only{cursor:default}
.adjust-save-status{font-size:12px;color:#176326;min-height:18px;margin:8px 0 2px}
.adjust-save-status.error{color:#b42318}

/* Staff totals stay beside the staff name while only date columns scroll. */
.request-table .off-total-col{width:52px}
.request-table .paid-total-col{width:36px}
.request-table .sticky-total{position:sticky;z-index:2;background:#fff;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.request-table .total-off{left:176px;width:52px;min-width:52px;max-width:52px}
.request-table .total-paid{left:228px;width:36px;min-width:36px;max-width:36px;border-right:2px solid #b7c8dc}
.request-table thead .sticky-total{z-index:5;background:#f4f7fb;font-size:10px;line-height:1.2}
.request-table .requested-count .sticky-total{background:#fff5df}
.request-table .paid-count .sticky-total{background:#edf5ff}
.request-table .staff-total{font-size:12px;font-weight:700}

.calendar-zoom{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:5px;margin:6px 0 10px;min-width:0;max-width:100%}
.calendar-zoom button,.calendar-zoom select{font-size:11px;min-height:28px;padding:4px 7px;width:auto;max-width:100%}
.calendar-zoom output{min-width:36px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.calendar-zoom button[aria-pressed=true]{background:#e0edff;border-color:#3972ae}
#calendarZoomHint{font-size:10px;color:#526479}

/* Readable text is independent of the density percentage. Padding never scales. */
.request-table{--grid-staff:188px;--grid-off:48px;--grid-paid:32px;--grid-date:68px;--grid-row:32px;--grid-font:13px;border-spacing:0;zoom:1}
.request-table th,.request-table td{padding:1px 2px;line-height:1.1}
.request-table .staff-col,.request-table th.sticky{width:var(--grid-staff);min-width:var(--grid-staff);max-width:var(--grid-staff)}
.request-table .off-total-col,.request-table .total-off{width:var(--grid-off);min-width:var(--grid-off);max-width:var(--grid-off)}
.request-table .paid-total-col,.request-table .total-paid{width:var(--grid-paid);min-width:var(--grid-paid);max-width:var(--grid-paid)}
.request-table .total-off{left:var(--grid-staff)}
.request-table .total-paid{left:calc(var(--grid-staff) + var(--grid-off))}
.request-table .date-col,.request-table .date-head,.request-table .request-cell{width:var(--grid-date);min-width:var(--grid-date);max-width:var(--grid-date)}
.request-table .request-cell,.request-table tbody tr:not(.count)>th.sticky{height:var(--grid-row);font-size:var(--grid-font);padding:1px 2px;line-height:1.1}
.request-table .request-cell{text-align:center;color:#142238;white-space:nowrap}
.request-table .request-cell.work{font-size:11px;letter-spacing:-.3px}
.request-table .request-time{font-size:inherit;line-height:1;letter-spacing:inherit}
.request-table thead th{height:32px;padding:1px 2px}
.request-table .date-head>span:not(.month-label),.request-table .date-head>small{font-size:12px;line-height:13px}
.request-table .date-head>small{margin-left:1px}
.request-table .month-label{height:11px;font-size:10px;line-height:11px;white-space:nowrap}
.request-table .count th,.request-table .count td{height:21px;padding:1px 2px;font-size:12px;line-height:1.1}
.request-table .count .count-num,.request-table .staff-total{font-size:13px;line-height:1}
.request-table .staff-heading{gap:3px}
.request-table .staff-name{font-size:12px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.request-table .staff-state.badge{font-size:9px;padding:1px 2px;line-height:11px;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.request-table .staff-meta{margin-top:0;min-height:10px;gap:2px;line-height:10px}
.request-table .staff-meta small{font-size:9px;line-height:10px}
.request-table .staff-meta button{min-height:14px;padding:0 2px;font-size:9px;line-height:12px;border-radius:3px}
.request-table.compact-symbols .request-cell{font-size:13px;font-weight:700;letter-spacing:0;padding:0 1px}
.request-table.compact-symbols th,.request-table.compact-symbols td{padding-left:1px;padding-right:1px}
.request-table.compact-symbols .month-label{font-size:10px}
.request-table.compact-symbols .count th.sticky{font-size:12px}
.request-table .request-cell.requested_off,.request-card .legend .requested_off{background:#ffc957;color:#432800}
.request-table .request-cell.public_off,.request-card .legend .public_off{background:#c29bea;color:#30134c}
.request-table .request-cell.paid,.request-card .legend .paid{background:#80bbf2;color:#103257}
.request-table .request-cell.work,.request-card .legend .work{background:#83d5a0;color:#103b21}
.request-table .request-cell:not(.requested_off):not(.public_off):not(.paid):not(.work){background:#fff}
.request-table .request-cell.changed{box-shadow:inset 0 0 0 2px #9c3a10}

.staff-master-scroll{max-width:100%;overflow:auto;max-height:65vh}
.staff-master-table{width:100%;min-width:560px;table-layout:fixed}
.staff-master-table th:nth-child(1){width:20%}.staff-master-table th:nth-child(2){width:30%}.staff-master-table th:nth-child(3){width:18%}.staff-master-table th:nth-child(4){width:12%}.staff-master-table th:nth-child(5){width:20%}
.staff-master-table td{padding:3px;vertical-align:top}.staff-master-table input{min-width:0;width:100%;padding:5px 4px;font-size:13px;box-sizing:border-box}
.staff-master-table input[type=checkbox]{width:auto}.staff-master-table summary{cursor:pointer;padding:5px;font-size:12px}.master-actions{display:flex;flex-direction:column;gap:4px}.master-actions button{font-size:11px;padding:4px}
.legacy-login{display:block;font-size:10px;color:#77501a;overflow-wrap:anywhere}.master-password{max-width:360px;margin-top:10px}