/* Without this, width: 100% + padding (content-box) pushes .content past the
   viewport on small screens (D3). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* SpinLock design tokens */
:root {
    --sl-bg: #f5f6f8;
    --sl-surface: #ffffff;
    --sl-text: #1c2330;
    --sl-text-muted: #5c6572;
    --sl-primary: #2f6fed;
    --sl-primary-hover: #2458c4;
    --sl-primary-soft: #e8f0fe;
    --sl-border: #d9dde3;
    --sl-danger: #c0392b;
    --sl-danger-bg: #fdecea;
    --sl-success: #1e7e4e;
    --sl-success-bg: #e6f4ec;
    --sl-warning: #9a6b00;
    --sl-warning-bg: #fff6e0;
    --sl-radius: 10px;
    --sl-shadow: 0 2px 12px rgba(28, 35, 48, 0.08);
    --sl-topbar-height: 56px;
}

html, body {
    margin: 0;
    background: var(--sl-bg);
    color: var(--sl-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 {
    line-height: 1.2;
}

a {
    color: var(--sl-primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

code {
    background: #eef0f3;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    background: var(--sl-surface);
    color: var(--sl-text);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .btn:hover {
        background: #f0f2f5;
        text-decoration: none;
    }

.btn-primary {
    border-color: transparent;
    background: var(--sl-primary);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--sl-primary-hover);
    }

.btn-danger {
    border-color: transparent;
    background: var(--sl-danger);
    color: #fff;
}

    .btn-danger:hover {
        background: #a5301f;
    }

.btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--sl-text-muted);
}

    .btn-ghost:hover {
        background: rgba(28, 35, 48, 0.06);
        color: var(--sl-text);
    }

.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Shell: topbar + content */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--sl-surface);
    border-bottom: 1px solid var(--sl-border);
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--sl-topbar-height);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.topbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sl-text);
    letter-spacing: 0.01em;
}

    .topbar-brand:hover {
        text-decoration: none;
        color: var(--sl-primary);
    }

.topbar-nav {
    display: flex;
    gap: 0.25rem;
}

    .topbar-nav a {
        padding: 0.35rem 0.8rem;
        border-radius: var(--sl-radius);
        color: var(--sl-text-muted);
        font-weight: 500;
    }

        .topbar-nav a:hover {
            background: var(--sl-primary-soft);
            color: var(--sl-primary);
            text-decoration: none;
        }

        .topbar-nav a.active {
            background: var(--sl-primary-soft);
            color: var(--sl-primary);
        }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Shown only on narrow screens (see the 640 px media block). */
.topbar-admin-short {
    display: none;
}

.topbar-user {
    color: var(--sl-text-muted);
    font-size: 0.95rem;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-logout {
    display: flex;
}

.content {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

/* Centered layout (login, register, error pages) */
.centered-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    padding: 2rem;
}

.brand {
    margin: 0;
    font-size: 1.75rem;
}

.tagline {
    margin: 0.25rem 0 1.5rem;
    color: var(--sl-text-muted);
}

.field {
    margin-bottom: 1rem;
}

    .field label {
        display: block;
        margin-bottom: 0.3rem;
        font-weight: 500;
    }

    /* Blazor InputText omits the type attribute unless set explicitly, so
       match attribute-less inputs as well. */
    .field input:not([type]),
    .field input[type="text"],
    .field input[type="email"],
    .field input[type="password"] {
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.7rem;
        border: 1px solid var(--sl-border);
        border-radius: var(--sl-radius);
        font-size: 1rem;
        font-family: inherit;
    }

        .field input:not([type]):focus,
        .field input[type="text"]:focus,
        .field input[type="email"]:focus,
        .field input[type="password"]:focus {
            outline: none;
            border-color: var(--sl-primary);
            box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15);
        }

    .field input.invalid {
        outline: 1px solid var(--sl-danger);
    }

.field-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    cursor: pointer;
}

.validation-message {
    color: var(--sl-danger);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.notice {
    margin-bottom: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--sl-radius);
    font-size: 0.95rem;
}

.notice-error {
    background: var(--sl-danger-bg);
    color: var(--sl-danger);
}

.notice-warning {
    background: var(--sl-warning-bg);
    color: var(--sl-warning);
}

.notice-success {
    background: var(--sl-success-bg);
    color: var(--sl-success);
}

/* Profile page */
.profile-page {
    max-width: 460px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    display: grid;
    gap: 1.25rem;
}

.profile-title {
    margin: 0;
    font-size: 1.5rem;
}

.profile-card {
    max-width: none;
}

.profile-card-title {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.profile-card-hint {
    margin: 0 0 1rem;
    color: var(--sl-text-muted);
    font-size: 0.9rem;
}

.switch-link {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--sl-text-muted);
}

/* Error pages (404 / 500) */
.error-card {
    text-align: center;
    max-width: 440px;
}

    .error-card h1 {
        font-size: 1.4rem;
        margin: 0.25rem 0 0.75rem;
    }

    .error-card .btn-block {
        margin-top: 1.5rem;
    }

.error-code {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--sl-primary);
    opacity: 0.35;
    line-height: 1;
}

.error-message {
    color: var(--sl-text-muted);
}

.error-request-id {
    font-size: 0.85rem;
    color: var(--sl-text-muted);
}

/* Calendar */
.calendar-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cal-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cal-toolbar-extra {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cal-view-toggle {
    display: flex;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    padding: 2px;
}

.cal-toggle-btn {
    border: none;
    background: transparent;
    padding: 0.3rem 0.9rem;
    border-radius: 7px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sl-text-muted);
    cursor: pointer;
}

    .cal-toggle-btn.is-active {
        background: var(--sl-primary);
        color: #fff;
    }

.cal-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    background: var(--sl-surface);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--sl-text-muted);
}

    .cal-nav-btn:hover {
        background: #f0f2f5;
        color: var(--sl-text);
    }

.cal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

.cal {
    position: relative;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    overflow: hidden;
}

.cal-head {
    display: grid;
    grid-template-columns: 56px repeat(var(--cal-cols), 1fr);
    border-bottom: 1px solid var(--sl-border);
}

.cal-gutter-spacer {
    border-right: 1px solid var(--sl-border);
}

.cal-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.25rem;
    border-left: 1px solid var(--sl-border);
}

.cal-day-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
}

.cal-day-date {
    font-size: 0.9rem;
    font-weight: 600;
}

.cal-day-head.is-today .cal-day-date {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sl-primary);
    color: #fff;
    font-size: 0.85rem;
}

.cal-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 330px);
    max-height: calc(100dvh - 330px);
    min-height: 320px;
}

.cal-body {
    display: grid;
    grid-template-columns: 56px repeat(var(--cal-cols), 1fr);
    position: relative;
}

.cal-gutter {
    border-right: 1px solid var(--sl-border);
}

.cal-gutter-cell {
    height: 48px;
    font-size: 0.7rem;
    color: var(--sl-text-muted);
    text-align: right;
    padding: 0 6px;
    transform: translateY(-0.55em);
}

.cal-day {
    position: relative;
    border-left: 1px solid var(--sl-border);
}

.cal-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--sl-border);
    opacity: 0.55;
}

.cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid var(--sl-danger);
    z-index: 5;
}

.cal-now-dot {
    position: absolute;
    left: -4px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sl-danger);
}

.cal-block {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.72rem;
    line-height: 1.3;
    background: var(--sl-primary-soft);
    border: 1px solid rgba(47, 111, 237, 0.35);
    border-left: 3px solid var(--sl-primary);
    cursor: pointer;
}

.cal-block:hover {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: #ffffff;
}

.cal-block.is-mine {
    background: #dbe7fd;
    border: 2px solid var(--sl-primary);
}

.cal-block.is-cancelled {
    opacity: 0.55;
    background: #eef0f3;
    border: 1px dashed var(--sl-border);
    border-left: 3px solid var(--sl-text-muted);
}

/* Two-class specificity beats .cal-block:hover above, so repeat the hover per state. */
.cal-block.is-mine:hover {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: #ffffff;
}

.cal-block.is-cancelled:hover {
    opacity: 0.75;
}

.cal-block-time {
    font-weight: 600;
}

.cal-block-owner {
    font-weight: 500;
}

.cal-block-equipment {
    color: var(--sl-text-muted);
}

.cal-block-cancelled {
    color: var(--sl-danger);
    font-weight: 600;
}

/* A block too short (≤45 min, class from C#) or too narrow (<70 px with many
   lanes — spinlock.applyCompactBlocks adds the same class after render) shows
   the time only. */
.cal-block.is-compact :not(.cal-block-time) {
    display: none;
}

/* D16: in a dense cluster the lane can be narrower than this block's
   padding+border minimum (2+6+2+6+1+3 = 16 px); under border-box the browser
   then expands the block into the neighbor's lane and it steals the
   neighbor's clicks. Compact blocks shrink the box, and below 16 px the bar
   has no text at all — a 2 px stripe, time in the title tooltip. */
.cal-block.is-compact {
    padding: 1px 2px;
    border-left-width: 2px;
}

.cal-block.is-tiny {
    padding: 0;
    border-left-width: 1px;
}

.cal-block.is-tiny .cal-block-time {
    display: none;
}

.cal-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--sl-text-muted);
    pointer-events: none;
}

/* "Hide cancelled" toggle in the toolbar */
.cal-cancel-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--sl-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

    .cal-cancel-toggle input {
        margin: 0;
        accent-color: var(--sl-primary);
        cursor: pointer;
    }

/* Equipment filter */
.cal-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cal-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cal-caret {
    font-size: 0.8rem;
    color: var(--sl-text-muted);
}

.cal-filter-count {
    background: var(--sl-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 0 0.45rem;
}

.cal-filter-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    width: 270px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    padding: 0.6rem;
}

.cal-filter-all {
    width: 100%;
    border: none;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
    font: inherit;
    font-weight: 600;
    padding: 0.4rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.4rem;
}

.cal-filter-group-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
    margin: 0.5rem 0 0.15rem;
}

.cal-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.25rem;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

    .cal-filter-item:hover {
        background: #f0f2f5;
    }

    .cal-filter-item input {
        accent-color: var(--sl-primary);
    }

.cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--sl-primary-soft);
    color: var(--sl-primary);
    border-radius: 999px;
    padding: 0.2rem 0.45rem 0.2rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.cal-chip-x {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
}

    .cal-chip-x:hover {
        background: rgba(47, 111, 237, 0.2);
    }

/* Mobile "Filters" button (first toolbar row). Hidden by default; the
   767 px media block switches it to inline-flex. */
.cal-mobile-filters-btn {
    display: none;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Filters bottom sheet (mobile). Hidden by default; the 767 px media block
   switches it to flex, so it can never cover a desktop viewport. */
.filter-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 160;
    background: rgba(28, 35, 48, 0.45);
    display: none;
    align-items: flex-end;
}

.filter-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 80vh;
    background: var(--sl-surface);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 40px rgba(28, 35, 48, 0.25);
}

.filter-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--sl-border);
}

.filter-sheet-title {
    margin: 0;
    font-size: 1rem;
}

.filter-sheet-close {
    border: none;
    background: transparent;
    color: var(--sl-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
}

    .filter-sheet-close:hover {
        background: rgba(28, 35, 48, 0.08);
        color: var(--sl-text);
    }

.filter-sheet-body {
    overflow-y: auto;
    padding: 0.6rem 1.1rem;
}

.filter-sheet-section {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
    margin: 0.8rem 0 0.15rem;
}

.filter-sheet-actions {
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--sl-border);
}

.filter-sheet-done {
    width: 100%;
}

/* Toasts (rendered inside interactive islands) */
.toast-region {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 360px;
    width: calc(100% - 2rem);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-left: 4px solid var(--sl-primary);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    padding: 0.7rem 0.9rem;
    animation: sl-toast-in 0.2s ease-out;
}

@keyframes sl-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.toast-success {
    border-left-color: var(--sl-success);
}

.toast-error {
    border-left-color: var(--sl-danger);
}

.toast-message {
    flex: 1;
    font-size: 0.95rem;
}

.toast-close {
    border: none;
    background: transparent;
    color: var(--sl-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

    .toast-close:hover {
        background: rgba(28, 35, 48, 0.08);
        color: var(--sl-text);
    }

/* Blazor circuit error UI */
#blazor-error-ui {
    background: var(--sl-danger-bg);
    color: var(--sl-danger);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 3rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .reload {
        color: var(--sl-danger);
        font-weight: 600;
        margin-left: 0.75rem;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: var(--sl-danger-bg);
    color: var(--sl-danger);
    padding: 1rem;
    border-radius: var(--sl-radius);
}

/* Booking modal / bottom sheet */
.cal-new-btn {
    white-space: nowrap;
}

.cal-fab {
    display: none;
}

.booking-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(28, 35, 48, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.booking-panel {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(90vh, 720px);
    background: var(--sl-surface);
    border-radius: var(--sl-radius);
    box-shadow: 0 12px 40px rgba(28, 35, 48, 0.25);
}

.booking-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--sl-border);
}

.booking-panel-title {
    margin: 0;
    font-size: 1.05rem;
}

.booking-close {
    border: none;
    background: transparent;
    color: var(--sl-text-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
}

    .booking-close:hover {
        background: rgba(28, 35, 48, 0.08);
        color: var(--sl-text);
    }

.booking-panel-body {
    overflow-y: auto;
    padding: 1rem 1.1rem 1.2rem;
}

.booking-fields {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.6rem;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.booking-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sl-text-muted);
}

.booking-input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    background: var(--sl-surface);
    color: var(--sl-text);
    font: inherit;
}

    .booking-input:focus {
        outline: 2px solid var(--sl-primary-soft);
        border-color: var(--sl-primary);
    }

.booking-equipment {
    margin-top: 1rem;
}

.booking-equipment-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.booking-equipment-category {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sl-text-muted);
    margin: 0.55rem 0 0.15rem;
}

.booking-hint {
    color: var(--sl-text-muted);
    font-size: 0.9rem;
    padding: 0.4rem 0.25rem;
}

.booking-eq {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

    .booking-eq:hover {
        background: #f0f2f5;
    }

    .booking-eq input {
        accent-color: var(--sl-primary);
    }

    .booking-eq.is-unavailable {
        color: var(--sl-text-muted);
        cursor: not-allowed;
    }

    .booking-eq.is-unavailable:hover {
        background: transparent;
    }

.booking-eq-name {
    flex: 1;
}

.booking-eq-badge {
    background: var(--sl-warning-bg);
    color: var(--sl-warning);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.form-error {
    margin-top: 1rem;
    background: var(--sl-danger-bg);
    color: var(--sl-danger);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.92rem;
}

.form-error-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.form-error-list {
    margin: 0;
    padding-left: 1.1rem;
}

/* Sticky inside the scrolling .booking-panel-body so the buttons stay in the
   viewport on small screens (D4). */
.booking-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding: 0.9rem 0 0.6rem;
    border-top: 1px solid var(--sl-border);
    background: var(--sl-surface);
}

/* Drag-to-create preview */
.cal-drag-preview {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 5;
    background: var(--sl-primary-soft);
    border: 1px dashed var(--sl-primary);
    border-radius: 6px;
    pointer-events: none;
}

.cal-body.is-dragging {
    user-select: none;
}

    .cal-body.is-dragging .cal-day {
        cursor: ns-resize;
    }

/* Reservation detail modal (S7) */
.booking-panel-narrow {
    width: min(460px, 100%);
}

.rdetail {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
}

.rdetail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 0;
}

.rdetail-row dt {
    color: var(--sl-text-muted);
}

.rdetail-row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.rdetail-equipment-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    margin-bottom: 0.4rem;
}

.rdetail-equipment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.rdetail-equipment li {
    background: var(--sl-bg);
    border: 1px solid var(--sl-border);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.88rem;
}

.rdetail-cancelled {
    display: inline-block;
    background: var(--sl-danger-bg);
    color: var(--sl-danger);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.rdetail-confirm {
    margin-bottom: 0.5rem;
}

.rdetail-confirm-question {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.rdetail-confirm-frees {
    color: var(--sl-text-muted);
}

.rdetail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--sl-border);
}

/* S9: admin panel */
.admin-page {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-title {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.admin-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--sl-border);
    margin-bottom: 1.25rem;
}

.admin-tab {
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--sl-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab:hover {
    color: var(--sl-text);
}

.admin-tab.active {
    color: var(--sl-primary);
    border-bottom-color: var(--sl-primary);
}

.admin-tab-panel {
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow);
    padding: 1.25rem;
}

.admin-search {
    max-width: 340px;
    margin-bottom: 0.9rem;
}

.admin-section-title {
    font-size: 1rem;
    margin: 1.4rem 0 0.7rem;
}

.admin-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.admin-add-row .field-input {
    flex: 0 1 360px;
}

.admin-add-btn {
    margin-bottom: 0.9rem;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sl-text-muted);
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--sl-border);
    white-space: nowrap;
}

.admin-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--sl-border);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr.is-inactive td {
    color: var(--sl-text-muted);
}

.admin-th-actions,
.admin-row-actions {
    text-align: right;
}

.admin-row-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.admin-desc {
    color: var(--sl-text-muted);
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.admin-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-badge.is-active {
    background: var(--sl-success-bg);
    color: var(--sl-success);
}

.admin-badge.is-inactive {
    background: #eef0f3;
    color: var(--sl-text-muted);
}

.admin-badge.is-archived {
    background: var(--sl-warning-bg);
    color: var(--sl-warning);
}

.admin-role-select {
    min-width: 150px;
}

.admin-empty {
    padding: 1.6rem;
    text-align: center;
    color: var(--sl-text-muted);
}

.admin-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.admin-toggle-row span span {
    display: block;
}

.admin-toggle-title {
    font-weight: 600;
}

.admin-toggle-hint {
    color: var(--sl-text-muted);
    font-size: 0.85rem;
}

.admin-modal-error {
    min-height: 1.2rem;
    color: var(--sl-danger);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.admin-modal-hint {
    color: var(--sl-text-muted);
    font-size: 0.9rem;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.admin-confirm-hint {
    color: var(--sl-text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cal-head,
    .cal-body {
        grid-template-columns: 44px repeat(var(--cal-cols), 1fr);
    }

    .cal-gutter-cell {
        font-size: 0.65rem;
        padding-right: 4px;
    }

    .cal-title {
        font-size: 0.95rem;
    }

    .cal-scroll {
        max-height: calc(100vh - 260px);
        max-height: calc(100dvh - 260px);
    }

    /* The row takes the full width, so the dropdown spans it and stays on
       screen (right-anchored to a narrow button it ran off the left edge on
       390 px, D2); the toggle button remains clickable to close the panel. */
    .cal-filter {
        width: 100%;
    }

    .cal-filter-panel {
        left: 0;
        right: 0;
        width: auto;
    }

    .topbar-inner {
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .topbar-brand {
        font-size: 1.05rem;
    }

    .topbar-nav a {
        padding: 0.3rem 0.55rem;
    }

    .topbar-user {
        display: none;
    }

    .content {
        padding: 0.9rem 0.75rem 1.5rem;
    }

    .home-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-card {
        padding: 1.5rem 1.25rem;
    }

    .toast-region {
        right: 0.75rem;
        bottom: 0.75rem;
        width: calc(100% - 1.5rem);
        max-width: none;
    }

    .cal-new-btn {
        display: none;
    }

    .cal-fab {
        display: grid;
        place-items: center;
        position: fixed;
        right: 1rem;
        bottom: 1.25rem;
        z-index: 120;
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 50%;
        background: var(--sl-primary);
        color: #fff;
        font-size: 1.7rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(47, 111, 237, 0.4);
    }

        .cal-fab:hover {
            background: var(--sl-primary-hover);
        }

    /* Modal becomes a bottom sheet. */
    .booking-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .booking-panel {
        width: 100%;
        max-height: 88vh;
        border-radius: 14px 14px 0 0;
    }

    .booking-fields {
        grid-template-columns: 1fr;
    }

    .toast-region {
        bottom: 5.5rem;
    }

    /* Touch targets ≥44 px (D7). */
    .btn {
        min-height: 44px;
    }

    .cal-nav-btn {
        min-width: 44px;
        height: 44px;
    }

    .topbar-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .booking-eq {
        min-height: 44px;
    }

    /* Smallest calendar text up to 12 px (D8). */
    .cal-gutter-cell {
        font-size: 0.75rem;
    }

    .cal-day-name {
        font-size: 0.75rem;
    }
}

/* Matches spinlock.isMobile (max-width: 767px): the JS forces Day view there,
   so the Week/Day toggle is hidden to avoid a control that does nothing (D5).
   The toolbar collapses to one control row (nav + "Filters" button) over a
   centered title; the equipment filter and the cancelled checkbox move into
   the filters bottom sheet. */
@media (max-width: 767px) {
    .cal-view-toggle {
        display: none;
    }

    .cal-toolbar {
        align-items: center;
        row-gap: 0.4rem;
    }

    /* Date navigation is one compact group (fixed 0.5rem gap); the
       "Filters" action is pushed right with an auto margin, so the free
       space lands between the group and the action instead of spreading
       evenly across all four controls (v0.3.1's space-between looked
       sparse). */
    .cal-toolbar-nav {
        justify-content: flex-start;
        row-gap: 0.35rem;
    }

    .cal-title {
        flex-basis: 100%;
        order: 2;
        text-align: center;
    }

    .cal-filter,
    .cal-cancel-toggle {
        display: none;
    }

    /* Soft hierarchy: lighter prev/next glyph, ghost "Today", the Filters
       action in a primary tint. Boxes stay 44 px (D7), radius unified 8 px. */
    .cal-nav-btn {
        font-size: 1.05rem;
    }

    .cal-today-btn {
        background: transparent;
        border-color: transparent;
        color: var(--sl-text);
        border-radius: 8px;
    }

        .cal-today-btn:hover {
            background: rgba(28, 35, 48, 0.06);
            color: var(--sl-text);
        }

    .cal-mobile-filters-btn {
        display: inline-flex;
        margin-left: auto;
        background: var(--sl-primary-soft);
        border-color: rgba(47, 111, 237, 0.35);
        color: var(--sl-primary);
        border-radius: 8px;
    }

        .cal-mobile-filters-btn:hover {
            background: rgba(47, 111, 237, 0.16);
            color: var(--sl-primary);
        }

    /* Touch targets inside the filters sheet. */
    .filter-sheet-body .cal-filter-item {
        min-height: 44px;
    }

    .filter-sheet-overlay {
        display: flex;
    }

    /* Native <select> arrows render tiny in Firefox for Android; give the
       booking time selects a consistent custom chevron (the option list
       stays native, which is the right behavior on mobile). */
    select.booking-input {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 12px 8px;
        padding-right: 2.2rem;
    }
}

/* Small phones: admin tables become label/value cards built on the
   data-label attributes from the markup (D10). Desktop markup is untouched. */
@media (max-width: 640px) {
    .admin-tabs {
        flex-wrap: wrap;
    }

    .admin-table-wrap {
        overflow: visible;
    }

    .admin-table {
        font-size: 0.88rem;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr {
        display: block;
        width: 100%;
    }

    .admin-table tr {
        border: 1px solid var(--sl-border);
        border-radius: var(--sl-radius);
        background: var(--sl-surface);
        margin-bottom: 0.7rem;
        padding: 0.2rem 0.7rem;
    }

    .admin-table td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.8rem;
        width: 100%;
        text-align: right;
        overflow-wrap: anywhere;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--sl-border-soft);
    }

    .admin-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--sl-text-muted);
    }

    .admin-table tr.is-inactive td {
        color: var(--sl-text-muted);
    }

    .admin-desc {
        flex-basis: 100%;
        margin-top: 0.2rem;
    }

    .admin-row-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .admin-role-select {
        min-width: 0;
        width: 160px;
    }

    /* Compact topbar: the long "Admin" label gets a short variant (D6/D10). */
    .topbar-brand {
        font-size: 1rem;
    }

    .topbar-nav {
        gap: 0.2rem;
    }

    .topbar-nav a {
        font-size: 0.85rem;
        padding: 0 0.2rem;
    }

    .topbar-admin-full {
        display: none;
    }

    .topbar-admin-short {
        display: inline;
    }

    /* The "Профиль" link (v0.2.0) pushed the topbar past 360px: tighten the
       spacing and drop the decorative user name (logout stays) so it fits. */
    .topbar-inner {
        gap: 0.4rem;
        padding: 0 0.5rem;
    }

    .topbar-user {
        display: none;
    }
}