/* ==========================================================================
   Perfect Car Care Center — glossy dark theme + horizontal navigation shell.
   Loaded on every admin page and the login page (JAZZMIN_SETTINGS.custom_css).
   All colours, spacing and sizes come from the tokens in :root.
   !important is used only where a documented legacy rule wins otherwise:
     - Bootstrap utility classes (.text-*, .text-bg-*, .bg-*) are themselves !important;
     - Popper / Select2 write inline styles;
     - vendor CSS (Select2, Django autocomplete) loads after this file.
   ========================================================================== */

/* ---- 1. Design tokens -------------------------------------------------- */
:root {
  --pcc-bg-base: #090A0C;            /* color.bg.base */
  --pcc-bg-glossy: #121419;          /* color.bg.glossy */
  --pcc-surface-card: #191B20;       /* color.surface.card */
  --pcc-surface-elevated: #23252B;   /* color.surface.elevated */
  --pcc-surface-hover: #2B2E35;
  --pcc-gold: #D9AD52;               /* color.brand.gold */
  --pcc-gold-light: #F6D98A;         /* color.brand.gold-light */
  --pcc-gold-dark: #8C621F;          /* color.brand.gold-dark */
  --pcc-on-gold: #1A1306;            /* text on gold fills */
  --pcc-text: #F4F2EC;               /* color.text.primary */
  --pcc-text-2: #B8B9C0;             /* color.text.secondary */
  --pcc-text-muted: #8E909A;
  --pcc-border: #30323A;             /* color.border.default */
  --pcc-border-strong: #464953;
  --pcc-control-border: #6E727D;      /* form-control edges: >= 3:1 on card and input surfaces */
  --pcc-success: #169B62;            /* color.status.success */
  --pcc-warning: #F49B36;            /* color.status.warning */
  --pcc-error: #E35F59;              /* color.status.error */
  --pcc-info: #4FA3E0;
  --pcc-success-text: #5FD39E;       /* status tints readable as text on dark surfaces */
  --pcc-warning-text: #F8B868;
  --pcc-error-text: #F08E89;
  --pcc-info-text: #8CC4EE;
  --pcc-saffron: #FF9933;            /* color.brand.saffron — tricolor accent only */
  --pcc-white: #FFFFFF;              /* color.brand.white */
  --pcc-india-green: #138808;

  /* chart series (validated for the dark card surface) */
  --pcc-viz-1: #BE8A2C;
  --pcc-viz-2: #3987E5;

  /* spacing scale (4px steps) */
  --pcc-space-1: .25rem;  --pcc-space-2: .5rem;  --pcc-space-3: .75rem;  --pcc-space-4: 1rem;
  --pcc-space-5: 1.25rem; --pcc-space-6: 1.5rem; --pcc-space-7: 1.75rem; --pcc-space-8: 2rem;
  /* control & button sizes */
  --pcc-control-h: 2.5rem;  --pcc-control-h-sm: 2rem;
  --pcc-btn-h: 2.5rem;      --pcc-btn-h-sm: 2rem;      --pcc-btn-h-lg: 3rem;
  /* type scale */
  --pcc-fs-xs: .75rem; --pcc-fs-label: .78125rem; --pcc-fs-sm: .875rem; --pcc-fs-base: .9375rem; --pcc-fs-lg: 1.0625rem; --pcc-fs-xl: 1.375rem;
  /* layout (overridden per breakpoint below) */
  --pcc-page-max: 1680px;
  --pcc-page-pad: var(--pcc-space-8);
  --pcc-gap: var(--pcc-space-5);
  --pcc-card-pad: var(--pcc-space-4);
  --pcc-header-h: 7rem;
  --pcc-form-row-gap: var(--pcc-space-3);      /* 12px between form rows */
  --pcc-form-col-gap: var(--pcc-space-4);      /* 16px between form columns */
  --pcc-textarea-h: 4.5rem;                    /* 72px: compact two-line start */
  --pcc-textarea-max: 11.25rem;                /* 180px: manual / auto growth stops here */

  --pcc-radius: .5rem;
  --pcc-radius-sm: .375rem;
  --pcc-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --pcc-shadow-sm: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 2px 8px rgba(0, 0, 0, .3);
  --pcc-gloss: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 42%);
  --pcc-card-bg: linear-gradient(160deg, #1D1F25 0%, var(--pcc-surface-card) 55%, #15171B 100%);
  --pcc-gold-grad: linear-gradient(180deg, var(--pcc-gold-light) 0%, var(--pcc-gold) 48%, #C29440 100%);
  --pcc-page-bg:
    radial-gradient(ellipse at top right, rgba(180, 135, 50, .12), transparent 40%),
    radial-gradient(ellipse at 10% 110%, rgba(140, 98, 31, .07), transparent 45%),
    linear-gradient(135deg, var(--pcc-bg-base), #15171B 55%, #090A0C);
  --pcc-focus: 0 0 0 .2rem rgba(217, 173, 82, .55);
  --pcc-ease: .18s ease;
}
@media (max-width: 1199.98px) { :root { --pcc-page-pad: var(--pcc-space-6); } }
@media (max-width: 991.98px)  { :root { --pcc-page-pad: var(--pcc-space-4); --pcc-gap: var(--pcc-space-4); --pcc-card-pad: var(--pcc-space-3); --pcc-form-col-gap: var(--pcc-space-3); --pcc-header-h: 4rem; } }
@media (max-width: 767.98px)  { :root { --pcc-page-pad: var(--pcc-space-3); --pcc-gap: var(--pcc-space-3); } }
@media (max-width: 479.98px)  { :root { --pcc-page-pad: var(--pcc-space-2); --pcc-card-pad: var(--pcc-space-3); } }

/* ---- 2. Bootstrap 5.3 dark mode mapped onto the tokens ----------------- */
:root[data-bs-theme], [data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: var(--pcc-bg-base);
  --bs-body-bg-rgb: 9, 10, 12;
  --bs-body-color: var(--pcc-text);
  --bs-body-color-rgb: 244, 242, 236;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: var(--pcc-text-2);
  --bs-tertiary-color: var(--pcc-text-muted);
  --bs-secondary-bg: var(--pcc-surface-elevated);
  --bs-tertiary-bg: var(--pcc-bg-glossy);
  --bs-tertiary-bg-rgb: 18, 20, 25;
  --bs-border-color: var(--pcc-border);
  --bs-border-color-translucent: rgba(255, 255, 255, .09);
  --bs-heading-color: var(--pcc-text);
  --bs-link-color: var(--pcc-gold-light);
  --bs-link-color-rgb: 246, 217, 138;
  --bs-link-hover-color: #FFE7AE;
  --bs-link-hover-color-rgb: 255, 231, 174;
  --bs-primary: var(--pcc-gold);
  --bs-primary-rgb: 217, 173, 82;
  --bs-success: var(--pcc-success);
  --bs-success-rgb: 22, 155, 98;
  --bs-warning: var(--pcc-warning);
  --bs-warning-rgb: 244, 155, 54;
  --bs-danger: var(--pcc-error);
  --bs-danger-rgb: 227, 95, 89;
  --bs-info: var(--pcc-info);
  --bs-info-rgb: 79, 163, 224;
  --bs-success-text-emphasis: var(--pcc-success-text);
  --bs-warning-text-emphasis: var(--pcc-warning-text);
  --bs-danger-text-emphasis: var(--pcc-error-text);
  --bs-info-text-emphasis: var(--pcc-info-text);
  --bs-primary-text-emphasis: var(--pcc-gold-light);
  --bs-focus-ring-color: rgba(217, 173, 82, .55);
  --bs-form-valid-color: var(--pcc-success-text);
  --bs-form-valid-border-color: var(--pcc-success);
  --bs-form-invalid-color: var(--pcc-error-text);
  --bs-form-invalid-border-color: var(--pcc-error);
}
.text-secondary, .text-muted { color: var(--pcc-text-2) !important; }
.text-success { color: var(--pcc-success-text) !important; }
.text-warning { color: var(--pcc-warning-text) !important; }
.text-danger, .text-red { color: var(--pcc-error-text) !important; }
.text-primary { color: var(--pcc-gold-light) !important; }
.text-info { color: var(--pcc-info-text) !important; }

/* ---- 3. Page background ------------------------------------------------ */
html, body { background: var(--pcc-bg-base); }
body { background: var(--pcc-page-bg) fixed; color: var(--pcc-text); font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.bg-body-tertiary { background: var(--pcc-page-bg) fixed !important; }
body .app-wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lte-app-header" "lte-app-main" "lte-app-footer"; }
.app-main, .app-content, .app-content-header, .app-footer { background: transparent; }
.app-footer { border-top: 1px solid var(--pcc-border); color: var(--pcc-text-muted); }

/* Jazzmin's own navbar and sidebar are replaced by the PCC header */
#jazzy-navbar, #jazzy-sidebar, body .app-sidebar { display: none; }

/* ---- 4. Header: brand + utilities -------------------------------------- */
.pcc-header {
  grid-area: lte-app-header; position: sticky; top: 0; z-index: 1035;
  background: linear-gradient(180deg, rgba(25, 27, 32, .97), rgba(12, 13, 16, .97));
  border-bottom: 1px solid var(--pcc-border);
  box-shadow: 0 1px 0 rgba(217, 173, 82, .18), 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: saturate(140%) blur(6px);
}
.pcc-skip { position: absolute; left: 1rem; top: .5rem; z-index: 2000; padding: .5rem .75rem; border-radius: var(--pcc-radius-sm);
            background: var(--pcc-gold); color: var(--pcc-on-gold); font-weight: 700; }
.pcc-skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pcc-topbar { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; min-height: 64px; }
.pcc-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--pcc-text); min-width: 0; }
.pcc-brand:hover { color: var(--pcc-text); }
.pcc-brand-mark { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #000;
                  box-shadow: 0 0 0 1px rgba(217, 173, 82, .55), 0 0 0 3px rgba(217, 173, 82, .08); }
.pcc-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pcc-brand-name { font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; white-space: nowrap;
                  background: var(--pcc-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcc-brand-sub { font-size: .74rem; color: var(--pcc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pcc-tricolor { display: block; width: 54px; height: 3px; margin-top: 4px; border-radius: 2px;
                background: linear-gradient(90deg, var(--pcc-saffron) 0 33.3%, var(--pcc-white) 33.3% 66.6%, var(--pcc-india-green) 66.6% 100%); }

.pcc-search { display: flex; align-items: center; gap: .35rem; flex: 1 1 auto; max-width: 560px; margin-left: auto; }
.pcc-search .pcc-search-scope { width: auto; flex: 0 0 auto; max-width: 11rem; padding-right: 2.25rem;
  background-image: var(--bs-form-select-bg-img); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; appearance: none; }
.pcc-search input { flex: 1 1 auto; min-width: 0; }
.pcc-utilities { display: flex; align-items: center; gap: .35rem; margin-left: .25rem; }

.pcc-icon-btn, .pcc-user {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 40px; min-height: 40px; padding: 0 .6rem; border-radius: var(--pcc-radius-sm);
  background: var(--pcc-gloss), var(--pcc-surface-elevated); color: var(--pcc-text);
  border: 1px solid var(--pcc-border); transition: border-color var(--pcc-ease), background-color var(--pcc-ease);
}
.pcc-icon-btn:hover, .pcc-user:hover { border-color: var(--pcc-gold-dark); color: var(--pcc-gold-light); }
.pcc-dot { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
           background: #B7413C; color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px;
           box-shadow: 0 0 0 2px var(--pcc-bg-base); }
.pcc-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800;
              background: var(--pcc-gold-grad); color: var(--pcc-on-gold); }
.pcc-user-text { flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.pcc-user-name { font-weight: 600; font-size: .85rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-user-role { font-size: .72rem; color: var(--pcc-text-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pcc-alerts { min-width: 300px; }
.pcc-alert { display: flex; gap: .65rem; align-items: center; white-space: normal; }
.pcc-alert-count { flex: 0 0 auto; min-width: 2.2rem; text-align: center; font-weight: 800; padding: .15rem .4rem; border-radius: var(--pcc-radius-sm);
                   border: 1px solid currentColor; }
.pcc-alert-warning .pcc-alert-count { color: var(--pcc-warning-text); }
.pcc-alert-error .pcc-alert-count { color: var(--pcc-error-text); }
.pcc-alert-success .pcc-alert-count { color: var(--pcc-success-text); }
.pcc-alert-info .pcc-alert-count { color: var(--pcc-info-text); }

/* ---- 5. Row 2: horizontal menu (offcanvas drawer below 992px) ---------- */
.pcc-nav { border-top: 1px solid rgba(255, 255, 255, .04); }
.pcc-menu { display: flex; align-items: stretch; gap: .15rem; list-style: none; margin: 0; padding: 0 .75rem;
            overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--pcc-border-strong) transparent; }
.pcc-menu-item { flex: 0 0 auto; }
.pcc-menu-link {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 46px; padding: 0 .85rem;
  color: var(--pcc-text-2); background: transparent; border: 0; border-radius: var(--pcc-radius-sm) var(--pcc-radius-sm) 0 0;
  font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none;
  transition: color var(--pcc-ease), background-color var(--pcc-ease);
}
.pcc-menu-link i { color: var(--pcc-gold); opacity: .85; width: 1.1em; text-align: center; }
.pcc-menu-link::after { content: none; }
.pcc-menu-link.dropdown-toggle::after { content: ""; display: inline-block; margin-left: .15rem; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; opacity: .7; }
.pcc-menu-link::before { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
                         background: var(--pcc-gold-grad); transform: scaleX(0); transition: transform var(--pcc-ease); }
.pcc-menu-link:hover, .pcc-menu-link[aria-expanded="true"] { color: var(--pcc-text); background: linear-gradient(180deg, rgba(217, 173, 82, .10), rgba(217, 173, 82, 0)); }
.pcc-menu-link.active { color: var(--pcc-gold-light); }
.pcc-menu-link.active::before, .pcc-menu-link:hover::before { transform: scaleX(1); }
.pcc-menu .dropdown-menu { min-width: 230px; }
@media (min-width: 992px) and (max-width: 1439.98px) {   /* fit all ten sections on laptop widths */
  .pcc-menu { padding-inline: var(--pcc-space-2); gap: 0; }
  .pcc-menu-link { padding-inline: var(--pcc-space-2); gap: var(--pcc-space-1); font-size: var(--pcc-fs-sm); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .pcc-menu-link i { display: none; } }

@media (max-width: 991.98px) {
  .pcc-topbar { padding: .5rem .75rem; gap: .5rem; }
  .pcc-brand-sub { max-width: 46vw; }
  .pcc-nav.offcanvas-lg { --bs-offcanvas-width: min(86vw, 340px); --bs-offcanvas-bg: var(--pcc-bg-glossy);
                          border-right: 1px solid var(--pcc-border); }
  .pcc-nav .offcanvas-header { border-bottom: 1px solid var(--pcc-border); }
  .pcc-menu { flex-direction: column; overflow: auto; padding: .5rem; gap: .1rem; }
  .pcc-menu-link { width: 100%; height: 44px; border-radius: var(--pcc-radius-sm); }
  .pcc-menu-link::before { left: 0; right: auto; top: .5rem; bottom: .5rem; width: 3px; height: auto; transform: scaleY(0); }
  .pcc-menu-link.active::before { transform: scaleY(1); }
  /* dropdowns become inline lists inside the drawer */
  .pcc-nav .dropdown-menu { position: static !important; inset: auto !important; transform: none !important; width: 100%;
                            margin: 0 0 .35rem 0 !important; box-shadow: none; border: 0; background: rgba(255, 255, 255, .03); }
  .pcc-search { display: none; position: absolute; left: .75rem; right: .75rem; top: 100%; max-width: none; margin: 0;
                padding: .5rem; border-radius: 0 0 var(--pcc-radius) var(--pcc-radius); background: var(--pcc-bg-glossy);
                border: 1px solid var(--pcc-border); border-top: 0; box-shadow: var(--pcc-shadow); }
  .pcc-search.is-open { display: flex; }
  .pcc-topbar .pcc-utilities { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .pcc-search { display: flex; position: static; padding: 0; border: 0; box-shadow: none; background: none; }
}
@media (max-width: 575.98px) {
  .pcc-brand-sub, .pcc-tricolor { display: none; }
  .pcc-brand-name { font-size: 1rem; white-space: normal; }
  .pcc-brand-mark { width: 38px; height: 38px; }
}

/* ---- 6. Components ------------------------------------------------------ */
/* Cards */
.card { --bs-card-bg: transparent; --bs-card-border-color: var(--pcc-border); --bs-card-cap-bg: rgba(255, 255, 255, .025);
        background: var(--pcc-gloss), var(--pcc-card-bg); border: 1px solid var(--pcc-border); border-radius: var(--pcc-radius);
        box-shadow: var(--pcc-shadow); color: var(--pcc-text); }
.card-header { border-bottom-color: var(--pcc-border); }
.card-title { color: var(--pcc-text); font-weight: 700; }
.card-outline.card-primary, .card-outline.card-secondary { border-top: 2px solid var(--pcc-gold-dark); }

/* Buttons — primary = gold, secondary = charcoal; every state defined */
.btn { --bs-btn-focus-box-shadow: var(--pcc-focus); border-radius: var(--pcc-radius-sm); font-weight: 600;
       transition: background-position var(--pcc-ease), border-color var(--pcc-ease), color var(--pcc-ease), box-shadow var(--pcc-ease), filter var(--pcc-ease); }
.btn-primary {
  --bs-btn-color: var(--pcc-on-gold); --bs-btn-hover-color: var(--pcc-on-gold); --bs-btn-active-color: var(--pcc-on-gold);
  --bs-btn-disabled-color: var(--pcc-on-gold); --bs-btn-border-color: var(--pcc-gold-dark); --bs-btn-hover-border-color: var(--pcc-gold);
  --bs-btn-active-border-color: var(--pcc-gold-dark); --bs-btn-disabled-border-color: var(--pcc-gold-dark);
  background: var(--pcc-gold-grad); background-size: 100% 160%; background-position: 0 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 6px rgba(0, 0, 0, .35);
}
.btn-primary:hover { background-position: 0 100%; filter: brightness(1.05); }
.btn-primary:active, .btn-primary.active { filter: brightness(.92); box-shadow: 0 2px 4px rgba(0, 0, 0, .45) inset; }
.btn-secondary, .btn-outline-secondary, .btn-light, .btn-default, .btn-outline-dark {
  --bs-btn-color: var(--pcc-text); --bs-btn-bg: var(--pcc-surface-elevated); --bs-btn-border-color: var(--pcc-border-strong);
  --bs-btn-hover-color: var(--pcc-gold-light); --bs-btn-hover-bg: var(--pcc-surface-hover); --bs-btn-hover-border-color: var(--pcc-gold-dark);
  --bs-btn-active-color: var(--pcc-gold-light); --bs-btn-active-bg: #1E2026; --bs-btn-active-border-color: var(--pcc-gold);
  --bs-btn-disabled-color: var(--pcc-text-muted); --bs-btn-disabled-bg: var(--pcc-surface-elevated); --bs-btn-disabled-border-color: var(--pcc-border);
  background-image: var(--pcc-gloss);
}
.btn-success { --bs-btn-bg: #12804F; --bs-btn-border-color: #169B62; --bs-btn-hover-bg: #169B62; --bs-btn-hover-border-color: #2BB97B;
               --bs-btn-active-bg: #0F6B43; --bs-btn-disabled-bg: #12804F; --bs-btn-color: #fff; background-image: var(--pcc-gloss); }
.btn-warning { --bs-btn-bg: var(--pcc-warning); --bs-btn-border-color: #C97B22; --bs-btn-hover-bg: #F7AE5C; --bs-btn-hover-border-color: var(--pcc-warning);
               --bs-btn-color: #1A1306; --bs-btn-hover-color: #1A1306; --bs-btn-active-bg: #D9842A; --bs-btn-disabled-bg: var(--pcc-warning); background-image: var(--pcc-gloss); }
.btn-danger { --bs-btn-bg: #B7413C; --bs-btn-border-color: var(--pcc-error); --bs-btn-hover-bg: #CC4E48; --bs-btn-hover-border-color: #F08E89;
              --bs-btn-active-bg: #9C3632; --bs-btn-disabled-bg: #B7413C; --bs-btn-color: #fff; background-image: var(--pcc-gloss); }
.btn-info { --bs-btn-bg: #2F6FA3; --bs-btn-border-color: var(--pcc-info); --bs-btn-hover-bg: #3A82BD; --bs-btn-hover-border-color: var(--pcc-info-text);
            --bs-btn-active-bg: #285E8A; --bs-btn-disabled-bg: #2F6FA3; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background-image: var(--pcc-gloss); }
.btn-outline-primary { --bs-btn-color: var(--pcc-gold-light); --bs-btn-border-color: var(--pcc-gold-dark); --bs-btn-hover-color: var(--pcc-on-gold);
                       --bs-btn-hover-bg: var(--pcc-gold); --bs-btn-hover-border-color: var(--pcc-gold); --bs-btn-active-bg: var(--pcc-gold-dark); --bs-btn-active-color: var(--pcc-text); }
.btn-outline-success { --bs-btn-color: var(--pcc-success-text); --bs-btn-border-color: var(--pcc-success); --bs-btn-hover-bg: var(--pcc-success); --bs-btn-hover-color: #fff; }
.btn-outline-danger { --bs-btn-color: var(--pcc-error-text); --bs-btn-border-color: var(--pcc-error); --bs-btn-hover-bg: var(--pcc-error); --bs-btn-hover-color: #fff; }
.btn-outline-warning { --bs-btn-color: var(--pcc-warning-text); --bs-btn-border-color: var(--pcc-warning); --bs-btn-hover-bg: var(--pcc-warning); --bs-btn-hover-color: #1A1306; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: .55; filter: grayscale(.35); cursor: not-allowed; }
.btn.is-loading { position: relative; --bs-btn-color: transparent; --bs-btn-hover-color: transparent; --bs-btn-active-color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; border-radius: 50%;
                         border: 2px solid currentColor; border-color: var(--pcc-text) transparent var(--pcc-text) transparent; animation: pcc-spin .7s linear infinite; }
input.btn.is-loading { --bs-btn-color: var(--pcc-text); --bs-btn-hover-color: var(--pcc-text); opacity: .7; cursor: progress; }  /* inputs cannot host ::after */
.btn-primary.is-loading::after { border-color: var(--pcc-on-gold) transparent var(--pcc-on-gold) transparent; }
@keyframes pcc-spin { to { transform: rotate(360deg); } }

/* Focus — always visible, gold ring */
:focus-visible { outline: 2px solid var(--pcc-gold-light) !important; outline-offset: 2px; }  /* AdminLTE/Bootstrap set outline: 0 on focus */
.btn:focus-visible, .form-control:focus, .form-select:focus, .pcc-menu-link:focus-visible, .dropdown-item:focus-visible,
.pcc-control input:focus, .pcc-control select:focus, .pcc-control textarea:focus { box-shadow: var(--pcc-focus); }

/* Inputs & dropdowns */
.form-control, .form-select, .vTextField, .vLargeTextField, .vIntegerField, .vDateField, .vTimeField, select, textarea,
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel] {
  background-color: #111317; color: var(--pcc-text); border: 1px solid var(--pcc-control-border); border-radius: var(--pcc-radius-sm); }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #7D808A; opacity: 1; }
.form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus { background-color: #14161B; color: var(--pcc-text); border-color: var(--pcc-gold); outline: 0; }
.form-control:disabled, .form-select:disabled, input:disabled, select:disabled, textarea:disabled, .readonly {
  background-color: #1A1C21; color: var(--pcc-text-muted); }
.form-check-input { background-color: #111317; border-color: var(--pcc-control-border); }
.form-check-input:checked { background-color: var(--pcc-gold); border-color: var(--pcc-gold); }
.form-label, label { color: var(--pcc-text-2); }
.errorlist, .errornote, .help-block.red, .invalid-feedback { color: var(--pcc-error-text); }
.errors input, .errors select, .errors textarea, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--pcc-error); }
.help-block, .form-text, .helptext { color: var(--pcc-text-muted); }
.dropdown-menu { --bs-dropdown-bg: var(--pcc-surface-elevated); --bs-dropdown-border-color: var(--pcc-border-strong);
                 --bs-dropdown-link-color: var(--pcc-text); --bs-dropdown-link-hover-bg: var(--pcc-surface-hover); --bs-dropdown-link-hover-color: var(--pcc-gold-light);
                 --bs-dropdown-link-active-bg: rgba(217, 173, 82, .16); --bs-dropdown-link-active-color: var(--pcc-gold-light);
                 --bs-dropdown-header-color: var(--pcc-gold); --bs-dropdown-divider-bg: var(--pcc-border);
                 background-image: var(--pcc-gloss); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); border-radius: var(--pcc-radius); }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
/* Select2 (admin autocomplete) */
.select2-container--admin-autocomplete .select2-selection, .select2-container--default .select2-selection,
.select2-dropdown { background-color: #111317 !important; border-color: var(--pcc-control-border) !important; color: var(--pcc-text) !important; }
.select2-container .select2-selection__rendered, .select2-results__option { color: var(--pcc-text) !important; }
.select2-results__option--highlighted, .select2-results__option[aria-selected=true] { background-color: rgba(217, 173, 82, .18) !important; color: var(--pcc-gold-light) !important; }
.select2-search__field { background: #0D0F12 !important; color: var(--pcc-text) !important; }
.select2-selection__choice { background: var(--pcc-surface-elevated) !important; border-color: var(--pcc-border-strong) !important; color: var(--pcc-text) !important; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--pcc-text); --bs-table-border-color: var(--pcc-border);
         --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-hover-bg: rgba(217, 173, 82, .07); --bs-table-hover-color: var(--pcc-text);
         --bs-table-active-bg: rgba(217, 173, 82, .12); }
.table > thead > tr > th, .table thead th, #result_list thead th {
  --bs-table-bg: #1E2025; --bs-table-color: var(--pcc-text-2); background: linear-gradient(180deg, #23252B, #1C1E23); color: var(--pcc-text-2);
  font-size: var(--pcc-fs-xs); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--pcc-border-strong); white-space: nowrap; }
#result_list thead th a, .table thead th a { color: var(--pcc-text-2); }
#result_list thead th.sorted a, #result_list thead th a:hover { color: var(--pcc-gold-light); }
#result_list tbody tr:hover { background: rgba(217, 173, 82, .06); }
#result_list tbody td, #result_list tbody th { border-color: var(--pcc-border); }
.table-responsive, #changelist-form .results { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-light { --bs-table-bg: #1E2025; --bs-table-color: var(--pcc-text-2); }
.table-danger { --bs-table-bg: rgba(227, 95, 89, .12); --bs-table-color: var(--pcc-text); }
.table-warning { --bs-table-bg: rgba(244, 155, 54, .12); --bs-table-color: var(--pcc-text); }
.table-success { --bs-table-bg: rgba(22, 155, 98, .12); --bs-table-color: var(--pcc-text); }

/* Status badges — tinted fill + readable text; every badge carries a text label, never colour alone */
.badge { font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; }
.text-bg-success { background: rgba(22, 155, 98, .16) !important; color: var(--pcc-success-text) !important; border-color: rgba(22, 155, 98, .55); }
.text-bg-warning { background: rgba(244, 155, 54, .14) !important; color: var(--pcc-warning-text) !important; border-color: rgba(244, 155, 54, .55); }
.text-bg-danger { background: rgba(227, 95, 89, .14) !important; color: var(--pcc-error-text) !important; border-color: rgba(227, 95, 89, .55); }
.text-bg-info { background: rgba(79, 163, 224, .14) !important; color: var(--pcc-info-text) !important; border-color: rgba(79, 163, 224, .5); }
.text-bg-primary { background: rgba(217, 173, 82, .15) !important; color: var(--pcc-gold-light) !important; border-color: rgba(217, 173, 82, .5); }
.text-bg-secondary, .text-bg-light, .text-bg-dark { background: rgba(184, 185, 192, .1) !important; color: var(--pcc-text-2) !important; border-color: var(--pcc-border-strong); }

/* Alerts / messages */
.alert { border-radius: var(--pcc-radius); border-width: 1px; background-image: var(--pcc-gloss); }
.alert-success { background-color: rgba(22, 155, 98, .12); border-color: rgba(22, 155, 98, .5); color: var(--pcc-success-text); }
.alert-warning { background-color: rgba(244, 155, 54, .12); border-color: rgba(244, 155, 54, .5); color: var(--pcc-warning-text); }
.alert-danger, .alert-error { background-color: rgba(227, 95, 89, .12); border-color: rgba(227, 95, 89, .5); color: var(--pcc-error-text); }
.alert-info { background-color: rgba(79, 163, 224, .12); border-color: rgba(79, 163, 224, .5); color: var(--pcc-info-text); }

/* Pagination, breadcrumbs, changelist chrome */
.pagination { --bs-pagination-bg: var(--pcc-surface-elevated); --bs-pagination-color: var(--pcc-text); --bs-pagination-border-color: var(--pcc-border);
              --bs-pagination-hover-bg: var(--pcc-surface-hover); --bs-pagination-hover-color: var(--pcc-gold-light);
              --bs-pagination-active-bg: var(--pcc-gold); --bs-pagination-active-border-color: var(--pcc-gold); --bs-pagination-active-color: var(--pcc-on-gold);
              --bs-pagination-disabled-bg: #15171B; --bs-pagination-disabled-color: var(--pcc-text-muted); --bs-pagination-focus-box-shadow: var(--pcc-focus); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--pcc-text-muted); --bs-breadcrumb-item-active-color: var(--pcc-text-2); margin-bottom: 0; }
.app-content-header h3 { color: var(--pcc-text); font-weight: 700; }
.object-tools a, .object-tools .btn { white-space: nowrap; }
.nav-tabs { --bs-nav-tabs-border-color: var(--pcc-border); --bs-nav-tabs-link-active-bg: var(--pcc-surface-card);
            --bs-nav-tabs-link-active-color: var(--pcc-gold-light); --bs-nav-tabs-link-active-border-color: var(--pcc-border) var(--pcc-border) transparent; }
.nav-tabs .nav-link { color: var(--pcc-text-2); }
.modal-content { background: var(--pcc-gloss), var(--pcc-surface-card); border: 1px solid var(--pcc-border-strong); }
.list-group-item { background: transparent; color: var(--pcc-text); border-color: var(--pcc-border); }
.regno { background: #FFF3C4; color: #1A1306; border-color: var(--pcc-gold); white-space: nowrap; }  /* a plate never wraps */
.bg-light { background-color: var(--pcc-surface-elevated) !important; }

/* Login page */
.login-logo img, .login-box img { max-width: 220px !important; max-height: 220px !important; border-radius: 10px; }
body.login-page { background: var(--pcc-page-bg) fixed !important; }
.login-page .card, .login-box .card { box-shadow: var(--pcc-shadow); }

/* ---- 7. Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   8. Layout & form standard (shared by every module)
   Breakpoints: large desktop >= 1200px · laptop 992–1199px · tablet 768–991px · mobile < 768px · small < 480px
   ========================================================================== */

/* ---- 8.1 Page container: consistent outer margins, never wider than the viewport ---- */
body { max-width: 100%; overflow-x: clip; }   /* safety net only (clip keeps sticky header working); overflow sources are fixed below */
.app-main { min-width: 0; }
.app-content-header > .container-fluid,
.app-content > .container-fluid { max-width: var(--pcc-page-max); margin-inline: auto; padding-inline: var(--pcc-page-pad); }
.app-content { padding-bottom: var(--pcc-space-4); }
.app-content > .container-fluid > .row { --bs-gutter-x: var(--pcc-gap); row-gap: var(--pcc-gap); }

/* ---- 8.2 Page title + breadcrumb row ---- */
.app-content-header { padding-block: var(--pcc-space-3) var(--pcc-space-2); }
.app-content-header .row { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--pcc-space-2); --bs-gutter-x: var(--pcc-gap); }
.app-content-header .row > [class^="col-sm-6"] { flex: 1 1 auto; width: auto; max-width: 100%; }
.app-content-header h3 { font-size: var(--pcc-fs-xl); line-height: 1.25; overflow-wrap: anywhere; }
.app-content-header .float-sm-end { float: none; display: flex; justify-content: flex-end; }
.breadcrumb { flex-wrap: wrap; row-gap: var(--pcc-space-1); font-size: var(--pcc-fs-sm); }
.breadcrumb-item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-item.active { max-width: 32ch; }

/* ---- 8.3 Change form: main column + action panel ---- */
#content-main > form > .row { --bs-gutter-x: var(--pcc-gap); row-gap: var(--pcc-gap); }
/* >= 992px: content in column 1, action panel pinned to column 2 from the top — even when a page injects extra
   cards (after_field_sets / after_related_objects) directly into Jazzmin's .row without a column wrapper. */
@media (min-width: 992px) {
  #content-main > form > .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
                                column-gap: var(--pcc-gap); row-gap: 0; align-items: start; margin-inline: 0; }
  /* row-gap stays 0 (the panel spans many implicit rows); content items are spaced with margins instead */
  #content-main > form > .row > * { grid-column: 1; width: auto; max-width: none; margin: 0; padding-inline: 0; }
  #content-main > form > .row > * + :not(script):not(input) { margin-top: var(--pcc-gap); }
  #content-main > form > .row > :has(> #jazzy-actions) { grid-column: 2; grid-row: 1 / span 40; align-self: stretch; margin-top: 0; }
  body.popup #content-main > form > .row { grid-template-columns: minmax(0, 1fr); }
  body.popup #content-main > form > .row > :has(> #jazzy-actions) { grid-column: 1; grid-row: auto; }
}
body.popup.model-vehiclemodel #content-main > form > .row > :has(> #jazzy-actions) { display: none; }
#content-main .card-body > h6 { margin: var(--pcc-space-6) 0 var(--pcc-space-3); font-size: var(--pcc-fs-lg); }
.pcc-form-card > .card-body, #content-main .card > .card-body { padding: var(--pcc-card-pad); }
/* fieldset cards nested in the form card (tabs / single formats) are flattened: one border, one padding */
.card .pcc-form-card { border: 0; border-radius: 0; background: none; box-shadow: none; }
#content-main .card .pcc-form-card > .card-body { padding: 0; }
.card .pcc-form-card > .card-header { padding: 0 0 var(--pcc-space-3); margin-bottom: var(--pcc-space-4); background: none; }
.card .pcc-form-card + .pcc-form-card, .card .pcc-form-card + .card { margin-top: var(--pcc-space-6); }
#jazzy-actions { display: flex; flex-direction: column; gap: var(--pcc-space-3); padding: var(--pcc-card-pad);
                 border: 1px solid var(--pcc-border); border-radius: var(--pcc-radius); background: var(--pcc-gloss), var(--pcc-card-bg);
                 box-shadow: var(--pcc-shadow-sm); }
#jazzy-actions.sticky-top { top: calc(var(--pcc-header-h) + var(--pcc-space-3)); z-index: 5; }
#jazzy-actions:empty { display: none; }
#jazzy-actions .object-tools { display: flex; flex-direction: column; gap: var(--pcc-space-2); margin: 0; padding-top: var(--pcc-space-3);
                               border-top: 1px solid var(--pcc-border); }
#jazzy-actions .object-tools .btn, #jazzy-actions .w-100 { width: 100%; margin: 0; }
#jazzy-actions .btn-sm { min-height: var(--pcc-btn-h); --bs-btn-font-size: var(--pcc-fs-base); }   /* one button height in the panel */

/* Shared action group: stacked full-width in the side panel, a wrapping row when the panel sits below the form */
.pcc-actions { display: flex; flex-direction: column; gap: var(--pcc-space-2); }
.pcc-actions > .btn { width: 100%; }
@media (max-width: 991.98px) {
  #jazzy-actions.sticky-top { position: static; }
  .pcc-actions { flex-direction: row; flex-wrap: wrap; }
  .pcc-actions > .btn { width: auto; flex: 1 1 12rem; }
}
@media (max-width: 767.98px) {
  .pcc-actions { flex-direction: column; }
  .pcc-actions > .btn { width: 100%; flex: 0 0 auto; }
}

/* ---- 8.4 Form grid: one column per field in a fieldset line, label above control ---- */
.pcc-fieldset-head { margin-bottom: var(--pcc-space-3); }
.pcc-fieldset-title { font-size: var(--pcc-fs-lg); font-weight: 700; margin: 0; }
.pcc-fieldset-desc { color: var(--pcc-text-2); font-size: var(--pcc-fs-sm); margin: var(--pcc-space-1) 0 0; }
.pcc-form-grid { display: grid; gap: var(--pcc-form-row-gap); }
.pcc-form-row { display: grid; grid-template-columns: repeat(var(--pcc-cols, 1), minmax(0, 1fr)); gap: var(--pcc-form-row-gap) var(--pcc-form-col-gap); align-items: start; }
.pcc-form-row.hidden, .pcc-field.hidden { display: none; }
.pcc-cols-2 { --pcc-cols: 2; }
.pcc-cols-3 { --pcc-cols: 3; }
.pcc-cols-4 { --pcc-cols: 4; }
.pcc-cols-5, .pcc-cols-6 { --pcc-cols: 3; }
.pcc-field { min-width: 0; display: flex; flex-direction: column; gap: var(--pcc-space-1); }
.pcc-label { display: block; margin: 0; color: var(--pcc-text-2); font-size: var(--pcc-fs-label); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pcc-label.required { color: var(--pcc-text); }
.pcc-req { color: var(--pcc-error-text); margin-left: var(--pcc-space-1); }
.pcc-control { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcc-space-2); }
.pcc-control > input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.pcc-control > select, .pcc-control > textarea,
.pcc-control > .related-widget-wrapper, .pcc-control > .datetime, .pcc-control > .pcc-photo-input { flex: 1 1 100%; min-width: 0; }
.pcc-help { color: var(--pcc-text-muted); font-size: var(--pcc-fs-xs); line-height: 1.4; }
.pcc-error, .pcc-error .errorlist { color: var(--pcc-error-text); font-size: var(--pcc-fs-sm); margin: 0; padding: 0; list-style: none; }
.pcc-invalid .form-control, .pcc-invalid .form-select, .pcc-invalid input, .pcc-invalid select, .pcc-invalid textarea { border-color: var(--pcc-error); }
.pcc-field-check { justify-content: flex-end; min-height: var(--pcc-control-h); }
.pcc-field-check .form-check { display: flex; align-items: center; gap: var(--pcc-space-2); min-height: var(--pcc-control-h); margin: 0; padding: 0; }
.pcc-field-check .form-check input { margin: 0; float: none; }
.pcc-field-check .form-check-label { color: var(--pcc-text); }
.pcc-field-readonly .readonly { min-height: var(--pcc-control-h); display: flex; align-items: center; padding: 0 var(--pcc-space-3);
                                border: 1px dashed var(--pcc-border-strong); border-radius: var(--pcc-radius-sm); overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .pcc-cols-3, .pcc-cols-4, .pcc-cols-5, .pcc-cols-6 { --pcc-cols: 2; } }
@media (max-width: 767.98px) { .pcc-form-row { --pcc-cols: 1; } }

/* ---- 8.5 Form controls: one height, padding, border and radius for every input type ---- */
.form-control, .form-select, .pcc-control input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.pcc-control select, .inline-group input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .inline-group select,
.pcc-search input, .pcc-search select, #changelist-search input[type=text], #searchbar {
  min-height: var(--pcc-control-h); padding: var(--pcc-space-2) var(--pcc-space-3); font-size: var(--pcc-fs-base); line-height: 1.4; max-width: 100%; }
.form-control-sm, .form-select-sm { min-height: var(--pcc-control-h-sm); padding-block: var(--pcc-space-1); font-size: var(--pcc-fs-sm); }
textarea, textarea.vLargeTextField, textarea.vXMLLargeTextField, textarea.form-control { box-sizing: border-box; width: 100%; max-width: 100%; height: var(--pcc-textarea-h); min-height: var(--pcc-textarea-h);
  max-height: var(--pcc-textarea-max); padding: .625rem var(--pcc-space-3); line-height: 1.5; resize: vertical; overflow-y: auto; }
.pcc-control select[multiple] { min-height: 8rem; }
.pcc-control input[type=file] { width: 100%; padding: var(--pcc-space-2); }
.pcc-control .datetime { display: flex; flex-wrap: wrap; gap: var(--pcc-space-2); align-items: center; }
.pcc-control .datetime br { display: none; }
.pcc-control .datetime input { flex: 1 1 10rem; min-width: 0; }
.pcc-control .datetimeshortcuts { white-space: nowrap; font-size: var(--pcc-fs-sm); }
.pcc-control .datetimeshortcuts a { color: var(--pcc-gold-light); }
.pcc-control .related-widget-wrapper { display: flex; align-items: center; gap: var(--pcc-space-2); width: 100%; }
.pcc-control .related-widget-wrapper > select, .pcc-control .related-widget-wrapper > .select2 { flex: 1 1 auto; min-width: 0; }
.related-widget-wrapper-link { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: var(--pcc-radius-sm); }
.related-widget-wrapper-link:hover { background: var(--pcc-surface-hover); }
/* Select2 writes an inline pixel width; let it follow the grid column instead (legacy conflict -> !important). */
.pcc-control .select2-container, .inline-group .select2-container { width: 100% !important; max-width: 100%; }
.form-check-input { width: 1.15rem; height: 1.15rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--pcc-gold); }

/* ---- 8.6 Buttons: shared sizes; no per-button widths ---- */
.btn { --bs-btn-padding-y: var(--pcc-space-2); --bs-btn-padding-x: var(--pcc-space-4); --bs-btn-font-size: var(--pcc-fs-base);
       display: inline-flex; align-items: center; justify-content: center; gap: var(--pcc-space-2);
       min-height: var(--pcc-btn-h); line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.btn-sm { --bs-btn-padding-y: var(--pcc-space-1); --bs-btn-padding-x: var(--pcc-space-3); --bs-btn-font-size: var(--pcc-fs-sm); min-height: var(--pcc-btn-h-sm); }
.btn-lg { min-height: var(--pcc-btn-h-lg); }
.btn-icon { width: var(--pcc-btn-h); padding: 0; }
.btn-icon.btn-sm { width: var(--pcc-btn-h-sm); }
.btn > i { flex: 0 0 auto; }
input.btn { white-space: normal; }

/* ---- 8.7 Tabs: scroll instead of overflowing ---- */
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; gap: var(--pcc-space-1); margin-bottom: var(--pcc-space-3); }
.nav-tabs .nav-link { white-space: nowrap; min-height: var(--pcc-btn-h); display: flex; align-items: center; }
.nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--pcc-gold); }

/* ---- 8.8 Tables, inlines and change lists ---- */
.table { --bs-table-cell-padding-y: var(--pcc-space-2); --bs-table-cell-padding-x: var(--pcc-space-3); font-size: var(--pcc-fs-base); margin-bottom: 0; }
.table td, .table th { vertical-align: middle; }
.table td { overflow-wrap: anywhere; }
fieldset { min-width: 0; }   /* browsers default fieldsets to min-content, which defeats overflow scrolling */
/* scroll containers are positioned so absolutely-positioned children (Select2's hidden <select>) are clipped too */
.inline-group fieldset.module, .inline-group .tabular, .tabular.inline-related { position: relative; max-width: 100%; overflow-x: auto; }
.card-body:has(> .table), .card-body:has(> table), .card:has(> .table), .table-responsive { position: relative; overflow-x: auto; }
.inline-group .table { min-width: 640px; }
.inline-group .table.text-nowrap td { white-space: nowrap; }
.inline-group .table td input, .inline-group .table td select { min-width: 7rem; }
#changelist-form .results, #changelist .results, .change-list .results { position: relative; max-width: 100%; overflow-x: auto; }
#result_list { min-width: 100%; }
#result_list td, #result_list th { padding: var(--pcc-space-2) var(--pcc-space-3); }
#changelist-search { display: flex; flex-wrap: wrap; gap: var(--pcc-space-2); align-items: center; }
#changelist-search .form-control, #searchbar { flex: 1 1 14rem; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--pcc-space-2); align-items: center; }
.actions select { width: auto; max-width: 100%; }
#changelist-filter, .changelist-filter { min-width: 0; }
.paginator, .pagination { flex-wrap: wrap; gap: var(--pcc-space-1); }

/* ---- 8.9 Cards ---- */
.card { margin-bottom: 0; }
.card + .card { margin-top: var(--pcc-gap); }
.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcc-space-2); padding: var(--pcc-space-3) var(--pcc-card-pad); }
.card-header .card-title { margin: 0; font-size: var(--pcc-fs-lg); line-height: 1.3; }
.card-header .card-tools { margin-left: auto; }
.card-body { padding: var(--pcc-card-pad); }
.card-body.p-0 { padding: 0; }

/* ---- 8.10 Small screens ---- */
@media (max-width: 767.98px) {
  .app-content-header .float-sm-end { justify-content: flex-start; }
  .object-tools .btn, .card-header .btn { flex: 1 1 auto; }
  #content-main .d-flex.gap-2 > .btn { flex: 1 1 auto; }
}