/* Decisions of ours. Template and plugin bugs go in template-fixes.css instead. */

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.stat-card .stat-value { font-size: 1.4rem; font-weight: 600; margin: .25rem 0; }

.text-pre-line { white-space: pre-line; }

.config-hint { max-width: 720px; }
.config-narrow { max-width: 420px; }

/* A dashboard list scrolls inside its card, however many rows it has. */
.dashboard-list { max-height: 360px; overflow-y: auto; }
.dashboard-list thead th { position: sticky; top: 0; z-index: 1; background: #fff; }

/* A row that opens something says so. */
tr.row-link { cursor: pointer; }

/* Sort arrows and the table's search and paging controls. */
.dataTables_wrapper .dataTables_filter input { margin-inline-start: 0; }
.dataTables_wrapper .pagination { margin-top: .75rem; }
.dataTables_wrapper .dataTables_info { padding-top: 1rem; color: #7987a1; }
.dataTables_wrapper .dataTables_length select { width: auto; display: inline-block; }
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; position: relative; padding-inline-end: 1.75rem; }
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before { display: none; }
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute;
    top: 50%;
    bottom: auto;
    inset-inline-end: .6rem;
    transform: translateY(-50%);
    font-size: .85rem;
    line-height: 1;
}
table.dataTable thead th.sorting::after { content: "\2195"; opacity: .45; }
table.dataTable thead th.sorting_asc::after { content: "\2191"; opacity: 1; color: var(--primary-bg-color, #c22b26); }
table.dataTable thead th.sorting_desc::after { content: "\2193"; opacity: 1; color: var(--primary-bg-color, #c22b26); }

/* The open tab has to be obvious at a glance. */
.card-header-tabs .nav-link, .costs-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #7987a1; }
.card-header-tabs .nav-link.active, .costs-tabs .nav-link.active { border-bottom-color: var(--primary-bg-color, #c22b26); background: transparent; color: var(--primary-bg-color, #c22b26); font-weight: 600; }

/* Multi-select chips: the plugin's default leaves white text on light grey. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .5rem;
    border: 1px solid #d6dbe6;
    border-radius: 4px;
    background: #f1f3f8;
    color: #1d212f;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display { color: inherit; padding: 0; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7987a1;
    line-height: 1;
}

/* Header account menu */
.app-user-btn { border: 0; background: transparent; padding: .25rem .5rem; color: inherit; white-space: nowrap; }

/* Sign-in pages */
.login-page { background: #f4f5f7; min-height: 100vh; }
.login-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 440px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 1.5rem 16px;
}
.login-card { border-radius: 12px; }
.login-logo { max-height: 110px; max-width: 100%; }

/* An arrow means earlier or later, so it follows the reading direction. */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* The Costs tabs sit on the page rather than in a card header, so they draw their own line. */
.costs-tabs { margin-inline: 0; border-bottom: 1px solid #e3e6ee; }

/* Stat cards in a row stay level when one carries an extra line. */
.stat-row > [class*="col-"] { display: flex; }
.stat-row .stat-card { width: 100%; }