:root {
    font-family: "Segoe UI", sans-serif;
    color: #252b31;
    background: #f5f6f7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --primary: #004388;
    --primary-dark: #00366d;
    --accent: #004388;
    --accent-soft: #e8eff6;
    --green: #007d4e;
    --red: #df342e;
    --yellow: #f7a600;
    --bright-green: #75b72a;
    --status-busy: #f87171;
    --status-busy-strong: #dc2626;
    --status-tentative: #facc15;
    --status-tentative-strong: #ca8a04;
    --status-oof: #c084fc;
    --status-oof-strong: #9333ea;
    --status-working-elsewhere: #60a5fa;
    --status-working-elsewhere-strong: #2563eb;
    --muted: #66717b;
    --border: #dfe3e6;
    --surface: #fff;
    --shadow: 0 4px 16px rgb(24 35 46 / 6%);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: #f5f6f7; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Segoe UI", sans-serif; }

.app-frame { display: flex; flex-direction: column; width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; padding: 28px clamp(16px, 3vw, 42px) 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.topbar h1 { margin: 0; color: var(--primary); font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.045em; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.welcome { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.language-switch { min-width: 44px; min-height: 36px; padding: 6px 8px; font-size: .75rem; font-weight: 700; }
.language-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.profile-menu { position: relative; }
.profile-button { display: grid; width: 40px; height: 40px; place-items: center; padding: 2px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); }
.profile-button:hover { border-color: var(--accent); }
.profile-button:focus-visible, .profile-logout:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.profile-dropdown { position: absolute; z-index: 100; top: 100%; right: 0; width: min(280px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 24px rgb(24 35 46 / 12%); }
.profile-details { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 12px; overflow-wrap: anywhere; }
.profile-details strong { font-size: .85rem; }
.profile-details span { color: var(--muted); font-size: .75rem; }
.profile-logout { width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--primary); text-align: left; font-size: .85rem; font-weight: 600; }
.profile-logout:hover { background: var(--accent-soft); }
.panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.sign-in { display: flex; width: min(480px, 100%); min-height: 360px; flex-direction: column; align-items: center; justify-content: center; margin: 10vh auto 0; padding: 42px; text-align: center; }
.sign-in h2 { margin: 20px 0 10px; font-size: 1.45rem; }
.sign-in > p { color: var(--muted); line-height: 1.6; }
.brand-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--primary); font-size: 1.6rem; font-weight: 800; }
.privacy-note { margin: 24px 0 0; font-size: .77rem; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font-size: .85rem; font-weight: 600; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:not(:disabled):active { transform: translateY(1px); }
.button-primary { background: var(--primary); color: white; }
.button-primary:not(:disabled):hover { background: var(--primary-dark); }
.button-secondary { border-color: var(--border); background: white; color: var(--primary); }
.button-secondary:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
.button-small { min-height: 32px; padding: 6px 10px; font-size: .76rem; }
.dashboard { display: flex; flex: 1; flex-direction: column; gap: 16px; }
.search-panel { padding: 20px 24px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 1.15rem; }
.participant-section-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.count-badge { padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--primary); font-size: .77rem; font-weight: 600; }
.search-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.search-box { position: relative; min-width: 0; }
.field > label { display: block; margin-bottom: 7px; color: #3e4a60; font-size: .78rem; font-weight: 600; }
.search-form { display: flex; min-width: 0; }
.input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; border: 1px solid #dfe5ef; border-radius: 8px; outline: none; background: white; color: #172033; font-size: .84rem; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(0 67 136 / 15%); }
.result-list, .selected-list ul { margin: 9px 0 0; padding: 0; list-style: none; }
.result-list { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 30px rgb(29 44 79 / 16%); }
.result-list li, .selected-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; }
.person-search .result-list li, .group-search .result-list li { padding: 0; }
.person-search .result-list .result-state, .group-search .result-list .result-state { padding: 12px; color: var(--muted); font-size: .8rem; }
.person-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px; border: 0; background: transparent; color: inherit; text-align: left; }
.person-result:hover, .person-result:focus-visible { background: var(--accent-soft); }
.person-result:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.result-action { flex-shrink: 0; color: var(--primary); font-size: .76rem; font-weight: 600; }
.result-list li + li, .selected-list li + li { border-top: 1px solid #edf0f5; }
.result-person, .selected-name { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.result-person strong, .selected-name strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.result-person span, .selected-name small { overflow: hidden; color: var(--muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.selected-list { margin-top: 16px; }
.selected-list h3 { margin: 0; color: #45516a; font-size: .77rem; font-weight: 700; }
.selected-list ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; }
.selected-list li { justify-content: flex-start; min-width: 0; }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--primary); font-size: .72rem; font-weight: 700; }
.avatar-image { object-fit: cover; }
.avatar-compact { width: 26px; height: 26px; flex-basis: 26px; font-size: .62rem; }
.calendar-person { cursor: grab; }
.calendar-person:active { cursor: grabbing; }
.calendar-person:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.calendar-person .avatar { pointer-events: none; }
.person-dragging { opacity: .5; }
.selected-name { flex: 1; }
.participant-actions { display: flex; gap: 3px; }
.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #657187; font-size: 1.05rem; }
.icon-button:not(:disabled):hover { border-color: #e3e7ef; background: #f6f7fa; }
.remove-button:not(:disabled):hover { color: #c03d4a; }
.settings-panel { position: fixed; inset: 0; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 18px; overflow-y: auto; color: inherit; box-shadow: 0 12px 30px rgb(29 44 79 / 16%); }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.settings-heading h2 { margin: 0; color: var(--primary); font-size: 1rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.settings-trigger { anchor-name: --calendar-settings-trigger; }
.calendar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@supports (position-area: bottom span-left) {
    @media (min-width: 601px) {
        .settings-panel { position-anchor: --calendar-settings-trigger; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; inset: auto; margin: 8px 0; max-height: min(520px, calc(100dvh - 24px)); }
    }
}
.field .input { font-size: .79rem; }
.view-switch { display: flex; width: fit-content; padding: 3px; border: 1px solid #e1e6ef; border-radius: 10px; background: white; }
.view-button { padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: #69758b; font-size: .79rem; font-weight: 600; }
.view-button.active { background: var(--primary); color: white; }
.period-navigation { display: flex; align-items: center; justify-content: center; gap: 11px; }
.period-navigation strong { min-width: 0; color: var(--primary); font-size: .91rem; text-align: center; text-transform: capitalize; overflow-wrap: anywhere; }
.period-navigation .icon-button { flex-shrink: 0; }
.search-schedule { justify-self: end; }
.calendar-panel { min-height: 260px; overflow: hidden; }
.calendar-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.calendar-view-controls { display: flex; align-items: center; gap: 10px; }
.calendar-view-controls > .view-switch { flex-shrink: 0; }
.calendar-toolbar > span { color: var(--muted); font-size: .73rem; }
.compact-calendar { min-height: 0; }
.compact-calendar .schedule-table { table-layout: fixed; }
.compact-calendar .period-column, .compact-calendar .period-cell { width: 84px; min-width: 84px; max-width: 84px; }
.compact-calendar .period-column small { display: block; margin-top: 3px; font-size: .65rem; font-weight: 400; }
.compact-calendar .period-cell { padding: 0; height: 33px; vertical-align: middle; }
.compact-calendar .compact-person { display: flex; align-items: center; gap: 8px; padding: 2px 8px; height: 33px; vertical-align: middle; overflow: hidden; }
.compact-calendar .compact-person strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-calendar .weekend, .legend-dot.weekend { background: #edf1f4; }
.schedule-table th.period-column.today { background: var(--accent-soft); color: var(--primary); box-shadow: inset 0 3px 0 var(--accent); }
.schedule-table td.period-cell.today { background-color: rgb(0 67 136 / 9%); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.legend-dot.today-dot { border: 2px solid var(--accent); background: rgb(0 67 136 / 12%); }
.timeline-cell { position: relative; height: 32px; overflow: hidden; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgb(130 145 165 / 10%) calc(25% - 1px), rgb(130 145 165 / 10%) 25%); }
.timeline-event { position: absolute; min-width: 4px; max-width: 100%; padding: 0; border: 0; border-radius: 2px; }
.timeline-event.status-busy { background: var(--status-busy); }
.timeline-event.status-tentative { background: var(--status-tentative); }
.timeline-event.status-oof { background: var(--status-oof); }
.timeline-event.status-workingElsewhere { background: var(--status-working-elsewhere); }
.timeline-event:hover, .timeline-event:focus-visible { outline: 2px solid #172033; outline-offset: -1px; }
.legend-dot.status-free { background: white; border: 1px solid var(--border); }
.calendar-scroll { overflow-x: auto; overflow-y: visible; }
.schedule-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .75rem; }
.schedule-table th, .schedule-table td { padding: 9px 8px; border-right: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; vertical-align: top; }
.schedule-table thead th { position: sticky; z-index: 2; top: 0; background: #f2f7fa; color: var(--primary); font-weight: 700; text-align: center; }
.schedule-table .person-column { position: sticky; z-index: 4; left: 0; width: 210px; min-width: 210px; background: var(--surface); text-align: left; }
.schedule-table thead .person-column { z-index: 5; background: #f2f7fa; }
.period-column { min-width: 130px; max-width: 195px; }
.period-cell { width: 155px; min-width: 130px; max-width: 195px; }
.person-cell { display: flex; align-items: center; gap: 9px; }
.person-cell > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.person-cell strong { overflow: hidden; color: #2e394e; text-overflow: ellipsis; white-space: nowrap; }
.person-cell small { overflow: hidden; color: #778197; font-size: .68rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.event-pill { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; padding: 4px 6px; border-radius: 5px; font-size: .68rem; line-height: 1.35; }
.event-pill i, .legend-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.status-busy { background: #fee2e2; color: #991b1b; }
.status-busy i { background: var(--status-busy-strong); }
.legend-dot.status-busy { background: var(--status-busy); }
.status-tentative { background: #fef3c7; color: #854d0e; }
.status-tentative i { background: var(--status-tentative-strong); }
.legend-dot.status-tentative { background: var(--status-tentative); }
.status-oof { background: #f3e8ff; color: #6b21a8; }
.status-oof i { background: var(--status-oof-strong); }
.legend-dot.status-oof { background: var(--status-oof); }
.status-workingElsewhere { background: #dbeafe; color: #1e40af; }
.status-workingElsewhere i { background: var(--status-working-elsewhere-strong); }
.legend-dot.status-workingElsewhere { background: var(--status-working-elsewhere); }
.free-label { color: #a0a9b8; font-size: .69rem; }
.more-events { color: #68748a; font-size: .66rem; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #edf0f5; color: #627087; font-size: .72rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.empty-state { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.empty-state h2 { margin: 13px 0 6px; font-size: 1.1rem; }
.empty-state p { max-width: 430px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid transparent; border-radius: 9px; font-size: .82rem; line-height: 1.45; }
.notice-error { border-color: #f2c7cb; background: #fff1f2; color: #9c2e39; }
.notice-info { border-color: #b8e4f5; background: var(--accent-soft); color: var(--primary); }
.notice-dismiss { border: 0; background: none; color: inherit; font-size: 1.2rem; }
.centered { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.spinner { width: 28px; height: 28px; border: 3px solid #dcecf4; border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
.spinner-small { width: 16px; height: 16px; border-width: 2px; border-color: rgb(255 255 255 / 45%); border-top-color: white; }
@keyframes spin { to { transform: rotate(360deg); } }
#blazor-error-ui { position: fixed; z-index: 1000; right: 12px; bottom: 12px; display: none; max-width: 500px; padding: 14px 18px; border: 1px solid #f0c4c8; border-radius: 9px; background: #fff1f2; box-shadow: var(--shadow); color: #842d35; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left: 8px; color: #334eae; cursor: pointer; }

@media (max-width: 1300px) {
    .selected-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calendar-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-view-controls { grid-column: 1 / -1; flex-wrap: wrap; justify-content: space-between; }
    .calendar-toolbar > .period-navigation { grid-column: 1 / -1; }
    .calendar-toolbar > .calendar-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .selected-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-grid { grid-template-columns: 1fr; gap: 18px; }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .selected-list ul { grid-template-columns: minmax(0, 1fr); }
    .app-frame { padding: 18px 12px 14px; }
    .topbar { align-items: flex-start; flex-direction: column; gap: 14px; }
    .header-actions { align-self: flex-end; }
    .search-panel .section-heading { flex-wrap: wrap; }
    .search-panel { padding: 16px 13px; }
    .settings-grid { grid-template-columns: 1fr; }
    .calendar-toolbar { grid-template-columns: minmax(0, 1fr); }
    .view-switch { width: 100%; justify-content: space-between; }
    .view-button { flex: 1; padding: 7px 6px; }
    .period-navigation { justify-content: center; }
    .period-navigation strong { min-width: 0; flex: 1; }
    .search-schedule { justify-self: stretch; }
    .calendar-actions > .search-schedule { flex: 1; }
    .settings-panel::backdrop { background: rgb(27 43 60 / 25%); }
    .sign-in { min-height: 320px; padding: 25px 20px; }
    .schedule-table .person-column { width: 170px; min-width: 170px; }
}
    .app-loading { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #627087; font-size: .85rem; }
    .app-loading-spinner { width: 34px; height: 34px; border: 4px solid #dcecf4; border-top-color: var(--accent); border-radius: 50%; animation: app-spin .8s linear infinite; }
    @keyframes app-spin { to { transform: rotate(360deg); } }