/* App-specific overrides applied on top of the Homer theme CSS. */

/* Remove the default horizontal padding (gutter) on full-width containers. */
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Use a compact 20px horizontal padding on the main content area (overrides the theme's 50px xxl gutter). */
.content-page {
    padding-left: 20px;
    padding-right: 20px;
}

/* Let the footer span full width by cancelling the content-page's 20px horizontal padding.
   (Padding can't be negative, so a negative margin is used.) */
.footer {
    margin-left: -20px;
    margin-right: -20px;
}

/* Remove the theme's right spacing (20px = 1.25rem padding) on the topbar menu. */
.app-topbar .topbar-menu {
    padding-right: 0;
    margin-left: 0;
}

/* When the sidenav is collapsed, also collapse the TOPBAR logo: show the compact
   icon (logo-sm) and hide the full logo with text (logo-lg). The theme only does
   this for the sidenav logo, not the topbar logo. */
html[data-sidenav-size=collapse] .logo-topbar span.logo-lg {
    display: none;
}

/* Shrink the topbar logo container to the collapsed sidenav width (75px) so the
   compact icon aligns with the collapsed sidenav instead of floating in the
   full 210px space. Center the icon the same way a collapsed .side-nav-link does. */
html[data-sidenav-size=collapse] .logo-topbar {
    min-width: var(--ins-sidenav-width-sm);
    width: var(--ins-sidenav-width-sm);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    text-align: center;
}

html[data-sidenav-size=collapse] .logo-topbar span.logo-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

html[data-sidenav-size=collapse] .logo-topbar span.logo-sm img {
    height: 32px;
    width: 32px;
}

/* Center the collapsed sidenav links (icon only) and hide their text/badges,
   matching the theme's intended collapsed behavior. */
html[data-sidenav-size=collapse] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html[data-sidenav-size=collapse] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .menu-text,
html[data-sidenav-size=collapse] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .badge,
html[data-sidenav-size=collapse] .sidenav-menu:not(:hover) .side-nav-item .side-nav-link .menu-arrow {
    display: none;
}

html[data-sidenav-size=collapse] .sidenav-menu:not(:hover) .side-nav-title {
    display: none;
}

.responsive-list__mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .responsive-list__desktop {
        display: none;
    }

    .responsive-list__mobile {
        display: block;
    }

    .responsive-list__mobile .card {
        margin-bottom: .75rem;
    }

    .responsive-list__mobile .card:last-child {
        margin-bottom: 0;
    }

    .responsive-list__mobile .card-body {
        padding: 1rem;
    }

    .responsive-list__mobile .record-label {
        display: block;
        margin-bottom: .15rem;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--bs-secondary-color);
    }

    .responsive-list__mobile .record-value {
        font-weight: 600;
        word-break: break-word;
    }

    .responsive-list__mobile .record-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .responsive-list__mobile .record-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .content-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer {
        margin-left: -12px;
        margin-right: -12px;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > .table,
    table.table {
        display: block;
        width: max-content;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }

    .table-responsive > .table th,
    .table-responsive > .table td,
    table.table th,
    table.table td {
        white-space: nowrap;
        padding: .5rem .65rem;
        font-size: .875rem;
    }

    .table .btn {
        white-space: nowrap;
    }
}