﻿/*
   Üzemeltetési megjegyzés:
   - A fájl nem használ külső webfontot; a tipográfia system font stackre épül.
   - A modern CSS-elemeket (CSS custom property, calc(), clamp(), backdrop-filter) WebGrease / System.Web.Optimization
     minifikációval nem célszerű feldolgozni. MVC5 alatt maradjon BundleTable.EnableOptimizations = false,
     vagy készüljön külön, modern build-eszközzel előállított minifikált CSS.
*/

/* =========================================================
   ParkolóFoglaló TechWizard arculati redesign - desktop CSS
   Fájl: Site-techwizard.css
   Cél: teljes vizuális újrabrandelés meglévő HTML-struktúrával,
        TechWizard Kft. kék-cián informatikai színrendszerrel
   ========================================================= */

:root {
    --pf-bg: #eef6ff;
    --pf-bg-2: #e2f0ff;
    --pf-bg-3: #f7fbff;
    --pf-surface: #ffffff;
    --pf-surface-2: #f3f8ff;
    --pf-surface-strong: #ffffff;
    --pf-ink: #071526;
    --pf-ink-2: #0b2038;
    --pf-muted: #5d6b7d;
    --pf-muted-2: #8a99ab;
    --pf-line: #c9dced;
    --pf-line-2: #dce9f5;
    --pf-accent: #0a73e8;
    --pf-accent-2: #20c7ee;
    --pf-accent-dark: #054a9c;
    --pf-green: #159a84;
    --pf-green-soft: #ddfbf4;
    --pf-red: #c74848;
    --pf-red-soft: #fde8e8;
    --pf-blue: #146bd7;
    --pf-blue-soft: #e3f0ff;
    --pf-amber: #cb7a04;
    --pf-amber-soft: #fff2d6;
    --pf-violet: #6f56d9;
    --pf-radius-xs: 0.45rem;
    --pf-radius-sm: 0.75rem;
    --pf-radius-md: 1.05rem;
    --pf-radius-lg: 1.55rem;
    --pf-radius-xl: 2.1rem;
    --pf-shadow-xs: 0 0.2rem 0.7rem rgba(7, 21, 38, 0.07);
    --pf-shadow-sm: 0 0.55rem 1.55rem rgba(7, 21, 38, 0.10);
    --pf-shadow-md: 0 1rem 3rem rgba(7, 21, 38, 0.14);
    --pf-shadow-lg: 0 1.6rem 4.2rem rgba(7, 21, 38, 0.19);
    --pf-focus: 0 0 0 0.2rem rgba(10, 115, 232, 0.24);
    --pf-footer-height: 76px;
    --pf-cookie-offset: 76px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--pf-bg);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--pf-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.965rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    background: radial-gradient(circle at 8% 8%, rgba(32, 199, 238, 0.24), transparent 27rem), radial-gradient(circle at 86% 12%, rgba(20, 107, 215, 0.16), transparent 30rem), linear-gradient(135deg, #eaf4ff 0%, #f7fbff 44%, #e2f1ff 100%);
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background-image: linear-gradient(rgba(7, 21, 38, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 21, 38, 0.028) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.16));
    }

    body::after {
        content: "";
        position: fixed;
        right: -13rem;
        bottom: 5rem;
        width: 34rem;
        height: 34rem;
        z-index: -1;
        pointer-events: none;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(10, 115, 232, 0.14), transparent 64%);
    }

a {
    color: var(--pf-accent-dark);
    text-decoration-color: rgba(10, 115, 232, 0.34);
    text-underline-offset: 0.18em;
}

    a:hover,
    a:focus {
        color: #032f63;
        text-decoration-color: currentColor;
    }

::selection {
    background: rgba(10, 115, 232, 0.26);
    color: var(--pf-ink);
}

.app-shell {
    min-height: 100vh;
    padding-bottom: calc(var(--pf-footer-height) + 20px);
}

.app-main {
    padding: 2.4rem 0 6.5rem;
}

    .app-main .container,
    .app-navbar .container,
    .app-footer .container {
        max-width: 1340px;
    }

    .app-main .container {
        position: relative;
    }

.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    min-height: var(--pf-footer-height);
    padding: 1.05rem 0;
    color: rgba(246, 251, 255, 0.72);
    background: linear-gradient(90deg, rgba(10, 115, 232, 0.22), transparent 36%), #071526;
    border-top: 1px solid rgba(246, 251, 255, 0.12) !important;
    box-shadow: 0 -1rem 2.4rem rgba(7, 21, 38, 0.22);
}

    .app-footer .footer-link {
        color: #a8ecff;
        font-weight: 700;
        text-decoration: none;
    }

        .app-footer .footer-link:hover,
        .app-footer .footer-link:focus {
            color: #ffffff;
        }

/* =========================================================
   Navigáció
   ========================================================= */

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    min-height: 76px;
    padding-top: 0.82rem;
    padding-bottom: 0.82rem;
    background: linear-gradient(90deg, rgba(10, 115, 232, 0.18), transparent 28%), rgba(7, 21, 38, 0.96);
    border-bottom: 1px solid rgba(246, 251, 255, 0.10);
    box-shadow: 0 1.1rem 2.4rem rgba(7, 21, 38, 0.22);
    backdrop-filter: blur(18px);
}

    .app-navbar .container {
        gap: 1rem;
    }

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: #f6fbff;
    font-weight: 900;
    letter-spacing: -0.045em;
    text-decoration: none;
    white-space: nowrap;
}

    .app-brand:hover,
    .app-brand:focus {
        color: #ffffff;
        text-decoration: none;
    }

.app-brand-mark,
.app-logo-mark {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 1.05rem;
    color: #041d36;
    background: linear-gradient(145deg, #d8f8ff 0%, #20c7ee 52%, #0a73e8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 0.9rem 1.6rem rgba(10, 115, 232, 0.28);
    font-weight: 950;
    line-height: 1;
}

    .app-brand-mark::after,
    .app-logo-mark::after {
        content: "";
        position: absolute;
        inset: 0.38rem;
        z-index: -1;
        border-radius: 0.72rem;
        border: 1px solid rgba(35, 21, 8, 0.18);
    }

.app-brand-text {
    font-size: 1.08rem;
    line-height: 1;
}

.app-navbar .navbar-toggler {
    border: 1px solid rgba(246, 251, 255, 0.22);
    border-radius: 0.9rem;
    background: rgba(246, 251, 255, 0.08);
    color: #f6fbff;
    padding: 0.52rem 0.66rem;
}

    .app-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(32, 199, 238, 0.28);
    }

.app-navbar .navbar-toggler-icon {
    filter: invert(1) sepia(0.4) saturate(0.6);
}

.app-navbar .navbar-nav {
    gap: 0.2rem;
}

.app-navbar .nav-link {
    color: rgba(246, 251, 255, 0.74);
    border: 1px solid transparent;
    border-radius: 0.9rem;
    padding: 0.52rem 0.82rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

    .app-navbar .nav-link:hover,
    .app-navbar .nav-link:focus,
    .app-navbar .nav-link.show {
        color: #f6fbff;
        background: rgba(246, 251, 255, 0.11);
        border-color: rgba(246, 251, 255, 0.16);
        text-decoration: none;
        transform: translateY(-1px);
    }

.app-navbar .dropdown-menu {
    z-index: 1060;
    min-width: 15rem;
    margin-top: 0.75rem;
    padding: 0.5rem;
    color: var(--pf-ink);
    background: rgba(246, 251, 255, 0.98);
    border: 1px solid rgba(91, 61, 32, 0.14);
    border-radius: 1.05rem;
    box-shadow: var(--pf-shadow-lg);
    backdrop-filter: blur(16px);
}

.app-navbar .dropdown-item {
    border-radius: 0.72rem;
    padding: 0.58rem 0.82rem;
    color: var(--pf-ink-2);
    font-weight: 680;
    white-space: nowrap;
}

    .app-navbar .dropdown-item:hover,
    .app-navbar .dropdown-item:focus {
        color: #072646;
        background: linear-gradient(90deg, rgba(32, 199, 238, 0.24), rgba(32, 199, 238, 0.06));
    }

.app-navbar .dropdown-divider {
    border-top-color: rgba(91, 61, 32, 0.14);
    margin: 0.45rem 0;
}

.app-user-pill {
    display: inline-flex;
    align-items: center;
    max-width: 270px;
    min-height: 2.1rem;
    padding: 0.34rem 0.78rem;
    color: #e8fbff;
    background: rgba(246, 251, 255, 0.08);
    border: 1px solid rgba(246, 251, 255, 0.16);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 0.86rem;
    font-weight: 780;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   Tipográfia és közös felületi elemek
   ========================================================= */

.page-header {
    position: relative;
    margin-bottom: 1.75rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
}

    .page-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.2rem;
        bottom: 0.2rem;
        width: 0.34rem;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--pf-accent-2), var(--pf-accent-dark));
        box-shadow: 0 0.55rem 1.2rem rgba(10, 115, 232, 0.28);
    }

    .page-header h1 {
        margin: 0 0 0.42rem;
        color: var(--pf-ink);
        font-size: clamp(1.85rem, 2.6vw, 2.55rem);
        font-weight: 930;
        letter-spacing: -0.065em;
        line-height: 1.05;
    }

    .page-header p {
        max-width: 76ch;
        margin: 0;
        color: var(--pf-muted);
        font-size: 1.02rem;
    }

.small,
.form-text,
.text-muted {
    color: var(--pf-muted) !important;
}

.text-dark {
    color: var(--pf-ink) !important;
}

.text-danger {
    color: var(--pf-red) !important;
}

.text-bg-light {
    color: var(--pf-ink) !important;
    background-color: #e9f5ff !important;
}

.text-bg-primary,
.bg-primary {
    color: #f6fbff !important;
    background-color: var(--pf-blue) !important;
}

.text-bg-success,
.bg-success {
    color: #f1fffb !important;
    background-color: var(--pf-green) !important;
}

.text-bg-warning,
.bg-warning {
    color: #062b53 !important;
    background-color: #73e6ff !important;
}

.text-bg-danger,
.bg-danger {
    color: #f5fbff !important;
    background-color: var(--pf-red) !important;
}

.text-bg-secondary,
.bg-secondary {
    color: #f6fbff !important;
    background-color: #6d7b8e !important;
}

.bg-info {
    color: #073960 !important;
    background-color: #b7e8ff !important;
}

.bg-dark {
    color: #f6fbff !important;
    background-color: var(--pf-ink) !important;
}

.bg-light,
.bg-white {
    background-color: rgba(246, 251, 255, 0.86) !important;
}

.border,
.border-top {
    border-color: var(--pf-line-2) !important;
}

/* =========================================================
   Kártyák, panelek, dashboard
   ========================================================= */

.card,
.dashboard-card,
.dashboard-metric-card,
.dashboard-table-card,
.dashboard-warning-panel,
.dashboard-empty-state,
.auth-card {
    border: 1px solid rgba(91, 61, 32, 0.12);
    background: rgba(246, 251, 255, 0.92);
    box-shadow: var(--pf-shadow-sm);
    backdrop-filter: blur(12px);
}

.card {
    border-radius: var(--pf-radius-lg);
    overflow: hidden;
}

.card-header {
    color: var(--pf-ink);
    background: linear-gradient(90deg, rgba(10, 115, 232, 0.12), transparent), rgba(246, 251, 255, 0.74);
    border-bottom: 1px solid var(--pf-line-2);
    border-top-left-radius: var(--pf-radius-lg) !important;
    border-top-right-radius: var(--pf-radius-lg) !important;
    padding: 1rem 1.25rem;
    font-weight: 800;
}

.card-body {
    padding: 1.45rem;
}

.dashboard-section {
    margin-bottom: 1.85rem;
}

.dashboard-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.05rem;
}

.dashboard-section-title {
    margin: 0;
    color: var(--pf-ink);
    font-size: 1.28rem;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.dashboard-section-subtitle {
    margin: 0.28rem 0 0;
    color: var(--pf-muted);
}

.dashboard-card {
    position: relative;
    height: 100%;
    border-radius: var(--pf-radius-xl);
    padding: 1.55rem;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .dashboard-card::before,
    .dashboard-metric-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), transparent 42%), radial-gradient(circle at 100% 0%, rgba(32, 199, 238, 0.18), transparent 34%);
    }

    .dashboard-card:hover,
    .dashboard-card:focus-within,
    .dashboard-metric-card:hover,
    .dashboard-metric-card:focus-within {
        transform: translateY(-3px);
        border-color: rgba(10, 115, 232, 0.34);
        box-shadow: var(--pf-shadow-md);
    }

    .dashboard-card > *,
    .dashboard-metric-card > * {
        position: relative;
        z-index: 1;
    }

    .dashboard-card h2 {
        margin: 1.05rem 0 0.48rem;
        color: var(--pf-ink);
        font-size: 1.12rem;
        font-weight: 900;
        letter-spacing: -0.035em;
    }

    .dashboard-card p {
        margin: 0;
        color: var(--pf-muted);
    }

.dashboard-card-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.05rem;
    color: #effaff;
    background: linear-gradient(145deg, #0d2339, #061423 72%), var(--pf-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.9rem 1.7rem rgba(7, 21, 38, 0.2);
    font-weight: 920;
}

.dashboard-metric-card {
    position: relative;
    height: 100%;
    border-radius: var(--pf-radius-lg);
    padding: 1.2rem 1.3rem;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-metric-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

    .dashboard-metric-link:hover,
    .dashboard-metric-link:focus {
        color: inherit;
        text-decoration: none;
    }

.dashboard-metric-label,
.dashboard-mini-label {
    color: var(--pf-muted);
    font-size: 0.78rem;
    font-weight: 880;
    letter-spacing: 0.09em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-metric-value,
.dashboard-mini-value {
    margin: 0.2rem 0 0;
    color: var(--pf-ink);
    font-size: 2.08rem;
    font-weight: 940;
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.dashboard-metric-meta {
    margin-top: 0.52rem;
    color: var(--pf-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.dashboard-metric-meta-line {
    display: block;
    white-space: nowrap;
}

.dashboard-mini-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--pf-line-2);
    border-radius: var(--pf-radius-md);
    background: rgba(255, 255, 255, 0.44);
}

.dashboard-warning-panel {
    position: relative;
    border-color: rgba(203, 122, 4, 0.28);
    border-radius: var(--pf-radius-lg);
    background: linear-gradient(135deg, rgba(255, 243, 214, 0.98), rgba(246, 251, 255, 0.92));
    padding: 1.05rem 1.18rem 1.05rem 1.3rem;
    overflow: hidden;
}

    .dashboard-warning-panel::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0.36rem;
        background: linear-gradient(180deg, #23b7ee, #0753a6);
    }

.dashboard-warning-title {
    margin-bottom: 0.55rem;
    color: #063d78;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.dashboard-warning-line {
    margin-bottom: 0.36rem;
    color: #0b5faf;
}

    .dashboard-warning-line:last-child {
        margin-bottom: 0;
    }

.dashboard-empty-state {
    position: relative;
    border-style: dashed;
    border-color: rgba(91, 61, 32, 0.22);
    border-radius: var(--pf-radius-lg);
    background: repeating-linear-gradient(-45deg, rgba(10, 115, 232, 0.035) 0 8px, transparent 8px 16px), rgba(246, 251, 255, 0.68);
    padding: 1.35rem;
    color: var(--pf-muted);
}

.dashboard-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

/* =========================================================
   Táblázatok
   ========================================================= */

.dashboard-table-card {
    border-radius: var(--pf-radius-lg);
    overflow: hidden;
}

    .dashboard-table-card.p-3 {
        overflow: visible;
    }

.table-responsive {
    border-radius: var(--pf-radius-md);
    background: rgba(246, 251, 255, 0.82);
    overflow-x: auto;
}

.dashboard-table-card .table-responsive {
    border-radius: inherit;
    border: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(10, 115, 232, 0.045);
    --bs-table-hover-bg: rgba(10, 115, 232, 0.075);
    margin-bottom: 0;
    color: var(--pf-ink-2);
}

    .table thead th {
        position: relative;
        padding-top: 0.95rem;
        padding-bottom: 0.95rem;
        color: #eaf9ff;
        background: linear-gradient(90deg, rgba(10, 115, 232, 0.24), transparent), #0b1b2d;
        border-bottom: 0;
        font-size: 0.75rem;
        font-weight: 880;
        letter-spacing: 0.075em;
        line-height: 1.2;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table tbody td,
    .table tbody th {
        padding-top: 0.82rem;
        padding-bottom: 0.82rem;
        vertical-align: middle;
        border-color: rgba(91, 61, 32, 0.10);
    }

    .dashboard-table-card .table > :not(caption) > * > *:first-child,
    .table > :not(caption) > * > *:first-child {
        padding-left: 1.15rem;
    }

    .dashboard-table-card .table > :not(caption) > * > *:last-child,
    .table > :not(caption) > * > *:last-child {
        padding-right: 1.15rem;
    }

.table-sm > :not(caption) > * > * {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
}

/* =========================================================
   Űrlapok
   ========================================================= */

.form-label {
    color: var(--pf-ink-2);
    font-size: 0.88rem;
    font-weight: 820;
    letter-spacing: -0.01em;
}

.form-control,
.form-select,
textarea,
input,
select {
    max-width: 100%;
}

.form-control,
.form-select {
    min-height: 2.72rem;
    color: var(--pf-ink);
    background-color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(91, 61, 32, 0.18);
    border-radius: 0.88rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.form-control-sm {
    min-height: 2.18rem;
    border-radius: 0.72rem;
}

.form-control:focus,
.form-select:focus {
    color: var(--pf-ink);
    background-color: #ffffff;
    border-color: rgba(10, 115, 232, 0.72);
    box-shadow: var(--pf-focus);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    color: var(--pf-muted);
    background: rgba(239, 235, 227, 0.74);
}

.form-control-plaintext {
    color: var(--pf-ink);
}

.form-text {
    margin-top: 0.35rem;
    font-size: 0.84rem;
}

.form-check-input {
    width: 1.08em;
    height: 1.08em;
    border-color: rgba(91, 61, 32, 0.28);
}

    .form-check-input:checked {
        background-color: var(--pf-accent);
        border-color: var(--pf-accent);
    }

    .form-check-input:focus {
        border-color: var(--pf-accent);
        box-shadow: var(--pf-focus);
    }

.validation-summary ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

/* =========================================================
   Gombok, badge-ek, pagination, alert
   ========================================================= */

.btn {
    border-radius: 0.82rem;
    font-weight: 820;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

    .btn:hover,
    .btn:focus {
        transform: translateY(-1px);
    }

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus {
        box-shadow: var(--pf-focus);
    }

.btn-sm {
    padding: 0.39rem 0.72rem;
    border-radius: 0.72rem;
    font-size: 0.84rem;
}

.btn-primary,
.btn-success {
    color: #f6fbff;
    background: linear-gradient(145deg, #102842, #071526 70%);
    border-color: #071526;
    box-shadow: 0 0.7rem 1.35rem rgba(7, 21, 38, 0.18);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-success:hover,
    .btn-success:focus {
        color: #ffffff;
        background: linear-gradient(145deg, #123253, #08192a 70%);
        border-color: #040d18;
        box-shadow: 0 0.9rem 1.6rem rgba(7, 21, 38, 0.24);
    }

.btn-danger {
    color: #f6fbff;
    background: linear-gradient(145deg, #ce5555, #b73535);
    border-color: #b73535;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background: linear-gradient(145deg, #d75f5f, #9e2e2e);
        border-color: #9e2e2e;
    }

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger {
    background: rgba(246, 251, 255, 0.48);
    border-color: rgba(91, 61, 32, 0.22);
    color: var(--pf-ink-2);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-success:hover,
    .btn-outline-success:focus,
    .btn-outline-warning:hover,
    .btn-outline-warning:focus {
        color: #f6fbff;
        background: var(--pf-accent-dark);
        border-color: var(--pf-accent-dark);
    }

.btn-outline-danger {
    color: #a73535;
    border-color: rgba(199, 72, 72, 0.32);
}

    .btn-outline-danger:hover,
    .btn-outline-danger:focus {
        color: #f6fbff;
        background: var(--pf-red);
        border-color: var(--pf-red);
    }

.badge {
    border-radius: 999px;
    padding: 0.42em 0.72em;
    font-size: 0.76em;
    font-weight: 820;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.alert,
.app-alert {
    border: 1px solid rgba(91, 61, 32, 0.16);
    border-radius: var(--pf-radius-md);
    color: var(--pf-ink-2);
    box-shadow: var(--pf-shadow-xs);
}

.alert-success {
    color: #087c6d;
    background: var(--pf-green-soft);
    border-color: rgba(21, 154, 132, 0.24);
}

.alert-info {
    color: #0c5d96;
    background: var(--pf-blue-soft);
    border-color: rgba(20, 107, 215, 0.22);
}

.alert-warning {
    color: #986503;
    background: var(--pf-amber-soft);
    border-color: rgba(203, 122, 4, 0.24);
}

.alert-danger {
    color: #a62c2c;
    background: var(--pf-red-soft);
    border-color: rgba(199, 72, 72, 0.24);
}

.alert-link {
    color: inherit;
    font-weight: 880;
}

.pagination {
    gap: 0.28rem;
}

.page-link {
    color: var(--pf-ink-2);
    background: rgba(246, 251, 255, 0.78);
    border: 1px solid rgba(91, 61, 32, 0.16);
    border-radius: 0.7rem !important;
    font-weight: 720;
}

    .page-link:hover,
    .page-link:focus {
        color: #f6fbff;
        background: var(--pf-accent-dark);
        border-color: var(--pf-accent-dark);
        box-shadow: var(--pf-focus);
    }

.page-item.active .page-link {
    color: #f6fbff;
    background: #071526;
    border-color: #071526;
}

.page-item.disabled .page-link {
    color: var(--pf-muted-2);
    background: rgba(246, 251, 255, 0.42);
}

/* =========================================================
   Auth és eredmény oldalak
   ========================================================= */

.auth-page {
    min-height: calc(100vh - 210px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 470px;
    border-radius: 2rem;
    padding: 1.85rem;
    overflow: hidden;
}

    .auth-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 100% 0%, rgba(32, 199, 238, 0.22), transparent 33%), linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 44%);
    }

    .auth-card > * {
        position: relative;
        z-index: 1;
    }

.auth-card-wide {
    max-width: 800px;
}

.auth-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1.05rem;
    margin-bottom: 1.45rem;
}

    .auth-card-header h1 {
        margin: 0 0 0.35rem;
        color: var(--pf-ink);
        font-size: 1.58rem;
        font-weight: 930;
        letter-spacing: -0.045em;
        line-height: 1.08;
    }

    .auth-card-header p {
        margin: 0;
        color: var(--pf-muted);
    }

.app-logo-mark {
    flex: 0 0 auto;
    font-size: 1.34rem;
}

.auth-card-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.35rem;
    color: var(--pf-muted);
}

.result-icon {
    width: 3.8rem;
    height: 3.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 1.3rem;
    font-size: 1.72rem;
    font-weight: 950;
    box-shadow: var(--pf-shadow-sm);
}

.result-icon-success {
    color: #056b5e;
    background: linear-gradient(145deg, #e6fff8, #b8f3e5);
}

.result-icon-error {
    color: #a92b2b;
    background: linear-gradient(145deg, #ffe8e8, #f2b9b9);
}

/* =========================================================
   Jelszóházirend
   ========================================================= */

.password-policy-panel {
    margin-top: 0.7rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(91, 61, 32, 0.13);
    border-radius: var(--pf-radius-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent), rgba(244, 234, 215, 0.62);
}

.password-policy-title {
    margin-bottom: 0.58rem;
    color: var(--pf-ink);
    font-size: 0.88rem;
    font-weight: 900;
}

.password-rules {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .password-rules li {
        position: relative;
        margin-bottom: 0.36rem;
        padding-left: 1.65rem;
        color: var(--pf-muted);
        font-size: 0.88rem;
    }

        .password-rules li:last-child {
            margin-bottom: 0;
        }

        .password-rules li::before {
            content: "○";
            position: absolute;
            left: 0.15rem;
            top: 0.02rem;
            color: var(--pf-muted-2);
            font-weight: 900;
        }

        .password-rules li.is-ok {
            color: #087c6d;
        }

            .password-rules li.is-ok::before {
                content: "✓";
                color: var(--pf-green);
            }

        .password-rules li.is-missing {
            color: var(--pf-muted);
        }

/* =========================================================
   Térképes / helyszínrajzos elemek
   ========================================================= */

.reception-filter-form input,
.reception-filter-form select {
    max-width: none;
}

.layout-editor-stage-wrap {
    width: 100%;
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid rgba(91, 61, 32, 0.12);
    border-radius: var(--pf-radius-lg);
    background: linear-gradient(135deg, rgba(7, 21, 38, 0.05), transparent), rgba(246, 251, 255, 0.68);
}

.layout-editor-stage,
.reservation-layout-stage,
.reception-map-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid rgba(91, 61, 32, 0.20);
    border-radius: 1.05rem;
    background: #d3e5f3;
    box-shadow: var(--pf-shadow-sm);
    overflow: hidden;
}

    .layout-editor-stage.is-draw-mode {
        cursor: crosshair;
    }

.layout-editor-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: inherit;
    filter: saturate(0.82) contrast(1.03);
}

.layout-editor-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.layout-editor-draw-preview {
    position: absolute;
    z-index: 20;
    border: 2px dashed #d9f8ff;
    border-radius: 0.42rem;
    background: rgba(10, 115, 232, 0.26);
    box-shadow: 0 0 0 9999px rgba(7, 21, 38, 0.18);
    pointer-events: none;
}

.layout-editor-drawing,
.layout-editor-drawing * {
    cursor: crosshair !important;
    user-select: none !important;
}

.layout-editor-spot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #053d36;
    background: rgba(88, 144, 105, 0.34);
    border: 2px solid rgba(28, 102, 62, 0.92);
    border-radius: 0.42rem;
    box-shadow: 0 0.18rem 0.45rem rgba(7, 21, 38, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    cursor: move;
    pointer-events: auto;
    touch-action: none;
    transform-origin: center center;
    user-select: none;
}

    .layout-editor-spot:hover,
    .layout-editor-spot:focus {
        outline: none;
        box-shadow: 0 0 0 0.22rem rgba(10, 115, 232, 0.30), 0 0.18rem 0.55rem rgba(7, 21, 38, 0.26);
    }

    .layout-editor-spot.is-selected {
        z-index: 8;
        color: #f6fbff;
        background: rgba(10, 115, 232, 0.72);
        border-color: #e7fbff;
    }

    .layout-editor-spot.is-out-of-service {
        color: #053f7f;
        background: rgba(241, 201, 106, 0.55);
        border-color: #0b72d9;
    }

    .layout-editor-spot.is-inactive {
        color: #253548;
        background: rgba(113, 102, 91, 0.32);
        border-color: rgba(73, 67, 60, 0.82);
    }

    .layout-editor-spot.is-electric::after {
        content: "⚡";
        position: absolute;
        right: -0.52rem;
        top: -0.58rem;
        min-width: 1.15rem;
        height: 1.15rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.08rem 0.25rem;
        color: #073960;
        background: #e8f7ff;
        border: 1px solid rgba(20, 107, 215, 0.30);
        border-radius: 999px;
        font-size: 0.78rem;
        box-shadow: var(--pf-shadow-xs);
    }

    .layout-editor-spot.is-motorcycle {
        border-style: dashed;
    }

        .layout-editor-spot.is-motorcycle .layout-editor-spot-label::before {
            content: "🏍 ";
            font-size: 0.86em;
        }

    .layout-editor-spot.is-fixed::before {
        content: "★";
        position: absolute;
        left: -0.52rem;
        top: -0.58rem;
        min-width: 1.12rem;
        height: 1.12rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.08rem 0.23rem;
        color: #f6fbff;
        background: #071526;
        border-radius: 999px;
        font-size: 0.75rem;
        box-shadow: var(--pf-shadow-xs);
    }

.layout-editor-spot-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.1rem 0.22rem;
}

.layout-editor-resize-handle {
    position: absolute;
    right: -0.39rem;
    bottom: -0.39rem;
    z-index: 10;
    width: 0.92rem;
    height: 0.92rem;
    border: 2px solid #f6fbff;
    border-radius: 999px;
    background: var(--pf-accent);
    box-shadow: 0 0.1rem 0.35rem rgba(7, 21, 38, 0.34);
    cursor: nwse-resize;
}

.layout-editor-rotate-handle {
    position: absolute;
    left: 50%;
    top: -1.55rem;
    z-index: 11;
    width: 1rem;
    height: 1rem;
    margin-left: -0.5rem;
    border: 2px solid #f6fbff;
    border-radius: 999px;
    background: var(--pf-violet);
    box-shadow: 0 0.1rem 0.35rem rgba(7, 21, 38, 0.34);
    cursor: grab;
}

    .layout-editor-rotate-handle::before {
        content: "↻";
        position: absolute;
        inset: -0.26rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 900;
    }

.layout-editor-dragging,
.layout-editor-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.reservation-layout-stage {
    max-width: 100%;
}

.reservation-layout-spot {
    cursor: default;
    pointer-events: none;
}

.reservation-layout-assigned-spot {
    z-index: 7;
    color: #f6fbff;
    background: rgba(20, 107, 215, 0.72);
    border-color: #d9f8ff;
}

.reception-map-card + .reception-map-card {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pf-line-2);
}

.reception-map-stage {
    max-width: 100%;
}

.reception-map-spot {
    cursor: default;
    pointer-events: auto;
}

    .reception-map-spot.is-reception-free {
        color: #053d36;
        background: rgba(71, 145, 91, 0.30);
        border-color: rgba(28, 102, 62, 0.95);
    }

    .reception-map-spot.is-reception-occupied {
        z-index: 5;
        color: #f5fbff;
        background: rgba(199, 72, 72, 0.66);
        border-color: #ecf9ff;
    }

    .reception-map-spot.is-reception-grace {
        z-index: 6;
        color: #053f7f;
        background: rgba(32, 199, 238, 0.56);
        border-color: #054a9c;
        border-style: dashed;
    }

.reception-map-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.72rem 1.05rem;
    color: var(--pf-muted);
    font-size: 0.88rem;
}

    .reception-map-legend > span {
        display: inline-flex;
        align-items: center;
        gap: 0.38rem;
    }

.reception-map-legend-box {
    width: 1.08rem;
    height: 0.78rem;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.reception-map-legend-free {
    background: rgba(71, 145, 91, 0.30);
    border-color: rgba(28, 102, 62, 0.95);
}

.reception-map-legend-occupied {
    background: rgba(199, 72, 72, 0.66);
    border-color: #c74848;
}

.reception-map-legend-grace {
    background: rgba(32, 199, 238, 0.56);
    border-color: #054a9c;
    border-style: dashed;
}

.reception-map-legend-unavailable {
    background: rgba(113, 102, 91, 0.32);
    border-color: rgba(73, 67, 60, 0.82);
}

.reception-map-legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    font-style: normal;
}

/* =========================================================
   Cookie banner
   ========================================================= */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--pf-cookie-offset);
    z-index: 1045;
    pointer-events: none;
}

.cookie-banner-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    color: #e4faff;
    background: linear-gradient(90deg, rgba(10, 115, 232, 0.28), transparent 48%), rgba(7, 21, 38, 0.96);
    border: 1px solid rgba(246, 251, 255, 0.14);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -1rem 2.5rem rgba(7, 21, 38, 0.24);
    pointer-events: auto;
    backdrop-filter: blur(16px);
}

.cookie-banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.36rem 0.56rem;
    color: rgba(246, 251, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.45;
}

    .cookie-banner-content strong {
        color: #f6fbff;
    }

    .cookie-banner-content a {
        color: #78e5ff;
        font-weight: 780;
        text-decoration: none;
    }

        .cookie-banner-content a:hover,
        .cookie-banner-content a:focus {
            color: #ffffff;
        }

.cookie-banner-form {
    flex: 0 0 auto;
    margin: 0;
}

    .cookie-banner-form .btn {
        color: #061526;
        background: linear-gradient(145deg, #e7fbff, #20c7ee);
        border-color: rgba(246, 251, 255, 0.36);
        box-shadow: none;
    }

/* =========================================================
   Finom kompatibilitási javítások
   ========================================================= */

.rounded,
.rounded-3 {
    border-radius: var(--pf-radius-sm) !important;
}

.shadow-sm {
    box-shadow: var(--pf-shadow-sm) !important;
}

.btn-group {
    gap: 0.35rem;
}

    .btn-group > .btn {
        border-radius: 0.72rem !important;
    }

.d-grid .btn + .btn,
.auth-form .btn + .btn {
    margin-top: 0;
}

hr {
    border-color: var(--pf-line);
    opacity: 1;
}

code {
    color: #0b4b8f;
    background: rgba(10, 115, 232, 0.12);
    border: 1px solid rgba(10, 115, 232, 0.12);
    border-radius: 0.42rem;
    padding: 0.1rem 0.28rem;
}

:focus-visible {
    outline: 2px solid rgba(10, 115, 232, 0.72);
    outline-offset: 2px;
}
