:root { --ink:#172128; --muted:#66737c; --line:#e5e9e8; --paper:#fff; --canvas:#f5f6f2; --green:#075c4c; --lime:#d4e859; --shadow:0 14px 45px rgba(23,33,40,.08); }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,Arial,sans-serif; font-size:14px; } button { font:inherit; } .app-shell { min-height:100vh; }
#blazor-error-ui { display:none; position:fixed; z-index:1000; right:1rem; bottom:1rem; max-width:420px; padding:1rem 3rem 1rem 1rem; border-radius:8px; background:#fff4ce; box-shadow:var(--shadow); color:#5b4300; }
#blazor-error-ui .dismiss { position:absolute; top:.65rem; right:.8rem; cursor:pointer; }
.loading-progress { display:block; width:5rem; height:5rem; margin:20vh auto 1rem; }
.loading-progress circle { fill:none; stroke:#dfe7e4; stroke-width:8; transform-origin:50% 50%; transform:rotate(-90deg); }
.loading-progress circle:last-child { stroke:var(--green); stroke-dasharray:calc(3.141 * var(--blazor-load-percentage, 0%)), 500%; transition:stroke-dasharray .1s ease-in-out; }
.app-header { height:72px; padding:0 32px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; gap:11px; align-items:center; color:var(--ink); font-size:18px; letter-spacing:-.5px; text-decoration:none; } .brand strong { font-weight:750; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; font-weight:800; border-radius:7px; background:var(--green); } .header-actions { display:flex; align-items:center; gap:18px; } .environment-label { color:var(--muted); } .user-avatar,.person-initials { display:grid; place-items:center; border-radius:50%; background:#dff0ea; color:var(--green); font-weight:700; } .user-avatar { width:34px; height:34px; font-size:11px; }
.app-body { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:calc(100vh - 72px); }.app-nav { padding:28px 16px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; }.nav-links { display:grid; gap:5px; }.nav-link { min-height:43px; display:flex; align-items:center; gap:11px; border-radius:8px; padding:0 12px; color:#57656e; text-decoration:none; font-weight:600; }.nav-link .rzi { font-size:20px; }.nav-link.active,.nav-link:hover { color:var(--green); background:#ebf4f0; }.nav-footnote { margin-top:auto; padding:14px; border-radius:8px; background:#f6f7f3; color:var(--muted); display:flex; gap:8px; font-size:12px; line-height:1.45; }.nav-footnote .rzi { color:var(--green); font-size:17px; }.app-main { max-width:1580px; width:100%; margin:0 auto; padding:42px 44px 60px; overflow:hidden; }
.planner-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-bottom:30px; }.eyebrow { display:block; color:var(--green); font-size:10px; font-weight:800; letter-spacing:1.45px; }.planner-heading h1 { margin:7px 0 6px; font-size:33px; line-height:1.1; letter-spacing:-1.25px; }.planner-heading p { margin:0; color:var(--muted); max-width:640px; font-size:15px; }.role-pill { padding:9px 12px; background:#fff; border:1px solid var(--line); border-radius:99px; color:var(--green); display:flex; gap:6px; align-items:center; white-space:nowrap; font-weight:650; }.role-pill .rzi { font-size:18px; }
.planner-toolbar { background:#fff; border:1px solid var(--line); padding:10px 14px; margin-bottom:16px; box-shadow:0 3px 12px rgba(30,40,40,.03); border-radius:10px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.week-controls { display:flex; align-items:center; gap:6px; flex:0 0 auto; }.week-label { margin-left:11px; font-size:15px; font-weight:750; }.schedule-filters { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; }.filter-group { display:grid; gap:3px; }.filter-label { color:#6d7980; font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }.filter-buttons { display:flex; gap:4px; flex-wrap:wrap; }.filter-button { min-height:28px; padding:0 9px; border:1px solid #d5ddda; border-radius:6px; background:#fff; color:#44525a; cursor:pointer; font-size:11px; font-weight:650; transition:background .15s,border-color .15s,color .15s; }.filter-button:hover { border-color:#91b7aa; background:#f1f7f4; }.filter-button.selected { border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 2px 5px rgba(7,92,76,.18); }.filter-hint { min-height:28px; display:flex; align-items:center; color:#8b969c; font-size:11px; font-style:italic; }.schedule-card,.summary-card { overflow:hidden; background:#fff; border-radius:11px; border:1px solid var(--line); box-shadow:var(--shadow); }.schedule-scroll,.summary-scroll { overflow:auto; }.week-grid,.summary-grid { width:100%; min-width:980px; border-collapse:collapse; }.week-grid th { height:68px; color:#6c7880; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }.week-grid th strong { display:block; margin-top:4px; color:var(--ink); font-size:13px; letter-spacing:0; text-transform:none; }.week-grid td,.week-grid th { border-bottom:1px solid var(--line); border-right:1px solid #edf0ef; }.person-column { text-align:left; width:225px; min-width:225px; padding:0 19px; }.person-column span { display:block; margin-top:3px; color:#859099; font-weight:500; text-transform:none; letter-spacing:0; }.week-grid tbody tr:last-child td { border-bottom:0; }.week-grid td { height:69px; padding:7px; }.week-grid td.person-column { display:flex; align-items:center; gap:10px; }.person-initials { flex:0 0 auto; width:32px; height:32px; font-size:10px; }.person-column strong { font-size:13px; }.person-column small { display:block; margin-top:2px; color:#849099; font-size:11px; }.presence-cell { width:100%; border:0; background:transparent; cursor:default; border-radius:7px; padding:7px; display:flex; align-items:center; gap:7px; min-width:130px; text-align:left; }.presence-cell.editable { cursor:pointer; }.presence-cell.editable:hover { background:#f0f5f2; }.presence-cell:disabled { color:var(--ink); opacity:1; }.status-icon { color:#fff; border-radius:5px; width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; }.status-icon .rzi { font-size:16px; }.presence-label { font-size:12px; line-height:1.15; }.comment-icon { margin-left:auto; color:#95a1a6; font-size:15px; }.legend { min-height:50px; padding:12px 20px; display:flex; gap:17px; align-items:center; flex-wrap:wrap; color:#647078; font-size:12px; }.legend span { display:flex; gap:6px; align-items:center; }.legend i { width:8px; height:8px; border-radius:50%; }.comment-legend { margin-left:auto; }.comment-legend .rzi { font-size:15px; }.team-group { align-self:flex-start; }
.mobile-week-cards,.mobile-summary-cards { display:none; }.role-assignment-list { max-height:160px; overflow:auto; border:1px solid var(--line); border-radius:7px; background:#fff; padding:5px 10px; margin:5px 0 17px; }.role-assignment-list label { display:flex; align-items:center; gap:9px; padding:7px 2px; cursor:pointer; font-size:13px; color:var(--ink); }.role-assignment-list input { width:16px; height:16px; accent-color:var(--brand); }
.summary-card { margin-top:28px; }.summary-title { display:flex; justify-content:space-between; align-items:end; padding:20px 22px 16px; }.summary-title h2 { margin:5px 0 0; font-size:19px; letter-spacing:-.5px; }.summary-title > span { color:var(--muted); font-size:12px; }.summary-grid th,.summary-grid td { border-top:1px solid var(--line); height:38px; padding:0 20px; text-align:center; }.summary-grid th { background:#fafbf9; color:#6b777e; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }.summary-grid th:first-child,.summary-grid td:first-child { width:225px; text-align:left; font-weight:600; }.available-row td { background:#eaf4ef; color:var(--green); font-weight:800!important; }
.sign-in-card { max-width:510px; margin:12vh auto; padding:38px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }.sign-in-card h1 { margin:8px 0; font-size:30px; letter-spacing:-1px; }.sign-in-card p { color:var(--muted); font-size:15px; line-height:1.55; margin-bottom:26px; }.sign-in-button { display:inline-flex; padding:11px 17px; border-radius:7px; background:var(--green); color:#fff; font-weight:700; text-decoration:none; }
.editor-backdrop { position:fixed; inset:0; z-index:50; background:rgba(19,29,34,.28); backdrop-filter:blur(2px); }.presence-editor { position:fixed; z-index:51; top:0; right:0; bottom:0; width:min(460px,100vw); padding:30px; overflow:auto; background:#fff; box-shadow:-20px 0 50px rgba(24,33,39,.16); }.editor-header { display:flex; justify-content:space-between; gap:15px; margin-bottom:28px; }.editor-header h2 { margin:6px 0 3px; font-size:24px; }.editor-header p { margin:0; color:var(--muted); }.presence-editor label { display:block; margin:24px 0 9px; font-size:12px; color:#48565e; font-weight:800; }.presence-editor label span { color:#849099; font-weight:500; }.status-choices,.location-choices { display:grid; gap:7px; }.status-choices button,.location-choices button { border:1px solid var(--line); background:#fff; min-height:43px; padding:8px 10px; display:flex; align-items:center; gap:9px; text-align:left; border-radius:7px; color:var(--ink); cursor:pointer; }.status-choices button.selected,.location-choices button.selected { border-color:var(--green); background:#edf6f2; color:var(--green); font-weight:700; }.status-choices i { width:25px; height:25px; display:grid; place-items:center; border-radius:5px; color:#fff; font-style:normal; }.status-choices .rzi { font-size:15px; }.location-choices { grid-template-columns:1fr 1fr; }.editor-actions { margin-top:28px; display:flex; justify-content:end; gap:9px; }.management-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.management-card { min-height:230px; padding:24px; }.management-card > .rzi { color:var(--green); font-size:28px; }.management-card h2 { margin:17px 0 8px; font-size:18px; }.management-card p { min-height:42px; color:var(--muted); line-height:1.45; }
.catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.catalog-card { min-height:0; }.catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }.catalog-heading > div { display:flex; align-items:center; gap:10px; }.catalog-heading .rzi { color:var(--green); font-size:25px; }.catalog-heading h2 { margin:0; }.catalog-status { display:flex; align-items:center; gap:8px; }.catalog-status i { display:grid; place-items:center; width:24px; height:24px; border-radius:5px; color:#fff; font-style:normal; }.catalog-status .rzi { font-size:15px; }
.catalog-actions { display:flex; gap:8px; }.import-note { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.45; }
.import-card { margin-top:18px; min-height:0; }.import-card p { color:var(--muted); line-height:1.45; }.import-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.import-file { margin:12px 0 0; font-size:12px; }.import-result { display:grid; gap:5px; margin-top:16px; padding:13px; border-radius:7px; background:#edf6f2; color:#155447; font-size:12px; }.import-result details { margin-top:4px; }.import-result ul { max-height:130px; overflow:auto; margin:8px 0 0; padding-left:18px; color:#57656e; }
@media(max-width:850px) { .app-body { grid-template-columns:1fr; }.app-nav { padding:8px 16px; border-right:0; border-bottom:1px solid var(--line); }.nav-links { grid-template-columns:1fr 1fr; }.nav-footnote { display:none; }.app-main { padding:28px 18px 45px; }.app-header { padding:0 18px; }.environment-label { display:none; }.planner-heading { display:none; }.planner-toolbar,.schedule-filters { align-items:stretch; flex-direction:column; }.schedule-filters { gap:14px; }.week-controls { flex-wrap:wrap; }.week-label { width:100%; margin:6px 0 0; }.management-grid,.catalog-grid { grid-template-columns:1fr; }.presence-editor { padding:24px 18px; }.schedule-scroll,.summary-scroll { display:none; }.mobile-week-cards { display:grid; gap:10px; padding:10px; }.mobile-employee-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }.mobile-employee-header { min-height:54px; display:flex; align-items:center; gap:10px; padding:10px 12px; }.mobile-employee-header > span:last-child { min-width:0; }.mobile-employee-header strong { display:block; font-size:13px; }.mobile-employee-header small { display:block; margin-top:2px; color:#849099; font-size:11px; }.mobile-day-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); }.mobile-day.presence-cell { position:relative; min-width:0; min-height:83px; height:100%; border-radius:0; padding:7px 3px; flex-direction:column; justify-content:center; gap:4px; text-align:center; border-right:1px solid rgba(255,255,255,.28); }.mobile-day:last-child { border-right:0; }.mobile-day .status-icon { width:25px; height:25px; }.mobile-day-label { display:flex; gap:3px; align-items:baseline; font-size:9px; font-weight:800; text-transform:uppercase; }.mobile-day-label small { font-size:9px; }.mobile-status-label { max-width:100%; overflow:hidden; color:inherit; font-size:9px; font-weight:650; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.mobile-day .comment-icon { position:absolute; right:4px; bottom:4px; margin:0; font-size:11px; }.mobile-day.neutral-status { border-right-color:#dfe3e6; }.mobile-day.neutral-status .mobile-day-label { color:#5c6870; }.legend { padding:10px 13px; gap:10px; font-size:11px; }.comment-legend { display:none!important; }.summary-card { margin-top:20px; }.summary-title { align-items:start; padding:16px 14px 12px; }.summary-title h2 { font-size:18px; }.summary-title > span { display:none; }.mobile-summary-cards { display:grid; gap:9px; padding:0 10px 10px; }.mobile-summary-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; }.mobile-summary-card header { display:flex; align-items:baseline; justify-content:space-between; padding:10px 12px; background:#fafbf9; border-bottom:1px solid var(--line); }.mobile-summary-card header span { color:#68767d; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }.mobile-summary-card header strong { font-size:13px; }.mobile-summary-counts > div,.mobile-summary-card footer { display:flex; justify-content:space-between; gap:16px; padding:8px 12px; font-size:12px; }.mobile-summary-counts > div + div { border-top:1px solid #eef0ef; }.mobile-summary-counts span { color:#59676f; }.mobile-summary-card footer { background:#eaf4ef; color:var(--green); font-weight:800; } }
.person-photo { flex:0 0 auto; display:block; width:48px; height:48px; border-radius:50%; object-fit:cover; background:#dff0ea; }
.presence-cell.filled-status { background:var(--presence-color); color:#fff; }.presence-cell.filled-status .status-icon { background:transparent; color:#fff; }.presence-cell.filled-status .presence-label,.presence-cell.filled-status .comment-icon { color:#fff; }.presence-cell.neutral-status { background:#eef0f2; color:var(--ink); }.presence-cell.neutral-status .status-icon { background:#9aa9bd; color:#fff; }.presence-cell.neutral-status .presence-label { color:var(--ink); }.presence-cell.filled-status.editable:hover { filter:brightness(.92); background:var(--presence-color); }
.week-grid td.presence-column { padding:0; }.week-grid td.presence-column .presence-cell { min-height:69px; height:100%; border-radius:0; padding:10px 12px; }
.person-initials { width:48px; height:48px; font-size:12px; }
.user-avatar-photo { display:block; object-fit:cover; }
.brand-logo { display:block; width:auto; height:38px; object-fit:contain; }
.nav-footer { margin-top:auto; }.nav-footer .nav-footnote { margin-top:0; }.nav-brand-logo { display:block; width:auto; height:45px; margin:22px auto 0; object-fit:contain; object-position:center; }
:root { --nav-text:#00486b; --nav-active:#ed574b; --nav-hover:#2f6176; }
.nav-link { color:var(--nav-text); }.nav-link.active { color:#fff; background:var(--nav-active); }.nav-link:hover,.nav-link.active:hover { color:#fff; background:var(--nav-hover); }
.filter-button { color:var(--nav-text); }.filter-button:hover { border-color:var(--nav-hover); background:var(--nav-hover); color:#fff; }.filter-button.selected { border-color:var(--nav-active); background:var(--nav-active); color:#fff; box-shadow:0 2px 5px rgba(237,87,75,.22); }.filter-button.selected:hover { border-color:var(--nav-hover); background:var(--nav-hover); }
@media (min-width:851px) and (max-width:1100px) { .app-body { grid-template-columns:1fr; }.app-nav { padding:8px 16px; border-right:0; border-bottom:1px solid var(--line); }.nav-links { grid-template-columns:1fr 1fr; }.nav-footer { display:none; }.app-main { padding:28px 18px 45px; }.app-header { padding:0 18px; }.environment-label,.planner-heading { display:none; }.planner-toolbar,.schedule-filters { align-items:stretch; flex-direction:column; }.schedule-filters { gap:14px; }.week-controls { flex-wrap:wrap; }.week-label { width:100%; margin:6px 0 0; }.management-grid,.catalog-grid { grid-template-columns:1fr; }.presence-editor { padding:24px 18px; }.schedule-scroll,.summary-scroll { display:none; }.mobile-week-cards { display:grid; gap:10px; padding:10px; }.mobile-employee-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }.mobile-employee-header { min-height:54px; display:flex; align-items:center; gap:10px; padding:10px 12px; }.mobile-employee-header > span:last-child { min-width:0; }.mobile-employee-header strong { display:block; font-size:13px; }.mobile-employee-header small { display:block; margin-top:2px; color:#849099; font-size:11px; }.mobile-day-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); }.mobile-day.presence-cell { position:relative; min-width:0; min-height:83px; height:100%; border-radius:0; padding:7px 3px; flex-direction:column; justify-content:center; gap:4px; text-align:center; border-right:1px solid rgba(255,255,255,.28); }.mobile-day:last-child { border-right:0; }.mobile-day .status-icon { width:25px; height:25px; }.mobile-day-label { display:flex; gap:3px; align-items:baseline; font-size:9px; font-weight:800; text-transform:uppercase; }.mobile-day-label small { font-size:9px; }.mobile-status-label { max-width:100%; overflow:hidden; color:inherit; font-size:9px; font-weight:650; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }.mobile-day .comment-icon { position:absolute; right:4px; bottom:4px; margin:0; font-size:11px; }.mobile-day.neutral-status { border-right-color:#dfe3e6; }.mobile-day.neutral-status .mobile-day-label { color:#5c6870; }.legend { padding:10px 13px; gap:10px; font-size:11px; }.comment-legend { display:none!important; }.summary-card { margin-top:20px; }.summary-title { align-items:start; padding:16px 14px 12px; }.summary-title h2 { font-size:18px; }.summary-title > span { display:none; }.mobile-summary-cards { display:grid; gap:9px; padding:0 10px 10px; }.mobile-summary-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; }.mobile-summary-card header { display:flex; align-items:baseline; justify-content:space-between; padding:10px 12px; background:#fafbf9; border-bottom:1px solid var(--line); }.mobile-summary-card header span { color:#68767d; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }.mobile-summary-card header strong { font-size:13px; }.mobile-summary-counts > div,.mobile-summary-card footer { display:flex; justify-content:space-between; gap:16px; padding:8px 12px; font-size:12px; }.mobile-summary-counts > div + div { border-top:1px solid #eef0ef; }.mobile-summary-counts span { color:#59676f; }.mobile-summary-card footer { background:#eaf4ef; color:var(--green); font-weight:800; } }
@media(max-width:850px) { .nav-footer { display:none; } }
:root { --canvas:#fbf7f0; --line:#e3ddd5; --menu-surface:#eee9e2; }
.app-header,.app-nav { background:var(--menu-surface); }
.nav-footnote { background:#f7f2eb; }