:root { color-scheme:light; --ink:#303434; --muted:#66737a; --line:#dfe6e9; --paper:#f8fafa; --card:#fff; --green:#00a0e1; --green-dark:#007eae; --green-soft:#eefaff; --red:#b4233f; --red-soft:#fff0f3; --amber:#8a6116; --amber-soft:#fff7e1; --blue:#315c82; --shadow:0 1px 2px rgba(48,52,52,.05),0 14px 34px rgba(48,52,52,.08); font-family:Poppins,"Avenir Next","Century Gothic",ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select { font:inherit; }
button,.button { min-height:42px; border:1px solid var(--line); border-radius:9px; background:#fff; padding:.6rem .9rem; color:var(--ink); cursor:pointer; font-weight:650; }
button:hover,.button:hover { border-color:#94a69d; text-decoration:none; }
button:disabled { cursor:not-allowed; opacity:.5; }
.primary { background:var(--green); color:#fff; border-color:var(--green); }
.danger { color:var(--red); border-color:#e8bcbc; }
.wide { width:100%; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1800px)/2)); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:.7rem; align-items:center; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand span:last-child { display:grid; }
.brand small { color:var(--muted); font-size:.72rem; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--green); color:#fff; font-weight:800; }
.brand-mark.large { width:54px; height:54px; margin:auto; font-size:1.35rem; }
nav { display:flex; gap:1rem; align-items:center; }
nav a,nav .link-button { color:var(--muted); font-weight:650; }
nav a[aria-current="page"] { color:var(--green); }
nav form { margin:0; }
.link-button { min-height:auto; border:0; padding:.25rem; background:transparent; }
.page { max-width:1800px; margin:auto; padding:32px 24px 64px; }
.auth-page { min-height:100vh; display:grid; place-items:center; }
.login-card { width:min(440px,100%); background:var(--card); padding:42px; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); text-align:center; }
.login-card h1 { margin:.35rem 0; }
.stack-form { display:grid; gap:1rem; margin-top:1.5rem; text-align:left; }
label { color:#39453f; font-size:.9rem; font-weight:650; }
input,select { display:block; width:100%; min-height:42px; margin-top:.35rem; border:1px solid #bdc9c2; border-radius:8px; background:#fff; padding:.55rem .7rem; color:var(--ink); }
input:focus,select:focus,button:focus,a:focus { outline:3px solid rgba(30,106,74,.2); outline-offset:2px; }
.privacy-note { margin-top:1.5rem; color:var(--muted); font-size:.82rem; }
.eyebrow { margin:0 0 .25rem; color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.muted { color:var(--muted); }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin-bottom:24px; }
.heading-actions { display:flex; align-items:center; gap:.75rem; }
.reminder-form { display:flex; align-items:end; gap:.65rem; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--card); }
.reminder-form label { max-width:300px; }
.reminder-form select { min-width:260px; }
.page-heading h1 { margin:.1rem 0; font-size:clamp(1.8rem,4vw,2.65rem); letter-spacing:-.035em; }
.exclusive { font-size:.78rem; }
.toolbar,.panel,.team-card,.summary-grid article { background:var(--card); border:1px solid var(--line); border-radius:13px; }
.toolbar { display:flex; justify-content:space-between; gap:1rem; padding:14px; margin-bottom:20px; }
.week-nav,.inline-form,.filter-form,.action-row { display:flex; align-items:end; gap:.6rem; }
.filter-form label { min-width:180px; }
.filter-field { position:relative; min-width:220px; }
.filter-label { display:block; margin-bottom:.35rem; color:#39453f; font-size:.9rem; font-weight:650; }
.multi-picker { position:relative; }
.multi-picker summary { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:.55rem .7rem; border:1px solid #bdc9c2; border-radius:2px; background:#fff; color:var(--ink); cursor:pointer; list-style:none; font-size:.88rem; }
.multi-picker summary::-webkit-details-marker { display:none; }
.multi-picker summary::after { content:"⌄"; margin-left:1rem; color:var(--green-dark); font-size:1rem; }
.multi-picker[open] summary { border-color:var(--green); outline:3px solid rgba(0,160,225,.16); }
.multi-picker-panel { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:max-content; min-width:100%; max-width:min(380px,calc(100vw - 32px)); max-height:320px; overflow:auto; padding:8px; border:1px solid #cbd7da; background:#fff; box-shadow:0 18px 45px rgba(48,52,52,.2); }
.picker-option { display:flex; align-items:flex-start; gap:.55rem; min-width:260px!important; padding:.6rem .55rem; color:var(--ink); cursor:pointer; font-size:.84rem; }
.picker-option:hover { background:var(--green-soft); }
.picker-option input { flex:0 0 auto; width:17px; min-height:17px; margin:.1rem 0 0; }
.picker-option span { display:grid; }
.picker-option small { color:var(--muted); font-size:.72rem; font-weight:500; }
.picker-clear { width:100%; min-height:34px; margin-bottom:5px; padding:.4rem .55rem; border:0; background:var(--green-soft); color:var(--green-dark); text-align:left; font-size:.78rem; }
.picker-empty { margin:.5rem; color:var(--muted); font-size:.82rem; }
.filter-form .checkbox-filter { min-width:auto; display:flex; align-items:center; gap:.5rem; padding-bottom:.65rem; white-space:nowrap; }
.checkbox-filter input { width:18px; min-height:18px; margin:0; }
.inline-form input { width:145px; }
.icon-button { display:grid; place-items:center; min-width:42px; min-height:42px; border:1px solid var(--line); border-radius:9px; }
.text-link { margin:auto .5rem; }
.row-actions { display:flex; align-items:center; gap:.75rem; }
.mail-button { display:inline-flex; align-items:center; min-height:32px; padding:.3rem .65rem; border:1px solid #b6dbc9; border-radius:7px; background:var(--green-soft); font-size:.8rem; font-weight:700; }
.mail-all-button { background:var(--green-soft); border-color:#b6dbc9; }
.notice { margin:0 0 18px; padding:13px 16px; border-radius:10px; border:1px solid; }
.notice.success { background:var(--green-soft); color:#125138; border-color:#b6dbc9; }
.notice.error { background:var(--red-soft); color:#7f2e2e; border-color:#edbaba; }
.notice.warning { background:var(--amber-soft); color:#6e4e12; border-color:#ead390; }
.sync-meta { color:var(--muted); font-size:.82rem; }
.summary-grid { display:grid; grid-template-columns:repeat(8,minmax(130px,1fr)); gap:12px; margin:20px 0 28px; }
.summary-grid article { padding:16px; display:grid; gap:.45rem; }
.summary-grid span { color:var(--muted); font-size:.78rem; }
.summary-grid strong { font-size:1.35rem; }
.team-card { margin:18px 0; overflow:hidden; box-shadow:0 3px 12px rgba(24,47,37,.03); }
.team-card>header,.panel>header { display:flex; justify-content:space-between; gap:1rem; padding:20px; border-bottom:1px solid var(--line); }
.team-card h2,.panel h2 { margin:.1rem 0; }
.team-totals { display:flex; gap:1.5rem; margin:0; }
.team-totals div { display:grid; align-content:center; }
.team-totals dt { color:var(--muted); font-size:.75rem; }
.team-totals dd { margin:.25rem 0 0; font-weight:750; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:14px 18px; border-bottom:1px solid #edf1ee; text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
tbody tr:last-child td { border-bottom:0; }
.subgroup-row th { background:#f1f6f3; color:var(--green); font-size:.78rem; }
.subgroup-row span { margin-left:.5rem; color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0; }
.source-day th { background:#f7faf8; color:var(--ink); font-size:.78rem; }
progress { width:90px; height:8px; border:0; border-radius:10px; overflow:hidden; vertical-align:middle; }
progress::-webkit-progress-bar { background:#e4e9e6; }
progress::-webkit-progress-value { background:var(--green); }
progress::-moz-progress-bar { background:var(--green); }
.progress-number { margin-left:.45rem; font-size:.8rem; }
.status { display:inline-flex; padding:.28rem .55rem; border-radius:99px; background:#edf1ef; color:#46524c; font-size:.75rem; font-weight:750; }
.status-fulfilled,.status-on-track { background:var(--green-soft); color:var(--green); }
.status-missing-hours,.status-behind-today { background:var(--red-soft); color:var(--red); }
.status-not-due-yet { background:#e9f0f7; color:var(--blue); }
.status-no-schedule,.status-no-data { background:var(--amber-soft); color:var(--amber); }
.status-absence { margin-left:.35rem; background:#eee9f8; color:#644b88; }
.negative { color:var(--red); }
.positive { color:var(--green); }
.empty-state { text-align:center; padding:50px 20px; background:#fff; border:1px dashed #b8c6be; border-radius:13px; }
.settings-grid { display:grid; grid-template-columns:minmax(320px,1fr) minmax(520px,2fr); gap:20px; }
.wide-panel { grid-column:1/-1; }
.panel { padding:20px; }
.panel>header { padding:0 0 18px; margin-bottom:18px; }
.definition-list { margin:0 0 18px; }
.definition-list div { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line); }
.definition-list dt { color:var(--muted); }
.definition-list dd { margin:0; font-weight:650; text-align:right; }
.action-row { margin-top:16px; }
.user-list { display:grid; gap:8px; }
.user-list>div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius:8px; }
.user-list small { color:var(--muted); }
.department-list { display:grid; gap:8px; margin-bottom:16px; }
.department-row { display:grid; grid-template-columns:auto minmax(180px,1fr) auto auto; gap:14px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:9px; }
.department-row input { width:18px; min-height:18px; margin:0; }
.department-row span { display:grid; font-size:.82rem; }
.department-row small { color:var(--muted); }
.department-row.inactive { opacity:.55; }
.employee-selection-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.employee-selection-row { display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:9px; }
.employee-selection-row input { width:18px; min-height:18px; margin:0; }
.employee-selection-row span { display:grid; font-size:.82rem; }
.employee-selection-row small,.employee-selection-row>span:last-child { color:var(--muted); }
.empty-inline { padding:28px; text-align:center; color:var(--muted); }
.back-link { display:inline-block; margin-bottom:20px; }
.detail-summary { grid-template-columns:repeat(5,1fr); }
.reminder-summary { grid-template-columns:repeat(4,1fr); }
.mail-person-known { display:none; }
.mail-person-missing { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin:10px 0; padding:14px; border:1px solid #ead390; border-radius:10px; background:var(--amber-soft); }
.mail-person-missing>div { display:grid; min-width:190px; margin-right:auto; }
.mail-person-missing small { color:var(--muted); }
.mail-person-missing label { display:flex; align-items:center; gap:.45rem; }
.mail-person-missing input { width:18px; min-height:18px; margin:0; }
.mail-person-excluded { opacity:.55; }
.disabled-link { pointer-events:none; opacity:.55; }
.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; }

/* INTOS application shell */
body { min-height:100vh; }
body::before { content:""; position:fixed; right:0; bottom:0; width:min(520px,55vw); height:310px; pointer-events:none; background:url('/static/intos-pattern-light.svg') repeat; background-size:288px 168px; opacity:.82; -webkit-mask-image:linear-gradient(135deg,transparent 8%,#000 78%); mask-image:linear-gradient(135deg,transparent 8%,#000 78%); }
body>header,body>main { position:relative; z-index:1; }
.topbar { position:relative; height:76px; overflow:hidden; background:#303434 url('/static/intos-pattern-dark.svg') repeat; background-size:288px 168px; border-bottom:4px solid var(--green); color:#fff; box-shadow:0 4px 18px rgba(48,52,52,.16); }
.brand { gap:1rem; color:#fff; }
.brand-lockup { display:inline-flex; flex-direction:column; line-height:1; }
.brand-lockup strong,.login-brand strong { font-size:1.25rem; font-weight:650; letter-spacing:.18em; }
.brand-lockup small,.login-brand small { margin-top:.3rem; color:var(--green); font-size:.56rem; font-weight:700; letter-spacing:.23em; text-transform:uppercase; }
.brand-product { padding-left:1rem; border-left:1px solid rgba(255,255,255,.22); color:#f3f6f7; font-size:.75rem; font-weight:650; line-height:1.25; }
.brand-product small { color:#aeb9bd; font-size:.62rem; font-weight:500; }
.topbar nav { align-self:stretch; gap:.25rem; }
.topbar nav a,.topbar nav .link-button { display:flex; align-items:center; height:100%; padding:0 1rem; color:#d9e0e2; border-radius:0; font-size:.86rem; }
.topbar nav a:hover,.topbar nav .link-button:hover { background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.topbar nav a[aria-current="page"] { background:var(--green); color:#fff; }
.topbar nav form { height:100%; }
.topbar .link-button { border:0; }
.page { position:relative; z-index:1; }
.page-heading h1 { color:var(--ink); font-weight:800; }
.eyebrow { color:var(--green-dark); }

button,.button,input,select,.toolbar,.panel,.team-card,.summary-grid article,.login-card,.notice,.empty-state,.reminder-form,.department-row,.employee-selection-row,.user-list>div,.mail-person-missing { border-radius:2px; }
button,.button { transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .15s; }
button:hover,.button:hover { border-color:var(--green); box-shadow:0 4px 12px rgba(48,52,52,.08); }
button:active,.button:active { transform:translateY(1px); }
.primary { background:var(--green); border-color:var(--green); color:#fff; }
.primary:hover { background:var(--green-dark); border-color:var(--green-dark); }
.mail-button,.mail-all-button { background:var(--green-soft); border-color:#b9e9f8; color:var(--green-dark); border-radius:2px; }
.mail-button:hover,.mail-all-button:hover { background:#d8f3fc; }
input:focus,select:focus,button:focus-visible,a:focus-visible { outline:3px solid rgba(0,160,225,.25); outline-offset:2px; }

.toolbar,.panel,.team-card,.summary-grid article,.login-card { box-shadow:var(--shadow); }
.panel,.team-card,.summary-grid article,.login-card { position:relative; overflow:hidden; }
.panel::after,.team-card::after,.summary-grid article::after,.login-card::after { content:""; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 22px 22px 0; border-color:transparent var(--green-soft) transparent transparent; pointer-events:none; }
.team-card>header,.panel>header { border-bottom-color:var(--line); }
.subgroup-row th { background:var(--green-soft); color:var(--green-dark); }
tbody tr:not(.subgroup-row):hover td { background:#fbfdfe; }
progress::-webkit-progress-value { background:var(--green); }
progress::-moz-progress-bar { background:var(--green); }
.status-fulfilled,.status-on-track { background:var(--green-soft); color:var(--green-dark); }
.positive { color:var(--green-dark); }

.notice { position:relative; padding:14px 18px 14px 22px; background:#fff; border-color:var(--line); box-shadow:0 8px 22px rgba(48,52,52,.07); }
.notice::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:currentColor; }
.notice.success { background:#f1fbff; color:var(--green-dark); border-color:#b9e9f8; }
.notice.error { background:#fff5f6; color:var(--red); border-color:#f1c5ce; }
.notice.warning { background:#fffaf0; color:var(--amber); border-color:#ecd9ab; }

.login-card { border-top:4px solid var(--green); }
.login-brand { display:inline-flex; flex-direction:column; margin:0 auto 1.6rem; padding:1rem 1.4rem; background:var(--ink); color:#fff; line-height:1; }

/* In-page confirmation dialog; no browser confirm/alert is used. */
.dialog-open { overflow:hidden; }
.confirm-layer[hidden] { display:none; }
.confirm-layer { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.confirm-backdrop { position:absolute; inset:0; background:rgba(28,33,34,.68); backdrop-filter:blur(2px); }
.confirm-dialog { position:relative; width:min(480px,100%); padding:26px; border:1px solid #cfd9dc; border-top:4px solid var(--red); background:#fff; box-shadow:0 24px 80px rgba(20,25,26,.3); outline:0; }
.confirm-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; background:var(--red-soft); color:var(--red); font-size:1.35rem; font-weight:800; }
.confirm-copy h2 { margin:.2rem 0 .6rem; font-size:1.35rem; }
.confirm-copy p:last-child { margin:.25rem 0; color:var(--muted); line-height:1.6; }
.confirm-actions { display:flex; justify-content:flex-end; gap:.7rem; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.danger-solid { background:var(--red); border-color:var(--red); color:#fff; }
.danger-solid:hover { background:#8e1931; border-color:#8e1931; }

.error-state { width:min(640px,100%); margin:clamp(40px,10vh,120px) auto; padding:clamp(28px,6vw,58px); border:1px solid var(--line); border-top:4px solid var(--green); background:#fff; box-shadow:var(--shadow); text-align:center; }
.error-code { margin-bottom:16px; color:#dfe9ec; font-size:clamp(4rem,14vw,8rem); font-weight:800; letter-spacing:-.08em; line-height:.8; }
.error-state h1 { margin:.3rem 0 .8rem; font-size:clamp(1.7rem,4vw,2.4rem); }
.error-state>p:not(.eyebrow) { max-width:480px; margin:.5rem auto; color:var(--muted); line-height:1.65; }
.error-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:26px; }
@media (max-width:1100px) { .summary-grid { grid-template-columns:repeat(4,1fr); } .settings-grid { grid-template-columns:1fr; } .toolbar { align-items:stretch; flex-direction:column; } .employee-selection-list { grid-template-columns:1fr; } }
@media (max-width:720px) { .topbar { height:auto; min-height:72px; padding:10px 14px; align-items:center; overflow:visible; } .topbar nav { align-self:center; flex-wrap:wrap; justify-content:flex-end; } .topbar nav a,.topbar nav .link-button { height:auto; min-height:40px; padding:.55rem .7rem; } .brand-product { display:none; } .brand small { display:block; } .page { padding:24px 14px 48px; } .page-heading { flex-direction:column; } .heading-actions,.reminder-form { width:100%; flex-direction:column; align-items:stretch; } .reminder-form label,.reminder-form select { max-width:none; min-width:0; } .filter-form,.week-nav { flex-wrap:wrap; align-items:end; } .filter-form>label,.filter-field { min-width:140px; flex:1; } .multi-picker-panel { position:fixed; top:auto; right:14px; bottom:14px; left:14px; width:auto; max-width:none; max-height:60vh; } .summary-grid,.detail-summary { grid-template-columns:repeat(2,1fr); } .team-card>header,.panel>header { flex-direction:column; } .team-totals { display:grid; grid-template-columns:1fr 1fr; } .department-row { grid-template-columns:auto 1fr; } .department-row span:nth-last-child(-n+2) { display:none; } .login-card { padding:28px 20px; } .confirm-actions { flex-direction:column-reverse; } .confirm-actions button { width:100%; } }