/* ==========================================================================
   AICC / JNICC — Admin Theme Layer (Le Rouge)
   Non-destructive override layer on top of assets/css/main.css.

   Mirrors public/frontend/css/theme-aicc.css so the admin and the public
   website read as one design system: same Open Sans typography, same
   green/gold grammar, same radius, elevation and motion.

   Requires public/css/aicc-tokens.css to be loaded first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Admin primary colour

   Gold is the brand (the public site's header, navbar, sidebar and buttons all
   use it); green is a support tone. Le Rouge has a single primary slot, and
   main.css now routes every use of it through these two variables.

   Two are needed because gold only has enough contrast as a fill: #E8940F on
   white is about 2.5:1, well under the 4.5:1 body text needs. Fills use the
   brand gold with dark text on top; text and icons use the deep gold.
   -------------------------------------------------------------------------- */
:root {
    --aicc-admin-primary: var(--aicc-gold);
    --aicc-admin-primary-rgb: var(--aicc-gold-rgb);
    --aicc-admin-primary-text: var(--aicc-gold-deep);
    --aicc-admin-primary-hover: var(--aicc-gold-dark);
    /* Readable text to sit on a gold fill */
    --aicc-admin-on-primary: var(--aicc-charcoal);
}

/* --------------------------------------------------------------------------
   Typography — match the public site
   -------------------------------------------------------------------------- */
body,
.page-wrapper,
button,
input,
select,
textarea {
    font-family: var(--aicc-font);
}

body {
    color: var(--aicc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--aicc-font);
    font-weight: 600;
    line-height: var(--aicc-line-heading);
    color: var(--aicc-charcoal);
}

/* --------------------------------------------------------------------------
   Sidebar — brand block sizing

   Le Rouge hardcodes `.sidebar-content { height: calc(100% - 90px) }`, where
   90px is the brand block's height in the stock template. If the brand grows
   past that, .sidebar-content overflows the viewport and the bottom of the
   menu becomes unreachable — slimScroll sizes its window from this element,
   so the extra height is simply cut off rather than scrolled.

   Both values are driven from one variable here so they cannot drift apart.
   The height is deliberately identical in expanded and pinned states: it is
   set once at page load, and slimScroll does not recompute on toggle.
   -------------------------------------------------------------------------- */
.page-wrapper .sidebar-wrapper {
    --aicc-sidebar-brand-h: 96px;
}

.page-wrapper .sidebar-wrapper .sidebar-brand {
    background-color: var(--aicc-admin-primary) !important;
    height: var(--aicc-sidebar-brand-h);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-wrapper .sidebar-wrapper .sidebar-brand .logo {
    padding: 0 13px;
    min-height: 0;
    width: 100%;
}

.page-wrapper .sidebar-wrapper .sidebar-brand .logo img {
    max-width: 140px;
    max-height: 64px;
    width: auto;
    height: auto;
    transition: max-width 0.3s ease, max-height 0.3s ease;
}

.page-wrapper .sidebar-wrapper .sidebar-content {
    height: calc(100% - var(--aicc-sidebar-brand-h)) !important;
    /* Fallback only: slimScroll sets overflow:hidden inline when it is
       active, so this takes effect just if the plugin fails to load. */
    overflow-y: auto;
}

.page-wrapper .sidebar-wrapper .sidebar-menu .header-menu {
    color: var(--aicc-text-muted);
    font-weight: 700;
    letter-spacing: 1px;
}

.page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover {
    background: rgba(var(--aicc-admin-primary-rgb), 0.06);
    color: var(--aicc-admin-primary-text);
}
.page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover i {
    color: var(--aicc-admin-primary-text);
}

/* Active leaf item */
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link > a,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a {
    background: rgba(var(--aicc-admin-primary-rgb), 0.1);
    color: var(--aicc-admin-primary-text);
    font-weight: 600;
}
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link > a i,
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a i {
    color: var(--aicc-admin-primary-text);
}

/* Gold rail on the active item, echoing the site's accent */
.page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link > a {
    box-shadow: inset 3px 0 0 var(--aicc-gold);
}

/* Active submenu link */
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li.active-page-link > a {
    background: rgba(var(--aicc-admin-primary-rgb), 0.08);
    color: var(--aicc-admin-primary-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--aicc-gold);
}
.page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover {
    background: rgba(var(--aicc-admin-primary-rgb), 0.06);
    color: var(--aicc-admin-primary-text);
}

/* --------------------------------------------------------------------------
   Buttons — same grammar as the public site
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--aicc-font);
    font-weight: 600;
    border-radius: var(--aicc-radius-sm);
    transition: all var(--aicc-transition);
}

.btn-primary {
    background-color: var(--aicc-admin-primary);
    border-color: var(--aicc-admin-primary);
    /* White on gold is ~2.5:1; dark ink on gold is ~7:1 */
    color: var(--aicc-admin-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--aicc-admin-primary-hover);
    border-color: var(--aicc-admin-primary-hover);
    color: var(--aicc-white);
    box-shadow: var(--aicc-elev-2);
}

/* Sidebar brand sits on gold, so its logo area needs no extra tinting */
.page-wrapper .sidebar-wrapper .sidebar-brand { color: var(--aicc-admin-on-primary); }

.btn-secondary,
.btn-warning {
    background-color: var(--aicc-gold);
    border-color: var(--aicc-gold);
    color: var(--aicc-charcoal);
}
.btn-secondary:hover,
.btn-warning:hover,
.btn-secondary:focus,
.btn-warning:focus {
    background-color: var(--aicc-gold-dark);
    border-color: var(--aicc-gold-dark);
    color: var(--aicc-white);
}

.btn-outline-primary {
    color: var(--aicc-admin-primary-text);
    border-color: var(--aicc-admin-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--aicc-admin-primary);
    border-color: var(--aicc-admin-primary);
    color: var(--aicc-white);
}

/* --------------------------------------------------------------------------
   Cards & panels
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--aicc-border);
    border-radius: var(--aicc-radius-md);
    box-shadow: var(--aicc-elev-1);
}
.card .card-header {
    background: var(--aicc-off-white);
    border-bottom: 1px solid var(--aicc-border);
    font-weight: 600;
    color: var(--aicc-charcoal);
}

/* Dashboard stat cards (resources/views/home.blade.php) */
.stat-card {
    background: var(--aicc-white);
    border: 1px solid var(--aicc-border);
    border-radius: var(--aicc-radius-md);
    box-shadow: var(--aicc-elev-1);
    height: 100%;
    transition: transform var(--aicc-transition), box-shadow var(--aicc-transition);
}
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--aicc-elev-3);
}
.stat-card .stat-label {
    color: var(--aicc-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.stat-card .stat-value {
    color: var(--aicc-charcoal);
    font-weight: 700;
    margin: 0;
}
.stat-card .stat-link {
    color: var(--aicc-admin-primary-text);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.stat-card .stat-link:hover {
    color: var(--aicc-gold-dark);
}

/* --------------------------------------------------------------------------
   Page header / breadcrumb
   -------------------------------------------------------------------------- */
.page-header .breadcrumb {
    background: transparent;
}
.page-header .breadcrumb .breadcrumb-item.active {
    color: var(--aicc-admin-primary-text);
    font-weight: 600;
}
.page-title {
    color: var(--aicc-admin-primary-text);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table thead th {
    background: var(--aicc-off-white);
    color: var(--aicc-admin-primary-text);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--aicc-border);
}
.table tbody tr:hover {
    background: rgba(var(--aicc-admin-primary-rgb), 0.04);
}

/* --------------------------------------------------------------------------
   Forms — brand focus ring
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--aicc-admin-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--aicc-admin-primary-rgb), 0.15);
}

/* --------------------------------------------------------------------------
   Badges & alerts
   -------------------------------------------------------------------------- */
.badge-primary,
.bg-primary {
    background-color: var(--aicc-admin-primary) !important;
    color: var(--aicc-white);
}
.badge-warning,
.bg-warning {
    background-color: var(--aicc-gold) !important;
    color: var(--aicc-charcoal);
}
.text-primary {
    color: var(--aicc-admin-primary-text) !important;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination .page-item.active .page-link {
    background-color: var(--aicc-admin-primary);
    border-color: var(--aicc-admin-primary);
    color: var(--aicc-white);
}
.pagination .page-link {
    color: var(--aicc-admin-primary-text);
}
.pagination .page-link:hover {
    background-color: rgba(var(--aicc-admin-primary-rgb), 0.08);
    color: var(--aicc-admin-primary-hover);
}

/* ==========================================================================
   Bootstrap 4 → 5 compatibility utilities

   The admin ships Bootstrap 4.3.1, but 42 admin views were written with
   Bootstrap 5 class names (170 occurrences). Under BS4 those classes simply
   do not exist, so the styling silently did nothing:

     fw-semibold   x55   headings rendered at normal weight
     me-2 / me-1   x66   icons sat flush against their labels
     form-select   x13   selects rendered unstyled
     btn-close     x6    modal close buttons were invisible

   Defining them here fixes every one of those files at once, without
   rewriting markup, and keeps the views correct if Bootstrap is ever
   upgraded to 5 (where these same names are native).
   ========================================================================== */

/* Margin start / end (BS5 logical properties -> BS4 left/right) */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

/* Padding start / end */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Font weight */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }

/* Text / float alignment */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }

/* Flex/grid gap */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Screen-reader-only (BS4 calls this .sr-only) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* BS5 .form-select — BS4 styles selects via .form-control */
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--aicc-text);
    background-color: var(--aicc-white);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6255' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: var(--aicc-radius-sm);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-select:focus {
    border-color: var(--aicc-gold);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(var(--aicc-gold-rgb), 0.2);
}

/* BS5 .btn-close — BS4 uses <button class="close">&times;</button> */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    border: 0;
    border-radius: var(--aicc-radius-sm);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:hover { opacity: 0.85; }

.btn-close:focus-visible {
    outline: 2px solid var(--aicc-gold);
    outline-offset: 2px;
    opacity: 1;
}

/* ==========================================================================
   Shared admin components
   Used by resources/views/components/admin/*.blade.php so pages stop
   carrying their own <style> blocks.
   ========================================================================== */

/* Page heading */
.aicc-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.aicc-page-head__title {
    position: relative;
    margin: 0;
    padding-left: 0.85rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--aicc-charcoal);
}

/* Dark rule to the LEFT of the heading, matching the public site */
.aicc-page-head__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 5px;
    border-radius: 3px;
    background: var(--aicc-charcoal);
}

.aicc-page-head__subtitle {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--aicc-text-muted);
}

.aicc-page-head__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Card */
.aicc-card {
    margin-bottom: 1.5rem;
}

.aicc-card .card-title {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
}

.aicc-card .card-title i {
    color: var(--aicc-gold);
}

.aicc-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Table */
.aicc-table thead th {
    white-space: nowrap;
}

.aicc-table td,
.aicc-table th {
    vertical-align: middle;
}

/* A flush card body still needs the table to respect the card's rounding */
.aicc-card .card-body.p-0 .aicc-table-wrap {
    border-radius: 0 0 var(--aicc-radius-md) var(--aicc-radius-md);
    overflow: hidden;
}

/* Empty state */
.aicc-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--aicc-text-muted);
}

.aicc-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.6rem;
    color: var(--aicc-sand-300, #B7AC98);
}

.aicc-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.aicc-empty__action {
    margin-top: 1rem;
}

.aicc-empty-row:hover {
    background: transparent !important;
}

/* Form field */
.aicc-field .form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--aicc-charcoal);
    margin-bottom: 0.35rem;
}

.aicc-field__error {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--aicc-danger);
}

/* Action button clusters inside tables */
.aicc-row-actions {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .aicc-page-head {
        align-items: flex-start;
    }

    .aicc-page-head__actions,
    .aicc-card__actions {
        width: 100%;
    }

    .aicc-page-head__actions > .btn,
    .aicc-card__actions > .btn {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Header: notifications and avatar
   ========================================================================== */
.aicc-notif { position: relative; }

.aicc-notif > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--aicc-radius-circle);
    color: var(--aicc-charcoal);
    transition: background var(--aicc-transition-fast);
}

.aicc-notif > a:hover { background: rgba(var(--aicc-gold-rgb), 0.12); }

.aicc-notif__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--aicc-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.aicc-notif__menu {
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 1px solid var(--aicc-sand-100, #E7E0D2);
    border-radius: var(--aicc-radius-md);
    box-shadow: var(--aicc-elev-3);
    overflow: hidden;
}

.aicc-notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--aicc-off-white);
    border-bottom: 1px solid var(--aicc-sand-100, #E7E0D2);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--aicc-charcoal);
}

.aicc-notif__count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--aicc-gold-dark);
}

/* Scrolls rather than growing the dropdown past the viewport */
.aicc-notif__list {
    max-height: 300px;
    overflow-y: auto;
}

.aicc-notif__item {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--aicc-off-white);
    text-decoration: none;
    color: inherit;
}

.aicc-notif__item:hover { background: rgba(var(--aicc-gold-rgb), 0.07); }

.aicc-notif__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--aicc-radius-circle);
    background: rgba(var(--aicc-gold-rgb), 0.15);
    color: var(--aicc-gold-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.aicc-notif__body { display: flex; flex-direction: column; min-width: 0; }
.aicc-notif__body strong { font-size: 0.82rem; color: var(--aicc-charcoal); }
.aicc-notif__body small { font-size: 0.75rem; color: var(--aicc-text-muted); }
.aicc-notif__body time { font-size: 0.68rem; color: var(--aicc-sand-300, #B7AC98); margin-top: 2px; }

.aicc-notif__empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--aicc-text-muted);
    font-size: 0.85rem;
}

.aicc-notif__empty i { display: block; font-size: 1.5rem; margin-bottom: 0.4rem; color: var(--aicc-admin-primary-text); }

.aicc-notif__all {
    display: block;
    padding: 0.7rem 1rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--aicc-gold-dark);
    background: var(--aicc-off-white);
    text-decoration: none;
}

.aicc-notif__all:hover { background: rgba(var(--aicc-gold-rgb), 0.12); color: var(--aicc-gold-dark); }

/* Initials avatar, used when the user has no photo */
.aicc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--aicc-radius-circle);
    background: var(--aicc-admin-primary);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.aicc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aicc-avatar--sm { width: 34px; height: 34px; font-size: 0.75rem; margin-right: 0.5rem; }
.aicc-avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; }


/* --------------------------------------------------------------------------
   Modal header — plain white

   Le Rouge painted the header with the primary colour and white text. It is
   now a white band with dark text and a hairline rule, so modals read as part
   of the page rather than as a coloured strip.
   -------------------------------------------------------------------------- */
.modal .modal-header,
.modal-header {
    background: var(--aicc-white) !important;
    color: var(--aicc-charcoal);
    border-bottom: 1px solid var(--aicc-sand-100, #E7E0D2);
}

.modal .modal-header .modal-title,
.modal-header .modal-title {
    color: var(--aicc-charcoal);
    font-weight: 600;
}

/* Close button was white-on-colour; it needs to be visible on white now */
.modal .modal-header .close,
.modal .modal-header .btn-close {
    color: var(--aicc-charcoal);
    opacity: 0.6;
    text-shadow: none;
}

.modal .modal-header .close:hover,
.modal .modal-header .btn-close:hover {
    opacity: 1;
}

/* ==========================================================================
   Searchable selects (bootstrap-select) — brand styling
   ========================================================================== */
.bootstrap-select > .dropdown-toggle {
    background: var(--aicc-white);
    border: 1px solid #ced4da;
    border-radius: var(--aicc-radius-sm);
    color: var(--aicc-text);
    font-weight: 400;
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--aicc-admin-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--aicc-admin-primary-rgb), 0.2);
    outline: none !important;
}

.bootstrap-select .dropdown-menu {
    border: 1px solid var(--aicc-sand-100, #E7E0D2);
    border-radius: var(--aicc-radius);
    box-shadow: var(--aicc-elev-3);
    padding: 0.25rem;
}

.bootstrap-select .dropdown-menu li a {
    border-radius: var(--aicc-radius-sm);
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    background: rgba(var(--aicc-admin-primary-rgb), 0.1);
    color: var(--aicc-charcoal);
}

.bootstrap-select .dropdown-menu li.selected a {
    background: var(--aicc-admin-primary);
    color: var(--aicc-admin-on-primary);
}

.bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--aicc-admin-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--aicc-admin-primary-rgb), 0.15);
}

/* Selects inside modals must not be clipped by the modal body */
.modal .bootstrap-select .dropdown-menu { z-index: 1060; }

/* ==========================================================================
   Responsive tables across the whole backend

   Most admin tables are not wrapped in .table-responsive. Rather than edit
   every view, let any admin table scroll sideways on small screens so columns
   stay readable instead of being squeezed.
   ========================================================================== */
@media (max-width: 767.98px) {
    .main-container .table-responsive { -webkit-overflow-scrolling: touch; }

    .main-container .table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Action buttons stay on one line and remain tappable */
    .aicc-row-actions { flex-wrap: nowrap; }
    .aicc-row-actions .btn { padding: 0.3rem 0.5rem; }
}

/* Icon-only action buttons: square, consistent, and large enough to hit */
.aicc-row-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    line-height: 1;
}