/*
 * CCESS dashboard — integration layer for public/new-panel-assets.
 *
 * The supplied theme ships no example HTML and two competing brand layers, so a
 * thin integration file is unavoidable. It does four jobs and nothing else:
 *
 *   1. Unifies both brand layers onto ONE palette by re-pointing their custom
 *      properties. crm-dashboard.css drives 25 rules off four --crm-* variables
 *      and global.css drives its own off four --cms-* ones; left alone the two
 *      sets of !important primary rules disagree on every button and page link.
 *
 *   2. Supplies the RTL shell. app-rtl.css is Bootstrap's RTL *grid* only — it has
 *      no shell rules at all — so the fixed sidebar and the .main-content offset
 *      would otherwise stay pinned to the left in Arabic.
 *
 *   3. Styles what the shell markup needs but the theme never defines: .nav-heading
 *      (the theme only toggles its display), the sidebar scroll region, and the
 *      sidebar/topnav brand divider.
 *
 *   4. Accessibility the theme omits: a visible focus ring, a skip link, and a
 *      reduced-motion escape hatch.
 *
 * PALETTE (Phase B2 — the approved CCESS dashboard palette).
 *
 * Primary / accent : #E94E3D  (exact, as specified — never altered)
 * Shell chrome     : #F4F4F4  (sidebar, topnav, login background)
 *
 * The B2 palette replaces B1's navy + gold entirely. Both requested colours are
 * preserved exactly as backgrounds; only the FOREGROUNDS are chosen, because the
 * requested pair does not carry text safely on its own:
 *
 *   #E94E3D + #FFFFFF = 3.74:1  FAILS WCAG AA for normal text
 *   #E94E3D + #141414 = 4.93:1  PASSES            <- what is used
 *   #F4F4F4 + #1F1F1F = 14.99:1 PASSES
 *
 * Two consequences worth knowing when editing this file:
 *
 *   1. Hover on a coral surface must get LIGHTER, not darker. Darkening the coral
 *      lowers its contrast against the dark foreground (#D43F2E + #141414 = 3.99:1,
 *      which fails), so --ccess-primary-hover is a lighter tint at 5.78:1.
 *
 *   2. Coral cannot be used as TEXT on a light background: #E94E3D on white is
 *      3.74:1. --ccess-primary-readable (#C63A2A, 5.20:1 on white / 4.73:1 on the
 *      shell) is the token for links, .text-primary and icon accents. The exact
 *      #E94E3D is still what every accent BACKGROUND uses.
 *
 * Bootstrap's own .text-muted (#6C757D) is only 4.26:1 on #F4F4F4, so it is
 * re-pointed too — otherwise the shell would fail on every secondary label.
 */

:root {
    /* ---- CCESS canonical tokens ---- */
    --ccess-primary: #E94E3D;
    --ccess-primary-hover: #ED6555;
    --ccess-primary-active: #E74B3A;
    --ccess-primary-readable: #C63A2A;
    --ccess-primary-alpha: rgba(233, 78, 61, 0.10);
    --ccess-on-primary: #141414;

    --ccess-shell-bg: #F4F4F4;
    --ccess-surface: #FFFFFF;

    /*
     * Sidebar scrollbar thumb (Phase D0, Part AH). A neutral medium grey that reads
     * against the --ccess-shell-bg sidebar without dominating it; it becomes
     * --ccess-primary on hover.
     */
    --ccess-scrollbar-thumb: #B9BDC2;
    --ccess-text: #1F1F1F;
    --ccess-text-muted: #5C636A;
    --ccess-border: #DCDCDC;
    --ccess-table-head-bg: #ECECEC;

    /*
     * ---- Vendor variables, re-pointed rather than edited ----
     *
     * global.css drives its rules off --cms-* and crm-dashboard.css off --crm-*.
     * Re-pointing them here is what keeps public/new-panel-assets untouched.
     *
     * --cms-color-dark is NOT set to the shell grey even though global.css uses it
     * as the sidebar/topnav background. It is also the foreground on coral buttons,
     * the .cms-page-title ink and the table-head text colour, so setting it to
     * #F4F4F4 would make four rules illegible. It stays dark ink, and the two chrome
     * backgrounds that genuinely need #F4F4F4 are overridden explicitly below.
     */
    --cms-color-dark: var(--ccess-on-primary);
    --cms-color-primary: var(--ccess-primary);
    --cms-color-primary-hover: var(--ccess-primary-hover);
    --cms-color-primary-readable: var(--ccess-primary-readable);

    --crm-primary: var(--ccess-primary-readable);
    --crm-primary-dark: #A82F21;
    --crm-primary-light: var(--ccess-primary-hover);
    --crm-primary-alpha: var(--ccess-primary-alpha);
}

/* ============================================================ B2 CHROME ===
 * global.css hardcodes light-on-dark foregrounds for the sidebar and topnav
 * (`color: #f1f1f1 !important`, `color: #fff !important`) because it was written
 * for a near-black chrome. Those are literals, not variables, so re-pointing the
 * palette is not enough — on the #F4F4F4 shell they would be invisible. These
 * overrides are the minimum needed to invert that, and they live here rather than
 * in the vendor file.
 */
.cms-sidebar,
.cms-topnav {
    background: var(--ccess-shell-bg) !important;
    border-color: var(--ccess-border) !important;
}

.cms-sidebar .text-muted,
.cms-sidebar .toggle-btn,
.cms-sidebar .navbar-nav .nav-link,
.cms-sidebar .nav-heading,
.cms-topnav .nav-link,
.cms-topnav .navbar-toggler,
.cms-topnav .navbar-toggler-icon,
.cms-topnav {
    color: var(--ccess-text) !important;
}

.cms-sidebar .navbar-brand,
.cms-sidebar .navbar-brand:hover,
.cms-sidebar .navbar-brand:focus {
    color: var(--ccess-text);
}

/* Icons carry the accent, but as a readable tint on a light surface. */
.cms-sidebar .navbar-nav .nav-link i {
    color: var(--ccess-primary-readable) !important;
}

.cms-sidebar .navbar-nav .nav-link:hover {
    color: var(--ccess-text) !important;
    background: var(--ccess-primary-alpha) !important;
}

/* Active item: the exact requested coral, with the AA-passing dark foreground. */
.cms-sidebar .navbar-nav .nav-item.active > .nav-link,
.cms-sidebar .navbar-nav .nav-item.active > .nav-link:hover {
    color: var(--ccess-on-primary) !important;
    background: var(--ccess-primary) !important;
}

.cms-sidebar .navbar-nav .nav-item.active > .nav-link i {
    color: var(--ccess-on-primary) !important;
}

.cms-sidebar .navbar-brand,
.cms-topnav {
    border-bottom: 1px solid var(--ccess-border);
}

.cms-sidebar .navbar-brand {
    border-bottom-color: var(--ccess-border);
}

/* The shell itself, so the light chrome does not float on the theme's default. */
body.dashboard-page {
    background: var(--ccess-shell-bg);
    color: var(--ccess-text);
}

/*
 * Bootstrap's muted grey fails AA on the new shell background. Scoped to the
 * dashboard so nothing outside it is affected.
 */
.dashboard-page .text-muted,
.auth-page .text-muted {
    color: var(--ccess-text-muted) !important;
}

/* ----------------------------------------- vendor literals, neutralised ---
 * Re-pointing the custom properties covers most of the vendor theme, but three
 * loaded files also bake the old brand in as raw literals, which no variable can
 * reach. Each one below is a specific literal that would otherwise still render
 * gold or navy. Listed with its source so the list stays auditable.
 */

/* global.css:280 — form focus ring is a hardcoded gold glow. */
.dashboard-page .form-control:focus,
.dashboard-page .custom-select:focus,
.auth-page .form-control:focus,
.form-control:focus {
    border-color: var(--ccess-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--ccess-primary-alpha) !important;
}

/* global.css:288 — headings are forced to --cms-color-dark, i.e. near-black ink.
 * Correct for body copy, but the page title reads better as the shell ink. */
.dashboard-page h1,
.dashboard-page h2,
.dashboard-page h3,
.dashboard-page h4,
.dashboard-page h5,
.dashboard-page h6,
.dashboard-page strong,
.cms-page-title {
    color: var(--ccess-text) !important;
}

/*
 * sweetalert2-custom.css:118-152 — the delete dialog's confirm button, its hover
 * and focus rings, the cancel button and the warning icon are all hardcoded gold
 * and #1e1e1e. Without these the confirmation dialog would be the last gold
 * surface in the dashboard.
 */
.ahcl-swal-confirm {
    background-color: var(--ccess-primary) !important;
    color: var(--ccess-on-primary) !important;
}

.ahcl-swal-confirm:hover {
    background-color: var(--ccess-primary-hover) !important;
    box-shadow: 0 6px 20px var(--ccess-primary-alpha) !important;
}

.ahcl-swal-confirm:focus {
    box-shadow: 0 0 0 3px var(--ccess-primary-alpha) !important;
}

.ahcl-swal-cancel {
    background-color: #E9ECEF !important;
    color: var(--ccess-text) !important;
}

.ahcl-swal-cancel:hover {
    background-color: #DEE2E6 !important;
    box-shadow: none !important;
}

.ahcl-swal-cancel:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
}

/*
 * delete-confirmation.js:36 passes iconColor: '#d1a52a', which SweetAlert applies
 * as an INLINE style on the icon — so this needs !important to win.
 */
.swal2-icon.swal2-warning,
.swal2-icon.swal2-warning.swal2-modern-icon {
    border-color: var(--ccess-primary) !important;
    color: var(--ccess-primary-readable) !important;
}

.swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--ccess-primary-readable) !important;
}

/* crm-dashboard.css:94,158,235 — navy-tinted shadows and the toggle hover. */
.stat-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

.crm-page-progress {
    background: linear-gradient(90deg, var(--ccess-primary), var(--ccess-primary-hover)) !important;
    box-shadow: 0 0 12px var(--ccess-primary-alpha);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: var(--ccess-primary-alpha);
    border-color: var(--ccess-primary);
    color: var(--ccess-primary-readable);
}

/*
 * app-light.css:143 / 1818+ — the theme's own default blue (#1b68ff) still drives
 * bare links and the sidebar active marker bar.
 */
.dashboard-page a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand),
.auth-page a:not(.btn) {
    color: var(--ccess-primary-readable);
}

.vertical .sidebar-left .navbar-nav > .nav-item.active:after,
.vertical.hover .sidebar-left .navbar-nav > .nav-item.active:after,
.narrow.open .sidebar-left .navbar-nav > .nav-item.active:after,
.cms-sidebar .navbar-nav .nav-item.active::after {
    background-color: var(--ccess-primary) !important;
}

/* Pagination: crm-dashboard.css owns .page-link, global.css the active state. */
.dashboard-page .page-item.active .page-link,
.dashboard-page .page-item.active .page-link:hover,
.badge-warning {
    color: var(--ccess-on-primary) !important;
    background: var(--ccess-primary) !important;
    border-color: var(--ccess-primary) !important;
}

.dashboard-page .page-link {
    color: var(--ccess-primary-readable);
}

/* Cards and inputs sit on the shell, so their borders need the neutral token. */
.dashboard-page .card,
.auth-page .card {
    border-color: var(--ccess-border);
}

/* ------------------------------------------------------------------ shell ---
 * The sidebar is position:fixed with an explicit left:0, and .main-content /
 * .topnav carry a matching margin-left. All three have to be mirrored for RTL.
 */
html[dir="rtl"] .vertical .sidebar-left,
html[dir="rtl"] .vertical.hover .sidebar-left,
html[dir="rtl"] .narrow.open .sidebar-left {
    left: auto;
    right: 0;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.05);
}

html[dir="rtl"] .vertical .topnav,
html[dir="rtl"] .vertical .main-content,
html[dir="rtl"] .vertical.hover .topnav,
html[dir="rtl"] .vertical.hover .main-content,
html[dir="rtl"] .narrow.open .topnav,
html[dir="rtl"] .narrow.open .main-content {
    margin-left: 0;
    margin-right: 16rem;
}

html[dir="rtl"] .vertical.collapsed .main-content,
html[dir="rtl"] .vertical.collapsed .topnav,
html[dir="rtl"] .vertical.narrow .main-content,
html[dir="rtl"] .vertical.narrow .topnav {
    margin-left: 0;
    margin-right: 5rem;
}

/* The active-item marker bar sits at left:-1rem in LTR. */
html[dir="rtl"] .vertical .sidebar-left .navbar-nav > .nav-item.active:after,
html[dir="rtl"] .vertical.hover .sidebar-left .navbar-nav > .nav-item.active:after,
html[dir="rtl"] .narrow.open .sidebar-left .navbar-nav > .nav-item.active:after {
    left: auto;
    right: -1rem;
}

/* Mirror of the theme's own mobile block, where the sidebar collapses to zero
 * width and .collapsed re-opens it as an overlay. */
@media (max-width: 767.98px) {
    html[dir="rtl"] .vertical .topnav,
    html[dir="rtl"] .vertical .main-content,
    html[dir="rtl"] .vertical.hover .topnav,
    html[dir="rtl"] .vertical.hover .main-content,
    html[dir="rtl"] .vertical.narrow .topnav,
    html[dir="rtl"] .vertical.narrow .main-content {
        margin-right: 0;
    }

    html[dir="rtl"] .vertical.collapsed .topnav,
    html[dir="rtl"] .vertical.collapsed .main-content,
    html[dir="rtl"] .vertical.narrow.open .topnav,
    html[dir="rtl"] .vertical.narrow.open .main-content {
        margin-right: 16rem;
    }
}

/* ---------------------------------------------------------------- sidebar ---
 * .nav-heading only ever gets `display` toggled by the theme, so the group
 * labels need their own type treatment.
 */
.sidebar-left .nav-heading {
    padding: 1.1rem 1rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cms-sidebar .nav-heading {
    color: var(--ccess-text-muted);
}

/* `gap` rather than a Bootstrap ml-* utility, so the icon/label spacing mirrors
 * itself in RTL instead of collapsing onto the wrong side. */
.sidebar-left .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

/* Icon column stays a fixed width so labels line up across every group. */
.sidebar-left .navbar-nav .nav-link > .fe {
    flex: 0 0 1.35rem;
    font-size: 1rem;
    text-align: center;
}

.sidebar-left .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid var(--ccess-border);
}



.sidebar-left .navbar-brand img {
    height: 34px;
    width: auto;
}

.sidebar-left .brand-text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

/* Collapsed rail hides the wordmark but keeps the logo centred. */
.vertical.collapsed .sidebar-left .brand-text,
.vertical.narrow .sidebar-left .brand-text {
    display: none;
}

.vertical.collapsed .sidebar-left .navbar-brand,
.vertical.narrow .sidebar-left .navbar-brand {
    justify-content: center;
}

@media (max-width: 767.98px) {
    .vertical.collapsed .sidebar-left .brand-text,
    .vertical.narrow.open .sidebar-left .brand-text {
        display: inline-block;
    }

    .vertical.collapsed .sidebar-left .navbar-brand,
    .vertical.narrow.open .sidebar-left .navbar-brand {
        justify-content: flex-start;
    }
}

/* ----------------------------------------------------------------- topnav --- */
.cms-topnav {
    min-height: 3.5rem;
}

.cms-topnav .dropdown-menu {
    color: var(--ccess-text);
}

.cms-topnav .nav {
    align-items: center;
    gap: 0.5rem;
}

/*
 * Logical spacing, not Bootstrap's physical margin utilities. app-rtl.css covers
 * only the grid, so a margin-right would stay on the right in Arabic.
 */
.cms-topnav .nav-link.d-flex {
    gap: 0.5rem;
}

.dropdown-item > .fe {
    margin-inline-end: 0.5rem;
}

/* ---------------------------------------------------------------- avatars ---
 * Used by the topnav trigger and by the inbox list on the dashboard home, so it is
 * a standalone class rather than a topnav-scoped one.
 */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cms-color-dark);
    background: var(--cms-color-primary);
}

.avatar-initials-lg {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.avatar-initials-xl {
    width: 120px;
    height: 120px;
    font-size: 2.75rem;
}

/* ------------------------------------------------------------- stat cards ---
 * The theme animates .stat-card-cta in from translateX(-4px), which points the
 * wrong way once the page is mirrored.
 */
html[dir="rtl"] .stat-card-cta {
    transform: translateX(4px);
}

html[dir="rtl"] .stat-card-link:hover .stat-card-cta,
html[dir="rtl"] .stat-card-link:focus-visible .stat-card-cta {
    transform: translateX(0);
}

/* Keep the numbers on one optical baseline across a row of tiles. */
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}

/* Reserves room between the number block and the icon without a physical padding. */
.stat-card .stat-text {
    min-width: 0;
    padding-inline-end: 0.5rem;
}

/* -------------------------------------------------------- language switch ---
 * The topnav toggle. Styled as a quiet control rather than a button: it sits beside
 * the user menu and must not compete with the page's primary action.
 */
.cms-locale-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ccess-text) !important;
    text-decoration: none !important;
    border-radius: 6px;
}

.cms-locale-switch:hover,
.cms-locale-switch:focus {
    background: var(--ccess-primary-alpha);
    color: var(--ccess-primary-readable) !important;
}

/* ------------------------------------------------------- bilingual forms ---
 * Phase B2.1 Part F: every *_ar / *_en pair is grouped into two language cards
 * rather than interleaved column-by-column.
 *
 * Cards rather than JS tabs, deliberately:
 *   - a validation error on an English field can never be hidden behind an
 *     inactive tab, which is the failure mode that makes a form feel broken
 *   - both languages are visible at once, so an editor can compare them
 *   - no extra JS, so nothing to break and nothing to load
 *
 * The accent edge is on the INLINE start, so it sits left in LTR and right in RTL
 * without a second rule.
 */
.lang-card {
    border: 1px solid var(--ccess-border);
    border-radius: 8px;
    height: 100%;
}

.lang-card > .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--ccess-shell-bg);
    border-bottom: 1px solid var(--ccess-border);
    border-inline-start: 3px solid var(--ccess-primary);
}

.lang-card > .card-body {
    padding: 1rem;
}

/* The language name is written in its own language, so it must also be laid out
 * in its own direction regardless of the surrounding interface. */
.lang-card-ar > .card-header .lang-name {
    direction: rtl;
}

.lang-card-en > .card-header .lang-name {
    direction: ltr;
}

.lang-card .lang-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ccess-text);
}

.lang-card .lang-code {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ccess-text-muted);
}

/* An error anywhere inside a language card is flagged on the card itself, so it is
 * visible without scrolling the whole form. */
/* margin-inline-start, not Bootstrap's ml-auto, so the icon stays on the trailing
 * edge in RTL too. */
.lang-card-alert {
    margin-inline-start: auto;
}

.lang-card.has-error > .card-header {
    border-inline-start-color: #dc3545;
}

.lang-card.has-error .lang-name {
    color: #b02a37;
}

/*
 * Inputs keep their own direction even when the interface direction differs — an
 * Arabic field is RTL on an English dashboard and vice versa. Technical values stay
 * LTR in both: an email, URL, slug or phone number is not prose.
 */
input[dir="ltr"],
textarea[dir="ltr"] {
    text-align: left;
}

input[dir="rtl"],
textarea[dir="rtl"] {
    text-align: right;
}

input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[name="slug"],
input[name$="_url"],
input[name="icon"] {
    direction: ltr;
    text-align: left;
}

/* ----------------------------------------------------------- trash tabs ---
 * The Active / Trash switch on every deletable module's index.
 *
 * global.css sets `.nav-tabs .nav-link { margin-right: 0 !important;
 * margin-left: 1.7rem !important }`, a physical RTL-oriented gap that leaves a
 * stray indent in LTR. Neutralised here and replaced with a logical gap on the
 * list, so the tabs sit correctly in both directions.
 */
.cms-trash-tabs {
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ccess-border);
}

.cms-trash-tabs .nav-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ccess-text-muted);
    border: 1px solid transparent;
    border-bottom: none;
}

.cms-trash-tabs .nav-link:hover {
    color: var(--ccess-text);
    background: var(--ccess-primary-alpha);
}

/* The selected tab carries the accent, as a bottom rule rather than a filled
 * block — a coral-filled tab would compete with the primary action button. */
.cms-trash-tabs .nav-link.active {
    color: var(--ccess-text);
    background: var(--ccess-surface);
    border-color: var(--ccess-border);
    border-bottom: 2px solid var(--ccess-primary);
    font-weight: 600;
}

/* A trashed row reads as inactive without relying on colour alone. */
.table tr.is-trashed td {
    opacity: 0.72;
}

.table tr.is-trashed td:first-child {
    box-shadow: inset 3px 0 0 var(--ccess-primary);
}

html[dir="rtl"] .table tr.is-trashed td:first-child {
    box-shadow: inset -3px 0 0 var(--ccess-primary);
}

/* ------------------------------------------------------------ inbox list ---
 * `gap` instead of a pl-* utility so the avatar and the text swap sides in RTL.
 */
.inbox-item {
    display: flex;
    gap: 0.75rem;
}

.inbox-item-body {
    min-width: 0;
}

.section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ccess-text-muted);
    margin: 1.5rem 0 0.75rem;
}

/* -------------------------------------------------------------- auth page ---
 * Replaces css/login.css, which was a bespoke two-column flex layout with its own
 * colours. The theme has no login screen of its own, so this is a plain centred
 * card built from the theme's card and spacing primitives.
 */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--ccess-shell-bg);
}

.auth-page > main {
    width: 100%;
}

.auth-page-shell {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.auth-card {
    border: none;
    border-radius: 12px;
}

.auth-logo {
    max-width: 150px;
    height: auto;
}

.auth-page-shell > p {
    color: var(--ccess-text-muted) !important;
}

/* ------------------------------------------------------- file-picker preview ---
 * Injected by ccess-dashboard.js next to any input[type=file]. Small enough not to
 * push the submit button below the fold on a form with several image fields.
 */
.cms-file-chosen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    min-height: 0;
}

.cms-file-chosen:empty {
    display: none;
}

.cms-file-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--ccess-border);
    background: var(--ccess-surface);
    flex: 0 0 auto;
}

.cms-file-name {
    font-size: 0.8rem;
    color: var(--ccess-text-muted);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ alerts ---
 * Bootstrap's .alert-dismissible reserves padding on the right and floats .close
 * there. app-rtl.css does not cover components, so both have to be mirrored.
 */
html[dir="rtl"] .alert-dismissible {
    padding-right: 1.25rem;
    padding-left: 4rem;
}

html[dir="rtl"] .alert-dismissible .close {
    right: auto;
    left: 0;
}

/* ------------------------------------------------------------ cards/tables ---
 * Applied globally rather than per view. Phase B1 rewrites ten representative
 * screens, but all 89 share these primitives, so theming them here is what stops
 * the dashboard looking half-converted while the remaining modules wait for B2.
 */

/*
 * Most module views open with their own <div class="container-fluid">, which now
 * sits inside the layout's. Bootstrap would apply the 15px gutter twice.
 */
.main-content > .container-fluid .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.card {
    border-radius: 8px;
}

.card > .card-header {
    background-color: var(--ccess-surface);
    border-bottom: 1px solid var(--ccess-border);
    padding: 0.9rem 1.25rem;
}

.card > .card-header .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cms-color-dark);
    margin-bottom: 0;
}

/*
 * Table heads get the same navy treatment global.css defines for .cms-table-head,
 * applied by structure so the 79 views B1 does not touch match the ten it does.
 */
.card .table > thead > tr > th,
.card .table thead th {
    color: var(--ccess-text);
    background: var(--ccess-table-head-bg);
    border-top: none;
    border-bottom: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.card .table td {
    vertical-align: middle;
}

/* Action columns hold two to four small buttons; without this they collide. */
.table .btn-sm + .btn-sm,
.table .btn-sm + form,
.table form + .btn-sm,
.table form + form {
    margin-inline-start: 0.25rem;
}

/*
 * Overflow containment for the detail screens.
 *
 * The 24 two-column tables on the detail screens sit directly in a .card-body with
 * no .table-responsive wrapper and a fixed inline width on the label column
 * (120–190px). Combined with the theme's `.main-content { overflow: hidden }` a long
 * unbreakable value — a slug, an email, an absolute URL — is CLIPPED rather than
 * scrolled, which puts the content out of reach entirely.
 *
 * Letting those values break is the fix that needs no wrapper markup, so it applies
 * to every screen including the ones B1 does not rewrite.
 */
.card .table td,
.card .table th {
    overflow-wrap: anywhere;
}

/* Below the shell breakpoint the fixed label widths leave too little for the value. */
@media (max-width: 767.98px) {
    .card .table th[style*="width"],
    .card .table td[style*="width"] {
        width: auto !important;
    }
}

/* An empty-state row must not inherit the uppercase head styling. */
.card .table tbody td.text-center.text-muted {
    text-transform: none;
    letter-spacing: normal;
}

/* ------------------------------------------------------- retired-class shim ---
 * `.row gutters` appears in 75 places across the dashboard. It came from the old
 * css/main.css, which is no longer loaded, and it tightens Bootstrap's 15px gutter
 * to 8px. Reproducing the two rules here keeps the spacing of every screen that
 * Phase B1 does not rewrite, instead of editing 75 call sites to say the same thing.
 *
 * Values are copied verbatim from public/css/main.css:6279-6286.
 */
.gutters {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters > .col,
.gutters > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

/* ------------------------------------------------------------------ misc --- */

/* Long tables must scroll inside the card, never widen the page. */
.table-scroll {
    overflow-x: auto;
}

/* Bootstrap 4 has no gap utility and the theme adds none. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* ---------------------------------------------------------- accessibility ---
 * The theme's reset strips outlines from .btn and .nav-link without providing a
 * replacement, which leaves keyboard users with no visible position.
 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cms-color-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.cms-sidebar .nav-link:focus-visible,
.cms-topnav .nav-link:focus-visible,
.cms-topnav button:focus-visible {
    outline-color: var(--cms-color-primary);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2100;
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: var(--cms-color-dark);
    background: var(--cms-color-primary);
}

.skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}

html[dir="rtl"] .skip-link {
    left: auto;
    right: -9999px;
}

html[dir="rtl"] .skip-link:focus {
    right: 0.5rem;
    left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .vertical .sidebar-left,
    .vertical .main-content,
    .vertical .topnav,
    .crm-page-progress,
    .cms-sidebar .navbar-nav .nav-link {
        transition: none !important;
    }

    .submit-spinner {
        animation: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Phase D0 — main content surface and sidebar scrollbar
|--------------------------------------------------------------------------
|
| Still the integration layer: no vendor file under public/new-panel-assets is
| touched, and every value below comes from the tokens declared at the top of
| this file.
*/

/*
 * PART AF — the content area is WHITE, not the shell grey.
 *
 * The vendor's .main-content sets no background of its own, so it showed
 * body.dashboard-page's --ccess-shell-bg through. Manual QA flagged that: the
 * working surface should be white and the CHROME (sidebar, topnav) should be the
 * grey, which is the inverse of what was happening.
 *
 * The vendor rule already carries min-height: 100vh, so the white fills the
 * viewport on a short page instead of stopping where the content ends and leaving
 * a grey band above the footer. That is why this sets background only and does not
 * restate the height — restating it would duplicate a value that already works and
 * would have to be kept in step by hand.
 */
.vertical .main-content,
.vertical.hover .main-content,
.vertical.collapsed .main-content,
.vertical.narrow .main-content,
.narrow.open .main-content {
    background: var(--ccess-surface);
}

/*
 * The dashboard footer sits inside .main-content, so it inherits the white. It
 * keeps its own top border for separation.
 */
.main-footer {
    background: transparent;
    border-top-color: var(--ccess-border);
}

/*
 * PART AG — nested components stay distinguishable on white.
 *
 * A white card on a white page has no edge. The theme gives cards a very light
 * shadow that read well against grey and disappears against white, so cards get
 * an explicit neutral border instead. This is a border, not a new colour: no blue
 * or gold chrome returns, the primary stays #E94E3D, and the sidebar/topnav keep
 * --ccess-shell-bg.
 */
.main-content .card {
    border: 1px solid var(--ccess-border);
}

/*
 * Table headers, toolbars and the trash tabs need the faint grey they used to get
 * from the page behind them.
 */
.main-content .table thead th {
    background: var(--ccess-table-head-bg);
    border-bottom-color: var(--ccess-border);
}

.main-content .table td,
.main-content .table th {
    border-top-color: var(--ccess-border);
}

.main-content .card-header {
    background: transparent;
    border-bottom-color: var(--ccess-border);
}

/*
 * Inputs on a white card: the theme's default border is nearly invisible against
 * it, which makes a form look like floating labels.
 */
.main-content .form-control,
.main-content .custom-select,
.main-content .form-control-file {
    border-color: var(--ccess-border);
}

.main-content .form-control:focus,
.main-content .custom-select:focus {
    border-color: var(--ccess-primary);
    box-shadow: 0 0 0 0.2rem var(--ccess-primary-alpha);
}

/*
|--------------------------------------------------------------------------
| PARTS AH / AI — the sidebar navigation scrollbar
|--------------------------------------------------------------------------
|
| SCOPED TO THE SIDEBAR ONLY. Every selector below is prefixed with
| .cms-sidebar / #leftSidebar, so no other scrollable region in the dashboard —
| and nothing in the browser at large — is restyled. A bare `::-webkit-scrollbar`
| rule here would change every scrollbar on every dashboard page, including inside
| tables and modals, which is not what was asked for.
|
| .sidebar-left is the element that actually scrolls: the vendor sets
| `overflow-y: auto; height: 100%` on it.
*/

/* Firefox. Two properties, and it only supports a thumb/track pair. */
#leftSidebar.cms-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--ccess-scrollbar-thumb) transparent;
}

/* WebKit and Blink. */
#leftSidebar.cms-sidebar::-webkit-scrollbar {
    width: 7px;
}

#leftSidebar.cms-sidebar::-webkit-scrollbar-track {
    /*
     * Transparent rather than a grey: the sidebar is already
     * --ccess-shell-bg, and painting a second grey over it produced a visible
     * channel down the edge of the nav.
     */
    background: transparent;
}

#leftSidebar.cms-sidebar::-webkit-scrollbar-thumb {
    background: var(--ccess-scrollbar-thumb);
    border-radius: 999px;
}

#leftSidebar.cms-sidebar::-webkit-scrollbar-thumb:hover,
#leftSidebar.cms-sidebar::-webkit-scrollbar-thumb:active {
    background: var(--ccess-primary);
}

/*
 * Firefox has no hover pseudo-class for a scrollbar thumb, so the coral is applied
 * when the sidebar itself is hovered — the closest equivalent it supports.
 */
#leftSidebar.cms-sidebar:hover {
    scrollbar-color: var(--ccess-primary) transparent;
}

/*
 * PART AI — nothing here adds padding, margin or width to the sidebar, so the nav
 * links do not shift and the 16rem width is unchanged in either direction. The
 * scrollbar is placed by the browser on the inline-end edge, which is the right
 * edge in LTR and the left edge in RTL automatically; no direction-specific rule
 * is needed and adding one would fight the browser.
 *
 * At the 390px mobile drawer the same element scrolls, so the same 7px thumb
 * applies there — narrow enough not to crowd the links, wide enough to drag.
 */