/*
 * CMS responsive overrides.
 * Loaded after style.css (the Dreams POS template, compiled from scss/) so that
 * template updates or recompiles don't wipe these fixes.
 */

/* ---------- Page shell ---------- */

/* style.css clips horizontal overflow on <body>, which made anything wider than
   the viewport unreachable. The off-canvas sidebar is position:fixed, so it
   never needed this. */
body {
    overflow-x: visible;
}

.page-wrapper {
    min-height: 100vh;
}

.page-wrapper .content {
    min-width: 0;
}

/* Collapsed sidebar is 80px wide, but the template forces its scroll panel to
   260px, leaving a white panel over the page content. */
@media (min-width: 992px) {
    .mini-sidebar:not(.expand-menu) .sidebar .slimScrollDiv {
        width: 80px !important;
    }
}

/* ---------- Tables ---------- */

/* Cells stay on one line (style.css), so wide tables scroll inside
   .table-responsive. The last column holds the row actions on every CMS table;
   while the table is scrolled sideways, pin it to the right edge so the actions
   stay reachable. cms-responsive.js toggles .is-scrollable. */
.table-responsive.is-scrollable > .table > thead > tr > :last-child,
.table-responsive.is-scrollable > .table > tbody > tr > :last-child,
.table-responsive.is-scrollable > .dataTables_wrapper > .table > thead > tr > :last-child,
.table-responsive.is-scrollable > .dataTables_wrapper > .table > tbody > tr > :last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: inset 1px 0 0 #E9ECEF, -6px 0 8px -6px rgba(0, 0, 0, 0.15);
}

.table-responsive.is-scrollable > .table > thead > tr > :last-child,
.table-responsive.is-scrollable > .dataTables_wrapper > .table > thead > tr > :last-child {
    background-color: #FAFBFE;
}

.table-responsive.is-scrollable > .table > tbody > tr:hover > :last-child,
.table-responsive.is-scrollable > .dataTables_wrapper > .table > tbody > tr:hover > :last-child {
    background-color: #f5f5f5;
}

/* Colspan rows (empty-state messages, expanded detail rows) aren't action cells. */
.table-responsive.is-scrollable .table tbody tr > td[colspan]:last-child {
    position: static;
    box-shadow: none;
}

/* ---------- DataTables ---------- */

/* Length menu / info / pager are moved out of .table-responsive by
   cms-responsive.js so they stay visible while the table scrolls sideways. */
.dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding-top: 0.75rem;
}

.dt-footer .dataTables_length,
.dt-footer .dataTables_info,
.dt-footer .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 0;
}

.dt-footer .dataTables_info {
    order: 1;
    margin-left: auto;
}

.dt-footer .dataTables_paginate {
    order: 2;
}

.dataTables_wrapper .pagination {
    flex-wrap: wrap;
    margin: 0;
}

.search-set .search-input input[type=search] {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .dt-footer {
        justify-content: center;
    }

    .dt-footer .dataTables_info {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: center;
    }

    .dataTables_wrapper .pagination {
        justify-content: center;
    }
}

/* ---------- Login page ---------- */

.login-wrapper,
.login-wrapper .login-content {
    height: 100vh;
    height: 100dvh;
}

.login-wrapper .login-content .login-userset {
    max-width: 420px;
    margin: 0 auto;
}

.login-wrapper .login-img img {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
}