/* wwwroot/css/app.css */

/* --- default template bits you pasted --- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* NOTE:
   This is the default MVC template focus ring (blue).
   We KEEP it for the app, but we override it for AUTH inputs later. */
.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;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.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;
}

/* =========================
   Neutral dark (grey/black) + green accent
   ========================= */
:root {
    --bg: #0b0d0f; /* near-black */
    --bg2: #111417; /* charcoal */
    --surface: rgba(255,255,255,0.05);
    --surface2: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.10);
    --text: #f3f4f6; /* off-white */
    --muted: rgba(243,244,246,0.68);
    --accent: #22c55e; /* green */
    --accent2: #16a34a;
    --danger: #ef4444;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 18px 44px rgba(0,0,0,0.55);
    --shadow-sm: 0 10px 24px rgba(0,0,0,0.40);
    /* AUTH (minimal) shared control color — used by BOTH inputs and Sign in button */
    /* CHANGED: make it a solid neutral (removes background tint from translucent blend) */
    --auth-ctl-bg: #1e2024;
    --auth-ctl-bg-hover: #26282c;
    --auth-ctl-border: rgba(255,255,255,0.12);
    --auth-ctl-border-strong: rgba(255,255,255,0.18);
    /* CHANGED: neutral ring (not blue/green) */
    --auth-focus-ring: rgba(255,255,255,0.10);
}

/* --------- Base --------- */
html, body {
    height: 100%;
}

    body.app-body {
        background: radial-gradient(900px 520px at 18% 0%, rgba(34,197,94,0.10), transparent 55%), radial-gradient(820px 520px at 82% 0%, rgba(255,255,255,0.04), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
        color: var(--text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

/* Keep normal pages readable; map page overrides this */
.container.app-container {
    max-width: 1200px;
}

/* --------- Navbar --------- */
.app-navbar {
    background: rgba(12, 14, 16, 0.78) !important; /* neutral, not blue */
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

    .app-navbar .navbar-brand {
        font-weight: 850;
        letter-spacing: 0.2px;
    }

    .app-navbar .nav-link {
        opacity: 0.82;
        border-radius: 999px;
        padding: 0.45rem 0.85rem;
        transition: all 120ms ease;
    }

        .app-navbar .nav-link:hover {
            opacity: 1;
            background: rgba(255,255,255,0.08);
        }

        .app-navbar .nav-link.active {
            opacity: 1;
            background: rgba(34,197,94,0.18);
            border: 1px solid rgba(34,197,94,0.30);
        }

    .app-navbar .btn {
        border-radius: 999px;
    }

/* --------- Page header --------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-title {
    font-weight: 900;
    letter-spacing: -0.4px;
    margin: 0;
}

.page-subtitle {
    margin: 0.25rem 0 0 0;
    color: var(--muted);
}

/* --------- Cards --------- */
.card.app-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .card.app-card .card-body {
        padding: 1.1rem;
    }

/* --------- Tables --------- */
.table.app-table {
    color: var(--text);
    border-color: rgba(255,255,255,0.08);
}

    .table.app-table thead th {
        color: rgba(243,244,246,0.85);
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }

    .table.app-table tbody tr:hover {
        background: rgba(255,255,255,0.06);
    }

/* --------- Forms --------- */
.form-control, .form-select, textarea {
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm);
}

    .form-control::placeholder, textarea::placeholder {
        color: rgba(243,244,246,0.45);
    }

    .form-control:focus, .form-select:focus, textarea:focus {
        box-shadow: 0 0 0 .25rem rgba(34,197,94,0.18) !important;
        border-color: rgba(34,197,94,0.38) !important;
    }

.form-label {
    color: rgba(243,244,246,0.86);
}

.form-text {
    color: rgba(243,244,246,0.55) !important;
}

.alert {
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.07);
    color: var(--text);
}

.btn {
    border-radius: 12px;
}

    /* Slightly sleeker default button styling */
    .btn.btn-dark {
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.14);
        color: var(--text);
    }

        .btn.btn-dark:hover {
            background: rgba(255,255,255,0.14);
        }

.btn-outline-light:hover {
    background: rgba(255,255,255,0.10);
}

/* =========================
   MAP PAGE (full width, padded edges)
   Use ViewData["BodyClass"]="map-page"
   ========================= */
.map-page .app-container {
    max-width: 100% !important;
    padding-left: 22px;
    padding-right: 22px;
}

    .map-page .app-container.py-4 {
        padding-top: 18px !important;
    }

.map-shell {
    padding: 10px 0 6px 0;
}

.map-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 12px 0;
}

.map-title {
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -0.4px;
    margin: 0;
}

.map-subtitle {
    margin: 4px 0 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.map-hint {
    color: rgba(243,244,246,0.70);
    font-size: 0.9rem;
    white-space: nowrap;
    padding-top: 6px;
}

.map-frame {
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: rgba(255,255,255,0.03);
}

#map {
    width: 100%;
    height: calc(100vh - 190px);
    min-height: 560px;
}

/* Leaflet neutral-dark styling */
.leaflet-container {
    background: #0b0d0f;
}

.leaflet-control-zoom a {
    background: rgba(20,23,26,0.88) !important;
    color: rgba(243,244,246,0.92) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

    .leaflet-control-zoom a:hover {
        background: rgba(255,255,255,0.10) !important;
    }

.leaflet-control-attribution {
    background: rgba(20,23,26,0.82) !important;
    color: rgba(243,244,246,0.70) !important;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
}

/* Popup = your "details" panel (no extra card needed) */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: rgba(18, 20, 22, 0.96) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow-sm);
}

.leaflet-popup-content {
    margin: 12px 12px;
}

/* Popup typography */
.app-popup-title {
    font-weight: 900;
    font-size: 1.03rem;
    margin-bottom: 2px;
}

.app-popup-sub {
    opacity: 0.78;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.app-popup-kv {
    font-size: 0.86rem;
    opacity: 0.92;
    line-height: 1.35;
}

/* Device rows inside popup */
.app-device-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

.app-device-name {
    font-weight: 700;
}

.app-device-serial {
    font-size: 0.82rem;
    opacity: 0.70;
}

/* Small "status pill" */
.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.app-pill--ok {
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.14);
    color: rgba(34,197,94,0.95);
}

.app-pill--off {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: rgba(243,244,246,0.82);
}

/* =========================
   AUTH PAGES (base)
   ========================= */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 16px;
}

.auth-card {
    width: 100%;
    max-width: 520px;
}

.auth-card-wide {
    width: 100%;
    max-width: 980px;
}

.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    box-shadow: var(--shadow-sm);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(34,197,94,0.95);
    box-shadow: 0 0 0 6px rgba(34,197,94,0.14);
}

.auth-title {
    font-weight: 900;
    letter-spacing: -0.3px;
    margin: 14px 0 2px 0;
}

.auth-subtitle {
    margin: 0 0 18px 0;
    color: var(--muted);
}

.auth-footer {
    text-align: center;
    color: rgba(243,244,246,0.62);
    font-size: 0.85rem;
    margin-top: 14px;
}

a {
    color: rgba(34,197,94,0.95);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Validation summary readability on dark */
.validation-summary-errors, .text-danger {
    color: rgba(248,113,113,0.95) !important;
}

/* =========================================================
   FIX: native <select> dropdown list becomes "white/invisible"
   ========================================================= */
html[data-bs-theme="dark"],
body.app-body {
    color-scheme: dark;
}

.form-control,
.form-select,
textarea,
select,
input {
    color-scheme: dark;
}

    .form-select option,
    select option {
        background-color: #0f1113;
        color: #f3f4f6;
    }

        .form-select option[value=""],
        select option[value=""] {
            color: rgba(243, 244, 246, 0.65);
        }

        .form-select option:disabled,
        select option:disabled {
            color: rgba(243, 244, 246, 0.45);
        }

/* =========================
   AUTH: background image
   ========================= */
.app-body.auth-page {
    background: #0b0d0f url("../img/bg.png") center / cover no-repeat fixed !important;
    position: relative;
    min-height: 100vh;
}

    /* More neutral overlay (removes the “color cast” in inputs) */
    .app-body.auth-page::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(900px 520px at 18% 0%, rgba(255,255,255,0.05), transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.78) 100%);
    }

    .app-body.auth-page .auth-shell {
        position: relative;
        z-index: 1;
    }

/* =========================================================
   OWNER RESERVATIONS (FullCalendar) — grey/black + green
   ========================================================= */
.owner-res-page .card.app-card {
    overflow: hidden;
}

.owner-calendar {
    border-radius: var(--radius);
}

/* FullCalendar base colors */
.owner-res-page .fc {
    --fc-border-color: rgba(255,255,255,0.10);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255,255,255,0.05);
    --fc-today-bg-color: rgba(34,197,94,0.10);
    --fc-list-event-hover-bg-color: rgba(255,255,255,0.06);
    color: var(--text);
}

    .owner-res-page .fc .fc-toolbar-title {
        font-weight: 900;
        letter-spacing: -0.2px;
    }

    .owner-res-page .fc .fc-button {
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.08);
        color: var(--text);
        box-shadow: none;
        padding: 0.45rem 0.75rem;
    }

        .owner-res-page .fc .fc-button:hover {
            background: rgba(255,255,255,0.12);
        }

    .owner-res-page .fc .fc-button-primary:not(:disabled).fc-button-active,
    .owner-res-page .fc .fc-button-primary:not(:disabled):active {
        background: rgba(34,197,94,0.18);
        border-color: rgba(34,197,94,0.30);
    }

    .owner-res-page .fc .fc-col-header-cell-cushion,
    .owner-res-page .fc .fc-daygrid-day-number {
        color: rgba(243,244,246,0.85);
        text-decoration: none;
    }

    .owner-res-page .fc .fc-event {
        border: 1px solid rgba(34,197,94,0.32);
        background: rgba(34,197,94,0.16);
        color: rgba(243,244,246,0.95);
        border-radius: 10px;
        padding: 2px 6px;
        cursor: pointer;
    }

        .owner-res-page .fc .fc-event:hover {
            background: rgba(34,197,94,0.22);
        }

    .owner-res-page .fc .fc-daygrid-more-link {
        color: rgba(34,197,94,0.95);
    }

    .owner-res-page .fc .fc-timegrid-axis-cushion,
    .owner-res-page .fc .fc-timegrid-slot-label-cushion {
        color: rgba(243,244,246,0.70);
    }

    .owner-res-page .fc .fc-popover {
        background: rgba(18,20,22,0.96);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
    }

    .owner-res-page .fc .fc-popover-header {
        background: rgba(255,255,255,0.06);
        border-bottom: 1px solid rgba(255,255,255,0.10);
        color: rgba(243,244,246,0.90);
    }

/* Modal surface (match app-card vibe) */
.app-modal {
    background: rgba(18,20,22,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: var(--shadow);
    color: var(--text);
}

    .app-modal .modal-header,
    .app-modal .modal-footer {
        border-color: rgba(255,255,255,0.10);
    }

/* Small KV block inside details */
.res-kv > div {
    margin-bottom: 6px;
    opacity: 0.92;
}

/* =========================
   OWNER RESERVATIONS: make calendar near full-screen
   ========================= */
.owner-res-page .app-container {
    max-width: 100% !important;
    padding-left: 18px;
    padding-right: 18px;
}

.owner-res-page .res-page {
    min-height: calc(100vh - 76px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.owner-res-page .res-cal-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Force calendar container + FullCalendar to fill the card */
.owner-res-page #ownerCalendar,
.owner-res-page .owner-calendar {
    height: 100%;
}

.owner-res-page .fc,
.owner-res-page .fc-view-harness {
    height: 100% !important;
}

.owner-res-page .fc-scroller-harness,
.owner-res-page .fc-scroller {
    height: 100% !important;
}

/* Compact toolbar for Reservations */
.res-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
}

.res-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.res-toolbar__right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.res-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
}

.res-ic {
    opacity: .75;
    font-size: 14px;
    line-height: 1;
}

.res-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 28px;
}

.res-field--select .res-input {
    min-width: 220px;
}

.res-field--search .res-input {
    min-width: 240px;
}

.res-btn {
    border-radius: 999px;
    padding: .35rem .75rem;
}

/* Mobile: make fields take full width */
@media (max-width: 576px) {
    .res-field {
        width: 100%;
    }

    .res-field--select .res-input,
    .res-field--search .res-input {
        min-width: 0;
        width: 100%;
    }

    .res-toolbar__right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================
   AUTH (BENTO STYLE) — kept, but not required
   ========================= */
.auth-card--bento {
    border-radius: 34px !important;
    overflow: hidden;
}

    .auth-card--bento .card-body {
        padding: 34px 26px 22px 26px !important;
    }

/* password eye button */
.auth-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: rgba(243,244,246,0.75);
}

    .auth-eye:hover {
        background: rgba(255,255,255,0.06);
    }

/* =========================
   AUTH (MINIMAL V2 — like your Image #2)
   Single card, NO nested cards, NO green/blue tinted inputs
   ========================= */

/* Make auth links white (your request: “green text make it white”) */
.app-body.auth-page a {
    color: rgba(243,244,246,0.92) !important;
}

    .app-body.auth-page a:hover {
        color: rgba(243,244,246,0.98) !important;
        text-decoration: underline;
    }

/* Card */
.auth-card--minimal {
    border-radius: 26px !important;
    overflow: hidden;
    background: rgba(14, 16, 18, 0.72) !important; /* single, subtle */
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,0.58) !important;
    backdrop-filter: blur(10px);
}

    .auth-card--minimal .card-body {
        padding: 26px 24px 18px 24px !important;
    }

    /* Typography (minimal, not “bold”) */
    .auth-card--minimal .auth-title {
        font-weight: 650 !important;
        letter-spacing: -0.2px;
        margin: 14px 0 6px 0;
        font-size: 1.55rem;
    }

    .auth-card--minimal .auth-subtitle {
        margin: 0 0 14px 0;
        color: rgba(243,244,246,0.62);
        font-weight: 400;
    }

    /* Brand badge: keep palette but reduce “loudness” */
    .auth-card--minimal .brand-badge {
        padding: 8px 12px;
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.10);
        box-shadow: none;
    }

    .auth-card--minimal .brand-dot {
        box-shadow: 0 0 0 5px rgba(34,197,94,0.10);
    }

/* Controls: INPUTS and PRIMARY BUTTON share same bg */
.app-body.auth-page .form-control.auth-input,
.app-body.auth-page .form-select.auth-input,
.app-body.auth-page textarea.auth-input {
    height: 46px;
    border-radius: 14px !important;
    /* CHANGED: forced solid neutral to avoid background tint */
    background-color: var(--auth-ctl-bg) !important;
    border: 1px solid var(--auth-ctl-border) !important;
    color: rgba(243,244,246,0.92) !important;
}

    .app-body.auth-page .form-control.auth-input::placeholder {
        color: rgba(243,244,246,0.42);
    }

    /* CHANGED: override both the green focus styling AND the template blue focus styling for AUTH inputs */
    .app-body.auth-page .form-control.auth-input:focus,
    .app-body.auth-page .form-select.auth-input:focus,
    .app-body.auth-page textarea.auth-input:focus {
        border-color: var(--auth-ctl-border-strong) !important;
        box-shadow: 0 0 0 .25rem var(--auth-focus-ring) !important;
    }

    /* Also override template focus rule for auth inputs/buttons specifically */
    .app-body.auth-page .form-control.auth-input:focus,
    .app-body.auth-page .form-check-input:focus,
    .app-body.auth-page .btn:focus,
    .app-body.auth-page .btn:active:focus {
        box-shadow: 0 0 0 .25rem var(--auth-focus-ring) !important;
    }

/* Password input right padding for the eye button */
.auth-input--padright {
    padding-right: 48px !important;
}

/* Eye button: minimal */
.app-body.auth-page .auth-eye {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: rgba(243,244,246,0.70);
}

    .app-body.auth-page .auth-eye:hover {
        background: rgba(255,255,255,0.06);
    }

/* Primary button (same bg as inputs) */
.auth-submit {
    height: 46px;
    border-radius: 14px;
    font-weight: 600; /* not bold */
    letter-spacing: -0.1px;
    background: var(--auth-ctl-bg);
    border: 1px solid var(--auth-ctl-border);
    color: rgba(243,244,246,0.92);
}

    .auth-submit:hover {
        background: var(--auth-ctl-bg-hover);
        border-color: var(--auth-ctl-border-strong);
    }

    .auth-submit:focus {
        box-shadow: 0 0 0 .25rem var(--auth-focus-ring) !important;
        border-color: var(--auth-ctl-border-strong) !important;
    }

/* Divider row */
.auth-divider-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px 0 14px 0;
    color: rgba(243,244,246,0.50);
    font-size: 0.86rem;
}

    .auth-divider-row > span {
        height: 1px;
        background: rgba(255,255,255,0.10);
    }

/* Social buttons: stacked like Image #2 */
.auth-social-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.auth-social-btn {
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(243,244,246,0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600; /* not bold */
}

    .auth-social-btn:hover {
        background: rgba(255,255,255,0.06);
    }

/* Icons: reduce “rainbow” */
.auth-social-ic {
    width: 18px;
    height: 18px;
    display: inline-block;
    filter: grayscale(1) saturate(0) brightness(1.35);
    opacity: 0.92;
}

/* Bottom text */
.auth-bottom {
    text-align: center;
    margin-top: 14px;
    color: rgba(243,244,246,0.60);
    font-size: 0.92rem;
}

/* Footer */
.auth-card--minimal .auth-footer {
    margin-top: 12px;
}

/* =========================
   REGISTER STEPPER (minimal)
   ========================= */
.auth-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 18px 0;
}

.auth-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0.55;
    font-size: 0.92rem;
}

.auth-step__dot {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: rgba(243,244,246,0.88);
    font-size: 0.85rem;
}

.auth-step--active {
    opacity: 0.95;
}

    .auth-step--active .auth-step__dot {
        border-color: rgba(255,255,255,0.20);
        background: rgba(255,255,255,0.08);
    }

.auth-step__bar {
    width: 42px;
    height: 1px;
    background: rgba(255,255,255,0.10);
    opacity: 0.8;
}

.auth-step-pane {
    display: none;
}

    .auth-step-pane.is-active {
        display: block;
    }

.auth-step-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 14px;
}

.auth-btn-secondary {
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(243,244,246,0.88);
    font-weight: 600;
}

    .auth-btn-secondary:hover {
        background: rgba(255,255,255,0.06);
    }

.auth-btn-next {
    height: 44px;
    border-radius: 14px;
    background: var(--auth-ctl-bg);
    border: 1px solid var(--auth-ctl-border);
    color: rgba(243,244,246,0.92);
    font-weight: 600;
}

    .auth-btn-next:hover {
        background: var(--auth-ctl-bg-hover);
        border-color: var(--auth-ctl-border-strong);
    }

/* Register card width (not “big ass form”) */
.auth-card--register {
    max-width: 760px;
}

.dropdown-menu {
    background: rgba(18,20,22,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.dropdown-item {
    color: rgba(243,244,246,0.88);
}

    .dropdown-item:hover {
        background: rgba(255,255,255,0.06);
        color: rgba(243,244,246,0.92);
    }

.owner-res-page .flatpickr-calendar {
    background: rgba(18,20,22,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    overflow: hidden;
}

    /* triangle */
    .owner-res-page .flatpickr-calendar:before {
        border-bottom-color: rgba(255,255,255,0.12);
    }

    .owner-res-page .flatpickr-calendar:after {
        border-bottom-color: rgba(18,20,22,0.96);
    }

/* header */
.owner-res-page .flatpickr-months {
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.owner-res-page .flatpickr-month,
.owner-res-page .flatpickr-current-month,
.owner-res-page .flatpickr-current-month .cur-month,
.owner-res-page .flatpickr-current-month input.cur-year {
    color: rgba(243,244,246,0.92);
    font-weight: 800;
}

.owner-res-page .flatpickr-prev-month,
.owner-res-page .flatpickr-next-month {
    padding: 10px;
}

    .owner-res-page .flatpickr-prev-month svg,
    .owner-res-page .flatpickr-next-month svg {
        fill: rgba(243,244,246,0.78);
    }

    .owner-res-page .flatpickr-prev-month:hover svg,
    .owner-res-page .flatpickr-next-month:hover svg {
        fill: rgba(34,197,94,0.95);
    }

/* weekday row */
.owner-res-page .flatpickr-weekdays {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.owner-res-page span.flatpickr-weekday {
    color: rgba(243,244,246,0.70);
    font-weight: 700;
}

/* days */
.owner-res-page .flatpickr-day {
    color: rgba(243,244,246,0.88);
    border-radius: 12px;
    border: 1px solid transparent;
}

    .owner-res-page .flatpickr-day:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.10);
    }

    .owner-res-page .flatpickr-day.today {
        border-color: rgba(34,197,94,0.45);
    }

    .owner-res-page .flatpickr-day.selected,
    .owner-res-page .flatpickr-day.startRange,
    .owner-res-page .flatpickr-day.endRange,
    .owner-res-page .flatpickr-day.selected:hover,
    .owner-res-page .flatpickr-day.startRange:hover,
    .owner-res-page .flatpickr-day.endRange:hover {
        background: rgba(34,197,94,0.18);
        border-color: rgba(34,197,94,0.30);
        color: rgba(243,244,246,0.95);
    }

    .owner-res-page .flatpickr-day.inRange,
    .owner-res-page .flatpickr-day.prevMonthDay.inRange,
    .owner-res-page .flatpickr-day.nextMonthDay.inRange {
        background: rgba(34,197,94,0.12);
        border-color: transparent;
        box-shadow: none;
    }

    .owner-res-page .flatpickr-day.disabled,
    .owner-res-page .flatpickr-day.prevMonthDay,
    .owner-res-page .flatpickr-day.nextMonthDay {
        color: rgba(243,244,246,0.28);
    }

/* time section */
.owner-res-page .flatpickr-time {
    border-top: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}

    .owner-res-page .flatpickr-time input {
        color: rgba(243,244,246,0.92);
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
    }

        .owner-res-page .flatpickr-time input:focus {
            border-color: rgba(34,197,94,0.38) !important;
            box-shadow: 0 0 0 .25rem rgba(34,197,94,0.18) !important;
        }

/* time arrows */
.owner-res-page .numInputWrapper span.arrowUp,
.owner-res-page .numInputWrapper span.arrowDown {
    border-left: 1px solid rgba(255,255,255,0.10);
}

    .owner-res-page .numInputWrapper span.arrowUp:hover,
    .owner-res-page .numInputWrapper span.arrowDown:hover {
        background: rgba(255,255,255,0.08);
    }

/* month dropdown popup (if enabled) */
.owner-res-page .flatpickr-monthDropdown-months,
.owner-res-page .flatpickr-monthDropdown-months:focus {
    color: rgba(243,244,246,0.92);
}

/* --- FIX: flatpickr time inputs turning white on focus --- */
.owner-res-page .flatpickr-time input,
.owner-res-page .flatpickr-time .numInputWrapper input {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(243,244,246,0.92) !important;
    -webkit-text-fill-color: rgba(243,244,246,0.92) !important; /* Chrome */
}

    .owner-res-page .flatpickr-time input:focus,
    .owner-res-page .flatpickr-time .numInputWrapper input:focus,
    .owner-res-page .flatpickr-time input:active,
    .owner-res-page .flatpickr-time .numInputWrapper input:active {
        background: rgba(255,255,255,0.08) !important; /* NOT white */
        color: rgba(243,244,246,0.95) !important;
        -webkit-text-fill-color: rgba(243,244,246,0.95) !important;
        outline: none !important;
        border-color: rgba(34,197,94,0.38) !important;
        box-shadow: 0 0 0 .25rem rgba(34,197,94,0.18) !important;
    }

    /* text selection inside the time box (drag highlight) */
    .owner-res-page .flatpickr-time input::selection {
        background: rgba(34,197,94,0.28);
        color: rgba(243,244,246,0.98);
    }

    .owner-res-page .flatpickr-time input::-moz-selection {
        background: rgba(34,197,94,0.28);
        color: rgba(243,244,246,0.98);
    }