/*
 * Brand theme override, loaded after bootstrap.min.css.
 *
 * Bootstrap 5.3's compiled CSS derives most component colors (buttons, links,
 * active nav/pagination state, badges, form focus rings) from these root custom
 * properties at runtime, so overriding them here re-themes the whole prebuilt
 * bootstrap.min.css without needing Sass/a build step. White dominates, black/near-
 * black is used for text, and #F69810 is reserved for small accents only.
 */

:root {
    --bs-primary: #F69810;
    --bs-primary-rgb: 246, 152, 16;
    --bs-primary-text-emphasis: #7a4c08;
    --bs-primary-bg-subtle: #fde8cc;
    --bs-primary-border-subtle: #fbd199;

    --bs-body-bg: #ffffff;
    --bs-body-color: #1a1a1a;

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: #d1810c;
    --bs-link-hover-color-rgb: 209, 129, 12;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #d1810c;
    --bs-btn-hover-border-color: #d1810c;
    --bs-btn-active-bg: #b86f0a;
    --bs-btn-active-border-color: #b86f0a;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-color: #1a1a1a;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-active-color: #1a1a1a;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #1a1a1a;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: #1a1a1a;
}

.badge.text-bg-primary {
    background-color: var(--bs-primary) !important;
    color: #1a1a1a !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/*
 * Sidebar (admin + agent layouts): plain white, black text - no dark surface anywhere.
 * The active item still gets the small orange accent via .nav-pills .nav-link.active
 * above; everything else here just keeps the *inactive* state legible on white, since
 * Bootstrap's default link color is var(--bs-primary) (orange) and would otherwise
 * paint every inactive nav item orange too.
 */
.sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e9e9e9;
}

.sidebar .nav-link {
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar .nav-link:hover {
    background-color: #f5f5f5;
}

.sidebar .nav-link.active:hover {
    background-color: var(--bs-primary);
}

.sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.1rem;
    text-align: center;
}

.sidebar-brand-name {
    color: #1a1a1a;
}

.sidebar-subtext {
    color: #8a8a8a;
}

/* Icon-only affordance on buttons throughout the admin/agent panels. */
.btn i.bi,
.nav-link i.bi {
    line-height: 1;
}

.stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/*
 * DataTables (Bootstrap 5 styling, loaded via dataTables.bootstrap5.min.css) - every
 * table on the site uses the shared initDataTable() helper in app.js with scrollY set,
 * which is what produces this exact structure: dataTables_scrollHead pinned above a
 * fixed-height dataTables_scrollBody (the only part that actually scrolls), with the
 * search/length controls above and the pagination controls below - both outside the
 * scrolling area, so they read as "stuck" at the top and bottom of the card.
 */
.dataTables_wrapper .dataTables_scrollHead {
    background-color: #fafafa;
}

.dataTables_wrapper .dataTables_scrollHead thead th {
    border-bottom-width: 2px;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_scrollBody table {
    margin-top: 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    cursor: pointer;
}

table.dataTable thead th.dt-checkbox,
table.dataTable tbody td.text-end {
    white-space: nowrap;
}