/*
 * eTracker additions for the cuba theme (loaded after the template stylesheet).
 * Keep this small and generic: app-specific building blocks only, no page hacks.
 */

/* Sidebar overlay on small screens (the template script creates .bg-overlay; its CSS ships only .bg-overlay1). */
.bg-overlay.active {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 8;
}

/* Brand logos come from the branding pack and can have any aspect ratio. */
.app-header-logo,
.app-sidebar-logo {
    max-height: 40px;
    width: auto;
}

.app-sidebar-icon {
    max-height: 32px;
    width: auto;
}

.app-login-logo {
    max-height: 64px;
    width: auto;
    margin-bottom: 1rem;
}

/* Login card: the branding pack supplies the background image. */
.app-login-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.app-login-footer {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Initials avatar in the header (no user photos are stored). */
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    font-weight: 600;
    color: #fff;
    background-color: var(--theme-default);
}

.app-header-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Map containers used by tracking pages. */
.app-map {
    width: 100%;
    min-height: 420px;
    border-radius: 10px;
}

.app-map-tall {
    min-height: calc(100vh - 260px);
}

/* Compact stat tiles used on dashboards. */
.app-stat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-stat .app-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background-color: rgba(var(--theme-default-rgb), 0.1);
    color: var(--theme-default);
    font-size: 18px;
}

.app-stat .app-stat-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.app-stat .app-stat-label {
    color: #8a8a8a;
    font-size: 13px;
}

.app-stat-icon-sm {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--theme-default-rgb), 0.1);
    color: var(--theme-default);
}

/* Bootstrap pagination (server-rendered lists, DataTables Bootstrap integration) uses the brand colour. */
.pagination {
    --bs-pagination-color: var(--theme-default);
    --bs-pagination-hover-color: var(--theme-default);
    --bs-pagination-focus-color: var(--theme-default);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--theme-default-rgb), 0.25);
    --bs-pagination-active-bg: var(--theme-default);
    --bs-pagination-active-border-color: var(--theme-default);
}

/* Validation summaries stay hidden until they hold errors (server- or client-side); no inline display:none. */
.validation-summary-valid {
    display: none;
}

/* Collapsed sidebar. The template reserves 80px of content margin for the rail and lets the rail size
   itself, which a wide branding logo then overflows onto the page. Pin the rail to the reserved width
   and fit the brand mark inside it; the template's own hover rule still expands it. */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon {
    width: 80px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .logo-icon-wrapper {
    padding: 22px 8px;
    text-align: center;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon .app-sidebar-icon {
    /* A fixed cap, so the mark does not grow when the template expands the rail on hover. */
    max-width: 56px;
    max-height: 28px;
    object-fit: contain;
}

/* While collapsed, the sidebar hides its own toggle together with the logo header, so offer the header's
   toggle instead (the template hides it in this layout). It is absolutely positioned against a zero-width
   logo wrapper, which puts it under the rail, so let it flow inside the header row. Below 992px the
   template already places and shows it, so leave that alone. */
@media (min-width: 992px) {
    /* The sidebar (z-index 9) is its own stacking context, and the collapsed rail expands on hover over
       the header, so lift the whole header above it while the sidebar is collapsed. */
    .page-wrapper.compact-wrapper .page-header.close_icon {
        z-index: 10;
    }

    /* The template swaps the compact mark for the full logo while the rail is hovered; the raised header
       would clip it, and the header already shows the brand, so keep the compact mark. */
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-wrapper {
        display: none;
    }

    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon:hover .logo-icon-wrapper {
        display: block;
    }

    .page-wrapper.compact-wrapper .page-header.close_icon .header-wrapper .toggle-sidebar {
        display: flex;
        /* Above the sidebar (z-index 9): the rail expands on hover and would otherwise swallow the toggle. */
        position: relative;
        z-index: 10;
        align-items: center;
        height: 100%;
        margin-right: 14px;
    }
}