/* ── Verin design tokens (light default) ── */
:root,
html[data-theme="light"] {
    --verin-green: #1d9e75;
    --verin-green-strong: #0f6e56;
    --verin-green-deep: #085041;

    --green-dark: #085041;
    --green-mid: #0f6e56;
    --green-base: #1d9e75;
    --green-light: #5dcaa5;
    --green-pale: #e1f5ee;

    --blue-dark: #042c53;
    --blue-mid: #185fa5;
    --blue-base: #378add;
    --blue-pale: #e6f1fb;

    --amber-dark: #412402;
    --amber-mid: #ba7517;
    --amber-pale: #faeeda;

    --gray-900: #1f2937;
    --gray-700: #374151;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50: #f9fafb;

    --bg: #f8fafc;
    --bg-gradient-end: #f1f5f9;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --text: #0f172a;
    --text-muted: #475569;
    --brand-foreground: var(--text);
    --border: #e2e8f0;
    --muted: #64748b;

    --primary: var(--verin-green);
    --primary-strong: var(--verin-green-strong);
    --success: #059669;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-text: #7f1d1d;
    --danger-strong: #b91c1c;
    --warning: #d97706;
    --ring: 0 0 0 3px rgba(29, 158, 117, 0.22);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);

    color-scheme: light;
}

html[data-theme="dark"] {
    --gray-900: #f4f4f5;
    --gray-700: #d4d4d8;
    --gray-500: #a1a1aa;
    --gray-400: #71717a;
    --gray-300: #52525b;
    --gray-200: #3f3f46;
    --gray-100: #27272a;
    --gray-50: #18181b;

    --bg: #0a0a0a;
    --bg-gradient-end: #171717;
    --surface: #141414;
    --surface-muted: #1c1c1c;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --brand-foreground: var(--text);
    --border: #2e2e2e;
    --muted: #a1a1aa;

    --primary: var(--verin-green);
    --primary-strong: #5dcaa5;
    --danger-bg: #2a1212;
    --danger-border: #5f1d1d;
    --danger-text: #fecaca;
    --danger-strong: #f87171;
    --ring: 0 0 0 3px rgba(29, 158, 117, 0.35);

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);

    --green-pale: #0d281f;

    color-scheme: dark;
}

#blazor-error-ui {
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15);
    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;
}

/* Wordmark: V = brand green, erin = foreground (black/white by theme) */
.verin-mark {
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.verin-mark-v {
    color: var(--verin-green);
}

.verin-mark-rest {
    color: var(--brand-foreground);
}

/* Brand logo theme switching (used in landing topbar/footer) */
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark  { display: block; }

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    margin: 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-gradient-end) 100%);
    color: var(--text);
    line-height: 1.45;
}

a {
    color: var(--primary);
}

button,
input,
select,
textarea {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.topnav {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--surface-muted);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 12px;
    margin: 0;
}

.cta {
    display: inline-block;
    padding: 10px 14px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
}

/* Components */
.btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
}

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

.card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    gap: 12px;
    background: var(--surface);
    margin: 8px 0;
}

.card-image {
    width: 140px;
    height: 100px;
    object-fit: cover;
}

.card-body {
    padding: 12px;
}

.card-title {
    margin: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.feature-icon {
    font-size: 28px;
}

.space-card {
    display: flex;
    gap: 12px;
    border: 1px solid var(--border);
    padding: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.space-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.space-content h4 {
    margin: 0;
}

.space-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.muted {
    color: var(--muted);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    background: var(--surface);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    border: 1px solid var(--border);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    padding: 12px;
}

.modal-body {
    padding: 12px;
}

/* ===== App UI (2026) ===== */
.btn {
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    transition: 0.2s ease;
}

.btn-primary,
.btn.btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--primary-strong) !important;
}

.btn-ghost,
.btn.btn-ghost {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.btn-danger,
.btn.btn-danger {
    background: var(--danger) !important;
    color: #fff !important;
}

.btn-success,
.btn.btn-success {
    background: var(--success) !important;
    color: #fff !important;
}

.search-page,
.dashboard,
.profile-page,
.venue-content {
    max-width: 1120px !important;
}

.search-bar,
.tab-content,
.v-card,
.auth-card,
.rg-card,
.profile-hero,
.next-reservation,
.info-card,
.cta-card,
.trust-card,
.space-item,
.booking-item,
.reservation-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card) !important;
}

.page-header h1,
.dashboard h1,
.profile-summary h1,
.hero h1,
.rg-title,
.auth-card h1 {
    letter-spacing: -0.02em;
    color: var(--text);
}

.page-header p,
.sub,
.rg-sub,
.booking-meta,
.space-meta,
.profile-summary p,
.reservation-location {
    color: var(--text-muted) !important;
}

.inp,
.rg-inp,
.filter-input,
.form-input,
.cf-in,
.otp-input {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.inp:focus,
.rg-inp:focus,
.filter-input:focus,
.form-input:focus,
.cf-in:focus,
.otp-input:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--ring) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Verin shared components (used by VerinPageHeader, VerinStatusBanner,
   VerinStatusBadge, VerinProgressBar, VerinIcon)
   ═══════════════════════════════════════════════════════════════ */

/* Page shell */
.verin-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.verin-page-narrow { max-width: 720px; }
.verin-page-wide   { max-width: 1120px; }

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

.verin-page-header-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.verin-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.verin-page-title {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}

.verin-page-sub {
    color: var(--text-muted);
    font-size: .95rem;
    margin: 0;
    max-width: 60ch;
}

/* Section title (inside cards/sections) */
.verin-section-title {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
    margin: 0 0 .25rem;
    color: var(--text);
}

.verin-section-sub {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Card */
.verin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
}

.verin-card + .verin-card { margin-top: 1rem; }

/* Banner (alert / status callout) */
.verin-banner {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 1.25rem;
}

.verin-banner-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verin-banner-icon svg { width: 22px; height: 22px; }

.verin-banner-body { flex: 1; min-width: 0; }
.verin-banner-body > strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .15rem;
    color: var(--text);
}
.verin-banner-body > p {
    margin: 0;
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.5;
}
.verin-banner-body > p + p { margin-top: .35rem; }

.verin-banner-action { flex-shrink: 0; align-self: center; }

.verin-banner.is-success {
    border-color: rgba(5, 150, 105, 0.25);
    background: rgba(5, 150, 105, 0.06);
}
.verin-banner.is-success .verin-banner-icon { color: var(--success); }

.verin-banner.is-warning {
    border-color: rgba(217, 119, 6, 0.25);
    background: rgba(217, 119, 6, 0.06);
}
.verin-banner.is-warning .verin-banner-icon { color: var(--warning); }

.verin-banner.is-error {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.06);
}
.verin-banner.is-error .verin-banner-icon { color: var(--danger); }

.verin-banner.is-info {
    border-color: rgba(55, 138, 221, 0.25);
    background: rgba(55, 138, 221, 0.06);
}
.verin-banner.is-info .verin-banner-icon { color: var(--blue-base); }

.verin-banner.is-pending {
    border-color: var(--border);
    background: var(--surface-muted);
}
.verin-banner.is-pending .verin-banner-icon { color: var(--text-muted); }

/* Status badge */
.verin-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.verin-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}
.verin-badge.is-success { background: rgba(5, 150, 105, 0.1);  color: var(--success); border-color: rgba(5, 150, 105, 0.2); }
.verin-badge.is-warning { background: rgba(217, 119, 6, 0.1);  color: var(--warning); border-color: rgba(217, 119, 6, 0.2); }
.verin-badge.is-error   { background: rgba(220, 38, 38, 0.1);  color: var(--danger);  border-color: rgba(220, 38, 38, 0.2); }
.verin-badge.is-info    { background: rgba(55, 138, 221, 0.1); color: var(--blue-base); border-color: rgba(55, 138, 221, 0.2); }
.verin-badge.is-neutral { background: var(--surface-muted);    color: var(--text-muted); border-color: var(--border); }

/* Progress bar */
.verin-progress {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}
.verin-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .8rem;
}
.verin-progress-label { color: var(--text-muted); font-weight: 500; }
.verin-progress-value { color: var(--text); font-weight: 700; }
.verin-progress-track {
    width: 100%;
    height: 8px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.verin-progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width .25s ease;
    border-radius: 999px;
}
.verin-progress.is-success .verin-progress-fill { background: var(--success); }

/* Button variants used across pages (consolidate older .btn rules) */
.btn-outline,
.btn.btn-outline {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .55rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.btn-outline:hover,
.btn.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-lg { padding: .85rem 1.4rem; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; border-radius: 8px; }

.btn[disabled],
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Loading spinner */
.verin-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: .85rem;
    color: var(--text-muted);
    font-size: .9rem;
}
.verin-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: verin-spin .7s linear infinite;
}
@keyframes verin-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .verin-spinner { animation-duration: 2s; }
    .verin-progress-fill { transition: none; }
}

/* ─── End Verin shared components ─────────────────────────────── */

@media (max-width: 1024px) {
    .dashboard,
    .search-page,
    .profile-page,
    .venue-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .stats-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .venue-grid {
        grid-template-columns: 1fr !important;
    }

    .venue-side {
        position: static !important;
    }
}

@media (max-width: 760px) {
    .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .space-item,
    .booking-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

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

    .space-actions .btn {
        flex: 1 1 140px;
    }
}

/* ── Leaflet search map pins & popups ─────────────────────────────────── */
.verin-map-pin {
    background: var(--primary, #7c3aed);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.verin-map-pin:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,0.32); }
/* Pin emphasised when its result card is hovered (card → pin sync). */
.verin-map-pin--active {
    transform: scale(1.16);
    background: var(--primary-strong, #6d28d9);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    z-index: 1000;
}

.verin-map-popup { display: flex; flex-direction: column; gap: 4px; min-width: 150px; max-width: 90vw; word-break: break-word; }
.verin-map-popup strong { font-size: 13px; color: #18181b; }
.vmap-price { font-size: 12px; color: #6b7280; }
.vmap-link { font-size: 12px; font-weight: 700; color: #7c3aed; text-decoration: none; margin-top: 2px; }
.vmap-link:hover { text-decoration: underline; }
.vmap-cats { font-size: 11px; color: #6b7280; }
.verin-map-pin--vendor { background: #059669; }
.verin-map-pin--vendor:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(5,150,105,0.4); }

/* ── Admin panel shared styles ───────────────────────────────────────────
   These live here (global) so they apply to all admin page components,
   not just the layout wrapper. Scoped CSS in _AdminLayout.razor.css does
   NOT penetrate child page components in Blazor.
────────────────────────────────────────────────────────────────────── */

/* Search bar */
.admin-search-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.admin-search-bar input,
.admin-search-bar select {
    padding: .5rem .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: .875rem;
    outline: none;
    background: #fff;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.admin-search-bar input { flex: 1; min-width: 220px; }
.admin-search-bar input:focus,
.admin-search-bar select:focus {
    border-color: #1d9e75;
    box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}

/* Page header */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.admin-page-header h1 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

/* Shared table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8375rem;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px #e2e8f0;
}
.admin-table th {
    text-align: left;
    padding: .65rem .9rem;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    background: #f8fafc;
}
.admin-table td {
    padding: .7rem .9rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background .1s; }
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table .clickable-row { cursor: pointer; }

/* Empty state */
.admin-empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    color: #94a3b8;
    font-size: .9rem;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

/* Filter tabs */
.admin-filters {
    display: flex;
    gap: .35rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.admin-filter-btn {
    padding: .35rem .8rem;
    border-radius: 99px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: .8rem;
    cursor: pointer;
    color: #64748b;
    transition: all .15s;
    font-family: inherit;
}
.admin-filter-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.admin-filter-btn.active { background: #1d9e75; color: #fff; border-color: #1d9e75; }

/* Pagination */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.25rem;
    font-size: .8125rem;
    color: #64748b;
}

/* Meta line */
.admin-meta { font-size: .78rem; color: #94a3b8; margin-bottom: .85rem; }

/* Shared button system */
.a-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
    font-family: inherit;
    text-decoration: none;
}
.a-btn:disabled { opacity: .45; cursor: not-allowed; }
.a-btn-primary { background: #1d9e75; color: #fff; }
.a-btn-primary:hover:not(:disabled) { background: #0f6e56; }
.a-btn-outline { background: #fff; color: #374151; border: 1px solid #e2e8f0; }
.a-btn-outline:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.a-btn-sm { padding: .3rem .65rem; font-size: .775rem; border-radius: 6px; }
.a-btn-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.a-btn-danger:hover:not(:disabled) { background: #fee2e2; }

/* Shared badge system */
.a-badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.a-badge-green  { background: #dcfce7; color: #166534; }
.a-badge-red    { background: #fef2f2; color: #b91c1c; }
.a-badge-amber  { background: #fefce8; color: #854d0e; }
.a-badge-gray   { background: #f1f5f9; color: #64748b; }
.a-badge-blue   { background: #eff6ff; color: #1d4ed8; }
.a-badge-purple { background: #faf5ff; color: #7e22ce; }

/* Risk chip */
.a-risk { display: inline-flex; padding: .18rem .5rem; border-radius: 5px; font-size: .75rem; font-weight: 600; }
.a-risk-low    { background: #dcfce7; color: #166534; }
.a-risk-medium { background: #fefce8; color: #854d0e; }
.a-risk-high   { background: #fef2f2; color: #b91c1c; }

/* Utility classes */
.a-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .8rem; }
.a-date { font-size: .78rem; color: #94a3b8; white-space: nowrap; }
.a-text-muted { color: #94a3b8; font-size: .825rem; }
.a-name { font-weight: 500; color: #0f172a; }
.a-sub { font-size: .75rem; color: #94a3b8; }