:root {
    --falcon-gutter-x: 2rem;
}

/* create a separate stacking context for the page */
/* main#top {
    position: relative;
    z-index: 0;
} */

h5 {
    font-weight: 600;
}

.card-header,
.card-body {
    padding: 1rem;
}

/* Mirror all theme.min.css "+.content" rules with "~" for when offcanvas sits between nav and .content */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 15.625rem;
    }

    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        position: sticky;
        top: 0;
    }

    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top .navbar-toggler,
    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top .navbar-brand {
        display: none;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 3.125rem;
    }

    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        padding-left: 13.5rem;
    }
}

.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    max-width: 1900px;
}

.table {
    color: var(--falcon-body-color);
}

.table .table-striped {
    color: var(--falcon-body-color);
}

.table-striped>tbody>tr:nth-of-type(2n)>* {
    color: var(--falcon-body-color);
}

/* -------------------------------------------------------------------------- */
/*                          Responsive / Mobile Fixes                         */
/* -------------------------------------------------------------------------- */

/* Mobile nav toggle button in top bar */
.mobile-nav-toggle {
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--falcon-navbar-light-color, #5e6e82);
}

/* Offcanvas mobile navigation drawer */
#mobileNavDrawer {
    max-width: 16rem;
}

#mobileNavDrawer .mobile-nav-list {
    padding: 0.5rem 0;
}

#mobileNavDrawer .mobile-nav-list .nav-link {
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    color: var(--falcon-navbar-light-color, #5e6e82);
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav-link:hover {
    color: var(--falcon-navbar-light-hover-color, #344050);
    background-color: var(--falcon-navbar-light-hover-bg, #e3e6ea);
}

#mobileNavDrawer .mobile-nav-list .nav-link-icon {
    width: 1.5rem;
    min-width: 1.5rem;
    display: inline-flex;
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav-link-text {
    font-size: 0.875rem;
}

#mobileNavDrawer .mobile-nav-list .nav.collapse {
    flex-direction: column;
}

#mobileNavDrawer .mobile-nav-list .nav .nav-link {
    padding-left: 2.5rem;
}

/* ---- Small-screen layout fixes (below lg / 992px) ---- */
@media (max-width: 991.98px) {
    /* Remove container gutter and content padding on mobile for edge-to-edge layout */
    :root {
        --falcon-gutter-x: 0;
    }

    .content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Prevent long text (UUIDs, fingerprints) from overflowing tables */
    .table td {
        word-break: break-all;
    }

    /* Remove left margin on content that desktop sidebar creates */
    .navbar-vertical.navbar-expand-lg + .content,
    .navbar-vertical.navbar-expand-lg ~ .content {
        margin-left: 0 !important;
    }

    /* Top navbar: keep it non-sticky so it scrolls with the page */
    .navbar-vertical.navbar-expand-lg + .content .navbar-top,
    .navbar-vertical.navbar-expand-lg ~ .content .navbar-top {
        position: relative;
    }

    /* Ensure the main container does not overflow */
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Cards should not overflow their container */
    .card-body {
        overflow-x: auto;
    }

    /* DTV Smart Table: contain toolbar within card */
    .p-menubar.p-component {
        flex-wrap: wrap !important;
        overflow: hidden;
    }

    .p-menubar .p-menubar-start,
    .p-menubar .p-menubar-end {
        flex-wrap: wrap !important;
        max-width: 100%;
    }

    .p-menubar .p-menubar-start > div,
    .p-menubar .p-menubar-end > div {
        flex-wrap: wrap !important;
    }

    /* DTV table container: allow horizontal scroll */
    .p-datatable-table-container {
        overflow-x: auto;
    }

    /* Tab content padding reduction on mobile */
    .tab-content {
        padding: 0.5rem !important;
    }
}

/* ---- Very small screens (phones, below 576px) ---- */
@media (max-width: 575.98px) {
    .card-body {
        padding: 0.75rem;
    }

    /* Chart titles */
    .card-title {
        font-size: 0.9rem;
    }
}