html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 100%;
    margin: 0;
    overscroll-behavior-y: none;
    background: #fff;
    /* The page itself must never scroll horizontally; only dedicated containers (the umbrella
       grid) may pan. This keeps the header pinned to the viewport width on phones. */
    max-width: 100%;
    overflow-x: hidden;
}

body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    box-sizing: border-box;
}

#app {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Sezlong Manager UI ---- */
.dashboard-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.business-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
}

.muted {
    color: #6c757d;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card {
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.95;
    margin-top: 0.25rem;
}

.stat-free { background: #2e9e5b; }
.stat-occupied { background: #c0392b; }
.stat-reserved { background: #e08e0b; }
.stat-blocked { background: #555e68; }
.stat-revenue { background: #1b6ec2; }

/* Touch-friendly sunbed grid */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #444;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.dot-free { background: #2e9e5b; }
.dot-occupied { background: #c0392b; }
.dot-reserved { background: #e08e0b; }
.dot-blocked { background: #555e68; }
.dot-cleaning { background: #3aa0c9; }

.sunbed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.9rem;
}

.sunbed-card {
    border-radius: 14px;
    padding: 1rem 0.5rem;
    text-align: center;
    color: #fff;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    user-select: none;
}

.sunbed-code {
    font-size: 1.3rem;
    font-weight: 700;
}

.sunbed-status {
    font-size: 0.85rem;
    opacity: 0.95;
}

.sunbed-price {
    font-size: 0.8rem;
    opacity: 0.9;
}

.sunbed-card.is-free { background: #2e9e5b; }
.sunbed-card.is-occupied { background: #c0392b; }
.sunbed-card.is-reserved { background: #e08e0b; }
.sunbed-card.is-blocked { background: #555e68; }
.sunbed-card.is-cleaning { background: #3aa0c9; }

/* Sunbed card action buttons */
.sunbed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
    justify-content: center;
}

.act {
    border: none;
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 40px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.85);
    color: #1f2d3d;
}

.act:disabled {
    opacity: 0.55;
    cursor: default;
}

.act-primary {
    background: #ffffff;
    color: #11324d;
}

.act-ghost {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert {
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.alert-error { background: #fdecea; color: #a32018; border: 1px solid #f5c6c0; }
.alert-success { background: #e7f6ec; color: #1d6f3a; border: 1px solid #b7e3c5; }
.alert-info { background: #e7f0fb; color: #1b4f8a; border: 1px solid #b9d3f0; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
}

.modal-box {
    background: #fff;
    border-radius: 16px;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
    color: #666;
    min-width: 40px;
    min-height: 40px;
}

.modal-body { padding: 1.25rem; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #eee;
}

/* Forms */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.form-row label {
    font-weight: 600;
    color: #333;
}

.form-row input,
.form-row select {
    padding: 0.7rem 0.8rem;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    font-size: 1.05rem;
    min-height: 48px;
}

/* Modal / large buttons */
.btn-modal {
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    cursor: pointer;
}

.btn-cancel { background: #e9ecef; color: #333; }
.btn-confirm { background: #1b6ec2; color: #fff; }
.btn-confirm:disabled { opacity: 0.6; cursor: default; }
.btn-large { font-size: 1.15rem; padding: 0.9rem 1.6rem; }

.section-h {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.details-h {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
}

.payment-list {
    margin: 0.25rem 0 0.5rem 1rem;
    padding: 0;
}

.closing-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.settings-form { max-width: 480px; }

/* Tariff quick-select buttons inside modals */
.tariff-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.tariff-options .act {
    background: #eef3f8;
    color: #11324d;
    border: 1px solid #cdd9e5;
}

/* Two inputs side by side (e.g. start/end time) */
.form-row-inline {
    flex-direction: row;
    gap: 1rem;
}

.form-row-inline > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.form-row-inline input {
    padding: 0.7rem 0.8rem;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    font-size: 1.05rem;
    min-height: 48px;
}

/* Maintenance / info section */
.info-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 720px; }

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.info-label { font-weight: 600; color: #333; }
.info-value { color: #555; text-align: right; word-break: break-all; }

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.filter-field.filter-grow { flex: 1; min-width: 160px; }

.filter-field label { font-weight: 600; font-size: 0.85rem; color: #444; }

.filter-field select,
.filter-field input {
    padding: 0.6rem 0.7rem;
    border: 1px solid #ccd2da;
    border-radius: 10px;
    font-size: 1rem;
    min-height: 44px;
}

.filter-clear { align-self: flex-end; }

.empty-state {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    background: #f7f9fb;
    border: 1px dashed #cdd9e5;
    border-radius: 12px;
}

/* Payment list with inline actions */
.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.35rem 0;
}

.payment-item-actions { display: flex; gap: 0.4rem; }
.payment-item-actions .act { background: #eef3f8; color: #11324d; border: 1px solid #cdd9e5; }

/* Admin tables / lists */
.admin-section { margin-bottom: 2rem; }

.admin-list { display: flex; flex-direction: column; gap: 0.5rem; }

.admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
}

.admin-row-main { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-row-title { font-weight: 700; font-size: 1.05rem; }
.admin-row-sub { color: #6c757d; font-size: 0.9rem; }
.admin-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Reservations cards */
.res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.res-card {
    border: 1px solid #e3e8ee;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.res-card-title { font-weight: 700; font-size: 1.1rem; }
.res-card-line { color: #444; font-size: 0.92rem; }
.res-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.res-badge {
    align-self: flex-start;
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #e08e0b;
}

@media (max-width: 600px) {
    .content {
        padding-top: 0.9rem;
        padding-right: max(0.85rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
        padding-left: max(0.85rem, env(safe-area-inset-left, 0px)) !important;
    }

    .dashboard-header {
        align-items: flex-start;
        gap: 0.35rem 0.75rem;
        margin-bottom: 0.8rem;
    }

    .dashboard-header h1 {
        margin-bottom: 0;
        font-size: clamp(1.65rem, 8vw, 2rem);
        line-height: 1.15;
    }

    .business-date {
        font-size: 1rem;
        line-height: 1.5;
    }

    .section-h {
        margin-top: 1.15rem;
        margin-bottom: 0.65rem;
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-bottom: 0.85rem;
    }

    .stat-grid > .stat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .stat-card {
        min-height: 88px;
        padding: 0.85rem 1rem;
        border-radius: 12px;
    }

    .stat-value {
        font-size: clamp(1.65rem, 8vw, 2rem);
        overflow-wrap: anywhere;
    }

    .stat-label {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .legend {
        gap: 0.55rem 0.9rem;
    }

    .sunbed-grid,
    .res-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .sunbed-card,
    .res-card,
    .admin-row {
        padding: 0.8rem;
    }

    .filter-bar,
    .filter-field,
    .filter-field.filter-grow {
        width: 100%;
        min-width: 0;
    }

    .filter-field select,
    .filter-field input {
        width: 100%;
    }

    .filter-clear,
    .closing-actions .btn-large {
        width: 100%;
    }

    .closing-actions {
        margin-top: 1.1rem;
        padding-bottom: 0.5rem;
    }

    .form-row-inline {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-box {
        max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer .btn-modal {
        flex: 1 1 140px;
    }

    .info-row {
        flex-direction: column;
        gap: 0.2rem;
    }

    .info-value {
        text-align: left;
    }
}

@media (max-width: 370px) {
    .stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stat-grid > .stat-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ================================================================
   Online flow (umbrella-based beach app)
   ================================================================ */
.online-shell {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #fffbe6;
    display: flex;
    flex-direction: column;
}

.online-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.login-card h1 { margin: 0 0 .25rem; font-size: 1.5rem; }

.login-brand-footer {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid #edf0f2;
    text-align: center;
}

.login-brand-link {
    border: 0;
    background: transparent;
    color: #6c7880;
    font-size: .78rem;
    letter-spacing: .02em;
    padding: .4rem .65rem;
    border-radius: 999px;
    cursor: pointer;
}

.login-brand-link span {
    color: #087f8c;
    font-weight: 700;
}

.login-brand-link:hover,
.login-brand-link:focus-visible {
    background: #eef8f9;
    color: #04323f;
    outline: none;
}

/* Beach map: fixed, mobile-first two-row command header. */
.beach-map-header {
    flex: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: .55rem .65rem .65rem;
    color: #fff;
    background: linear-gradient(135deg, #064c5a 0%, #087f8c 100%);
    box-shadow: 0 2px 8px rgba(4, 50, 63, .2);
}

.beach-map-header-main {
    display: grid;
    grid-template-columns: minmax(3.25rem, auto) minmax(0, 1fr) 2.65rem;
    align-items: center;
    gap: .5rem;
}

.beach-map-header .online-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}

.map-icon-button {
    min-height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0 .65rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.map-back-label {
    font-size: .78rem;
    font-weight: 700;
}

.map-refresh-button {
    width: 2.65rem;
    padding: 0;
    font-size: 1.35rem;
}

.map-icon-button:active,
.map-action-chip:active {
    transform: translateY(1px);
}

.beach-map-header-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    margin-top: .55rem;
}

.map-action-list {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}

.map-action-chip {
    min-width: 0;
    min-height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #064c5a;
    padding: .35rem .35rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.map-action-chip-danger {
    color: #9c2f25;
    background: #fff5f3;
}

.beach-map-header .live-badge {
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

@media (max-width: 350px) {
    .beach-map-header { padding-inline: .45rem; }
    .map-back-label { display: none; }
    .map-action-chip { font-size: .66rem; padding-inline: .2rem; }
    .beach-map-header-actions { gap: .35rem; }
}

@media (min-width: 641px) {
    .beach-map-header { padding-inline: 1rem; }
    .beach-map-header-actions { grid-template-columns: auto auto; justify-content: flex-end; }
    .map-action-list { display: flex; }
    .map-action-chip { padding-inline: .8rem; }
}

.online-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    background: #5bc0eb;
    color: #04323f;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
    flex: none; /* header keeps its height; it never scrolls */
}

.online-title {
    font-size: 1.05rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.online-topbar-right {
    display: flex;
    align-items: center;
    gap: .35rem .65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Keep the signed-in user's name from crowding the header on small phones. */
.online-topbar-right .muted {
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live-sync (SignalR) status pill on the beach map header. */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}
.live-badge::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
}
.live-badge.live-on { background: #e3f9e5; color: #1b7a36; }
.live-badge.live-wait { background: #fff4d6; color: #8a6100; }
.live-badge.live-off { background: #fde2e0; color: #b02a20; }

.online-content { padding: 1rem; }

@media (max-width: 420px) {
    .online-topbar { padding: .5rem .6rem; }
    .online-title { font-size: .98rem; }
    .online-topbar-right { font-size: .9rem; }
    .online-topbar-right .muted { max-width: 36vw; }
}

.form-field { display: flex; flex-direction: column; margin-bottom: .75rem; }
.form-field label { font-size: .85rem; margin-bottom: .25rem; color: #444; }
.form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.form-control {
    padding: .55rem .65rem;
    border: 1px solid #cfd6dd;
    border-radius: 8px;
    font-size: 1rem;
}
.form-error { color: #c0392b; margin: .5rem 0; }
.form-warning { color: #b9770e; margin: .5rem 0; }

.btn-primary, .btn-secondary, .btn-danger {
    border: none;
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-primary { background: #2e9e4f; color: #fff; width: 100%; }
.btn-secondary { background: #e0e0e0; color: #222; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .6; cursor: default; }
.btn-link { background: none; border: none; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; }

/* Beach selection */
.beach-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.beach-card {
    text-align: left;
    background: #fff;
    border: 1px solid #e3e3c0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.beach-card-name { font-weight: 700; font-size: 1.05rem; }
.beach-card-meta { color: #777; font-size: .8rem; }

/* Beach map ----------------------------------------------------------------
   Layout: the map page fills the viewport. Header + summary stay fixed; only
   the .umbrella-scroll container pans (both axes). The grid inside it uses
   fixed-width cells and width:max-content, so it can be wider/taller than the
   viewport without ever making the page itself scroll horizontally. */
.map-shell {
    /* Pin the map to the viewport so it has a definite height: the header + summary stay put
       and the umbrella scroll area gets a bounded box to scroll inside. position:fixed ignores
       the body's safe-area padding, so we re-apply the insets here (no double padding). */
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fffbe6;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.beach-map-summary {
    flex: none;
    text-align: center;
    font-size: .95rem;
    padding: .6rem .75rem;
    color: #333;
    background: #fffef2;
    border-bottom: 1px solid #ece9c8;
}

.umbrella-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;                         /* the ONLY pannable area */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;           /* don't chain to the page */
    padding: 10px;
    box-sizing: border-box;
}

.umbrella-grid {
    --umbrella-cell: 66px;                   /* bigger touch target than before */
    --umbrella-gap: 10px;                    /* more breathing room between umbrellas */
    --consumption-badge-size: 24px;
    display: grid;
    gap: var(--umbrella-gap);
    width: max-content;                      /* may exceed the viewport */
    margin: 0;                               /* start at column 1 (top-left) */
}

/* Phones: larger, well-spaced cells so only ~5–6 umbrellas show per row and each is easy to tap.
   The grid still pans inside .umbrella-scroll; only the cell/gap sizing changes here. */
@media (max-width: 480px) {
    .umbrella-grid {
        --umbrella-cell: 60px;
        --umbrella-gap: 10px;
        --consumption-badge-size: 23px;
    }
}

@media (max-width: 360px) {
    .umbrella-grid {
        --umbrella-cell: 54px;
        --umbrella-gap: 8px;
        --consumption-badge-size: 21px;
    }
}

.umbrella {
    position: relative;
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 2px;
}
.umbrella-icon { font-size: 1.6rem; line-height: 1; }
.umbrella-code {
    font-size: .72rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0 .3rem;
    margin-top: 2px;
}
.umbrella-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #6c757d;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Consumption indicator: a prominent circular badge in the TOP-LEFT corner (the sunbed count badge
   sits top-right, so the two never overlap). White fill keeps the icon legible on every cell colour
   (green/red/orange/blue/gray); the coloured ring + shadow make it pop on a small phone screen. */
.umbrella-consumption {
    position: absolute;
    top: -5px;
    left: -5px;
    width: var(--consumption-badge-size);
    height: var(--consumption-badge-size);
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--consumption-badge-size) * 0.62);
    line-height: 1;
    background: #fff;
    border: 2px solid #d11;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* Unpaid consumption = warning red ring; paid = settled green ring. */
.umbrella-consumption.consumption-unpaid { border-color: #d11; }
.umbrella-consumption.consumption-paid { border-color: #1b7a36; }

.u-free { background: #2e9e4f; }
.u-cash { background: #d94141; }
.u-card { background: #e8881a; }
.u-protocol { background: #2f72d6; }
.u-disabled { background: #9aa0a6; }

/* ---- Online administration (owners / users / beach create) ---- */
.empty-state { text-align: center; padding: 1.5rem 0; }
.empty-actions { margin-top: 1rem; display: flex; justify-content: center; }

.content-actions { margin-top: 1.25rem; }
.content-actions .btn-primary { width: 100%; }

.context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #eef7fb;
    border: 1px solid #cfe6f0;
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

.form-card {
    background: #fff;
    border: 1px solid #e3e3c0;
    border-radius: 12px;
    padding: 1rem;
    max-width: 480px;
}
.form-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.form-card .btn-primary { width: 100%; margin-top: .5rem; }
.form-success { color: #2e7d32; margin: .5rem 0; }

.admin-list { display: flex; flex-direction: column; gap: .6rem; }
.admin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #fff;
    border: 1px solid #e3e3c0;
    border-radius: 10px;
    padding: .75rem .9rem;
}
.admin-card-main { display: flex; flex-direction: column; gap: .2rem; }
.admin-card-name { font-weight: 600; }
.admin-card-meta { color: #777; font-size: .8rem; display: flex; align-items: center; gap: .4rem; }
.admin-card-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.badge-inactive {
    background: #c0392b;
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    padding: .05rem .4rem;
}

/* ---- Audit / history views ---- */
.last-occupation {
    background: #f5f9ff;
    border: 1px solid #d8e6f5;
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: .9rem;
}
.last-occupation p { margin: .15rem 0; font-size: .9rem; }

.log-list { display: flex; flex-direction: column; gap: .5rem; }
.log-item {
    border: 1px solid #e3e3c0;
    border-radius: 8px;
    padding: .5rem .65rem;
    background: #fff;
}
.log-item-head { display: flex; justify-content: space-between; gap: .5rem; }
.log-action { font-weight: 700; }
.log-time { color: #777; font-size: .85rem; }
.log-item-meta { font-size: .85rem; color: #555; }
.log-item-note { font-size: .85rem; color: #b9770e; margin-top: .2rem; }
.log-item-values { font-size: .8rem; color: #666; margin-top: .2rem; word-break: break-word; }

/* Daily log page */
.log-toolbar {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem .75rem;
    background: #fffef2;
    border-bottom: 1px solid #ece9c8;
}
.log-date { max-width: 180px; }
.log-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    border: 1px solid #cfd6dd;
    background: #fff;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}
.chip-active { background: #2e9e4f; color: #fff; border-color: #2e9e4f; }

/* Mobile-first: show stacked cards, hide the table. Wider screens flip this (see media query). */
.log-cards { display: flex; flex-direction: column; gap: .5rem; }
.log-table { display: none; }

.log-card {
    border: 1px solid #e3e3c0;
    border-radius: 10px;
    padding: .55rem .7rem;
    background: #fff;
}
.log-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
}
.log-card-time { color: #777; font-size: .85rem; }
.log-card-action { font-weight: 700; }
.log-card-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .88rem;
    padding: .12rem 0;
}
.log-card-row .lbl { color: #777; flex: none; }
.log-card-row span:last-child { text-align: right; word-break: break-word; }

@media (min-width: 641px) {
    .log-cards { display: none; }
    .log-table { display: table; width: 100%; border-collapse: collapse; font-size: .85rem; }
    .log-table th, .log-table td {
        text-align: left;
        padding: .4rem .5rem;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }
    .log-table th { color: #555; font-weight: 700; position: sticky; top: 0; background: #fffbe6; }
    .log-table td { word-break: break-word; }
}

/* ---- Daily report (Raport zilnic) — mobile-first cards --------------------------------------- */
.report-empty {
    background: #eef7ff;
    border: 1px solid #cfe6fb;
    color: #225;
    border-radius: 10px;
    padding: .7rem .85rem;
    margin-bottom: .75rem;
    font-size: .9rem;
}

.report-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: .85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.report-card-title {
    font-weight: 700;
    font-size: .95rem;
    color: #04323f;
    margin-bottom: .6rem;
}

.report-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

/* Two columns on phones, more on wider screens — never a cramped wide table. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}
@media (min-width: 560px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

.stat {
    display: flex;
    flex-direction: column;
    background: #f7f9fb;
    border-radius: 9px;
    padding: .5rem .55rem;
}
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: #0b3d2e; }
.stat-label { font-size: .72rem; color: #5a6a72; margin-top: .15rem; }

.emp-list { display: flex; flex-direction: column; gap: .5rem; }
.emp-row {
    border: 1px solid #eee;
    border-radius: 9px;
    padding: .5rem .6rem;
}
.emp-name { font-weight: 700; margin-bottom: .25rem; }
.emp-stats { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .9rem; }
.emp-stats .lbl { color: #7a868d; font-size: .72rem; display: block; }

.cmp-grid { display: flex; flex-direction: column; gap: .45rem; }
.cmp-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: baseline;
    gap: .5rem;
}
.cmp-label { color: #333; }
.cmp-today { font-weight: 700; font-size: 1.1rem; }
.cmp-prev { color: #8a949a; font-size: .85rem; }
.cmp-delta { font-weight: 700; font-size: .9rem; min-width: 2.5rem; text-align: right; }
.delta-pos { color: #1b7a36; }
.delta-neg { color: #b02a20; }
.delta-zero { color: #8a949a; }
.cmp-help { font-size: .72rem; margin: .5rem 0 0; }

/* ---- Day open/close (Închidere zi) ---------------------------------------------------------- */
.day-badge {
    display: inline-block;
    font-weight: 700;
    font-size: .8rem;
    padding: .2rem .6rem;
    border-radius: 999px;
}
.day-open { background: #e3f9e5; color: #1b7a36; }
.day-closed { background: #fde2e0; color: #b02a20; }
.day-closed-meta { font-size: .8rem; margin: .4rem 0 0; }
.day-notes { font-style: italic; color: #555; margin: .35rem 0 0; }

.day-warning {
    background: #fff4d6;
    border: 1px solid #f0dca0;
    color: #8a6100;
    border-radius: 10px;
    padding: .7rem .85rem;
    margin-bottom: .85rem;
    font-size: .9rem;
}
.day-success {
    background: #e3f9e5;
    border: 1px solid #b6e6c0;
    color: #1b7a36;
    border-radius: 10px;
    padding: .7rem .85rem;
    margin-bottom: .85rem;
    font-size: .9rem;
}
.day-force { font-weight: 600; margin-bottom: .6rem; }
.day-close-btn { width: 100%; margin-top: .4rem; }

/* ---- App self-update (Actualizare) --------------------------------------------------------- */
/* Optional update: dismissible banner pinned at the top of the shell. */
.update-banner {
    flex: none;
    background: #eef7ff;
    border-bottom: 1px solid #cfe6fb;
    padding: .6rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.update-banner-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.update-banner-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.update-version { font-size: .8rem; color: #04323f; }
.update-notes { font-size: .8rem; color: #555; }
.update-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Mandatory update: full-screen blocking overlay (no access to operational pages). */
.update-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 50, 63, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.update-modal {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.update-title { margin: 0 0 .4rem; font-size: 1.15rem; color: #04323f; }
.update-sub { margin: 0 0 .5rem; color: #b02a20; font-weight: 600; }
.update-modal .update-version { font-size: .95rem; }
.update-modal .update-notes { margin: .4rem 0; }
.update-modal .update-actions { margin-top: 1rem; justify-content: flex-end; }

.update-progress {
    height: 8px;
    background: #e3e8ec;
    border-radius: 999px;
    overflow: hidden;
    margin-top: .6rem;
}
.update-progress-bar { height: 100%; background: #2e9e4f; transition: width .15s linear; }
.update-progress-text { font-size: .8rem; color: #555; margin: .3rem 0 0; }
.update-message { font-size: .85rem; color: #b02a20; margin: .4rem 0 0; }

.update-inline-note {
    flex: none;
    background: #fffef2;
    border-bottom: 1px solid #ece9c8;
    padding: .5rem .85rem;
    font-size: .85rem;
    color: #555;
    text-align: center;
}

/* ================================================================
   AC Beach Manager — shared online visual polish
   Scoped to the online shell so the legacy local SQLite screens keep
   their existing appearance and behavior.
   ================================================================ */
.online-shell {
    color: #17343a;
    background:
        radial-gradient(circle at 12% 0%, rgba(91, 192, 235, .18), transparent 30rem),
        #f3f8f8;
}

.online-center {
    background:
        radial-gradient(circle at 50% 18%, rgba(91, 192, 235, .25), transparent 18rem),
        linear-gradient(180deg, #edf8fa 0%, #f8fbfb 100%);
}

.login-card {
    border: 1px solid rgba(8, 127, 140, .14);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(4, 50, 63, .14);
}

.login-card h1 {
    color: #064c5a;
    letter-spacing: -.025em;
}

.login-card .muted { margin-bottom: 1.25rem; }

.login-brand-footer { border-color: #e2eeee; }

.online-topbar {
    min-height: 3.65rem;
    padding: .6rem .7rem;
    color: #fff;
    background: linear-gradient(135deg, #064c5a 0%, #087f8c 100%);
    box-shadow: 0 2px 8px rgba(4, 50, 63, .18);
}

.online-topbar .online-title {
    color: #fff;
    font-weight: 700;
    letter-spacing: -.01em;
}

.online-topbar .muted { color: rgba(255, 255, 255, .8); }

.online-shell .btn-link {
    min-height: 2.15rem;
    border: 0;
    border-radius: 999px;
    padding: .38rem .7rem;
    color: #087f8c;
    background: #e8f5f6;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.online-topbar .btn-link {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
}

.online-shell .btn-link:active,
.online-shell .btn-primary:active,
.online-shell .btn-secondary:active,
.online-shell .btn-danger:active,
.beach-card:active {
    transform: translateY(1px);
}

.online-shell .btn-primary,
.online-shell .btn-secondary,
.online-shell .btn-danger {
    min-height: 2.65rem;
    border-radius: 12px;
    padding: .65rem .95rem;
    font-size: .92rem;
    box-shadow: 0 2px 5px rgba(4, 50, 63, .1);
}

.online-shell .btn-primary {
    background: linear-gradient(135deg, #087f8c, #086f7a);
    border-color: #087f8c;
}

.online-shell .btn-secondary {
    color: #064c5a;
    background: #e8f3f4;
    border: 1px solid #cfe3e5;
}

.online-shell .btn-danger {
    background: #b83a30;
}

.online-content {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    box-sizing: border-box;
    padding: 1rem;
}

.beach-select-topbar {
    align-items: center;
}

.beach-select-topbar .online-title {
    flex-basis: 100%;
}

.beach-select-topbar .online-topbar-right {
    width: 100%;
    justify-content: center;
    gap: .4rem;
}

.form-field { margin-bottom: .9rem; }

.form-field label {
    color: #38565c;
    font-weight: 650;
}

.form-control {
    min-height: 2.75rem;
    box-sizing: border-box;
    border-color: #cadadd;
    border-radius: 11px;
    background: #fbfdfd;
    color: #17343a;
}

.form-control:focus {
    border-color: #1593a0;
    box-shadow: 0 0 0 .2rem rgba(8, 127, 140, .14);
}

.form-error,
.form-warning,
.form-success {
    border-radius: 10px;
    padding: .6rem .7rem;
    font-size: .87rem;
}

.form-error { background: #fff0ee; }
.form-warning { background: #fff7df; }
.form-success { background: #eaf8ed; }

.beach-list { gap: .8rem; }

.beach-card {
    min-height: 6.25rem;
    border-color: #d9e7e8;
    border-radius: 16px;
    padding: 1rem 1.05rem;
    color: #17343a;
    background: linear-gradient(145deg, #fff 0%, #f7fbfb 100%);
    box-shadow: 0 5px 16px rgba(4, 50, 63, .07);
}

.beach-card-name { color: #064c5a; font-size: 1.08rem; }
.beach-card-meta { color: #6b7e82; }

.empty-state {
    border: 1px dashed #bdd8db;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, .68);
}

.context-bar {
    border-color: #c9e2e4;
    border-radius: 13px;
    background: #eaf6f7;
    box-shadow: 0 2px 8px rgba(4, 50, 63, .04);
}

.form-card,
.admin-card,
.report-card,
.log-card,
.last-occupation {
    border-color: #dce8e9;
    background: #fff;
    box-shadow: 0 5px 18px rgba(4, 50, 63, .065);
}

.form-card {
    border-radius: 16px;
    padding: 1.1rem;
    margin-top: 1rem;
}

.online-content > .form-card:first-child { margin-top: 0; }

.form-card h3,
.report-card-title {
    color: #064c5a;
    letter-spacing: -.01em;
}

.admin-list { gap: .7rem; }

.admin-card {
    border-radius: 14px;
    padding: .85rem .9rem;
}

.admin-card-name { color: #17343a; font-weight: 700; }
.admin-card-meta { color: #708286; }

.log-toolbar {
    padding: .7rem;
    border-color: #dce8e9;
    background: #f8fbfb;
}

.chip {
    min-height: 2rem;
    border-color: #cadfe1;
    color: #31555b;
    background: #fff;
    font-weight: 650;
}

.chip-active {
    border-color: #087f8c;
    background: #087f8c;
    color: #fff;
}

.umbrella-scroll {
    background: #f3f8f8;
}

.report-card {
    border-radius: 16px;
    padding: .95rem;
}

.stat {
    border: 1px solid #e1ecec;
    background: #f7fbfb;
}

.stat-value { color: #087f8c; }

.emp-row {
    border-color: #e1ecec;
    background: #fbfdfd;
}

.day-warning,
.day-success,
.report-empty {
    border-radius: 13px;
}

.update-banner {
    border-color: #c6e1e4;
    color: #17343a;
    background: linear-gradient(135deg, #edf9fa, #f8fcfc);
    box-shadow: 0 3px 12px rgba(4, 50, 63, .1);
}

.update-banner-main { align-items: center; }

.update-security-note {
    display: block;
    margin: .35rem 0 0;
    color: #63777b;
    font-size: .76rem;
    line-height: 1.35;
}

.update-actions { flex-wrap: wrap; }
.update-actions .btn-primary { width: auto; }

.update-permission {
    margin-top: .65rem;
    padding: .7rem .8rem;
    border: 1px solid #ecd493;
    border-radius: 12px;
    color: #765800;
    background: #fff8df;
}

.update-permission p {
    margin: 0 0 .55rem;
    font-size: .87rem;
}

.update-modal {
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.update-title { color: #064c5a; }
.update-progress-bar { background: linear-gradient(90deg, #087f8c, #27a7b3); }
.update-message { padding: .55rem .65rem; border-radius: 9px; background: #fff0ee; }
.update-inline-note { color: #31555b; background: #eef8f9; border-color: #d5e9eb; }

@media (max-width: 520px) {
    .online-center { padding: 1rem; }
    .login-card { padding: 1.35rem; }

    .online-topbar {
        gap: .45rem;
        padding: .55rem .6rem;
    }

    .online-topbar > .btn-link {
        max-width: 5.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .online-content { padding: .8rem; }

    .admin-card {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-card-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-card-actions > button { flex: 1 1 auto; }

    .update-banner-main { align-items: stretch; }
    .update-actions { width: 100%; }
    .update-actions > button { flex: 1 1 auto; }
}

@media (min-width: 641px) {
    .beach-select-topbar .online-title { flex-basis: auto; text-align: left; }
    .beach-select-topbar .online-topbar-right { width: auto; justify-content: flex-end; }
    .online-content { padding: 1.25rem; }
}

/* Role-based administration additions. */
.online-users-page {
    flex: 1;
    min-height: 0;
    max-height: calc(100dvh - 3.65rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.correction-panel {
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid #cfe3e5;
    border-radius: 14px;
    background: #f4fafb;
}

/* Map-only controls: header and summary remain fixed while the grid zooms/pans. */
.beach-map-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    padding: .45rem .65rem;
    min-width: 0;
}

.beach-map-tools .beach-map-summary { padding: 0; min-width: 0; }
.map-tool-actions, .map-zoom-controls { display: flex; align-items: center; gap: .35rem; }
.map-zoom-controls {
    flex: 0 0 auto;
    padding: .2rem;
    border: 1px solid rgba(15, 90, 95, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
}
.map-zoom-controls button, .map-edit-link {
    min-height: 2rem;
    border: 0;
    border-radius: 999px;
    padding: .3rem .62rem;
    color: var(--primary, #0f6f73);
    background: transparent;
    font-weight: 700;
    white-space: nowrap;
}
.map-zoom-controls button:disabled { opacity: .35; }
.map-edit-link { background: rgba(15, 111, 115, .1); }

.map-editor-shell { height: 100dvh; overflow: hidden; background: var(--page-bg, #f5f8f7); }
.map-editor-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.map-editor-content {
    height: calc(100dvh - 4rem - env(safe-area-inset-top));
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem;
    -webkit-overflow-scrolling: touch;
}
.map-editor-warning {
    padding: .7rem .8rem;
    margin-bottom: .65rem;
    border-left: 4px solid #d89b28;
    border-radius: .55rem;
    background: #fff7df;
    color: #65490f;
}
.map-editor-actions, .map-cell-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.map-editor-help { margin: .65rem 0; color: #5f6f70; font-size: .9rem; }
.map-editor-scroll { max-height: 48dvh; border-radius: .8rem; background: #e9dcc1; }
.map-editor-grid { padding: .8rem; }
.map-editor-cell {
    position: relative;
    width: var(--umbrella-cell);
    height: var(--umbrella-cell);
    border: 2px solid transparent;
    border-radius: .65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: #274446;
}
.map-umbrella-cell { background: #e5f5ed; }
.map-disabled-cell { background: #d8dddd; opacity: .75; }
.map-path-cell { background: rgba(226, 199, 148, .45); border: 1px dashed rgba(112, 82, 39, .45); }
.map-editor-cell.is-selected { border-color: #0f6f73; box-shadow: 0 0 0 2px rgba(15,111,115,.18); }
.path-dots { letter-spacing: .18rem; }
.editor-occupied-badge { font-size: .58rem; padding: .1rem .25rem; border-radius: .3rem; background: #b93636; color: white; }
.map-cell-editor { margin-top: .75rem; padding: .85rem; border-radius: .8rem; background: white; box-shadow: 0 3px 14px rgba(30,55,55,.08); }
.map-cell-editor h2 { margin: 0 0 .65rem; font-size: 1.05rem; }

@media (max-width: 560px) {
    .beach-map-tools { align-items: stretch; flex-direction: column; }
    .map-tool-actions { justify-content: space-between; }
    .map-zoom-controls { width: fit-content; }
    .map-editor-actions > button { flex: 1 1 8rem; }
}

.correction-panel h3,
.password-reset-panel h3 {
    margin: 0 0 .3rem;
    color: #064c5a;
    font-size: 1rem;
}

.correction-panel > .muted,
.password-reset-panel > .muted {
    margin: 0 0 .85rem;
    font-size: .8rem;
}

.password-reset-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dce8e9;
}

@media (max-width: 520px) {
    .online-users-page {
        width: 100%;
        max-width: 100%;
    }

    .online-users-page .form-card {
        margin-bottom: 1rem;
    }
}