/* Global transitions for smooth theme switching */
body, .card, .box, .navbar {
    transition: background-color var(--duration-slow) ease, color var(--duration-slow) ease;
}

/* Theme toggle button styling */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: inherit;
}

.theme-toggle .icon {
    transition: transform var(--duration-slow) ease;
}

[data-theme] .navbar-menu,
[data-theme] .navbar-menu.is-active {
    background-color: var(--navbar-bg, var(--surface));
}

[data-theme] .navbar-menu.is-active > .navbar-start > .navbar-item,
[data-theme] .navbar-menu.is-active > .navbar-end > .navbar-item,
[data-theme] .navbar-menu.is-active > .navbar-end > .navbar-item > .navbar-item,
[data-theme] .navbar-menu.is-active .navbar-link {
    color: var(--navbar-item-color, var(--text-primary));
}

[data-theme] .navbar-item.has-dropdown:hover .navbar-link,
[data-theme] .navbar-item.has-dropdown.is-active .navbar-link {
    background-color: var(--navbar-item-hover-bg, var(--surface-alt));
    color: var(--navbar-item-hover-color, var(--text-primary));
}

[data-theme] .navbar-item.has-dropdown:hover .navbar-link .icon,
[data-theme] .navbar-item.has-dropdown:hover .navbar-link span,
[data-theme] .navbar-item.has-dropdown.is-active .navbar-link .icon,
[data-theme] .navbar-item.has-dropdown.is-active .navbar-link span {
    color: inherit;
}

[data-theme] .navbar-link::after {
    border-color: var(--navbar-item-color, var(--text-primary));
}

[data-theme] .navbar-item.has-dropdown:hover .navbar-link::after,
[data-theme] .navbar-item.has-dropdown.is-active .navbar-link::after {
    border-color: var(--navbar-item-hover-color, var(--text-primary));
}

[data-theme] .navbar-dropdown .navbar-user-summary {
    background-color: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    cursor: default;
    pointer-events: none;
}

[data-theme] .navbar-dropdown .navbar-user-summary:hover {
    background-color: var(--surface-alt);
    color: var(--text-primary);
}

[data-theme] .navbar-dropdown .navbar-user-summary .has-text-weight-semibold,
[data-theme] .navbar-dropdown .navbar-user-summary strong,
[data-theme] .navbar-dropdown .navbar-user-summary p {
    color: var(--text-primary) !important;
}

[data-theme] .navbar-dropdown .navbar-user-summary .has-text-grey {
    color: var(--text-secondary) !important;
}

[data-theme] .user-navbar-dropdown:hover .navbar-dropdown .navbar-user-summary,
[data-theme] .user-navbar-dropdown.is-active .navbar-dropdown .navbar-user-summary,
[data-theme] .user-navbar-dropdown.is-hoverable:hover .navbar-dropdown .navbar-user-summary {
    background-color: var(--surface-alt);
    color: var(--text-primary);
}

[data-theme] .user-navbar-dropdown:hover .navbar-dropdown .navbar-user-summary p,
[data-theme] .user-navbar-dropdown:hover .navbar-dropdown .navbar-user-summary .has-text-weight-semibold,
[data-theme] .user-navbar-dropdown.is-active .navbar-dropdown .navbar-user-summary p,
[data-theme] .user-navbar-dropdown.is-active .navbar-dropdown .navbar-user-summary .has-text-weight-semibold,
[data-theme] .user-navbar-dropdown.is-hoverable:hover .navbar-dropdown .navbar-user-summary p,
[data-theme] .user-navbar-dropdown.is-hoverable:hover .navbar-dropdown .navbar-user-summary .has-text-weight-semibold {
    color: var(--text-primary) !important;
}

[data-theme] .user-navbar-dropdown:hover .navbar-dropdown .navbar-user-summary .has-text-grey,
[data-theme] .user-navbar-dropdown.is-active .navbar-dropdown .navbar-user-summary .has-text-grey,
[data-theme] .user-navbar-dropdown.is-hoverable:hover .navbar-dropdown .navbar-user-summary .has-text-grey {
    color: var(--text-secondary) !important;
}

/* localStorage restored value indicator */
.restored-from-cache {
    animation: highlight-restored 1s ease;
    border-color: hsl(204, 86%, 53%);
}

@keyframes highlight-restored {
    0%, 100% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 0 3px rgba(32, 156, 238, 0.3);
    }
}

/* Top menu theme-aware colors */
[data-theme] .topmenu-search-btn {
    background-color: var(--primary, #ED6B19);
    border-color: var(--primary, #ED6B19);
    color: #fff;
}

[data-theme] .topmenu-search-btn:hover {
    filter: brightness(0.92);
    color: #fff;
}

[data-theme] .topmenu-login-btn {
    background-color: var(--warning, #A4AF56);
    border-color: var(--warning, #A4AF56);
    color: #1f1f1f;
}

[data-theme] .topmenu-login-btn:hover {
    filter: brightness(0.95);
    color: #1f1f1f;
}

/* Login page theme-aware styles */
[data-theme] .login-page {
    background-color: var(--background, #ffffff);
}

.login-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
}

[data-theme] .login-submit-button {
    background-color: var(--primary, #ED6B19);
    border-color: var(--primary, #ED6B19);
    color: #fff;
}

[data-theme] .login-submit-button:hover {
    filter: brightness(0.95);
    color: #fff;
}

/* App shell ------------------------------------------------------------- */

[data-theme] .app-shell {

    margin-top: var(--navbar-height);

    min-height: calc(100vh - var(--navbar-height));

}



/*
 * Page content spacing. The layout wraps every page in .container.is-fluid > .section,
 * and Bulma pads both - 3rem 1.5rem on the section plus another 32px each side on the
 * container, which put page titles about 56px in and 48px down. That was noticeably
 * further out than the map page, which sets its own inset, so headings did not line up
 * from page to page.
 *
 * Both now resolve to --page-inset, which the map page uses too.
 *
 * Deliberately unprefixed by [data-theme]: at (0,2,0) this ties with the map page's
 * .section:has(> .vehicle-map-page) rule, and pages/ is imported after base/, so the
 * map page still wins and keeps its full-bleed layout. Adding the prefix would raise
 * this to (0,3,0) and silently break that.
 */
.app-shell .container.is-fluid {
    padding-left: 0;
    padding-right: 0;
}

.app-shell .section {
    padding: var(--page-inset) var(--page-inset) var(--space-6);
}

[data-theme] .sidebar-shell {
    border: none;
    box-shadow: none;
    background: transparent;
}

[data-theme] .navbar-logout-form {
    padding: 0;
}

[data-theme] .navbar-logout-button {
    border: none;
    background: none;
    width: 100%;
}

/* Theme toggle icons. The active theme decides which one shows, so no JS
   needs to touch inline display styles. */

[data-theme] .theme-toggle .theme-icon {
    display: none;
}

[data-theme="light-brand"] .theme-toggle .theme-icon-light-brand,
[data-theme="dark-brand"] .theme-toggle .theme-icon-dark-brand,
[data-theme="dark-brand-orange"] .theme-toggle .theme-icon-dark-brand-orange,
[data-theme="dark-brand-purple"] .theme-toggle .theme-icon-dark-brand-purple {
    display: inline;
}

/* Sidebar. Below the tablet breakpoint it is an overlay the burger opens,
   which used to be done by mutating inline styles from JS. */

@media (max-width: 768px) {
    [data-theme] #sidebar {
        display: none;
    }

    [data-theme] #sidebar.is-open {
        display: block;
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        z-index: var(--z-modal);
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
    }
}