/*
 * The dashboard in the landing page's style.
 *
 * The dashboard is Argon: a purple gradient band across the top, indigo, cyan,
 * orange and green accents, a dark chart card, Open Sans. The landing page
 * (resources/views/qrsaas/minimal.blade.php) is white, in IBM Plex Sans, with
 * one brand blue, thin borders and 10-16px corners. This file puts the first in
 * the second's clothes, after Argon's and custom.css's, so almost no view has
 * to change: the pages keep their classes, and the rules below say what those
 * classes look like now. The few views that did change (the shell's <head> and
 * body class, a chart card, two finance columns that never stacked) are where a
 * class could not carry it.
 *
 * The tokens are the landing's, copied, so a change there is a change here:
 * --db-brand is its --brand, --db-line its --line, and so on.
 *
 * Direction-neutral on purpose: the dashboard runs right to left in Arabic, and
 * css/rtl.css flips Argon's physical properties. Everything here that has a
 * side says inline-start or inline-end.
 */

:root {
    --db-brand: #2749C4;
    --db-brand-dark: #1B3596;
    --db-brand-tint: #F1F4FD;
    --db-accent: #E05B54;
    --db-accent-text: #C2413B;
    --db-ink: #14161C;
    --db-ink-2: #4A4F5C;
    --db-ink-3: #6B7080;
    --db-ink-4: #8A90A0;
    --db-line: #EDEEF2;
    --db-line-2: #D9DCE4;
    --db-surface: #FAFBFD;
    /* Status colours, kept to tints so they read as a state, not as decoration */
    --db-ok-bg: #E8F6EE;
    --db-ok: #1E7A4C;
    --db-warn-bg: #FFF4E0;
    --db-warn: #8F5B00;
    --db-bad-bg: #FDECEA;
    --db-bad: #B3332D;
    --db-radius: 10px;
    --db-radius-lg: 16px;
    --db-font: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- type */

body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .custom-select, .dropdown-menu, .nav-link, .table,
.badge, .alert, .modal-content, .card, .select2-container,
input, select, textarea, button {
    font-family: var(--db-font);
}

body {
    background: var(--db-surface);
    color: var(--db-ink);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--db-ink);
    font-weight: 600;
    letter-spacing: 0;
}

a { color: var(--db-brand); }
a:hover { color: var(--db-brand-dark); }

.text-muted { color: var(--db-ink-3) !important; }
.text-primary { color: var(--db-brand) !important; }
.text-uppercase { letter-spacing: .04em; }

/* ---------------------------------------------------------------- shell */

/* No gradient band, and no photo banner: the page is the page, and the top bar sits on it.
   A page's own title, where its header carries one, is a plain heading above the cards. */
.main-content .header,
.main-content .header[class*="bg-"] {
    background: transparent !important;
    background-image: none !important;
    min-height: 0;
    padding-top: 20px !important;
    padding-bottom: 4px !important;
}
.main-content .header > .mask { display: none; }
.main-content .header .display-2 {
    color: var(--db-ink);
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 4px;
}
.main-content .header .text-white { color: var(--db-ink-3) !important; }
.main-content .header h1, .main-content .header .display-2 { color: var(--db-ink) !important; }
.main-content .header.mt--4 { margin-top: 0 !important; }

/* The buttons at the end of a title row (a card's header, a page's header): one row of their own, one gap
   between them, and the end of the line is the right in English and the left in Arabic. */
.card-header .row > .text-right,
.header .row > .text-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Every page's main card used to reach up into the band: it stays below now. */
.main-content [class*="mt--"] {
    margin-top: 0 !important;
}
.main-content > .container-fluid,
.main-content > .container {
    padding-top: 8px;
    padding-bottom: 40px;
}

/* The top bar: white, one line of border, the page's name in ink. */
.navbar-top,
.main-content .navbar-top {
    background: #fff !important;
    border-bottom: 1px solid var(--db-line);
    padding-block: 0;
    /* Argon lays it over the band (absolute); with no band it takes its own room */
    position: relative !important;
}
.navbar-top .container-fluid { min-height: 64px; }
.navbar-top .h4,
.navbar-top .navbar-brand {
    color: var(--db-ink) !important;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
}
.navbar-top .nav-link,
.navbar-top .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: var(--db-ink-2) !important;
    font-size: 15px;
    font-weight: 500;
}
.navbar-top .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover { color: var(--db-brand) !important; }
.navbar-top .nav-link-inner--text { font-weight: 500; }
.navbar-top .avatar {
    background: var(--db-brand-tint);
    color: var(--db-brand);
    box-shadow: none;
    width: 36px;
    height: 36px;
}
.navbar-top .media-body span,
.navbar-top .media-body .mb-0 { color: var(--db-ink) !important; font-weight: 500; }

/* The sidebar: white, a hairline instead of a shadow, rounded rows. */
.navbar-vertical.navbar-expand-md {
    background: #fff !important;
    box-shadow: none;
    border-width: 0;
    border-inline-end: 1px solid var(--db-line);
}
.navbar-vertical .navbar-brand-img { max-height: 40px; }
.navbar-collapse-header .collapse-brand img { max-height: 36px; max-width: 100%; width: auto; }
.navbar-vertical .navbar-nav { padding-inline: 12px; }
.navbar-vertical .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    margin-block: 2px;
    border-radius: var(--db-radius);
    color: var(--db-ink-2) !important;
    font-size: 15px;
    font-weight: 500;
}
.navbar-vertical .navbar-nav .nav-link > i,
.navbar-vertical .navbar-nav .nav-link > .fa,
.navbar-vertical .navbar-nav .nav-link > .fas {
    min-width: 1.5rem;
    margin: 0;
    font-size: 16px;
    color: var(--db-ink-4) !important;
}
.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link[aria-expanded="true"] {
    background: var(--db-brand-tint);
    color: var(--db-brand) !important;
}
.navbar-vertical .navbar-nav .nav-link:hover > i,
.navbar-vertical .navbar-nav .nav-link.active > i,
.navbar-vertical .navbar-nav .nav-link[aria-expanded="true"] > i { color: var(--db-brand) !important; }
.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"]:after { color: var(--db-ink-4); }
.navbar-vertical .navbar-nav .nav .nav-link { padding-inline-start: 36px !important; font-weight: 400; }
.navbar-vertical hr { border-top: 1px solid var(--db-line); margin-block: 14px; }
.navbar-vertical h6.navbar-heading,
.navbar-vertical .navbar-heading {
    color: var(--db-ink-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-inline: 24px;
}

/* ---------------------------------------------------------------- cards */

.card {
    background: #fff;
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius-lg);
    box-shadow: none;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--db-line);
    border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0;
    padding: 20px 24px;
}
.card-header h3, .card-header .h3 { font-size: 18px; margin: 0; }
.card-body { padding: 24px; }
.card-footer {
    background: #fff;
    border-top: 1px solid var(--db-line);
    border-radius: 0 0 var(--db-radius-lg) var(--db-radius-lg);
    padding: 16px 24px;
}
.card-title,
.card .card-title { color: var(--db-ink-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.card-stats .card-title { margin-bottom: 4px; }
.card-stats .h2 { font-size: 24px; font-weight: 600; }
/* Four to a row leaves a label little room beside its icon once Bootstrap's gutters are taken out of it. */
.card-stats .card-body { padding: 18px 20px; }
.card-stats .card-body > .row { margin-inline: -8px; }
.card-stats .card-body > .row > [class*="col"] { padding-inline: 8px; }

/* Round, colour-coded icons become one soft square in the brand's tint. */
.icon.icon-shape,
.icon-shape {
    background: var(--db-brand-tint) !important;
    background-image: none !important;
    color: var(--db-brand) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
}
.icon-shape i { color: var(--db-brand) !important; }

/* ---------------------------------------------------------------- buttons */

.btn {
    border-radius: var(--db-radius);
    box-shadow: none !important;
    transform: none !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 9px 18px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm, .btn-group-sm > .btn { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

.btn-primary, .btn-success {
    background: var(--db-brand);
    border-color: var(--db-brand);
    color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active {
    background: var(--db-brand-dark);
    border-color: var(--db-brand-dark);
    color: #fff;
}
.btn-info { background: #fff; border: 1px solid var(--db-line-2); color: var(--db-brand); }
.btn-info:hover, .btn-info:focus { background: var(--db-brand-tint); border-color: var(--db-brand); color: var(--db-brand); }
.btn-secondary, .btn-default, .btn-dark, .btn-neutral, .btn-light {
    background: #fff;
    border: 1px solid var(--db-line-2);
    color: var(--db-ink);
}
.btn-secondary:hover, .btn-default:hover, .btn-dark:hover, .btn-neutral:hover, .btn-light:hover,
.btn-secondary:focus, .btn-default:focus, .btn-dark:focus, .btn-neutral:focus, .btn-light:focus {
    background: #fff;
    border-color: var(--db-ink-4);
    color: var(--db-ink);
}
.btn-warning {
    background: var(--db-warn-bg);
    border: 1px solid transparent;
    color: var(--db-warn);
}
.btn-warning:hover, .btn-warning:focus { background: #FFE9C2; color: var(--db-warn); }
.btn-danger {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus { background: var(--db-accent-text); border-color: var(--db-accent-text); color: #fff; }
.btn-outline-secondary { background: #fff; border: 1px solid var(--db-line-2); color: var(--db-ink-2); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--db-brand-tint); border-color: var(--db-brand); color: var(--db-brand); }
.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-default {
    background: #fff;
    border: 1px solid var(--db-line-2);
    color: var(--db-brand);
}
.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .btn-outline-default:hover {
    background: var(--db-brand-tint);
    border-color: var(--db-brand);
    color: var(--db-brand);
}
.btn-outline-danger { background: #fff; border: 1px solid var(--db-line-2); color: var(--db-accent-text); }
.btn-outline-danger:hover { background: var(--db-bad-bg); border-color: var(--db-accent); color: var(--db-accent-text); }
.btn-link { color: var(--db-brand); box-shadow: none; }

/* A table's row actions are quiet: outlined, with delete tinted. The page's own buttons stay solid. */
.table td .btn-primary, .table td .btn-info, .table td .btn-success,
.table td .btn-sm.btn-primary, .table td .btn-sm.btn-info {
    background: #fff;
    border: 1px solid var(--db-line-2);
    color: var(--db-brand);
}
.table td .btn-primary:hover, .table td .btn-info:hover, .table td .btn-success:hover {
    background: var(--db-brand-tint);
    border-color: var(--db-brand);
    color: var(--db-brand);
}
.table td .btn-danger { background: var(--db-bad-bg); border-color: transparent; color: var(--db-accent-text); }
.table td .btn-danger:hover { background: var(--db-accent); border-color: var(--db-accent); color: #fff; }
.btn:focus, .btn.focus { outline: none; box-shadow: 0 0 0 3px rgba(39, 73, 196, .18) !important; }
.btn-icon-only { padding: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- badges and alerts */

.badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 10px;
}
.badge-primary, .badge-info, .badge-default, .badge-secondary { background: var(--db-brand-tint); color: var(--db-brand); }
.badge-success { background: var(--db-ok-bg); color: var(--db-ok); }
.badge-warning { background: var(--db-warn-bg); color: var(--db-warn); }
.badge-danger { background: var(--db-bad-bg); color: var(--db-bad); }
.badge-dot i.bg-success { background: var(--db-ok) !important; }
.badge-dot i.bg-warning { background: var(--db-warn) !important; }
.badge-dot i.bg-danger { background: var(--db-bad) !important; }

.alert {
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    box-shadow: none;
    font-size: 15px;
}
.alert-success { background: var(--db-ok-bg); border-color: #CBEBD8; color: var(--db-ok); }
.alert-warning { background: var(--db-warn-bg); border-color: #F6DDAE; color: var(--db-warn); }
.alert-danger { background: var(--db-bad-bg); border-color: #F6CDC9; color: var(--db-bad); }
.alert-info, .alert-primary, .alert-default, .alert-secondary { background: var(--db-brand-tint); border-color: #DCE3F7; color: var(--db-brand-dark); }
.alert .alert-text, .alert strong { color: inherit; }
.alert .close { color: inherit; }

/* ---------------------------------------------------------------- forms */

.form-control, .custom-select {
    height: 44px;
    background: #fff;
    border: 1px solid var(--db-line-2);
    border-radius: var(--db-radius);
    box-shadow: none;
    color: var(--db-ink);
    font-size: 15px;
}
textarea.form-control { height: auto; }
.form-control::placeholder { color: var(--db-ink-4); }
.form-control:focus, .custom-select:focus {
    border-color: var(--db-brand);
    box-shadow: 0 0 0 3px rgba(39, 73, 196, .14);
    color: var(--db-ink);
}
.form-control-label, label.form-control-label, .form-group > label {
    color: var(--db-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}
.form-control-sm { height: 36px; border-radius: 8px; }
/* Argon marks a field's wrapper `.focused` and tints the border pale cyan; keep the brand's instead. */
.focused .form-control, .focused .custom-select { border-color: var(--db-line-2); }
.focused .form-control:focus, .focused .custom-select:focus { border-color: var(--db-brand); }
.focused .input-group-text { background: var(--db-surface); border-color: var(--db-line-2); color: var(--db-ink-3); }
.input-group-text { background: var(--db-surface); border: 1px solid var(--db-line-2); color: var(--db-ink-3); border-radius: var(--db-radius); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--db-brand); border-color: var(--db-brand); }
.custom-toggle input:checked + .custom-toggle-slider { border-color: var(--db-brand); }
.custom-toggle input:checked + .custom-toggle-slider:before { background: var(--db-brand); }
/* select2 copies the select's classes onto its container, so the container is a .form-control, and
   js/select2.js then zeroes the inner selection's border: the container is the field. Where the
   container is not a .form-control, the selection is the field. */
.form-group .select2-container,
.select2-container.form-control { width: 100% !important; }
.select2-container.form-control {
    height: 44px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--db-line-2);
    border-radius: var(--db-radius);
    box-shadow: none;
}
.select2-container.form-control .select2-selection--single {
    height: 42px !important;
    min-height: 0;
    margin: 0 !important;
    border: 0 !important;
    background: transparent;
}
.select2-container--default:not(.form-control) .select2-selection--single,
.select2-container--default:not(.form-control) .select2-selection--multiple {
    min-height: 44px;
    border: 1px solid var(--db-line-2) !important;
    border-radius: var(--db-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-inline: 14px 34px; color: var(--db-ink) !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--db-ink-4); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 0 !important; height: 42px; }
.select2-container.form-control.select2-container--focus,
.select2-container.form-control.select2-container--open,
.select2-container--default.select2-container--focus:not(.form-control) .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--db-brand);
}
.select2-container.form-control.select2-container--focus,
.select2-container.form-control.select2-container--open { box-shadow: 0 0 0 3px rgba(39, 73, 196, .14); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--db-brand); }
.select2-dropdown { border: 1px solid var(--db-line-2); border-radius: var(--db-radius); }

/* ---------------------------------------------------------------- tables */

.table { color: var(--db-ink); }
.table thead th,
.thead-light th {
    background: var(--db-surface) !important;
    border-bottom: 1px solid var(--db-line) !important;
    border-top: 0;
    color: var(--db-ink-3) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table td, .table th { border-top: 1px solid var(--db-line); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--db-surface); }
.table-flush td, .table-flush th { border-inline: 0; }
.table td, .table tbody th { font-size: 15px; }
.table .btn-icon-only { color: var(--db-ink-3); }

/* ---------------------------------------------------------------- navigation widgets */

.pagination .page-link {
    border: 1px solid var(--db-line-2);
    border-radius: 8px;
    color: var(--db-ink-2);
    margin-inline: 3px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.pagination .page-link:hover { background: var(--db-brand-tint); border-color: var(--db-brand); color: var(--db-brand); }
.pagination .page-item.active .page-link { background: var(--db-brand); border-color: var(--db-brand); color: #fff; box-shadow: none; }

.dropdown-menu {
    border: 1px solid var(--db-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 22, 28, .10);
    padding: 6px;
}
.dropdown-item { border-radius: 8px; color: var(--db-ink-2); font-size: 15px; padding: 8px 12px; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: var(--db-brand-tint); color: var(--db-brand); }
.dropdown-header { color: var(--db-ink-4); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dropdown-divider { border-top: 1px solid var(--db-line); }

.nav-pills .nav-link {
    background: #fff;
    border: 1px solid var(--db-line-2);
    border-radius: var(--db-radius);
    box-shadow: none;
    color: var(--db-ink-2);
    font-weight: 500;
}
.nav-pills .nav-link:hover { background: var(--db-brand-tint); border-color: var(--db-brand); color: var(--db-brand); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--db-brand); border-color: var(--db-brand); color: #fff; box-shadow: none; }
/* The pills sit in a wrapping row with one gap between neighbours. Argon spaced them with a right-hand
   padding on every item but the last, which on a right-to-left page put each gap on the wrong side of
   its pill and left none before the last one: "CSS & JS" and "SMTP" touched. The icon and the label are
   one flex pair, so the icon is first at the start of the line whatever script the label is in. */
.nav-pills { gap: 8px; }
.nav-pills .nav-item,
.nav-pills .nav-item:not(:last-child) { margin: 0 !important; padding: 0 !important; }
.nav-pills .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 !important; }
.nav-pills .nav-link > i { margin: 0 !important; }
.nav-tabs { border-bottom: 1px solid var(--db-line); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--db-ink-3); font-weight: 500; }
.nav-tabs .nav-link.active { background: transparent; border-bottom-color: var(--db-brand); color: var(--db-brand); }

.modal-content { border: 1px solid var(--db-line); border-radius: var(--db-radius-lg); box-shadow: 0 24px 64px rgba(20, 22, 28, .16); }
.modal-header { border-bottom: 1px solid var(--db-line); padding: 20px 24px; }
.modal-footer { border-top: 1px solid var(--db-line); }

.progress { background: var(--db-line); border-radius: 999px; box-shadow: none; }
.progress-bar { background: var(--db-brand); }
.bg-primary { background-color: var(--db-brand) !important; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 767.98px) {
    .navbar-vertical.navbar-expand-md {
        border-inline-end: 0;
        border-bottom: 1px solid var(--db-line);
        padding-block: 8px;
    }
    .main-content > .container-fluid,
    .main-content > .container { padding-inline: 16px; }
    .card-body, .card-header, .card-footer { padding-inline: 18px; }
    /* the desktop top bar has nothing in it below 768px: the sidebar's own bar carries the menu and the user */
    .navbar-top, .main-content .navbar-top { display: none !important; }
    .main-content .header, .main-content .header[class*="bg-"] { padding-block: 12px 0 !important; }
    /* A card's title row: the buttons beside the title keep their own width; two or more drop under it */
    .card-header .row > .text-right { flex: 1 1 auto; width: auto; max-width: 100%; }
    .card-header .row:has(> .text-right > .btn ~ .btn) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .card-header .row:has(> .text-right > .btn ~ .btn) > .text-right { justify-content: flex-start; margin-top: 12px; }
}

/* ---------------------------------------------------------------- the rest of the page frame */

/* Argon's footer is an empty strip of tinted padding on most pages. */
.main-content .footer,
.footer { background: transparent; padding: 12px 0; }
.bg-secondary { background-color: var(--db-surface) !important; }
.bg-white { background-color: #fff !important; }
.text-success { color: var(--db-ok) !important; }
.text-danger { color: var(--db-accent-text) !important; }
.text-warning { color: var(--db-warn) !important; }
.text-info { color: var(--db-brand) !important; }
/* A card that was dark gradient or coloured keeps no gradient: it is one white card. */
.card.bg-gradient-default, .card.bg-gradient-primary, .card.bg-gradient-info, .card.bg-gradient-success,
.card.bg-gradient-danger, .card.bg-gradient-warning, .card.bg-gradient-orange, .card.bg-default {
    background: #fff !important;
    background-image: none !important;
}

/* ---------------------------------------------------------------- menu management (items) */

.alert.category-container {
    display: block;
    background: var(--db-brand-tint);
    border: 1px solid #DCE3F7;
    border-radius: 12px;
    color: var(--db-ink);
    margin-block: 24px 16px;
    padding: 12px 16px;
}
.category-container > .row { align-items: center; flex-wrap: nowrap; }
.category-container .h1,
.category-container .text-white {
    color: var(--db-ink) !important;
    font-size: 20px;
    font-weight: 600;
}
.category-container .col-auto > .row { flex-wrap: nowrap; align-items: center; gap: 6px; margin-inline: 0; }
@media (max-width: 767.98px) {
    .category-container > .row { flex-wrap: wrap; row-gap: 10px; }
    .category-container > .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
    .category-container .col-auto > .row { flex-wrap: wrap; }
}
.category-container .btn-icon,
.category-container .btn-sm {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.category-container .btn:not(.btn-primary) { background: #fff; border: 1px solid var(--db-line-2); color: var(--db-ink-2); }
.category-container .btn:not(.btn-primary):hover { background: var(--db-brand-tint); border-color: var(--db-brand); color: var(--db-brand); }
.category-container .btn-danger:hover { background: var(--db-bad-bg); border-color: var(--db-accent); color: var(--db-accent-text); }

/* An item: its name in ink, its state as a quiet label. */
h3.card-title.text-primary,
.card h3.card-title {
    color: var(--db-ink) !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
}
.card .card-text.description { color: var(--db-ink-3); font-size: 14px; }
.card .card-img-top { border-radius: var(--db-radius-lg) var(--db-radius-lg) 0 0; }
.card .badge-pill { font-size: 13px; }
.card .text-success.mr-2 { font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* The green "+" picture becomes a dashed tile with the brand's plus. */
.card:has(> img[src*="add_new_item"]) {
    background: transparent;
    border: 2px dashed var(--db-line-2);
    justify-content: center;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.card:has(> img[src*="add_new_item"]):hover { border-color: var(--db-brand); background: var(--db-brand-tint); }
.card:has(> img[src*="add_new_item"]) > img { display: none; }
.card:has(> img[src*="add_new_item"]) .card-body { padding-block: 40px; }
.card:has(> img[src*="add_new_item"]) .card-body::before {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--db-brand-tint);
    color: var(--db-brand);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}
.card:has(> img[src*="add_new_item"]) h3.card-title { color: var(--db-brand) !important; font-size: 15px; }

/* The sidebar's foot: version and server time, small and quiet. */
.navbar-vertical .navbar-heading {
    color: var(--db-ink-4) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding-inline: 0;
}
.navbar-vertical .navbar-collapse h6:not(.navbar-heading) {
    color: var(--db-ink-4);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------------------------------------------------------------- right-to-left */

/* css/rtl.css only turns the body around; Bootstrap's left/right spacing helpers keep their side.
   These are the icon-and-label gaps, flipped to the other side when the page is read right to left. */
.dash-rtl .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
.dash-rtl .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.dash-rtl .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.dash-rtl .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
.dash-rtl .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.dash-rtl .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* Bootstrap lists clear their left padding, but a browser's own indent for a list is the inline-start one,
   which is the right-hand side in Arabic: every pill row and menu list sat 40px in from the card's edge. */
.nav, .navbar-nav, .list-unstyled, .list-group, .pagination { padding-inline-start: 0; }

/* The classes that name a side mean the line's start or end: in Arabic the buttons Bootstrap calls "right"
   belong at the left. */
.dash-rtl .text-right { text-align: left !important; }
.dash-rtl .text-left { text-align: right !important; }
.dash-rtl .float-right { float: left !important; }
.dash-rtl .float-left { float: right !important; }
/* bootstrap-datepicker gives every .datepicker direction: ltr, the range container included, which put
   "to" before "from" on a page read from the right. Only the calendar that opens stays left to right. */
.input-daterange.datepicker { direction: inherit; }
/* Bootstrap rounds an input group's outer corners with left and right named in the corner properties, so
   with the icon box at the right the rounding was on the inner corners. */
.dash-rtl .input-group-prepend .input-group-text,
.dash-rtl .input-group-prepend .btn { border-radius: 0 var(--db-radius) var(--db-radius) 0; }
.dash-rtl .input-group > .form-control:not(:first-child) { border-radius: var(--db-radius) 0 0 var(--db-radius); }

/* ---------------------------------------------------------------- signed-out pages on this shell */

/* /register and the password pages sit on Argon's navy; they take the page colour and a white card. */
body.bg-default { background-color: var(--db-surface) !important; }
.bg-default .card,
.bg-default .card.bg-secondary { background: #fff !important; border: 1px solid var(--db-line); box-shadow: 0 8px 28px rgba(20, 22, 28, .06); }
.bg-default .text-light,
.bg-default a.text-light { color: var(--db-ink-3) !important; }
.input-group-alternative {
    background: #fff;
    border: 1px solid var(--db-line-2);
    border-radius: var(--db-radius);
    box-shadow: none;
}
.input-group-alternative .form-control,
.input-group-alternative .input-group-text { background: transparent; border: 0; box-shadow: none; }
.input-group-alternative .input-group-text i { color: var(--db-ink-3); }
/* The phone field's flag picker wraps the input; inside an input group it stays on the group's line. */
.input-group > .iti { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-alternative .iti input { border: 0; }

/* ---------------------------------------------------------------- breadcrumbs */

/* The breadcrumb row sits straight in the page header, with no container to take its negative margins. */
.main-content .header > .row { margin-inline: 0; }
.breadcrumb {
    background: #fff;
    border: 1px solid var(--db-line);
    border-radius: var(--db-radius);
    padding: 8px 14px;
}
.breadcrumb-item a { color: var(--db-brand); }
.breadcrumb-item.active { color: var(--db-ink-3); }

/* Embedded videos carry a fixed width attribute; they stop at the card's edge. */
.main-content iframe { max-width: 100%; }

/* ---------------------------------------------------------------- filters in one row */

/* Orders and finances: every filter and the buttons in one row, wrapping only when the card is too
   narrow. The two dates are as wide as a date; the selects share what is left. */
.filters-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 10px; }
.filters-bar .form-group { margin-bottom: 0; }
.filters-bar .form-control-label { white-space: nowrap; }
.filters-dates { display: flex; gap: 10px; }
.filters-dates .form-group { width: 150px; }
.filters-bar .filter-field { flex: 1 1 140px; min-width: 140px; max-width: 240px; }
.filters-actions { display: flex; align-items: center; gap: 8px; }
.filters-actions .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; white-space: nowrap; }
@media (max-width: 767.98px) {
    .filters-bar > *, .filters-bar .filter-field { flex: 1 1 100%; max-width: none; }
    .filters-dates { flex-wrap: wrap; }
    .filters-dates .form-group { flex: 1 1 140px; width: auto; }
    .filters-actions .btn { flex: 1 1 auto; }
}