/*
 * Portal-wide styles, loaded after the theme stylesheets.
 *
 *   .portal-table          data tables (added by js/portal.js to bordered tables and DataTables)
 *   .portal-table-scroll   scroll box around a table that is wider or taller than the page
 *   .portal-filters        filter panel above a listing or report
 *   .portal-pagination     page links (DataTables pagination is styled the same way)
 */
:root {
    --portal-text: #3a3b45;
    --portal-heading: #1b1c22;
    --portal-muted: #858796;
    --portal-primary: #a26a22;
    --portal-border: #e3e6f0;
    --portal-input-border: #d6d9e4;
    --portal-soft: #f8f9fc;
    --portal-hover: #faf5ec;
    --portal-brand: #BE7F2F;
    --portal-brand-dark: #8a5a1c;
    --portal-brand-soft: #f7f0e5;
    --portal-brand-tint: #f3e6d2;
    --portal-ring: rgba(190, 127, 47, .2);
    --portal-radius: .75rem;
    --portal-shadow: 0 1px 2px rgba(58, 59, 69, .04), 0 .5rem 1.5rem rgba(58, 59, 69, .06);
}

body,
.table,
.form-control,
.custom-select {
    color: var(--portal-text);
}

/* ---------- Tables ---------- */

/*
 * A wide one-line table would otherwise stretch its Bootstrap column (flex items
 * never shrink below their content) and get clipped by the card instead of
 * scrolling. inline-size containment stops the table's width leaking out.
 */
.row > [class*="col"] { min-width: 0; }
.portal-table-scroll,
.dataTables_scroll {
    contain: inline-size;
    width: 100%;
}
.portal-table-scroll {
    overflow: auto;
    max-height: 65vh;
    margin-bottom: 1rem;
    border: 1px solid var(--portal-border);
    border-radius: .5rem;
    background: #fff;
}
.dataTables_scroll {
    border: 1px solid var(--portal-border);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

table.portal-table {
    width: 100%;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .85rem;
    color: var(--portal-text);
    background: #fff;
}
.portal-table-scroll > table.portal-table { min-width: max-content; }
table.portal-table th,
table.portal-table td {
    white-space: nowrap;
    padding: .7rem 1rem;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid #eaecf4 !important;
}
table.portal-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--portal-soft);
    color: #6e707e;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid var(--portal-border) !important;
}
/* DataTables' hidden copy of the header inside a scrolling body. */
.dataTables_scrollBody table.portal-table thead th { border-bottom-width: 0 !important; }
table.portal-table tbody tr:last-child td { border-bottom: 0 !important; }
table.portal-table tbody tr,
table.portal-table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
table.portal-table tbody tr:nth-child(even) td { background: #fbfbfd; }
table.portal-table tbody tr:hover td { background: var(--portal-hover); }
table.portal-table .num { text-align: right; font-variant-numeric: tabular-nums; }
table.portal-table td.dataTables_empty { padding: 3rem 1rem; color: var(--portal-muted); text-align: center; }

.portal-sort { color: inherit; text-decoration: none !important; }
.portal-sort i { margin-left: .25rem; opacity: .35; }
.portal-sort:hover, .portal-sort.active { color: var(--portal-primary); }
.portal-sort.active i, .portal-sort:hover i { opacity: 1; }

.portal-ref { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; color: var(--portal-primary); }
.portal-chip { display: inline-block; padding: .1rem .45rem; border-radius: .25rem; background: #eaecf4; font-weight: 700; font-size: .75rem; }
.portal-badge { display: inline-block; padding: .2rem .6rem; border-radius: 1rem; background: var(--portal-brand-soft); color: var(--portal-brand-dark); font-weight: 700; font-size: .7rem; letter-spacing: .03em; }

/* Keeps the row action in reach while scrolling sideways. */
table.portal-table .portal-action { position: sticky; right: 0; z-index: 1; text-align: center; background: #fff; box-shadow: inset 1px 0 0 var(--portal-border); }
table.portal-table thead .portal-action { z-index: 3; background: var(--portal-soft); }
.portal-view { color: var(--portal-primary); background: #fff; border: 1px solid #ead8bd; border-radius: 1rem; padding: .15rem .7rem; font-size: .78rem; }
.portal-view:hover { color: #fff; background: var(--portal-primary); border-color: var(--portal-primary); }

.portal-empty { text-align: center; padding: 3rem 1rem !important; color: var(--portal-muted); white-space: normal !important; }

/* ---------- Results toolbar and pagination ---------- */

.portal-results { border-top: 1px solid var(--portal-border); padding: 0 1.5rem 1.5rem; }
.portal-toolbar, .portal-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; padding: 1rem 0; color: #5a5c69; font-size: .875rem;
}
.portal-summary strong { color: var(--portal-text); }
.portal-toolbar .custom-select-sm { width: auto; min-width: 5rem; }
.portal-jump input { width: 5rem; }

.portal-pagination .pagination,
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.portal-pagination .page-link,
.dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 2.1rem; margin: 0 .15rem; text-align: center;
    border: 1px solid var(--portal-border); border-radius: .4rem !important;
    color: #5a5c69; font-size: .82rem; font-weight: 600; line-height: 1.5; padding: .25rem .6rem;
}
.portal-pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-link:hover { background: var(--portal-hover); color: var(--portal-primary); border-color: #ead8bd; }
.portal-pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--portal-primary); border-color: var(--portal-primary); color: #fff;
    box-shadow: 0 2px 6px rgba(162, 106, 34, .3);
}
.portal-pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: #b7b9cc; background: #fff; }

/* DataTables controls: length picker, search box, "Showing x to y" and page links. */
.dataTables_wrapper { font-size: .875rem; color: #5a5c69; }
.dataTables_wrapper::after { content: ""; display: table; clear: both; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { padding: .25rem 0 .75rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--portal-input-border); border-radius: .35rem; color: var(--portal-text);
    font-size: .85rem; height: calc(1.5em + .6rem + 2px); padding: .3rem .6rem;
}
/* Leave room for the dropdown arrow so the number isn't squeezed. */
.dataTables_wrapper .dataTables_length select {
    display: inline-block; width: auto !important; min-width: 5rem;
    margin: 0 .4rem; padding-right: 2rem;
}
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; margin-bottom: 0; font-weight: 600; color: #5a5c69; }
.dataTables_wrapper .dataTables_filter input:focus { outline: 0; border-color: var(--portal-primary); box-shadow: 0 0 0 .15rem var(--portal-ring); }
.dataTables_wrapper .dataTables_info { float: left; padding-top: 1rem !important; }
.dataTables_wrapper .dataTables_paginate { float: right; padding-top: .75rem !important; }
.dataTables_wrapper .dataTables_info strong { color: var(--portal-text); }
.dataTables_wrapper .dataTables_processing {
    border: 1px solid var(--portal-border); border-radius: .5rem; box-shadow: 0 .25rem 1rem rgba(58, 59, 69, .1);
    background: #fff; color: var(--portal-text);
}

/* ---------- Filters ---------- */

.portal-filters {
    background: var(--portal-soft);
    border: 1px solid var(--portal-border);
    border-radius: .5rem;
    padding: 1.25rem 1.25rem .5rem;
    margin-bottom: 1.5rem;
}
.portal-filters .form-group.row {
    border-bottom: 0 !important;
    margin-bottom: 0;
}
.portal-filters label {
    display: block;
    margin-bottom: .3rem !important;
    color: var(--portal-heading) !important;
    font-size: .8rem;
    font-weight: 600 !important;
}
.portal-filters .form-control,
.portal-filters .custom-select {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .6rem;
    font-size: .85rem;
    border-color: var(--portal-input-border);
    border-radius: .35rem;
    color: var(--portal-heading);
}
.portal-filters .form-control[readonly] { background-color: #fff; }
.portal-filters .form-control:focus,
.portal-filters .custom-select:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 .15rem var(--portal-ring); }
.portal-filters .input-group-text { background: #eef0f6; border-color: var(--portal-input-border); color: #5a5c69; font-size: .78rem; }
.portal-filters .select2-container--bootstrap .select2-selection { border-color: var(--portal-input-border); border-radius: .35rem; font-size: .85rem; min-height: calc(1.5em + .5rem + 2px); }
.portal-filters .btn { border-radius: .35rem; }

.portal-filter-group { border-top: 1px dashed var(--portal-input-border); padding-top: 1rem; }
.portal-filter-heading { margin-bottom: .75rem; color: var(--portal-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.portal-filter-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
    border-top: 1px solid var(--portal-border); margin: 0 -1.25rem; padding: .75rem 1.25rem;
}
.portal-more-toggle { color: var(--portal-heading); font-weight: 600; padding-left: 0; text-decoration: none !important; }
.portal-more-toggle:hover { color: var(--portal-primary); }
.portal-chevron { font-size: .7rem; transition: transform .2s; }
.portal-more-toggle:not(.collapsed) .portal-chevron { transform: rotate(180deg); }
.portal-reset { border: 1px solid var(--portal-input-border); background: #fff; color: #5a5c69; }
.portal-reset:hover { border-color: var(--portal-primary); color: var(--portal-primary); }

/* Read-only "Report period" bar on report results pages. */
.portal-filters.portal-period {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1rem 1.25rem;
}
.portal-period-summary { display: flex; align-items: center; gap: .9rem; }
.portal-period-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: .5rem;
    background: var(--portal-brand-soft); color: var(--portal-brand); font-size: 1.1rem;
}
.portal-period-summary .portal-filter-heading { margin-bottom: .15rem !important; }
.portal-period-value { color: var(--portal-heading); font-weight: 700; font-size: 1rem; }
.portal-period-to { color: var(--portal-muted); font-weight: 400; margin: 0 .35rem; }

/* ---------- Transaction reports ---------- */

.portal-status-queued { background: #eaecf4; color: #5a5c69; }
.portal-status-running { background: var(--portal-brand-soft); color: var(--portal-brand-dark); }
.portal-status-done { background: #e3f6ee; color: #13855c; }
.portal-status-failed { background: #fde8e7; color: #c0392b; }

.portal-report-progress { min-width: 14rem; white-space: normal !important; }
.portal-report-progress .progress { height: .9rem; font-size: .65rem; }
.portal-report-message { margin-top: .25rem; color: var(--portal-muted); font-size: .78rem; }

table.portal-table tr.portal-row-highlight td { background: #fff8e1; }
.portal-delete { color: #c0392b; background: #fff; border: 1px solid #f3c5c0; border-radius: 1rem; padding: .15rem .6rem; font-size: .78rem; }
.portal-delete:hover { color: #fff; background: #e74a3b; border-color: #e74a3b; }

/* ---------- Sidebar menu ---------- */

/*
 * Icons sit in a soft rounded tile; labels are smaller and bolder. The active
 * menu gets a light pill instead of the layout's beige .active background.
 */
.sidebar .nav-item.active { background-color: transparent; }

.sidebar .nav-item .nav-link { font-weight: 700; letter-spacing: .01em; }
.sidebar-dark .nav-item .nav-link { color: rgba(255, 255, 255, .88); }
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:focus { color: #fff; }

.sidebar .nav-item .nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .14);
    font-size: .8rem;
    transition: background-color .15s, color .15s;
}
.sidebar-dark .nav-item .nav-link i { color: #fff; }
.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item .nav-link:focus i { background: rgba(255, 255, 255, .26); }
.sidebar-dark .nav-item.active > .nav-link i { background: #fff; color: var(--portal-brand); }
.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after { color: rgba(255, 255, 255, .6); font-size: .75rem; }

@media (min-width: 768px) {
    .sidebar:not(.toggled) .nav-item .nav-link {
        display: flex;
        align-items: center;
        width: auto;
        margin: .1rem .5rem;
        padding: .45rem .5rem;
        border-radius: .6rem;
        transition: background-color .15s;
    }
    .sidebar:not(.toggled) .nav-item .nav-link:hover { background: rgba(255, 255, 255, .1); }
    .sidebar:not(.toggled) .nav-item.active > .nav-link { background: rgba(255, 255, 255, .18); }
    .sidebar:not(.toggled) .nav-item .nav-link i { flex: none; width: 1.75rem; height: 1.75rem; margin-right: .6rem; }
    .sidebar:not(.toggled) .nav-item .nav-link span { flex: 1; font-size: .78rem; white-space: nowrap; }
    .sidebar:not(.toggled) .nav-item .nav-link[data-toggle="collapse"]::after { float: none; }
    .sidebar:not(.toggled) .nav-item .collapse,
    .sidebar:not(.toggled) .nav-item .collapsing { margin: .15rem .5rem .5rem; }
}

/* Collapsed (icon-only) sidebar and small screens: icon above a short label. */
.sidebar.toggled .nav-item .nav-link span { font-size: .62rem; margin-top: .3rem; }
@media (max-width: 767.98px) {
    .sidebar .nav-item .nav-link span { font-size: .62rem; margin-top: .3rem; }
}

/* Submenus */
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner { font-size: .78rem; padding: .4rem 0; }
.sidebar .nav-item .collapse .collapse-inner .collapse-header,
.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
    padding: .6rem 1.25rem .3rem;
    font-size: .62rem;
    letter-spacing: .08em;
    color: #a8865a;
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    padding: .42rem .75rem;
    font-weight: 600;
    color: #4a4b55;
    border-left: 3px solid transparent;
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover { background-color: var(--portal-brand-soft); color: var(--portal-brand-dark); }
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    background-color: var(--portal-brand-tint);
    border-left-color: var(--portal-brand);
    color: #8a5a1c !important;
    font-weight: 700;
}

/* ======================================================================
 * App-wide look, matching the sidebar: brand gold accents on white,
 * soft rounded surfaces, small bold labels and gold small-caps headings.
 * ====================================================================== */

/* ---------- Brand colour in place of Bootstrap's blue primary ---------- */

body { -webkit-font-smoothing: antialiased; }
a { color: var(--portal-primary); }
a:hover { color: var(--portal-brand-dark); }

.text-primary { color: var(--portal-primary) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--portal-brand-dark) !important; }
.bg-primary, .badge-primary { background-color: var(--portal-brand) !important; color: #fff; }
.border-primary { border-color: var(--portal-brand) !important; }
.border-left-primary { border-left-color: var(--portal-brand) !important; }
.progress-bar { background-color: var(--portal-brand); }

.btn { font-weight: 600; border-radius: .5rem; }
.btn-sm { border-radius: .4rem; }
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled { background-color: #a86d22; border-color: #a86d22; color: #fff; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active { background-color: var(--portal-brand-dark); border-color: var(--portal-brand-dark); color: #fff; }
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus { box-shadow: 0 0 0 .2rem var(--portal-ring); }
.btn-outline-primary { color: var(--portal-primary); border-color: #d9bc93; }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--portal-brand); border-color: var(--portal-brand); color: #fff; }
.btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--portal-ring); }
.btn-link { color: var(--portal-primary); }
.btn-link:hover { color: var(--portal-brand-dark); }

.page-item.active .page-link { background-color: var(--portal-primary); border-color: var(--portal-primary); }
.page-link { color: var(--portal-primary); }
.page-link:focus { box-shadow: 0 0 0 .2rem var(--portal-ring); }

.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--portal-brand); border-color: var(--portal-brand); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem var(--portal-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #d9bc93; }

/* ---------- Top bar ---------- */

.topbar.portal-topbar {
    height: 4.5rem;
    padding: 0 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--portal-border);
    box-shadow: 0 1px 2px rgba(58, 59, 69, .04);
}
.portal-back {
    display: inline-flex; align-items: center; flex: none;
    height: 2.25rem; padding: 0 .95rem;
    border: 1px solid var(--portal-border); border-radius: 2rem; background: #fff;
    color: var(--portal-heading); font-size: .8rem; font-weight: 700;
    text-decoration: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}
.portal-back i { font-size: .75rem; }
.portal-back:hover { background: var(--portal-brand-soft); border-color: #ead8bd; color: var(--portal-brand-dark); }
.portal-topbar-title { min-width: 0; margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid var(--portal-border); line-height: 1.25; }
.portal-topbar-system { color: #a8865a; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-topbar-bureau { margin-top: .15rem; overflow: hidden; color: var(--portal-heading); font-size: .98rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.portal-topbar-bureau i { color: var(--portal-brand); font-size: .8rem; }
.topbar #sidebarToggleTop { color: var(--portal-brand); }
.topbar #sidebarToggleTop:hover { background: var(--portal-brand-soft); }

.topbar .nav-item .nav-link.portal-user {
    height: auto; gap: .7rem;
    padding: .3rem .5rem .3rem .85rem; border-radius: 2rem;
    transition: background-color .15s;
}
.topbar .nav-item .nav-link.portal-user:hover { background: var(--portal-soft); }
.portal-user-text { flex-direction: column; align-items: flex-end; line-height: 1.25; }
.portal-user-name { color: var(--portal-heading); font-size: .82rem; font-weight: 800; }
.portal-user-date { color: var(--portal-muted); font-size: .7rem; font-weight: 600; }
.portal-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.35rem; height: 2.35rem; border-radius: 50%;
    background: var(--portal-brand); color: #fff;
    font-size: .8rem; font-weight: 800; letter-spacing: .03em;
    box-shadow: 0 0 0 3px var(--portal-brand-soft);
}
.portal-user-caret { color: var(--portal-muted); font-size: .6rem; }

.dropdown-menu { border: 1px solid var(--portal-border); border-radius: .6rem; padding: .4rem; font-size: .85rem; }
.dropdown-item { border-radius: .4rem; padding: .45rem .75rem; font-weight: 600; color: var(--portal-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--portal-brand-soft); color: var(--portal-brand-dark); }
.dropdown-item:active { background: var(--portal-brand); color: #fff; }
.dropdown-divider { border-top-color: var(--portal-border); margin: .35rem 0; }

/* ---------- Page cards and titles ---------- */

#content .card { border: 1px solid var(--portal-border) !important; border-radius: var(--portal-radius); }
#content .card.shadow-lg,
#content .card.shadow { box-shadow: var(--portal-shadow) !important; }
#content .card.my-5 { margin-top: .5rem !important; margin-bottom: 2rem !important; }
#content .card > .card-header { background-color: #fff; border-bottom: 1px solid var(--portal-border); }
#content .card > .card-header:first-child { border-radius: var(--portal-radius) var(--portal-radius) 0 0; }
#content .card > .card-footer { background-color: var(--portal-soft); border-top: 1px solid var(--portal-border); }

/* Page titles: dark, bold, with a short gold bar like the active submenu item. */
#content .card > .card-header h1.text-primary,
#content .card > .card-header h2.text-primary,
#content .card > .card-header h3.text-primary,
#content .card > .card-header h3.font-weight-bold {
    display: flex; align-items: center;
    color: var(--portal-heading) !important;
    font-size: 1.35rem; font-weight: 800 !important; letter-spacing: -.01em;
}
#content .card > .card-header h1.text-primary::before,
#content .card > .card-header h2.text-primary::before,
#content .card > .card-header h3.text-primary::before,
#content .card > .card-header h3.font-weight-bold::before {
    content: ""; flex: none;
    width: 4px; height: 1.15em; margin-right: .65rem;
    border-radius: 2px; background: var(--portal-brand);
}
/* Section headings inside cards (chart titles, panels) read as small gold labels. */
#content .card > .card-header h6.text-primary {
    color: var(--portal-primary) !important;
    font-size: .78rem; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase;
}
/* Dashboard stat cards. */
#content .card .text-xs.text-uppercase { font-size: .66rem; letter-spacing: .07em; }

/* ---------- Forms ---------- */

.card-body .form-group label,
.card-body label.text-primary,
.modal-body .form-group label {
    margin-bottom: .35rem;
    color: #4a4b55 !important;
    font-size: .8rem;
    font-weight: 700;
}
.card-body .form-group label.custom-control-label { font-weight: 600; }
.form-control,
.custom-select { border-color: var(--portal-input-border); border-radius: .5rem; }
.form-control:focus,
.custom-select:focus { border-color: #d9bc93; box-shadow: 0 0 0 .2rem var(--portal-ring); }
.form-control:disabled,
.form-control[readonly] { background-color: #f4f5f8; }
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text { background: #eef0f6; border-color: var(--portal-input-border); }

/* select2 (searchable selects) */
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { border-color: var(--portal-input-border); border-radius: .5rem; }
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #d9bc93; box-shadow: 0 0 0 .2rem var(--portal-ring); }
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--portal-brand); color: #fff; }
.select2-dropdown { border-color: var(--portal-border); border-radius: .5rem; overflow: hidden; }

/* ---------- Alerts and dialogs ---------- */

.alert { border: 0; border-left: 4px solid; border-radius: .6rem; font-size: .88rem; font-weight: 600; }
.alert-success { background: #e9f7f0; color: #13855c; }
.alert-danger { background: #fdeeed; color: #b8352a; }
.alert-warning { background: #fdf5e4; color: #8a5a1c; }
.alert-info { background: #e8f4f8; color: #1f6f8b; }

.modal-content { border: 0; border-radius: var(--portal-radius); box-shadow: 0 1rem 3rem rgba(27, 28, 34, .18); }
.modal-header { border-bottom: 1px solid var(--portal-border); padding: 1rem 1.25rem; }
.modal-title { color: var(--portal-heading); font-size: 1.05rem; font-weight: 800; }
.modal-footer { border-top: 1px solid var(--portal-border); background: var(--portal-soft); border-radius: 0 0 var(--portal-radius) var(--portal-radius); }

.badge { border-radius: 1rem; padding: .3em .65em; font-weight: 700; letter-spacing: .02em; }

/* ---------- Sign-in and registration pages ---------- */

body.bg-gradient-primary {
    background-color: var(--portal-brand);
    background-image: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .16), transparent 45%),
                      linear-gradient(160deg, #c98a3a 0%, #a86d22 100%);
    background-attachment: fixed;
}
body.bg-gradient-primary .card { border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(60, 36, 8, .25) !important; }
body.bg-gradient-primary .card .card-header { background: #fff; border-bottom: 1px solid var(--portal-border); font-weight: 800; color: var(--portal-heading); }
.btn-user { font-weight: 700; letter-spacing: .02em; }

/* Export buttons on report pages (styled per page as .btnExport). */
#content .btnExport {
    display: inline-flex; align-items: center; margin-right: .4rem; padding: .3rem .8rem;
    border: 1px solid var(--portal-input-border); border-radius: 2rem; background: #fff;
    color: var(--portal-heading); font-size: .74rem; font-weight: 700; letter-spacing: .03em; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
#content .btnExport:hover { background: var(--portal-brand-soft); border-color: #ead8bd; color: var(--portal-brand-dark); }
#content .btnExport .fa-file-pdf { color: #c0392b; }
#content .btnExport .fa-file-excel { color: #13855c; }
#content .btnExport .fa-file-csv, #content .btnExport .fa-file-word { color: #2b6cb0; }

/* DataTables responsive expand/collapse buttons. */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-column > tbody > tr > td.control::before {
    background-color: var(--portal-brand); box-shadow: 0 0 0 1px rgba(138, 90, 28, .35);
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-column > tbody > tr.parent > td.control::before { background-color: var(--portal-brand-dark); }

/* Blue top bar variant: add .portal-topbar-blue to the nav; remove it for the white bar. */
.topbar.portal-topbar.portal-topbar-blue { background: #00a2e8; border-bottom-color: #0091d0; box-shadow: 0 2px 6px rgba(0, 80, 120, .18); }
.portal-topbar-blue .portal-back { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.portal-topbar-blue .portal-back:hover { background: #fff; border-color: #fff; color: #007bb0; }
.portal-topbar-blue .portal-topbar-title { border-left-color: rgba(255, 255, 255, .3); }
.portal-topbar-blue .portal-topbar-system { color: rgba(255, 255, 255, .85); }
.portal-topbar-blue .portal-topbar-bureau,
.portal-topbar-blue .portal-topbar-bureau i { color: #fff; }
.portal-topbar-blue .portal-user-name { color: #fff; }
.portal-topbar-blue .portal-user-date,
.portal-topbar-blue .portal-user-caret { color: rgba(255, 255, 255, .85); }
.topbar.portal-topbar-blue .nav-item .nav-link.portal-user:hover { background: rgba(255, 255, 255, .14); }
.portal-topbar-blue .portal-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.topbar.portal-topbar-blue #sidebarToggleTop { color: #fff; }
.topbar.portal-topbar-blue #sidebarToggleTop:hover { background: rgba(255, 255, 255, .16); }