:root {
    --madarek-white: #FAF8F6;
    --madarek-white-2: #FFFDFC;
    --madarek-cream: #EDEBE0;
    --madarek-cream-2: #E1DCC9;
    --madarek-red: #CD4C46;
    --madarek-red-deep: #B03E39;
    --madarek-forest: #054239;
    --madarek-forest-light: #428177;
    --madarek-forest-deep: #002623;
    --madarek-gold: #B9A779;
    --madarek-gold-dark: #988561;
    --madarek-ink: #161616;
    --madarek-ink-soft: #3D3A3B;
    --madarek-gray: #6E6F73;
    --madarek-line: rgba(22, 22, 22, .13);
    --madarek-shadow: 0 18px 44px rgba(5, 66, 57, .10);
    --madarek-display: "Lalezar", "Cairo", "Thmanyah Sans", system-ui, sans-serif;
    --madarek-body: "Cairo", "Thmanyah Sans", system-ui, sans-serif;
    --madarek-label: "Changa", "Cairo", "Thmanyah Sans", system-ui, sans-serif;
}

body {
    font-family: var(--madarek-body);
    color: var(--madarek-ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(185, 167, 121, .22), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(205, 76, 70, .10), transparent 30%),
        linear-gradient(135deg, var(--madarek-white), var(--madarek-cream)) !important;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-item,
.nav-link,
.swal2-popup {
    font-family: var(--madarek-body) !important;
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.madarek-test-title,
.section-intro .title,
.writing-intro .title,
.app-content-header h3 {
    font-family: var(--madarek-display) !important;
    font-weight: 400;
}

label,
.form-label,
.input-label,
.madarek-test-kicker,
th {
    font-family: var(--madarek-label) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .05;
    background: url("../img/logo-assets/madarek-icon-color.png") no-repeat left -80px top 88px / min(38vw, 420px) auto;
}

.app-main {
    padding: .55rem .45rem 1rem;
}

body:not(.dashboard-visual-lock) .card {
    border: 1px solid var(--madarek-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--madarek-shadow) !important;
    background: rgba(255, 253, 252, .94);
    overflow: hidden;
}

body:not(.dashboard-visual-lock) .card-header {
    background: var(--madarek-white-2) !important;
    border-bottom: 1px solid var(--madarek-line) !important;
    color: var(--madarek-ink);
    font-weight: 800;
}

body:not(.dashboard-visual-lock) .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--madarek-ink);
    border-color: var(--madarek-line);
}

body:not(.dashboard-visual-lock) .table thead th {
    background: var(--madarek-cream);
    color: var(--madarek-ink);
    font-weight: 800;
    border-bottom: 1px solid var(--madarek-line);
}

body:not(.dashboard-visual-lock) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(237, 235, 224, .46);
}

body:not(.dashboard-visual-lock) .btn {
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 0;
}

body:not(.dashboard-visual-lock) .btn-primary,
body:not(.dashboard-visual-lock) .btn-success {
    background: var(--madarek-red) !important;
    border-color: var(--madarek-red) !important;
    color: var(--madarek-white) !important;
}

body:not(.dashboard-visual-lock) .btn-primary:hover,
body:not(.dashboard-visual-lock) .btn-primary:focus,
body:not(.dashboard-visual-lock) .btn-success:hover,
body:not(.dashboard-visual-lock) .btn-success:focus {
    background: var(--madarek-red-deep) !important;
    border-color: var(--madarek-red-deep) !important;
}

body:not(.dashboard-visual-lock) .btn-outline-primary {
    color: var(--madarek-forest);
    border-color: rgba(5, 66, 57, .35);
}

body:not(.dashboard-visual-lock) .btn-outline-primary:hover {
    background: var(--madarek-forest);
    border-color: var(--madarek-forest);
    color: var(--madarek-white);
}

body:not(.dashboard-visual-lock) .btn-outline-danger,
body:not(.dashboard-visual-lock) .btn-danger {
    color: var(--madarek-red-deep);
    border-color: rgba(205, 76, 70, .55);
}

body:not(.dashboard-visual-lock) .btn-outline-danger:hover,
body:not(.dashboard-visual-lock) .btn-danger {
    background: var(--madarek-red-deep) !important;
    border-color: var(--madarek-red-deep) !important;
    color: var(--madarek-white) !important;
}

body:not(.dashboard-visual-lock) .form-control,
body:not(.dashboard-visual-lock) .form-select {
    border-radius: 8px;
    border-color: var(--madarek-line);
    background-color: var(--madarek-white-2);
    color: var(--madarek-ink);
}

body:not(.dashboard-visual-lock) .form-control:focus,
body:not(.dashboard-visual-lock) .form-select:focus {
    border-color: var(--madarek-red);
    box-shadow: 0 0 0 .2rem rgba(205, 76, 70, .12);
}

.app-content-header h3,
.app-content-header .h3 {
    font-family: var(--madarek-display);
    font-weight: 400;
    color: var(--madarek-forest);
}

.text-muted,
.small,
small {
    color: var(--madarek-gray) !important;
}

.badge {
    border-radius: 999px;
    font-family: var(--madarek-label);
    font-weight: 700;
}

.madarek-test-shell {
    max-width: 1060px;
    margin-inline: auto;
    padding-block: clamp(1rem, 3vw, 2.25rem);
}

.madarek-test-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.35rem;
    align-items: center;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    margin-bottom: 1rem;
    border-radius: 12px;
    background: var(--madarek-forest);
    color: var(--madarek-white);
    box-shadow: 0 22px 50px rgba(5, 66, 57, .22);
}

.madarek-test-hero::after {
    content: "";
    position: absolute;
    inset-block-start: -42%;
    inset-inline-end: -4%;
    width: min(36vw, 280px);
    aspect-ratio: 382 / 602;
    background: url("../img/logo-assets/madarek-icon-gold.png") no-repeat center / contain;
    opacity: .14;
    pointer-events: none;
}

.madarek-test-logo {
    position: relative;
    z-index: 1;
    width: clamp(64px, 9vw, 92px);
    height: auto;
}

.madarek-test-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 .25rem;
    font-family: var(--madarek-label);
    font-size: .82rem;
    color: var(--madarek-gold);
    font-weight: 700;
}

.madarek-test-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--madarek-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 400;
    color: var(--madarek-white);
}

.madarek-test-lead {
    position: relative;
    z-index: 1;
    margin: .55rem 0 0;
    color: rgba(250, 248, 246, .84);
    max-width: 64ch;
    line-height: 1.9;
}

.madarek-panel {
    border-top: 3px solid var(--madarek-gold) !important;
}

.madarek-panel .card-header {
    font-family: var(--madarek-display);
    font-size: 1.45rem;
    font-weight: 400 !important;
    color: var(--madarek-forest) !important;
}

.madarek-section-title {
    font-family: var(--madarek-display);
    font-weight: 400;
    color: var(--madarek-forest);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.2;
}

.madarek-section-desc {
    color: var(--madarek-ink-soft);
    font-size: 1.08rem;
    line-height: 1.85;
}

.madarek-timer {
    background: var(--madarek-forest) !important;
    border: 1px solid var(--madarek-forest) !important;
    color: var(--madarek-white);
}

.madarek-btn,
.exam-btn-green,
.next-btn-green,
#nextBtn {
    background: var(--madarek-red) !important;
    border-color: var(--madarek-red) !important;
    color: var(--madarek-white) !important;
    background-image: none !important;
    box-shadow: 0 14px 28px -16px rgba(205, 76, 70, .65);
}

.madarek-btn:hover,
.madarek-btn:focus,
.exam-btn-green:hover,
.exam-btn-green:focus,
.next-btn-green:hover,
.next-btn-green:focus,
#nextBtn:hover,
#nextBtn:focus {
    background: var(--madarek-red-deep) !important;
    border-color: var(--madarek-red-deep) !important;
    color: var(--madarek-white) !important;
}

.progress {
    background: rgba(5, 66, 57, .12);
}

.progress-bar {
    background-color: var(--madarek-red) !important;
}

.form-check-input:checked {
    background-color: var(--madarek-red);
    border-color: var(--madarek-red);
}

.form-check-input:focus {
    border-color: var(--madarek-red);
    box-shadow: 0 0 0 .2rem rgba(205, 76, 70, .14);
}

.dataTables_wrapper .dt-buttons {
    direction: rtl;
    display: grid !important;
    grid-template-columns: minmax(104px, .22fr) repeat(3, minmax(150px, 1fr));
    gap: .35rem;
    width: 100%;
    margin-bottom: .85rem;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-btn,
.dataTables_wrapper .dt-buttons .madarek-dt-btn,
.dataTables_wrapper .dt-buttons button.dt-button,
.dataTables_wrapper .dt-buttons .btn-secondary,
.dataTables_wrapper .dt-buttons .btn.btn-secondary,
.dataTables_wrapper .dt-button-collection .dt-button,
.dataTables_wrapper .dt-buttons .btn.disabled,
.dataTables_wrapper .dt-buttons .btn:disabled,
.dataTables_wrapper .dt-buttons button.disabled,
.dataTables_wrapper .dt-buttons button:disabled {
    --bs-btn-bg: var(--madarek-cream);
    --bs-btn-border-color: var(--madarek-gold);
    --bs-btn-color: var(--madarek-forest);
    --bs-btn-hover-bg: var(--madarek-forest);
    --bs-btn-hover-border-color: var(--madarek-forest);
    --bs-btn-hover-color: var(--madarek-white);
    --bs-btn-active-bg: var(--madarek-forest);
    --bs-btn-active-border-color: var(--madarek-forest);
    --bs-btn-active-color: var(--madarek-white);
    --bs-btn-disabled-bg: var(--madarek-cream-2);
    --bs-btn-disabled-border-color: var(--madarek-cream-2);
    --bs-btn-disabled-color: var(--madarek-gray);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: .45rem;
    width: 100%;
    min-height: 34px;
    padding: .38rem .85rem !important;
    background: var(--madarek-cream) !important;
    background-color: var(--madarek-cream) !important;
    background-image: none !important;
    border: 1px solid var(--madarek-gold) !important;
    color: var(--madarek-forest) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(22, 22, 22, .09);
    font-family: var(--madarek-body);
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-btn:hover,
.dataTables_wrapper .dt-buttons .madarek-dt-btn:hover,
.dataTables_wrapper .dt-buttons button.dt-button:hover,
.dataTables_wrapper .dt-buttons .btn-secondary:hover,
.dataTables_wrapper .dt-buttons .btn.btn-secondary:hover,
.dataTables_wrapper .dt-buttons .btn:active,
.dataTables_wrapper .dt-buttons .dt-btn:active,
.dataTables_wrapper .dt-buttons .madarek-dt-btn:active,
.dataTables_wrapper .dt-buttons button.dt-button:active,
.dataTables_wrapper .dt-buttons .btn.show,
.dataTables_wrapper .dt-buttons .btn-secondary.show {
    --bs-btn-bg: var(--madarek-forest);
    --bs-btn-border-color: var(--madarek-forest);
    --bs-btn-color: var(--madarek-white);
    --bs-btn-hover-bg: var(--madarek-forest);
    --bs-btn-hover-border-color: var(--madarek-forest);
    --bs-btn-hover-color: var(--madarek-white);
    --bs-btn-active-bg: var(--madarek-forest);
    --bs-btn-active-border-color: var(--madarek-forest);
    --bs-btn-active-color: var(--madarek-white);
    background: var(--madarek-forest) !important;
    background-color: var(--madarek-forest) !important;
    background-image: none !important;
    border-color: var(--madarek-forest) !important;
    color: var(--madarek-white) !important;
    box-shadow: 0 8px 18px rgba(5, 66, 57, .18) !important;
}

.dataTables_wrapper .dt-buttons .btn:focus,
.dataTables_wrapper .dt-buttons .dt-btn:focus,
.dataTables_wrapper .dt-buttons .madarek-dt-btn:focus,
.dataTables_wrapper .dt-buttons button.dt-button:focus {
    box-shadow: 0 0 0 .2rem rgba(185, 167, 121, .24) !important;
}

.dataTables_wrapper .dt-buttons .madarek-dt-btn-compact {
    min-width: 104px;
}

.dataTables_wrapper .dt-buttons .btn i,
.dataTables_wrapper .dt-buttons .dt-btn i,
.dataTables_wrapper .dt-buttons .madarek-dt-btn i {
    color: var(--madarek-forest);
    font-size: .92rem;
}

.dataTables_wrapper .dt-buttons .btn:hover i,
.dataTables_wrapper .dt-buttons .dt-btn:hover i,
.dataTables_wrapper .dt-buttons .madarek-dt-btn:hover i,
.dataTables_wrapper .dt-buttons .btn.show i,
.dataTables_wrapper .dt-buttons .btn-secondary.show i {
    color: var(--madarek-white) !important;
}

.dt-button-collection {
    border: 1px solid var(--madarek-line) !important;
    border-radius: 10px !important;
    background: var(--madarek-white-2) !important;
    box-shadow: 0 16px 34px rgba(22, 22, 22, .14) !important;
    padding: .35rem !important;
}

.dt-button-collection .dropdown-item,
.dt-button-collection .dt-button {
    color: var(--madarek-forest) !important;
    border-radius: 8px !important;
}

.dt-button-collection .dropdown-item:hover,
.dt-button-collection .dt-button:hover {
    background: var(--madarek-cream) !important;
    color: var(--madarek-forest) !important;
}

/* Legacy page-specific DataTable overrides disabled.
   These pages now use the same shared DataTable component as test results.
.users-page .dataTables_wrapper .dt-buttons,
.roles-page .dataTables_wrapper .dt-buttons,
.settings-page .dataTables_wrapper .dt-buttons {
    direction: rtl;
    display: grid !important;
    grid-template-columns: minmax(104px, .22fr) repeat(3, minmax(150px, 1fr));
    gap: .35rem;
    width: 100%;
    margin-bottom: .85rem;
}

.users-page .dataTables_wrapper .dt-buttons .btn,
.users-page .dataTables_wrapper .dt-buttons button,
.roles-page .dataTables_wrapper .dt-buttons .btn,
.roles-page .dataTables_wrapper .dt-buttons button,
.settings-page .dataTables_wrapper .dt-buttons .btn,
.settings-page .dataTables_wrapper .dt-buttons button,
.users-page .dataTables_wrapper .dt-buttons .btn.disabled,
.users-page .dataTables_wrapper .dt-buttons .btn:disabled,
.roles-page .dataTables_wrapper .dt-buttons .btn.disabled,
.roles-page .dataTables_wrapper .dt-buttons .btn:disabled,
.settings-page .dataTables_wrapper .dt-buttons .btn.disabled,
.settings-page .dataTables_wrapper .dt-buttons .btn:disabled {
    --bs-btn-bg: var(--madarek-cream);
    --bs-btn-border-color: var(--madarek-gold);
    --bs-btn-color: var(--madarek-forest);
    --bs-btn-hover-bg: var(--madarek-forest);
    --bs-btn-hover-border-color: var(--madarek-forest);
    --bs-btn-hover-color: var(--madarek-white);
    --bs-btn-active-bg: var(--madarek-forest);
    --bs-btn-active-border-color: var(--madarek-forest);
    --bs-btn-active-color: var(--madarek-white);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: .45rem;
    width: 100%;
    min-height: 34px;
    padding: .38rem .85rem !important;
    background: var(--madarek-cream) !important;
    background-color: var(--madarek-cream) !important;
    background-image: none !important;
    border: 1px solid var(--madarek-gold) !important;
    color: var(--madarek-forest) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(22, 22, 22, .09) !important;
    font-family: var(--madarek-body);
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.2;
}

.users-page .dataTables_wrapper .dt-buttons .btn:hover,
.users-page .dataTables_wrapper .dt-buttons button:hover,
.roles-page .dataTables_wrapper .dt-buttons .btn:hover,
.roles-page .dataTables_wrapper .dt-buttons button:hover,
.settings-page .dataTables_wrapper .dt-buttons .btn:hover,
.settings-page .dataTables_wrapper .dt-buttons button:hover,
.users-page .dataTables_wrapper .dt-buttons .btn.show,
.roles-page .dataTables_wrapper .dt-buttons .btn.show,
.settings-page .dataTables_wrapper .dt-buttons .btn.show {
    --bs-btn-bg: var(--madarek-forest);
    --bs-btn-border-color: var(--madarek-forest);
    --bs-btn-color: var(--madarek-white);
    --bs-btn-hover-bg: var(--madarek-forest);
    --bs-btn-hover-border-color: var(--madarek-forest);
    --bs-btn-hover-color: var(--madarek-white);
    --bs-btn-active-bg: var(--madarek-forest);
    --bs-btn-active-border-color: var(--madarek-forest);
    --bs-btn-active-color: var(--madarek-white);
    background: var(--madarek-forest) !important;
    background-color: var(--madarek-forest) !important;
    background-image: none !important;
    border-color: var(--madarek-forest) !important;
    color: var(--madarek-white) !important;
    box-shadow: 0 8px 18px rgba(5, 66, 57, .18) !important;
}

.users-page .dataTables_wrapper .dt-buttons .btn i,
.roles-page .dataTables_wrapper .dt-buttons .btn i,
.settings-page .dataTables_wrapper .dt-buttons .btn i {
    color: var(--madarek-forest) !important;
}

.users-page .dataTables_wrapper .dt-buttons .btn:hover i,
.roles-page .dataTables_wrapper .dt-buttons .btn:hover i,
.settings-page .dataTables_wrapper .dt-buttons .btn:hover i,
.users-page .dataTables_wrapper .dt-buttons .btn.show i,
.roles-page .dataTables_wrapper .dt-buttons .btn.show i,
.settings-page .dataTables_wrapper .dt-buttons .btn.show i {
    color: var(--madarek-white) !important;
}
*/

.dataTables_filter,
.dataTables_info {
    color: var(--madarek-gray);
    font-weight: 700;
}

.dataTables_filter input,
.dataTables_length select {
    border: 1px solid var(--madarek-line);
    border-radius: 8px;
    background: var(--madarek-white-2);
    color: var(--madarek-ink);
    padding: .35rem .65rem;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
    outline: none;
    border-color: var(--madarek-red);
    box-shadow: 0 0 0 .2rem rgba(205, 76, 70, .12);
}

.page-link {
    color: var(--madarek-forest);
    border-color: var(--madarek-line);
    background: var(--madarek-white-2);
}

.page-link:hover {
    color: var(--madarek-red);
    background: var(--madarek-cream);
}

.page-item.active .page-link {
    background: var(--madarek-red);
    border-color: var(--madarek-red);
    color: var(--madarek-white);
}

@media (max-width: 640px) {
    .dataTables_wrapper .dt-buttons {
        grid-template-columns: 1fr 1fr;
    }

    .madarek-test-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}