/*
 * ITQAN formal layer — loaded last.
 * One typeface (Noto Kufi Arabic), navy and green, thin lines, small corners, no gradients.
 * ":is(#main-wrapper, body):not(#iq-x)" matches every page but weighs two IDs, so these rules
 * beat the older theme selectors such as ".qs-dashboard #js-trigger-home-admin-wrapper .card".
 * Fixed values are used because later stylesheets redefine the --itq-* variables.
 */

@font-face {
    font-family: "Noto Kufi Arabic";
    src: url("../fonts/itqan/NotoKufiArabic-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --itq-navy: #0a2240;
    --itq-navy-2: #0a2240;
    --itq-navy-soft: #eef2f7;
    --itq-green: #0f7a4c;
    --itq-green-2: #0c6640;
    --itq-green-soft: #eaf4ef;
    --itq-charcoal: #1a2533;
    --itq-muted: #6b7684;
    --itq-line: #dde3ea;
    --itq-radius: 6px;
    --itq-radius-sm: 4px;
    --itq-shadow: 0 1px 2px rgba(10, 34, 64, 0.04);
    --itq-font: "Noto Kufi Arabic", system-ui, sans-serif;
    --itq-font-latin: "Noto Kufi Arabic", system-ui, sans-serif;
    --qs-royal-blue: #0a2240;
    --qs-gold: #0f7a4c;
    --qs-font-en: "Noto Kufi Arabic", system-ui, sans-serif;
    --qs-font-ar: "Noto Kufi Arabic", system-ui, sans-serif;
    --if-soft: #f6f8fa;
    --insp-radius: 6px;
}

/* ── Typeface: everything except icon fonts ── */
html body,
html body *:not(i):not(.mdi):not(.fa):not([class^="ti-"]):not([class*=" ti-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class^="sl-icon"]):not([class*=" sl-icon"]):not(.material-icons) {
    font-family: "Noto Kufi Arabic", system-ui, sans-serif !important;
}

html,
body {
    font-size: 13.5px;
    color: #1a2533 !important;
    background: #f3f5f8 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #0a2240;
    font-weight: 700;
    letter-spacing: 0;
}

/* ── Shell ── */
@media (min-width: 768px) {
    .page-wrapper {
        padding-top: 0 !important;
    }
}

.page-wrapper > .container-fluid {
    padding-top: 20px !important;
}

.topbar {
    box-shadow: none !important;
    border-bottom: 1px solid #dde3ea !important;
}

.topbar::after {
    height: 2px;
    background: #0f7a4c !important;
    opacity: 1;
}

.left-sidebar,
.left-sidebar .scroll-sidebar {
    background: #0a2240 !important;
    background-image: none !important;
}

#sidebarnav > li > a {
    border-radius: 4px !important;
    font-weight: 500;
}

#sidebarnav > li > a .hide-menu {
    font-size: 13px !important;
    white-space: nowrap;
}

#sidebarnav > li.active > a,
#sidebarnav > li > a.active,
#sidebarnav > li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

#sidebarnav > li.active > a {
    box-shadow: inset -3px 0 0 #0f7a4c !important;
}

#sidebarnav ul.collapse a.active,
#sidebarnav .sidenav-submenu.active > a {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* ── Page heading strip ── */
:is(#main-wrapper, body):not(#iq-x) .page-titles {
    border: 1px solid #dde3ea !important;
    border-inline-end: 1px solid #dde3ea !important;
    border-inline-start: 3px solid #0a2240 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
}

.page-titles h3,
.page-titles .text-themecolor {
    color: #0a2240 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb-item {
    font-size: 12px !important;
    color: #6b7684 !important;
}

/* ── Cards and panels ── */
:is(#main-wrapper, body):not(#iq-x) :is(.card, .qs-dashboard-card, .qs-stat-card, .qs-process-panel, .qs-process-summary, .modal-content, .dropdown-menu) {
    border: 1px solid #dde3ea !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(10, 34, 64, 0.04) !important;
    background: #fff !important;
    background-image: none !important;
}

:is(#main-wrapper, body):not(#iq-x) #invoice-wrapper.card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#InvoiceTitleNotAttached {
    opacity: 1 !important;
    color: #0a2240 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.card-header,
.modal-header {
    background: var(--if-soft) !important;
    border-bottom: 1px solid #dde3ea !important;
    border-radius: 6px 6px 0 0 !important;
}

.modal-footer {
    border-top: 1px solid #dde3ea !important;
}

/* ── Buttons ── */
:is(#main-wrapper, body):not(#iq-x) .btn {
    border-radius: 4px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    background-image: none !important;
    letter-spacing: 0 !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-rounded, .btn-circle) {
    border-radius: 4px !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-info, .btn-primary) {
    background: #0a2240 !important;
    border-color: #0a2240 !important;
    color: #fff !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-info, .btn-primary):hover {
    background: #12325c !important;
    border-color: #12325c !important;
}

:is(#main-wrapper, body):not(#iq-x) .btn-success {
    background: #0f7a4c !important;
    border-color: #0f7a4c !important;
    color: #fff !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-add-circle, .btn-danger.edit-add-modal-button) {
    background: #0f7a4c !important;
    border-color: #0f7a4c !important;
    color: #fff !important;
    border-radius: 4px !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-add-circle, .btn-danger.edit-add-modal-button):hover {
    background: #0c6640 !important;
    border-color: #0c6640 !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-outline-info, .btn-outline-primary, .btn-outline-secondary) {
    background: #fff !important;
    border-color: #cfd7e1 !important;
    color: #0a2240 !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.btn-outline-info, .btn-outline-primary, .btn-outline-secondary):hover {
    background: #eef2f7 !important;
    border-color: #0a2240 !important;
}

:is(#main-wrapper, body):not(#iq-x) .btn-group > .btn-secondary {
    background: #0a2240 !important;
    border-color: #0a2240 !important;
    color: #fff !important;
}

:is(#main-wrapper, body):not(#iq-x) .btn-group > .btn {
    font-size: 12px !important;
    padding: 5px 14px !important;
}

#sidebarnav ul.collapse a {
    white-space: nowrap !important;
}

/* Row actions: view, edit, delete and "more" only */
.list-table-action:has(> .js-toggle-pinning),
.list-table-action:has(> [class*="starred-star-button"]),
.list-table-action:has(> [class*="starred-unstar-button"]),
.list-table-action:has(> [id^="starred-"]) {
    display: none !important;
}

:is(#main-wrapper, body):not(#iq-x) .list-table-action .btn-circle {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 26px !important;
    border-color: #dde3ea !important;
    background: #fff !important;
    color: #0a2240 !important;
    opacity: 1 !important;
}

:is(#main-wrapper, body):not(#iq-x) .list-table-action .btn-outline-danger {
    color: #b42318 !important;
}

:is(#main-wrapper, body):not(#iq-x) .list-table-action .btn-circle:hover {
    background: #eef2f7 !important;
    border-color: #0a2240 !important;
}

.btn-lg {
    font-size: 14px !important;
    padding: 10px 22px !important;
}

.list-pages-crumbs + .list-page-actions .btn,
.list-actions-button,
.page-titles .btn-outline-secondary,
.page-titles .list-actions-button {
    border-radius: 4px !important;
}

/* ── Forms ── */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #cfd7e1 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

.form-control:focus {
    border-color: #0a2240 !important;
    box-shadow: 0 0 0 3px rgba(10, 34, 64, 0.08) !important;
}

label,
.control-label {
    color: #3c4857;
    font-weight: 600;
    font-size: 12.5px;
}

/* ── Tables ── */
.table {
    color: #1a2533 !important;
}

.table thead th,
.table > thead > tr > th {
    background: var(--if-soft) !important;
    color: #0a2240 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #dde3ea !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

.table td {
    border-top: 1px solid #edf1f5 !important;
    vertical-align: middle !important;
    font-size: 13px;
}

.table-hover tbody tr:hover {
    background: #f8fafc !important;
}

/* ── Badges and labels ── */
:is(#main-wrapper, body):not(#iq-x) :is(.badge, .label) {
    border-radius: 3px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.alert {
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* ── Dashboard ── */
.qs-dash-section__title {
    font-size: 16px !important;
    color: #0a2240 !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-stat-card {
    min-height: 0 !important;
    padding: 16px 18px !important;
    transform: none !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-stat-card::before {
    width: 3px !important;
    background: #0a2240 !important;
}

:is(#main-wrapper, body):not(#iq-x) :is(.qs-stat-card--green, .qs-stat-card--success)::before {
    background: #0f7a4c !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-stat-card--alert::before {
    background: #b45309 !important;
}

.qs-stat-card__icon {
    border-radius: 6px !important;
    background: #eef2f7 !important;
    color: #0a2240 !important;
    box-shadow: none !important;
}

.qs-stat-card__icon--green,
.qs-stat-card__icon--success {
    background: #eaf4ef !important;
    color: #0f7a4c !important;
}

.qs-stat-card__value {
    color: #0a2240 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

.qs-stat-card__label {
    color: #6b7684 !important;
    font-weight: 500 !important;
}

.qs-dashboard-card__tools {
    gap: 16px;
}

.qs-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7684;
}

.qs-legend i {
    font-size: 8px !important;
}

/* ── Inspection pages ── */
:is(#main-wrapper, body):not(#iq-x) :is(.qs-insp-hero, .qs-process-panel__header, .qs-process-hero) {
    background: #0a2240 !important;
    background-image: none !important;
    border-radius: 6px !important;
    border-bottom: 3px solid #0f7a4c !important;
    box-shadow: none !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-process-panel__header {
    border-radius: 6px 6px 0 0 !important;
}

.qs-insp-hero::before,
.qs-insp-hero::after,
.qs-process-panel__header::before,
.qs-process-panel__header::after {
    display: none !important;
}

.qs-process-summary,
.qs-client-request-summary {
    border-radius: 6px !important;
}

/* ── Scrollbars and misc ── */
.dropdown-menu .dropdown-item {
    border-radius: 0 !important;
}

code {
    color: #0a2240 !important;
    background: #eef2f7 !important;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
}

.chip,
.tag {
    border-radius: 3px !important;
}

/* ── Inspection steps owned by another role ── */
.qs-step-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.qs-step-fieldset:disabled :is(a.btn, .btn, button, input[type="submit"]) {
    pointer-events: none;
    opacity: 0.5;
}

/* ── Dashboard: welcome banner ── */
.qs-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin: 4px 0 28px;
    padding: 30px 34px;
    background:
        radial-gradient(circle at 100% 0%, rgba(15, 122, 76, 0.28) 0, transparent 42%),
        linear-gradient(135deg, #0a2240 0%, #123a66 100%);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(10, 34, 64, 0.18);
    color: #fff;
}

/* Decorative rings on the inline-end side */
.qs-welcome::before,
.qs-welcome::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.qs-welcome::before {
    width: 260px;
    height: 260px;
    inset-inline-end: -70px;
    top: -120px;
}

.qs-welcome::after {
    width: 180px;
    height: 180px;
    inset-inline-end: 120px;
    bottom: -130px;
    border-color: rgba(15, 122, 76, 0.35);
}

.qs-welcome__text,
.qs-welcome__actions {
    position: relative;
    z-index: 1;
}

.qs-welcome__text {
    padding-inline-start: 16px;
    border-inline-start: 4px solid #1fa468;
}

.qs-welcome__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #d6e0ec !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.qs-welcome__date i {
    font-size: 11px;
    color: #5fd39c;
}

:is(#main-wrapper, body):not(#iq-x) .qs-welcome__title {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: #fff !important;
}

.qs-welcome__sub {
    max-width: 520px;
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #c3d0df !important;
}

.qs-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

:is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

:is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-1px);
}

:is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn--primary {
    background: #0f7a4c !important;
    border-color: #1fa468 !important;
    box-shadow: 0 6px 16px rgba(15, 122, 76, 0.35) !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn--primary:hover {
    background: #11905a !important;
    border-color: #2bb877 !important;
}

.qs-welcome__badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: #0a2240;
    background: #f5b82e;
    border-radius: 999px;
}

/* ── Dashboard: sections and stat cards ── */
.qs-dashboard .qs-dash-section {
    margin-bottom: 12px;
}

.qs-dashboard .qs-dash-section__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 14px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid #0f7a4c;
}

.qs-dashboard .qs-dash-section__title {
    margin: 0 !important;
    font-size: 15px !important;
}

.qs-dashboard .qs-dash-section__sub {
    margin: 0 !important;
    font-size: 12px !important;
    color: #6b7684 !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-dashboard .qs-stat-card {
    height: 100%;
    padding: 20px 22px !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

:is(#main-wrapper, body):not(#iq-x) .qs-dashboard .qs-stat-card:hover {
    border-color: #b9c6d6 !important;
    box-shadow: 0 6px 18px rgba(10, 34, 64, 0.07) !important;
}

.qs-dashboard .qs-stat-card .card-body {
    padding: 0 !important;
}

.qs-dashboard .qs-stat-card__icon {
    flex: 0 0 46px;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.qs-dashboard .qs-stat-card__icon i {
    font-size: 19px !important;
}

.qs-dashboard .qs-stat-card__label {
    margin: 0 0 8px !important;
    font-size: 12px !important;
    line-height: 1.5;
}

.qs-dashboard .qs-stat-card__value {
    font-size: 26px !important;
    line-height: 1.2;
}

/* ── Dashboard: chart, tables and activity cards ── */
:is(#main-wrapper, body):not(#iq-x) .qs-dashboard .qs-dashboard-card {
    border-radius: 8px !important;
}

.qs-dashboard .qs-dashboard-card .card-body {
    padding: 22px 24px !important;
}

.qs-dashboard :is(.qs-dashboard-card__title, .card-title) {
    font-size: 15px !important;
    color: #0a2240 !important;
    font-weight: 700 !important;
}

.qs-dashboard .qs-dashboard-card__eyebrow {
    font-size: 11px !important;
    color: #0f7a4c !important;
    font-weight: 600 !important;
}

.qs-dashboard .qs-dashboard-metrics {
    margin-top: 12px;
    border-top: 1px solid #dde3ea;
}

.qs-dashboard .qs-dashboard-metrics h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0a2240 !important;
}

.qs-dashboard .qs-dashboard-metrics small {
    font-size: 12px;
    color: #6b7684;
}

.qs-dashboard .qs-dash-table-wrap {
    margin-top: 16px;
    border: 1px solid #dde3ea;
    border-radius: 6px;
}

.qs-dashboard .qs-dash-table thead th {
    background: #f6f8fa !important;
    color: #6b7684 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #dde3ea !important;
    padding: 11px 14px !important;
    white-space: nowrap;
}

.qs-dashboard .qs-dash-table tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-top: 1px solid #eef1f5 !important;
}

.qs-dashboard .qs-dash-table tbody tr:first-child td {
    border-top: 0 !important;
}

.qs-dashboard .qs-dash-table td.text-muted {
    padding: 36px 14px !important;
    color: #8a94a3 !important;
}

@media (max-width: 767px) {
    .qs-welcome {
        padding: 22px 20px;
    }

    .qs-welcome::after {
        display: none;
    }

    :is(#main-wrapper, body):not(#iq-x) .qs-welcome__title {
        font-size: 20px;
    }

    .qs-welcome__actions,
    :is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn {
        width: 100%;
    }

    :is(#main-wrapper, body):not(#iq-x) .qs-welcome__btn {
        justify-content: center;
        height: auto;
        min-height: 44px;
        padding: 10px 16px !important;
        text-align: center;
    }
}

/* ── Customer service: client fills the form ── */
.qs-client-form {
    margin-bottom: 16px;
}

.qs-client-form__banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #eef8f2;
    border: 1px solid #b9e0c9;
    border-inline-start: 4px solid #0f7a4c;
    border-radius: 6px;
    color: #0b4d31;
    font-weight: 600;
}

.qs-client-form__banner i {
    margin-top: 3px;
    color: #0f7a4c;
}

.qs-client-form__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: #f6f8fb;
    border: 1px solid #dde4ee;
    border-radius: 8px;
}

.qs-client-form__text strong {
    display: block;
    color: #0a2240;
    font-size: 14px;
}

.qs-client-form__text span {
    display: block;
    margin-top: 3px;
    color: #5c6b7a;
    font-size: 12.5px;
}

:is(#main-wrapper, body):not(#iq-x) .qs-client-form__send {
    background: #0a2240 !important;
    border-color: #0a2240 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.qs-client-form__link {
    margin-top: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #0f7a4c;
    border-radius: 8px;
}

.qs-client-form__link strong {
    display: block;
    margin-bottom: 8px;
    color: #0b4d31;
}

.qs-client-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qs-client-form__row input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #f9fbfd;
    font-size: 12.5px;
}

:is(#main-wrapper, body):not(#iq-x) .qs-client-form__whatsapp {
    background: #1f9d55 !important;
    border-color: #1f9d55 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.qs-client-form__note {
    margin: 8px 0 0;
    color: #6b7785;
    font-size: 12px;
}