/* =============================================================
   Palazzo Machiavelli Parking — application styles.

   The palette, typography and button shapes are taken from the
   Palazzo Machiavelli Trieste brand system (palazzomachiavellitrieste.com):
   deep green #102721 as primary, warm sand/bronze as the accent,
   Kumbh Sans for UI text and Playfair Display for headings.

   Layers a lightweight app shell (fixed sidebar + topbar) on top of
   Bootstrap 5. Responsive: the sidebar collapses off-canvas below "lg".
   ============================================================= */

/* ---------- Brand tokens ------------------------------------ */
:root {
    /* Brand colours (mirrors the marketing site's design tokens). */
    --pm-primary:          #102721;
    --pm-primary-dark:     #0e211c;
    --pm-primary-light:    #1f4c40;
    --pm-secondary:        #e4d4ba;   /* sand   */
    --pm-secondary-dark:   #a7804e;   /* bronze — the interactive accent */
    --pm-secondary-light:  #f2eade;   /* cream  */
    --pm-accent-on-dark:   #c9a675;   /* bronze, lightened for the green field */

    --pm-gray-50:  #f4f5f6;
    --pm-gray-100: #e6e6e6;
    --pm-gray-200: #ccc;
    --pm-gray-300: #b3b3b3;
    --pm-gray-400: #999;
    --pm-gray-500: #7f7f7f;
    --pm-gray-600: #666;
    --pm-gray-700: #4c4c4c;
    --pm-gray-800: #333;
    --pm-gray-900: #191919;

    --pm-success:       #35cf58;
    --pm-success-dark:  #1f7f35;
    --pm-success-light: #88e29c;
    --pm-danger:        #dc3545;
    --pm-danger-dark:   #941a25;
    --pm-danger-light:  #eb8e97;
    --pm-warning:       #ffc107;
    --pm-warning-dark:  #9e7700;
    --pm-warning-light: #ffda6b;
    --pm-info:          #21c9e3;
    --pm-info-dark:     #127c8d;
    --pm-info-light:    #7cdfef;

    --pm-font-base:  "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pm-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Shell metrics. */
    --sidebar-width: 264px;
    --topbar-height: 60px;
    --sidebar-bg: var(--pm-primary);
    --sidebar-fg: rgba(242, 234, 222, .78);
    --sidebar-fg-muted: rgba(242, 234, 222, .45);
    --sidebar-active: var(--pm-secondary-dark);
    --content-bg: var(--pm-gray-50);
    --pm-border: #e3e5e4;
}

/* ---------- Bootstrap re-skin -------------------------------
   Bootstrap 5.3 reads most theme colours from CSS variables, so
   remapping them here repaints links, badges, tables, alerts and
   utilities in one place. Components that hard-code their own
   `--bs-btn-*` locals are overridden individually further down.
   ----------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: #102721;
    --bs-primary-rgb: 16, 39, 33;
    --bs-primary-text-emphasis: #0e211c;
    --bs-primary-bg-subtle: #e4ebe8;
    --bs-primary-border-subtle: #b9cbc4;

    --bs-secondary: #666;
    --bs-secondary-rgb: 102, 102, 102;
    --bs-secondary-color: rgba(51, 51, 51, .75);
    --bs-secondary-text-emphasis: #4c4c4c;
    --bs-secondary-bg-subtle: #eeefef;
    --bs-secondary-bg: var(--pm-gray-100);
    --bs-secondary-border-subtle: #ccc;

    --bs-success: #1f7f35;
    --bs-success-rgb: 31, 127, 53;
    --bs-success-text-emphasis: #145223;
    --bs-success-bg-subtle: #e2f5e7;
    --bs-success-border-subtle: #a8dcb6;

    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-danger-text-emphasis: #941a25;
    --bs-danger-bg-subtle: #fbe3e5;
    --bs-danger-border-subtle: #eb8e97;

    --bs-warning: #9e7700;
    --bs-warning-rgb: 158, 119, 0;
    --bs-warning-text-emphasis: #6b5000;
    --bs-warning-bg-subtle: #fff3d3;
    --bs-warning-border-subtle: #ffda6b;

    --bs-info: #127c8d;
    --bs-info-rgb: 18, 124, 141;
    --bs-info-text-emphasis: #0b4f5a;
    --bs-info-bg-subtle: #ddf5f9;
    --bs-info-border-subtle: #7cdfef;

    --bs-dark: #0e211c;
    --bs-dark-rgb: 14, 33, 28;

    /* `light` is a neutral, but Bootstrap's #f8f9fa is a cool blue-white
       that reads wrong beside the warm palette. text-bg-light is used on
       ~26 badges and panels, so it has to be remapped too. */
    --bs-light: #f1f2f1;
    --bs-light-rgb: 241, 242, 241;
    --bs-light-bg-subtle: #fafbfa;
    --bs-light-border-subtle: var(--pm-gray-100);

    --bs-body-color: var(--pm-gray-800);
    --bs-body-bg: var(--content-bg);
    --bs-emphasis-color: var(--pm-primary-dark);
    --bs-border-color: var(--pm-border);
    --bs-heading-color: var(--pm-primary-dark);

    --bs-link-color: #102721;
    --bs-link-color-rgb: 16, 39, 33;
    /* Bronza je brendirani hover, ali #a7804e na belom daje samo 3.60:1.
       Ista nijansa, tamnija za jedan korak -> 4.79:1 (AA). */
    --bs-link-hover-color: #8f6c40;
    --bs-link-hover-color-rgb: 143, 108, 64;

    --bs-focus-ring-color: rgba(16, 39, 33, .27);
    --bs-border-radius: .55rem;
    --bs-border-radius-sm: .4rem;
    --bs-border-radius-lg: .8rem;

    --bs-font-sans-serif: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Bootstrap's stock inline-code pink clashes badly with the palette;
       Cloudbeds ids and table codes render in <code>, so this is visible. */
    --bs-code-color: #8f6c40;
    --bs-highlight-bg: var(--pm-secondary-light);
}

[x-cloak] { display: none !important; }

body {
    background: var(--content-bg);
    font-family: var(--pm-font-base);
    color: var(--pm-gray-800);
}

/* Headings carry the brand serif, as they do on the public site. */
h1, h2, h3, .page-title, .auth-title {
    font-family: var(--pm-font-serif);
    color: var(--pm-primary-dark);
}

a { text-underline-offset: .18em; }

/* ---------- Buttons ------------------------------------------
   The brand's buttons are pill-shaped, primary green, and turn
   bronze on hover. Bootstrap sets per-component locals, so each
   variant is remapped rather than relying on --bs-primary.
   ----------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 999px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--pm-primary);
    --bs-btn-border-color: var(--pm-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #8f6c40;
    --bs-btn-hover-border-color: #8f6c40;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7a5b35;
    --bs-btn-active-border-color: #7a5b35;
    --bs-btn-active-color: var(--pm-secondary-light);
    --bs-btn-disabled-bg: #6a7d77;
    --bs-btn-disabled-border-color: #6a7d77;
    --bs-btn-focus-shadow-rgb: 16, 39, 33;
}

.btn-outline-primary {
    --bs-btn-color: var(--pm-primary);
    --bs-btn-border-color: var(--pm-primary);
    --bs-btn-hover-bg: var(--pm-primary);
    --bs-btn-hover-border-color: var(--pm-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-primary-dark);
    --bs-btn-active-border-color: var(--pm-primary-dark);
    --bs-btn-focus-shadow-rgb: 16, 39, 33;
}

.btn-secondary {
    --bs-btn-bg: var(--pm-gray-600);
    --bs-btn-border-color: var(--pm-gray-600);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--pm-gray-700);
    --bs-btn-hover-border-color: var(--pm-gray-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-gray-800);
    --bs-btn-active-border-color: var(--pm-gray-800);
    --bs-btn-focus-shadow-rgb: 102, 102, 102;
}

.btn-outline-secondary {
    --bs-btn-color: var(--pm-gray-700);
    --bs-btn-border-color: var(--pm-gray-300);
    --bs-btn-hover-bg: var(--pm-gray-600);
    --bs-btn-hover-border-color: var(--pm-gray-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-gray-700);
    --bs-btn-active-border-color: var(--pm-gray-700);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 102, 102, 102;
}

/* The remaining semantic variants keep their own --bs-btn-* locals, so
   each has to be remapped explicitly or Bootstrap's stock colours leak
   through (its raw #ffc107 warning in particular is unreadable on white). */
.btn-success {
    --bs-btn-bg: var(--pm-success-dark);
    --bs-btn-border-color: var(--pm-success-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #196829;
    --bs-btn-hover-border-color: #196829;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #145223;
    --bs-btn-active-border-color: #145223;
    --bs-btn-focus-shadow-rgb: 31, 127, 53;
}
.btn-outline-success {
    --bs-btn-color: var(--pm-success-dark);
    --bs-btn-border-color: var(--pm-success-dark);
    --bs-btn-hover-bg: var(--pm-success-dark);
    --bs-btn-hover-border-color: var(--pm-success-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #145223;
    --bs-btn-active-border-color: #145223;
    --bs-btn-focus-shadow-rgb: 31, 127, 53;
}

.btn-warning {
    --bs-btn-bg: var(--pm-warning-dark);
    --bs-btn-border-color: var(--pm-warning-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #866400;
    --bs-btn-hover-border-color: #866400;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6b5000;
    --bs-btn-active-border-color: #6b5000;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 158, 119, 0;
}
.btn-outline-warning {
    --bs-btn-color: #8a6800;
    --bs-btn-border-color: var(--pm-warning-dark);
    --bs-btn-hover-bg: var(--pm-warning-dark);
    --bs-btn-hover-border-color: var(--pm-warning-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6b5000;
    --bs-btn-active-border-color: #6b5000;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 158, 119, 0;
}

.btn-danger {
    --bs-btn-bg: var(--pm-danger);
    --bs-btn-border-color: var(--pm-danger);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #b62b38;
    --bs-btn-hover-border-color: #b62b38;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-danger-dark);
    --bs-btn-active-border-color: var(--pm-danger-dark);
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
}
.btn-outline-danger {
    --bs-btn-color: var(--pm-danger-dark);
    --bs-btn-border-color: var(--pm-danger);
    --bs-btn-hover-bg: var(--pm-danger);
    --bs-btn-hover-border-color: var(--pm-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-danger-dark);
    --bs-btn-active-border-color: var(--pm-danger-dark);
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
}

.btn-info {
    --bs-btn-bg: var(--pm-info-dark);
    --bs-btn-border-color: var(--pm-info-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0f6b79;
    --bs-btn-hover-border-color: #0f6b79;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0b4f5a;
    --bs-btn-active-border-color: #0b4f5a;
    --bs-btn-focus-shadow-rgb: 18, 124, 141;
}
.btn-outline-info {
    --bs-btn-color: var(--pm-info-dark);
    --bs-btn-border-color: var(--pm-info-dark);
    --bs-btn-hover-bg: var(--pm-info-dark);
    --bs-btn-hover-border-color: var(--pm-info-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0b4f5a;
    --bs-btn-active-border-color: #0b4f5a;
    --bs-btn-focus-shadow-rgb: 18, 124, 141;
}

.btn-outline-dark {
    --bs-btn-color: var(--pm-primary-dark);
    --bs-btn-border-color: var(--pm-primary-dark);
    --bs-btn-hover-bg: var(--pm-primary-dark);
    --bs-btn-hover-border-color: var(--pm-primary-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-primary);
    --bs-btn-active-border-color: var(--pm-primary);
    --bs-btn-focus-shadow-rgb: 14, 33, 28;
}

/* ---------- Brand accent -------------------------------------
   Bronze/sand is the brand's one warm accent. In the parking views
   it carries a single meaning — "a guest has this spot" — which is
   what makes it readable against the green "free" state.
   ----------------------------------------------------------- */
.text-brand-accent { color: #8f6c40 !important; }   /* 4.79:1 na belom */

/* .text-warning cita --bs-warning-rgb (#9e7700) = 4.12:1 na belom, ispod AA.
   --bs-warning se NE menja: Bootstrap hardkodira crn tekst u .text-bg-warning,
   a crno na #9e7700 je 5.09:1 — pomeranje tokena bi to pokvarilo. Zato se
   koriguje samo tekst-na-beloj-podlozi. */
.text-warning { color: #8a6800 !important; }   /* 5.17:1 */

.btn-brand-accent {
    --bs-btn-bg: #8f6c40;
    --bs-btn-border-color: #8f6c40;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #7a5b35;
    --bs-btn-hover-border-color: #7a5b35;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #6b4f2e;
    --bs-btn-active-border-color: #7a5b35;
    --bs-btn-active-color: var(--pm-secondary-light);
    --bs-btn-focus-shadow-rgb: 167, 128, 78;
}
.btn-outline-brand-accent {
    --bs-btn-color: #8f6c40;
    --bs-btn-border-color: var(--pm-secondary-dark);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--pm-secondary-dark);
    --bs-btn-hover-border-color: var(--pm-secondary-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7a5b35;
    --bs-btn-active-border-color: #7a5b35;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 167, 128, 78;
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--pm-border);
    --bs-btn-color: var(--pm-gray-700);
    --bs-btn-hover-bg: var(--pm-secondary-light);
    --bs-btn-hover-border-color: var(--pm-secondary);
    --bs-btn-hover-color: var(--pm-primary-dark);
    --bs-btn-active-bg: var(--pm-secondary);
    --bs-btn-active-border-color: var(--pm-secondary-dark);
}

.btn-dark {
    --bs-btn-bg: var(--pm-primary-dark);
    --bs-btn-border-color: var(--pm-primary-dark);
    --bs-btn-hover-bg: var(--pm-secondary-dark);
    --bs-btn-hover-border-color: var(--pm-secondary-dark);
}

/* Buttons inside input groups / button groups keep square inner edges,
   otherwise the pill radius breaks the seam between them. */
.input-group > .btn,
.btn-group > .btn:not(:first-child),
.input-group > .btn:not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.btn-group > .btn:last-child  { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.input-group > .btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }

/* ---------- Forms ------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pm-primary-light);
    box-shadow: 0 0 0 .2rem rgba(16, 39, 33, .18);
}

.form-check-input:checked {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
}

.form-label { font-weight: 600; font-size: .88rem; color: var(--pm-gray-700); }

/* ---------- Shell layout ------------------------------------ */
.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow-y: auto;
    transition: transform .2s ease-in-out;
}

.app-main {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-content {
    flex: 1 0 auto;
    padding: 1.5rem 0;
}

.app-footer {
    padding: 1rem 0;
    border-top: 1px solid var(--pm-border);
}

/* ---------- Sidebar ----------------------------------------- */
.sidebar-brand {
    padding: 1.35rem 1.25rem 1.15rem;
    border-bottom: 1px solid rgba(242, 234, 222, .12);
}

/* The lockup is an inline SVG so it inherits `color` from here. */
.sidebar-brand > a {
    display: block;
    text-decoration: none;
    color: var(--pm-secondary-light);
    transition: color .15s ease;
}
.sidebar-brand > a:hover { color: #fff; }

.sidebar-brand .brand-logo {
    display: block;
    width: 100%;
    max-width: 172px;
    height: auto;
}

.sidebar-brand-sub {
    display: block;
    margin-top: .7rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--pm-accent-on-dark);
}

.sidebar-nav { padding: .5rem 0 1.5rem; }

.sidebar-heading {
    padding: 1rem 1.25rem .35rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sidebar-fg-muted);
}

.app-sidebar .nav-link {
    color: var(--sidebar-fg);
    padding: .55rem 1.25rem;
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}

.app-sidebar .nav-link .bi { font-size: 1.05rem; width: 1.25rem; text-align: center; }

.app-sidebar .nav-link:hover:not(.disabled) {
    color: #fff;
    background: rgba(242, 234, 222, .07);
}

.app-sidebar .nav-link.active {
    color: #fff;
    background: rgba(167, 128, 78, .22);
    border-left-color: var(--sidebar-active);
}

.app-sidebar .nav-link.disabled {
    color: var(--sidebar-fg-muted);
    cursor: default;
}

/* ---------- Topbar ------------------------------------------ */
.app-topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--pm-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-right { margin-left: auto; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--pm-secondary-light);
    color: var(--pm-primary);
}

.dropdown-menu.show-on-open { display: block; }

.dropdown-item:active { background-color: var(--pm-primary); }
.dropdown-item:hover  { background-color: var(--pm-secondary-light); color: var(--pm-primary-dark); }

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

.page-title { font-size: 1.55rem; font-weight: 600; margin: 0; }
.page-subtitle { color: var(--pm-gray-500); margin: .15rem 0 0; font-size: .9rem; }

.card {
    border-color: var(--pm-border);
    border-radius: var(--bs-border-radius-lg);
}

.card-header {
    background: #fff;
    border-bottom-color: var(--pm-border);
    font-weight: 600;
    color: var(--pm-primary-dark);
}

.table > thead {
    color: var(--pm-gray-600);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nav-tabs .nav-link.active { color: var(--pm-primary); border-bottom-color: #fff; }
.nav-tabs .nav-link:hover   { color: var(--pm-secondary-dark); }

.page-link { color: var(--pm-primary); }
.page-item.active .page-link { background-color: var(--pm-primary); border-color: var(--pm-primary); }

.error-state .error-code {
    font-family: var(--pm-font-base);
    font-variant-numeric: tabular-nums;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--pm-secondary-dark);   /* sand je bio 1.33:1 na pozadini; bronza daje 3.29:1 */
    line-height: 1;
}

/* ---------- Mobile ------------------------------------------ */
.app-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 33, 28, .55);
    z-index: 1035;
}

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-main { margin-left: 0; }
}

/* ---------- Auth page --------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--pm-primary-light) 0%, var(--pm-primary) 45%, var(--pm-primary-dark) 100%);
    padding: 1.5rem;
}

.auth-wrap { width: 100%; max-width: 430px; }

.auth-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 18px 45px rgba(14, 33, 28, .35);
}

/* Lockup sitting above the card, on the green field. */
.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--pm-secondary-light);
}

.auth-brand .brand-logo { width: 210px; max-width: 70%; height: auto; }

.auth-brand .auth-brand-sub {
    display: block;
    margin-top: .85rem;
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--pm-accent-on-dark);
}

.auth-title { font-size: 1.35rem; margin-bottom: .15rem; }

.auth-footnote { color: var(--pm-secondary); }

/* ---------- Parking map -------------------------------------
   Status colours are brand-native: green = free, sand/bronze =
   taken by a guest, grey = blocked, amber = maintenance.
   ----------------------------------------------------------- */
.garage-grid {
    display: grid;
    gap: .75rem;
}

.spot-cell {
    border: 2px solid transparent;
    border-radius: .6rem;
    padding: .75rem .5rem;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
    color: var(--pm-primary-dark);
}
.spot-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14, 33, 28, .16); }
.spot-cell .spot-name { font-weight: 700; font-size: 1.1rem; line-height: 1; }
.spot-cell .spot-meta { font-size: .72rem; opacity: .85; margin-top: .25rem; }

.spot-available   { background: #dcece5; border-color: var(--pm-primary-light); }
.spot-reserved    { background: var(--pm-secondary-light); border-color: var(--pm-secondary-dark); color: #5f4626; }
.spot-blocked     { background: var(--pm-gray-100); border-color: var(--pm-gray-400); color: var(--pm-gray-700); }
.spot-maintenance { background: #fff3d3; border-color: var(--pm-warning-dark); color: #6b5000; }
.spot-selected    { border-color: var(--pm-secondary-dark) !important; box-shadow: 0 0 0 3px rgba(167, 128, 78, .45); }

.spot-empty {
    border: 2px dashed var(--pm-gray-200);
    border-radius: .6rem;
    min-height: 84px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pm-gray-300); font-size: .8rem;
}

.spot-badge-large {
    font-size: .6rem; font-weight: 700; letter-spacing: .04em;
    background: var(--pm-primary); color: var(--pm-secondary-light); border-radius: 1rem; padding: .05rem .4rem; margin-top: .3rem;
}

.map-legend .legend-chip {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; margin-right: 1rem;
}
.map-legend .legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }

/* ---------- Parking map 2.0 --------------------------------- */
.summary-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
@media (max-width: 991.98px) { .summary-bar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .summary-bar { grid-template-columns: repeat(2, 1fr); } }
.summary-tile {
    border: 1px solid var(--pm-border); border-radius: .7rem; background: #fff;
    padding: .6rem .75rem; text-align: center;
}
.summary-tile .num { font-family: var(--pm-font-base); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--pm-primary-dark); }
.summary-tile .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pm-gray-500); margin-top: .2rem; }

.map2-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: .8rem;
    padding: .75rem .85rem;
    min-height: 132px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: .15rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .3s ease, border-color .3s ease, opacity .2s ease;
    user-select: none;
}
.map2-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 33, 28, .16); }
.map2-card:focus-visible { outline: 3px solid rgba(167, 128, 78, .55); }
.map2-card .m2-top { display: flex; align-items: center; justify-content: space-between; }
.map2-card .m2-name { font-weight: 800; font-size: 1.25rem; line-height: 1; }
.map2-card .m2-status { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 1rem; background: rgba(255,255,255,.6); }
.map2-card .m2-line { font-size: .8rem; line-height: 1.25; display: flex; gap: .3rem; align-items: center; }
.map2-card .m2-line .bi { font-size: .8rem; opacity: .7; }
.map2-card .m2-guest { font-weight: 700; }
.map2-card .m2-badge-large { position: absolute; top: -8px; left: -8px; font-size: .58rem; font-weight: 800; background: var(--pm-primary); color: var(--pm-secondary-light); border-radius: 1rem; padding: .1rem .45rem; }
.map2-card .m2-kebab {
    border: none; background: rgba(255,255,255,.55); border-radius: 50%;
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--pm-gray-700);
}
.map2-card .m2-kebab:hover { background: rgba(255,255,255,.9); }
.map2-card.pulse { animation: m2pulse .7s ease; }
@keyframes m2pulse { 0% { box-shadow: 0 0 0 0 rgba(167, 128, 78, .55); } 100% { box-shadow: 0 0 0 12px rgba(167, 128, 78, 0); } }
.map2-card.dimmed { opacity: .16; filter: grayscale(.5); }
/* Departure day: the car is still in the spot until the check-out (or
   late check-out) time. Dashed border = "leaving today". */
.map2-card.spot-leaving { border-style: dashed; }
.map2-card .m2-depart { color: var(--pm-gray-700); }
.map2-card .m2-depart.m2-late { color: #8f6c40; font-weight: 600; }
/* Planning day: the spot is only being left, so it is free from the
   check-out time — dotted border = "frees up this day". */
.map2-card.spot-freeing { border-style: dotted; }
.map2-card .m2-arrive { color: var(--pm-primary-light); font-weight: 600; }

/* Day navigation above the map. */
.map-daybar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.map-daybar .map-daybar-date { width: auto; }
.map-daybar .map-daybar-days { display: flex; flex-wrap: wrap; gap: .25rem; }
.map-daybar .map-daybar-title { margin-left: auto; font-weight: 600; color: var(--pm-primary-dark); }
@media (max-width: 575.98px) { .map-daybar .map-daybar-title { margin-left: 0; width: 100%; } }
.summary-bar.summary-bar-9 { grid-template-columns: repeat(9, 1fr); }
@media (max-width: 1199.98px) { .summary-bar.summary-bar-9 { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 575.98px) { .summary-bar.summary-bar-9 { grid-template-columns: repeat(3, 1fr); } }

.map2-context {
    position: fixed; z-index: 1080; min-width: 190px;
    background: #fff; border: 1px solid var(--pm-border); border-radius: .6rem;
    box-shadow: 0 12px 30px rgba(14, 33, 28, .2); padding: .35rem;
}
.map2-context button, .map2-context a {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .5rem .6rem; border: none; background: none; border-radius: .4rem;
    font-size: .88rem; color: var(--pm-gray-800); text-decoration: none; text-align: left;
}
.map2-context button:hover, .map2-context a:hover { background: var(--pm-secondary-light); color: var(--pm-primary-dark); }

/* ---------- Calendar ---------------------------------------- */
.calendar-loading {
    position: absolute;
    top: .5rem; right: 1rem;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--pm-border);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .82rem;
    color: var(--pm-gray-600);
    box-shadow: 0 2px 8px rgba(14, 33, 28, .1);
}
/* FullCalendar timeline: keep it readable and scrollable on small screens */
#parking-calendar { min-height: 480px; }
.fc .fc-datagrid-cell-cushion { font-weight: 600; }
.fc-event { cursor: pointer; }
.fc .fc-resource-group .fc-datagrid-cell-cushion { text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; }
.fc .fc-button-primary {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
    border-radius: 999px;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--pm-secondary-dark);
    border-color: var(--pm-secondary-dark);
}
.fc .fc-toolbar-title { font-family: var(--pm-font-base); font-weight: 700; color: var(--pm-primary-dark); }

/* Lets a <template x-if> wrapper sit inside a <dl class="row"> grid. */
.d-contents { display: contents; }

/* ---------- Dashboard: today's arrivals & departures ---------
   The apartment leads each row (front desk thinks in apartments), so it
   is set large and in tabular digits — never in the serif. A spot is a
   chip in the "reserved" colours (cream fill, bronze border): a guest
   has it. A guest still without parking gets an amber edge.
   ----------------------------------------------------------- */
.guest-table td:first-child,
.guest-table th:first-child { padding-left: 1rem; }
.guest-table td:last-child,
.guest-table th:last-child { padding-right: 1rem; }
.apt-num {
    font-family: var(--pm-font-base);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pm-primary-dark);
}
.spot-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .1rem .5rem;
    border: 1px solid var(--pm-secondary-dark);
    border-radius: .4rem;
    background: var(--pm-secondary-light);
    color: #5f4626;
    font-size: .82rem;
    white-space: nowrap;
}
.spot-chip b { font-weight: 700; }
.spot-chip .vt { font-size: .75rem; color: #7a5b35; }
.row-needs-parking > td:first-child { box-shadow: inset 3px 0 0 var(--pm-warning); }