:root {
    --bg: #05080c; --surface: #0c1219; --text: #f5f8fb; --muted: #93a3af;
    --line: rgba(255,255,255,.11); --cyan: #00b9ee; --orange: #ff7900; --danger: #ff6b6b;
    --font: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display:none!important; }
html { color-scheme:dark; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 8% 0,rgba(0,185,238,.1),transparent 26%),radial-gradient(circle at 92% 90%,rgba(255,121,0,.08),transparent 26%),var(--bg); font:17px/1.5 var(--font); }
button,input,select { font:inherit; } button,a,select,input { touch-action:manipulation; } a { color:inherit; } button { cursor:pointer; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:12px 16px; color:#001018; background:var(--cyan); border-radius:8px; font-weight:850; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
button:disabled { opacity:.55; cursor:wait; }
.topbar { position:sticky; z-index:20; top:0; min-height:82px; padding:0 max(24px,calc((100vw - 1380px)/2)); display:flex; align-items:center; gap:36px; background:rgba(5,8,12,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:13px; margin-right:auto; text-decoration:none; }
.brand img { width:72px; height:56px; object-fit:contain; } .brand span { display:grid; line-height:1.15; } .brand strong { font-size:.95rem; } .brand small { color:var(--muted); font-size:.72rem; }
.topbar nav { display:flex; gap:8px; } .topbar nav a { min-height:48px; padding:0 14px; display:grid; place-items:center; color:#c4d0d8; border-radius:8px; text-decoration:none; font-size:.84rem; font-weight:750; }
.topbar nav a:hover,.topbar nav a:focus-visible,.topbar nav a.active { color:#fff; background:rgba(255,255,255,.07); outline:none; }.topbar nav a.active { box-shadow:inset 0 -2px var(--cyan); }
.mobile-menu { display:none; position:relative; }.mobile-menu summary { min-height:46px; padding:0 13px; display:grid; place-items:center; color:#d4e0e7; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:.78rem; font-weight:850; list-style:none; }.mobile-menu summary::-webkit-details-marker { display:none; }.mobile-menu>div { position:absolute; z-index:30; right:0; top:54px; width:210px; padding:8px; display:grid; background:#0c1219; border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); }.mobile-menu a { min-height:46px; padding:0 12px; display:flex; align-items:center; border-radius:7px; text-decoration:none; font-size:.82rem; font-weight:750; }.mobile-menu a:hover { background:rgba(255,255,255,.07); }
.app-shell { width:min(1380px,calc(100% - 48px)); margin:auto; padding:54px 0 90px; }
.welcome { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.eyebrow,.section-head small { margin:0; color:var(--cyan); font-size:.66rem; font-weight:900; letter-spacing:.16em; }
.welcome h1 { margin:5px 0 0; font-size:clamp(2.7rem,5vw,5rem); line-height:.92; letter-spacing:-.06em; } .welcome p:last-child { margin:14px 0 0; color:var(--muted); }
.person-picker { min-width:280px; display:grid; gap:8px; color:var(--muted); font-size:.75rem; font-weight:750; }
input,select { width:100%; min-width:0; max-width:100%; height:52px; min-height:52px; padding:0 14px; color:#fff; background:#071017; border:1px solid rgba(255,255,255,.18); border-radius:8px; outline:none; }
select { padding-right:44px; appearance:none; background-color:#071017; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2393a3af' stroke-width='2' d='m5 7 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } select option { color:#fff; background:#071017; } input[type="date"] { color-scheme:dark; } input[type="date"]::-webkit-date-and-time-value { text-align:left; }
input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,185,238,.15); }
label { display:grid; gap:8px; color:#b7c3cb; font-size:.78rem; font-weight:760; } label span { color:#71808b; font-weight:500; }
.primary,.ghost,.danger,.allowance button { min-height:50px; padding:0 18px; border-radius:8px; font-weight:850; }
.primary { color:#001018; background:var(--cyan); border:1px solid var(--cyan); } .primary:hover,.primary:focus-visible { color:#fff; background:#0781a9; outline:3px solid rgba(0,185,238,.18); outline-offset:2px; }
.ghost { color:#d4e0e7; background:transparent; border:1px solid var(--line); } .danger { color:#ffd3d3; background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.45); }
.notice { width:min(900px,100%); margin:0 auto 24px; padding:15px 18px; color:#d8f8ff; background:rgba(0,185,238,.1); border:1px solid rgba(0,185,238,.35); border-radius:8px; overflow-wrap:anywhere; }
.notice.error { color:#ffd8d8; background:rgba(255,107,107,.1); border-color:rgba(255,107,107,.4); }
.pending-banner { margin:24px 0 -16px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#fff2bd; background:rgba(241,196,15,.1); border:1px solid rgba(241,196,15,.38); border-radius:10px; text-decoration:none; }
.pending-banner span { font-size:.78rem; font-weight:850; }
.stats { margin:40px 0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stats article { min-height:128px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,rgba(17,27,37,.98),rgba(8,13,19,.98)); border:1px solid var(--line); border-radius:12px; }
.stats article.accent { border-color:rgba(0,185,238,.38); background:linear-gradient(145deg,rgba(0,185,238,.14),rgba(8,13,19,.98)); }
.stats small { color:#7f8f9a; font-size:.64rem; font-weight:850; letter-spacing:.13em; } .stats strong { font-size:2rem; } .stats strong span { color:var(--muted); font-size:.9rem; font-weight:650; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:18px; }
.calendar-card,.quick-card,.admin-section,.settings-card { background:linear-gradient(145deg,rgba(14,23,32,.98),rgba(7,12,17,.98)); border:1px solid var(--line); border-radius:14px; }
.calendar-card,.quick-card,.settings-card { padding:25px; } .quick-card { position:sticky; top:100px; }
.leave-overview { margin:18px 0; padding:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; background:rgba(0,185,238,.06); border:1px solid rgba(0,185,238,.2); border-radius:10px; }
.leave-overview div { display:grid; gap:2px; } .leave-overview small,.section-help { color:var(--muted); font-size:.74rem; } .leave-overview strong { font-size:1rem; }
.entry-choices { margin:18px 0; display:grid; gap:9px; } .entry-choices button { width:100%; min-height:58px; }
.mobile-week-card { display:none; }
.section-head { min-height:58px; display:flex; align-items:start; justify-content:space-between; gap:20px; } .section-head h2 { margin:6px 0 0; font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.05; letter-spacing:-.04em; }
.month-nav { display:flex; gap:7px; } .month-nav a { min-width:45px; min-height:45px; padding:0 10px; display:grid; place-items:center; color:#d8e3ea; background:#081118; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-weight:800; }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); } .weekdays { margin-top:18px; color:#71818d; text-align:center; font-size:.72rem; } .weekdays b { padding:10px; }
.days { border-top:1px solid var(--line); border-left:1px solid var(--line); }
.day { position:relative; min-height:112px; padding:10px; overflow:hidden; background:rgba(6,11,16,.45); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.day.outside { opacity:.32; } .day.today { background:rgba(0,185,238,.075); box-shadow:inset 0 0 0 1px var(--cyan); } .day time { display:block; margin-bottom:8px; color:#9ba9b3; font-size:.75rem; font-weight:800; }
.day.special-day.holiday,.day.special-day.rest_day { background:rgba(255,121,0,.07); } .day.special-day.workday { background:rgba(0,185,238,.055); }
.special-day-label { display:block; overflow:hidden; color:#ffb26d; font-size:.62rem; font-weight:800; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.day-add { position:absolute; right:3px; top:3px; width:44px; height:44px; color:#8ea0ab; background:transparent; border:0; border-radius:50%; font-size:1.2rem; } .day-add:hover { color:#001018; background:var(--cyan); }
.day-summary { width:100%; min-height:34px; margin:3px 0; padding:5px 7px; overflow:hidden; color:#fff; background:color-mix(in srgb,var(--entry-color) 22%,#071017); border:0; border-left:3px solid var(--entry-color); border-radius:5px; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; font-weight:850; }.day-summary:hover { background:color-mix(in srgb,var(--entry-color) 34%,#071017); }
.calendar-legend { margin:16px 0 6px; display:flex; flex-wrap:wrap; gap:8px 16px; color:#aebbc4; font-size:.7rem; font-weight:750; } .calendar-legend span { display:flex; align-items:center; gap:7px; } .calendar-legend span::before { width:10px; height:10px; content:""; border-radius:3px; background:var(--cyan); } .calendar-legend .leave::before { background:#2eba68; } .calendar-legend .pending::before { background:#f1c40f; } .calendar-legend .rejected::before { background:#ff6b6b; } .calendar-legend .sick::before { background:#995c31; } .calendar-legend .absence::before { background:#8e68ff; }
.calendar-legend .custom::before,.status-swatch { background:var(--status-color); }
.stack { min-width:0; display:grid; gap:17px; } .stack>* { min-width:0; } .stack.compact { gap:13px; } .check { grid-template-columns:auto 1fr; align-items:center; } .check input { width:24px; height:24px; min-height:24px; }
.delete-box { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .delete-box p { color:var(--muted); font-size:.82rem; }
.admin-section { margin-top:60px; padding:30px; scroll-margin-top:100px; } .admin-section>.section-head { align-items:center; }
.inline-form { display:flex; align-items:end; gap:8px; } .inline-form input { min-width:210px; }
.table-wrap { margin-top:24px; overflow-x:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:16px 13px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:#71818d; font-size:.66rem; letter-spacing:.12em; } td { color:#bdc9d1; font-size:.84rem; } td a { color:#e9f6fb; text-underline-offset:4px; }
.allowance { display:flex; gap:6px; } .allowance input { width:80px; height:42px; min-height:42px; } .allowance button { min-height:42px; color:#dce9ef; background:transparent; border:1px solid var(--line); }
.admin-grid { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:18px; scroll-margin-top:100px; } .settings-card>p { color:var(--muted); }
.location-list { margin:22px 0 0; padding:0; list-style:none; } .location-list li { min-height:56px; display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); } .location-list form { margin-left:auto; } .location-list .ghost { min-height:38px; }
.dot { width:9px; height:9px; background:#54616a; border-radius:50%; } .dot.on { background:var(--cyan); box-shadow:0 0 12px rgba(0,185,238,.7); }
footer { padding:30px; color:#687782; border-top:1px solid var(--line); text-align:center; font-size:.73rem; letter-spacing:.08em; }
.auth-page { display:grid; place-items:center; background:linear-gradient(rgba(2,6,10,.34),rgba(2,6,10,.34)),url('auth-background.png') center/cover fixed no-repeat; }
.auth-shell { width:min(430px,calc(100% - 32px)); min-height:100dvh; display:grid; align-items:center; }
.auth-card { padding:clamp(26px,4vw,40px); background:rgba(5,10,15,.86); border:1px solid rgba(255,255,255,.14); border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.56); backdrop-filter:blur(18px); }
.auth-brand { margin-bottom:24px; display:grid; text-align:center; line-height:1.15; } .auth-brand strong { font-size:1.6rem; letter-spacing:-.03em; } .auth-brand span { margin-top:6px; color:var(--cyan); font-size:.78rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.auth-brand img { width:104px; height:80px; margin:0 auto 12px; object-fit:contain; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.approval-row { min-height:72px; padding:10px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); } .approval-row>span { display:grid; } .approval-row small { color:var(--muted); } .approval-actions,.approve-form { display:flex; align-items:center; gap:14px; } .reject-box { position:relative; } .reject-box summary { min-height:50px; padding:0 18px; display:grid; place-items:center; color:#ffd3d3; border:1px solid rgba(255,107,107,.45); border-radius:8px; font-weight:850; cursor:pointer; list-style:none; } .reject-box form { position:absolute; z-index:5; right:0; top:58px; width:min(340px,80vw); padding:18px; display:grid; gap:14px; background:#0c1219; border:1px solid rgba(255,107,107,.45); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.45); } textarea { width:100%; min-height:110px; padding:12px 14px; resize:vertical; color:#fff; background:#071017; border:1px solid rgba(255,255,255,.18); border-radius:8px; font:inherit; } textarea:focus { border-color:var(--cyan); outline:none; box-shadow:0 0 0 3px rgba(0,185,238,.15); }
.tabs { margin:0 0 30px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); } .tabs button { min-height:58px; color:#81909b; background:transparent; border:0; border-bottom:2px solid transparent; font-size:1rem; font-weight:850; } .tabs button.active { color:#fff; border-color:var(--cyan); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .form-grid .wide { grid-column:1/-1; } .form-heading { margin-bottom:28px; } .form-heading small { color:var(--cyan); font-weight:900; letter-spacing:.15em; } .form-heading h2 { margin:8px 0 0; font-size:2rem; } .form-heading p { color:var(--muted); }
.tab-panel[hidden] { display:none; }
.auth-card input { height:58px; min-height:58px; padding-inline:18px; background:rgba(2,7,11,.84); border-color:rgba(255,255,255,.18); font-size:1rem; }
.auth-card input::placeholder { color:#8998a4; opacity:1; }
.auth-card .primary { min-height:58px; margin-top:4px; font-size:1rem; }
.password-rules { margin:-8px 0 0; color:var(--muted); font-size:.72rem; line-height:1.4; }
.remember-option { justify-self:start; }
.compact-button { min-height:40px; padding:0 12px; font-size:.76rem; }
.button-link { min-height:50px; padding:0 18px; display:inline-grid; place-items:center; border-radius:8px; text-decoration:none; font-weight:850; }
.absence-dialog { width:min(460px,calc(100% - 28px)); padding:24px; color:var(--text); background:#0c1219; border:1px solid rgba(255,255,255,.18); border-radius:14px; box-shadow:0 28px 90px rgba(0,0,0,.72); }.absence-dialog::backdrop { background:rgba(0,4,8,.76); backdrop-filter:blur(5px); }.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:18px; }.dialog-head small { color:var(--cyan); font-size:.66rem; font-weight:900; letter-spacing:.16em; }.dialog-head h2 { margin:5px 0 0; }.dialog-close { width:44px; min-height:44px; padding:0; font-size:1.5rem; }.absence-dialog ul { margin:20px 0; padding:0; list-style:none; }.absence-dialog li { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); }.absence-dialog li span { color:var(--muted); font-size:.78rem; }.absence-dialog>form:last-child .primary { width:100%; }
.calendar-dialog li>div { min-width:0; display:grid; gap:5px; }.calendar-dialog li strong,.calendar-dialog li span { overflow-wrap:anywhere; }.calendar-dialog li .compact-button { flex:0 0 auto; }
.status-page .welcome { margin-bottom:28px; }.status-layout { margin-top:0; }.status-list { margin:12px 0 0; padding:0; list-style:none; }.status-list li { min-height:56px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; border-top:1px solid var(--line); }.status-list li small,.status-list li code,.empty-state { color:var(--muted); }.status-swatch { width:16px; height:16px; border-radius:5px; box-shadow:0 0 0 1px rgba(255,255,255,.16); }.custom-status-list li { grid-template-columns:auto minmax(120px,1fr) auto auto; }.status-actions { display:flex; gap:8px; }.status-actions form { margin:0; }.status-actions .ghost,.status-actions .danger { min-height:40px; }.restore-defaults { margin-top:18px; }.restore-defaults summary { color:var(--muted); cursor:pointer; font-size:.78rem; font-weight:750; }.settings-card input[type="color"] { padding:5px; cursor:pointer; }
.default-status-tools { display:flex; align-items:center; gap:8px; }.edit-default { position:relative; }.edit-default>summary { min-height:40px; padding:0 12px; display:grid; place-items:center; color:#dff8ff; border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:.76rem; font-weight:800; list-style:none; }.edit-default>form { width:min(320px,calc(100vw - 40px)); padding:14px; position:absolute; z-index:8; top:46px; right:0; display:grid; gap:10px; background:#0c1219; border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); }.edit-default label { display:grid; gap:5px; color:var(--muted); font-size:.7rem; }.edit-default input { min-width:0; }
.overview-page .welcome { align-items:center; }.view-switch { display:flex; padding:4px; background:#081118; border:1px solid var(--line); border-radius:10px; }.view-switch a { min-width:92px; min-height:44px; display:grid; place-items:center; color:var(--muted); border-radius:7px; text-decoration:none; font-size:.82rem; font-weight:850; }.view-switch a.active { color:#001018; background:var(--cyan); }.filter-card { margin:30px 0 16px; padding:18px; display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)) auto auto; align-items:end; gap:12px; background:linear-gradient(145deg,rgba(14,23,32,.98),rgba(7,12,17,.98)); border:1px solid var(--line); border-radius:14px; }.filter-card .button-link { min-height:52px; }.export-button { min-height:52px; padding:0 16px; color:#dff8ff; background:rgba(0,185,238,.1); border:1px solid rgba(0,185,238,.38); border-radius:8px; font-weight:850; }.overview-stats { margin:16px 0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.overview-stats article { min-height:92px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(12,18,25,.82); border:1px solid var(--line); border-radius:10px; }.overview-stats small { color:#73838f; font-size:.61rem; font-weight:900; letter-spacing:.11em; }.overview-stats strong { font-size:1.65rem; }.overview-stats strong span { color:var(--muted); font-size:.75rem; }.overview-week { margin-top:18px; overflow:hidden; background:linear-gradient(145deg,rgba(14,23,32,.98),rgba(7,12,17,.98)); border:1px solid var(--line); border-radius:14px; }.week-heading { min-height:92px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }.week-heading small { color:var(--cyan); font-size:.63rem; font-weight:900; letter-spacing:.14em; }.week-heading h2 { margin:4px 0 0; font-size:1.4rem; }.week-heading>strong { color:var(--muted); font-size:.78rem; }.overview-table-wrap { overflow-x:auto; }.overview-table th,.overview-table td { padding:15px 18px; }.overview-table td:first-child { display:grid; }.overview-table td:first-child small { color:var(--muted); font-size:.68rem; }.status-badge { display:inline-flex; align-items:center; gap:8px; color:#eaf5fa; font-size:.73rem; font-weight:800; }.status-badge::before { width:10px; height:10px; content:""; flex:0 0 auto; background:var(--status-color); border-radius:3px; }.empty-overview { margin-top:18px; text-align:center; }.empty-overview p { color:var(--muted); }
.team-page .welcome { align-items:center; }.month-filter { min-width:220px; }.team-stats { margin-top:30px; }.team-invite { margin-top:18px; }.team-invite .inline-form { max-width:620px; }.team-actions { display:flex; align-items:center; gap:7px; }.team-actions form { margin:0; }.team-table { min-width:1050px; }.calendar-page .detailed-calendar { margin-top:30px; }.calendar-details { margin-top:24px; }.detail-empty { padding:24px; text-align:center; }.mobile-menu a.active { color:#fff; background:rgba(0,185,238,.12); }
.invite-form { margin-top:18px; display:grid; grid-template-columns:2fr 1fr 1fr auto; align-items:end; gap:12px; }
.terms-form { display:flex; align-items:end; gap:7px; } .terms-form label { gap:3px; } .terms-form label span { font-size:.66rem; } .terms-form input { width:96px; height:42px; min-height:42px; } .terms-form button { min-height:42px; color:#dce9ef; background:transparent; border:1px solid var(--line); border-radius:7px; }
.special-day-form { margin-top:18px; display:grid; grid-template-columns:1fr 2fr 1.4fr auto; align-items:end; gap:12px; }
.special-day-list { margin:22px 0 0; padding:0; list-style:none; } .special-day-list li { min-height:62px; display:grid; grid-template-columns:120px 1fr auto auto; align-items:center; gap:14px; border-top:1px solid var(--line); } .special-day-list time { color:var(--muted); font-size:.78rem; } .day-type { padding:5px 8px; border-radius:6px; color:#ffcf9f; background:rgba(255,121,0,.1); font-size:.7rem; font-weight:800; } .day-type.workday { color:#b8f2ff; background:rgba(0,185,238,.1); }
@media (max-width:1050px) { .stats { grid-template-columns:1fr 1fr; } .workspace { grid-template-columns:1fr; } .quick-card { position:static; } .admin-grid { grid-template-columns:1fr; } .auth-shell { padding:70px 0; }.filter-card { grid-template-columns:repeat(2,1fr); }.overview-stats { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) {
    body { font-size:16px; } .topbar { min-height:70px; padding:0 14px; gap:8px; } .brand img { width:56px; height:44px; } .brand span,.topbar nav { display:none; }.mobile-menu { display:block; }
    .app-shell { width:min(100% - 24px,560px); padding-top:34px; } .welcome { align-items:stretch; flex-direction:column; } .person-picker { min-width:0; }
    .stats { grid-template-columns:1fr 1fr; gap:8px; } .stats article { min-height:105px; padding:17px; } .stats strong { font-size:1.55rem; }
    .workspace>.calendar-card { display:none; } .mobile-week-card { padding:17px; display:block; background:linear-gradient(145deg,rgba(14,23,32,.98),rgba(7,12,17,.98)); border:1px solid var(--line); border-radius:14px; } .quick-card { order:-1; } .calendar-card { padding:12px; } .quick-card,.settings-card,.admin-section { min-width:0; padding:17px; } .quick-card input,.quick-card select { height:56px; min-height:56px; } .quick-card input[type="date"] { display:block; inline-size:100%; min-inline-size:0; -webkit-appearance:none; appearance:none; } .quick-card .check input { width:24px; height:24px; min-height:24px; } .mobile-week-list { margin-top:12px; display:grid; gap:8px; } .mobile-week-list article { padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; background:rgba(6,11,16,.52); border:1px solid var(--line); border-radius:9px; } .mobile-day-heading { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; } .mobile-day-heading time { display:flex; gap:9px; } .mobile-day-heading time span,.empty-day { color:var(--muted); font-size:.76rem; } .mobile-day-entries { min-width:0; } .mobile-day-entries .day-summary { width:auto; min-height:34px; margin:2px; padding:5px 8px; border-left:3px solid var(--entry-color); border-radius:5px; font-size:.72rem; } .mobile-day-add { position:static; width:auto; min-width:76px; height:44px; padding:0 10px; color:#dff8ff; border:1px solid var(--line); border-radius:7px; font-size:.74rem; font-weight:850; } .weekdays { margin-top:12px; display:grid; font-size:.65rem; } .weekdays b { padding:7px 2px; } .days { grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); gap:0; }
    .day { min-width:0; min-height:70px; padding:5px 3px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; } .day.outside { display:block; opacity:.18; } .day.outside>* { visibility:hidden; } .day time { margin-bottom:4px; font-size:.7rem; } .day-add { width:30px; height:30px; right:0; top:0; font-size:.95rem; } .day-summary { width:24px; min-height:24px; margin:2px 1px; padding:0; border:0; border-radius:50%; text-align:center; font-size:.66rem; }.day-summary span { display:none; }
    .admin-section>.section-head,.inline-form { align-items:stretch; flex-direction:column; } .inline-form input { min-width:0; }
    .approval-row,.approval-actions,.approve-form { align-items:stretch; flex-direction:column; padding:14px 0; } .reject-box form { position:static; width:100%; margin-top:8px; }
    .custom-status-list li { grid-template-columns:auto 1fr auto; padding:10px 0; }.status-actions { grid-column:1/-1; }.status-actions form,.status-actions button { flex:1; width:100%; }.default-status-list li,.restore-defaults li { grid-template-columns:auto 1fr; }.default-status-tools { grid-column:1/-1; align-items:stretch; }.default-status-tools>form,.default-status-tools button { flex:1; width:100%; }.edit-default { flex:1; }.edit-default>summary { width:100%; }.edit-default>form { position:fixed; top:50%; right:14px; left:14px; width:auto; transform:translateY(-50%); }
    .overview-page .welcome { align-items:stretch; }.view-switch a { flex:1; }.filter-card { grid-template-columns:1fr; padding:15px; }.overview-stats { grid-template-columns:1fr 1fr; gap:8px; }.overview-stats article { min-height:84px; padding:14px; }.week-heading { min-height:80px; padding:16px; }.week-heading h2 { font-size:1.15rem; }.overview-table thead { display:none; }.overview-table,.overview-table tbody,.overview-table tr,.overview-table td { display:block; width:100%; }.overview-table tr { padding:12px 16px; border-bottom:1px solid var(--line); }.overview-table td { min-height:38px; padding:7px 0; display:flex!important; align-items:center; justify-content:space-between; gap:16px; border:0; white-space:normal; text-align:right; }.overview-table td::before { content:attr(data-label); color:#72828e; font-size:.66rem; font-weight:850; letter-spacing:.08em; text-align:left; text-transform:uppercase; }.overview-table td:first-child { flex-direction:row; }.overview-table td:first-child small { margin-left:auto; }.status-badge { max-width:65%; justify-content:flex-end; text-align:right; }
    .team-page .welcome { align-items:stretch; }.month-filter { min-width:0; }.invite-form,.special-day-form { grid-template-columns:1fr; }.team-page .table-wrap { overflow:visible; }.team-table { min-width:0; }.team-table thead { display:none; }.team-table,.team-table tbody,.team-table tr,.team-table td { display:block; width:100%; }.team-table tr { margin:12px 0; padding:12px 14px; background:rgba(12,18,25,.82); border:1px solid var(--line); border-radius:10px; }.team-table td { min-height:40px; padding:8px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; white-space:normal; text-align:right; }.team-table td::before { content:attr(data-label); color:#72828e; font-size:.66rem; font-weight:850; letter-spacing:.06em; text-align:left; text-transform:uppercase; }.terms-form { max-width:65%; flex-wrap:wrap; justify-content:flex-end; }.terms-form input { width:82px; }.team-actions { max-width:65%; align-items:stretch; flex-direction:column; }.team-actions button { width:100%; }.special-day-list li { padding:13px 0; grid-template-columns:1fr auto; }.special-day-list li strong { grid-column:1/-1; }.calendar-page .detailed-calendar { margin-top:22px; }
    .auth-page { background-position:center; background-attachment:scroll; } .auth-shell { width:min(100% - 24px,430px); } .auth-card { padding:24px; } .form-grid { grid-template-columns:1fr; } .form-grid label,.form-grid .wide { grid-column:1; }
}
.company-switch { max-width:230px; min-width:130px; } .company-switch select { height:44px; min-height:44px; }
.app-shell>.quick-card { position:static; margin-top:28px; } .app-shell>.quick-card .entry-choices { grid-template-columns:1fr 1fr; } .app-shell>.quick-card #entry-form { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; } .app-shell>.quick-card #work-fields { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); } .workspace { grid-template-columns:1fr; }
.bulk-toolbar { padding:18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
@media(max-width:720px) { .topbar { flex-wrap:wrap; padding-block:8px; } .company-switch { order:3; max-width:none; width:100%; } .app-shell>.quick-card #entry-form,.app-shell>.quick-card #work-fields { grid-template-columns:1fr; } .leave-overview { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
.profile-menu{position:relative;min-width:120px}.profile-menu summary,.admin-record summary{cursor:pointer;padding:14px;font-weight:700}.profile-menu>div{position:absolute;right:0;top:100%;z-index:50;min-width:180px;padding:12px;background:#111b23;border:1px solid #536271;border-radius:12px;box-shadow:0 12px 35px #0008}.profile-menu a{display:block;padding:12px}.profile-menu button{width:100%}.profile-menu summary:focus-visible,.admin-record summary:focus-visible{outline:2px solid #00b9ee;outline-offset:3px}.company-switch:has(select:empty){display:none}.admin-record{margin-block:16px}.admin-record form{margin-block:20px}
.location-list li:has(details){justify-content:space-between;align-items:start;padding-block:14px;flex-wrap:wrap}.location-list li>span{overflow-wrap:anywhere}.location-list details{max-width:100%}.location-list summary{cursor:pointer;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:8px}.location-list details form{margin-top:12px}.location-list summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.app-shell>.quick-card .entry-choices{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(min-width:721px) and (max-width:1250px){.topbar nav{display:none}.mobile-menu{display:block}}
/* Company and status management reuse native forms and disclosure controls. */
.company-details { margin-top: 16px; }
.company-details > summary { cursor: pointer; padding: 8px 0; line-height: 1.8; overflow-wrap: anywhere; }
.company-details > summary:focus-visible { outline: 2px solid var(--accent, #00b9ee); outline-offset: 4px; }
.company-details-body { margin-top: 20px; }
.unified-status-list { list-style: none; padding: 0; }
.unified-status-list > li { padding: 20px 0; border-bottom: 1px solid #334155; }
.status-edit-row { display: grid; grid-template-columns: minmax(140px, 1fr) 80px auto minmax(200px, 1fr); align-items: end; gap: 16px; }
.status-edit-row input[type="color"] { width: 100%; height: 44px; padding: 4px; }
.status-edit-row .check { align-self: center; }
.status-visibility-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 760px) { .status-edit-row { grid-template-columns: minmax(0, 1fr) 70px; } .status-edit-row .check,.status-edit-row>span { grid-column: 1 / -1; } }

/* Keep long names, input controls and nested cards inside small screens. */
.topbar>* { min-width:0; }
.company-switch label { grid-template-columns:minmax(0,1fr); }
.company-switch select { overflow:hidden; text-overflow:ellipsis; }
.brand span { max-width:200px; overflow-wrap:anywhere; }
.profile-menu { max-width:230px; }
.profile-menu>summary { overflow-wrap:anywhere; }
.mobile-menu:not([open])>div,.profile-menu:not([open])>div { display:none; }
.mobile-menu>div,.profile-menu>div { max-width:calc(100vw - 28px); }
.app-shell :is(h1,h2,h3,p,label) { overflow-wrap:anywhere; }
.form-grid>* { min-width:0; }
.dialog-head>div { min-width:0; }
.dialog-head>form { flex-shrink:0; }
@media(max-width:720px) {
    input,select,textarea { font-size:16px; }
    .mobile-menu>div { left:0; right:auto; }
    .profile-menu { min-width:0; max-width:calc(100% - 145px); }
    .profile-menu>summary { padding:10px 6px; font-size:.8rem; }
    .company-details-body>.settings-card,.company-details-body>.admin-section { padding:12px; }
    .section-head { flex-wrap:wrap; }
    .compact-button { min-height:44px; }
}
/* Monthly team grid: scroll the days, keep names and dates visible. */
.month-matrix { min-width:0; }
.matrix-filters { margin:22px 0 14px; display:grid; grid-template-columns:minmax(160px,1fr) auto minmax(150px,1fr) minmax(200px,1.4fr); gap:12px; align-items:end; }
.matrix-scroll { max-width:100%; max-height:70vh; overflow:auto; border:1px solid var(--line); border-radius:10px; overscroll-behavior-x:contain; }
.matrix-table { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; }
.matrix-table th,.matrix-table td { min-width:48px; width:48px; padding:3px; text-align:center; border-right:1px solid var(--line); }
.matrix-table thead th { position:sticky; top:0; z-index:2; background:#111c27; color:#e0eaf1; letter-spacing:0; font-size:.8rem; height:58px; }
.matrix-table th small { display:block; font-size:.65rem; }
.matrix-table .matrix-name { position:sticky; left:0; z-index:1; width:170px; min-width:170px; max-width:170px; padding:12px; background:#111c27; text-align:left; white-space:normal; overflow-wrap:anywhere; letter-spacing:0; color:#e0eaf1; font-size:.8rem; }
.matrix-table thead .matrix-name { z-index:3; }
.matrix-table .weekend { background:#1d2935; }
.matrix-table .holiday,.matrix-table .rest_day { background:#442715; box-shadow:inset 0 3px #ff7900; }
.matrix-table .workday { background:#12313e; box-shadow:inset 0 3px #00b9ee; }
.matrix-table .matrix-today { outline:1px solid var(--cyan); outline-offset:-1px; }
.matrix-cell { position:relative; display:grid; place-items:center; isolation:isolate; width:44px; min-height:44px; padding:2px; border:0; border-radius:5px; background:transparent; color:#fff; font-size:.7rem; }
.matrix-colors { position:absolute; inset:0; display:flex; overflow:hidden; border-radius:5px; z-index:-1; }
.matrix-colors i { flex:1; }
.matrix-cell strong { padding:2px 3px; background:#05080ce6; border-radius:4px; white-space:nowrap; }
.matrix-empty { color:#a7b7c4; }
.matrix-cell.matrix-muted { opacity:.18; }
.matrix-cell:focus-visible { outline:3px solid white; outline-offset:-3px; opacity:1; }
.calendar-dialog li span { white-space:pre-line; }
.calendar-dialog li { padding-block:14px; }
.absence-dialog { max-height:85vh; max-height:85dvh; overflow:auto; }
@media(max-width:760px) {
    .matrix-filters { grid-template-columns:minmax(0,1fr) auto; }
    .matrix-filters label:nth-last-child(-n+2) { grid-column:1/-1; }
    .matrix-table .matrix-name { width:115px; min-width:115px; max-width:115px; padding:8px; }
}
.admin-enter-company { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:20px; border-bottom:1px solid var(--line); }
.admin-enter-company small { flex-basis:100%; color:var(--muted); }
.admin-support-banner { padding:16px max(16px,calc((100vw - 1380px)/2)); display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:2px solid #ffb454; background:#302314; color:#fff; }
.admin-support-banner p { margin:5px 0 0; font-size:.8rem; }
.admin-support-banner form { flex-shrink:0; }
@media(max-width:720px) { .admin-support-banner { flex-direction:column; align-items:stretch; } .admin-enter-company>* { max-width:100%; } }