/* ============================================================================
 * Backoffice — Compact density + full-width layout
 * ----------------------------------------------------------------------------
 * Goal: stretch CRUD list pages across the full viewport (no centered narrow
 * column) and tighten row/cell padding so 50% more content fits per fold.
 * Touches Backpack's Tabler theme classes; intentionally uses !important to
 * override theme defaults without forking the vendor stylesheet.
 * ========================================================================== */

/* 1 — Fluid management-panel layout.
   Backpack v6 Tabler ships `main.container-xl` with `max-width: 1320px`,
   which leaves ~600px of dead horizontal space on every wide monitor and
   forces the operator to drag CRUD list columns side-to-side. This is a
   management panel — it should spread.

   Measured against the actual DOM via chrome-devtools at viewport 1928px:
   `.page-body > main.container-xl` was capping at 1320px and the inner
   `.container-fluid` inherited that cap. Removing the cap on the outer
   container lets every CRUD list (and dashboard widgets) breathe. */
main.container-xl,
.page-body .container-xl,
.page-body > main {
    max-width: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 2 — Tighter top breathing-room above the page header. */
.page-body {
    padding-top: 0.5rem !important;
}

/* 3 — Breadcrumbs: compact, lighter weight, less vertical bleed. */
.breadcrumb,
ol.breadcrumb,
nav[aria-label="breadcrumb"] .breadcrumb {
    margin: 0 0 0.35rem 0 !important;
    padding: 0.15rem 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
}

/* 4 — Page H1: smaller, less margin. */
.page-body h1,
.page-header h1,
section.header-content h1 {
    font-size: 1.4rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.25 !important;
}

/* 5 — Tables: reduce cell padding for density. Apply to Backpack's CRUD
   list table AND any vanilla .table that backoffice uses for sub-grids. */
.crud-list table th,
.crud-list table td,
table.dataTable th,
table.dataTable td,
.crud-list .table > :not(caption) > * > * {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    vertical-align: middle !important;
}

/* 6 — Sticky thead: removed for now. The topbar is not yet a proper sticky
   element, so applying `top: 57px` to thead th was pushing the headers
   57px down from the table's natural origin regardless of scroll position.
   Result: column headers visually overlapped the first data row. Will
   revisit once the custom topbar partial lands (it will be `position: fixed`
   with a known height we can offset from).

   Backpack's CRUD list also repeats the table headers as a <tfoot>. We
   keep it visible until sticky lands — without sticky, the duplicate
   bottom header is the only way to see column names after a long scroll. */

/* 8 — Action buttons inside table cells: smaller, less ink. */
.crud-list table td .btn,
.crud-list table td .btn-sm,
table.dataTable td .btn,
table.dataTable td .btn-sm {
    padding: 0.18rem 0.5rem !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
}

/* 9 — Filters bar: tighter row, smaller chips. */
.crud-list .filters,
.crud-list .crud-filters-bar,
.crud-list #datatable_filters_bar {
    padding: 0.3rem 0 !important;
    margin-bottom: 0.35rem !important;
    gap: 0.4rem !important;
}

/* 10 — Organization-context widget: tighter padding so the chip doesn't
   eat a third of the page above the actual list. */
.organization-context-widget,
.widget.organization-context,
[data-widget-type="organization-context"] {
    padding: 0.6rem 0.85rem !important;
    margin-bottom: 0.6rem !important;
}

/* 11 — Pagination row: single dense line. */
.crud-list .dataTables_paginate,
.crud-list .pagination {
    margin: 0.4rem 0 !important;
}
.crud-list .dataTables_length label,
.crud-list .dataTables_info {
    font-size: 0.82rem !important;
    margin: 0 !important;
}

/* 12 — Body font: Tabler default is already 14px; no override needed. */

/* 13 — Form rows tighter (manage page + CRUD edit/create). */
.page-body .form-group,
.page-body .mb-3,
.page-body fieldset .form-group {
    margin-bottom: 0.6rem !important;
}

/* 15 — Manage-Organization form polish.
   The Settings tab renders a single-column form, so on a 1900px-wide panel
   each text input stretched the full width and the page felt empty. Cap
   inputs at ~720px, pack the Operational Settings switches into two
   columns, and give the section <h4> headings a visible separator so the
   form reads as discrete sections rather than a vertical wall.
   Scoped to `main form` so it doesn't bleed into CRUD edit/create forms
   (Backpack already handles those with col-md-X wrappers). */
main form input[type="text"],
main form input[type="email"],
main form input[type="number"],
main form input[type="password"],
main form input[type="url"],
main form input[type="search"],
main form input[type="tel"],
main form input:not([type]),
main form select,
main form textarea {
    max-width: 720px;
}

main form .form-check.form-switch {
    display: inline-flex !important;
    align-items: flex-start;
    width: calc(50% - 0.75rem);
    margin-right: 0.5rem;
    vertical-align: top;
    box-sizing: border-box;
}
main form .form-check.form-switch + .form-check.form-switch {
    margin-left: 0;
}

main form h4 {
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--cui-border-color, rgba(255, 255, 255, .1));
    font-size: 1.05rem;
    font-weight: 600;
}
main form h4:first-of-type {
    margin-top: 0;
}

/* 17 — Full-width topbar with brand left / nav center / user actions right.
   Backpack v6 Tabler ships the header navbar with a `.container-xl` inner
   wrapper that caps at 1320px, exactly like the page body did. The header
   itself stretches to 1913px on a 1928px viewport but its content was
   crammed into a 1320px strip in the center, leaving the left and right
   shoulders empty. Drop the cap, then realign:
   - The first UL holds the brand (`li.nav-brand`) plus the main nav links.
     Grow it to fill the middle space and center its contents.
   - Pin the brand to the left edge with `margin-right: auto` so it stays
     against the page padding while the nav-items center naturally.
   - The trailing UL (theme toggle + notifications + user dropdown) sits
     at the very right by virtue of the container-xl being `display: flex`
     and the first UL absorbing all remaining width. */
header .navbar > .container-xl,
header .navbar > .container-fluid {
    max-width: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Promote container to positioned so the brand + user-actions can be
   absolute-pinned to its edges without escaping. */
header .navbar > .container-xl {
    position: relative;
}

/* First UL takes the FULL container width — once the brand is lifted out
   of flow, justify-content: center aligns nav items to viewport midpoint
   instead of "midpoint of remaining-after-brand space". */
header .navbar > .container-xl > ul.navbar-nav:first-child {
    flex: 1 1 100%;
    justify-content: center;
}

/* Brand pinned to the LEFT edge, vertical center via auto top/bottom. */
header .navbar > .container-xl > ul.navbar-nav:first-child > li.nav-brand {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

/* User-actions UL pinned to the RIGHT edge, same pattern. */
header .navbar > .container-xl > ul:last-child {
    position: absolute;
    right: 1rem;
    top: 0;
    bottom: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

/* 16 — Manage page Members/Integrations tab tables and sub-cards: a hair
   tighter than the global card override so the multi-card stack reads as
   a single management dashboard. */
main .tab-content > .tab-pane .card {
    margin-bottom: 0.75rem !important;
}

/* 14 — Card spacing trimmed without losing the grouping cue. */
.page-body .card {
    margin-bottom: 0.85rem !important;
}
.page-body .card-body {
    padding: 0.85rem 1rem !important;
}
.page-body .card-header {
    padding: 0.6rem 1rem !important;
}