.revoked-btn {
    cursor: not-allowed;
    opacity: 0.65;
    border-style: dashed;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

/* ── Page header ── */
html[data-bs-theme="dark"] .page-header h3 {
    color: #e2e8f0;
}

/* ── Card ── */
html[data-bs-theme="dark"] .card {
    background-color: #1e2a3a;
    border-color: #2d3f55;
    box-shadow: -8px 12px 18px 0 rgba(0, 0, 0, 0.3);
}

/* Card headers marked `bg-white` (e.g. Send Custom Notification) keep a forced
   white background from Bootstrap's `.bg-white !important`, leaving the light
   header text washed out and "stuck" in dark mode. Give them the dark card
   surface so the heading and its muted subtitle stay readable. */
html[data-bs-theme="dark"] .card-header {
    background-color: #1e2a3a;
    border-bottom-color: #2d3f55;
    color: #e2e8f0;
}

    html[data-bs-theme="dark"] .card-header.bg-white {
        background-color: #1e2a3a !important;
    }

/* ── Modal ── */
/* app-dark.css shrinks modal-header icons to font-size:12px while the light
   theme (app.css) renders them at 20px, leaving the dark modal title icon
   smaller and vertically misaligned against the title text. Match light. */
html[data-bs-theme="dark"] .modal .modal-header i,
html[data-bs-theme="dark"] .modal .modal-header svg {
    font-size: 20px;
    height: 12px;
    width: 12px;
}

/* ── Table ── */
html[data-bs-theme="dark"] .table {
    color: #e2e8f0;
    border-color: #2d3f55;
}

    html[data-bs-theme="dark"] .table thead th {
        color: #94a3b8;
        border-bottom-color: #2d3f55;
        background-color: transparent;
    }

    html[data-bs-theme="dark"] .table-light,
    html[data-bs-theme="dark"] .table thead.table-light {
        background-color: #1a2535 !important;
        color: #94a3b8 !important;
        border-color: #2d3f55 !important;
    }

        html[data-bs-theme="dark"] .table-light th,
        html[data-bs-theme="dark"] .table-light td {
            background-color: #1a2535 !important;
            color: #94a3b8 !important;
            border-color: #2d3f55 !important;
        }

    html[data-bs-theme="dark"] .table tbody td {
        border-color: #2d3f55;
    }

html[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: #243447 !important;
    color: #e2e8f0;
}

    html[data-bs-theme="dark"] .table-hover tbody tr:hover td {
        color: #e2e8f0;
    }

html[data-bs-theme="dark"] .sorting:hover {
    background-color: #243447;
}

html[data-bs-theme="dark"] .partialSorting:hover {
    background-color: #243447;
}

/* ── Form controls ── */
/* Labels use the theme's light text color so every form reads consistently in
   dark mode. `.form-group label` is included because the compiled dark theme
   (app-dark.css) colors those #c2c2d9 with higher specificity than plain
   `.form-label`, which left form-group-wrapped labels (e.g. Slider) grayer than
   labels that aren't wrapped (e.g. Giggle). Matching that selector here — and
   loading later — makes every form label the same shade. */
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .form-group label {
    color: #c2c2d9;
}

/* Media-upload panels use `card bg-light`, which stays light in dark mode.
   Keep their labels dark so they remain readable on that light surface — the
   light label color above would vanish there. These panels appear only on the
   full-page Create/Update forms (Giggle, Learning Video, Tutorial Step), never
   in the dark nested-CRUD panels, so this can't produce dark-on-dark. Declared
   after the rules above at matching-or-higher specificity so it wins. */
html[data-bs-theme="dark"] .card.bg-light .form-label,
html[data-bs-theme="dark"] .card.bg-light .form-group label {
    color: #25396f;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    border: 1px solid #dce7f1;
    padding: 0.575rem 0.75rem;
    background-color: #243447;
    border-color: #2d3f55;
    color: #e2e8f0;
}

/* The shared padding above collapses the space Bootstrap reserves for a
   select's dropdown arrow, and the theme's arrow SVG is dark (#343a40) so it
   disappears on the dark field. Restore the right padding and swap in a light
   arrow (e.g. the "Show N entries" page-size picker). */
html[data-bs-theme="dark"] .form-select {
    padding-right: 1.75rem;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c2c2d9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

    html[data-bs-theme="dark"] .form-control:focus,
    html[data-bs-theme="dark"] .form-select:focus {
        background-color: #243447;
        border-color: #435ebe;
        color: #e2e8f0;
        box-shadow: 0 0 0 0.2rem rgba(67, 94, 190, 0.25);
    }

    html[data-bs-theme="dark"] .form-control::placeholder {
        color: #64748b;
    }

    html[data-bs-theme="dark"] .form-control:disabled,
    html[data-bs-theme="dark"] .form-select:disabled {
        background-color: #1a2535;
        color: #64748b;
    }

/* ── Input group (search bar) ── */
html[data-bs-theme="dark"] .input-group-text {
    background-color: #243447;
    border-color: #2d3f55;
    color: #94a3b8;
}

html[data-bs-theme="dark"] .input-group .form-control {
    background-color: #243447;
    border-color: #2d3f55;
    color: #e2e8f0;
}

html[data-bs-theme="dark"] .input-group:focus-within .input-group-text {
    border-color: #435ebe;
}

/* Fix: bg-light on input-group-text in dark mode */
html[data-bs-theme="dark"] .input-group-text.bg-light {
    background-color: #485666 !important;
    border-color: #2d3f55 !important;
}

/* ── Select2 ── */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #243447;
    border-color: #2d3f55;
    color: #e2e8f0;
}

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e2e8f0;
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #64748b;
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #94a3b8 transparent transparent transparent;
    }

html[data-bs-theme="dark"] .select2-dropdown {
    background-color: #1e2a3a;
    border-color: #2d3f55;
    color: #e2e8f0;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    color: #e2e8f0;
    background-color: #1e2a3a;
}

/* Already-selected options. Select2 4.1.0 marks these with both the
   --selected class and aria-selected="true"; the old #243447 was almost
   identical to the base option background (#1e2a3a) so the highlight was
   invisible in dark mode. Use a clearly distinct muted indigo. */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected,
html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #34496f;
    color: #fff;
    font-weight: 500;
}

/* Keyboard/hover-highlighted option. Declared AFTER the selected rule so it
   wins the specificity tie and stays blue even when hovering a selected item. */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background-color: #435ebe;
    color: #fff;
}

html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #243447;
    border-color: #2d3f55;
    color: #e2e8f0;
}

/* ── Pagination ── */
html[data-bs-theme="dark"] .pagination-wrapper {
    border-top-color: #2d3f55;
}

html[data-bs-theme="dark"] .pagination .page-link {
    background-color: #1e2a3a;
    border-color: #2d3f55;
    color: #7c9fd4;
}

    html[data-bs-theme="dark"] .pagination .page-link:hover {
        background-color: #243447;
        border-color: #2d3f55;
        color: #a5c0e8;
    }

html[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #435ebe;
    border-color: #435ebe;
    color: #fff;
}

html[data-bs-theme="dark"] .pagination .page-item.disabled .page-link,
html[data-bs-theme="dark"] .pagination .page-item.disabled span {
    background-color: #1a2535;
    border-color: #2d3f55;
    color: #4a5568;
}

/* ── Nested table / accordion ── */
html[data-bs-theme="dark"] .hiddenRow .bg-light {
    background-color: #1a2535 !important;
}

/* Log detail panels (Error/Email logs) put bg-light directly on the collapse
   cell instead of wrapping it in .hiddenRow, so the rule above never reaches
   them: the panel stayed light while its text inherited the dark-theme light
   color, washing the labels and values out. Give these panels the same dark
   surface so the text reads cleanly.
   Both .collapse and .collapsing are matched: Bootstrap swaps .collapse for
   .collapsing during the expand animation, so matching only .collapse let the
   panel flash the light background for ~350ms before settling. */
html[data-bs-theme="dark"] tr.collapse > td.bg-light,
html[data-bs-theme="dark"] tr.collapsing > td.bg-light {
    background-color: #1a2535 !important;
    color: #e2e8f0;
}

/* ── List loader overlay ── */
html[data-bs-theme="dark"] .list-loader {
    background: rgba(30, 42, 58, 0.85);
    color: #e2e8f0;
}

/* ── Empty state ── */
html[data-bs-theme="dark"] .table-empty-state .text-muted {
    color: #8b9db8 !important;
}

/* ── Notification items ── */
html[data-bs-theme="dark"] .notification-item.unread {
    background-color: #243447;
}

html[data-bs-theme="dark"] .notification-item:hover {
    background-color: #2d3f55;
}

/* Notification dropdown list items (list-group-flush) — the divider between
   items is invisible in dark theme because the default border color blends
   into the dropdown background. Force a visible divider. */
html[data-bs-theme="dark"] #notificationList .list-group-item {
    background-color: transparent;
    border-color: #2d3f55;
}

/* ── Buttons ── */
html[data-bs-theme="dark"] .btn-outline-secondary {
    color: #94a3b8;
    border-color: #2d3f55;
}

    html[data-bs-theme="dark"] .btn-outline-secondary:hover {
        background-color: #2d3f55;
        border-color: #2d3f55;
        color: #e2e8f0;
    }

/* ── Text utilities ── */
html[data-bs-theme="dark"] .text-muted {
    color: #8b9db8 !important;
}

html[data-bs-theme="dark"] .text-secondary {
    color: #8b9db8 !important;
}

html[data-bs-theme="dark"] .fw-medium {
    color: #e2e8f0;
}

.select2-results__options {
    padding-left: 0 !important;
}

.select2-selection__clear {
    height: 43px !important;
}

/*html[data-bs-theme="dark"] #searchInput {
    padding-left: 0 !important;
}
*/

/* ── Notification unread row ── */
tr.notification-unread td:first-child {
    border-left: 3px solid #f7b924;
}

/* Light theme */
tr.notification-unread {
    background-color: rgba(247, 185, 36, 0.08) !important;
}

    tr.notification-unread td {
        color: inherit;
    }

    tr.notification-unread .fw-medium {
        color: inherit;
        font-weight: 600 !important;
    }

/* Dark theme */
html[data-bs-theme="dark"] tr.notification-unread {
    background-color: rgba(247, 185, 36, 0.07) !important;
}

    html[data-bs-theme="dark"] tr.notification-unread td {
        color: #e2e8f0;
    }

    html[data-bs-theme="dark"] tr.notification-unread .fw-medium {
        color: #f1f5f9 !important;
    }

.select2-selection__placeholder {
    font-size: 13px;
    font-weight: 300;
    color: #a1adb9 !important;
    font-family: inherit;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 13px;
    font-weight: 300;
    color: #a1adb9 !important;
    font-family: inherit;
    /* The multi-select container is a flex box with align-items:center, which
       already centers the placeholder/search field vertically. A fixed
       margin-top (leftover from the pre-flex layout) pushed it off-center and
       misaligned it against the single-select inputs. */
    margin-top: 0;
    margin-left: 8px;
}

/* Select2 appends the search field (which holds the placeholder) as a sibling
   of the .select2-selection__rendered <ul>. That <ul> has width:100%, so while
   empty it still claims a full row in the flex-wrap container and pushes the
   placeholder onto a second row, breaking vertical centering. Collapse the <ul>
   only while it has no chips so the placeholder centers; once categories are
   selected the <ul> holds <li> items, is no longer :empty, and renders normally. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered:empty {
    display: none;
}

/* ── Nested Table Animations & Styles ── */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nested-detail-panel {
    border-radius: 12px;
    overflow: hidden;
}

.nested-subtable thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 10px 15px;
    border-bottom-width: 1px;
}

.nested-subtable tbody td {
    padding: 12px 15px;
}

.filtered-out {
    display: none !important;
}

.nested-pagination .btn {
    border-color: #dee2e6;
    background-color: #fff;
}

    .nested-pagination .btn:hover:not(:disabled) {
        background-color: #f8f9fa;
        border-color: #c1c9d0;
    }

/* Dark mode for nested panels */
html[data-bs-theme="dark"] .nested-detail-panel {
    background-color: #1a2535 !important;
    border-color: #435ebe !important;
}

html[data-bs-theme="dark"] .nested-subtable thead {
    background-color: #243447 !important;
}

html[data-bs-theme="dark"] .nested-subtable tbody tr:hover {
    background-color: #2d3f55 !important;
}


/* ── Form Validation ── */
.text-danger.small,
span[class*="field-validation-"],
.field-validation-error {
    font-size: 0.85rem !important;
    font-weight: 500;
    margin-top: 4px;
    display: block;
}

.form-group label .text-danger {
    font-size: 1.1rem;
    margin-left: 2px;
}

html[data-bs-theme=dark] .sidebar-wrapper .menu {
    margin-top: 1rem;
}

html[data-bs-theme=dark] .sidebar-wrapper .menu .submenu .submenu-item a {
    padding: .7rem 1rem .7rem 2rem;
}

html[data-bs-theme=dark] .table > :not(caption) > * > *,
html[data-bs-theme=dark] .dataTable-table > :not(caption) > * > * {
    padding: 0.75rem;
}

/* Dark .form-check resets display:block (higher specificity than .form-switch),
   which kills the flex gap. Re-apply the same flex layout as light mode so the
   toggle and its label keep the 0.5rem spacing. */
html[data-bs-theme=dark] .form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html[data-bs-theme=dark] .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
}

/* In dark mode button become smaller so added below css */
html[data-bs-theme=dark] .btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .575rem;
    border-radius: 0.375rem;
    /* Dark .btn resets display:inline-block (higher specificity than site.css
       .btn), which drops the flex layout and adds extra space between the icon
       and text. Re-apply the same inline-flex layout as light mode. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[data-bs-theme=dark] .btn-sm, html[data-bs-theme=dark] .btn-group-sm > .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: .375rem;
}

html[data-bs-theme=dark] .btn-light {
    --bs-btn-bg: #485666;
}

/* Custom file input styling */
input[type="file"].form-control {
    background-color: #fff;
    border: 1px solid #dce7f1;
    overflow: hidden;
    color: #6c757d;
    padding: 0.575rem 0.75rem;
}

input[type="file"].form-control::file-selector-button {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.375rem 0.75rem;
    height: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

input[type="file"].form-control::file-selector-button:hover {
    background-color: #dee2e6;
    color: #212529;
}

html[data-bs-theme="dark"] input[type="file"].form-control {
    background-color: #243447;
    border-color: #2d3f55;
    overflow: hidden;
    color: #64748b;
}

    html[data-bs-theme="dark"] input[type="file"].form-control::file-selector-button {
        background-color: #485666;
        color: #94a3b8;
        /*border-right: 1px solid #2d3f55;
        border: 1px solid #dce7f1;*/
        padding: 0.375rem 0.75rem;
        height: 100%;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        html[data-bs-theme="dark"] input[type="file"].form-control::file-selector-button:hover {
            background-color: #a5aaae;
            color: #000000;
        }

html[data-bs-theme=dark] .btn-success,
html[data-bs-theme=dark] .btn-warning,
html[data-bs-theme=dark] .btn-danger {
    display: flex;
}

.cursor-pointer {
    cursor: pointer;
}

/* ── Help & Support inline status control ──
   Renders the native <select> as a solid, pill-shaped colored button whose
   colour reflects the current status. Selectors carry three classes so they
   win over the dark-theme `.form-select` overrides above (background + arrow).
   The arrow (`--bs-form-select-bg-img`) is set per status so it contrasts. */
.status-select {
    width: auto;
    min-width: 128px;
    border-radius: 50rem;
    cursor: pointer;
    transition: filter .15s ease-in-out;
    background-position: right .6rem center;
    background-size: 14px 11px;
}

.status-select:hover {
    filter: brightness(.95);
}

/* No border and no focus ring — the solid pill needs neither. Both the light and
   dark `.form-select` themes add a border (and a border/box-shadow on :focus) that
   render differently per theme, making the pill look bordered in light mode only.
   These selectors out-specify both themes (incl. their :focus rules) so the pill
   is truly identical, in every state, in both themes. Border + padding restated
   together because the theme rules set them at higher specificity than base. */
.form-select.status-select,
html[data-bs-theme="dark"] .form-select.status-select {
    border: 0;
    border-radius: 50rem;
    padding: .3rem 1.9rem .3rem .9rem;
}

.form-select.status-select:focus,
html[data-bs-theme="dark"] .form-select.status-select:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

/* Pending → amber (dark text + dark arrow) */
.form-select.status-select.status-pending {
    background-color: #ffc107;
    color: #493c00;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23493c00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Processing → cyan/info (dark text + dark arrow) */
.form-select.status-select.status-processing {
    background-color: #0dcaf0;
    color: #04424e;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2304424e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Resolved → green/success (white text + white arrow) */
.form-select.status-select.status-resolved {
    background-color: #198754;
    color: #ffffff;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Open-dropdown options otherwise inherit the button's solid colour, making
   every option look like the current status. Give them a neutral surface and
   a per-status text colour so the list is readable and colour-coded. */
.status-select option {
    background-color: #ffffff;
    color: #212529;
    font-weight: 500;
}

.status-select option[value="Pending"] { color: #b8860b; }
.status-select option[value="Processing"] { color: #0a94ad; }
.status-select option[value="Resolved"] { color: #198754; }

html[data-bs-theme=dark] .status-select option {
    background-color: #243447;
    color: #e2e8f0;
}

html[data-bs-theme=dark] .text-dark:not(.badge) {
    color: var(--bs-body-color) !important;
}

/* Todo task-builder rows are deliberately `bg-white`, but they sit inside a
   dark-themed `.table` whose text is forced light (#e2e8f0). The row-number cell
   holds raw text, so it rendered light-on-white and vanished. Force dark text on
   these white rows so the number is visible. */
html[data-bs-theme="dark"] #todoTasksTable tr.task-row.bg-white td {
    color: #212529;
}

/* Muted helper text/icons on genuinely light islands. `.bg-light` stays light in
   this theme and `.upload-zone` is always white, so the global dark-surface muted
   color (#8b9db8) drops to ~1.8:1 there. Use a darker muted so it reads on light. */
html[data-bs-theme="dark"] .bg-light .text-muted,
html[data-bs-theme="dark"] .upload-zone .text-muted {
    color: #6c757d !important;
}

/* ...but several `bg-light` containers are themselves remapped to a DARK surface
   (`.hiddenRow .bg-light`, collapse log-detail cells, `.nested-subtable thead`).
   Restore the light muted color there so descendant muted text stays readable. */
html[data-bs-theme="dark"] .hiddenRow .bg-light .text-muted,
html[data-bs-theme="dark"] tr.collapse > td.bg-light .text-muted,
html[data-bs-theme="dark"] tr.collapsing > td.bg-light .text-muted,
html[data-bs-theme="dark"] .nested-subtable thead .text-muted {
    color: #8b9db8 !important;
}