/*
 * Alkhawaja brand theme -- loaded LAST (after style.bundle, Custom.css, Custom.ar.css,
 * history-drawer.css) on every layout, so it is the single source of truth for brand colour,
 * buttons and the Bootstrap 5 classes the views use.
 *
 * Palette sampled from /assets1/media/logos/Logo.png:
 *   navy   #0E2F63  "AlKhawaja Real Estate" wordmark
 *   blue   #2C8DC4  the bright crescent / towers
 *   steel  #28638E  the shaded tower faces
 *
 * The UI runs Bootstrap 4.5 (Metronic 7), but many views were written with Bootstrap 5 class
 * names (fw-bold, form-select, form-switch, text-end, gap-2, me-1, badge bg-*, ...) that
 * Bootstrap 4 does not define. Section 6 provides those so the markup renders as intended;
 * spacing utilities use logical properties so they flip correctly in Arabic (RTL).
 */

:root {
    --brand-navy: #0E2F63;
    --brand-navy-hover: #0A2349;
    --brand-blue: #2C8DC4;
    --brand-blue-hover: #2477A7;
    --brand-blue-active: #1F6891;
    --brand-steel: #28638E;
    --brand-steel-hover: #1F4F72;
    --brand-steel-active: #1A4461;
    --brand-tint: #E6F2F9;      /* light blue wash for hovers, light buttons, table hover */
    --brand-tint-strong: #CCE4F2;
    --brand-link: #1F74A8;      /* blue darkened for AA contrast on white */
    --brand-focus: rgba(44, 141, 196, 0.25);
    --brand-border: #D5DEE6;
    --brand-text: #1F2A37;
    --brand-sky: #7FBFE3;       /* light brand blue, for a 4th/5th chart series */
    /* Status colours, tuned to sit next to the brand blues */
    --status-success: #1E9E6A;
    --status-warning: #F2A900;
    --status-danger: #D63B4C;
}

/* ============================================================
   0. Tones for KPI tiles / summary cards (Dashboard, Task Management, CRM).
   Put .tone-* on the card; the icon circle, count and label pick the colour up.
   Chart series in those pages use the same hex values.
   ============================================================ */

.tone-navy { --tone: var(--brand-navy); --tone-bg: #EDF0F6; --tone-icon-bg: #D5DCE9; }
.tone-blue { --tone: var(--brand-blue); --tone-bg: #E9F4FA; --tone-icon-bg: #CCE4F2; }
.tone-steel { --tone: var(--brand-steel); --tone-bg: #ECF2F7; --tone-icon-bg: #D2E0EA; }
.tone-green { --tone: var(--status-success); --tone-bg: #E9F6F0; --tone-icon-bg: #CDEBDC; }
.tone-amber { --tone: #B77F00; --tone-bg: #FEF7E4; --tone-icon-bg: #FBE7B0; } /* darker text amber for contrast */
.tone-red { --tone: var(--status-danger); --tone-bg: #FCEDEF; --tone-icon-bg: #F7D0D5; }

/* Compact KPI tile for list pages:
   <div class="stat-tile tone-blue"><div class="stat-tile-icon"><i class="la la-..."></i></div>
     <div><div class="stat-tile-label">..</div><div class="stat-tile-count">..</div></div></div> */
.stat-tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: .9rem 1rem;
    background: #ffffff;
    border-radius: .85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.stat-tile-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    background-color: var(--tone-icon-bg, var(--brand-tint));
}

    .stat-tile-icon i,
    .stat-tile-icon i::before {
        color: var(--tone, var(--brand-blue)) !important;
        font-size: 22px !important;
    }

.stat-tile-label {
    font-size: 13px;
    font-weight: 600;
    color: #5E6278;
    line-height: 1.2;
}

.stat-tile > div:last-child {
    min-width: 0;   /* lets a long amount wrap instead of pushing the tile wider */
}

.stat-tile-count {
    white-space: nowrap;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tone, var(--brand-text));
}

/* Money values (e.g. 38,742.250) are longer than counts */
.stat-tile-count.stat-tile-amount {
    font-size: 18px;
}

.stat-tile-sub {
    font-size: 11px;
    color: #8A94A6;
}

/* A checkbox / switch sitting in a filter row: no box of its own, just the same height as
   the inputs beside it so it lines up with them vertically. */
.filter-check {
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0;
}

[class*="tone-"].stat-tile,
[class*="tone-"].task-summary-card,
[class*="tone-"].crm-summary-card {
    background-color: var(--tone-bg) !important;
    border: 1px solid transparent;
    border-inline-start: 4px solid var(--tone);
}

[class*="tone-"] .task-summary-icon {
    background-color: var(--tone-icon-bg) !important;
    color: var(--tone) !important;
}

    /* Custom.css colours icon glyphs directly (.la:before), so the glyph needs the tone too. */
    [class*="tone-"] .task-summary-icon i,
    [class*="tone-"] .task-summary-icon i::before {
        color: var(--tone) !important;
    }

[class*="tone-"] .task-summary-count,
[class*="tone-"] .crm-summary-label {
    color: var(--tone) !important;
}

/* ============================================================
   1. Header, navigation, cards
   ============================================================ */

.header .header-top,
.header-mobile,
.header-mobile.bg-primary {
    background-color: var(--brand-navy) !important;
}

.header .header-top .header-tabs .nav-item .nav-link.active,
.header .header-top .header-tabs .nav-item .nav-link:hover {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

.card.card-custom > .card-header,
.card.card-custom1 > .card-header1,
.card.card-custom1 > .card-header {
    background-color: var(--brand-navy);
    border-bottom: 3px solid var(--brand-blue);
}

.nav.nav-pills .nav-link.active,
.nav.nav-pills .show > .nav-link,
.nav-pills-sm .nav-item .nav-link.active {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff;
}

.nav.nav-pills.nav-fill .nav-link {
    background-color: var(--brand-navy);
}

.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

.header-menu .menu-nav > .menu-item > .menu-link:hover .menu-text {
    color: var(--brand-blue);
}

/* Top bar (user name + avatar, sub-menu toggle) sits on the navy header. The generic
   btn-clean / btn-hover-transparent-primary hovers fill with near-white, which hid the white
   user name, so on the header they get a soft translucent-white highlight instead. */
.header .topbar .btn {
    color: #ffffff;
    border-radius: .6rem;
}

.header .topbar .btn:hover:not(:disabled),
.header .topbar .btn:focus,
.header .topbar .show > .btn,
.header .topbar .show .btn,
.header .topbar .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled),
.header .topbar .btn.btn-hover-transparent-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* The nested inner link shouldn't add a second highlight on top of the outer one. */
.header .topbar .btn .btn,
.header .topbar .btn .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled),
.header .topbar .btn .btn.btn-clean:focus {
    background-color: transparent !important;
}

/* Initial / chevron circles: solid brand blue with a white letter or icon. */
.header .topbar .symbol .symbol-label {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
    transition: background-color .15s ease;
}

    .header .topbar .symbol .symbol-label i,
    .header .topbar .symbol .symbol-label i::before {
        color: #ffffff !important;
    }

.header .topbar .btn:hover .symbol .symbol-label,
.header .topbar .show .symbol .symbol-label {
    background-color: var(--brand-blue-hover) !important;
}

/* WhatsApp icon that stands in for the word "WhatsApp" in the Settings sub-menu */
.menu-whatsapp-icon {
    color: #25D366;
    font-size: 1.1em;
    margin-inline-end: .4rem;
    vertical-align: -1px;
}

/* ============================================================
   2. Links
   Custom.css sets every <a> to white (for the dark header), which made plain links in page
   content invisible. :where() keeps this at low specificity so classed anchors (toolbar
   icons, action buttons, dropdown items, menu links) keep their own colours.
   ============================================================ */

:where(#kt_content, .content-body) a:not([class]) {
    color: var(--brand-link);
}

    :where(#kt_content, .content-body) a:not([class]):hover {
        color: var(--brand-blue-active);
        text-decoration: underline;
    }

.card.card-custom > .card-header a:not([class]) {
    color: #ffffff;
}

.text-primary,
.kt-font-primary,
.text-primary1 {
    color: var(--brand-blue) !important;
}

a.text-primary:hover {
    color: var(--brand-blue-active) !important;
}

.bg-primary {
    background-color: var(--brand-blue) !important;
    color: #ffffff;
}

.bg-light-primary {
    background-color: var(--brand-tint) !important;
}

.border-primary {
    border-color: var(--brand-blue) !important;
}

/* ============================================================
   3. Buttons
   Three roles, matching the logo:
     Primary   (Save, Add, Search, Submit)            solid blue
     Info      (Generate, Next, Check, Send test)     solid steel
     Secondary (Back, Close, Cancel, Previous)        steel outline, fills on hover
   Selectors repeat Metronic's :hover:not(.btn-text):not(:disabled):not(.disabled) pattern so
   they carry the same specificity as the conflicting rules in Custom.css and win by order.
   ============================================================ */

.btn {
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .2rem var(--brand-focus) !important;
    }

/* --- Primary --- */
.btn.btn-primary,
.btn.btn-primary1,
.btn.btn-primary2,
.btn.btn-default1,
.page-btn .btn-primary {
    color: #ffffff;
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}

    .btn.btn-primary i,
    .btn.btn-default1 i,
    .page-btn .btn-primary i {
        color: #ffffff;
    }

    .btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-primary:focus:not(.btn-text),
    .btn.btn-primary.focus:not(.btn-text),
    .btn.btn-primary1:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-primary2:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-default1:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-default1:focus:not(.btn-text),
    .page-btn .btn-primary:hover,
    .page-btn .btn-primary:focus {
        color: #ffffff;
        background-color: var(--brand-blue-hover);
        border-color: var(--brand-blue-hover);
    }

    .btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn.btn-primary.dropdown-toggle,
    .btn.btn-default1:not(:disabled):not(.disabled):active:not(.btn-text) {
        color: #ffffff;
        background-color: var(--brand-blue-active);
        border-color: var(--brand-blue-active);
    }

/* --- Info --- */
.btn.btn-info {
    color: #ffffff;
    background-color: var(--brand-steel);
    border-color: var(--brand-steel);
}

    .btn.btn-info i {
        color: #ffffff;
    }

    .btn.btn-info:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-info:focus:not(.btn-text),
    .btn.btn-info.focus:not(.btn-text) {
        color: #ffffff;
        background-color: var(--brand-steel-hover);
        border-color: var(--brand-steel-hover);
    }

    .btn.btn-info:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-info:not(:disabled):not(.disabled).active,
    .show > .btn.btn-info.dropdown-toggle,
    .show .btn.btn-info.btn-dropdown {
        color: #ffffff;
        background-color: var(--brand-steel-active);
        border-color: var(--brand-steel-active);
    }

/* --- Secondary (outline) --- */
.btn.btn-secondary,
.btn.btn-default2,
.btn.btn-outline-secondary,
.btn.btn-outline-brand,
.btn.btn-outline-primary,
.btn.btn-light,
.btn.btn-light-primary {
    color: var(--brand-steel);
    background-color: #ffffff;
    border-color: var(--brand-steel);
}

    .btn.btn-secondary i,
    .btn.btn-default2 i,
    .btn.btn-outline-secondary i,
    .btn.btn-outline-brand i,
    .btn.btn-outline-primary i,
    .btn.btn-light i,
    .btn.btn-light-primary i {
        color: var(--brand-steel) !important;
        margin-inline-end: .35rem;
    }

    .btn.btn-secondary:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-secondary:focus:not(.btn-text),
    .btn.btn-secondary.focus:not(.btn-text),
    .btn.btn-default2:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-default2:focus:not(.btn-text),
    .btn.btn-outline-secondary:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-outline-secondary:focus:not(.btn-text),
    .btn.btn-outline-brand:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-outline-brand:focus:not(.btn-text),
    .btn.btn-outline-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-light:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-light:focus:not(.btn-text),
    .btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-light-primary:focus:not(.btn-text),
    .btn.btn-light-primary.focus:not(.btn-text) {
        color: #ffffff;
        background-color: var(--brand-steel);
        border-color: var(--brand-steel);
    }

        .btn.btn-secondary:hover:not(:disabled) i,
        .btn.btn-default2:hover:not(:disabled) i,
        .btn.btn-outline-secondary:hover:not(:disabled) i,
        .btn.btn-outline-brand:hover:not(:disabled) i,
        .btn.btn-outline-primary:hover:not(:disabled) i,
        .btn.btn-light:hover:not(:disabled) i,
        .btn.btn-light-primary:hover:not(:disabled) i {
            color: #ffffff !important;
        }

    .btn.btn-secondary:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn.btn-secondary.dropdown-toggle,
    .show .btn.btn-secondary.btn-dropdown,
    .btn.btn-default2:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-outline-secondary:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-outline-brand:not(:disabled):not(.disabled):active:not(.btn-text),
    .btn.btn-light-primary:not(:disabled):not(.disabled):active:not(.btn-text) {
        color: #ffffff;
        background-color: var(--brand-steel-active);
        border-color: var(--brand-steel-active);
    }

/* --- Neutral white (table filter dropdowns, pager arrows) --- */
.btn.btn-white {
    color: var(--brand-text);
    background-color: #ffffff;
    border-color: var(--brand-border);
}

    .btn.btn-white:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-white:focus:not(.btn-text),
    .show > .btn.btn-white.dropdown-toggle {
        color: var(--brand-navy);
        background-color: var(--brand-tint);
        border-color: var(--brand-blue);
    }

/* --- Semantic colours: keep their meaning, fix Custom.css turning success blue --- */
.btn.btn-success {
    color: #ffffff;
    background-color: #1E9E6A;
    border-color: #1E9E6A;
}

    .btn.btn-success:hover:not(.btn-text):not(:disabled):not(.disabled),
    .btn.btn-success:focus:not(.btn-text),
    .btn.btn-success.focus:not(.btn-text),
    .btn.btn-success:not(:disabled):not(.disabled):active:not(.btn-text) {
        color: #ffffff;
        background-color: #178556;
        border-color: #178556;
    }

.btn.btn-danger:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-danger:focus:not(.btn-text) {
    background-color: #D63B4C;
    border-color: #D63B4C;
}

.btn.btn-outline-danger {
    color: #D63B4C;
    background-color: #ffffff;
    border-color: #D63B4C;
}

    .btn.btn-outline-danger:hover:not(.btn-text):not(:disabled):not(.disabled) {
        color: #ffffff;
        background-color: #D63B4C;
        border-color: #D63B4C;
    }

/* --- Icons inside buttons ---
   Custom.css paints icon glyphs themselves brand blue (.la:before, .fa, .fa-plus:before, ...),
   which made them vanish on a blue button. Solid buttons get white glyphs; outline buttons
   use the button's text colour (white once hovered). */
.btn:is(.btn-primary, .btn-primary1, .btn-primary2, .btn-default1, .btn-info, .btn-success, .btn-danger) i,
.btn:is(.btn-primary, .btn-primary1, .btn-primary2, .btn-default1, .btn-info, .btn-success, .btn-danger) i::before {
    color: #ffffff !important;
}

.btn:is(.btn-secondary, .btn-default2, .btn-outline-secondary, .btn-outline-brand, .btn-outline-primary, .btn-light, .btn-light-primary, .btn-white) i::before {
    color: inherit !important;
    background-color: transparent !important;
}

.btn:is(.btn-secondary, .btn-default2, .btn-outline-secondary, .btn-outline-brand, .btn-outline-primary, .btn-light, .btn-light-primary):hover:not(:disabled) i::before {
    color: #ffffff !important;
}

/* --- Disabled: dimmed, never re-coloured by hover --- */
.btn:disabled,
.btn.disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Header tab links and icon buttons keep Metronic's transparent "clean" style. */
.btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: var(--brand-tint);
}

/* ============================================================
   4. Forms
   ============================================================ */

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 .2rem var(--brand-focus);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-blue);
}

/* Checkbox / radio + label spacing. Views use Bootstrap 5 markup
   (.form-check > .form-check-input + .form-check-label); Bootstrap 4 positions the input
   absolutely inside padding that Metronic zeroes, so the box touched the text. Flex + gap
   gives a consistent space in both LTR and RTL. */
.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    padding-right: 0;
    min-height: 1.5rem;
}

.form-check-inline {
    display: inline-flex;
    margin-right: 0;
    margin-inline-end: 1.25rem;
}

/* Outside a .form-check (e.g. a bare checkbox in a table cell) Bootstrap 4 would still
   absolutely-position the input and pull it 1.25rem to the left. */
.form-check-input {
    position: static;
    margin-top: 0;
    margin-left: 0;
    vertical-align: middle;
}

.form-check .form-check-input {
    position: static;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
}

.form-check .form-check-label {
    margin: 0;
    cursor: pointer;
}

/* A bare checkbox/radio followed directly by its label. */
input[type="checkbox"] + label,
input[type="radio"] + label {
    margin-inline-start: .5rem;
}

.form-check input[type="checkbox"] + label,
.form-check input[type="radio"] + label {
    margin-inline-start: 0;
}

/* Bootstrap 5 toggle switch (.form-switch) */
.form-switch .form-check-input {
    -webkit-appearance: none;
    appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 1rem;
    border: 1px solid #B7C3CF;
    background-color: #D5DCE3;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
}

    .form-switch .form-check-input:checked {
        background-color: var(--brand-blue);
        border-color: var(--brand-blue);
        background-position: right center;
    }

    .form-switch .form-check-input:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem var(--brand-focus);
    }

[dir="rtl"] .form-switch .form-check-input {
    background-position: right center;
}

    [dir="rtl"] .form-switch .form-check-input:checked {
        background-position: left center;
    }

/* Bootstrap 5 .form-select, sized to match this site's .form-control */
.form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + 1.3rem + 2px);
    padding: .65rem 2.25rem .65rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #3F4254;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233F4254' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 12px 10px;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
}

.form-select-sm {
    height: calc(1.35em + 1.1rem + 2px);
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .925rem;
}

[dir="rtl"] .form-select {
    padding: .65rem 1rem .65rem 2.25rem;
    background-position: left .9rem center;
}

.form-label {
    display: inline-block;
    margin-bottom: .5rem;
    font-weight: 500;
}

/* ============================================================
   5. Tables, pagination, badges, alerts
   ============================================================ */

.table-hover tbody tr:hover {
    background-color: var(--brand-tint);
}

.dataTables_paginate a {
    color: var(--brand-steel);
}

    .dataTables_paginate a.current,
    .page-item.active .page-link,
    .dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link {
        color: #ffffff !important;
        background-color: var(--brand-blue) !important;
        border-color: var(--brand-blue) !important;
    }

.page-link {
    color: var(--brand-steel);
}

    .page-link:hover {
        color: var(--brand-navy);
        background-color: var(--brand-tint);
    }

.label.label-primary,
.badge-primary {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.label.label-light-primary {
    background-color: var(--brand-tint);
    color: var(--brand-steel);
}

.alert-primary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff;
}

.spinner.spinner-primary:before {
    border-color: var(--brand-blue);
    border-right-color: transparent;
}

.scrolltop {
    background-color: var(--brand-blue);
}

/* ============================================================
   6. Bootstrap 5 compatibility (classes used by the views, absent from Bootstrap 4)
   ============================================================ */

/* Typography */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }
.fs-1 { font-size: 2rem !important; }
.fs-2 { font-size: 1.75rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.1rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-14 { font-size: 14px !important; }

/* Alignment (logical, so "end" is left in Arabic) */
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }
.float-start { float: inline-start !important; }
.float-end { float: inline-end !important; }

/* Margin / padding: start/end */
.ms-0 { margin-inline-start: 0 !important; }
.ms-1 { margin-inline-start: .25rem !important; }
.ms-2 { margin-inline-start: .5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.ms-4 { margin-inline-start: 1.5rem !important; }
.ms-5 { margin-inline-start: 3rem !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-0 { margin-inline-end: 0 !important; }
.me-1 { margin-inline-end: .25rem !important; }
.me-2 { margin-inline-end: .5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.me-4 { margin-inline-end: 1.5rem !important; }
.me-5 { margin-inline-end: 3rem !important; }
.me-auto { margin-inline-end: auto !important; }
.ps-0 { padding-inline-start: 0 !important; }
.ps-1 { padding-inline-start: .25rem !important; }
.ps-2 { padding-inline-start: .5rem !important; }
.ps-3 { padding-inline-start: 1rem !important; }
.pe-0 { padding-inline-end: 0 !important; }
.pe-1 { padding-inline-end: .25rem !important; }
.pe-2 { padding-inline-end: .5rem !important; }
.pe-3 { padding-inline-end: 1rem !important; }

/* Flex / grid gaps */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.row-gap-1 { row-gap: .25rem !important; }
.row-gap-2 { row-gap: .5rem !important; }
.row-gap-3 { row-gap: 1rem !important; }

/* Row gutters (.row.g-*): vertical space between wrapped form columns */
.row.g-0 { margin-left: 0; margin-right: 0; }
    .row.g-0 > [class*="col"] { padding-left: 0; padding-right: 0; }
.row.g-2 { row-gap: .5rem; }
.row.g-3 { row-gap: 1rem; }
.row.g-4 { row-gap: 1.5rem; }

/* Borders / radius */
.rounded-1 { border-radius: .25rem !important; }
.rounded-2 { border-radius: .42rem !important; }
.rounded-3 { border-radius: .6rem !important; }
.border-end { border-inline-end: 1px solid #EBEDF3 !important; }
.border-start { border-inline-start: 1px solid #EBEDF3 !important; }

/* Dropdown aligned to the end of its toggle (paired with the JS shim in _Layout) */
.dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
}

[dir="rtl"] .dropdown-menu.dropdown-menu-end {
    left: 0;
    right: auto;
}

/* Badges: Bootstrap 5 writes "badge bg-success"; Bootstrap 4 badges have no padding colour */
.badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .8em;
    font-weight: 600;
    line-height: 1;
    border-radius: .42rem;
}

    /* Custom.css paints every .la glyph blue; inside a badge the icon should match the badge text
       (white on coloured badges), e.g. the Super Admin shield on User Access. */
    .badge i,
    .badge i::before {
        color: inherit !important;
    }

    .badge.bg-primary { background-color: var(--brand-blue) !important; color: #ffffff; }
    .badge.bg-secondary { background-color: #6C7A89 !important; color: #ffffff; }
    .badge.bg-info { background-color: var(--brand-steel) !important; color: #ffffff; }
    .badge.bg-success { background-color: #1E9E6A !important; color: #ffffff; }
    .badge.bg-danger { background-color: #D63B4C !important; color: #ffffff; }
    .badge.bg-warning { background-color: #F2A900 !important; color: #1F2A37; }
    .badge.bg-dark { background-color: var(--brand-navy) !important; color: #ffffff; }
    .badge.bg-light { background-color: #F3F6F9 !important; color: #3F4254; }

    /* Bootstrap 4 spellings, same colours */
    .badge.badge-info { background-color: var(--brand-steel); color: #ffffff; }
    .badge.badge-success { background-color: var(--status-success); color: #ffffff; }
    .badge.badge-danger { background-color: var(--status-danger); color: #ffffff; }
    .badge.badge-warning { background-color: var(--status-warning); color: #1F2A37; }
    .badge.badge-secondary { background-color: #6C7A89; color: #ffffff; }

/* Bootstrap 5 close "X" button */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    border: 0;
    border-radius: .375rem;
    opacity: .6;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}

    .btn-close:hover {
        opacity: 1;
    }

.modal-header .btn-close {
    margin-inline-start: auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}