/* ==========================================================================
   layout/app.css — application shell
   Pages render: .sidebar (fixed rail) + .main-content. The shell owns the
   offsets so 40+ existing views upgrade without markup changes. The topbar
   is rendered by the layout and offsets .main-content globally.
   ========================================================================== */

/* ---- Sidebar column → fixed rail (overrides col-md-3/col-lg-2) ---- */
.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--crm-sidebar-width) !important;
    max-width: var(--crm-sidebar-width) !important;
    flex: 0 0 var(--crm-sidebar-width) !important;
    z-index: 1035;
    background: var(--crm-sidebar-bg) !important;
    transition: width var(--crm-normal) var(--crm-ease), transform var(--crm-normal) var(--crm-ease);
}

body.sidebar-collapsed .sidebar {
    width: var(--crm-sidebar-width-collapsed) !important;
    max-width: var(--crm-sidebar-width-collapsed) !important;
}

/* ---- Main column ---- */
.main-content {
    margin-left: var(--crm-sidebar-width) !important;
    width: calc(100% - var(--crm-sidebar-width)) !important;
    max-width: calc(100% - var(--crm-sidebar-width)) !important;
    flex: 1 1 auto !important;
    min-height: 100vh;
    padding-top: var(--crm-topbar-height);
    transition: margin-left var(--crm-normal) var(--crm-ease), width var(--crm-normal) var(--crm-ease);
}

body.sidebar-collapsed .main-content {
    margin-left: var(--crm-sidebar-width-collapsed) !important;
    width: calc(100% - var(--crm-sidebar-width-collapsed)) !important;
    max-width: calc(100% - var(--crm-sidebar-width-collapsed)) !important;
}

/* Pages without the app shell (public views) get no offsets */
body:not(:has(.sidebar)) .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0;
}
body:not(:has(.sidebar)) .app-topbar { display: none !important; }

/* ---- Pagination ---- */
.pagination { --bs-pagination-font-size: var(--crm-fs-sm); gap: 2px; }
.pagination .page-link {
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-text-secondary);
    padding: 0.3125rem 0.625rem;
    background: transparent;
    transition: background-color var(--crm-fast) var(--crm-ease), color var(--crm-fast) var(--crm-ease);
}
.pagination .page-link:hover { background: var(--crm-surface-sunken); color: var(--crm-ink); }
.pagination .page-item.active .page-link {
    background: var(--crm-ink);
    border-color: var(--crm-ink);
    color: #fff;
}
.pagination .page-item.disabled .page-link { color: var(--crm-text-faint); background: transparent; }

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    .sidebar { transform: translateX(-100%); width: var(--crm-sidebar-width) !important; }
    body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--crm-shadow-lg); }
    body.sidebar-collapsed .sidebar { width: var(--crm-sidebar-width) !important; max-width: var(--crm-sidebar-width) !important; }
    .main-content,
    body.sidebar-collapsed .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}