@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --pm-primary: #738B3B;
    --pm-primary-strong: #637833;
    --pm-primary-soft: rgba(115, 139, 59, 0.12);
    --pm-yellow: #FACB34;
    --pm-yellow-soft: rgba(250, 203, 52, 0.18);
    --pm-black: #111111;
    --pm-white: #F6F5F7;
    --pm-surface: #FFFFFF;
    --pm-surface-soft: #FBFBF8;
    --pm-surface-muted: #F1F4E8;
    --pm-success: #16A34A;
    --pm-success-soft: rgba(22, 163, 74, 0.12);
    --pm-danger: #DC2626;
    --pm-danger-soft: rgba(220, 38, 38, 0.12);
    --pm-warning: #F59E0B;
    --pm-warning-soft: rgba(245, 158, 11, 0.12);
    --pm-disabled: #D1D5DB;
    --pm-text: #111111;
    --pm-text-muted: #5D6672;
    --pm-text-soft: #7B8491;
    --pm-border: #E3E7D6;
    --pm-border-strong: #D6DCC4;
    --pm-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.06);
    --pm-shadow-md: 0 16px 40px rgba(17, 17, 17, 0.08);
    --pm-shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.1);
    --pm-radius-control: 12px;
    --pm-radius-card: 24px;
    --pm-radius-shell: 28px;
    --pm-space-1: 8px;
    --pm-space-2: 16px;
    --pm-space-3: 24px;
    --pm-space-4: 32px;
    --pm-space-5: 40px;
    /* Snappier global transition for hovers + theme colour cross-fade */
    --pm-transition: 170ms cubic-bezier(0.4, 0, 0.2, 1);
    /* BRAND UI 2026-06: Poppins for all numeric metrics (consistent across both dashboards) */
    --pm-font-numbers: "Poppins", "Inter", sans-serif;
    /* BRAND semantic palette (Pro) — occupied=yellow, available=olive, in=blue, out=yellow */
    --pm-occupied:#FACB34; --pm-occupied-soft:rgba(250,203,52,0.16); --pm-available:#738B3B; --pm-available-soft:rgba(115,139,59,0.14); --pm-in:#2F6FB0; --pm-out:#FACB34;
}

/* ── BRAND UI 2026-06 · Numeric metric font ──
   Poppins (tabular-aligned) for the big numbers / KPIs on BOTH dashboards, so digits are
   consistent (previously Geologica on Pro, Russo One on EECS-Nitro). !important beats the
   non-important Geologica rules regardless of source order; the Nitro Russo-One number rule
   is updated to the same variable in parkomate-theme-nitro.css. Body + chart-label fonts are
   intentionally left unchanged (numbers-only scope). */
.pm-live-kpi__body strong,
.pm-summary-card strong,
.pm-stat-item strong,
.pm-monitor-card strong,
.pm-eecs-summary-stat strong,
.pm-eecs-metric,
.pm-card-stats .pm-stat-value,
.pm-donut-center strong,
.pm-donut-callout__val,
.pm-insight-stat__val {
    font-family: var(--pm-font-numbers) !important;
    font-variant-numeric: tabular-nums;
}

/* ── BRAND UI 2026-06 · No decorative icons beside displayed numbers ──
   Hides the icon column in the KPI tiles on BOTH dashboards so the metric value is the
   focus (per brief: "remove icons where the data/numbers are displayed"). Scoped to the
   KPI strips only (.pm-live-kpi__icon is used nowhere else); markup is kept so this is a
   one-line rollback. The tile body then fills the tile and left-aligns cleanly. */
.pm-live-kpi__icon { display: none !important; }
.pm-live-kpi { gap: 0 !important; }

/* ── BRAND UI 2026-06 · PARK+ logo legibility on dark/Nitro ──
   The PARK+ wordmark is purple; on the dark/Nitro sidebar it reads dim. Brighten it on the
   dark themes only (single logo file used everywhere) so it stays crisp against dark. */
html.theme-nitro .logo-segment img,
html.dark .logo-segment img,
html.theme-nitro .pm-mobile-logo img,
html.dark .pm-mobile-logo img {
    filter: brightness(1.55) saturate(1.12) drop-shadow(0 0 1px rgba(255,255,255,0.25));
}

/* ── BRAND UI 2026-06 · Mobile / tablet responsiveness fixes ──
   The floor cards are resizable widgets; a drag-to-resize desktop width otherwise persists
   on phones and overflows/clips the card column. On <=991px force widget sections + the
   occupancy meter to fit the column, let the Taken/Free/Spaces mini-stats shrink, and hide
   the resize handles (no widget resizing on touch). */
@media (max-width: 991.98px) {
    .pm-inner-section { width: auto !important; max-width: 100% !important; min-width: 0 !important; }
    .pm-card-meter,
    .pm-card-meter-head,
    .pm-card-meter-track,
    .pm-card-meter-slots { min-width: 0 !important; max-width: 100% !important; }
    .pm-card-meter-slot { min-width: 0 !important; }
    .pm-card-meter-slot__key { letter-spacing: 0.04em; }
    .pm-section-drag-handle { display: none !important; }
}

html.dark {
    --pm-surface: #1A1A1A;
    --pm-surface-soft: #202020;
    --pm-surface-muted: #262B1B;
    --pm-white: #161616;
    --pm-text: #F6F5F7;
    --pm-text-muted: #D2D5DB;
    --pm-text-soft: #A3A8B3;
    --pm-border: rgba(246, 245, 247, 0.12);
    --pm-border-strong: rgba(246, 245, 247, 0.18);
    --pm-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
    --pm-shadow-md: 0 18px 44px rgba(0, 0, 0, 0.28);
    --pm-shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.36);
}

html,
body {
    min-height: 100%;
}

body.font-inter.dashcode-app,
body.font-inter.skin-default {
    font-family: "Inter", sans-serif;
    color: var(--pm-text);
    background:
        radial-gradient(circle at top left, rgba(115, 139, 59, 0.08), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(250, 203, 52, 0.18), transparent 18%),
        linear-gradient(180deg, #F7F8F3 0%, var(--pm-white) 32%, var(--pm-white) 100%);
}

html.dark body.font-inter.dashcode-app,
html.dark body.font-inter.skin-default {
    background:
        radial-gradient(circle at top left, rgba(115, 139, 59, 0.12), transparent 26%),
        radial-gradient(circle at 92% 4%, rgba(250, 203, 52, 0.16), transparent 16%),
        linear-gradient(180deg, #111111 0%, #171717 100%);
}

body.font-inter.dashcode-app::before,
body.font-inter.skin-default::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 28%),
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.46), transparent 24%);
    pointer-events: none;
    z-index: -2;
}

html.dark body.font-inter.dashcode-app::before,
html.dark body.font-inter.skin-default::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%),
        radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.03), transparent 24%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.card-title2,
.pm-page-title,
.pm-brand-title,
.pm-topbar-title,
.pm-login-copy h1,
.pm-login-panel h4 {
    font-family: "Geologica", sans-serif;
    color: var(--pm-text);
    letter-spacing: -0.03em;
}

body,
p,
span,
label,
button,
input,
select,
textarea,
th,
td,
a,
li {
    font-family: "Inter", sans-serif;
}

iconify-icon,
.bx {
    font-size: 24px;
}

.app-wrapper,
.page-content,
#content_layout {
    background: transparent;
}

#content_layout {
    padding: 0 !important;
}

.page-content {
    width: 100%;
    padding: 0 !important;
}

.sidebar-wrapper {
    background:
        linear-gradient(180deg, #F2F5E8 0%, #EEF2E2 50%, #EDF1E0 100%);
    border-right: 1px solid var(--pm-border);
    box-shadow: 20px 0 44px rgba(17, 17, 17, 0.06);
}

html.dark .sidebar-wrapper {
    background: linear-gradient(180deg, #171A14 0%, #1B1F17 100%);
}

.logo-segment {
    padding: var(--pm-space-3);
    border-bottom: 1px solid var(--pm-border);
    background:
        radial-gradient(circle at top right, rgba(250, 203, 52, 0.2), transparent 36%),
        linear-gradient(180deg, rgba(115, 139, 59, 0.05), rgba(255, 255, 255, 0));
}

.logo-segment a {
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.logo-segment img {
    width: auto;
    object-fit: contain;
}

.pm-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-brand-kicker,
.pm-topbar-eyebrow,
.pm-page-kicker,
.pm-toolbar-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pm-primary);
}

.pm-brand-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.pm-brand-subtitle,
.pm-page-subtitle,
.pm-toolbar-value,
.pm-login-copy p,
.pm-login-list-copy {
    color: var(--pm-text-muted);
    line-height: 1.65;
}

html.dark .pm-brand-subtitle,
html.dark .pm-page-subtitle,
html.dark .pm-toolbar-value,
html.dark .pm-login-copy p,
html.dark .pm-login-list-copy {
    color: var(--pm-text-muted);
}

.sidebar-menus {
    background: transparent !important;
    padding: var(--pm-space-2) !important;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: var(--pm-space-1);
}

.navItem {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px !important;
    border-radius: var(--pm-radius-control);
    border: 1px solid transparent;
    color: var(--pm-text) !important;
    font-weight: 600;
    background: transparent;
    transition: transform var(--pm-transition), background-color var(--pm-transition), border-color var(--pm-transition), box-shadow var(--pm-transition), color var(--pm-transition);
}

html.dark .navItem {
    color: var(--pm-text) !important;
}

.navItem .nav-icon,
.navItem .icon-arrow {
    color: inherit;
}

.navItem:hover {
    transform: translateX(2px);
    background: rgba(115, 139, 59, 0.08);
    border-color: rgba(115, 139, 59, 0.16);
    box-shadow: var(--pm-shadow-sm);
}

.navItem.active {
    color: var(--pm-black) !important;
    background: rgba(115, 139, 59, 0.18);
    border-color: rgba(115, 139, 59, 0.28);
    box-shadow: inset 0 0 0 1px rgba(115, 139, 59, 0.04);
}

html.dark .navItem.active,
html.dark .navItem.active span,
html.dark .navItem.active .nav-icon,
html.dark .navItem.active .icon-arrow {
    color: var(--pm-text) !important;
}

.sidebar-submenu {
    margin-top: var(--pm-space-1);
    margin-left: 12px;
    padding-left: var(--pm-space-2);
    border-left: 1px solid var(--pm-border);
}

.sidebar-submenu .nav-link,
.sidebar-submenu li a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--pm-radius-control);
    color: var(--pm-text-soft);
    font-size: 0.92rem;
    font-weight: 600;
    transition: background-color var(--pm-transition), color var(--pm-transition);
}

.sidebar-submenu .nav-link:hover,
.sidebar-submenu li a:hover,
.sidebar-submenu li.active a {
    color: var(--pm-text);
    background: rgba(115, 139, 59, 0.08);
}

#app_header .app-header {
    margin: var(--pm-space-3) var(--pm-space-3) 0;
    padding: 0 var(--pm-space-3);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-shell);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    box-shadow: var(--pm-shadow-sm);
}

html.dark #app_header .app-header {
    background: rgba(26, 26, 26, 0.9);
}

.pm-topbar-context {
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.pm-topbar-title {
    font-size: 1rem;
    font-weight: 700;
}

.pm-status-pill,
.pm-shell-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--pm-shadow-sm);
}

.pm-status-pill::before,
.pm-shell-pill::before,
.pm-banner-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.pm-status-pill::before,
.pm-shell-pill::before {
    background: var(--pm-primary);
    box-shadow: 0 0 0 4px var(--pm-primary-soft);
}

.nav-tools {
    gap: 12px !important;
}

.nav-tools>div>button,
.nav-tools>a.mobile-logo {
    border: 1px solid var(--pm-border) !important;
    background: var(--pm-surface);
    box-shadow: none;
    transition: transform var(--pm-transition), border-color var(--pm-transition), box-shadow var(--pm-transition), background-color var(--pm-transition);
}

.nav-tools>div>button:hover,
.nav-tools>a.mobile-logo:hover {
    transform: translateY(-1px);
    border-color: var(--pm-border-strong) !important;
    box-shadow: var(--pm-shadow-sm);
}

.content-wrapper {
    padding: var(--pm-space-3) var(--pm-space-3) 112px;
}

#page_layout {
    max-width: none;
    margin: 0;
    padding: 0 !important;
}

.card {
    position: relative;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-card);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
}

html.dark .card {
    background: rgba(26, 26, 26, 0.9);
}

.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--pm-primary), rgba(17, 17, 17, 0.35));
    opacity: 0.9;
}

.card-body,
.card-header,
.card>header {
    position: relative;
}

.card-header,
.card>header {
    border-bottom: 1px solid var(--pm-border);
    background: linear-gradient(180deg, rgba(115, 139, 59, 0.03), transparent);
}

.card-title,
.card-title2 {
    font-size: 1.05rem;
    font-weight: 700;
}

.table-th {
    padding: 16px 18px;
    border-bottom: 1px solid var(--pm-border);
    background: #F8FAF2;
    color: var(--pm-text-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

html.dark .table-th {
    background: #1F231C;
}

.table-td {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    color: var(--pm-text);
    font-weight: 600;
    background: transparent;
}

.table tbody tr:hover td,
.table tbody tr:hover th,
tbody tr:hover .table-td {
    background: rgba(115, 139, 59, 0.06);
}

.btn,
.btn-dark,
.btn-success,
.btn-danger,
.btn-light,
.btn-secondary,
.btn-primary,
.btn-outline-danger,
.btn-outline-success {
    min-height: 52px;
    padding: 0 20px;
    border-radius: var(--pm-radius-control);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform var(--pm-transition), box-shadow var(--pm-transition), border-color var(--pm-transition), background-color var(--pm-transition), color var(--pm-transition);
}

.btn-sm {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.86rem;
}

.btn:active,
.btn-dark:active,
.btn-success:active,
.btn-danger:active,
.btn-light:active,
.btn-primary:active,
.btn-secondary:active,
.btn-outline-danger:active,
.btn-outline-success:active {
    transform: scale(0.97);
}

.btn-dark,
.btn-primary,
.dark .btn-dark {
    background: var(--pm-primary);
    border: 1px solid var(--pm-primary);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(115, 139, 59, 0.22);
}

.btn-dark:hover,
.btn-primary:hover,
.dark .btn-dark:hover {
    background: var(--pm-primary-strong);
    border-color: var(--pm-primary-strong);
    color: #FFFFFF;
}

.btn-success {
    background: var(--pm-success);
    border: 1px solid var(--pm-success);
    color: #FFFFFF;
}

.btn-success:hover {
    background: #138A3E;
    border-color: #138A3E;
    color: #FFFFFF;
}

.btn-danger {
    background: var(--pm-danger);
    border: 1px solid var(--pm-danger);
    color: #FFFFFF;
}

.btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #FFFFFF;
}

.btn-light,
.btn-secondary {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    color: var(--pm-text);
}

.btn-light:hover,
.btn-secondary:hover {
    background: #F8F9F4;
    border-color: var(--pm-border-strong);
}

.btn-outline-danger {
    background: #FFFFFF;
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: var(--pm-danger);
}

.btn-outline-danger:hover {
    background: rgba(220, 38, 38, 0.06);
    color: var(--pm-danger);
}

.btn-outline-success {
    background: #FFFFFF;
    border: 1px solid rgba(22, 163, 74, 0.22);
    color: var(--pm-success);
}

.btn-outline-success:hover {
    background: rgba(22, 163, 74, 0.06);
    color: var(--pm-success);
}

.form-control,
select.form-control,
.form-select {
    min-height: 52px;
    border-radius: var(--pm-radius-control);
    border: 1px solid var(--pm-border);
    background: #FFFFFF;
    color: var(--pm-text);
    padding: 0 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: border-color var(--pm-transition), box-shadow var(--pm-transition), background-color var(--pm-transition);
}

textarea.form-control {
    min-height: 112px;
    padding-top: 12px;
    padding-bottom: 12px;
}

html.dark .form-control,
html.dark .form-select,
html.dark select.form-control {
    background: #1F1F1F;
    color: var(--pm-text);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--pm-text-soft);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus {
    border-color: rgba(115, 139, 59, 0.48);
    box-shadow: 0 0 0 4px rgba(115, 139, 59, 0.16);
}

.form-control[disabled],
.form-control[readonly] {
    background: #F3F4F6;
    color: #6B7280;
}

.form-label,
.fromGroup label,
label.form-label {
    margin-bottom: 8px;
    color: var(--pm-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.text-primary-500 {
    color: var(--pm-primary) !important;
}

.text-success-500 {
    color: var(--pm-success) !important;
}

.text-danger-500,
.text-status,
.text-status2,
.text-status4,
.text-status5,
.text-status6 {
    color: var(--pm-danger) !important;
}

.text-warning-500 {
    color: var(--pm-warning) !important;
}

.pm-page-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pm-space-3);
    margin-bottom: var(--pm-space-3);
    padding: var(--pm-space-4);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-shell);
    background:
        radial-gradient(circle at top right, rgba(250, 203, 52, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    box-shadow: var(--pm-shadow-sm);
}

html.dark .pm-page-banner {
    background:
        radial-gradient(circle at top right, rgba(250, 203, 52, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(26, 26, 26, 0.92));
}

.pm-page-copy {
    max-width: 760px;
}

.pm-page-title {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.08;
}

.pm-banner-side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.pm-banner-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: #FFFFFF;
    color: var(--pm-text);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: var(--pm-shadow-sm);
}

.pm-banner-chip--success::before {
    background: var(--pm-success);
    box-shadow: 0 0 0 4px var(--pm-success-soft);
}

.pm-banner-chip--danger::before {
    background: var(--pm-danger);
    box-shadow: 0 0 0 4px var(--pm-danger-soft);
}

.pm-banner-chip--warning::before {
    background: var(--pm-yellow);
    box-shadow: 0 0 0 4px var(--pm-yellow-soft);
}

.pm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pm-space-2);
    margin-bottom: var(--pm-space-3);
}

.pm-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pm-toolbar-value {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}

.pm-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pm-panel-soft {
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-card);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--pm-shadow-sm);
}

.site-footer {
    margin: 0 var(--pm-space-3);
    padding: var(--pm-space-2) var(--pm-space-3);
    border: 1px solid var(--pm-border);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.04);
}

#footer {
    background: transparent;
}

.loginwrapper {
    min-height: 100vh;
    padding: var(--pm-space-3);
    background:
        radial-gradient(circle at top left, rgba(115, 139, 59, 0.1), transparent 24%),
        radial-gradient(circle at 88% 6%, rgba(250, 203, 52, 0.2), transparent 16%),
        linear-gradient(135deg, #F4F6ED 0%, var(--pm-white) 100%);
}

.loginwrapper .lg-inner-column {
    min-height: calc(100vh - 48px);
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--pm-shadow-lg);
    backdrop-filter: blur(14px);
}

.loginwrapper .left-column {
    position: relative;
    padding: var(--pm-space-4);
    background:
        linear-gradient(180deg, rgba(17, 17, 17, 0.72), rgba(17, 17, 17, 0.6)),
        radial-gradient(circle at top right, rgba(250, 203, 52, 0.12), transparent 34%);
    color: #FFFFFF;
}

.loginwrapper .left-column::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(115, 139, 59, 0.12), transparent 26%);
    pointer-events: none;
}

.loginwrapper .right-column {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.96));
}

.loginwrapper .auth-box {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px);
}

.pm-login-showcase {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pm-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin-top: var(--pm-space-3);
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-login-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pm-yellow);
}

.pm-login-copy h1 {
    margin: var(--pm-space-3) 0 var(--pm-space-2);
    color: #FFFFFF;
    font-size: clamp(2.35rem, 3.2vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
}

.pm-login-copy p {
    max-width: 520px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
}

.pm-login-list {
    display: grid;
    gap: 16px;
    margin-top: var(--pm-space-4);
}

.pm-login-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pm-login-list-item::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--pm-primary);
    box-shadow: 0 0 0 6px rgba(115, 139, 59, 0.16);
}

.pm-login-list-title {
    display: block;
    color: #FFFFFF;
    font-weight: 700;
}

.pm-login-list-copy {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
}

.pm-login-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: var(--pm-space-4);
}

.pm-login-metric {
    padding: 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pm-login-metric strong {
    display: block;
    color: #FFFFFF;
    font-family: "Geologica", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
}

.pm-login-metric span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
}

.pm-login-panel {
    padding: var(--pm-space-4);
    border-radius: 24px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--pm-shadow-md);
}

.pm-login-panel .text-slate-500,
.pm-login-panel .text-base {
    color: var(--pm-text-muted) !important;
}

.pm-login-panel .text-slate-500[style*="red"] {
    color: var(--pm-danger) !important;
    font-weight: 600;
}

.auth-footer {
    padding: var(--pm-space-2) var(--pm-space-4) var(--pm-space-3);
    border-top: 1px solid var(--pm-border);
    color: var(--pm-text-soft);
    font-weight: 600;
}

#bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
    opacity: 0.32;
}

@media (max-width: 1279.98px) {
    .loginwrapper .lg-inner-column {
        min-height: auto;
    }

    .pm-login-copy h1 {
        font-size: 2.6rem;
    }
}

@media (max-width: 991.98px) {

    .pm-page-banner,
    .pm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-banner-side,
    .pm-toolbar-actions {
        justify-content: flex-start;
    }

    .pm-login-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .loginwrapper {
        padding: 16px;
    }

    .loginwrapper .lg-inner-column {
        border-radius: 24px;
    }

    .loginwrapper .left-column,
    .loginwrapper .auth-box,
    .pm-page-banner {
        padding: 24px;
    }

    #app_header .app-header,
    .content-wrapper,
    .site-footer {
        margin-left: 12px;
        margin-right: 12px;
    }

    .content-wrapper {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 104px;
    }

    .pm-page-title {
        font-size: 2rem;
    }
}

html {
    scroll-behavior: smooth;
}

.navItem {
    position: relative;
    gap: 12px;
    min-height: 56px;
    padding: 0 18px !important;
}

.navItem:hover {
    transform: translateX(3px);
    background: rgba(250, 203, 52, 0.12);
    border-color: rgba(250, 203, 52, 0.18);
}

.navItem.active {
    background: linear-gradient(135deg, rgba(250, 203, 52, 0.18), rgba(115, 139, 59, 0.18));
    border-color: rgba(115, 139, 59, 0.22);
    box-shadow: inset 3px 0 0 var(--pm-yellow), 0 14px 28px rgba(17, 17, 17, 0.06);
}

.sidebar-submenu .nav-link,
.sidebar-submenu li a {
    border: 1px solid transparent;
}

.sidebar-submenu .nav-link:hover,
.sidebar-submenu li a:hover,
.sidebar-submenu li.active a {
    border-color: rgba(250, 203, 52, 0.16);
    background: rgba(250, 203, 52, 0.12);
}

.pm-dashboard-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pm-reveal {
    /* Snappier, smoother page reveal (was 420ms ease) */
    animation: pm-fade-up 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pm-dashboard-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 20px 32px;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
}

.pm-dashboard-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -88px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(250, 203, 52, 0.24), transparent 68%);
    pointer-events: none;
}

.pm-dashboard-hero .pm-page-copy,
.pm-dashboard-hero .pm-banner-side {
    position: relative;
    z-index: 1;
}

.pm-monitor-card {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--pm-shadow-sm);
    transition: border-color var(--pm-transition), transform var(--pm-transition), box-shadow var(--pm-transition), background-color var(--pm-transition);
}

.pm-monitor-card:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 139, 59, 0.22);
    box-shadow: var(--pm-shadow-md);
}

.pm-monitor-card strong,
.pm-summary-card strong,
.pm-section-title,
.pm-card-title,
.pm-table-floor strong,
.pm-table-number,
.pm-stat-item strong,
.pm-donut-center strong {
    font-family: "Geologica", sans-serif;
    color: var(--pm-text);
    letter-spacing: -0.03em;
}

.pm-monitor-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
}

.pm-monitor-card span:not(.pm-monitor-card__dot) {
    display: block;
    color: var(--pm-text-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.pm-monitor-card__dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--pm-success);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.38);
    animation: pm-pulse 2.2s infinite;
}

.pm-monitor-card.is-offline {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(255, 255, 255, 0.94);
}

.pm-monitor-card.is-offline .pm-monitor-card__dot {
    background: var(--pm-danger);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.26);
    animation: none;
}

.pm-banner-chip--pulse {
    animation: pm-chip-pulse 2.4s ease-in-out infinite;
}

/* ── Live KPI Summary Strip ── */
.pm-live-summary {
    display: grid;
    /* Fluid auto-fit: 6-up on wide screens, gracefully wraps to 5/4/3/2 as the
       viewport (or browser zoom 80–120%) shrinks — no cramped fixed 6-col grid. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.pm-live-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 16px;
    border-radius: 18px;
    border: 1px solid var(--pm-border);
    background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(247,247,250,0.96) 100%);
    box-shadow: 0 2px 6px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.06);
    overflow: hidden;
    transition: transform 160ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 160ms ease;
}

/* Colored top accent bar */
.pm-live-kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: var(--pm-primary);
    opacity: 0.55;
}

.pm-live-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(17,17,17,0.04), 0 16px 36px rgba(17,17,17,0.10);
}

/* Colored accent bars + borders per type */
.pm-live-kpi--taken::before { background: linear-gradient(90deg,#FACB34,#E0A92E); opacity: 0.85; }
.pm-live-kpi--free::before  { background: linear-gradient(90deg,#738B3B,#a3b45a); opacity: 0.85; }
.pm-live-kpi--pct::before   { background: linear-gradient(90deg,#73893b,#a3b45a); opacity: 0.85; }
.pm-live-kpi--warn::before  { background: linear-gradient(90deg,#d97706,#fbbf24); opacity: 0.85; }
.pm-live-kpi--danger::before{ background: linear-gradient(90deg,#dc2626,#f97316); opacity: 1; }

.pm-live-kpi--taken { border-color: rgba(250,203,52,0.30); background: linear-gradient(145deg,rgba(255,254,250,1) 0%,rgba(254,252,244,0.96) 100%); }
.pm-live-kpi--free  { border-color: rgba(115,139,59,0.22); background: linear-gradient(145deg,rgba(252,255,250,1) 0%,rgba(248,252,242,0.96) 100%); }
.pm-live-kpi--pct   { border-color: rgba(115,139,59,0.22); }
.pm-live-kpi--warn  { border-color: rgba(245,158,11,0.28); background: linear-gradient(145deg,rgba(255,254,250,1) 0%,rgba(254,252,246,0.96) 100%); }
.pm-live-kpi--danger{ border-color: rgba(220,38,38,0.36); background: linear-gradient(145deg,rgba(255,250,250,1) 0%,rgba(254,244,244,0.96) 100%); }

.pm-live-kpi__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary);
    flex-shrink: 0;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(115,139,59,0.15);
}

.pm-live-kpi--taken .pm-live-kpi__icon { background: rgba(250,203,52,0.16); color: #9A7A12; box-shadow: 0 2px 8px rgba(250,203,52,0.18); }
.pm-live-kpi--free  .pm-live-kpi__icon { background: rgba(115,139,59,0.12);  color: #738B3B; box-shadow: 0 2px 8px rgba(115,139,59,0.15); }
.pm-live-kpi--warn  .pm-live-kpi__icon { background: rgba(245,158,11,0.10); color: #d97706; box-shadow: 0 2px 8px rgba(245,158,11,0.15); }
.pm-live-kpi--danger .pm-live-kpi__icon{ background: rgba(220,38,38,0.12); color: #dc2626; box-shadow: 0 2px 8px rgba(220,38,38,0.20); }

.pm-live-kpi__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pm-live-kpi__body strong {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--pm-text);
    letter-spacing: -0.02em;
}

.pm-live-kpi--taken .pm-live-kpi__body strong { color: #9A7A12; }
.pm-live-kpi--free  .pm-live-kpi__body strong { color: #5c6e2f; }
.pm-live-kpi--warn  .pm-live-kpi__body strong { color: #9A7A12; }
.pm-live-kpi--danger .pm-live-kpi__body strong{ color: #9A7A12; }

.pm-live-kpi__body span {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
    white-space: nowrap;
}

/* Smaller min track on phones so cards stay 2-up and readable rather than
   collapsing to a single tall column. auto-fit handles everything above this. */
@media (max-width: 767.98px) {
    .pm-live-summary { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 380px) {
    .pm-live-summary { grid-template-columns: 1fr; }
}

/* ── Nitro overrides for live summary ── */
html.theme-nitro .pm-live-kpi {
    background: linear-gradient(145deg, rgba(8,16,28,0.90) 0%, rgba(6,12,22,0.95) 100%);
    border-color: rgba(0,229,255,0.14);
    box-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(0,229,255,0);
}
html.theme-nitro .pm-live-kpi::before {
    background: linear-gradient(90deg, rgba(0,229,255,0.60), rgba(0,229,255,0.20));
    opacity: 1;
}
html.theme-nitro .pm-live-kpi:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.35), 0 16px 36px rgba(0,0,0,0.30), 0 0 24px rgba(0,229,255,0.08);
}
html.theme-nitro .pm-live-kpi--taken {
    background: linear-gradient(145deg, rgba(28,24,4,0.92) 0%, rgba(20,18,4,0.96) 100%);
    border-color: rgba(255,214,0,0.24);
}
html.theme-nitro .pm-live-kpi--taken::before { background: linear-gradient(90deg,#FFD600,#ffe14d); opacity: 0.90; }
html.theme-nitro .pm-live-kpi--free {
    background: linear-gradient(145deg, rgba(6,22,10,0.92) 0%, rgba(4,16,8,0.96) 100%);
    border-color: rgba(0,255,135,0.22);
}
html.theme-nitro .pm-live-kpi--free::before { background: linear-gradient(90deg,#00FF87,#4ade80); opacity: 0.90; }
html.theme-nitro .pm-live-kpi--taken .pm-live-kpi__body strong { color: #FFD600; }
html.theme-nitro .pm-live-kpi--free  .pm-live-kpi__body strong { color: #00FF87; }
html.theme-nitro .pm-live-kpi--warn  .pm-live-kpi__body strong { color: #fcd34d; }
html.theme-nitro .pm-live-kpi--danger .pm-live-kpi__body strong { color: #FFD600; }
html.theme-nitro .pm-live-kpi__icon {
    background: rgba(0,229,255,0.10);
    color: var(--pn-cyan, #00E5FF);
    box-shadow: 0 2px 8px rgba(0,229,255,0.18);
}
html.theme-nitro .pm-live-kpi--taken .pm-live-kpi__icon { background: rgba(255,214,0,0.14); color: #FFD600; box-shadow: 0 2px 8px rgba(255,214,0,0.20); }
html.theme-nitro .pm-live-kpi--free  .pm-live-kpi__icon { background: rgba(0,255,135,0.14);  color: #00FF87; box-shadow: 0 2px 8px rgba(0,255,135,0.20); }
html.theme-nitro .pm-live-kpi__body strong { color: var(--pn-text, #E8F4F8); }
html.theme-nitro .pm-live-kpi__body span   { color: var(--pn-text-muted, #6A93B8); }

.pm-dashboard-summary {
    display: grid;
    /* Fluid: 4-up on wide screens, wraps to 3/2/1 smoothly across 80–120% zoom. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pm-summary-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 164px;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--pm-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 245, 247, 0.94) 100%);
    box-shadow: 0 14px 32px rgba(17, 17, 17, 0.06);
    transition: transform var(--pm-transition), border-color var(--pm-transition), box-shadow var(--pm-transition);
}

.pm-summary-card:hover {
    transform: translateY(-3px);
    border-color: rgba(115, 139, 59, 0.22);
    box-shadow: 0 18px 40px rgba(17, 17, 17, 0.09);
}

.pm-summary-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -52px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(250, 203, 52, 0.18), transparent 70%);
    pointer-events: none;
}

.pm-summary-label,
.pm-card-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pm-primary);
}

.pm-summary-card strong {
    position: relative;
    z-index: 1;
    font-size: clamp(1.9rem, 2.6vw, 2.8rem);
    line-height: 1.05;
}

.pm-summary-card strong.pm-summary-value--text {
    font-size: clamp(1.3rem, 1.7vw, 1.65rem);
    line-height: 1.2;
}

.pm-summary-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--pm-text-muted);
    line-height: 1.65;
}

.pm-summary-card--accent {
    border-color: rgba(250, 203, 52, 0.24);
    background: linear-gradient(135deg, rgba(250, 203, 52, 0.16), rgba(255, 255, 255, 0.96));
}

.pm-summary-card--success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(255, 255, 255, 0.96));
}

.pm-summary-card--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.96));
}

.pm-summary-card--neutral {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.04), rgba(255, 255, 255, 0.96));
}

.pm-dashboard-toolbar {
    padding: 0 4px;
}

.pm-dashboard-toolbar .pm-toolbar-copy {
    gap: 8px;
}

.pm-dashboard-toolbar .pm-toolbar-value {
    font-size: 1rem;
}

#live,
#offline,
#live-status-refresh {
    min-width: 132px;
    justify-content: center;
    box-shadow: none;
}

#live {
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.18);
    color: #166534;
}

#live:hover {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.24);
    color: #166534;
}

#offline {
    background: rgba(220, 38, 38, 0.09);
    border: 1px solid rgba(220, 38, 38, 0.18);
    color: #991B1B;
}

#offline:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.22);
    color: #991B1B;
}

#live-status-refresh {
    background: rgba(17, 17, 17, 0.04);
    border: 1px solid rgba(17, 17, 17, 0.08);
    color: var(--pm-text-muted);
}

#live-status-refresh:hover {
    background: rgba(17, 17, 17, 0.06);
    border-color: rgba(17, 17, 17, 0.12);
    color: var(--pm-text);
}

.pm-section-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.pm-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.pm-section-title {
    margin: 6px 0 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.08;
}

.pm-section-copy {
    max-width: 70ch;
    margin: 10px 0 0;
    color: var(--pm-text-muted);
    line-height: 1.65;
}

.pm-dashboard-grid {
    display: grid;
    /* SS2/SS3: each floor container spans the FULL page width and stacks
       vertically (like Detailed View). Widgets then flow horizontally inside. */
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ── Viz section wrapper (donut + gauge, single data-section) ── */
.pm-card-viz-section {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ── Single-card two-column inner layout ── */
.pm-dashboard-grid--single .pm-metric-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 28px;
    row-gap: 16px;
    align-items: start;
}

/* Old single-card 2-column layout — scoped to DIRECT children of the metric-card so
   it does not leak onto the viz card inside the engine's micro-grid wrapper. */
.pm-dashboard-grid--single > .pm-metric-card > .pm-card-head        { grid-column: 1 / -1; }
.pm-dashboard-grid--single > .pm-metric-card > .pm-card-viz-section { grid-column: 1; grid-row: 2; }
.pm-dashboard-grid--single > .pm-metric-card > .pm-card-right-col   { grid-column: 2; grid-row: 2; }
.pm-dashboard-grid--single > .pm-metric-card > .pm-card-footer      { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
    .pm-dashboard-grid--single .pm-metric-card {
        display: flex;
        flex-direction: column;
    }
}

.pm-metric-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 22px;
    border-radius: 20px;
    border: 1px solid var(--pm-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 245, 247, 0.94) 100%);
    box-shadow: 0 14px 34px rgba(17, 17, 17, 0.06);
    transition: transform var(--pm-transition), box-shadow var(--pm-transition), border-color var(--pm-transition);
}

.pm-metric-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(250, 203, 52, 0.18), transparent 26%);
    pointer-events: none;
}

.pm-metric-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(115, 139, 59, 0.22);
    box-shadow: 0 20px 44px rgba(17, 17, 17, 0.1);
}

.pm-metric-card[data-tone="warning"] {
    border-color: rgba(245, 158, 11, 0.24);
}

.pm-metric-card[data-tone="danger"] {
    border-color: rgba(220, 38, 38, 0.2);
}

.pm-card-head,
.pm-card-meter-head,
.pm-card-footer,
.pm-table-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pm-card-head,
.pm-card-chart,
.pm-card-meter,
.pm-card-stats,
.pm-card-chips,
.pm-card-footer {
    position: relative;
    z-index: 1;
}

/* ── Wide card spans full grid row + uses 2-column inner layout ── */
.pm-metric-card--wide {
    grid-column: 1 / -1;
}
.pm-metric-card--wide.pm-metric-card {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    grid-template-rows: auto;
    column-gap: 32px;
    row-gap: 16px;
    align-items: start;
}
.pm-metric-card--wide .pm-card-head        { grid-column: 1 / -1; }
.pm-metric-card--wide .pm-card-viz-section { grid-column: 1; grid-row: 2; }
.pm-metric-card--wide .pm-card-right-col   { grid-column: 2; grid-row: 2; }
.pm-metric-card--wide .pm-card-footer      { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
    .pm-metric-card--wide.pm-metric-card {
        display: flex;
        flex-direction: column;
    }
}

/* ── Corner control: drag grip + size toggle — floats in top-right of card ── */
.pm-corner-ctrl {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 20;
    /* Always partially visible; fully visible on card hover */
    opacity: 0.45;
    transition: opacity 0.18s;
}
.pm-metric-card:hover .pm-corner-ctrl,
.pm-corner-ctrl:hover {
    opacity: 1;
}

/* Drag grip badge */
.pm-corner-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 32px;
    padding: 6px 0 4px;
    border-radius: 8px;
    background: var(--pm-primary, #738B3B);
    color: #fff;
    cursor: grab;
    user-select: none;
    box-shadow: 0 2px 8px rgba(115, 139, 59, 0.35);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pm-corner-grip:hover {
    background: #5a6e2e;
    box-shadow: 0 4px 14px rgba(115, 139, 59, 0.5);
    transform: translateY(-1px);
}
.pm-corner-grip:active {
    cursor: grabbing;
    transform: scale(0.95);
}
.pm-corner-grip svg { opacity: 0.92; }

.pm-corner-grip__tip {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.85;
}

/* Prevent text selection across the entire card */
.pm-metric-card {
    user-select: none;
}

/* Dragging state — lift the card */
.pm-card--dragging {
    opacity: 0.82;
    transform: rotate(1.5deg) scale(1.02) !important;
    box-shadow: 0 28px 60px rgba(17,17,17,0.18) !important;
    z-index: 999 !important;
    cursor: grabbing !important;
}

/* Dragula: flying mirror (the dragged clone) */
.gu-mirror {
    opacity: 0.9 !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 72px rgba(17,17,17,0.22) !important;
    transform: rotate(1.5deg) scale(1.03) !important;
    cursor: grabbing !important;
    pointer-events: none;
}

/* Dragula: placeholder where card will drop */
.gu-transit {
    opacity: 0.25 !important;
    border: 2px dashed var(--pm-primary, #738B3B) !important;
    background: rgba(115, 139, 59, 0.06) !important;
    box-shadow: none !important;
}

/* Size toggle button (expand / collapse) */
.pm-size-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border: 1px solid rgba(115, 139, 59, 0.22);
    border-radius: 6px;
    background: transparent;
    color: var(--pm-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.pm-size-toggle:hover {
    background: rgba(115, 139, 59, 0.12);
    border-color: rgba(115, 139, 59, 0.36);
    color: var(--pm-text);
}
/* Show expand icon when normal, collapse icon when wide */
.pm-size-toggle .pm-size-toggle__icon--collapse { display: none; }
.pm-size-toggle[aria-pressed="true"] .pm-size-toggle__icon--expand  { display: none; }
.pm-size-toggle[aria-pressed="true"] .pm-size-toggle__icon--collapse { display: block; }

/* Card header is the drag handle — show grab cursor */
.pm-card-head {
    cursor: grab;
    user-select: none;
}
.pm-card-head:active {
    cursor: grabbing;
}

.pm-card-title {
    margin: 8px 0 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.pm-card-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-card-state::before,
.pm-inline-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.pm-card-state--success,
.pm-inline-chip--success {
    color: #166534;
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.18);
}

.pm-card-state--warning,
.pm-inline-chip--warning {
    color: #9A6700;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.18);
}

.pm-card-state--danger,
.pm-inline-chip--danger {
    color: #991B1B;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.18);
}

.pm-card-state--neutral,
.pm-inline-chip--neutral {
    color: var(--pm-text-muted);
    background: rgba(17, 17, 17, 0.05);
    border-color: rgba(17, 17, 17, 0.08);
}

.pm-inline-chip--muted {
    color: #374151;
    background: rgba(209, 213, 219, 0.32);
    border-color: rgba(209, 213, 219, 0.56);
}

.pm-card-chart {
    display: grid;
    place-items: center;
    min-height: 236px;
}

.pm-donut-shell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 220px;
}

.pm-donut-chart {
    width: 100%;
}

.pm-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.pm-donut-center span {
    color: var(--pm-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pm-donut-center strong {
    font-size: 2rem;
    line-height: 1;
}

.pm-card-meter {
    display: grid;
    gap: 12px;
}

.pm-card-meter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pm-card-meter-head span,
.pm-card-note,
.pm-muted-cell {
    color: var(--pm-text-muted);
}

.pm-card-meter-head span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-card-meter-head strong {
    color: var(--pm-text);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ── Enhanced meter bar ── */
.pm-card-meter-track {
    position: relative;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(115, 139, 59, 0.10);
    border: 1px solid rgba(115, 139, 59, 0.14);
}

.pm-card-meter-track span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pm-primary), var(--pm-yellow));
    transition: width 320ms ease;
    min-width: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}

/* Stacked composition meter (cross-parking): Cars + Two-Wheelers segments, with the
   track background showing through as the Free remainder — tinted soft GREEN so the
   uncovered portion reads as "free/available" (the type segments sit on top). */
.pm-card-meter-track.pm-meter-stacked { display: flex; align-items: stretch; background: rgba(34, 197, 94, 0.16); }
html.theme-nitro .pm-card-meter-track.pm-meter-stacked { background: rgba(0, 255, 135, 0.14); }
.pm-card-meter-track.pm-meter-stacked .pm-meter-seg {
    display: block;
    height: 100%;
    padding: 0;
    min-width: 0;
    border-radius: 0;
    justify-content: initial;
    transition: width 380ms cubic-bezier(.2, .8, .2, 1);
}
.pm-card-meter-track.pm-meter-stacked .pm-meter-seg--car  { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.pm-card-meter-track.pm-meter-stacked .pm-meter-seg--bike { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pm-card-meter-slot--bike .pm-card-meter-slot__val { color: #f59e0b; }

/* Per-detection-type legend (EECS stacked meter): small colour key + wrap-safe row
   so 2/3/N type boxes never overflow the card. */
.pm-seg-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
    flex: 0 0 auto;
}
.pm-card-meter-slots--multi { flex-wrap: wrap; row-gap: 4px; }

/* Per-detection-type capacity rings (EECS Capacity card): a compact ring + name +
   level badge per type, so a full vehicle class is never hidden by the blended %. */
.pm-eecs-cap-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pm-eecs-cap-rings { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-eecs-cap-ring {
    flex: 1 1 90px;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(120, 130, 140, 0.05);
}
.pm-eecs-cap-ring__name { font-size: 0.74rem; font-weight: 800; color: var(--pm-text); }

/* Slot labels below bar */
.pm-card-meter-slots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}

.pm-card-meter-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.pm-card-meter-slot__val {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pm-card-meter-slot__key {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
}

.pm-card-meter-slot--taken .pm-card-meter-slot__val { color: #9A7A12; }
.pm-card-meter-slot--free  .pm-card-meter-slot__val { color: #16a34a; }
.pm-card-meter-slot--total .pm-card-meter-slot__val { color: var(--pm-text); }

.pm-card-stats .pm-insight-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Rows STRETCH to fill the card so the 2×2 grid always uses the full height
       — the bottom tiles can never be clipped when the widget is made shorter. */
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.pm-stat-item {
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(115, 139, 59, 0.08);
    background: var(--pm-surface-muted);
    /* Each tile is its own size-container so its text scales with the tile,
       and content is centred + clipped-safe so it grows/shrinks with the card. */
    container-type: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.pm-stat-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--pm-text-muted);
    font-size: clamp(0.52rem, 13cqh, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-stat-item strong {
    font-size: clamp(0.95rem, 32cqh, 1.7rem); /* scales with the tile's height */
    line-height: 1;
    letter-spacing: -0.02em;
}

.pm-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Insight section (actionable cards) ── */
.pm-card-insight {
    padding: 14px 16px;
    border-top: 1px solid var(--pm-border);
}

.pm-insight-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pm-insight-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 8px 10px;
    border-radius: 10px;
    line-height: 1.2;
    flex-shrink: 0;
}

.pm-insight-badge__level {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pm-insight-badge__pct {
    font-size: 1.15rem;
    font-weight: 800;
}

.pm-insight-stat {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 60px;
    flex-shrink: 0;
    color: var(--pm-text);
}

.pm-insight-stat__val {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.pm-insight-stat__unit {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--pm-text-muted);
}

.pm-insight-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pm-insight-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pm-text);
}

.pm-insight-sub {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--pm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-insight-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: flex-start;
}

.pm-insight-split-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.pm-insight-split-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(239,68,68,0.18);
    overflow: hidden;
}

.pm-insight-split-in {
    height: 100%;
    background: #22c55e;
    border-radius: 3px 0 0 3px;
    transition: width 400ms ease;
}

.pm-insight-split-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ── Occupancy Trend sparkline section ── */
.pm-card-trend {
    /* uses pm-card-insight base padding */
}

.pm-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pm-trend-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.pm-trend-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 56px;
    overflow: visible;
}

.pm-trend-footer {
    margin-top: 5px;
}

.pm-trend-waiting {
    font-size: 0.68rem;
    color: var(--pm-text-muted);
    padding: 6px 0;
    text-align: center;
}

@keyframes pmTrendDots {
    0%   { opacity: 0.3; }
    50%  { opacity: 1;   }
    100% { opacity: 0.3; }
}
.pm-trend-dots {
    animation: pmTrendDots 1.4s ease-in-out infinite;
    display: inline-block;
}

/* ── Right column wrapper (houses all inner draggable sections) ── */
.pm-card-right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── Inner section — each draggable + resizable block in the right column ── */
.pm-inner-section {
    position: relative;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 60px;
}
.pm-inner-section:hover {
    border-color: rgba(115, 139, 59, 0.15);
    background: rgba(115, 139, 59, 0.03);
}

/* ── Horizontal drag handle strip (top of each inner section) ── */
.pm-section-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 16px;
    margin-bottom: 6px;
    cursor: grab;
    color: rgba(115, 139, 59, 0.35);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    user-select: none;
    border-radius: 4px;
}
.pm-inner-section:hover .pm-section-drag-handle {
    opacity: 1;
    color: rgba(115, 139, 59, 0.65);
}
.pm-section-drag-handle:hover {
    color: var(--pm-primary, #738B3B);
    background: rgba(115, 139, 59, 0.08);
}
.pm-section-drag-handle:active { cursor: grabbing; }

/* Inner section dragging state */
.pm-inner-section--dragging {
    opacity: 0.75;
    transform: scale(1.01) rotate(0.5deg);
    box-shadow: 0 12px 32px rgba(17,17,17,0.12);
    z-index: 50;
    border-color: var(--pm-primary, #738B3B) !important;
    background: rgba(255,255,255,0.92) !important;
}
/* Dragula inner mirror */
.gu-mirror.pm-inner-section {
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(17,17,17,0.18) !important;
    transform: rotate(0.8deg) scale(1.02) !important;
    pointer-events: none;
    opacity: 0.88 !important;
    background: rgba(255,255,255,0.95) !important;
}
/* Dragula inner placeholder */
.gu-transit.pm-inner-section {
    opacity: 0.2 !important;
    border: 2px dashed var(--pm-primary, #738B3B) !important;
    box-shadow: none !important;
    background: rgba(115, 139, 59, 0.05) !important;
}

/* ── Slot Map visualization ── */
.pm-card-slot-grid {
    padding: 12px 0 8px;
}

.pm-slot-grid-hdr {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.pm-slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding-bottom: 8px;
}

.pm-slot-sq {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pm-slot-sq--occ {
    background: var(--pm-occupied);
    opacity: 0.82;
}

.pm-slot-sq--free {
    background: #22c55e;
    opacity: 0.72;
}

/* Cross-parking slot map: car (blue) vs two-wheeler (amber) occupancy. */
.pm-slot-sq--car {
    background: #2563eb;
    opacity: 0.85;
}
.pm-slot-sq--bike {
    background: #f59e0b;
    opacity: 0.9;
}

.pm-slot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 2px;
}

.pm-slot-legend__item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--pm-text-muted);
}

.pm-slot-legend__note {
    flex: 1 1 100%;
    font-size: 0.65rem;
    font-style: italic;
    color: var(--pm-text-muted);
    opacity: 0.7;
}

.pm-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
}

.pm-card-note {
    margin: 0;
    max-width: 72%;
    font-size: 0.88rem;
    line-height: 1.6;
}

.pm-layout-link,
.pm-table-link {
    min-width: 116px;
    justify-content: center;
    box-shadow: none;
}

.pm-layout-link.disabled,
.pm-table-link.disabled,
.pm-layout-link[aria-disabled="true"],
.pm-table-link[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.6;
}

.pm-table-card {
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--pm-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 245, 247, 0.94) 100%);
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.06);
}

.pm-table-shell {
    margin-top: 18px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.9);
}

.pm-table-shell .table-th {
    background: rgba(115, 139, 59, 0.08);
}

.pm-table-shell tbody tr:nth-child(even) {
    background: rgba(17, 17, 17, 0.015);
}

.pm-table-shell tbody tr:hover {
    background: rgba(250, 203, 52, 0.12);
}

.pm-table-floor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pm-table-floor strong {
    font-size: 1rem;
    line-height: 1.2;
}

.pm-table-number {
    font-size: 1.4rem;
    line-height: 1;
}

.pm-table-shell .table-td,
.pm-table-shell .table-th {
    vertical-align: middle;
}

.pm-empty-state {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 24px;
    border: 1px dashed rgba(115, 139, 59, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--pm-text-muted);
    text-align: center;
    line-height: 1.7;
}

.pm-skeleton-card {
    pointer-events: none;
}

.pm-skeleton-line {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(115, 139, 59, 0.08), rgba(250, 203, 52, 0.18), rgba(115, 139, 59, 0.08));
    background-size: 200% 100%;
    animation: pm-shimmer 1.2s linear infinite;
}

.pm-skeleton-line--short {
    max-width: 120px;
}

.pm-skeleton-line--medium {
    max-width: 72%;
    height: 22px;
}

.pm-summary-card.pm-skeleton-card,
.pm-metric-card.pm-skeleton-card {
    gap: 14px;
}

.pm-metric-card.pm-skeleton-card {
    min-height: 420px;
}

.pm-metric-card.pm-skeleton-card .pm-skeleton-line--medium {
    max-width: 48%;
}

.pm-donut-chart .apexcharts-canvas,
.pm-donut-chart .apexcharts-svg {
    margin: 0 auto;
}

.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark {
    border: 1px solid var(--pm-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--pm-shadow-md) !important;
}

.apexcharts-theme-light .apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--pm-text) !important;
}

.apexcharts-theme-dark .apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-dark {
    background: rgba(26, 26, 26, 0.94) !important;
    color: var(--pm-white) !important;
}

.apexcharts-tooltip-title {
    border-bottom: 1px solid var(--pm-border) !important;
    background: rgba(115, 139, 59, 0.08) !important;
    color: inherit !important;
    font-family: "Inter", sans-serif !important;
}

@keyframes pm-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pm-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.38);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

@keyframes pm-chip-pulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: var(--pm-shadow-sm);
    }

    50% {
        transform: translateY(-2px);
        box-shadow: var(--pm-shadow-md);
    }
}

/* ── Rolling number: stat elements clip during animation ── */
[data-role="occupancy-value"],
[data-role="meter-occupied"],
[data-role="meter-available"],
[data-role="legend-available"],
[data-role="legend-occupied"],
.pm-insight-stat__val,
.pm-donut-callout__val {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes pm-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 1279.98px) {
    /* .pm-dashboard-summary now wraps fluidly via auto-fit — no fixed override. */
    .pm-dashboard-grid {
        grid-template-columns: 1fr; /* full-width stacked floors at all sizes */
    }
}

@media (max-width: 991.98px) {

    .pm-dashboard-hero,
    .pm-dashboard-toolbar,
    .pm-card-head,
    .pm-card-footer,
    .pm-table-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-card-note {
        max-width: none;
    }

    .pm-monitor-card {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .pm-dashboard-view {
        gap: 18px;
    }

    .pm-dashboard-summary,
    .pm-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .pm-dashboard-hero,
    .pm-summary-card,
    .pm-metric-card,
    .pm-table-card {
        padding: 18px;
        border-radius: 18px;
    }

    .pm-card-head,
    .pm-card-meter-head,
    .pm-card-footer,
    .pm-table-card__header {
        gap: 12px;
    }

    .pm-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pm-donut-center strong {
        font-size: 1.72rem;
    }

    #live,
    #offline,
    #live-status-refresh {
        width: 100%;
    }
}

.app-wrapper {
    --pm-shell-sidebar-open: 248px;
    --pm-shell-sidebar-collapsed: 88px;
    --pm-shell-gutter: 24px;
    --pm-shell-content-x: 22px;
}

.pm-shell-stage {
    min-width: 0;
}

.sidebar-wrapper,
#app_header .app-header,
.content-wrapper,
.site-footer {
    transition: width 220ms ease, margin 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.sidebar-wrapper {
    width: var(--pm-shell-sidebar-open);
}

[dir="ltr"] .app-wrapper .pm-shell-offset-target {
    margin-left: calc(var(--pm-shell-sidebar-open) + var(--pm-shell-gutter)) !important;
    margin-right: var(--pm-shell-gutter) !important;
}

[dir="rtl"] .app-wrapper .pm-shell-offset-target {
    margin-right: calc(var(--pm-shell-sidebar-open) + var(--pm-shell-gutter)) !important;
    margin-left: var(--pm-shell-gutter) !important;
}

[dir="ltr"] .app-wrapper.collapsed .pm-shell-offset-target {
    margin-left: calc(var(--pm-shell-sidebar-collapsed) + var(--pm-shell-gutter)) !important;
}

[dir="rtl"] .app-wrapper.collapsed .pm-shell-offset-target {
    margin-right: calc(var(--pm-shell-sidebar-collapsed) + var(--pm-shell-gutter)) !important;
}

.app-wrapper.collapsed .sidebar-wrapper {
    width: var(--pm-shell-sidebar-collapsed) !important;
}

.app-wrapper.collapsed .sidebar-wrapper:hover {
    width: var(--pm-shell-sidebar-open) !important;
}

.sidebar-wrapper.menu-hide~.pm-shell-stage .pm-shell-offset-target {
    margin-left: var(--pm-shell-gutter) !important;
    margin-right: var(--pm-shell-gutter) !important;
}

[dir="rtl"] .sidebar-wrapper.menu-hide~.pm-shell-stage .pm-shell-offset-target {
    margin-right: var(--pm-shell-gutter) !important;
    margin-left: var(--pm-shell-gutter) !important;
}

#app_header {
    position: sticky;
    top: 0;
    z-index: 30;
}

#app_header .app-header {
    padding: 18px var(--pm-shell-content-x);
}

.pm-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.pm-shell-header__main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.pm-shell-branding {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pm-shell-toggle {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pm-text);
    box-shadow: var(--pm-shadow-sm);
    transition: transform var(--pm-transition), border-color var(--pm-transition), box-shadow var(--pm-transition), background-color var(--pm-transition);
}

.pm-shell-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--pm-border-strong);
    box-shadow: var(--pm-shadow-md);
}

.pm-shell-toggle:active {
    transform: scale(0.97);
}

.pm-mobile-logo {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--pm-shadow-sm);
}

.pm-mobile-logo img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
}

.pm-topbar-context {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.pm-topbar-title {
    font-size: 1.1rem;
}

.pm-shell-subtitle {
    max-width: 56ch;
    color: var(--pm-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.pm-shell-actions {
    gap: 10px !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: max-content;
}

.pm-icon-control {
    min-width: 42px;
    min-height: 42px;
}

.pm-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--pm-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--pm-shadow-sm);
    transition: transform var(--pm-transition), box-shadow var(--pm-transition), border-color var(--pm-transition), background-color var(--pm-transition);
}

.pm-user-trigger:hover {
    transform: translateY(-1px);
    border-color: var(--pm-border-strong);
    box-shadow: var(--pm-shadow-md);
}

.pm-user-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.pm-user-copy strong {
    max-width: 150px;
    overflow: hidden;
    color: var(--pm-text);
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-user-copy span {
    color: var(--pm-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pm-user-chevron {
    opacity: 0.72;
}

.pm-status-pill.pm-topbar-site {
    min-height: 48px;
}

.content-wrapper {
    /* padding: 18px var(--pm-shell-gutter) 104px; */
    padding: 0 0 104px !important;
}

#page_layout {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--pm-shell-content-x);
    padding-right: var(--pm-shell-content-x);
    box-sizing: border-box;
}

.site-footer {
    padding-top: 12px;
    padding-bottom: 12px;
}

.pm-dashboard-view {
    gap: 16px;
}

.pm-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 16px 22px;
    align-items: start;
    padding: 20px 26px;
}

.pm-dashboard-hero .pm-page-title {
    font-size: clamp(1.9rem, 2.4vw, 2.5rem);
}

.pm-dashboard-hero .pm-page-subtitle {
    max-width: 62ch;
}

.pm-dashboard-hero__copy,
.pm-dashboard-hero__rail,
.pm-dashboard-hero__meta {
    position: relative;
    z-index: 1;
}

.pm-dashboard-hero__rail {
    display: flex;
    justify-content: flex-end;
}

.pm-dashboard-hero__meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* padding-top: 14px; */
    /* border-top: 1px solid rgba(115, 139, 59, 0.1); */
}

.pm-hero-meta-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-monitor-card {
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 18px;
}

.pm-monitor-card strong {
    font-size: 0.92rem;
}

.pm-monitor-card span:not(.pm-monitor-card__dot) {
    font-size: 0.8rem;
}

.pm-banner-chip {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.76rem;
}

.pm-dashboard-summary {
    gap: 12px;
}

.pm-summary-card {
    min-height: 118px;
    padding: 16px 18px;
    gap: 8px;
    border-radius: 18px;
}

.pm-summary-card strong {
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.pm-summary-card strong.pm-summary-value--text {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.pm-summary-card p,
.pm-section-copy,
.pm-card-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.pm-summary-card p {
    font-size: 0.83rem;
    line-height: 1.5;
    -webkit-line-clamp: 2;
}

.pm-section-shell {
    gap: 12px;
}

.pm-section-heading--compact .pm-section-title {
    margin-top: 4px;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}

.pm-section-heading--compact .pm-section-copy {
    max-width: 58ch;
    margin-top: 8px;
    font-size: 0.88rem;
    -webkit-line-clamp: 2;
}

.pm-dashboard-grid {
    gap: 16px;
}

.pm-metric-card {
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
}

.pm-card-title {
    margin-top: 6px;
    font-size: 1.08rem;
}

.pm-card-state {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.7rem;
}

.pm-card-chart {
    min-height: 174px;
}

.pm-donut-shell {
    min-height: 164px;
}

.pm-donut-center strong {
    font-size: 1.62rem;
}

.pm-card-meter {
    gap: 8px;
}

.pm-card-meter-head span,
.pm-card-meter-head strong {
    font-size: 0.8rem;
}

.pm-card-stats {
    gap: 10px;
}

.pm-stat-item {
    padding: 12px;
    border-radius: 14px;
}

.pm-stat-item span {
    margin-bottom: 5px;
    font-size: 0.7rem;
}

.pm-stat-item strong {
    font-size: 1rem;
}

.pm-card-chips {
    gap: 8px;
}

.pm-inline-chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.72rem;
}

.pm-card-footer {
    align-items: flex-end;
}

.pm-card-note {
    max-width: 68%;
    font-size: 0.79rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
}

.pm-layout-link,
.pm-table-link {
    min-width: 92px;
    min-height: 36px;
    padding: 0 12px;
}

.pm-table-card {
    padding: 18px 20px;
    border-radius: 20px;
}

.pm-table-shell {
    margin-top: 14px;
    border-radius: 16px;
}

.pm-table-card__header .pm-section-title {
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}

.pm-table-card__header .pm-section-copy {
    margin-top: 6px;
    font-size: 0.84rem;
    -webkit-line-clamp: 2;
}

.pm-table-shell .table-th,
.pm-table-shell .table-td {
    padding: 12px 14px;
}

.pm-table-floor {
    gap: 6px;
}

.pm-table-floor strong {
    font-size: 0.92rem;
}

.pm-table-number {
    font-size: 1.18rem;
}

.pm-empty-state {
    min-height: 180px;
    padding: 18px;
    border-radius: 16px;
    font-size: 0.9rem;
}

@media (max-width: 1279.98px) {
    .app-wrapper {
        --pm-shell-gutter: 16px;
        --pm-shell-content-x: 18px;
    }

    .content-wrapper {
        padding: 0 0 104px !important;
    }

    .page-content,
    #page_layout,
    #content_layout {
        padding: 0 !important;
    }

    [dir="ltr"] .app-wrapper .pm-shell-offset-target,
    [dir="ltr"] .app-wrapper.collapsed .pm-shell-offset-target,
    [dir="ltr"] .sidebar-wrapper.menu-hide~.pm-shell-stage .pm-shell-offset-target {
        margin-left: var(--pm-shell-gutter) !important;
    }

    [dir="rtl"] .app-wrapper .pm-shell-offset-target,
    [dir="rtl"] .app-wrapper.collapsed .pm-shell-offset-target,
    [dir="rtl"] .sidebar-wrapper.menu-hide~.pm-shell-stage .pm-shell-offset-target {
        margin-right: var(--pm-shell-gutter) !important;
    }

    [dir="ltr"] .app-wrapper .pm-shell-offset-target,
    [dir="rtl"] .app-wrapper .pm-shell-offset-target {
        margin-right: var(--pm-shell-gutter) !important;
        margin-left: var(--pm-shell-gutter) !important;
    }

    #app_header .app-header {
        /* padding: 16px 18px; */
        padding: 16px var(--pm-shell-content-x);
    }

    .pm-shell-subtitle {
        max-width: 42ch;
    }

    .pm-shell-actions {
        flex-wrap: wrap;
    }

    .pm-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .pm-dashboard-hero__rail {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    .pm-shell-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .pm-shell-header__main,
    .pm-shell-actions {
        width: 100%;
    }

    .pm-shell-actions {
        justify-content: space-between;
    }

    .pm-shell-subtitle,
    .pm-user-copy span {
        display: none;
    }

    .pm-dashboard-hero__meta {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-hero-meta-card {
        padding-bottom: 4px;
    }
}

@media (max-width: 767.98px) {
    .app-wrapper {
        --pm-shell-gutter: 12px;
        --pm-shell-content-x: 16px;
    }

    #app_header .app-header {
        padding: 14px var(--pm-shell-content-x);
        border-radius: 22px;
    }

    .content-wrapper {
        padding: 0 0 96px !important;
    }

    .page-content,
    #page_layout,
    #content_layout {
        padding: 0 !important;
    }

    .pm-mobile-logo {
        display: inline-flex !important;
    }

    .pm-topbar-context {
        gap: 0;
    }

    .pm-topbar-eyebrow {
        font-size: 0.68rem;
    }

    .pm-topbar-title {
        font-size: 0.98rem;
    }

    .pm-shell-actions {
        gap: 8px !important;
    }

    .pm-user-copy strong {
        max-width: 92px;
    }

    .pm-dashboard-hero,
    .pm-summary-card,
    .pm-metric-card,
    .pm-table-card {
        padding: 16px;
    }

    .pm-summary-card {
        min-height: 108px;
    }

    .pm-dashboard-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pm-card-note {
        max-width: none;
    }
}

@media (max-width: 639.98px) {
    .pm-dashboard-summary {
        grid-template-columns: 1fr;
    }

    .pm-shell-header__main {
        align-items: center;
    }

    .pm-shell-actions {
        justify-content: flex-start;
    }

    .pm-status-pill.pm-topbar-site,
    .pm-user-copy {
        display: none;
    }

    .pm-user-trigger {
        padding-right: 6px;
    }
}

/* Detailed View */

.pm-dashboard-view--detailed {
    display: grid;
    gap: 24px;
}

.pm-detailed-board {
    display: grid;
    gap: 24px;
}

.pm-detailed-toolbar {
    align-items: flex-end;
}

.pm-detailed-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}

.pm-detailed-select {
    min-width: 224px;
    display: grid;
    gap: 8px;
}

.pm-detailed-live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.pm-detailed-grid {
    display: grid;
    gap: 24px;
}

.pm-detailed-card {
    position: relative;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--pm-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 245, 247, 0.94) 100%);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
    transition: transform var(--pm-transition), box-shadow var(--pm-transition), border-color var(--pm-transition);
}

html.dark .pm-detailed-card {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.98) 0%, rgba(32, 32, 32, 0.94) 100%);
}

.pm-detailed-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--pm-primary), var(--pm-yellow));
    opacity: 0.95;
}

.pm-detailed-card__summary {
    display: grid;
    align-content: start;
    gap: 20px;
    min-width: 0;
}

.pm-detailed-card__summary-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.pm-detailed-card__heading {
    min-width: 0;
}

.pm-detailed-card__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(115, 139, 59, 0.1);
    color: var(--pm-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-detailed-card__title {
    margin: 10px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pm-detailed-card__scope {
    margin: 8px 0 0;
    color: var(--pm-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}


.pm-detailed-card__status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    justify-self: end;
    align-self: start;
}

.pm-detailed-card__status--success {
    color: var(--pm-success);
    background: var(--pm-success-soft);
}

.pm-detailed-card__status--warning {
    color: var(--pm-warning);
    background: var(--pm-warning-soft);
}

.pm-detailed-card__status--danger {
    color: var(--pm-danger);
    background: var(--pm-danger-soft);
}

.pm-detailed-card__radial {
    min-height: 220px;
    /* Constrain + centre the gauge so ApexCharts renders a true circle. Without a
       width cap the radialBar stretched to the full column (~390px) and the engine
       squished the height to ~172px, dropping the centre "% / label" overlay low
       and clipping the arc (SS4). A square-ish, centred box keeps it aligned. */
    width: 100%;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.pm-detailed-card__stats {
    display: grid;
    /* 2 per row (2x2) instead of 3+1 — the Parkomate detailed stat boxes (Total / Available /
       Occupied / cross-park) read much cleaner in a 2-column grid. EECS keeps its own 3-column
       override (.pm-eecs-detailed-card .pm-detailed-card__stats). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pm-detailed-stat {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(115, 139, 59, 0.08);
    background: var(--pm-surface-muted);
}

.pm-detailed-stat span {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.pm-detailed-stat strong {
    color: var(--pm-text);
    font-size: 1.16rem;
    line-height: 1.1;
}

.pm-detailed-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pm-detailed-card__chart-panel {
    min-width: 0;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(115, 139, 59, 0.12);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html.dark .pm-detailed-card__chart-panel {
    background: rgba(17, 17, 17, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.pm-detailed-card__chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pm-detailed-card__chart-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.pm-detailed-card__chart-copy {
    margin: 8px 0 0;
    color: var(--pm-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.pm-detailed-main-chart {
    width: 100%;
    min-height: 360px;
}

.pm-detailed-main-chart .highcharts-root {
    font-family: "Inter", sans-serif;
}

.pm-detailed-empty {
    display: grid;
    place-items: center;
    min-height: 360px;
    padding: 24px;
    border: 1px dashed rgba(115, 139, 59, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--pm-text-muted);
    text-align: center;
    line-height: 1.7;
}

html.dark .pm-detailed-empty {
    background: rgba(26, 26, 26, 0.62);
}

.pm-detailed-tooltip {
    display: grid;
    gap: 6px;
    min-width: 164px;
    padding: 12px 14px;
}

.pm-detailed-tooltip__label {
    color: var(--pm-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-detailed-tooltip strong {
    color: var(--pm-text);
    font-size: 1.12rem;
    line-height: 1.1;
}

.pm-detailed-tooltip>span:last-child {
    color: var(--pm-text-muted);
    font-size: 0.82rem;
}

.pm-detailed-tooltip__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--pm-text);
    font-size: 0.86rem;
}

.pm-detailed-tooltip__row strong {
    font-size: 0.94rem;
}

@media (max-width: 1279.98px) {
    .pm-detailed-card {
        grid-template-columns: 1fr;
    }

    .pm-detailed-card__radial {
        min-height: 190px;
    }
}

@media (max-width: 991.98px) {

    .pm-detailed-toolbar__actions,
    .pm-detailed-card__summary-top,
    .pm-detailed-card__chart-head {
        align-items: stretch;
    }

    .pm-detailed-toolbar__actions,
    .pm-detailed-card__summary-top,
    .pm-detailed-card__chart-head {
        flex-direction: column;
    }

    .pm-detailed-select {
        width: 100%;
        min-width: 0;
    }

    .pm-detailed-card__summary-top {
        grid-template-columns: 1fr;
    }

    .pm-detailed-card__status {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {

    .pm-detailed-card,
    .pm-detailed-card__chart-panel {
        padding: 18px;
    }

    .pm-detailed-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pm-detailed-main-chart,
    .pm-detailed-empty {
        min-height: 300px;
    }

    .pm-detailed-live-actions {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .pm-detailed-card__stats {
        grid-template-columns: 1fr;
    }
}

.pm-floor-map-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pm-floor-map-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pm-floor-map-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
}

.pm-floor-map-hero__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pm-floor-map-title {
    margin: 0;
    font-size: clamp(1.95rem, 3vw, 3rem);
    line-height: 1.05;
}

.pm-floor-map-subtitle {
    margin: 0;
    max-width: 760px;
    color: var(--pm-text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.pm-floor-map-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pm-floor-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pm-floor-map-chip {
    --chip-color: var(--pm-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--pm-shadow-sm);
    color: var(--pm-text);
    font-weight: 700;
}

html.dark .pm-floor-map-chip {
    background: rgba(26, 26, 26, 0.92);
}

.pm-floor-map-chip__dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--chip-color);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.82);
}

html.dark .pm-floor-map-chip__dot {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2);
}

.pm-floor-map-chip__label {
    color: var(--pm-text);
}

.pm-floor-map-chip strong {
    min-width: 28px;
    text-align: right;
    font-family: "Geologica", sans-serif;
    font-size: 1rem;
    color: var(--pm-text);
}

.pm-floor-map-chip.is-available {
    --chip-color: #16A34A;
}

.pm-floor-map-chip.is-occupied {
    --chip-color: #EF4444;
}

.pm-floor-map-chip.is-faulty {
    --chip-color: #F59E0B;
}

.pm-floor-map-chip.is-disconnected {
    --chip-color: #4B5563;
}

.pm-floor-map-chip.is-improper {
    --chip-color: #F97316;
}

.pm-floor-map-chip.is-two-wheeler {
    --chip-color: #374151;
}

.pm-floor-map-board {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: 32px;
    border: 1px solid var(--pm-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 245, 247, 0.92) 100%);
    box-shadow: var(--pm-shadow-md);
    overflow: hidden;
}

html.dark .pm-floor-map-board {
    background:
        linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(22, 22, 22, 0.92) 100%);
}

.pm-floor-map-board::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    border: 1px solid rgba(17, 17, 17, 0.06);
    pointer-events: none;
}

html.dark .pm-floor-map-board::before {
    border-color: rgba(255, 255, 255, 0.08);
}

.pm-floor-map-board__toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.pm-floor-map-board__notes {
    max-width: 720px;
}

.pm-floor-map-board__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    min-height: 34px;
    border-radius: 999px;
    background: rgba(115, 139, 59, 0.1);
    color: var(--pm-primary-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-floor-map-board__notes p {
    margin: 10px 0 0;
    color: var(--pm-text-muted);
    line-height: 1.65;
}

.pm-floor-map-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pm-floor-map-total {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--pm-shadow-sm);
    font-weight: 700;
}

html.dark .pm-floor-map-total {
    background: rgba(26, 26, 26, 0.92);
}

.pm-floor-map-total span {
    color: var(--pm-text-muted);
}

.pm-floor-map-total strong {
    font-family: "Geologica", sans-serif;
    font-size: 1.08rem;
    color: var(--pm-text);
}

.pm-floor-map-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid var(--pm-border);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--pm-shadow-sm);
}

html.dark .pm-floor-map-zoom {
    background: rgba(26, 26, 26, 0.92);
}

.pm-floor-map-zoom button {
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pm-text);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1;
    transition:
        transform var(--pm-transition),
        background-color var(--pm-transition),
        color var(--pm-transition),
        opacity var(--pm-transition);
}

.pm-floor-map-zoom button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(17, 17, 17, 0.06);
}

.pm-floor-map-zoom button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.pm-floor-map-zoom__reset {
    min-width: 92px !important;
    background: rgba(115, 139, 59, 0.1) !important;
    color: var(--pm-primary-strong) !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em;
}

.pm-floor-map-board__frame {
    position: relative;
    min-height: 640px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.08);
    background:
        linear-gradient(180deg, #F6F6F3 0%, #DADAD5 100%);
}

html.dark .pm-floor-map-board__frame {
    border-color: rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, #1E1E1E 0%, #2A2A2A 100%);
}

.pm-floor-map-board__frame::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    pointer-events: none;
    z-index: 1;
}

html.dark .pm-floor-map-board__frame::before {
    border-color: rgba(255, 255, 255, 0.08);
}

.pm-floor-map-board__grid {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.58), transparent 24%),
        linear-gradient(transparent 31px, rgba(255, 255, 255, 0.08) 32px),
        linear-gradient(90deg, transparent 31px, rgba(255, 255, 255, 0.08) 32px);
    background-size: auto, 32px 32px, 32px 32px;
    opacity: 0.65;
    pointer-events: none;
}

html.dark .pm-floor-map-board__grid {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(transparent 31px, rgba(255, 255, 255, 0.035) 32px),
        linear-gradient(90deg, transparent 31px, rgba(255, 255, 255, 0.035) 32px);
}

.pm-floor-map-scene {
    position: relative;
    z-index: 2;
    width: 100%;
    height: min(74vh, 840px);
    min-height: 520px;
    cursor: grab;
}

.pm-floor-map-scene.is-dragging {
    cursor: grabbing;
}

.pm-floor-map-scene canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1199.98px) {
    .pm-floor-map-board__frame {
        min-height: 560px;
    }

    .pm-floor-map-scene {
        height: min(68vh, 720px);
        min-height: 480px;
    }
}

@media (max-width: 767.98px) {
    .pm-floor-map-board {
        padding: 18px;
        border-radius: 24px;
    }

    .pm-floor-map-board__frame {
        min-height: 460px;
        border-radius: 22px;
    }

    .pm-floor-map-scene {
        min-height: 420px;
        height: min(62vh, 620px);
    }

    .pm-floor-map-chip,
    .pm-floor-map-total {
        min-height: 50px;
        padding: 0 16px;
    }

    .pm-floor-map-zoom {
        width: 100%;
        justify-content: space-between;
    }

    .pm-floor-map-zoom button {
        flex: 1;
    }

    .pm-floor-map-zoom__reset {
        flex: 1.4 !important;
    }
}

@media (max-width: 479.98px) {

    .pm-floor-map-board__toolbar,
    .pm-floor-map-controls {
        align-items: stretch;
    }

    .pm-floor-map-board__toolbar,
    .pm-floor-map-controls {
        flex-direction: column;
    }

    .pm-floor-map-title {
        font-size: 1.8rem;
    }

    .pm-floor-map-scene {
        min-height: 360px;
    }
}

/* Historical View */

.pm-history-page {
    display: grid;
    gap: 24px;
}

.pm-history-panel {
    padding: 24px;
    border-radius: 24px;
}

.pm-history-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pm-history-panel__copy {
    display: grid;
    gap: 8px;
    max-width: 780px;
}

.pm-history-panel__title {
    margin: 0;
    font-family: "Geologica", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pm-text);
}

.pm-history-panel__text {
    margin: 0;
    color: var(--pm-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.pm-history-filter-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.pm-history-filter-field {
    display: grid;
    gap: 8px;
}

.pm-history-filter-field label {
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-history-banner-select {
    min-width: 240px;
    display: grid;
    gap: 8px;
}

.pm-history-grid {
    display: grid;
    gap: 24px;
}

.pm-history-card {
    position: relative;
    display: grid;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--pm-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 245, 247, 0.94) 100%);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
}

html.dark .pm-history-card {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.98) 0%, rgba(32, 32, 32, 0.94) 100%);
}

.pm-history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--pm-primary), var(--pm-yellow));
    opacity: 0.95;
}

.pm-history-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pm-history-card__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(115, 139, 59, 0.1);
    color: var(--pm-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-history-card__title {
    margin: 10px 0 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.pm-history-card__subtitle {
    margin: 8px 0 0;
    color: var(--pm-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.pm-history-card__status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pm-history-card__status--success {
    color: var(--pm-success);
    background: var(--pm-success-soft);
}

.pm-history-card__status--warning {
    color: var(--pm-warning);
    background: var(--pm-warning-soft);
}

.pm-history-card__status--danger {
    color: var(--pm-danger);
    background: var(--pm-danger-soft);
}

.pm-history-card__status--neutral {
    color: var(--pm-primary);
    background: var(--pm-primary-soft);
}

.pm-history-card__body {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.pm-history-card__summary {
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.pm-history-card__summary-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.pm-history-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pm-history-metric {
    position: relative;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(115, 139, 59, 0.1);
    background: var(--pm-surface-muted);
}

.pm-history-metric--has-tooltip {
    cursor: help;
}

.pm-history-metric--has-tooltip::before,
.pm-history-metric--has-tooltip::after {
    position: absolute;
    left: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 8;
}

.pm-history-metric--has-tooltip::before {
    content: "";
    top: calc(100% + 2px);
    width: 12px;
    height: 12px;
    background: var(--pm-text);
    transform: translateY(6px) rotate(45deg);
}

.pm-history-metric--has-tooltip::after {
    content: attr(data-tooltip);
    top: calc(100% + 8px);
    width: max-content;
    max-width: min(280px, calc(100vw - 48px));
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--pm-text);
    color: var(--pm-surface);
    box-shadow: 0 14px 28px rgba(18, 24, 38, 0.18);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}

.pm-history-metric--has-tooltip:hover::before,
.pm-history-metric--has-tooltip:hover::after,
.pm-history-metric--has-tooltip:focus-visible::before,
.pm-history-metric--has-tooltip:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.pm-history-metric--has-tooltip:hover::before,
.pm-history-metric--has-tooltip:focus-visible::before {
    transform: translateY(0) rotate(45deg);
}

.pm-history-metric--has-tooltip:focus-visible {
    outline: 2px solid rgba(255, 193, 7, 0.55);
    outline-offset: 3px;
}

.pm-history-metric span {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pm-history-metric strong {
    display: block;
    color: var(--pm-text);
    font-size: 1.18rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.pm-history-card__notes {
    display: grid;
    gap: 10px;
}

.pm-history-card__hint {
    margin: 0;
    color: var(--pm-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.pm-history-card__chart-shell {
    min-width: 0;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(115, 139, 59, 0.12);
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

html.dark .pm-history-card__chart-shell {
    background: rgba(17, 17, 17, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.pm-history-card__chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pm-history-card__chart-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.pm-history-card__chart-copy {
    margin: 8px 0 0;
    color: var(--pm-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 60ch;
}

.pm-history-chart {
    width: 100%;
    min-height: 360px;
}

.pm-history-chart .highcharts-root {
    font-family: "Inter", sans-serif;
}

.pm-history-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed rgba(115, 139, 59, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--pm-text-muted);
    text-align: center;
    line-height: 1.7;
}

html.dark .pm-history-empty {
    background: rgba(26, 26, 26, 0.62);
}

.pm-history-empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--pm-text);
    font-size: 1.08rem;
}

.pm-history-card__heading {
    min-width: 0;
}

.pm-history-card__title {
    margin: 0;
}

.pm-history-card__subtitle {
    margin: 8px 0 0;
}

.pm-history-card__chart-shell {
    align-self: stretch;
    align-content: start;
    height: 100%;
}

@media (max-width: 1279.98px) {
    .pm-history-card__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .pm-history-panel {
        padding: 20px;
    }

    .pm-history-filter-form {
        grid-template-columns: 1fr;
    }

    .pm-history-banner-select {
        width: 100%;
        min-width: 0;
    }

    .pm-history-card__summary-top {
        grid-template-columns: 1fr;
    }

    .pm-history-card__status {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {

    .pm-history-card,
    .pm-history-card__chart-shell {
        padding: 18px;
    }

    .pm-history-metrics {
        grid-template-columns: 1fr;
    }

    .pm-history-chart,
    .pm-history-empty {
        min-height: 300px;
    }
}

/* Historical cards: align like Detailed View */
.pm-history-card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.pm-history-card__summary {
    display: grid;
    align-content: start;
    gap: 20px;
    min-width: 0;
}

.pm-history-card__summary-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.pm-history-card__heading {
    min-width: 0;
}

.pm-history-card__status {
    justify-self: end;
    align-self: start;
}

.pm-history-card__chart-shell {
    min-width: 0;
    display: grid;
    gap: 16px;
    align-content: start;
    height: 100%;
}

.pm-history-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1279.98px) {
    .pm-history-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .pm-history-card__summary-top {
        grid-template-columns: 1fr;
    }

    .pm-history-card__status {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .pm-history-metrics {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   PARKOMATE UI — ENHANCEMENTS (Theme 1 / Pro improvements)
   Appended: chart legends, graph switcher, timeline, widget panel,
             full-page utilization, rev-meter, rolling numbers
   ================================================================ */

/* ─── Chart Legend ─── */
.pm-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--pm-border);
}

.pm-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    cursor: pointer;
    transition: opacity 160ms ease;
    user-select: none;
}

.pm-legend-item:hover { opacity: 0.75; }

.pm-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-legend-line {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ─── Rev Meter (occupancy progress bar) ─── */
.pm-rev-meter {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(115,139,59,0.10);
    overflow: hidden;
    margin-top: 8px;
}

.pm-rev-meter__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pm-primary), var(--pm-yellow));
    transition: width 600ms cubic-bezier(0.34,1.56,0.64,1);
}

.pm-rev-meter__fill.pm-danger {
    background: linear-gradient(90deg, #F59E0B, var(--pm-danger));
}

/* ─── Speedometer / Gauge container ─── */
.pm-gauge-container {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.pm-gauge-svg { width: 100%; height: auto; display: block; }

.pm-gauge-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 32%;
    text-align: center;
}

.pm-gauge-value strong {
    font-family: "Geologica", sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1;
    color: var(--pm-text);
}

.pm-gauge-value span {
    color: var(--pm-text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
    font-weight: 600;
}

/* ─── Graph type switcher (Theme 1 neutral styling) ─── */
.pm-graph-switcher {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pm-graph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 160ms ease;
    white-space: nowrap;
    font-family: inherit;
}

.pm-graph-btn:hover {
    background: var(--pm-primary-soft);
    border-color: var(--pm-primary);
    color: var(--pm-primary);
}

.pm-graph-btn.active {
    background: rgba(115,139,59,0.14);
    border-color: var(--pm-primary);
    color: var(--pm-primary);
    font-weight: 800;
}

/* ─── Timeline strip (historical + summary pages) ─── */
.pm-timeline-strip,
.pn-timeline-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

/* ─── View mode tabs (Live View / Historical Analysis) ─── */
.pm-view-mode-tabs { display: flex; gap: 6px; }
.pm-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    background: none;
    color: var(--pm-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: all 160ms ease;
    font-family: inherit;
}
.pm-view-tab:hover { color: var(--pm-primary); background: var(--pm-primary-soft); }
.pm-view-tab.active { color: var(--pm-primary); border-bottom-color: var(--pm-primary); background: rgba(115,139,59,0.06); }

/* ─── Timeline preset buttons ─── */
.pm-tl-btn {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 160ms ease;
    white-space: nowrap;
    font-family: inherit;
}
.pm-tl-btn:hover { background: var(--pm-primary-soft); border-color: var(--pm-primary); color: var(--pm-primary); }
.pm-tl-btn.active { background: rgba(115,139,59,0.14); border-color: var(--pm-primary); color: var(--pm-primary); font-weight: 800; }
html.theme-nitro .pm-tl-btn { background: rgba(0,229,255,0.04); border-color: rgba(0,229,255,0.18); color: var(--pn-text-muted, #6A93B8); font-family: 'Chakra Petch', sans-serif; }
html.theme-nitro .pm-tl-btn:hover { background: rgba(0,229,255,0.10); border-color: var(--pn-cyan, #00E5FF); color: var(--pn-cyan, #00E5FF); box-shadow: 0 0 10px rgba(0,229,255,0.2); }
html.theme-nitro .pm-tl-btn.active { background: rgba(0,229,255,0.14); border-color: var(--pn-cyan, #00E5FF); color: var(--pn-cyan, #00E5FF); box-shadow: 0 0 14px rgba(0,229,255,0.3); }

/* ─── History filter form improvements ─── */
.pm-history-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    align-items: end;
}

.pm-history-filter-field {
    display: grid;
    gap: 8px;
}

.pm-history-filter-field label {
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ─── Dashboard toolbar row ─── */
.pm-dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pm-dashboard-toolbar__left,
.pm-dashboard-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Customise View toggle button (shared, so BOTH logins get the styled pill).
      Was inline-only in index.blade.php, which left the EECS button as plain text. ── */
.pm-customise-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface);
    color: var(--pm-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 160ms ease;
}
.pm-customise-btn:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
html.theme-nitro .pm-customise-btn {
    background: rgba(0,229,255,0.04);
    border-color: rgba(0,229,255,0.15);
    color: var(--pn-text-muted, #6A93B8);
}
html.theme-nitro .pm-customise-btn:hover {
    border-color: var(--pn-cyan, #00E5FF);
    color: var(--pn-cyan, #00E5FF);
}
/* The "drag the grip to reorder…" hint beside the button. */
.pm-drag-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--pm-text-muted);
    line-height: 1.3;
}
.pm-drag-hint svg { flex-shrink: 0; opacity: 0.7; }

/* ─── Detailed view board layout ─── */
.pm-detailed-board {
    display: grid;
    gap: 18px;
}

.pm-detailed-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pm-detailed-toolbar__left,
.pm-detailed-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Full-page dashboard grid ─── */
.pm-dashboard-view {
    display: grid;
    gap: 20px;
    width: 100%;
}

.pm-dashboard-content {
    display: grid;
    gap: 20px;
    /* CRITICAL: as a grid item this defaults to min-width:auto, which lets it
       grow to its widest descendant (the bulletin marquee rail ≈ 3000px),
       blowing the whole page far past the viewport at 100% zoom. Pin to 0 so
       it respects the parent track width and inner overflow:hidden can clip. */
    min-width: 0;
    max-width: 100%;
}

/* Utilise available vertical space */
.pm-section-shell.pm-dashboard-panel--floors {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-dashboard-grid-wrap {
    flex: 1;
}

/* ─── Skeleton enhancements ─── */
@keyframes pm-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.pm-skeleton-card {
    border-radius: var(--pm-radius-card);
    background: linear-gradient(
        90deg,
        rgba(115,139,59,0.06) 0%,
        rgba(250,203,52,0.14) 50%,
        rgba(115,139,59,0.06) 100%
    );
    background-size: 400px 100%;
    animation: pm-shimmer 1.3s infinite linear;
}

.pm-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgba(115,139,59,0.10);
    margin-bottom: 8px;
}

.pm-skeleton-line--short  { width: 40%; }
.pm-skeleton-line--medium { width: 65%; }

/* ─── Rolling number ─── */
.pm-rolling-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease;
}

/* ─── Dark mode chart legend ─── */
html.dark .pm-chart-legend { border-top-color: var(--pm-border); }
html.dark .pm-legend-item  { color: var(--pm-text-muted); }

/* ─── Dark mode graph switcher ─── */
html.dark .pm-graph-btn {
    background: rgba(246,245,247,0.04);
    border-color: var(--pm-border);
    color: var(--pm-text-muted);
}

html.dark .pm-graph-btn:hover {
    background: rgba(115,139,59,0.12);
    border-color: var(--pm-primary);
    color: var(--pm-primary);
}

html.dark .pm-graph-btn.active {
    background: rgba(115,139,59,0.16);
    border-color: var(--pm-primary);
    color: var(--pm-primary);
}

/* ─── Widget customise panel (in both themes) ─── */
.pm-widget-panel {
    border: 1px solid var(--pm-border);
    background: var(--pm-surface-soft);
    border-radius: 14px;
}

html.dark .pm-widget-panel {
    background: rgba(26,26,26,0.88);
    border-color: var(--pm-border);
}

/* ─── Switcher label ─── */
.pm-switcher-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pm-text-soft);
    white-space: nowrap;
}

html.dark .pm-switcher-label { color: var(--pm-text-muted); }

/* ─── History section label ─── */
.pm-history-section-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pm-text-soft);
    margin-bottom: 8px;
    display: block;
}

/* ─── Responsive ─── */
@media (max-width: 767.98px) {
    .pm-dashboard-toolbar,
    .pm-detailed-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .pm-history-filter-form {
        grid-template-columns: 1fr;
    }

    .pm-gauge-container { max-width: 220px; }
}

/* ================================================================
   ALWAYS-VISIBLE DONUT LEGEND
   Shown below every floor card donut chart (Pro + Nitro themes)
   ================================================================ */
/* ── Donut outer wrapper (Pro mode viz container) ── */
.pm-donut-outer {
    width: 100%;
    padding: 4px 0 8px;
}

/* ── Side-callout donut layout: [label] [donut] [label] ── */
.pm-donut-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

.pm-donut-layout .pm-donut-shell {
    flex: 0 0 auto;
    width: min(260px, 55%);
    min-height: 260px;
    position: relative;
}

/* Side callout panels */
.pm-donut-callout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 8px;
    position: relative;
    min-width: 70px;
    max-width: 120px;
}

.pm-donut-callout--left  { align-items: flex-end;   text-align: right; padding-right: 14px; }
.pm-donut-callout--right { align-items: flex-start; text-align: left;  padding-left: 14px; }

/* Connector lines: dots at end to create dashed endpoint effect */
.pm-donut-callout--left::after,
.pm-donut-callout--right::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--pm-border));
}
.pm-donut-callout--left::after  { right: 1px; background: linear-gradient(to left, transparent, var(--pm-border)); }
.pm-donut-callout--right::before { left: 1px; background: linear-gradient(to right, transparent, var(--pm-border)); }

/* Dot at connector end */
.pm-donut-callout--left .pm-donut-callout__label::before,
.pm-donut-callout--right .pm-donut-callout__label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
    background: #22a24a;
    flex-shrink: 0;
}
.pm-donut-callout--right .pm-donut-callout__label::before {
    background: #dc2626;
}

@media (max-width: 480px) {
    .pm-donut-layout { flex-direction: column; align-items: center; gap: 8px; }
    .pm-donut-callout { flex-direction: row; align-items: center; min-width: auto; max-width: 100%; padding: 4px 12px; }
    .pm-donut-callout--left::after, .pm-donut-callout--right::before { display: none; }
    .pm-donut-layout .pm-donut-shell { width: min(220px, 80%); min-height: 220px; }
}

.pm-donut-callout__val {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #22a24a;
}

.pm-donut-callout__val--occ { color: var(--pm-occupied); }

.pm-stat-occupied { color: var(--pm-occupied) !important; }
.pm-stat-out { color: var(--pm-occupied) !important; }
.pm-stat-available { color: var(--pm-available) !important; }
.pm-stat-in { color: var(--pm-in) !important; }
.pm-stat-net { color: var(--pm-text-muted) !important; }
/* Higher specificity so these beat the generic '.pm-stat-item strong' theme colour. */
.pm-stat-item strong.pm-stat-occupied, .pm-stat-item strong.pm-stat-out { color: var(--pm-occupied) !important; }
.pm-stat-item strong.pm-stat-available { color: var(--pm-available) !important; }
.pm-stat-item strong.pm-stat-in { color: var(--pm-in) !important; }
.pm-stat-item strong.pm-stat-net { color: var(--pm-text-muted) !important; }

.pm-donut-callout__label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
}

html.dark .pm-donut-callout__val      { color: #4ade80; }
html.dark .pm-donut-callout__val--occ  { color: var(--pm-occupied); }

/* ── Legacy legend (kept for EECS chart compatibility) ── */
.pm-donut-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--pm-surface-soft, rgba(115,139,59,0.05));
    border-radius: 10px;
    border: 1px solid var(--pm-border);
}

.pm-donut-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--pm-text-muted);
    font-weight: 500;
}

.pm-donut-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-donut-legend__dot--avail { background: #5be08c; }
.pm-donut-legend__dot--occ   { background: #e46b6b; }

.pm-donut-legend__key {
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.pm-donut-legend__val {
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--pm-text);
    min-width: 28px;
    text-align: right;
}

.pm-donut-legend__item--avail .pm-donut-legend__val { color: #22a24a; }
.pm-donut-legend__item--occ   .pm-donut-legend__val { color: #dc2626; }

html.dark .pm-donut-legend {
    background: rgba(255,255,255,0.04);
    border-color: var(--pm-border);
}

html.dark .pm-donut-legend__item--avail .pm-donut-legend__val { color: #4ade80; }
html.dark .pm-donut-legend__item--occ   .pm-donut-legend__val { color: #f87171; }

/* ── Table-view donut inline legend ── */
.pm-donut-legend[data-role="donut-legend"] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
    padding: 6px 0 2px;
    background: transparent;
    border: none;
}
.pm-donut-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--pm-text-muted);
}
.pm-donut-legend-item i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pm-donut-legend-item strong {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
/* Brand semantics: Available = olive, Occupied = yellow (no red). Driven by the
   theme CSS vars so Pro / dark / Nitro each get their correct brand shade. */
.pm-donut-legend-item--free i  { background: var(--pm-available); }
.pm-donut-legend-item--free strong { color: var(--pm-available); }
.pm-donut-legend-item--occ i   { background: var(--pm-occupied); }
.pm-donut-legend-item--occ strong  { color: var(--pm-occupied); }

html.dark .pm-donut-legend-item--free strong { color: var(--pm-available); }
html.dark .pm-donut-legend-item--occ  strong { color: var(--pm-occupied); }

html.theme-nitro .pm-donut-legend-item--free i      { background: var(--pm-available); }
html.theme-nitro .pm-donut-legend-item--free strong { color: var(--pm-available); }
html.theme-nitro .pm-donut-legend-item--occ i       { background: var(--pm-occupied); }
html.theme-nitro .pm-donut-legend-item--occ strong  { color: var(--pm-occupied); }

/* EECS chart legend variant */
.pm-eecs-donut-legend {
    margin: 8px 0 4px;
    padding: 6px 10px;
}

/* Highcharts zoom hint */
.highcharts-reset-zoom text {
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* ─── Floor card speedometer gauge ─── */
.pm-card-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0 4px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.pm-card-gauge .pm-gauge-container,
.pm-gauge-container--pro {
    width: 100%;
    /* Scale WITH the card: fill the available width (capped only so it never
       becomes absurd), and never exceed the card's own height. */
    max-width: min(100%, 560px);
    max-height: 100%;
    margin: 0 auto;
    text-align: center;
}
/* The gauge SVG is aspect-locked; cap its height so a tall card scales it down
   (width follows via the viewBox) instead of overflowing. */
.pm-card-gauge .pm-gauge-svg { max-height: 100%; }

.pm-gauge-sub {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-align: center;
    margin: 6px 0 0;
    line-height: 1.4;
}

/* SVG fills container */
.pm-gauge-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ─── Hour zoom preset strip ─── */
.pm-hour-zoom-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--pm-surface, #fff);
    border: 1px solid var(--pm-border, #E3E7D6);
}

.pm-hour-zoom-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-text-muted, #5D6672);
    margin-right: 4px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM NAVBAR / LOGO ANIMATIONS  — Pro Theme (Light + Dark)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes pm-logo-appear {
    0%   { opacity: 0; transform: translateX(-12px) scale(0.94); filter: blur(4px); }
    100% { opacity: 1; transform: translateX(0)     scale(1);    filter: blur(0); }
}
@keyframes pm-nav-slide-in {
    0%   { opacity: 0; transform: translateX(-14px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes pm-header-drop {
    0%   { opacity: 0; transform: translateY(-14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes pm-logo-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes pm-btn-glow-in {
    0%   { opacity: 0; transform: scale(0.82); }
    70%  { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Sidebar logo — entrance & hover ── */
.logo-segment {
    position: relative;
    overflow: hidden;
}
/* Entrance animation only fires ONCE (class removed after play via JS) */
.logo-segment > a:not(.pm-logo-ready) {
    animation: pm-logo-appear 480ms cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: 60ms;
}
.logo-segment > a {
    transition: transform 240ms cubic-bezier(0.34,1.56,0.64,1), filter 240ms ease;
    display: block;
    will-change: transform;
    opacity: 1;
}
.logo-segment > a:hover {
    transform: scale(1.04) translateY(-2px);
    filter: drop-shadow(0 4px 12px rgba(115,139,59,0.28));
}
/* Shimmer sweep on logo hover */
.logo-segment > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.38) 50%,
        transparent 65%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
    border-radius: 12px;
}
.logo-segment > a:hover::after {
    opacity: 1;
    animation: pm-logo-shimmer 600ms linear;
}

/* ── Sidebar nav items — staggered entrance ── */
.sidebar-menu > li,
.sidebar-menu > li > a,
.sidebar-menu > li.navItem {
    animation: pm-nav-slide-in 360ms cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.sidebar-menu > li:nth-child(1),  .sidebar-menu > li:nth-child(1) > a  { animation-delay: 100ms; }
.sidebar-menu > li:nth-child(2),  .sidebar-menu > li:nth-child(2) > a  { animation-delay: 145ms; }
.sidebar-menu > li:nth-child(3),  .sidebar-menu > li:nth-child(3) > a  { animation-delay: 190ms; }
.sidebar-menu > li:nth-child(4),  .sidebar-menu > li:nth-child(4) > a  { animation-delay: 235ms; }
.sidebar-menu > li:nth-child(5),  .sidebar-menu > li:nth-child(5) > a  { animation-delay: 280ms; }
.sidebar-menu > li:nth-child(6),  .sidebar-menu > li:nth-child(6) > a  { animation-delay: 325ms; }
.sidebar-menu > li:nth-child(7),  .sidebar-menu > li:nth-child(7) > a  { animation-delay: 370ms; }
.sidebar-menu > li:nth-child(8),  .sidebar-menu > li:nth-child(8) > a  { animation-delay: 415ms; }

/* ── Nav item hover — left accent bar + icon scale ── */
.navItem {
    position: relative;
    border-radius: 10px;
    transition: background 180ms ease, color 180ms ease;
    overflow: hidden;
}
.navItem::before {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pm-primary, #738B3B);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1);
    z-index: 2;
}
.navItem:hover::before,
.navItem.active::before {
    transform: scaleY(1);
}
/* Subtle background shimmer on hover */
.navItem:hover {
    background: rgba(115,139,59,0.07);
}
.navItem.active {
    background: rgba(115,139,59,0.10);
}

/* Nav icon hover: scale + slight rotation */
.nav-icon {
    transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1), color 180ms ease;
    display: inline-block;
    will-change: transform;
}
.navItem:hover .nav-icon {
    transform: scale(1.22) rotate(-4deg);
    color: var(--pm-primary, #738B3B);
}
.navItem.active .nav-icon {
    transform: scale(1.14);
    color: var(--pm-primary, #738B3B);
}

/* ── Top header bar — slide-down entrance ── */
#app_header .app-header {
    animation: pm-header-drop 380ms cubic-bezier(0.25,0.46,0.45,0.94) both;
    animation-delay: 40ms;
}

/* ── Header action buttons (theme toggle, user) — entrance pop ── */
#themeMood, #pn-theme-toggle {
    animation: pm-btn-glow-in 420ms cubic-bezier(0.34,1.56,0.64,1) both;
    transition: transform 200ms cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 200ms ease,
                background 160ms ease;
}
#themeMood:nth-of-type(1) { animation-delay: 200ms; }
#pn-theme-toggle           { animation-delay: 260ms; }

#themeMood:hover {
    transform: rotate(20deg) scale(1.18);
    box-shadow: 0 4px 18px rgba(115,139,59,0.30);
}
#pn-theme-toggle:hover {
    transform: rotate(-12deg) scale(1.18);
    box-shadow: 0 4px 18px rgba(115,139,59,0.30);
}
#themeMood:active,
#pn-theme-toggle:active {
    transform: scale(0.94);
}

/* ── Sidebar wrapper — enter from left ── */
@keyframes pm-sidebar-reveal {
    0%   { opacity: 0; transform: translateX(-22px); }
    100% { opacity: 1; transform: translateX(0); }
}
.sidebar-wrapper {
    animation: pm-sidebar-reveal 350ms cubic-bezier(0.25,0.46,0.45,0.94) both;
    animation-delay: 20ms;
}

/* ── Dark mode variants ── */
html.dark .navItem:hover  { background: rgba(255,255,255,0.05); }
html.dark .navItem.active { background: rgba(255,255,255,0.08); }
html.dark .navItem:hover .nav-icon { color: #a3c26a; }
html.dark .navItem.active .nav-icon { color: #a3c26a; }
html.dark .navItem::before { background: #a3c26a; }
html.dark #themeMood:hover,
html.dark #pn-theme-toggle:hover {
    box-shadow: 0 4px 18px rgba(163,194,106,0.35);
}
html.dark .logo-segment > a:hover {
    filter: drop-shadow(0 4px 12px rgba(163,194,106,0.32));
}

/* ══════════════════════════════════════════════════════════════════════
   CARD FULLSCREEN — browser native fullscreen on individual cards
   ══════════════════════════════════════════════════════════════════════ */
.pm-metric-card:fullscreen,
.pm-metric-card:-webkit-full-screen,
.pm-metric-card:-moz-full-screen,
.pm-metric-card:-ms-fullscreen,
.pm-metric-card--fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    z-index: 99999 !important;
    padding: 32px !important;
    display: grid !important;
    grid-template-columns: 40% 1fr !important;
    grid-template-rows: auto !important;
    column-gap: 40px !important;
    row-gap: 20px !important;
    align-items: start !important;
}
.pm-metric-card:fullscreen .pm-card-head,
.pm-metric-card:-webkit-full-screen .pm-card-head,
.pm-metric-card--fullscreen .pm-card-head          { grid-column: 1 / -1 !important; }
.pm-metric-card:fullscreen .pm-card-viz-section,
.pm-metric-card:-webkit-full-screen .pm-card-viz-section,
.pm-metric-card--fullscreen .pm-card-viz-section   { grid-column: 1 !important; grid-row: 2 !important; }
.pm-metric-card:fullscreen .pm-card-right-col,
.pm-metric-card:-webkit-full-screen .pm-card-right-col,
.pm-metric-card--fullscreen .pm-card-right-col     { grid-column: 2 !important; grid-row: 2 !important; }
.pm-metric-card:fullscreen .pm-card-footer,
.pm-metric-card:-webkit-full-screen .pm-card-footer,
.pm-metric-card--fullscreen .pm-card-footer        { grid-column: 1 / -1 !important; }

/* ── Single-card 2-col — left viz section guaranteed min-height ── */
.pm-dashboard-grid--single .pm-card-viz-section {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Loading shimmer for empty gauge while pmBuildGauge loads */
.pm-card-gauge:empty::before {
    content: '';
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(115,139,59,0.08) 0%, rgba(115,139,59,0.04) 100%);
    border: 2px dashed rgba(115,139,59,0.20);
    margin: 20px auto;
    animation: pm-gauge-placeholder-pulse 1.6s ease-in-out infinite;
}
html.theme-nitro .pm-card-gauge:empty::before {
    background: linear-gradient(135deg, rgba(0,229,255,0.08) 0%, rgba(0,229,255,0.04) 100%);
    border-color: rgba(0,229,255,0.20);
}
@keyframes pm-gauge-placeholder-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.97); }
    50%       { opacity: 0.9; transform: scale(1.01); }
}

/* ── Nitro: force 2-column grid on single card (override animation interference) ── */
html.theme-nitro #radarData.pm-dashboard-grid--single .pm-metric-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    column-gap: 28px !important;
    row-gap: 16px !important;
    align-items: start !important;
}
/* These pin the OLD single-card 2-column layout (viz | right-col). Scope them to
   DIRECT children of the metric-card so they don't leak onto the viz card once it
   lives inside the engine's micro-grid wrapper (which would block free resize). */
html.theme-nitro #radarData.pm-dashboard-grid--single > .pm-metric-card > .pm-card-head        { grid-column: 1 / -1 !important; }
html.theme-nitro #radarData.pm-dashboard-grid--single > .pm-metric-card > .pm-card-viz-section { grid-column: 1 !important; grid-row: 2 !important; }
html.theme-nitro #radarData.pm-dashboard-grid--single > .pm-metric-card > .pm-card-right-col   { grid-column: 2 !important; grid-row: 2 !important; }
html.theme-nitro #radarData.pm-dashboard-grid--single > .pm-metric-card > .pm-card-footer      { grid-column: 1 / -1 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PRO THEME — GLASSMORPHISM CARDS + DATA-FIRST HIERARCHY (Session 6)
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards: light frosted glass (only outside Nitro) */
html:not(.dark):not(.theme-nitro) .pm-metric-card {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(248, 250, 252, 0.72) 100%);
    border: 1px solid rgba(115, 139, 59, 0.16);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 28px rgba(17, 17, 17, 0.06),
        0 1px 0 rgba(115, 139, 59, 0.06);
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
html:not(.dark):not(.theme-nitro) .pm-metric-card:hover {
    border-color: rgba(115, 139, 59, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 14px 36px rgba(17, 17, 17, 0.10);
}

/* KPI strip: glass + bigger values for instant scan */
html:not(.dark):not(.theme-nitro) .pm-live-kpi {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(248, 250, 252, 0.75) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(115, 139, 59, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(17, 17, 17, 0.05);
}

.pm-live-kpi__body strong {
    font-size: 1.80rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.pm-live-kpi__body span {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    opacity: 0.72;
}

/* Subtle ambient gradient backdrop behind the dashboard */
html:not(.theme-nitro) body.font-inter.dashcode-app {
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 5%, rgba(115, 139, 59, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 95%, rgba(250, 203, 52, 0.04) 0%, transparent 60%);
    background-attachment: fixed;
}
html.dark:not(.theme-nitro) body.font-inter.dashcode-app {
    background-image:
        radial-gradient(ellipse 60% 50% at 15% 5%, rgba(163, 194, 106, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 90% 95%, rgba(250, 203, 52, 0.04) 0%, transparent 60%);
    background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════════════════════════
   EXCEL-STYLE CELLULAR GRID SPANS & MOBILE OVERRIDES (Session 7)
   ═══════════════════════════════════════════════════════════════════════ */
.pm-grid-col-span-1 { grid-column: span 1 !important; }
.pm-grid-col-span-2 { grid-column: span 2 !important; }
.pm-grid-col-span-3 { grid-column: span 3 !important; }
.pm-grid-col-span-4 { grid-column: span 4 !important; }

.pm-grid-row-span-1 { grid-row: span 1 !important; }
.pm-grid-row-span-2 { grid-row: span 2 !important; }
.pm-grid-row-span-3 { grid-row: span 3 !important; }

/* Responsive grid mobile override: force single column visually on mobile */
@media (max-width: 767.98px) {
    #radarData {
        grid-template-columns: 1fr !important;
    }
    .pm-metric-card, .pm-eecs-type-card, .pm-eecs-chart-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CINEMATIC INTRO VIDEO CURTAIN & BOOT ANIMATION (Session 7)
   ═══════════════════════════════════════════════════════════════════════ */
.pm-boot-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000;
    background: #060913;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1),
                transform 800ms cubic-bezier(0.25, 1, 0.5, 1),
                filter 800ms cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform, filter;
}

.pm-boot-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    z-index: 1;
}

.pm-boot-skip {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 8px 20px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 200ms ease;
}
.pm-boot-skip:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #00E5FF;
    color: #00E5FF;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}

/* Fallback pure-CSS automotive dashboard boot sequence */
.pm-boot-fallback {
    position: relative;
    width: 280px;
    height: 280px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pm-boot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px double transparent;
    border-top-color: #00E5FF;
    border-bottom-color: #00FF87;
    animation: pm-boot-spin 1.8s linear infinite;
    opacity: 0.85;
}
.pm-boot-ring--inner {
    inset: 25px;
    border-width: 2px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #FACB34;
    border-right-color: #FF1744;
    animation: pm-boot-spin-reverse 1.2s linear infinite;
    opacity: 0.7;
}

.pm-boot-brand {
    font-family: 'Geologica', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 18px #00E5FF, 0 0 6px rgba(0,255,135,0.5);
    margin-top: 15px;
    animation: pm-boot-pulse 1.4s ease-in-out infinite;
}

.pm-boot-loading {
    margin-top: 35px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.55);
}

@keyframes pm-boot-spin {
    to { transform: rotate(360deg); }
}
@keyframes pm-boot-spin-reverse {
    to { transform: rotate(-360deg); }
}
@keyframes pm-boot-pulse {
    0%, 100% { transform: scale(0.97); opacity: 0.85; }
    50%       { transform: scale(1.03); opacity: 1; }
}

/* Fade, blur, and scale out the boot curtain */
.pm-boot-screen--dismiss {
    opacity: 0 !important;
    transform: scale(1.06) !important;
    filter: blur(14px) !important;
    pointer-events: none !important;
}

  
.pm-hidden { display: none !important; } 
/* ── Floor Container Grid ──
   (Superseded by the DENSE grid definition further below; kept minimal so the
   two blocks don't conflict — the later block is the single source of truth.) */

/* ══════════════════════════════════════════════════════
   PM Widget Resize Handles + Layout Fix — Session 7+
   ══════════════════════════════════════════════════════ */

/* Container: DENSE CSS GRID "canvas" — small widgets backfill the gaps left by
   bigger ones (flex-wrap could never do this; that was the wasted-space bug).
   Columns auto-fill at ~PM_COL px; rows are a fixed small unit so widgets can
   span any number of cells. `dense` packing fills every hole optimally. */
.pm-floor-cards-wrapper {
    display: grid !important;
    /* FINE grid so resizing glides in ~16px / ~11px steps instead of big jumps,
       and the auto-fit packer can tile widgets precisely with no orphan gaps.
       The JS engine assigns each widget's cell spans (auto-fit or saved). */
    grid-template-columns: repeat(auto-fill, minmax(var(--pm-col, 11px), 1fr)) !important;
    grid-auto-rows: var(--pm-row, 8px) !important;
    grid-auto-flow: row dense !important;
    gap: var(--pm-gap, 4px) !important;
    padding: 12px 20px 20px !important;
    align-content: start !important;
}

/* The alert-chips strip is NOT a grid-managed section (the engine skips it), so
   without this it auto-flows into a free cell — landing on top of the gauge. Pin
   it to its own full-width row so it can never overlap the viz, on any login/theme. */
.pm-floor-cards-wrapper > .pm-card-chips {
    grid-column: 1 / -1 !important;
}
/* When there are no real alerts the strip is empty — hide it entirely so no stray
   pill floats in the card (and it doesn't reserve a row). The element still exists
   in the DOM so the live-poll update target is always present. */
.pm-card-chips:empty { display: none !important; }

/* Each inner section is a grid item spanning a number of cells. Spans are set
   inline by the JS engine; the var() values are only a pre-JS fallback. A wider
   fallback span (≈half the micro-grid columns) makes the single pre-engine paint a
   clean 2-up layout instead of a cramped clipped 3-col, so the first frame already
   reads well before packWrapper assigns the real spans. */
.pm-inner-section {
    position: relative;
    grid-column: span var(--pm-cspan, 34);
    grid-row: span var(--pm-rspan, 16);
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
}

/* ── Resize Handle Base ── */
.pm-rh {
    position: absolute;
    z-index: 25;
    opacity: 0;
    transition: opacity 0.15s;
}
.pm-inner-section:hover .pm-rh {
    opacity: 1;
}

/* Border handles — slim hit-strips along edges (kept narrow & subtle) */
.pm-rh-n { top: -1px; left: 16px; right: 16px; height: 7px; cursor: ns-resize; }
.pm-rh-s { bottom: -1px; left: 16px; right: 16px; height: 7px; cursor: ns-resize; }
.pm-rh-w { left: -1px; top: 16px; bottom: 16px; width: 7px; cursor: ew-resize; }
.pm-rh-e { right: -1px; top: 16px; bottom: 16px; width: 7px; cursor: ew-resize; }

/* Corner handles — tiny grips at corners */
.pm-rh-nw { top: 0; left: 0; width: 9px; height: 9px; cursor: nwse-resize; }
.pm-rh-ne { top: 0; right: 0; width: 9px; height: 9px; cursor: nesw-resize; }
.pm-rh-sw { bottom: 0; left: 0; width: 9px; height: 9px; cursor: nesw-resize; }
.pm-rh-se { bottom: 0; right: 0; width: 9px; height: 9px; cursor: nwse-resize; }

/* Hover feedback on handles */
.pm-rh:hover {
    background: rgba(115, 139, 59, 0.18);
    border-radius: 2px;
}
html.dark .pm-rh:hover,
html.theme-nitro .pm-rh:hover {
    background: rgba(0, 229, 255, 0.18);
}

/* Active resize visual feedback */
.pm-inner-section.pm-resizing {
    outline: 2px solid rgba(115, 139, 59, 0.4);
    outline-offset: -1px;
    z-index: 30;
}
html.dark .pm-inner-section.pm-resizing,
html.theme-nitro .pm-inner-section.pm-resizing {
    outline-color: rgba(0, 229, 255, 0.4);
}

/* Floating hint shown when a resize is blocked by a neighbouring card. */
.pm-resize-blocktip {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 260px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(20, 22, 26, 0.96);
    border: 1px solid rgba(255, 120, 80, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.pm-resize-blocktip.is-on { opacity: 1; transform: translateY(0); }
.pm-resize-blocktip strong { color: #ff8a5c; font-weight: 700; }
.pm-resize-blocktip span { color: rgba(255, 255, 255, 0.78); }

/* Drag handle: grab cursor */
.pm-section-drag-handle {
    cursor: grab;
    user-select: none;
}
.pm-section-drag-handle:active {
    cursor: grabbing;
}

/* Dragging visual feedback */
.pm-inner-section.pm-dragging {
    opacity: 0.5;
    outline: 2px dashed rgba(0, 229, 255, 0.4);
}

/* ── Cursor enhancement for clickable elements ── */
button, a, [role="button"], .pm-widget-chip,
.pm-graph-btn, .pm-preset-btn, .pm-view-tab,
.pm-tl-btn, .pm-customise-btn, select, input[type="checkbox"] {
    cursor: pointer !important;
}

/* Car theme: pointer cursor must work even with custom cursor */
html.theme-nitro button,
html.theme-nitro a,
html.theme-nitro [role="button"],
html.theme-nitro .pm-widget-chip,
html.theme-nitro .pm-graph-btn,
html.theme-nitro .pm-preset-btn {
    cursor: pointer !important;
}

/* ── In/Out Card Fix: full-width grid layout ── */
.pm-card-stats .pm-insight-content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Stats items: stretch to fill */
.pm-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border-radius: var(--pm-radius, 10px);
    background: var(--pm-surface, rgba(255,255,255,0.04));
    border: 1px solid var(--pm-border, rgba(0,0,0,0.06));
    min-height: 70px;
}

/* ── Card Content Adaptiveness ── */
.pm-inner-section .pm-insight-content {
    width: 100%;
    overflow: hidden;
}

/* Charts must fill their container */
.pm-donut-chart, .pm-card-gauge {
    width: 100% !important;
    min-height: 160px;
}

/* Progress bar must stretch */
.pm-card-meter-track {
    width: 100%;
}

/* ── Dark Mode: Proper Isolation ── */
html.dark:not(.theme-nitro) .pm-metric-card {
    background: rgba(30, 33, 40, 0.95) !important;
    border-color: rgba(255,255,255,0.06) !important;
    backdrop-filter: none !important;
}

html.dark:not(.theme-nitro) .pm-stat-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

html.dark:not(.theme-nitro) .pm-inner-section {
    border-color: rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════════════════════════
   SESSION 8 — Affordance cursors, resize-handle clarity, content fit,
   richer normal dark mode. All scoped; safe-additive.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Gesture affordances (work even when the car theme overlays a custom
        cursor — these force the NATIVE cursor on the whole document so the
        user always knows the gesture in progress). ── */
body.pm-is-resizing,
body.pm-is-resizing * { cursor: nwse-resize !important; user-select: none !important; }
body.pm-is-dragging,
body.pm-is-dragging *  { cursor: grabbing !important;  user-select: none !important; }

/* Make every widget visibly draggable + resizable on hover so affordance is obvious */
.pm-inner-section { cursor: default; transition: box-shadow .2s, transform .18s ease, opacity .18s ease; }
.pm-section-drag-handle { cursor: grab; }
.pm-section-drag-handle:active,
.pm-inner-section.pm-dragging .pm-section-drag-handle { cursor: grabbing; }

/* Drag handle discoverability: a soft pill that lifts on section hover */
.pm-section-drag-handle {
    opacity: 0; transition: opacity .15s ease, background .15s ease;
    border-radius: 6px; padding: 2px 8px;
}
.pm-inner-section:hover .pm-section-drag-handle { opacity: .55; }
.pm-section-drag-handle:hover { opacity: 1 !important; background: rgba(115,139,59,.14); }
html.dark:not(.theme-nitro) .pm-section-drag-handle:hover,
html.theme-nitro .pm-section-drag-handle:hover { background: rgba(0,229,255,.14); }

/* Dragging widget/card — clear "lifted placeholder" look (no transform, so it
   never fights the FLIP transforms applied to siblings during reorder). */
.pm-inner-section.pm-dragging,
.pm-metric-card.pm-dragging {
    opacity: .55;
    outline: 2px dashed var(--pm-primary, #738B3B);
    outline-offset: -3px;
    border-radius: 14px;
}
html.theme-nitro .pm-inner-section.pm-dragging,
html.theme-nitro .pm-metric-card.pm-dragging { outline-color: var(--pn-cyan, #00E5FF); }
/* smooth body cursor + disable text selection mid-drag */
body.pm-is-dragging { cursor: grabbing !important; }

/* ── Whole floor-card drag grip (top of each card header) ── */
.pm-card-drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 16px; margin: 0 6px 6px 0;
    color: var(--pm-text-muted, #8a8f98);
    cursor: grab; opacity: 0; border-radius: 6px;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.pm-metric-card:hover .pm-card-drag-handle { opacity: .5; }
.pm-card-drag-handle:hover { opacity: 1; background: rgba(115,139,59,.14); color: var(--pm-primary, #738B3B); }
.pm-card-drag-handle:active { cursor: grabbing; }
html.dark:not(.theme-nitro) .pm-card-drag-handle:hover,
html.theme-nitro .pm-card-drag-handle:hover { background: rgba(0,229,255,.14); color: var(--pn-cyan, #00E5FF); }
/* keep the header tidy: grip sits above the kicker */
.pm-card-head { position: relative; }

/* ── Floors-to-Monitor checklist chips ── */
.pm-floor-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-floor-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-size: .78rem; font-weight: 600; user-select: none;
    border: 1px solid var(--pm-border, rgba(0,0,0,.1));
    background: var(--pm-surface, rgba(0,0,0,.03));
    color: var(--pm-text-muted, #6b747c);
    transition: all .15s ease;
}
.pm-floor-chip.active {
    color: var(--pm-primary, #738B3B);
    border-color: var(--pm-primary, #738B3B);
    background: rgba(115,139,59,.10);
}
.pm-floor-chip:hover { border-color: var(--pm-primary, #738B3B); }
/* Draggable to reorder floors (left→right = top→bottom containers) */
.pm-floor-chip { cursor: grab; user-select: none; touch-action: none; transition: border-color .15s, background .15s, transform .2s, box-shadow .15s; }
.pm-floor-chip::before {
    content: ""; width: 10px; height: 10px; margin-right: 2px; flex: 0 0 auto; opacity: .5;
    background: radial-gradient(currentColor 1.2px, transparent 1.3px) 0 0/4px 4px;
}
.pm-floor-chip.pm-chip-dragging {
    cursor: grabbing; opacity: .92; transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(17,17,17,.22); z-index: 5;
}
html.dark:not(.theme-nitro) .pm-floor-chip.active { color: #aebf6f; border-color: #aebf6f; background: rgba(174,191,111,.12); }
html.theme-nitro .pm-floor-chip.active {
    color: var(--pn-cyan, #00E5FF); border-color: rgba(0,229,255,.5);
    background: rgba(0,229,255,.10);
}

/* ══════════════════════════════════════════════════════════════════════
   SESSION 9 — Premium Parkomate logo: bigger, metallic shine loop (~10s),
   works in Pro + Nitro, light + dark. The shine is masked to the logo's own
   shape via --pm-logo-url (set in header.blade.php), so the glint follows the
   logo silhouette instead of a rectangle.
   ══════════════════════════════════════════════════════════════════════ */
.pm-logo-shine { position: relative; display: inline-flex; align-items: center; isolation: isolate; }
/* Guarantee EXACTLY ONE logo regardless of light/dark/semiDark class state
   (fixes the "two logos on theme switch" bug when <html> briefly has neither). */
.logo-segment .white_logo { display: none; }
.logo-segment .black_logo { display: block; }
html.dark .logo-segment .white_logo,
html.theme-nitro .logo-segment .white_logo { display: block; }
html.dark .logo-segment .black_logo,
html.theme-nitro .logo-segment .black_logo { display: none; }
/* Same guarantee for the mobile/offcanvas logo (not inside .logo-segment) so it
   never double-renders before the theme JS sets a class on <html>. */
.pm-mobile-logo .white_logo { display: none; }
.pm-mobile-logo .black_logo { display: block; }
html.dark .pm-mobile-logo .white_logo,
html.theme-nitro .pm-mobile-logo .white_logo { display: block; }
html.dark .pm-mobile-logo .black_logo,
html.theme-nitro .pm-mobile-logo .black_logo { display: none; }
/* Bigger, clearly-visible logo with a gentle premium float */
.logo-segment > a.pm-logo-shine .black_logo,
.logo-segment > a.pm-logo-shine .white_logo {
    max-height: 92px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
    transition: filter .3s ease, transform .3s ease;
    animation: pm-logo-float 6s ease-in-out infinite;
}
.pm-logo-shine:hover .black_logo,
.pm-logo-shine:hover .white_logo { transform: scale(1.04); filter: drop-shadow(0 4px 12px rgba(0,0,0,.28)); }

/* The metallic glint — a bright diagonal band sweeping across the logo silhouette */
.pm-logo-glint {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    -webkit-mask-image: var(--pm-logo-url); mask-image: var(--pm-logo-url);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255,255,255,0.35) 42%,
        rgba(255,255,255,0.9) 49%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.9) 51%,
        rgba(255,255,255,0.35) 58%,
        transparent 68%);
    background-size: 230% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    /* premium metallic sweep — glides across once every ~8s, then rests */
    animation: pm-logo-sheen 8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes pm-logo-sheen {
    0%   { background-position: 150% 0; opacity: 0; }
    6%   { opacity: 1; }
    30%  { background-position: -55% 0; opacity: 1; }
    38%  { background-position: -55% 0; opacity: 0; }
    100% { background-position: -55% 0; opacity: 0; }
}
@keyframes pm-logo-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
/* Nitro: cooler chrome glint + cyan edge glow on the logo */
html.theme-nitro .pm-logo-glint {
    background: linear-gradient(110deg,
        transparent 38%,
        rgba(0,229,255,0.55) 47%,
        rgba(255,255,255,0.95) 50%,
        rgba(0,229,255,0.55) 53%,
        transparent 62%);
    background-size: 280% 100%;
}
html.theme-nitro .logo-segment > a.pm-logo-shine .black_logo,
html.theme-nitro .logo-segment > a.pm-logo-shine .white_logo {
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.45)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: reduce) {
    .pm-logo-glint, .logo-segment > a.pm-logo-shine .black_logo,
    .logo-segment > a.pm-logo-shine .white_logo { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SESSION 9 — Headline Bulletin + Insight cards
   ══════════════════════════════════════════════════════════════════════ */
.pm-bulletin {
    margin: 0 0 4px; padding: 18px 20px; border-radius: 18px;
    border: 1px solid var(--pm-border, rgba(0,0,0,.08));
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,246,.92));
    box-shadow: 0 10px 28px rgba(17,17,17,.05);
    min-width: 0; max-width: 100%; overflow: hidden;
}
.pm-bulletin__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-bulletin__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.02rem; color: var(--pm-text, #1c1f22); }
.pm-bulletin__title iconify-icon { color: var(--pm-primary, #738B3B); }
.pm-bulletin__sub { font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-text-muted, #8a8f98); margin-left: 6px; }
.pm-bulletin__timeline { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.04); }
.pm-tl-opt {
    padding: 6px 14px; border: 0; border-radius: 9px; cursor: pointer;
    font-size: .78rem; font-weight: 700; color: var(--pm-text-muted, #6b747c); background: transparent;
    transition: all .15s ease;
}
.pm-tl-opt:hover { color: var(--pm-primary, #738B3B); }
.pm-tl-opt.active { background: var(--pm-primary, #738B3B); color: #fff; box-shadow: 0 4px 12px rgba(115,139,59,.3); }
/* News-ticker: single horizontal row, auto-scroll, manual arrows */
.pm-bulletin__viewport { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.pm-bulletin__track { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; }
.pm-bulletin__rail { display: flex; flex-wrap: nowrap; gap: 12px; will-change: transform; }
.pm-bulletin__empty { padding: 16px; text-align: center; color: var(--pm-text-muted, #8a8f98); font-size: .9rem; white-space: nowrap; }
.pm-bull-arrow {
    flex: 0 0 auto; width: 32px; align-self: center; height: 64px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--pm-border, rgba(0,0,0,.08));
    background: var(--pm-surface, rgba(0,0,0,.03)); color: var(--pm-text-muted, #6b747c);
    transition: all .15s ease;
}
.pm-bull-arrow:hover { color: var(--pm-primary, #738B3B); border-color: var(--pm-primary, #738B3B); background: rgba(115,139,59,.08); }

.pm-insight-bull {
    flex: 0 0 300px; max-width: 300px;
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 13px; border-radius: 13px;
    background: var(--pm-surface, #fff);
    border: 1px solid var(--pm-border, rgba(0,0,0,.07));
    border-left: 4px solid var(--bull, #738B3B);
}
.pm-insight-bull__icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bull) 14%, transparent); color: var(--bull);
}
.pm-insight-bull__body { min-width: 0; }
.pm-insight-bull__kicker { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bull); }
.pm-insight-bull__title { display: block; font-size: .9rem; font-weight: 800; color: var(--pm-text, #1c1f22); margin: 1px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-insight-bull__text { font-size: .76rem; line-height: 1.4; color: var(--pm-text-muted, #6b747c); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-insight-bull--good   { --bull: #2e9e5b; }
.pm-insight-bull--info   { --bull: #2f7dd1; }
.pm-insight-bull--warn   { --bull: #d9912b; }
.pm-insight-bull--danger { --bull: #e0573d; }
.pm-insight-bull--accent { --bull: #7a52d1; }

/* Dark mode */
html.dark:not(.theme-nitro) .pm-bulletin {
    background: linear-gradient(180deg, rgba(40,44,52,.96), rgba(26,29,35,.95));
    border-color: rgba(255,255,255,.07);
}
html.dark:not(.theme-nitro) .pm-bulletin__title { color: #f3f5f0; }
html.dark:not(.theme-nitro) .pm-bulletin__timeline { background: rgba(255,255,255,.05); }
html.dark:not(.theme-nitro) .pm-insight-bull { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
html.dark:not(.theme-nitro) .pm-insight-bull__title { color: #f3f5f0; }

/* Nitro — matte carbon bulletin, neon accents */
html.theme-nitro .pm-bulletin {
    background: linear-gradient(180deg, rgba(31,34,38,.96), rgba(20,22,25,.96));
    border-color: rgba(255,255,255,.06);
}
html.theme-nitro .pm-bulletin__title { color: var(--pn-text, #F5F7FA); font-family: 'Russo One', sans-serif; }
html.theme-nitro .pm-bulletin__title iconify-icon { color: var(--pn-cyan, #00E5FF); }
html.theme-nitro .pm-bulletin__timeline { background: rgba(255,255,255,.04); }
html.theme-nitro .pm-tl-opt.active { background: var(--pn-cyan, #00E5FF); color: #06222b; box-shadow: 0 0 14px rgba(0,229,255,.4); }
html.theme-nitro .pm-insight-bull { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.06); }
html.theme-nitro .pm-insight-bull__title { color: var(--pn-text, #F5F7FA); }
html.theme-nitro .pm-insight-bull--good { --bull: #00FF87; }
html.theme-nitro .pm-insight-bull--info { --bull: #00E5FF; }
html.theme-nitro .pm-insight-bull--warn { --bull: #FFB020; }
html.theme-nitro .pm-insight-bull--danger { --bull: #FF4D6D; }
html.theme-nitro .pm-insight-bull--accent { --bull: #B388FF; }

/* ── 24h / 12h time-format toggle (custom card form) ── */
.pm-timefmt-toggle { display: inline-flex; border: 1px solid var(--pm-border, rgba(0,0,0,.12)); border-radius: 8px; overflow: hidden; }
.pm-timefmt-btn {
    padding: 4px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    background: transparent; color: var(--pm-text-muted, #6b747c); cursor: pointer; border: 0;
}
.pm-timefmt-btn + .pm-timefmt-btn { border-left: 1px solid var(--pm-border, rgba(0,0,0,.12)); }
.pm-timefmt-btn.active { background: var(--pm-primary, #738B3B); color: #fff; }
.pm-cc-fmt-hint { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .7; }
html.theme-nitro .pm-timefmt-btn.active { background: var(--pn-cyan, #00E5FF); color: #06222b; }

/* ── Flatpickr clean single-month calendar (SS4) ──
   Hide adjacent-month bleed and future (disabled) days so only the selected
   month's valid dates are visible. Keeps grid cells (no layout break). */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { visibility: hidden !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { visibility: hidden !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { cursor: pointer; }

/* ── Custom zoom presets in the Detailed View zoom strip ── */
.pm-cc-zoom-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-cc-zoom-chip { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden; }
.pm-cc-zoom-chip .pm-cc-zoom-go { border-radius: 8px 0 0 8px; display: inline-flex; align-items: center; gap: 5px; }
.pm-cc-zoom-chip .pm-cc-zoom-go small { font-weight: 600; }
.pm-cc-zoom-del {
    border: 1px solid var(--pm-border, rgba(0,0,0,.12)); border-left: 0; border-radius: 0 8px 8px 0;
    padding: 0 8px; cursor: pointer; font-size: 1rem; line-height: 1; font-weight: 700;
    background: var(--pm-surface, rgba(0,0,0,.03)); color: #d9534f;
}
.pm-cc-zoom-del:hover { background: rgba(217,83,79,.14); }

/* ── Per-floor "Cards" selector (in each floor card header) ── */
.pm-floor-cards-control { position: relative; margin-left: auto; }
.pm-card-head { display: flex; align-items: flex-start; gap: 10px; }
.pm-floor-cards-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 8px; cursor: pointer;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    border: 1px solid var(--pm-border, rgba(0,0,0,.1));
    background: var(--pm-surface, rgba(0,0,0,.03));
    color: var(--pm-text-muted, #6b747c);
    transition: all .15s ease;
}
.pm-floor-cards-btn:hover { color: var(--pm-primary, #738B3B); border-color: var(--pm-primary, #738B3B); }
.pm-floor-cards-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1000;
    min-width: 224px; padding: 8px; border-radius: 14px;
    display: none; flex-direction: column; gap: 3px;
    background: #ffffff;            /* guaranteed-opaque so nothing bleeds through */
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 20px 56px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04);
    animation: pm-menu-pop .14s ease;
    /* Bound the height + scroll internally so every card option is reachable even
       when the floor container has collapsed and the page itself can't scroll. */
    max-height: min(70vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@keyframes pm-menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.pm-floor-cards-menu::before {
    content: "Show on this floor"; display: block;
    font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pm-text-muted, #8a8f98); padding: 4px 8px 6px;
}
/* Let the dropdown escape the card's overflow:hidden only while it's open */
.pm-metric-card.pm-cards-menu-open { overflow: visible; z-index: 5; }
.pm-floor-cards-control.pm-open { z-index: 1001; }
.pm-floor-cards-menu.open { display: flex; }
.pm-floor-cards-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 9px; cursor: pointer;
    font-size: .86rem; font-weight: 600; user-select: none;
    color: var(--pm-text-muted, #6b747c);
    transition: background .12s ease, color .12s ease;
}
.pm-floor-cards-item iconify-icon { flex-shrink: 0; opacity: .55; }
.pm-floor-cards-item:hover { background: rgba(115,139,59,.12); color: var(--pm-text, #1c1f22); }
.pm-floor-cards-item.active { color: var(--pm-text, #1c1f22); font-weight: 700; background: rgba(115,139,59,.08); }
.pm-floor-cards-item.active iconify-icon { color: var(--pm-primary, #738B3B); opacity: 1; }
/* dark + nitro surfaces for the menu */
html.dark:not(.theme-nitro) .pm-floor-cards-menu { background: #1b1e24; border-color: rgba(255,255,255,.1); }
html.dark:not(.theme-nitro) .pm-floor-cards-item.active { color: #f3f5f0; }
html.dark:not(.theme-nitro) .pm-floor-cards-item.active iconify-icon { color: #aebf6f; }
html.theme-nitro .pm-floor-cards-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); color: var(--pn-text-muted, #9AA3AB); }
html.theme-nitro .pm-floor-cards-btn:hover { color: var(--pn-cyan, #00E5FF); border-color: rgba(0,229,255,.4); }
html.theme-nitro .pm-floor-cards-menu { background: #15181b; border-color: rgba(0,229,255,.18); }
html.theme-nitro .pm-floor-cards-item.active { color: var(--pn-text, #F5F7FA); }
html.theme-nitro .pm-floor-cards-item.active iconify-icon { color: var(--pn-cyan, #00E5FF); }
html.theme-nitro .pm-floor-cards-item:hover { background: rgba(0,229,255,.08); }

/* Resize handles: invisible at rest. On section hover a slim 2px guide line
   appears centered in the edge strip (discoverable but minimal). The actual
   hit-area stays the full strip for easy grabbing. */
.pm-rh { background: transparent; transition: opacity .15s ease; }
.pm-rh-n::after, .pm-rh-s::after, .pm-rh-e::after, .pm-rh-w::after {
    content: ""; position: absolute; border-radius: 2px;
    background: var(--pm-primary, #738B3B);
    opacity: 0; transition: opacity .15s ease;
}
.pm-rh-n::after, .pm-rh-s::after { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.pm-rh-e::after, .pm-rh-w::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.pm-inner-section:hover .pm-rh-n::after,
.pm-inner-section:hover .pm-rh-s::after,
.pm-inner-section:hover .pm-rh-e::after,
.pm-inner-section:hover .pm-rh-w::after { opacity: .30; }
.pm-rh-n:hover::after, .pm-rh-s:hover::after,
.pm-rh-e:hover::after, .pm-rh-w:hover::after { opacity: .9; box-shadow: 0 0 6px rgba(115,139,59,.55); }
.pm-rh-nw:hover, .pm-rh-ne:hover, .pm-rh-sw:hover, .pm-rh-se:hover {
    background: var(--pm-primary, #738B3B) !important;
    border-radius: 2px; opacity: .9;
}

/* Resizing/dragging widget gets a clear lifted outline */
.pm-inner-section.pm-resizing {
    box-shadow: 0 0 0 2px var(--pm-primary, #738B3B), 0 10px 30px rgba(0,0,0,.18);
    border-radius: 12px;
}

/* ── 2. Content adaptiveness: keep cards from overflowing while letting
        charts/figures scale to whatever size the user drags. ── */
.pm-inner-section { display: flex; flex-direction: column; }
.pm-inner-section > .pm-insight-content,
.pm-inner-section > .pm-card-meter-track,
.pm-inner-section .pm-donut-layout { flex: 1 1 auto; min-height: 0; }
.pm-inner-section .pm-donut-chart,
.pm-inner-section .pm-card-gauge { height: 100%; }
/* Clamp long figures so they never break the grid */
.pm-stat-item strong,
.pm-insight-stat__val { max-width: 100%; overflow-wrap: anywhere; }

/* ── 2b. Per-card content-fit: meter / insight / slot / trend never clip ──
        Labels wrap or stack one-below-another; values clamp; nothing hides. */

/* Meter (Availability): let the 3 slot tiles stack/scale instead of squashing */
.pm-card-meter .pm-card-meter-slots { flex-wrap: wrap; }
.pm-card-meter-slot { min-width: 0; }
.pm-card-meter-slot__key {
    max-width: 100%;
    overflow-wrap: anywhere;          /* "Available" etc. wraps, never clipped */
    white-space: normal;
    line-height: 1.15;
}
.pm-card-meter-slot__val { overflow-wrap: anywhere; }

/* Insight cards (capacity-alert / throughput / turnover): row → wrap to column
   when narrow so the badge + value + label never overlap or clip. The value,
   label and pill are primary and always show; the note is secondary, so it
   takes the leftover space and softly clamps (ellipsis) rather than hard-cut. */
.pm-card-insight .pm-insight-content { display: flex; flex-direction: column; min-height: 0; }
.pm-card-insight .pm-insight-row { flex: 1 1 auto; flex-wrap: nowrap; min-height: 0; }
.pm-insight-body { flex: 1 1 auto; min-width: 0; min-height: 0; }
.pm-insight-label {
    overflow-wrap: anywhere;          /* labels wrap instead of being cut */
    white-space: normal;
}
.pm-insight-stat { min-width: 0; }
.pm-insight-stat__val { overflow-wrap: anywhere; }
.pm-insight-sub {
    overflow-wrap: anywhere;
    white-space: normal;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;            /* soft-restrict the note, never a raw cut */
}

/* Slot-grid + Trend: chart/body fills and scales, captions wrap */
.pm-card-slot-grid .pm-insight-content,
.pm-card-trend .pm-insight-content { min-height: 0; overflow: hidden; }
.pm-card-slot-grid .pm-insight-label,
.pm-card-trend .pm-insight-label {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Gauge viz: the gauge ring has spare vertical whitespace, so let it take the
   slack and keep the status line + the Taken/Free/Total chips always visible. */
.pm-card-viz-section .pm-card-gauge,
.pm-card-viz-section .pn-gauge-hero { min-height: 0; }
.pm-card-viz-section .pm-gauge-container { flex: 1 1 auto; min-height: 0; }
.pm-card-viz-section .pn-gauge-status,
.pm-card-viz-section .pn-gauge-kpis { flex: 0 0 auto; }

/* ── 3. Richer NORMAL DARK mode — the old flat grey felt dull. Add depth via
        layered gradients, a subtle accent edge and a warm ambient glow.   ── */
html.dark:not(.theme-nitro) body,
html.dark:not(.theme-nitro) .pm-dashboard-view {
    background:
        radial-gradient(900px 500px at 12% -8%, rgba(115,139,59,.10), transparent 60%),
        radial-gradient(800px 600px at 108% 110%, rgba(190,170,70,.07), transparent 55%),
        #0e1014 !important;
}
html.dark:not(.theme-nitro) .pm-metric-card {
    background:
        linear-gradient(180deg, rgba(40,44,52,.96), rgba(26,29,35,.96)) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 36px rgba(0,0,0,.40) !important;
}
html.dark:not(.theme-nitro) .pm-metric-card:hover {
    border-color: rgba(174,191,111,.30) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.50) !important;
}
/* Give each KPI tile a soft gradient + readable accent instead of flat slate */
html.dark:not(.theme-nitro) .pm-live-kpi {
    background: linear-gradient(180deg, rgba(46,50,58,.92), rgba(28,31,37,.92)) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}
html.dark:not(.theme-nitro) .pm-live-kpi .pm-live-kpi__value {
    color: #f3f5f0 !important;
    text-shadow: 0 0 1px rgba(0,0,0,.4);
}
html.dark:not(.theme-nitro) .pm-stat-item {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border-color: rgba(255,255,255,.08) !important;
}
html.dark:not(.theme-nitro) .pm-card-kicker { color: #aebf6f !important; }
html.dark:not(.theme-nitro) .pm-card-title  { color: #f3f5f0 !important; }

/* ══════════════════════════════════════════════════════════════════════
   Profile relocated to the BOTTOM of the sidebar navbar
   ══════════════════════════════════════════════════════════════════════ */
/* (Do NOT set position on .sidebar-wrapper — it's fixed; overriding it drops
   the whole content area below the sidebar.) The profile bar pins to the
   sidebar's existing positioning context. */
.pm-sidebar-profile {
    position: absolute; left: 0; bottom: 0; width: 100%;
    padding: 12px 14px;
    border-top: 1px solid var(--pm-border, rgba(0,0,0,.08));
    background: var(--pm-surface, #fff);
    z-index: 60;
}
html.dark:not(.theme-nitro) .pm-sidebar-profile { background: #1f242c; border-top-color: rgba(255,255,255,.07); }
html.theme-nitro .pm-sidebar-profile { background: rgba(16,20,26,.96); border-top-color: rgba(0,229,255,.18); }
.pm-profile-relocated { display: block !important; }
.pm-profile-relocated .pm-user-trigger { width: 100%; justify-content: flex-start; }
.pm-profile-relocated .pm-user-copy { flex: 1 1 auto; text-align: left; }
.pm-profile-relocated .pm-user-chevron { display: inline-block !important; transform: rotate(180deg); }
/* dropdown opens UPWARD from the bottom bar */
.pm-profile-menu-up { top: auto !important; bottom: calc(100% + 8px) !important; }
/* keep the last menu items reachable above the pinned profile bar */
#sidebar_menus { padding-bottom: 70px; }

/* ══════════════════════════════════════════════════════════════════════
   Card-edit permission gating
   • view-only users: no resize handles + no inner-widget drag grips
   • non-admins: no floor-card reorder grip, no Auto-Fit / Reset-Order tools
   (Floors-to-Monitor + Chart View stay available to everyone.)
   ══════════════════════════════════════════════════════════════════════ */
html.pm-view-only .pm-rh,
html.pm-view-only .pm-section-drag-handle { display: none !important; }
html.pm-view-only .pm-inner-section { cursor: default !important; }

/* Auto-Fit / Reset-Order / floor-reorder + the edit affordances are available to
   anyone who can edit (admins AND site users whose can_edit is ON) — only true
   view-only users are blocked. */
html.pm-view-only .pm-card-drag-handle,
html.pm-view-only [data-pm-edit-only] { display: none !important; }

/* Also hide the per-card "Cards" chooser + the Customise View / Auto-Fit toolbar in
   view-only. On a fresh view-only load these are already absent (the toolbar is
   server-gated by @if($pmCanEditCards); the chooser is JS-gated by canEditCards), but
   when an admin REVOKES edit live mid-session the poll flips the classes without a
   reload — these rules make that flip hide the now-defunct edit tools instantly too.
   The Chart-View switch (.pm-dashboard-toolbar__right) + theme toggles stay available. */
html.pm-view-only .pm-floor-cards-control,
html.pm-view-only .pm-floor-cards-menu,
html.pm-view-only #pmCustomiseToggle,
html.pm-view-only #pmWidgetPanel,
html.pm-view-only .pm-drag-hint { display: none !important; }

/* ── Prevent the profile FLASHING in the top nav before it's relocated to the
   sidebar bottom (it lives in .app-header until the JS moves it out). ── */
.app-header .pm-user-trigger { visibility: hidden; }
#pmSidebarProfile .pm-user-trigger { visibility: visible; }

/* ── Gauge KPI boxes in PRO/Normal mode (no neon glow; readable on light/dark) ── */
html:not(.theme-nitro) .pn-gauge-hero--pro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
html:not(.theme-nitro) .pn-kpi-chip {
    background: var(--pm-surface-muted, rgba(0,0,0,.03));
    border: 1px solid var(--pm-border, rgba(0,0,0,.08));
}
html:not(.theme-nitro) .pn-kpi-chip--taken strong { color: var(--pm-occupied); text-shadow: none; }
html:not(.theme-nitro) .pn-kpi-chip--free  strong { color: #16A34A; text-shadow: none; }
html:not(.theme-nitro) .pn-kpi-chip--total strong { color: var(--pm-primary, #738B3B); text-shadow: none; }
html:not(.theme-nitro) .pn-kpi-chip span:last-child { color: var(--pm-text-muted); }

/* ── Keep the speedometer strictly inside its card (never overlap/overflow) ── */
.pm-card-viz-section { overflow: hidden; }
.pm-card-gauge, .pn-gauge-hero { max-width: 100%; min-width: 0; }

/* Chart restore guardrails: old/custom saved layouts must never shrink the
   primary occupancy chart into a one-column strip. */
.pm-floor-cards-wrapper > .pm-card-viz-section {
    min-width: 320px;
    max-width: 100%;
    min-height: 360px;
}
.pm-card-viz-section > [data-chart-type]:not(.pm-hidden),
.pm-card-viz-section .pn-gauge-hero,
.pm-card-viz-section .pm-gauge-container,
.pm-card-viz-section .pm-donut-outer {
    width: 100%;
}
.pm-card-viz-section .pm-card-gauge:not(.pm-hidden) {
    align-self: stretch;
    justify-content: flex-start;
    min-height: 340px;
}
.pm-floor-cards-wrapper > .pm-card-viz-section:has(.pn-gauge-kpis--vehicle) {
    min-width: 300px;
    min-height: 420px;
}
.pm-card-viz-section:has(.pn-gauge-kpis--vehicle) .pm-card-gauge:not(.pm-hidden) {
    min-height: 0;
}
@media (max-width: 420px) {
    .pm-floor-cards-wrapper > .pm-card-viz-section {
        min-width: 0;
    }
    .pm-floor-cards-wrapper > .pm-card-viz-section:has(.pn-gauge-kpis--vehicle) {
        min-width: 0;
    }
}

/* ── Reclaim the wasted top bar on desktop ──
   The hamburger (3-lines) + branding there are replaced by a sidebar arrow, so
   content shifts up. Mobile keeps the bar (it needs the hamburger + branding). */
@media (min-width: 768px) {
    #app_header { display: none !important; }
}
/* Sidebar collapse / expand arrow (on the sidebar edge) */
.pm-sidebar-collapse {
    position: absolute; top: 92px; right: -13px; z-index: 70;
    width: 26px; height: 26px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: var(--pm-surface, #fff); border: 1px solid var(--pm-border, rgba(0,0,0,.12));
    box-shadow: 0 2px 8px rgba(17,17,17,.14); cursor: pointer; color: var(--pm-text-muted);
    transition: background .15s, color .15s, box-shadow .15s;
}
@media (min-width: 768px) { .pm-sidebar-collapse { display: flex; } }
.pm-sidebar-collapse:hover { color: var(--pm-primary); box-shadow: 0 4px 12px rgba(17,17,17,.2); }
.pm-sidebar-collapse iconify-icon { transition: transform .25s ease; }
/* Hamburger is state-agnostic — no 180° flip between collapsed/expanded (a chevron
   needed it, a 3-line menu icon does not). */
.app-wrapper.collapsed .pm-sidebar-collapse iconify-icon { transform: none; }
html.dark:not(.theme-nitro) .pm-sidebar-collapse { background:#1f242c; border-color:rgba(255,255,255,.08); }
html.theme-nitro .pm-sidebar-collapse { background:rgba(16,20,26,.96); border-color:rgba(0,229,255,.30); color:var(--pn-cyan,#00E5FF); }

/* ── Profile dropdown (Dashboard / Logout) opens cleanly ABOVE the sidebar
   profile bar, full width, instead of being mispositioned by Popper. ── */
/* Must be `absolute` (not `relative`): an ID selector outranks the
   `.pm-sidebar-profile` class, so `relative` un-pins the bar to the end of
   the sidebar flow where it gets clipped off-screen (profile vanishes). */
#pmSidebarProfile { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
#pmSidebarProfile .dropdown-menu {
    position: absolute !important;
    inset: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 -8px 28px rgba(17,17,17,.22) !important;
}
#pmSidebarProfile .dropdown-menu li a { display: flex; align-items: center; gap: 8px; padding: 11px 14px; }
html.theme-nitro #pmSidebarProfile .dropdown-menu {
    background: rgba(16,20,26,.98) !important; border: 1px solid rgba(0,229,255,.22) !important;
}

/* ── SS2: keep the sidebar collapsed on HOVER — only the arrow expands it ── */
.app-wrapper.collapsed .sidebar-wrapper:hover { width: 72px !important; }
.app-wrapper.collapsed .sidebar-wrapper:hover .logo-segment a span,
.app-wrapper.collapsed .sidebar-wrapper:hover .logo-segment #sidebar_type,
.app-wrapper.collapsed .sidebar-wrapper:hover .sidebar-menu-title { display: none !important; }
.app-wrapper.collapsed .sidebar-wrapper:hover .navItem span span { visibility: hidden !important; }

/* ── SS1: donut view — center the donut and show KPI boxes below it so there's
   no dead empty space (mirrors the gauge layout). ── */
.pm-card-viz-section .pm-donut-outer {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 2px;
}
.pm-card-viz-section .pm-donut-outer .pm-donut-layout { flex: 0 0 auto; }
.pn-donut-status { text-align: center; margin: 10px 0 10px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.03em; }
html:not(.theme-nitro) .pn-donut-status { color: var(--pm-primary, #738B3B); }
html.theme-nitro .pn-donut-status { color: var(--pn-green, #00FF87); }

/* ── SS5: keep the Occupancy-Level bar SLIM (it was stretching fat inside the
   tall full-width bottom section). Center the meter content; lock the track. ── */
.pm-card-meter { align-content: center; }
.pm-card-meter-track {
    height: 18px !important;
    min-height: 18px;
    max-height: 18px;
    align-self: center;
}

/* ── EECS summary panel: the single floor card + its widget wrapper must fill the
   panel width (mirrors the single-site tweaks the standard dashboard sets inline,
   which the EECS page does not inherit). ── */
.pm-eecs-summary-panel #radarData.pm-dashboard-grid { width: 100%; }
.pm-eecs-summary-panel #radarData.pm-dashboard-grid--single .pm-metric-card {
    grid-template-columns: minmax(0, 1fr);
}
.pm-eecs-summary-panel #radarData.pm-dashboard-grid--single .pm-floor-cards-wrapper {
    grid-column: 1 / -1;
}

/* ── Site footer: now in-flow (position:relative, not fixed) so it never overlaps
   tall content (e.g. the single-screen donut card). Small bottom spacing keeps the
   last card from hugging the footer. Shared footer → every dashboard page, both
   logins. ── */
main .page-content,
main .container-fluid { padding-bottom: 24px !important; }
#footer { margin-top: 8px; }

/* ── Dashboard hero meta: Refresh-State block stacked ABOVE the Live/Offline pill,
   docked to the right, so the banner stays one compact row on BOTH logins. ── */
.pm-dashboard-hero__meta--stack {
    grid-column: 2 / 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
}
.pm-dashboard-hero__meta--stack .pm-toolbar-actions { justify-content: flex-end; }
.pm-dashboard-hero__meta--stack .pm-hero-meta-card { text-align: right; }