@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---- Shared palette: navy-indigo primary with soft blue-grey tints (used by every portal) ----
   light variants use an 14% tint */
:root,
:root[data-bs-theme=light],
:root[data-color-theme=Blue_Theme],
:root[data-bs-theme=light][data-color-theme=Blue_Theme] {
    --bs-primary: #0f3585;
    --bs-primary-rgb: 15, 53, 133;
    --bs-light-primary: rgba(15, 53, 133, 0.14);
    --bs-primary-bg-subtle: rgba(15, 53, 133, 0.14);
    --bs-primary-border-subtle: #9aaad0;
    --bs-primary-text-emphasis: #0a1d4d;
    --bs-secondary: #55698f;
    --bs-secondary-rgb: 85, 105, 143;
    --bs-light-secondary: rgba(85, 105, 143, 0.14);
    --bs-secondary-bg-subtle: rgba(85, 105, 143, 0.14);
    --bs-secondary-border-subtle: #a9b5cc;
    --bs-secondary-text-emphasis: #2b3750;
    --bs-info: #2f6a9a;
    --bs-info-rgb: 47, 106, 154;
    --bs-light-info: rgba(47, 106, 154, 0.14);
    --bs-info-bg-subtle: rgba(47, 106, 154, 0.14);
    --bs-info-border-subtle: #9dbdd6;
    --bs-info-text-emphasis: #173a56;
    --bs-danger: #c0392b;
    --bs-danger-rgb: 192, 57, 43;
    --bs-light-danger: rgba(192, 57, 43, 0.14);
    --bs-danger-bg-subtle: rgba(192, 57, 43, 0.14);
    --bs-danger-border-subtle: #e3a39c;
    --bs-danger-text-emphasis: #6b1d15;
    --bs-warning: #9a6b00;
    --bs-warning-rgb: 154, 107, 0;
    --bs-light-warning: rgba(240, 180, 0, 0.2);
    --bs-warning-bg-subtle: rgba(240, 180, 0, 0.2);
    --bs-warning-border-subtle: #f0d27a;
    --bs-warning-text-emphasis: #6b4a00;
    --bs-success: #1b8a50;
    --bs-success-rgb: 27, 138, 80;
    --bs-light-success: rgba(27, 138, 80, 0.14);
    --bs-success-bg-subtle: rgba(27, 138, 80, 0.14);
    --bs-success-border-subtle: #8cc6a8;
    --bs-success-text-emphasis: #0d4528;
}
:root .btn-primary,
:root[data-color-theme=Blue_Theme] .btn-primary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #0f3585; --bs-btn-border-color: #0f3585;
    --bs-btn-hover-bg: #0b2a6a; --bs-btn-hover-border-color: #0b2a6a;
    --bs-btn-active-bg: #0b2a6a; --bs-btn-active-border-color: #0b2a6a;
    --bs-btn-disabled-bg: #0f3585; --bs-btn-disabled-border-color: #0f3585;
    --bs-btn-focus-shadow-rgb: 15, 53, 133;
}
:root .btn-outline-primary,
:root[data-color-theme=Blue_Theme] .btn-outline-primary {
    --bs-btn-color: #0f3585; --bs-btn-border-color: #0f3585;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f3585; --bs-btn-hover-border-color: #0f3585;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0f3585; --bs-btn-active-border-color: #0f3585;
    --bs-btn-disabled-color: #0f3585; --bs-btn-disabled-border-color: #0f3585;
    --bs-btn-focus-shadow-rgb: 15, 53, 133;
}
:root .btn-secondary,
:root[data-color-theme=Blue_Theme] .btn-secondary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #55698f; --bs-btn-border-color: #55698f;
    --bs-btn-hover-bg: #43557a; --bs-btn-hover-border-color: #43557a;
    --bs-btn-active-bg: #43557a; --bs-btn-active-border-color: #43557a;
    --bs-btn-disabled-bg: #55698f; --bs-btn-disabled-border-color: #55698f;
    --bs-btn-focus-shadow-rgb: 85, 105, 143;
}
:root .btn-outline-secondary,
:root[data-color-theme=Blue_Theme] .btn-outline-secondary {
    --bs-btn-color: #55698f; --bs-btn-border-color: #55698f;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #55698f; --bs-btn-hover-border-color: #55698f;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #55698f; --bs-btn-active-border-color: #55698f;
    --bs-btn-disabled-color: #55698f; --bs-btn-disabled-border-color: #55698f;
    --bs-btn-focus-shadow-rgb: 85, 105, 143;
}
:root .btn-info,
:root[data-color-theme=Blue_Theme] .btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #2f6a9a; --bs-btn-border-color: #2f6a9a;
    --bs-btn-hover-bg: #245580; --bs-btn-hover-border-color: #245580;
    --bs-btn-active-bg: #245580; --bs-btn-active-border-color: #245580;
    --bs-btn-disabled-bg: #2f6a9a; --bs-btn-disabled-border-color: #2f6a9a;
    --bs-btn-focus-shadow-rgb: 47, 106, 154;
}
:root .btn-outline-info,
:root[data-color-theme=Blue_Theme] .btn-outline-info {
    --bs-btn-color: #2f6a9a; --bs-btn-border-color: #2f6a9a;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2f6a9a; --bs-btn-hover-border-color: #2f6a9a;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #2f6a9a; --bs-btn-active-border-color: #2f6a9a;
    --bs-btn-disabled-color: #2f6a9a; --bs-btn-disabled-border-color: #2f6a9a;
    --bs-btn-focus-shadow-rgb: 47, 106, 154;
}
:root .btn-danger,
:root[data-color-theme=Blue_Theme] .btn-danger {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #c0392b; --bs-btn-border-color: #c0392b;
    --bs-btn-hover-bg: #9f2e22; --bs-btn-hover-border-color: #9f2e22;
    --bs-btn-active-bg: #9f2e22; --bs-btn-active-border-color: #9f2e22;
    --bs-btn-disabled-bg: #c0392b; --bs-btn-disabled-border-color: #c0392b;
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
}
:root .btn-outline-danger,
:root[data-color-theme=Blue_Theme] .btn-outline-danger {
    --bs-btn-color: #c0392b; --bs-btn-border-color: #c0392b;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c0392b; --bs-btn-hover-border-color: #c0392b;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #c0392b; --bs-btn-active-border-color: #c0392b;
    --bs-btn-disabled-color: #c0392b; --bs-btn-disabled-border-color: #c0392b;
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
}
:root .btn-warning,
:root[data-color-theme=Blue_Theme] .btn-warning {
    --bs-btn-color: #2b1f00; --bs-btn-hover-color: #2b1f00; --bs-btn-active-color: #2b1f00;
    --bs-btn-bg: #f0b400; --bs-btn-border-color: #f0b400;
    --bs-btn-hover-bg: #d9a000; --bs-btn-hover-border-color: #d9a000;
    --bs-btn-active-bg: #d9a000; --bs-btn-active-border-color: #d9a000;
    --bs-btn-disabled-bg: #f0b400; --bs-btn-disabled-border-color: #f0b400;
    --bs-btn-focus-shadow-rgb: 240, 180, 0;
}
:root .btn-outline-warning,
:root[data-color-theme=Blue_Theme] .btn-outline-warning {
    --bs-btn-color: #b07d00; --bs-btn-border-color: #b07d00;
    --bs-btn-hover-color: #2b1f00; --bs-btn-hover-bg: #f0b400; --bs-btn-hover-border-color: #f0b400;
    --bs-btn-active-color: #2b1f00; --bs-btn-active-bg: #f0b400; --bs-btn-active-border-color: #f0b400;
    --bs-btn-disabled-color: #b07d00; --bs-btn-disabled-border-color: #b07d00;
    --bs-btn-focus-shadow-rgb: 240, 180, 0;
}
:root .btn-success,
:root[data-color-theme=Blue_Theme] .btn-success {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #1b8a50; --bs-btn-border-color: #1b8a50;
    --bs-btn-hover-bg: #146c3e; --bs-btn-hover-border-color: #146c3e;
    --bs-btn-active-bg: #146c3e; --bs-btn-active-border-color: #146c3e;
    --bs-btn-disabled-bg: #1b8a50; --bs-btn-disabled-border-color: #1b8a50;
    --bs-btn-focus-shadow-rgb: 27, 138, 80;
}
:root .btn-outline-success,
:root[data-color-theme=Blue_Theme] .btn-outline-success {
    --bs-btn-color: #1b8a50; --bs-btn-border-color: #1b8a50;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1b8a50; --bs-btn-hover-border-color: #1b8a50;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1b8a50; --bs-btn-active-border-color: #1b8a50;
    --bs-btn-disabled-color: #1b8a50; --bs-btn-disabled-border-color: #1b8a50;
    --bs-btn-focus-shadow-rgb: 27, 138, 80;
}
:root .swal2-styled.swal2-confirm,
:root[data-color-theme=Blue_Theme] .swal2-styled.swal2-confirm { background-color: #0f3585; }
:root .swal2-styled.swal2-cancel,
:root[data-color-theme=Blue_Theme] .swal2-styled.swal2-cancel { background-color: #c0392b; }

/* Bootstrap components that hard-code the old blue instead of reading --bs-primary */
:root .nav-pills { --bs-nav-pills-link-active-bg: #0f3585; }
:root .nav-tabs {
    --bs-nav-tabs-link-active-bg: #0f3585;
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) #0f3585;
}
:root .nav-tabs .nav-link.active { box-shadow: 0 5px 6px rgba(15, 53, 133, .3); }
:root .pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(15, 53, 133, 0.25);
    --bs-pagination-active-bg: #0f3585;
    --bs-pagination-active-border-color: #0f3585;
}
:root .progress, :root .progress-stacked { --bs-progress-bar-bg: #0f3585; }
:root .list-group { --bs-list-group-active-bg: #0f3585; --bs-list-group-active-border-color: #0f3585; }
:root .form-control:focus { box-shadow: 0 0 0 .25rem rgba(15, 53, 133, .25); }
:root .form-select:focus { border-color: #0f3585 !important; box-shadow: 0 0 0 .25rem rgba(15, 53, 133, .25); }
:root .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(15, 53, 133, .25); }
:root .form-check-input[type=checkbox]:indeterminate { background-color: #0f3585; border-color: #0f3585; }
:root .form-range::-webkit-slider-thumb { background-color: #0f3585; }
:root .form-range::-moz-range-thumb { background-color: #0f3585; }

/* Page background: a slightly deeper blue-grey so white cards stand out (light theme only) */
:root:not([data-bs-theme=dark]) #main-wrapper { background-color: #e5ebf4; }

/* ---- Dark theme: brighter text/outline shades, mid-tone buttons, deeper page background ---- */
:root[data-bs-theme=dark], :root[data-bs-theme=dark][data-color-theme=Blue_Theme] {
    --bs-primary: #5b82d6;
    --bs-primary-rgb: 58, 95, 181;
    --bs-light-primary: rgba(58, 95, 181, 0.22);
    --bs-primary-bg-subtle: rgba(58, 95, 181, 0.22);
    --bs-primary-border-subtle: #3a5fb5;
    --bs-primary-text-emphasis: #8fabe6;
    --bs-secondary: #8c9cc0;
    --bs-secondary-rgb: 109, 127, 166;
    --bs-light-secondary: rgba(109, 127, 166, 0.22);
    --bs-secondary-bg-subtle: rgba(109, 127, 166, 0.22);
    --bs-secondary-border-subtle: #6d7fa6;
    --bs-secondary-text-emphasis: #b4c0da;
    --bs-info: #4f9bd0;
    --bs-info-rgb: 47, 127, 181;
    --bs-light-info: rgba(47, 127, 181, 0.22);
    --bs-info-bg-subtle: rgba(47, 127, 181, 0.22);
    --bs-info-border-subtle: #2f7fb5;
    --bs-info-text-emphasis: #8cc3e6;
    --bs-danger: #e8776b;
    --bs-danger-rgb: 212, 73, 59;
    --bs-light-danger: rgba(212, 73, 59, 0.22);
    --bs-danger-bg-subtle: rgba(212, 73, 59, 0.22);
    --bs-danger-border-subtle: #d4493b;
    --bs-danger-text-emphasis: #f2a79f;
    --bs-warning: #f5c542;
    --bs-warning-rgb: 245, 197, 66;
    --bs-light-warning: rgba(245, 197, 66, 0.2);
    --bs-warning-bg-subtle: rgba(245, 197, 66, 0.2);
    --bs-warning-border-subtle: #c9a02a;
    --bs-warning-text-emphasis: #f8dc84;
    --bs-success: #45bd82;
    --bs-success-rgb: 38, 160, 99;
    --bs-light-success: rgba(38, 160, 99, 0.22);
    --bs-success-bg-subtle: rgba(38, 160, 99, 0.22);
    --bs-success-border-subtle: #26a063;
    --bs-success-text-emphasis: #8fdab5;
}
:root[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #3a5fb5; --bs-btn-border-color: #3a5fb5;
    --bs-btn-hover-bg: #4a70c8; --bs-btn-hover-border-color: #4a70c8;
    --bs-btn-active-bg: #4a70c8; --bs-btn-active-border-color: #4a70c8;
    --bs-btn-disabled-bg: #3a5fb5; --bs-btn-disabled-border-color: #3a5fb5;
    --bs-btn-focus-shadow-rgb: 58, 95, 181;
}
:root[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #5b82d6; --bs-btn-border-color: #5b82d6;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3a5fb5; --bs-btn-hover-border-color: #3a5fb5;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #3a5fb5; --bs-btn-active-border-color: #3a5fb5;
    --bs-btn-disabled-color: #5b82d6; --bs-btn-disabled-border-color: #5b82d6;
    --bs-btn-focus-shadow-rgb: 58, 95, 181;
}
:root[data-bs-theme=dark] .btn-secondary {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #6d7fa6; --bs-btn-border-color: #6d7fa6;
    --bs-btn-hover-bg: #7f91b8; --bs-btn-hover-border-color: #7f91b8;
    --bs-btn-active-bg: #7f91b8; --bs-btn-active-border-color: #7f91b8;
    --bs-btn-disabled-bg: #6d7fa6; --bs-btn-disabled-border-color: #6d7fa6;
    --bs-btn-focus-shadow-rgb: 109, 127, 166;
}
:root[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: #8c9cc0; --bs-btn-border-color: #8c9cc0;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6d7fa6; --bs-btn-hover-border-color: #6d7fa6;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #6d7fa6; --bs-btn-active-border-color: #6d7fa6;
    --bs-btn-disabled-color: #8c9cc0; --bs-btn-disabled-border-color: #8c9cc0;
    --bs-btn-focus-shadow-rgb: 109, 127, 166;
}
:root[data-bs-theme=dark] .btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #2f7fb5; --bs-btn-border-color: #2f7fb5;
    --bs-btn-hover-bg: #3d91c9; --bs-btn-hover-border-color: #3d91c9;
    --bs-btn-active-bg: #3d91c9; --bs-btn-active-border-color: #3d91c9;
    --bs-btn-disabled-bg: #2f7fb5; --bs-btn-disabled-border-color: #2f7fb5;
    --bs-btn-focus-shadow-rgb: 47, 127, 181;
}
:root[data-bs-theme=dark] .btn-outline-info {
    --bs-btn-color: #4f9bd0; --bs-btn-border-color: #4f9bd0;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2f7fb5; --bs-btn-hover-border-color: #2f7fb5;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #2f7fb5; --bs-btn-active-border-color: #2f7fb5;
    --bs-btn-disabled-color: #4f9bd0; --bs-btn-disabled-border-color: #4f9bd0;
    --bs-btn-focus-shadow-rgb: 47, 127, 181;
}
:root[data-bs-theme=dark] .btn-danger {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #d4493b; --bs-btn-border-color: #d4493b;
    --bs-btn-hover-bg: #e05a4c; --bs-btn-hover-border-color: #e05a4c;
    --bs-btn-active-bg: #e05a4c; --bs-btn-active-border-color: #e05a4c;
    --bs-btn-disabled-bg: #d4493b; --bs-btn-disabled-border-color: #d4493b;
    --bs-btn-focus-shadow-rgb: 212, 73, 59;
}
:root[data-bs-theme=dark] .btn-outline-danger {
    --bs-btn-color: #e8776b; --bs-btn-border-color: #e8776b;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d4493b; --bs-btn-hover-border-color: #d4493b;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #d4493b; --bs-btn-active-border-color: #d4493b;
    --bs-btn-disabled-color: #e8776b; --bs-btn-disabled-border-color: #e8776b;
    --bs-btn-focus-shadow-rgb: 212, 73, 59;
}
:root[data-bs-theme=dark] .btn-warning {
    --bs-btn-color: #2b1f00; --bs-btn-hover-color: #2b1f00; --bs-btn-active-color: #2b1f00;
    --bs-btn-bg: #f5c542; --bs-btn-border-color: #f5c542;
    --bs-btn-hover-bg: #f8d160; --bs-btn-hover-border-color: #f8d160;
    --bs-btn-active-bg: #f8d160; --bs-btn-active-border-color: #f8d160;
    --bs-btn-disabled-bg: #f5c542; --bs-btn-disabled-border-color: #f5c542;
    --bs-btn-focus-shadow-rgb: 245, 197, 66;
}
:root[data-bs-theme=dark] .btn-outline-warning {
    --bs-btn-color: #f5c542; --bs-btn-border-color: #f5c542;
    --bs-btn-hover-color: #2b1f00; --bs-btn-hover-bg: #f5c542; --bs-btn-hover-border-color: #f5c542;
    --bs-btn-active-color: #2b1f00; --bs-btn-active-bg: #f5c542; --bs-btn-active-border-color: #f5c542;
    --bs-btn-disabled-color: #f5c542; --bs-btn-disabled-border-color: #f5c542;
    --bs-btn-focus-shadow-rgb: 245, 197, 66;
}
:root[data-bs-theme=dark] .btn-success {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-bg: #26a063; --bs-btn-border-color: #26a063;
    --bs-btn-hover-bg: #32b373; --bs-btn-hover-border-color: #32b373;
    --bs-btn-active-bg: #32b373; --bs-btn-active-border-color: #32b373;
    --bs-btn-disabled-bg: #26a063; --bs-btn-disabled-border-color: #26a063;
    --bs-btn-focus-shadow-rgb: 38, 160, 99;
}
:root[data-bs-theme=dark] .btn-outline-success {
    --bs-btn-color: #45bd82; --bs-btn-border-color: #45bd82;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #26a063; --bs-btn-hover-border-color: #26a063;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #26a063; --bs-btn-active-border-color: #26a063;
    --bs-btn-disabled-color: #45bd82; --bs-btn-disabled-border-color: #45bd82;
    --bs-btn-focus-shadow-rgb: 38, 160, 99;
}
:root[data-bs-theme=dark] .swal2-styled.swal2-confirm { background-color: #3a5fb5; }
:root[data-bs-theme=dark] .swal2-styled.swal2-cancel { background-color: #d4493b; }
:root[data-bs-theme=dark] .nav-pills { --bs-nav-pills-link-active-bg: #3a5fb5; }
:root[data-bs-theme=dark] .nav-tabs {
    --bs-nav-tabs-link-active-bg: #3a5fb5;
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) #3a5fb5;
}
:root[data-bs-theme=dark] .nav-tabs .nav-link.active { box-shadow: 0 5px 6px rgba(58, 95, 181, .35); }
:root[data-bs-theme=dark] .pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(58, 95, 181, 0.3);
    --bs-pagination-active-bg: #3a5fb5;
    --bs-pagination-active-border-color: #3a5fb5;
}
:root[data-bs-theme=dark] .progress, :root[data-bs-theme=dark] .progress-stacked { --bs-progress-bar-bg: #3a5fb5; }
:root[data-bs-theme=dark] .list-group { --bs-list-group-active-bg: #3a5fb5; --bs-list-group-active-border-color: #3a5fb5; }
:root[data-bs-theme=dark] .form-control:focus { box-shadow: 0 0 0 .25rem rgba(58, 95, 181, .3); }
:root[data-bs-theme=dark] .form-select:focus { border-color: #5b82d6 !important; box-shadow: 0 0 0 .25rem rgba(58, 95, 181, .3); }
:root[data-bs-theme=dark] .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(58, 95, 181, .3); }
:root[data-bs-theme=dark] .form-check-input[type=checkbox]:indeterminate { background-color: #3a5fb5; border-color: #3a5fb5; }
:root[data-bs-theme=dark] .form-range::-webkit-slider-thumb { background-color: #3a5fb5; }
:root[data-bs-theme=dark] .form-range::-moz-range-thumb { background-color: #3a5fb5; }

/* Dark page background: deeper than the cards and sidebar, which stay #111c2d */
:root[data-bs-theme=dark] #main-wrapper { background-color: #0e192a; }

/* Solid warning badges/backgrounds use the same gold as the button (text colour stays darker for readability) */
:root:not([data-bs-theme=dark]) .bg-warning { background-color: #f0b400 !important; color: #2b1f00 !important; }
:root[data-bs-theme=dark] .bg-warning { background-color: #f5c542 !important; color: #2b1f00 !important; }

/* Card borders: pages that mark cards "border-0" (utility is !important) still get the theme's card border */
[data-card=border] .card.border-0 { border: 1px solid var(--bs-border-color) !important; box-shadow: none !important; }

/* The default light border is almost the same shade as the new page background, so darken it a touch */
:root:not([data-bs-theme=dark])[data-card=border] .card,
:root:not([data-bs-theme=dark])[data-card=border] .card.border-0 { border-color: #c5cfe0 !important; }

/* Table borders: a slight blue-grey line between rows and cells */
:root:not([data-bs-theme=dark]) .table,
:root:not([data-bs-theme=dark]) table.dataTable { --bs-table-border-color: #d3dbe8; --bs-border-color: #d3dbe8; }
:root:not([data-bs-theme=dark]) .table > :not(caption) > * > *,
:root:not([data-bs-theme=dark]) table.dataTable > tbody > tr > *,
:root:not([data-bs-theme=dark]) table.dataTable > thead > tr > * { border-color: #d3dbe8; }
:root:not([data-bs-theme=dark]) table.dataTable > thead > tr > * { border-bottom: 1px solid #c5cfe0; }
:root[data-bs-theme=dark] .table,
:root[data-bs-theme=dark] table.dataTable { --bs-table-border-color: rgba(189, 200, 240, 0.22); }

/* Buttons: squarer corners, same radius as Bootstrap's rounded-2 (utility classes such as rounded-circle / rounded-pill still win) */
:root .btn, :root .btn-sm, :root .btn-lg,
:root .btn-group-sm > .btn, :root .btn-group-lg > .btn { --bs-btn-border-radius: var(--bs-border-radius); }

/* Every table body gets the same look as class="table-group-divider bg-white" (divider line under the header, white body).
   Done here instead of editing ~550 <tbody> tags, so DataTables and ajax-loaded tables get it too. White only in light mode. */
.table > tbody, table.dataTable > tbody {
    border-top: calc(var(--bs-border-width, 1px) * 2) solid currentcolor;
}
:root:not([data-bs-theme=dark]) .table > tbody,
:root:not([data-bs-theme=dark]) table.dataTable > tbody { background-color: #fff !important; }

/* Form validation colours: valid = green, invalid = red (inputs, selects, and their inline SVG icons) */
:root {
    --bs-form-valid-color: #1b8a50; --bs-form-valid-border-color: #1b8a50;
    --bs-form-invalid-color: #c0392b; --bs-form-invalid-border-color: #c0392b;
}
:root[data-bs-theme=dark] {
    --bs-form-valid-color: #45bd82; --bs-form-valid-border-color: #45bd82;
    --bs-form-invalid-color: #e8776b; --bs-form-invalid-border-color: #e8776b;
}
:root .form-control.is-valid,
:root .was-validated .form-control:valid {border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + 16px);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b8a50' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + 4px) center;background-size:calc(.75em + 8px) calc(.75em + 8px)}
:root .form-select.is-valid:not([multiple]):not([size]),
:root .form-select.is-valid:not([multiple])[size="1"],
:root .was-validated .form-select:valid:not([multiple]):not([size]),
:root .was-validated .form-select:valid:not([multiple])[size="1"] {--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b8a50' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");padding-right:88px;background-position:right 16px center,center right 48px;background-size:16px 12px,calc(.75em + 8px) calc(.75em + 8px)}
:root .form-control.is-invalid,
:root .was-validated .form-control:invalid {border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + 16px);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c0392b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c0392b' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + 4px) center;background-size:calc(.75em + 8px) calc(.75em + 8px)}
:root .form-select.is-invalid:not([multiple]):not([size]),
:root .form-select.is-invalid:not([multiple])[size="1"],
:root .was-validated .form-select:invalid:not([multiple]):not([size]),
:root .was-validated .form-select:invalid:not([multiple])[size="1"] {--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c0392b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c0392b' stroke='none'/%3e%3c/svg%3e");padding-right:88px;background-position:right 16px center,center right 48px;background-size:16px 12px,calc(.75em + 8px) calc(.75em + 8px)}
:root[data-bs-theme=dark] .form-control.is-valid,
:root[data-bs-theme=dark] .was-validated .form-control:valid {border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + 16px);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2345bd82' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + 4px) center;background-size:calc(.75em + 8px) calc(.75em + 8px)}
:root[data-bs-theme=dark] .form-select.is-valid:not([multiple]):not([size]),
:root[data-bs-theme=dark] .form-select.is-valid:not([multiple])[size="1"],
:root[data-bs-theme=dark] .was-validated .form-select:valid:not([multiple]):not([size]),
:root[data-bs-theme=dark] .was-validated .form-select:valid:not([multiple])[size="1"] {--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2345bd82' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");padding-right:88px;background-position:right 16px center,center right 48px;background-size:16px 12px,calc(.75em + 8px) calc(.75em + 8px)}
:root[data-bs-theme=dark] .form-control.is-invalid,
:root[data-bs-theme=dark] .was-validated .form-control:invalid {border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + 16px);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e8776b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e8776b' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + 4px) center;background-size:calc(.75em + 8px) calc(.75em + 8px)}
:root[data-bs-theme=dark] .form-select.is-invalid:not([multiple]):not([size]),
:root[data-bs-theme=dark] .form-select.is-invalid:not([multiple])[size="1"],
:root[data-bs-theme=dark] .was-validated .form-select:invalid:not([multiple]):not([size]),
:root[data-bs-theme=dark] .was-validated .form-select:invalid:not([multiple])[size="1"] {--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e8776b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e8776b' stroke='none'/%3e%3c/svg%3e");padding-right:88px;background-position:right 16px center,center right 48px;background-size:16px 12px,calc(.75em + 8px) calc(.75em + 8px)}

/* Toastr notifications and SweetAlert success ring */
:root .toast-success { background-color: #1b8a50; }
:root .toast-error { background-color: #c0392b; }
:root .toast-warning { background-color: #f0b400; color: #2b1f00; }
:root .toast-info { background-color: #0a4d73; }
:root[data-bs-theme=dark] .toast-success { background-color: #26a063; }
:root[data-bs-theme=dark] .toast-error { background-color: #d4493b; }
:root[data-bs-theme=dark] .toast-warning { background-color: #f5c542; color: #2b1f00; }
:root[data-bs-theme=dark] .toast-info { background-color: #2f7fb5; }
:root .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(27, 138, 80, .3); }


/* Font: Open Sans everywhere (the template default and the Poppins in main.css / gs.css are overridden here).
   Icon fonts keep their own family because they are set on the icon classes, not on these elements. */
:root, :root[data-bs-theme=light], :root[data-bs-theme=dark] {
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-font-family: "Open Sans", sans-serif;
}
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body button, html body input, html body select, html body textarea, html body .btn, html body .form-control, html body .form-select,
html body .swal2-popup, html body .select2-container, html body .select2-dropdown, html body .dataTables_wrapper,
html body .daterangepicker, html body #toast-container, html body .modal, html body .dropdown-menu, html body .tooltip, html body .popover {
    font-family: "Open Sans", sans-serif !important;
}


/* File chooser button: several portals hard-code their own blue or green in mycss.css, so use the palette here */
:root input[type="file"].form-control::file-selector-button,
:root .form-control::file-selector-button { background-color: var(--bs-primary) !important; color: #fff !important; }
:root input[type="file"].form-control:hover::file-selector-button,
:root .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: #0b2a6a !important; color: #fff !important; }
:root[data-bs-theme=dark] input[type="file"].form-control::file-selector-button,
:root[data-bs-theme=dark] .form-control::file-selector-button { background-color: #3a5fb5 !important; }
:root[data-bs-theme=dark] input[type="file"].form-control:hover::file-selector-button,
:root[data-bs-theme=dark] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: #4a70c8 !important; }

/* Sidebar: the open page is a solid dark pill with light text (it was a pale pill with dark text) */
:root #sidebarnav .sidebar-item .sidebar-link.active::before,
:root #sidebarnav .sidebar-item.selected > .sidebar-link::before,
:root #sidebarnav .selected .primary-hover-bg::before { background-color: var(--bs-primary) !important; }
:root #sidebarnav > .sidebar-item > .sidebar-link.active::before,
:root #sidebarnav > .sidebar-item.selected > .sidebar-link::before,
:root #sidebarnav > .sidebar-item .primary-hover-bg.active::before { width: calc(100% + 26px) !important; }
:root #sidebarnav .sidebar-item .sidebar-link.active,
:root #sidebarnav .sidebar-item .sidebar-link.active .aside-icon,
:root #sidebarnav .sidebar-item .sidebar-link.active .aside-icon *,
:root #sidebarnav .sidebar-item .sidebar-link.active .hide-menu,
:root #sidebarnav .sidebar-item.selected > .sidebar-link,
:root #sidebarnav .sidebar-item.selected > .sidebar-link .aside-icon,
:root #sidebarnav .sidebar-item.selected > .sidebar-link .aside-icon *,
:root #sidebarnav .sidebar-item.selected > .sidebar-link .hide-menu { color: #fff !important; }
:root #sidebarnav .sidebar-item .sidebar-link.active.has-arrow::after,
:root #sidebarnav .sidebar-item.selected > .sidebar-link.has-arrow::after { border-color: #fff !important; }
:root[data-bs-theme=dark] #sidebarnav .sidebar-item .sidebar-link.active::before,
:root[data-bs-theme=dark] #sidebarnav .sidebar-item.selected > .sidebar-link::before,
:root[data-bs-theme=dark] #sidebarnav .selected .primary-hover-bg::before { background-color: #3a5fb5 !important; }

/* Collapsed sidebar (desktop): the open page is a rounded square around its icon, not a clipped half circle */
@media (min-width: 1200px) {
    #main-wrapper.show-sidebar .left-sidebar:not(:hover) #sidebarnav .sidebar-item .sidebar-link.active::before,
    #main-wrapper.show-sidebar .left-sidebar:not(:hover) #sidebarnav .sidebar-item.selected > .sidebar-link::before {
        left: 0 !important; width: 100% !important; border-radius: 12px !important;
    }
}

/* Top bar buttons: dark with light icons and text (they were pale with dark icons) */
:root nav.navbar .nav-icon-hover-bg.bg-primary-subtle,
:root nav.navbar .d-inline-flex.bg-primary-subtle { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
:root nav.navbar .nav-icon-hover-bg.bg-primary-subtle a,
:root nav.navbar .nav-icon-hover-bg.bg-primary-subtle span,
:root nav.navbar .nav-icon-hover-bg.bg-primary-subtle iconify-icon,
:root nav.navbar .d-inline-flex.bg-primary-subtle,
:root nav.navbar .d-inline-flex.bg-primary-subtle * { color: #fff !important; }
:root nav.navbar .bg-danger-subtle { background-color: var(--bs-danger) !important; }
:root nav.navbar .bg-danger-subtle a,
:root nav.navbar .bg-danger-subtle iconify-icon,
:root nav.navbar .bg-danger-subtle i { color: #fff !important; }
:root[data-bs-theme=dark] nav.navbar .nav-icon-hover-bg.bg-primary-subtle,
:root[data-bs-theme=dark] nav.navbar .d-inline-flex.bg-primary-subtle { background-color: #3a5fb5 !important; border-color: #3a5fb5 !important; }
:root[data-bs-theme=dark] nav.navbar .bg-danger-subtle { background-color: #d4493b !important; }
:root nav.navbar .d-inline-flex.bg-primary-subtle select.form-select,
:root nav.navbar .d-inline-flex.bg-primary-subtle select {
    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='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Top bar: each button gets its own colour (school navy, language and home steel blue, theme slate, logout red) */
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(#lbl-lang-ar),
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(#lbl-lang-en),
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(iconify-icon[icon*="home"]) { background-color: var(--bs-info) !important; }
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(.dark-layout),
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(.light-layout) { background-color: var(--bs-secondary) !important; }
:root[data-bs-theme=dark] nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(#lbl-lang-ar),
:root[data-bs-theme=dark] nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(#lbl-lang-en),
:root[data-bs-theme=dark] nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(iconify-icon[icon*="home"]) { background-color: #2f7fb5 !important; }
:root[data-bs-theme=dark] nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(.dark-layout),
:root[data-bs-theme=dark] nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:has(.light-layout) { background-color: #6d7fa6 !important; }

/* School selector: the open list keeps normal dark text on a white background (the closed box is white on navy) */
:root nav.navbar .d-inline-flex.bg-primary-subtle select option,
:root nav.navbar .d-inline-flex.bg-primary-subtle select optgroup { background-color: #fff !important; color: #111c2d !important; }
:root[data-bs-theme=dark] nav.navbar .d-inline-flex.bg-primary-subtle select option,
:root[data-bs-theme=dark] nav.navbar .d-inline-flex.bg-primary-subtle select optgroup { background-color: #111c2d !important; color: #fff !important; }

/* Top bar polish: soft shadow and lift on hover, solid-looking icons, an icon chip on the school selector */
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle,
:root nav.navbar li.bg-danger-subtle {
    box-shadow: 0 2px 6px rgba(15, 30, 70, .22);
}
/* No hover effect on the top bar buttons: they look the same with and without the mouse over them */
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle:hover,
:root nav.navbar li.bg-danger-subtle:hover { transform: none; filter: none; }
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle iconify-icon,
:root nav.navbar li.bg-danger-subtle iconify-icon { opacity: 1 !important; font-size: 1.3rem !important; }
:root nav.navbar .d-inline-flex.bg-primary-subtle { box-shadow: 0 2px 6px rgba(15, 30, 70, .22); }
:root nav.navbar .d-inline-flex.bg-primary-subtle > iconify-icon {
    background: rgba(255, 255, 255, .18); border-radius: 50%; padding: 4px; width: 26px; height: 26px; font-size: 1rem !important; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    opacity: 1 !important;
}


/* Same size for every top bar button: 40px circles with 20px icons; the school selector is 40px high too */
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle,
:root nav.navbar li.bg-danger-subtle { width: 40px !important; height: 40px !important; }
:root nav.navbar li.nav-icon-hover-bg.bg-primary-subtle iconify-icon,
:root nav.navbar li.bg-danger-subtle iconify-icon { font-size: 1.25rem !important; width: 1.25rem; height: 1.25rem; filter: none !important; }
:root nav.navbar .d-inline-flex.bg-primary-subtle { height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; }
:root nav.navbar .d-inline-flex.bg-primary-subtle > iconify-icon { width: 24px; height: 24px; padding: 4px; filter: none !important; }

/* No outline buttons: every .btn-outline-* is a solid filled button in the same colour */
:root .btn-outline-primary {
    --bs-btn-bg: #0f3585; --bs-btn-color: #fff; --bs-btn-border-color: #0f3585;
    --bs-btn-hover-bg: #0b2a6a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #0b2a6a;
    --bs-btn-active-bg: #0b2a6a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #0b2a6a;
    --bs-btn-disabled-bg: #0f3585; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #0f3585;
}
:root .btn-outline-secondary {
    --bs-btn-bg: #55698f; --bs-btn-color: #fff; --bs-btn-border-color: #55698f;
    --bs-btn-hover-bg: #43557a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #43557a;
    --bs-btn-active-bg: #43557a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #43557a;
    --bs-btn-disabled-bg: #55698f; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #55698f;
}
:root .btn-outline-info {
    --bs-btn-bg: #2f6a9a; --bs-btn-color: #fff; --bs-btn-border-color: #2f6a9a;
    --bs-btn-hover-bg: #245580; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #245580;
    --bs-btn-active-bg: #245580; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #245580;
    --bs-btn-disabled-bg: #2f6a9a; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #2f6a9a;
}
:root .btn-outline-danger {
    --bs-btn-bg: #c0392b; --bs-btn-color: #fff; --bs-btn-border-color: #c0392b;
    --bs-btn-hover-bg: #9f2e22; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #9f2e22;
    --bs-btn-active-bg: #9f2e22; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #9f2e22;
    --bs-btn-disabled-bg: #c0392b; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #c0392b;
}
:root .btn-outline-warning {
    --bs-btn-bg: #f0b400; --bs-btn-color: #2b1f00; --bs-btn-border-color: #f0b400;
    --bs-btn-hover-bg: #d9a000; --bs-btn-hover-color: #2b1f00; --bs-btn-hover-border-color: #d9a000;
    --bs-btn-active-bg: #d9a000; --bs-btn-active-color: #2b1f00; --bs-btn-active-border-color: #d9a000;
    --bs-btn-disabled-bg: #f0b400; --bs-btn-disabled-color: #2b1f00; --bs-btn-disabled-border-color: #f0b400;
}
:root .btn-outline-success {
    --bs-btn-bg: #1b8a50; --bs-btn-color: #fff; --bs-btn-border-color: #1b8a50;
    --bs-btn-hover-bg: #146c3e; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #146c3e;
    --bs-btn-active-bg: #146c3e; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #146c3e;
    --bs-btn-disabled-bg: #1b8a50; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #1b8a50;
}
/* The Blue_Theme rules further up set the outline colours with a higher specificity; repeat the solid versions for that theme
   (placed before the dark rules, which keep winning in dark mode) */
:root[data-color-theme=Blue_Theme] .btn-outline-primary {
    --bs-btn-bg: #0f3585; --bs-btn-color: #fff; --bs-btn-border-color: #0f3585;
    --bs-btn-hover-bg: #0b2a6a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #0b2a6a;
    --bs-btn-active-bg: #0b2a6a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #0b2a6a;
    --bs-btn-disabled-bg: #0f3585; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #0f3585;
}
:root[data-color-theme=Blue_Theme] .btn-outline-secondary {
    --bs-btn-bg: #55698f; --bs-btn-color: #fff; --bs-btn-border-color: #55698f;
    --bs-btn-hover-bg: #43557a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #43557a;
    --bs-btn-active-bg: #43557a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #43557a;
    --bs-btn-disabled-bg: #55698f; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #55698f;
}
:root[data-color-theme=Blue_Theme] .btn-outline-info {
    --bs-btn-bg: #2f6a9a; --bs-btn-color: #fff; --bs-btn-border-color: #2f6a9a;
    --bs-btn-hover-bg: #245580; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #245580;
    --bs-btn-active-bg: #245580; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #245580;
    --bs-btn-disabled-bg: #2f6a9a; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #2f6a9a;
}
:root[data-color-theme=Blue_Theme] .btn-outline-danger {
    --bs-btn-bg: #c0392b; --bs-btn-color: #fff; --bs-btn-border-color: #c0392b;
    --bs-btn-hover-bg: #9f2e22; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #9f2e22;
    --bs-btn-active-bg: #9f2e22; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #9f2e22;
    --bs-btn-disabled-bg: #c0392b; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #c0392b;
}
:root[data-color-theme=Blue_Theme] .btn-outline-warning {
    --bs-btn-bg: #f0b400; --bs-btn-color: #2b1f00; --bs-btn-border-color: #f0b400;
    --bs-btn-hover-bg: #d9a000; --bs-btn-hover-color: #2b1f00; --bs-btn-hover-border-color: #d9a000;
    --bs-btn-active-bg: #d9a000; --bs-btn-active-color: #2b1f00; --bs-btn-active-border-color: #d9a000;
    --bs-btn-disabled-bg: #f0b400; --bs-btn-disabled-color: #2b1f00; --bs-btn-disabled-border-color: #f0b400;
}
:root[data-color-theme=Blue_Theme] .btn-outline-success {
    --bs-btn-bg: #1b8a50; --bs-btn-color: #fff; --bs-btn-border-color: #1b8a50;
    --bs-btn-hover-bg: #146c3e; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #146c3e;
    --bs-btn-active-bg: #146c3e; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #146c3e;
    --bs-btn-disabled-bg: #1b8a50; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #1b8a50;
}
:root[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-bg: #3a5fb5; --bs-btn-color: #fff; --bs-btn-border-color: #3a5fb5;
    --bs-btn-hover-bg: #4a70c8; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #4a70c8;
    --bs-btn-active-bg: #4a70c8; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #4a70c8;
    --bs-btn-disabled-bg: #3a5fb5; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #3a5fb5;
}
:root[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-bg: #6d7fa6; --bs-btn-color: #fff; --bs-btn-border-color: #6d7fa6;
    --bs-btn-hover-bg: #7f91b8; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #7f91b8;
    --bs-btn-active-bg: #7f91b8; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #7f91b8;
    --bs-btn-disabled-bg: #6d7fa6; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #6d7fa6;
}
:root[data-bs-theme=dark] .btn-outline-info {
    --bs-btn-bg: #2f7fb5; --bs-btn-color: #fff; --bs-btn-border-color: #2f7fb5;
    --bs-btn-hover-bg: #3d91c9; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #3d91c9;
    --bs-btn-active-bg: #3d91c9; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #3d91c9;
    --bs-btn-disabled-bg: #2f7fb5; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #2f7fb5;
}
:root[data-bs-theme=dark] .btn-outline-danger {
    --bs-btn-bg: #d4493b; --bs-btn-color: #fff; --bs-btn-border-color: #d4493b;
    --bs-btn-hover-bg: #e05a4c; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #e05a4c;
    --bs-btn-active-bg: #e05a4c; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #e05a4c;
    --bs-btn-disabled-bg: #d4493b; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #d4493b;
}
:root[data-bs-theme=dark] .btn-outline-warning {
    --bs-btn-bg: #f5c542; --bs-btn-color: #2b1f00; --bs-btn-border-color: #f5c542;
    --bs-btn-hover-bg: #f8d160; --bs-btn-hover-color: #2b1f00; --bs-btn-hover-border-color: #f8d160;
    --bs-btn-active-bg: #f8d160; --bs-btn-active-color: #2b1f00; --bs-btn-active-border-color: #f8d160;
    --bs-btn-disabled-bg: #f5c542; --bs-btn-disabled-color: #2b1f00; --bs-btn-disabled-border-color: #f5c542;
}
:root[data-bs-theme=dark] .btn-outline-success {
    --bs-btn-bg: #26a063; --bs-btn-color: #fff; --bs-btn-border-color: #26a063;
    --bs-btn-hover-bg: #32b373; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #32b373;
    --bs-btn-active-bg: #32b373; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #32b373;
    --bs-btn-disabled-bg: #26a063; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #26a063;
}

/* No info buttons: .btn-info and .btn-outline-info look exactly like primary buttons */
:root .btn-info, :root .btn-outline-info {
    --bs-btn-bg: #0f3585; --bs-btn-color: #fff; --bs-btn-border-color: #0f3585;
    --bs-btn-hover-bg: #0b2a6a; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #0b2a6a;
    --bs-btn-active-bg: #0b2a6a; --bs-btn-active-color: #fff; --bs-btn-active-border-color: #0b2a6a;
    --bs-btn-disabled-bg: #0f3585; --bs-btn-disabled-color: #fff; --bs-btn-disabled-border-color: #0f3585;
    --bs-btn-focus-shadow-rgb: 15, 53, 133;
}
:root[data-bs-theme=dark] .btn-info, :root[data-bs-theme=dark] .btn-outline-info {
    --bs-btn-bg: #3a5fb5; --bs-btn-border-color: #3a5fb5;
    --bs-btn-hover-bg: #4a70c8; --bs-btn-hover-border-color: #4a70c8;
    --bs-btn-active-bg: #4a70c8; --bs-btn-active-border-color: #4a70c8;
    --bs-btn-disabled-bg: #3a5fb5; --bs-btn-disabled-border-color: #3a5fb5;
    --bs-btn-focus-shadow-rgb: 58, 95, 181;
}

/* No outlined badges: badges keep their fill and lose any border line */
:root .badge, :root .badge[class*="border"] { border: 0 !important; }

/* Badges: darker fill with light text (they were pale tints with dark text) */
:root .badge.bg-primary-subtle, :root .badge.bg-light-primary, :root .badge[class*="bg-primary-subtle"], :root .badge[class*="bg-light-primary"] { background-color: #0f3585 !important; color: #fff !important; }
:root .badge.bg-primary-subtle *, :root .badge.bg-light-primary * { color: #fff !important; }
:root .badge.bg-secondary-subtle, :root .badge.bg-light-secondary, :root .badge[class*="bg-secondary-subtle"], :root .badge[class*="bg-light-secondary"] { background-color: #55698f !important; color: #fff !important; }
:root .badge.bg-secondary-subtle *, :root .badge.bg-light-secondary * { color: #fff !important; }
:root .badge.bg-info-subtle, :root .badge.bg-light-info, :root .badge[class*="bg-info-subtle"], :root .badge[class*="bg-light-info"] { background-color: #2f6a9a !important; color: #fff !important; }
:root .badge.bg-info-subtle *, :root .badge.bg-light-info * { color: #fff !important; }
:root .badge.bg-success-subtle, :root .badge.bg-light-success, :root .badge[class*="bg-success-subtle"], :root .badge[class*="bg-light-success"] { background-color: #1b8a50 !important; color: #fff !important; }
:root .badge.bg-success-subtle *, :root .badge.bg-light-success * { color: #fff !important; }
:root .badge.bg-danger-subtle, :root .badge.bg-light-danger, :root .badge[class*="bg-danger-subtle"], :root .badge[class*="bg-light-danger"] { background-color: #c0392b !important; color: #fff !important; }
:root .badge.bg-danger-subtle *, :root .badge.bg-light-danger * { color: #fff !important; }
:root .badge.bg-warning-subtle, :root .badge.bg-light-warning, :root .badge[class*="bg-warning-subtle"], :root .badge[class*="bg-light-warning"] { background-color: #b87a0c !important; color: #fff !important; }
:root .badge.bg-warning-subtle *, :root .badge.bg-light-warning * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-primary-subtle, :root[data-bs-theme=dark] .badge.bg-light-primary, :root[data-bs-theme=dark] .badge[class*="bg-primary-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-primary"] { background-color: #3a5fb5 !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-primary-subtle *, :root[data-bs-theme=dark] .badge.bg-light-primary * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-secondary-subtle, :root[data-bs-theme=dark] .badge.bg-light-secondary, :root[data-bs-theme=dark] .badge[class*="bg-secondary-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-secondary"] { background-color: #6d7fa6 !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-secondary-subtle *, :root[data-bs-theme=dark] .badge.bg-light-secondary * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-info-subtle, :root[data-bs-theme=dark] .badge.bg-light-info, :root[data-bs-theme=dark] .badge[class*="bg-info-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-info"] { background-color: #2f7fb5 !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-info-subtle *, :root[data-bs-theme=dark] .badge.bg-light-info * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-success-subtle, :root[data-bs-theme=dark] .badge.bg-light-success, :root[data-bs-theme=dark] .badge[class*="bg-success-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-success"] { background-color: #26a063 !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-success-subtle *, :root[data-bs-theme=dark] .badge.bg-light-success * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-danger-subtle, :root[data-bs-theme=dark] .badge.bg-light-danger, :root[data-bs-theme=dark] .badge[class*="bg-danger-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-danger"] { background-color: #d4493b !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-danger-subtle *, :root[data-bs-theme=dark] .badge.bg-light-danger * { color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-warning-subtle, :root[data-bs-theme=dark] .badge.bg-light-warning, :root[data-bs-theme=dark] .badge[class*="bg-warning-subtle"], :root[data-bs-theme=dark] .badge[class*="bg-light-warning"] { background-color: #c98a12 !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge.bg-warning-subtle *, :root[data-bs-theme=dark] .badge.bg-light-warning * { color: #fff !important; }

/* Badges that were outline only (no background class) get the secondary fill, so they don't turn into plain text */
:root .badge:not([class*="bg-"]) { background-color: #55698f !important; color: #fff !important; }
:root[data-bs-theme=dark] .badge:not([class*="bg-"]) { background-color: #6d7fa6 !important; }

/* Light shadow on every card (the template's card border mode removes shadows) */
:root .card, :root[data-card=border] .card, :root .rm-box, :root .rm-page, :root .panel-grid-card {
    box-shadow: 0 18px 36px -12px rgba(15, 53, 133, .16), 0 4px 10px rgba(15, 53, 133, .05) !important;
}
:root[data-bs-theme=dark] .card, :root[data-bs-theme=dark][data-card=border] .card, :root[data-bs-theme=dark] .rm-box,
:root[data-bs-theme=dark] .rm-page, :root[data-bs-theme=dark] .panel-grid-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .2) !important;
}

/* Sub-menu items inside an opened menu: the open one is bold navy text (no dark pill, which hid behind the list and left white text on white) */
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active,
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active .hide-menu,
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active .aside-icon,
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active .aside-icon *,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link .hide-menu,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link .aside-icon,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link .aside-icon * { color: var(--bs-primary) !important; font-weight: 600; }
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active::before,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link::before { background-color: transparent !important; }
:root[data-bs-theme=dark] #sidebarnav .first-level .sidebar-item .sidebar-link.active::before,
:root[data-bs-theme=dark] #sidebarnav .first-level .sidebar-item.selected > .sidebar-link::before { background-color: transparent !important; }
/* Keyboard focus in the sidebar: a quiet navy outline instead of the browser's bright blue box */
:root #sidebarnav a:focus-visible { outline: 2px solid rgba(15, 53, 133, .45); outline-offset: -2px; border-radius: 10px; box-shadow: none; }

/* Sub-menu design: a thin guide line through the dots, rounded rows, soft tint on hover and for the open item */
:root #sidebarnav .first-level { position: relative; }
:root #sidebarnav .first-level::before {
    content: ""; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
    background: rgba(var(--bs-primary-rgb), .16);
}
:root #sidebarnav .first-level .sidebar-item .sidebar-link {
    margin: 2px 12px 2px 0; padding-top: 7px; padding-bottom: 7px; border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}
:root #sidebarnav .first-level .sidebar-item .sidebar-link:hover { background-color: rgba(var(--bs-primary-rgb), .07); }
:root #sidebarnav .first-level .sidebar-item .sidebar-link:hover .hide-menu { color: var(--bs-primary); }
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link { background-color: rgba(var(--bs-primary-rgb), .12); }
:root #sidebarnav .first-level .sidebar-item .sidebar-link .sidebar-icon { background-color: #a3aec3 !important; border-color: #a3aec3 !important; transition: transform .15s ease, background-color .15s ease; }
:root #sidebarnav .first-level .sidebar-item .sidebar-link:hover .sidebar-icon { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
:root #sidebarnav .first-level .sidebar-item .sidebar-link.active .sidebar-icon,
:root #sidebarnav .first-level .sidebar-item.selected > .sidebar-link .sidebar-icon { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; transform: scale(1.4); }

/* Buttons have no shadow */
/* (the keyboard focus ring stays, so tabbing through buttons is still visible) */
:root .btn:not(:focus-visible) { box-shadow: none; }


/* Arabic (RTL): no dropdown arrows on selects, system-wide (plain selects and select2) */
html[dir="rtl"] .form-select { --bs-form-select-bg-img: none; }
html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow,
html[dir="rtl"] .select2-container .select2-selection--multiple .select2-selection__arrow { display: none !important; }

/* DataTables 1.x controls: "Show [n] entries" and "Search:" sit on one line, the select is not full width */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 0; white-space: nowrap; }
.dataTables_wrapper .dataTables_length select { display: inline-block; width: auto !important; min-width: 78px; }
.dataTables_wrapper .dataTables_filter input { display: inline-block; width: 220px; margin-left: 0 !important; }
.dataTables_wrapper .dataTables_info { padding-top: .75rem !important; }
.dataTables_wrapper .dataTables_paginate { margin-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-end; margin-bottom: 0; }

/* Room at the bottom of every page, so the floating helper buttons (Edit Translations, Report an issue)
   never sit on top of the last content (for example table pagination) */
.page-wrapper .body-wrapper > .container-fluid { padding-bottom: 90px; }