/*
  Site-wide visual QA layer.
  Scope: typography, spacing, overflow, forms, cards, tables and responsive
  behavior only. It intentionally avoids changing links, routes, data or logic.
*/

:root {
    --alkz-audit-ink: #1a2c54;
    --alkz-audit-muted: #6b7388;
    --alkz-audit-border: #dfe3ec;
    --alkz-audit-soft: #f7f8fb;
    --alkz-audit-card: #ffffff;
    --alkz-audit-gold: #d49b22;
    --alkz-audit-shadow: 0 1px 2px rgba(15, 26, 58, .04), 0 12px 28px rgba(15, 26, 58, .07);
    --alkz-safe-top: env(safe-area-inset-top, 0px);
    --alkz-safe-right: env(safe-area-inset-right, 0px);
    --alkz-safe-bottom: env(safe-area-inset-bottom, 0px);
    --alkz-safe-left: env(safe-area-inset-left, 0px);
    --alkz-mobile-gutter: clamp(12px, 4vw, 18px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    min-height: 100%;
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    min-height: 100%;
    max-width: 100%;
    overflow-x: clip;
    touch-action: manipulation;
}

@supports not (overflow-x: clip) {
    body {
        overflow-x: hidden;
    }
}

@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

:where(.min-h-screen) {
    min-height: 100vh !important;
}

:where(.h-screen) {
    height: 100vh !important;
}

:where(.max-h-screen) {
    max-height: 100vh !important;
}

@supports (min-height: 100svh) {
    :where(.min-h-screen) {
        min-height: 100svh !important;
    }
}

@supports (height: 100svh) {
    :where(.h-screen) {
        height: 100svh !important;
    }

    :where(.max-h-screen) {
        max-height: 100svh !important;
    }
}

:where([class*="w-screen"], .vw-100, .min-vw-100, .container-100) {
    max-width: 100% !important;
}

@supports (-webkit-touch-callout: none) {
    html,
    body {
        background-attachment: scroll !important;
        -webkit-overflow-scrolling: touch;
    }
}

body,
input,
button,
select,
textarea {
    font-family: "IBM Plex Sans Arabic", "Tajawal", "Helvetica Neue", Arial, sans-serif;
}

:where(main, section, article, aside, header, footer, .container, .container-fluid, .row, [class*="col-"], .wrapper, .content, .content-wrapper, .section-base, .menu-brand, .menu-cnt, .trainee-content-card, .instructor-content-card, .CartContainer, .card, .box, .panel, .modal-content, .alert) {
    min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, small, span, a, button, .btn, .badge, .alert, th, td) {
    overflow-wrap: break-word;
}

:where(h1, h2, h3, .section-title, .title, .course-title) {
    line-height: 1.25;
    text-wrap: balance;
}

:where(p, li, td, th, label, .form-control, .btn) {
    line-height: 1.6;
}

:where(.font-en, .En, [dir="ltr"]) {
    overflow-wrap: normal;
    word-break: normal;
}

:where(img, video, iframe, object, embed) {
    max-width: 100%;
}

:where(img, video) {
    height: auto;
}

:where(input, select, textarea, .form-control, .select2-container, .bootstrap-select, .ts-wrapper, .tom-select, .dropdown-toggle) {
    max-width: 100%;
    min-width: 0;
}

:where(textarea, .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], select) {
    border-radius: 8px;
}

:where(button, .btn, a.btn, input[type="button"], input[type="submit"], .dt-button, .dataTables_wrapper .dataTables_paginate .paginate_button) {
    max-width: 100%;
    white-space: normal;
    vertical-align: middle;
}

:where(.btn, a.btn, .dt-button) {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

:where(a[href*="api.whatsapp.com"].fixed, .whatsapp-btn) {
    right: max(1rem, calc(var(--alkz-safe-right) + 1rem)) !important;
    bottom: max(1rem, calc(var(--alkz-safe-bottom) + 1rem)) !important;
    left: auto !important;
    max-width: calc(100vw - var(--alkz-safe-left) - var(--alkz-safe-right) - 24px);
}

:where(i.scroll-top-btn, .scroll-top-btn, .scroll-top) {
    right: max(1rem, calc(var(--alkz-safe-right) + 1rem)) !important;
    bottom: max(4.75rem, calc(var(--alkz-safe-bottom) + 4.75rem)) !important;
}

:where(.table-responsive, .dataTables_wrapper, .dt-container, .content-wrapper, .content, .trainee-content-card, .instructor-content-card, .CartContainer) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(table) {
    max-width: 100%;
}

:where(table th, table td) {
    vertical-align: middle;
}

:where(.dataTables_wrapper table, table.dataTable) {
    width: 100% !important;
}

:where(.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-buttons, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate) {
    float: none !important;
    text-align: right;
}

:where(.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select) {
    display: inline-block;
    width: auto;
}

:where(.card, .box, .panel, .modal-content, .trainee-content-card, .instructor-content-card, .CartContainer, .cnt-box, .divBorder) {
    max-width: 100%;
}

:where(.alert, .swal2-popup, .toast, .dropdown-menu) {
    direction: rtl;
    text-align: right;
}

nav.menu-top-logo {
    position: sticky !important;
    top: 0;
    z-index: 1000;
}

nav.menu-top-logo .container {
    width: min(1180px, calc(100% - 24px));
    max-width: 100%;
}

nav.menu-top-logo .menu-brand,
nav.menu-top-logo .menu-brand .logo-nav,
nav.menu-top-logo .menu-cnt,
nav.menu-top-logo #main-menu {
    min-width: 0;
}

nav.menu-top-logo .menu-brand .logo-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

nav.menu-top-logo .menu-brand .logo-nav span {
    min-width: 0;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav.menu-top-logo #main-menu > li > a,
nav.menu-top-logo .menu-cnt a {
    line-height: 1.35;
}

nav.menu-top-logo .menu-right #searchform.search-btn {
    display: none !important;
}

body.skin-purple {
    background: var(--alkz-audit-soft);
}

body.skin-purple .content-wrapper {
    background: var(--alkz-audit-soft);
    padding: 16px;
}

body.skin-purple .box,
body.skin-purple .panel,
body.skin-purple .modal-content {
    border-radius: 8px;
    border-color: rgba(223, 227, 236, .9);
    box-shadow: var(--alkz-audit-shadow);
}

body.skin-purple .table,
body.skin-purple table.dataTable {
    background: #fff;
}

body.skin-purple .main-footer {
    min-height: 56px;
    max-height: none !important;
    padding: 14px 16px;
    line-height: 1.7;
}

.content .table-responsive,
.content-wrapper .table-responsive,
.section-base .table-responsive,
.content .dataTables_wrapper,
.content-wrapper .dataTables_wrapper,
.section-base .dataTables_wrapper {
    overflow-x: auto;
}

@media (max-width: 1023.98px) {
    nav.menu-top-logo .container {
        min-height: 60px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    nav.menu-top-logo .menu-brand {
        flex: 1 1 auto;
    }

    nav.menu-top-logo .menu-brand .logo-nav span {
        max-width: 190px;
        font-size: 14px;
    }

    nav.menu-top-logo .menu-brand .logo-nav small {
        display: block;
        font-size: 10px;
        line-height: 1.2;
    }

    nav.menu-top-logo .cart_header {
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    nav.menu-top-logo .menu-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    :where(.container, .container-fluid) {
        width: 100%;
        max-width: 100%;
        padding-right: max(var(--alkz-mobile-gutter), var(--alkz-safe-right)) !important;
        padding-left: max(var(--alkz-mobile-gutter), var(--alkz-safe-left)) !important;
    }

    :where(h1) {
        font-size: 26px;
    }

    :where(h2) {
        font-size: 22px;
    }

    :where(h3) {
        font-size: 19px;
    }

    :where(.btn, a.btn, button, input[type="button"], input[type="submit"]) {
        min-width: 44px;
        min-height: 44px;
        padding-inline: 14px;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control) {
        font-size: 16px !important;
    }

    :where(.grid, .row, [class*="grid-cols"], .courses-grid, .course-section-rail, .lux-tabbar) {
        min-width: 0;
    }

    :where(.modal, .modal-dialog, .swal2-container) {
        padding-right: max(12px, var(--alkz-safe-right)) !important;
        padding-left: max(12px, var(--alkz-safe-left)) !important;
    }

    :where(.modal-dialog) {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    :where(.dropdown-toggle) {
        width: 100% !important;
    }

    :where(.dataTables_wrapper .row, .dataTables_wrapper .dt-buttons) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    :where(.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate) {
        width: 100%;
        margin: 4px 0;
    }

    :where(.dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    :where(.dataTables_wrapper .dataTables_filter input) {
        width: 100%;
        max-width: 260px;
    }

    :where(.table, table.dataTable) {
        font-size: 13px;
    }

    body.skin-purple .content-wrapper {
        padding: 10px;
    }

    body.skin-purple .main-header .logo {
        width: auto !important;
        max-width: 70%;
        white-space: normal;
        line-height: 1.25;
    }

    body.skin-purple .main-footer {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    nav.menu-top-logo .menu-brand .logo-nav span {
        max-width: 150px;
        font-size: 13px;
    }

    :where(.card, .box, .panel, .modal-content, .trainee-content-card, .instructor-content-card, .CartContainer, .divBorder) {
        border-radius: 8px;
    }

    :where(.alert, .toast, .swal2-popup) {
        font-size: 13px;
    }
}

/* Dashboard and internal-page polish */
.alkz-trainee-banner,
body > section.relative.overflow-hidden.bg-gradient-to-br {
    isolation: isolate;
}

.alkz-trainee-banner h1,
body > section.relative.overflow-hidden.bg-gradient-to-br h1 {
    max-width: 100%;
    font-size: clamp(1.45rem, 2.8vw, 2.35rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
    text-wrap: wrap;
}

.alkz-trainee-banner .lux-words,
.alkz-trainee-banner .lux-word {
    max-width: 100%;
    font: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
}

.trainee-content-card,
.instructor-content-card {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.trainee-content-card > br:first-child,
.instructor-content-card > br:first-child {
    display: none;
}

.trainee-content-card > h3:first-of-type,
.instructor-content-card > h3:first-of-type,
.section-base .container > h3:first-of-type {
    margin: 0 0 14px;
    color: var(--alkz-audit-ink);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 800;
}

.trainee-content-card > h3:first-of-type + br,
.instructor-content-card > h3:first-of-type + br,
.trainee-content-card > h3:first-of-type + .space-sm,
.instructor-content-card > h3:first-of-type + .space-sm {
    display: none;
}

.trainee-content-card :where(.timeline, .table-responsive, form, .form-box, .DataTables_wrapper),
.instructor-content-card :where(.timeline, .table-responsive, form, .form-box, .DataTables_wrapper),
.section-base :where(.timeline, .table-responsive, form, .form-box, .DataTables_wrapper) {
    max-width: 100%;
    min-width: 0;
}

.trainee-content-card :where(table.display, table.dataTable, .DataTable),
.instructor-content-card :where(table.display, table.dataTable, .DataTable),
.section-base :where(table.display, table.dataTable, .DataTable) {
    width: 100% !important;
}

.trainee-content-card :where(input[type="file"], input[type="text"], input[type="email"], input[type="password"], textarea, select),
.instructor-content-card :where(input[type="file"], input[type="text"], input[type="email"], input[type="password"], textarea, select),
.section-base :where(input[type="file"], input[type="text"], input[type="email"], input[type="password"], textarea, select) {
    max-width: 100%;
}

.header-base h1 {
    max-width: 100%;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    line-height: 1.25;
}

.header-base p {
    max-width: 760px;
    line-height: 1.8;
}

.courses-page .btn-course-muted {
    color: #6b7388 !important;
    border: 1px solid #dfe3ec;
    background: #f7f8fb !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.courses-page .btn-courses[aria-disabled="true"] {
    pointer-events: none;
}

@media (max-width: 1023.98px) {
    .alkz-trainee-banner > .relative,
    body > section.relative.overflow-hidden.bg-gradient-to-br > .relative {
        padding-top: 24px !important;
        padding-bottom: 26px !important;
    }

    .alkz-trainee-main,
    main.max-w-7xl {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }

    .trainee-sidebar,
    .instructor-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .trainee-sidebar a,
    .instructor-sidebar a {
        min-height: 44px;
        margin: 0 !important;
        padding: 8px 10px !important;
    }

    .trainee-sidebar a > span.flex-1,
    .instructor-sidebar a > span.flex-1 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trainee-sidebar hr,
    .instructor-sidebar hr,
    .alkz-trainee-main aside > .mt-4,
    main.max-w-7xl aside > .mt-4 {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .alkz-trainee-banner h1,
    body > section.relative.overflow-hidden.bg-gradient-to-br h1 {
        font-size: 1.55rem !important;
    }

    .alkz-trainee-banner p,
    body > section.relative.overflow-hidden.bg-gradient-to-br p {
        font-size: .875rem !important;
    }

    .alkz-trainee-banner a.group,
    body > section.relative.overflow-hidden.bg-gradient-to-br .flex.flex-wrap > div {
        flex: 1 1 100%;
        min-width: 0;
        padding: 10px 12px !important;
    }

    .trainee-content-card,
    .instructor-content-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .trainee-sidebar,
    .instructor-sidebar {
        grid-template-columns: 1fr;
    }

    .trainee-sidebar a,
    .instructor-sidebar a {
        font-size: 13px !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 34px;
        min-height: 34px;
        padding: 4px 8px !important;
        margin: 2px !important;
    }

    .header-base {
        padding-block: 34px !important;
    }

    .section-base {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .section-base .container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .form-box {
        padding: 16px !important;
        border-radius: 12px !important;
    }
}