/*
 * Orchedule Content Clarity
 * -----------------------------------------------------------------------------
 * Global rule, loaded after the shared standards in main/base.html and before
 * page-level `head_block` styles: content surfaces are white and secondary text
 * is clearly legible.
 *
 *   - The page canvas (body) stays a light neutral. Everything that holds
 *     content — forms, tables, cards, modals, list groups, dropdowns, code and
 *     readonly fields — sits on `--card-background` (white) with a hairline
 *     border, so panels are distinguishable from the canvas.
 *   - Secondary ("muted") text uses `--text-muted`, a darker slate that is
 *     clearly readable yet still distinct from primary text. Bootstrap's own
 *     secondary/tertiary text colours are remapped to the same token.
 *   - Decorative grey fills (striping, header bands, info blocks) are removed;
 *     hover/selected states keep a tint for feedback.
 *
 * Selectors are wrapped in `:where()` so they outrank Bootstrap and app-shell
 * defaults by load order only; a page's own classes still win when a surface
 * is intentionally coloured.
 */

/* ------------------------------------------------------------- tokens map -- */
:root,
[data-theme] {
    --bs-body-color: var(--text-primary, #1f2937);
    --bs-secondary-color: var(--text-muted, #475569);
    --bs-tertiary-color: var(--text-muted, #475569);
}

/* --------------------------------------------------------- secondary text -- */
.text-muted,
.text-secondary,
.text-body-secondary,
.text-body-tertiary,
.text-black-50,
.form-text,
.figure-caption,
.blockquote-footer {
    color: var(--text-muted, #475569) !important;
}

:where(.app-content) ::placeholder {
    color: var(--text-light, #64748b);
    opacity: 1;
}

/* ------------------------------------------------------------------ forms -- */
:where(.app-content) form fieldset,
:where(.app-content) .form-control,
:where(.app-content) .form-select,
:where(.app-content) .form-control[readonly],
:where(.app-content) .form-control:disabled,
:where(.app-content) .form-select:disabled,
:where(.app-content) .input-group-text,
:where(.app-content) .select2-container .select2-selection,
.select2-container .select2-dropdown {
    background-color: var(--card-background, #ffffff);
}

:where(.app-content) .form-control:disabled,
:where(.app-content) .form-select:disabled {
    color: var(--text-muted, #475569);
}

/* ----------------------------------------------------------------- tables -- */
:where(.app-content) table,
:where(.app-content) .table-responsive,
:where(.app-content) .scrollable-table,
:where(.app-content) .dataTables_wrapper,
:where(.app-content) .dt-container {
    background-color: var(--card-background, #ffffff);
}

:where(.app-content) .table {
    --bs-table-bg: var(--card-background, #ffffff);
    --bs-table-striped-bg: var(--card-background, #ffffff);
    --bs-table-accent-bg: transparent;
    --bs-table-hover-bg: var(--surface-medium, #f1f5f9);
    --bs-table-border-color: var(--table-border, #e5e7eb);
}

:where(.app-content) .table-light,
:where(.app-content) .table> :not(caption)>.table-light>* {
    --bs-table-bg: var(--card-background, #ffffff);
    --bs-table-accent-bg: transparent;
    color: var(--text-primary, #1f2937);
}

:where(.app-content) .table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--surface-medium, #f1f5f9);
}

/* Plain (non-Bootstrap) table headers: white with a rule, not a grey band. */
:where(.app-content) table:not(.table)>thead>tr>th {
    background-color: var(--card-background, #ffffff);
    border-bottom: 2px solid var(--table-border, #e5e7eb);
}

/* --------------------------------------------------- cards, panels, lists -- */
:where(.app-content) .card:where(:not([class*="bg-"]):not([class*="text-bg-"])),
:where(.app-content) .card-header:where(:not([class*="bg-"]):not([class*="text-bg-"])),
:where(.app-content) .card-footer:where(:not([class*="bg-"])),
:where(.app-content) .list-group-item:where(:not(.active):not([class*="list-group-item-"])),
:where(.app-content) .accordion-item,
:where(.app-content) .accordion-body,
:where(.app-content) .accordion-button.collapsed,
:where(.app-content) .nav-tabs .nav-link.active,
:where(.app-content) .tab-content,
:where(.app-content) .offcanvas,
:where(.app-content) .popover,
:where(.app-content) .toast,
:where(.app-content) .dropdown-menu,
:where(.app-content) pre,
:where(.app-content) kbd {
    background-color: var(--card-background, #ffffff);
}

:where(.app-content) .card {
    --bs-card-bg: var(--card-background, #ffffff);
    --bs-card-cap-bg: var(--card-background, #ffffff);
}

:where(.app-content) .list-group {
    --bs-list-group-bg: var(--card-background, #ffffff);
}

:where(.app-content) .accordion {
    --bs-accordion-bg: var(--card-background, #ffffff);
    --bs-accordion-btn-bg: var(--card-background, #ffffff);
}

:where(.app-content) .dropdown-menu {
    --bs-dropdown-bg: var(--card-background, #ffffff);
}

:where(.app-content) pre,
:where(.app-content) kbd {
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
}

/* Bootstrap utilities are !important; remap the neutral ones to white. */
.app-content .bg-light,
.app-content .bg-body-tertiary,
.app-content .bg-body-secondary {
    background-color: var(--card-background, #ffffff) !important;
}

/* ---------------------------------------------------------------- modals -- */
.modal {
    --bs-modal-bg: var(--card-background, #ffffff);
    --bs-modal-header-border-color: var(--border-color, #e2e8f0);
    --bs-modal-footer-border-color: var(--border-color, #e2e8f0);
}

:where(.modal) .modal-header,
:where(.modal) .modal-footer {
    background-color: var(--card-background, #ffffff);
}

/* ----------------------------------------------------- neutral chips/badges -- */
/* Badges read as outline chips: white fill, coloured border and text. */
.app-content .badge[class*="bg-"],
.app-content .badge[class*="text-bg-"] {
    background-color: var(--card-background, #ffffff) !important;
    border: 1px solid currentColor;
}

.app-content .badge.bg-primary,
.app-content .badge.text-bg-primary {
    color: var(--primary-color, #2563eb) !important;
}

.app-content .badge.bg-success,
.app-content .badge.text-bg-success {
    color: var(--success-color, #059669) !important;
}

.app-content .badge.bg-warning,
.app-content .badge.text-bg-warning {
    color: var(--btn-warning-hover, #b45309) !important;
}

.app-content .badge.bg-danger,
.app-content .badge.text-bg-danger {
    color: var(--danger-color, #dc2626) !important;
}

.app-content .badge.bg-info,
.app-content .badge.text-bg-info {
    color: var(--info-color, #0891b2) !important;
}

.app-content .badge.bg-dark,
.app-content .badge.text-bg-dark {
    color: var(--text-primary, #1f2937) !important;
}

.app-content .badge.bg-light,
.app-content .badge.bg-secondary,
.app-content .badge.text-bg-light,
.app-content .badge.text-bg-secondary {
    color: var(--text-muted, #475569) !important;
    border-color: var(--border-color, #e2e8f0);
}

/* ---------------------------------------------------------------- alerts -- */
/* Alerts are white with a coloured accent edge; the text stays primary. */
:where(.app-content) .alert {
    --bs-alert-bg: var(--card-background, #ffffff);
    --bs-alert-color: var(--text-primary, #1f2937);
    --bs-alert-border-color: var(--border-color, #e2e8f0);
    border-inline-start-width: 4px;
}

:where(.app-content) .alert-primary {
    border-inline-start-color: var(--primary-color, #2563eb);
}

:where(.app-content) .alert-success {
    border-inline-start-color: var(--success-color, #059669);
}

:where(.app-content) .alert-warning {
    border-inline-start-color: var(--warning-color, #f59e0b);
}

:where(.app-content) .alert-danger {
    border-inline-start-color: var(--danger-color, #dc2626);
}

:where(.app-content) .alert-info {
    border-inline-start-color: var(--info-color, #0891b2);
}

:where(.app-content) .alert-secondary,
:where(.app-content) .alert-light {
    border-inline-start-color: var(--text-muted, #475569);
}

:where(.app-content) .alert .alert-link {
    color: var(--primary-color, #2563eb);
}