@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

:root {
    --brand-900: #564e43;
    --brand-700: #9b5b45;
    --brand-500: #cc794d;
    --brand-200: #bfb9ad;
    --brand-100: #ebdbd3;

    --bg: #f6f1ec;
    --surface: #ffffff;
    --surface-alt: #faf6f2;
    --border: #cdbfb1;
    --text: #222222;
    --text-muted: #4d4d4d;
    --link: #6e3f31;
    --link-hover: #4f2d22;
    --primary: #8f513d;
    --primary-strong: #6f3f2f;
    --focus: #005fcc;

    --success-bg: #e8f8ed;
    --success-text: #0c4f2b;
    --danger-bg: #fdebea;
    --danger-text: #7f1d1d;

    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-1: 0 8px 20px rgba(32, 20, 12, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: "Cairo", "Tajawal", system-ui, sans-serif;
    line-height: 1.6;
    background:
        radial-gradient(circle at 93% 12%, rgba(204, 121, 77, 0.12), rgba(204, 121, 77, 0) 37%),
        radial-gradient(circle at 8% 82%, rgba(155, 91, 69, 0.08), rgba(155, 91, 69, 0) 43%),
        linear-gradient(180deg, #fbf7f3 0%, var(--bg) 100%);
}

.skip-link {
    position: fixed;
    inset-inline-start: 14px;
    top: 10px;
    z-index: 2500;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    border: 2px solid #111;
    background: #fff;
    color: #111;
    text-decoration: none;
    transform: translateY(-220%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

a {
    color: var(--link);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--link-hover);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.navbar {
    border-bottom: 1px solid rgba(205, 191, 177, 0.85);
    background: linear-gradient(145deg, rgba(86, 78, 67, 0.97), rgba(75, 67, 57, 0.97)) !important;
    box-shadow: var(--shadow-1);
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ebdbd3 url('./CREAROMA-LOGO.svg') center/75% no-repeat;
    box-shadow: inset 0 0 0 1px rgba(155, 91, 69, 0.48);
}

.navbar .btn-outline-danger {
    color: #ffe8dd;
    border-color: rgba(255, 190, 156, 0.78);
    background: rgba(255, 255, 255, 0.04);
}

.navbar .btn-outline-danger:hover,
.navbar .btn-outline-danger:focus {
    color: #2f1a11;
    border-color: #ffc2a4;
    background: #ffc2a4;
}

.app-main {
    flex: 1 0 auto;
    padding-bottom: 2rem;
}

main {
    flex: 1 0 auto;
}

.section,
.dashboard-section,
.card,
.auth-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
    box-shadow: var(--shadow-1);
}

.section,
.dashboard-section {
    padding: 1rem;
    margin-bottom: 1rem;
}

.auth-wrap {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: min(100%, 490px);
    padding: 1.4rem;
}

.home-head {
    border: 1px solid rgba(155, 91, 69, 0.45);
    border-radius: var(--radius-lg);
    background: linear-gradient(130deg, rgba(86, 78, 67, 0.96), rgba(155, 91, 69, 0.96));
    color: #ffffff;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.home-head small {
    color: #fff;
}

.section-title {
    color: #1f1f1f;
    font-weight: 800;
}

.icon {
    margin-bottom: 14px;
}

.icon a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    min-height: 150px;
    width: 100%;
    padding: 0.8rem;
    text-decoration: none;
    background: linear-gradient(180deg, #ffffff 0%, #f7efe8 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 7px 16px rgba(40, 24, 14, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.icon a:hover,
.icon a:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(40, 24, 14, 0.14);
    border-color: #ba8f78;
}

.icon i,
.icon .material-icons {
    color: var(--brand-700);
    font-size: 1.95rem;
}

.icon p {
    margin: 0;
    color: #303030;
    font-weight: 700;
    text-align: center;
}

.btn {
    border-radius: 10px;
    font-weight: 700;
    min-height: 42px;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%);
    border-color: var(--primary-strong);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: linear-gradient(180deg, #7f4938 0%, #5e3528 100%);
    border-color: #5e3528;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    background: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    border-color: var(--primary-strong);
    background: var(--primary-strong);
}

.form-control,
.form-select {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #bdaea1;
    color: var(--text);
    background: #fff;
}

.form-control::placeholder {
    color: #666666;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(143, 81, 61, 0.18);
}

.table,
.cool-table,
.summary-table,
.summary-table-3 {
    border-radius: var(--radius-md);
    border-color: rgba(155, 91, 69, 0.24);
    background: #fff;
    overflow: hidden;
}

.table thead th,
.cool-table th,
.summary-table th,
.summary-table-3 th {
    background: linear-gradient(180deg, var(--brand-700) 0%, #7f4a39 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.table tbody tr:nth-child(even) {
    background: rgba(235, 219, 211, 0.42);
}

.table tbody tr:hover {
    background: rgba(204, 121, 77, 0.14);
}

.alert {
    border-width: 1px;
    border-radius: var(--radius-md);
}

.alert-success {
    background: var(--success-bg);
    border-color: #9ad3af;
    color: var(--success-text);
}

.alert-danger {
    background: var(--danger-bg);
    border-color: #e5b2ac;
    color: var(--danger-text);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #bdaea1;
    border-radius: 8px;
    min-height: 40px;
}

/* Fix DataTables sort icon rendering with custom header backgrounds. */
table.dataTable thead th,
table.dataTable thead td {
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    background-image: none !important;
    background: linear-gradient(180deg, var(--brand-700) 0%, #7f4a39 100%) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    padding-inline-start: 1.75rem !important;
    position: relative;
}

table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before {
    position: absolute;
    inset-inline-start: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
}

table.dataTable thead th.sorting::before {
    content: "↕";
}

table.dataTable thead th.sorting_asc::before {
    content: "▲";
}

table.dataTable thead th.sorting_desc::before {
    content: "▼";
}

html[dir="ltr"] table.dataTable thead th.sorting,
html[dir="ltr"] table.dataTable thead th.sorting_asc,
html[dir="ltr"] table.dataTable thead th.sorting_desc,
html[dir="ltr"] table.dataTable thead th.sorting_asc_disabled,
html[dir="ltr"] table.dataTable thead th.sorting_desc_disabled {
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 1.75rem !important;
}

html[dir="ltr"] table.dataTable thead th.sorting::before,
html[dir="ltr"] table.dataTable thead th.sorting_asc::before,
html[dir="ltr"] table.dataTable thead th.sorting_desc::before {
    inset-inline-start: auto;
    inset-inline-end: 0.55rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-strong) !important;
    border-color: var(--primary-strong) !important;
    color: #fff !important;
}

.app-footer {
    margin-top: auto;
    text-align: center;
    color: #efe7df;
    border-top: 1px solid rgba(205, 191, 177, 0.78);
    background: linear-gradient(145deg, rgba(86, 78, 67, 0.97), rgba(75, 67, 57, 0.97));
    padding: 0.75rem 0;
    width: 100%;
}

footer[style*="position: fixed"] {
    position: static !important;
    width: 100% !important;
    margin-top: auto;
    text-align: center !important;
    color: #efe7df !important;
    border-top: 1px solid rgba(205, 191, 177, 0.78) !important;
    background: linear-gradient(145deg, rgba(86, 78, 67, 0.97), rgba(75, 67, 57, 0.97)) !important;
    padding: 0.75rem 0 !important;
}

.a11y-tools {
    position: fixed;
    left: 14px;
    right: auto;
    bottom: 14px;
    z-index: 1900;
}

.a11y-toggle {
    width: 92px;
    min-height: 92px;
    border-radius: 16px;
    border: 2px solid var(--primary);
    background: linear-gradient(160deg, #fff8f3 0%, #efddd0 100%);
    color: var(--primary);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 0.45rem 0.35rem;
    box-shadow: 0 10px 22px rgba(28, 16, 10, 0.2);
}

.a11y-toggle i {
    font-size: 2rem;
}

.a11y-toggle-text {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.a11y-toggle:hover,
.a11y-toggle:focus {
    color: #fff;
    border-color: var(--primary-strong);
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-strong) 100%);
}

.a11y-panel {
    width: min(90vw, 292px);
    margin-top: 10px;
    border: 1px solid #c7b7aa;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-1);
    padding: 12px;
}

.a11y-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.a11y-help {
    margin: 0.3rem 0 0.55rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.a11y-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.a11y-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.a11y-panel .btn {
    min-height: 38px;
}

.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.a11y-readable-spacing {
    line-height: 1.9;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
}

.a11y-readable-spacing p,
.a11y-readable-spacing li,
.a11y-readable-spacing label,
.a11y-readable-spacing td,
.a11y-readable-spacing th,
.a11y-readable-spacing .form-control,
.a11y-readable-spacing .btn {
    line-height: 1.9;
}

.a11y-reduced-motion *,
.a11y-reduced-motion *::before,
.a11y-reduced-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

body.a11y-view-bw {
    --bg: #f2f2f2;
    --surface: #ffffff;
    --surface-alt: #f7f7f7;
    --border: #9d9d9d;
    --text: #111111;
    --text-muted: #333333;
    --link: #111111;
    --link-hover: #000000;
    --primary: #2f2f2f;
    --primary-strong: #111111;
    --focus: #000000;
    background:
        linear-gradient(180deg, #f7f7f7 0%, #ececec 100%) !important;
    color: #111 !important;
}

body.a11y-view-bw .section,
body.a11y-view-bw .dashboard-section,
body.a11y-view-bw .card,
body.a11y-view-bw .auth-card,
body.a11y-view-bw .table,
body.a11y-view-bw .cool-table,
body.a11y-view-bw .summary-table,
body.a11y-view-bw .summary-table-3,
body.a11y-view-bw .a11y-panel,
body.a11y-view-bw .icon a {
    background: #fff !important;
    color: #111 !important;
    border-color: #8a8a8a !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

body.a11y-view-bw .a11y-toggle {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

body.a11y-view-bw .a11y-toggle-text {
    color: #111111 !important;
}

body.a11y-view-bw .navbar,
body.a11y-view-bw .app-footer,
body.a11y-view-bw footer[style*="position: fixed"] {
    background: linear-gradient(145deg, #3b3b3b, #1f1f1f) !important;
}

body.a11y-view-bw .home-head {
    background: linear-gradient(140deg, #3d3d3d, #232323) !important;
    border-color: #757575 !important;
    color: #fff !important;
}

body.a11y-view-bw .home-head small,
body.a11y-view-bw .navbar-brand,
body.a11y-view-bw .app-footer,
body.a11y-view-bw footer[style*="position: fixed"] {
    color: #fff !important;
}

body.a11y-view-bw .icon i,
body.a11y-view-bw .icon .material-icons,
body.a11y-view-bw .section-title,
body.a11y-view-bw .icon p,
body.a11y-view-bw p,
body.a11y-view-bw span,
body.a11y-view-bw td,
body.a11y-view-bw th,
body.a11y-view-bw label,
body.a11y-view-bw h1,
body.a11y-view-bw h2,
body.a11y-view-bw h3,
body.a11y-view-bw h4,
body.a11y-view-bw h5,
body.a11y-view-bw h6 {
    color: #111 !important;
}

body.a11y-view-bw a {
    color: #111 !important;
}

body.a11y-view-bw .btn-primary {
    background: linear-gradient(180deg, #3f3f3f 0%, #1f1f1f 100%) !important;
    border-color: #1f1f1f !important;
    color: #fff !important;
}

body.a11y-view-bw .btn-outline-primary,
body.a11y-view-bw .btn-outline-danger {
    background: #fff !important;
    color: #1f1f1f !important;
    border-color: #1f1f1f !important;
}

body.a11y-view-bw .btn-outline-primary:hover,
body.a11y-view-bw .btn-outline-danger:hover {
    background: #1f1f1f !important;
    color: #fff !important;
}

body.a11y-view-bw .form-control,
body.a11y-view-bw .form-select,
body.a11y-view-bw input,
body.a11y-view-bw select,
body.a11y-view-bw textarea {
    border-color: #8a8a8a !important;
    color: #111 !important;
    background: #fff !important;
}

body.a11y-view-bw .table thead th,
body.a11y-view-bw .cool-table th,
body.a11y-view-bw .summary-table th,
body.a11y-view-bw .summary-table-3 th {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

body.a11y-view-bw .table tbody tr:nth-child(even) {
    background: #f2f2f2 !important;
}

body.a11y-view-bw .table tbody tr:hover {
    background: #e8e8e8 !important;
}

body.a11y-view-bw .dataTables_wrapper .dataTables_filter input,
body.a11y-view-bw .dataTables_wrapper .dataTables_length select {
    border-color: #7d7d7d !important;
    color: #111 !important;
    background: #fff !important;
}

body.a11y-view-bw .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #fff !important;
}

body.a11y-view-soft {
    --bg: #f8f4f0;
    --surface: #fffdfb;
    --surface-alt: #f8f1ea;
    --border: #d7ccc2;
    --text: #2e2925;
    --text-muted: #5f5751;
    --link: #6d4b3f;
    --link-hover: #4c342b;
    --primary: #8c6d5c;
    --primary-strong: #6e5649;
    background:
        radial-gradient(circle at 92% 10%, rgba(164, 120, 92, 0.17), rgba(164, 120, 92, 0) 35%),
        radial-gradient(circle at 5% 88%, rgba(126, 139, 130, 0.15), rgba(126, 139, 130, 0) 40%),
        linear-gradient(180deg, #fdf9f5 0%, #f3ece5 100%) !important;
}

body.a11y-view-soft .section,
body.a11y-view-soft .dashboard-section,
body.a11y-view-soft .card,
body.a11y-view-soft .auth-card,
body.a11y-view-soft .table,
body.a11y-view-soft .cool-table,
body.a11y-view-soft .summary-table,
body.a11y-view-soft .summary-table-3,
body.a11y-view-soft .a11y-panel,
body.a11y-view-soft .icon a {
    background: linear-gradient(180deg, #fffdfb 0%, #f5ede6 100%) !important;
    border-color: #d9c9bd !important;
    box-shadow: 0 6px 16px rgba(66, 43, 29, 0.1) !important;
}

body.a11y-view-soft .navbar,
body.a11y-view-soft .app-footer,
body.a11y-view-soft footer[style*="position: fixed"] {
    background: linear-gradient(145deg, #6b5e54, #584b43) !important;
}

body.a11y-view-soft .home-head {
    background: linear-gradient(140deg, #8b6f5f, #6f5a4d) !important;
    border-color: #b08f7b !important;
    color: #fff !important;
}

body.a11y-view-soft .home-head small,
body.a11y-view-soft .navbar-brand,
body.a11y-view-soft .app-footer,
body.a11y-view-soft footer[style*="position: fixed"] {
    color: #fff !important;
}

body.a11y-view-soft .icon i,
body.a11y-view-soft .icon .material-icons {
    color: #7f5f4f !important;
}

body.a11y-view-soft .btn-primary {
    background: linear-gradient(180deg, #9b7a67 0%, #755a4b 100%) !important;
    border-color: #755a4b !important;
}

body.a11y-view-soft .btn-outline-primary,
body.a11y-view-soft .btn-outline-danger {
    color: #6d5547 !important;
    border-color: #8e715e !important;
    background: #fff8f2 !important;
}

body.a11y-view-soft .btn-outline-primary:hover,
body.a11y-view-soft .btn-outline-danger:hover {
    color: #fff !important;
    border-color: #755a4b !important;
    background: #755a4b !important;
}

body.a11y-view-soft .table thead th,
body.a11y-view-soft .cool-table th,
body.a11y-view-soft .summary-table th,
body.a11y-view-soft .summary-table-3 th {
    background: linear-gradient(180deg, #8b6a58 0%, #735647 100%) !important;
}

body.a11y-view-soft .table tbody tr:nth-child(even) {
    background: #f7efe8 !important;
}

body.a11y-view-soft .table tbody tr:hover {
    background: #efe2d8 !important;
}

body.a11y-view-soft .dataTables_wrapper .dataTables_filter input,
body.a11y-view-soft .dataTables_wrapper .dataTables_length select,
body.a11y-view-soft .form-control,
body.a11y-view-soft .form-select,
body.a11y-view-soft input,
body.a11y-view-soft select,
body.a11y-view-soft textarea {
    border-color: #cdb9aa !important;
    color: #2f2925 !important;
    background: #fffdfb !important;
}

body.a11y-view-soft .a11y-toggle {
    background: linear-gradient(170deg, #fff7f1 0%, #f1dfd2 100%) !important;
    color: #6f5547 !important;
    border-color: #8f705d !important;
}

body.a11y-view-calm {
    --bg: #eef4f6;
    --surface: #f8fcfd;
    --surface-alt: #edf5f7;
    --border: #b8cbd1;
    --text: #1f3440;
    --text-muted: #47616d;
    --link: #2e5f73;
    --link-hover: #1d4656;
    --primary: #3f7a8c;
    --primary-strong: #2f6170;
    --focus: #0d4f66;
    background:
        radial-gradient(circle at 90% 8%, rgba(130, 168, 178, 0.2), rgba(130, 168, 178, 0) 38%),
        radial-gradient(circle at 7% 88%, rgba(110, 145, 160, 0.18), rgba(110, 145, 160, 0) 42%),
        linear-gradient(180deg, #f7fcfd 0%, #eaf2f5 100%) !important;
}

body.a11y-view-calm .section,
body.a11y-view-calm .dashboard-section,
body.a11y-view-calm .card,
body.a11y-view-calm .auth-card,
body.a11y-view-calm .table,
body.a11y-view-calm .cool-table,
body.a11y-view-calm .summary-table,
body.a11y-view-calm .summary-table-3,
body.a11y-view-calm .a11y-panel,
body.a11y-view-calm .icon a {
    background: linear-gradient(180deg, #fafdff 0%, #edf5f7 100%) !important;
    border-color: #bfd2d8 !important;
    box-shadow: 0 6px 16px rgba(36, 68, 82, 0.12) !important;
}

body.a11y-view-calm .navbar,
body.a11y-view-calm .app-footer,
body.a11y-view-calm footer[style*="position: fixed"] {
    background: linear-gradient(145deg, #406472, #2e4b56) !important;
}

body.a11y-view-calm .home-head {
    background: linear-gradient(140deg, #5f8795, #416676) !important;
    border-color: #8eb0bb !important;
    color: #fff !important;
}

body.a11y-view-calm .home-head small,
body.a11y-view-calm .navbar-brand,
body.a11y-view-calm .app-footer,
body.a11y-view-calm footer[style*="position: fixed"] {
    color: #eef9ff !important;
}

body.a11y-view-calm .icon i,
body.a11y-view-calm .icon .material-icons {
    color: #3f6e7f !important;
}

body.a11y-view-calm .btn-primary {
    background: linear-gradient(180deg, #4f8595 0%, #336474 100%) !important;
    border-color: #336474 !important;
}

body.a11y-view-calm .btn-outline-primary,
body.a11y-view-calm .btn-outline-danger {
    color: #2d5e70 !important;
    border-color: #5f8d9b !important;
    background: #f5fbfd !important;
}

body.a11y-view-calm .btn-outline-primary:hover,
body.a11y-view-calm .btn-outline-danger:hover {
    color: #fff !important;
    border-color: #336474 !important;
    background: #336474 !important;
}

body.a11y-view-calm .table thead th,
body.a11y-view-calm .cool-table th,
body.a11y-view-calm .summary-table th,
body.a11y-view-calm .summary-table-3 th {
    background: linear-gradient(180deg, #4f7f8f 0%, #386272 100%) !important;
}

body.a11y-view-calm .table tbody tr:nth-child(even) {
    background: #edf5f7 !important;
}

body.a11y-view-calm .table tbody tr:hover {
    background: #deebf0 !important;
}

body.a11y-view-calm .dataTables_wrapper .dataTables_filter input,
body.a11y-view-calm .dataTables_wrapper .dataTables_length select,
body.a11y-view-calm .form-control,
body.a11y-view-calm .form-select,
body.a11y-view-calm input,
body.a11y-view-calm select,
body.a11y-view-calm textarea {
    border-color: #b8cdd4 !important;
    color: #20414e !important;
    background: #fafdff !important;
}

body.a11y-view-calm .a11y-toggle {
    background: linear-gradient(170deg, #f7fdff 0%, #dcecf2 100%) !important;
    color: #2f6678 !important;
    border-color: #5c8896 !important;
}

body.a11y-high-contrast {
    background: #000 !important;
    color: #fff !important;
}

body.a11y-high-contrast,
body.a11y-high-contrast .section,
body.a11y-high-contrast .dashboard-section,
body.a11y-high-contrast .card,
body.a11y-high-contrast .auth-card,
body.a11y-high-contrast .table,
body.a11y-high-contrast .cool-table,
body.a11y-high-contrast .summary-table,
body.a11y-high-contrast .summary-table-3,
body.a11y-high-contrast .a11y-panel,
body.a11y-high-contrast .navbar,
body.a11y-high-contrast .home-head,
body.a11y-high-contrast .app-footer,
body.a11y-high-contrast .icon a {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4,
body.a11y-high-contrast h5,
body.a11y-high-contrast h6,
body.a11y-high-contrast p,
body.a11y-high-contrast span,
body.a11y-high-contrast td,
body.a11y-high-contrast th,
body.a11y-high-contrast label,
body.a11y-high-contrast .section-title,
body.a11y-high-contrast .icon p,
body.a11y-high-contrast .navbar-brand {
    color: #fff !important;
}

body.a11y-high-contrast a,
body.a11y-high-contrast .btn-link,
body.a11y-high-contrast .dataTables_wrapper .dataTables_info,
body.a11y-high-contrast .dataTables_wrapper .dataTables_paginate {
    color: #00ffff !important;
}

body.a11y-high-contrast .btn,
body.a11y-high-contrast .btn-primary,
body.a11y-high-contrast .btn-outline-primary,
body.a11y-high-contrast .btn-outline-danger {
    background: #000 !important;
    color: #ffeb3b !important;
    border-color: #ffeb3b !important;
}

body.a11y-high-contrast .btn:hover,
body.a11y-high-contrast .btn:focus {
    background: #ffeb3b !important;
    color: #000 !important;
}

body.a11y-high-contrast .form-control,
body.a11y-high-contrast .form-select,
body.a11y-high-contrast input,
body.a11y-high-contrast select,
body.a11y-high-contrast textarea,
body.a11y-high-contrast .dataTables_wrapper .dataTables_filter input,
body.a11y-high-contrast .dataTables_wrapper .dataTables_length select {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

body.a11y-high-contrast table.dataTable thead th,
body.a11y-high-contrast table.dataTable thead td {
    background-size: 14px 14px !important;
}

body.a11y-high-contrast table.dataTable thead th.sorting,
body.a11y-high-contrast table.dataTable thead th.sorting_asc,
body.a11y-high-contrast table.dataTable thead th.sorting_desc,
body.a11y-high-contrast table.dataTable thead th.sorting_asc_disabled,
body.a11y-high-contrast table.dataTable thead th.sorting_desc_disabled {
    background: #000 !important;
    color: #ffeb3b !important;
    border-color: #fff !important;
}

body.a11y-high-contrast table.dataTable thead th.sorting::before,
body.a11y-high-contrast table.dataTable thead th.sorting_asc::before,
body.a11y-high-contrast table.dataTable thead th.sorting_desc::before {
    color: #ffeb3b !important;
}

body.a11y-high-contrast .form-control::placeholder {
    color: #e6e6e6;
}

body.a11y-high-contrast .form-check-input {
    border: 2px solid #fff !important;
    background-color: #000 !important;
    accent-color: #ffeb3b;
}

body.a11y-high-contrast .form-check-input:checked {
    background-color: #ffeb3b !important;
    border-color: #ffeb3b !important;
}

body.a11y-high-contrast .form-check-label {
    color: #fff !important;
}

body.a11y-high-contrast .table thead th,
body.a11y-high-contrast .cool-table th,
body.a11y-high-contrast .summary-table th,
body.a11y-high-contrast .summary-table-3 th {
    background: #000 !important;
    color: #ffeb3b !important;
    border: 2px solid #fff !important;
}

body.a11y-high-contrast .table tbody tr,
body.a11y-high-contrast .table tbody tr:nth-child(even),
body.a11y-high-contrast .table tbody tr:hover {
    background: #000 !important;
    color: #fff !important;
}

body.a11y-high-contrast .alert,
body.a11y-high-contrast .alert-success,
body.a11y-high-contrast .alert-danger {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .skip-link,
    .a11y-toggle,
    .btn,
    .form-control,
    .form-select,
    .table,
    .card,
    .section,
    .dashboard-section {
        border: 1px solid CanvasText;
    }
}

@media (max-width: 992px) {
    .icon a {
        min-height: 128px;
    }

    .section,
    .dashboard-section,
    .card,
    .auth-card,
    .home-head {
        border-radius: 12px;
    }
}