/* Qalam Theme Customizer: isolated runtime overlay. */
/* Local font files already present under assets/css/fonts. */
@font-face { font-family: "B Nazanin"; src: url("./fonts/BNAZANIN.TTF") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B Nazanin"; src: url("./fonts/BNAZNNBD.TTF") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "B Yekan"; src: url("./fonts/SYEKAN.TTF") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Mitra; src: url("./fonts/Mitra.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: DanaFaNum; src: url("./fonts/DanaFaNum-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Madani Arabic"; src: url("./fonts/MadaniArabicDEMO-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ara Hamah Homs"; src: url("./fonts/AraHamahHoms-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ara Hamah Kilania"; src: url("./fonts/AraHamahKilania-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ara Hamah Sahet Al Assi"; src: url("./fonts/AraHamahSahetAlAssi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ara Hamah Zanki"; src: url("./fonts/AraHamahZanki-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("./fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
.qtc-panel {
    --qtc-panel-border: var(--bs-border-color, #dee2e6);
    width: min(400px, 100vw);
}

.qtc-panel .offcanvas-header {
    border-bottom: 1px solid var(--qtc-panel-border);
}

.qtc-panel .offcanvas-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.qtc-panel__subtitle {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
    margin: 3px 0 0;
}

.qtc-panel__section {
    border-bottom: 1px solid var(--qtc-panel-border);
    padding-bottom: 18px;
}

.qtc-panel__section + .qtc-panel__section {
    padding-top: 18px;
}

.qtc-panel__section-title {
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.qtc-panel .form-label {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.qtc-panel__color-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.qtc-panel__color-row input[type="color"] {
    border: 1px solid var(--qtc-panel-border);
    border-radius: .4rem;
    cursor: pointer;
    height: 38px;
    padding: 3px;
    width: 48px;
}

.qtc-panel__color-value {
    color: var(--bs-secondary-color, #6c757d);
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .78rem;
}

.qtc-panel__range-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.qtc-panel__range-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.qtc-panel__range-button {
    align-items: center;
    border: 1px solid var(--qtc-panel-border);
    border-radius: .35rem;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
}

.qtc-panel__range-value {
    direction: ltr;
    font-size: .8rem;
    min-width: 42px;
    text-align: center;
}

.qtc-panel__footer {
    border-top: 1px solid var(--qtc-panel-border);
    margin-top: 22px;
    padding-top: 18px;
}

.qtc-font-native-select { display: none !important; }
.qtc-font-picker { position: relative; width: 100%; }
.qtc-panel, .qtc-font-picker, .qtc-font-picker__toggle, .qtc-font-picker__search { font-family: "Ramis Arabic", Arial, sans-serif !important; }
.qtc-font-picker__toggle { align-items: center; background: var(--bs-body-bg, #fff); border: 1px solid var(--qtc-panel-border); border-radius: .375rem; color: var(--bs-body-color, #212529); display: flex; font: inherit; justify-content: space-between; min-height: 38px; padding: .375rem .75rem; text-align: start; width: 100%; }
.qtc-font-picker__menu { background: var(--bs-body-bg, #fff); border: 1px solid var(--qtc-panel-border); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); margin-top: 4px; max-height: 260px; overflow: auto; padding: .5rem; position: absolute; inset-inline: 0; z-index: 1080; }
.qtc-font-picker__search { border: 1px solid var(--qtc-panel-border); border-radius: .3rem; display: block; min-height: 34px; padding: .25rem .5rem; width: 100%; }
.qtc-font-picker__options { display: grid; gap: 2px; margin-top: .4rem; }
.qtc-font-picker__option { background: transparent; border: 0; border-radius: .25rem; color: inherit; padding: .45rem .5rem; text-align: start; width: 100%; }
.qtc-font-picker__option-label, .qtc-font-picker__option-sample { display: block; font-family: inherit !important; }
.qtc-font-picker__option-sample { font-size: .78em; opacity: .72; margin-top: 2px; }
.qtc-font-picker__chevron { font-size: 16px !important; transition: transform .15s ease; }
.qtc-font-picker.is-open .qtc-font-picker__chevron { transform: rotate(180deg); }
.qtc-font-picker__option:hover, .qtc-font-picker__option.is-highlighted { background: var(--qtc-primary-soft, rgba(0,0,0,.06)); }
.qtc-font-picker__option[aria-selected="true"] { color: var(--qtc-primary, var(--bs-primary)); font-weight: 700; }

/* Apply only to text-bearing Qalam controls; icon font selectors are deliberately excluded. */
html[data-qtc-font-family="1"] body,
html[data-qtc-font-family="1"] body p,
html[data-qtc-font-family="1"] body h1,
html[data-qtc-font-family="1"] body h2,
html[data-qtc-font-family="1"] body h3,
html[data-qtc-font-family="1"] body h4,
html[data-qtc-font-family="1"] body h5,
html[data-qtc-font-family="1"] body h6,
html[data-qtc-font-family="1"] body a:not([class*="icon"]):not([class^="fa"]),
html[data-qtc-font-family="1"] body button:not(.qtc-font-picker__option),
html[data-qtc-font-family="1"] body input,
html[data-qtc-font-family="1"] body select,
html[data-qtc-font-family="1"] body textarea,
html[data-qtc-font-family="1"] body label,
html[data-qtc-font-family="1"] body table,
html[data-qtc-font-family="1"] body th,
html[data-qtc-font-family="1"] body td,
html[data-qtc-font-family="1"] body .topbar-link,
html[data-qtc-font-family="1"] body .side-nav-link,
html[data-qtc-font-family="1"] body .menu-text,
html[data-qtc-font-family="1"] body .dropdown-item,
html[data-qtc-font-family="1"] body .form-control,
html[data-qtc-font-family="1"] body .form-select,
html[data-qtc-font-family="1"] body .btn,
html[data-qtc-font-family="1"] body .school-modules-eyebrow,
html[data-qtc-font-family="1"] body .school-modules-title,
html[data-qtc-font-family="1"] body .school-modules-subtitle,
html[data-qtc-font-family="1"] body .school-modules-result,
html[data-qtc-font-family="1"] body .school-module-heading,
html[data-qtc-font-family="1"] body .school-module-count,
html[data-qtc-font-family="1"] body .school-module-link {
    --ins-body-font-family: var(--qtc-font-family);
    --ins-btn-font-family: var(--qtc-font-family);
    --ins-font-sans-serif: var(--qtc-font-family);
    font-family: var(--qtc-font-family) !important;
}

/* Typography-only bridge: the root/rem foundation and component boxes stay
   under original Qalam CSS control. Controls use a safe text clamp. */
html[data-qtc-font-size="1"] body,
html[data-qtc-font-size="1"] body p,
html[data-qtc-font-size="1"] body li,
html[data-qtc-font-size="1"] body h1,
html[data-qtc-font-size="1"] body h2,
html[data-qtc-font-size="1"] body h3,
html[data-qtc-font-size="1"] body h4,
html[data-qtc-font-size="1"] body h5,
html[data-qtc-font-size="1"] body h6,
html[data-qtc-font-size="1"] body label,
html[data-qtc-font-size="1"] body table,
html[data-qtc-font-size="1"] body th,
html[data-qtc-font-size="1"] body td {
    --ins-body-font-size: var(--qtc-text-size);
    font-size: var(--qtc-text-size) !important;
}

html[data-qtc-font-size="1"] body input:not(.form-check-input[role="switch"]),
html[data-qtc-font-size="1"] body select,
html[data-qtc-font-size="1"] body textarea,
html[data-qtc-font-size="1"] body .form-control,
html[data-qtc-font-size="1"] body .form-select {
    font-size: var(--qtc-text-size-control) !important;
}

/* Keep each already-rendered form control at its Qalam height while its
   text line changes. The runtime captures these per-element baselines so
   inputs, selects, textareas, and Choices wrappers retain their geometry. */
html[data-qtc-font-size="1"] body input:not([type="hidden"]):not(.form-check-input[role="switch"]),
html[data-qtc-font-size="1"] body select,
html[data-qtc-font-size="1"] body textarea,
html[data-qtc-font-size="1"] body .form-control,
html[data-qtc-font-size="1"] body .form-select,
html[data-qtc-font-size="1"] body .choices__inner {
    height: var(--qtc-original-control-height, auto) !important;
}

/* Financial DataTable status switches are boolean status controls, not text
   inputs. Preserve their original em-based switch geometry even when the
   surrounding table typography is enlarged. Hidden tabs are captured by the
   Theme runtime before they become visible. */
html[data-qtc-font-size="1"] body .financial-dt-host .form-check.form-switch > .form-check-input[role="switch"] {
    font-size: var(--qtc-original-status-font-size, 14px) !important;
}

/* Text-bearing buttons receive typography, while their rendered box remains
   at the captured Qalam width/height. Icon-only buttons are left to Qalam. */
html[data-qtc-font-size="1"] body .btn:not(.btn-icon):not(.btn-close):not(.btnsabtrecord.attention-btn) {
    font-size: var(--qtc-text-size-control) !important;
    height: var(--qtc-original-control-height, auto) !important;
    width: var(--qtc-original-button-width, auto) !important;
}

html[data-qtc-font-size="1"] body .menu-text,
html[data-qtc-font-size="1"] body .topbar-link,
html[data-qtc-font-size="1"] body .dropdown-item,
html[data-qtc-font-size="1"] body .qtc-panel,
html[data-qtc-font-size="1"] body .qtc-panel__subtitle,
html[data-qtc-font-size="1"] body .qtc-panel__color-value,
html[data-qtc-font-size="1"] body .qtc-panel__range-value {
    font-size: var(--qtc-text-size-menu) !important;
}

/* These are verified text-bearing wrappers in Qalam controls. Their parent
   geometry and icon descendants are deliberately not resized. */
html[data-qtc-font-size="1"] body .advanced-search-btn .as-text,
html[data-qtc-font-size="1"] body .btn-add .size-text,
html[data-qtc-font-size="1"] body .student-list-pill-trigger > span:not([class*="icon"]),
html[data-qtc-font-size="1"] body .student-list-inline-trigger__count,
html[data-qtc-font-size="1"] body .school-module-link {
    font-size: var(--qtc-text-size-control) !important;
}

html[data-qtc-font-size="1"] body .lesson-title {
    font-size: var(--qtc-text-size-heading) !important;
}

/* Icon fonts inherit their parent size in several Qalam action controls.
   Restore each icon's own rendered baseline captured by the Theme runtime. */
html[data-qtc-font-size="1"] body i.ti,
html[data-qtc-font-size="1"] body i[class^="ti-"],
html[data-qtc-font-size="1"] body i[class*=" ti-"],
html[data-qtc-font-size="1"] body i[class^="fa-"],
html[data-qtc-font-size="1"] body i[class*=" fa-"],
html[data-qtc-font-size="1"] body i.bi,
html[data-qtc-font-size="1"] body i[class^="bi-"],
html[data-qtc-font-size="1"] body i[class*=" bi-"],
html[data-qtc-font-size="1"] body .material-icons,
html[data-qtc-font-size="1"] body .material-symbols-outlined {
    font-size: var(--qtc-original-icon-size) !important;
}

/* Keep the verified title component's identity decoration tied to Identity,
   without recolouring its normal black title text. */
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .lesson-title {
    background-image: linear-gradient(179deg, var(--qtc-primary-deep) 0%, #ffffff 100%) !important;
}

/* Verified two-color shell components. These selectors are intentionally
   limited to the reusable course CTA/card and modal shell decorations. */
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .btn.btnsabtrecord.attention-btn,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .btn.btnsabtrecord.attention-btn {
    background: linear-gradient(135deg, var(--qtc-shell-primary), var(--qtc-shell-secondary)) !important;
    border-color: var(--qtc-shell-primary) !important;
    box-shadow: 0 8px 22px var(--qtc-shell-primary-shadow) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .card:has(.btn.btnsabtrecord.attention-btn),
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .card:has(.btn.btnsabtrecord.attention-btn) {
    border-color: var(--qtc-shell-primary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header {
    background: linear-gradient(135deg, var(--qtc-shell-primary-soft-2), var(--qtc-shell-secondary-soft-2)) !important;
    border-color: var(--qtc-shell-primary-border-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header::before,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header::before {
    background: var(--qtc-shell-secondary-soft-2) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header::after,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header::after {
    background: var(--qtc-shell-primary-soft-2) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header .modal-header-icon,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .modal .modal-header .modal-header-icon {
    color: var(--qtc-shell-primary-deep) !important;
    background: var(--qtc-shell-primary-soft) !important;
    border-color: var(--qtc-shell-primary-border-soft) !important;
}

/* Verified shared form-top navigation cards. The list/applicants cards use
   these two blurred pseudo-elements and a colored wizard border; keep the
   category-specific inline icons independent. */
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link {
    border-color: var(--qtc-shell-primary-border-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs.wizard-bordered .nav-link,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs.wizard-bordered .nav-link {
    border-right-color: var(--qtc-shell-primary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link::before,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link::before {
    background: var(--qtc-shell-primary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link::after,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link::after {
    background: var(--qtc-shell-secondary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link:hover,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link:hover {
    border-color: var(--qtc-shell-secondary) !important;
    color: var(--qtc-shell-secondary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link:hover::before,
html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .wizard-tabs .nav-link:hover::before {
    box-shadow: var(--qtc-shell-primary-shadow) 20px 20px 20px 30px !important;
}

html[data-qtc-header-bg="1"] .attendance-shell.attendance-ux-v3 .app-topbar,
html[data-qtc-header-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-topbar-menu {
    background: var(--qtc-header-bg) !important;
}

html[data-qtc-header-text="1"] .attendance-shell.attendance-ux-v3 .attendance-topbar-menu .topbar-link,
html[data-qtc-header-text="1"] .attendance-shell.attendance-ux-v3 .attendance-topbar-menu .topbar-link i,
html[data-qtc-header-text="1"] .attendance-shell.attendance-ux-v3 .attendance-topbar-menu .btn-icon {
    color: var(--qtc-header-text) !important;
}

/* Explicit identity allowlist: no generic Bootstrap/action-button selectors. */
html[data-qtc-primary="1"] .attendance-shell.attendance-ux-v3 .qtc-header-trigger {
    background: var(--qtc-primary) !important;
    background-image: none !important;
    border-color: var(--qtc-primary) !important;
    box-shadow: 0 7px 18px var(--qtc-primary-shadow) !important;
}

/* Verified shared header identity utilities. The action semantics of other
   .btn-primary controls are intentionally excluded. */
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .attendance-topbar-menu .sidenav-toggle-button,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .attendance-topbar-menu a.btn.btn-primary.btn-icon[href="./adm/tutorials"] {
    background-color: var(--qtc-primary) !important;
    background-image: none !important;
    border-color: var(--qtc-primary) !important;
    box-shadow: 0 7px 18px var(--qtc-primary-shadow) !important;
}

/* Verified admin-module identity accents. These are decorative/identity roles,
   not action buttons or semantic status controls. */
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-eyebrow,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-search .bi-search,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-result,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .text-primary.details-label,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 h4.mb-0.fs-lg.fw-semibold > .text-primary {
    color: var(--qtc-primary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-intro-mark {
    background: linear-gradient(145deg, var(--qtc-primary-dark), var(--qtc-primary) 68%, var(--qtc-primary-deep)) !important;
    border-color: var(--qtc-primary-border-soft) !important;
    box-shadow: 0 11px 24px var(--qtc-primary-shadow), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-intro {
    background: radial-gradient(circle at 8% 15%, var(--qtc-secondary-soft-2, rgba(255, 193, 7, 0.22)), transparent 25%), radial-gradient(circle at 92% 0%, var(--qtc-primary-soft-2), transparent 28%), linear-gradient(120deg, var(--qtc-primary-deep) 0%, var(--qtc-primary-dark) 50%, var(--qtc-primary) 100%) !important;
    box-shadow: 0 22px 58px var(--qtc-primary-shadow) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-intro::before {
    border-color: var(--qtc-primary-border-soft) !important;
    box-shadow: 0 0 0 24px var(--qtc-primary-soft) !important;
}

html[data-qtc-secondary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-intro::after {
    background: var(--qtc-secondary-soft-2) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-search input:focus {
    border-color: var(--qtc-primary) !important;
    box-shadow: 0 0 0 4px var(--qtc-primary-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="dashboard"] .school-module-count,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="fee-management"] .school-module-count,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="student-information"] .school-module-count {
    color: var(--qtc-primary-deep) !important;
    background-color: var(--qtc-primary-soft) !important;
    border-color: var(--qtc-primary-border-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="dashboard"],
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="fee-management"],
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="student-information"] {
    border-color: var(--qtc-primary-border-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="dashboard"]::before,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="fee-management"]::before,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-module-card[data-module-id="student-information"]::before {
    background: linear-gradient(90deg, var(--qtc-primary), var(--qtc-primary-soft-2)) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .school-modules-result {
    background-color: var(--qtc-primary-soft) !important;
    border-color: var(--qtc-primary-border-soft) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .text-primary.details-label,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .bg-primary-subtle.text-primary,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .border-start.border-3.border-primary {
    color: var(--qtc-primary) !important;
}

html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .details-label,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .border-primary,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .form-control:focus,
html[data-qtc-primary="1"] body.attendance-shell.attendance-ux-v3 .form-select:focus {
    border-color: var(--qtc-primary) !important;
}

html[data-qtc-sidebar-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav {
    background: var(--qtc-sidebar-bg) !important;
    color: var(--qtc-sidebar-text) !important;
}

html[data-qtc-sidebar-text="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link,
html[data-qtc-sidebar-text="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-text,
html[data-qtc-sidebar-text="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-arrow,
html[data-qtc-sidebar-text="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link .menu-icon i {
    color: var(--qtc-sidebar-text) !important;
}

html[data-qtc-sidebar-hover-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:hover,
html[data-qtc-sidebar-hover-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav-link:focus-visible {
    background: var(--qtc-sidebar-hover-bg) !important;
}

html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .attendance-main-nav>.side-nav-link.active,
html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active {
    background: var(--qtc-sidebar-active-bg) !important;
    color: var(--qtc-sidebar-text) !important;
}

html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active .menu-text,
html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link .menu-text,
html[data-qtc-sidebar-active-bg="1"] .attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active .menu-text {
    color: var(--qtc-sidebar-text) !important;
}

/* The active sidebar item is a verified two-color identity gradient. Either
   active-color control may be changed independently; the other falls back to
   its captured Qalam baseline in the runtime. */
html[data-qtc-sidebar-active-bg="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
html[data-qtc-sidebar-active-bg2="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item>.side-nav-link.active,
html[data-qtc-sidebar-active-bg="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
html[data-qtc-sidebar-active-bg2="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .side-nav>.side-nav-item.active>.side-nav-link,
html[data-qtc-sidebar-active-bg="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .attendance-main-nav>.side-nav-link.active,
html[data-qtc-sidebar-active-bg2="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .attendance-main-nav>.side-nav-link.active {
    background: linear-gradient(135deg, var(--qtc-sidebar-active-1) 0%, var(--qtc-sidebar-active-2) 100%) !important;
    border-color: var(--qtc-sidebar-active-1) !important;
    box-shadow: 0 10px 24px var(--qtc-primary-shadow, rgba(0, 0, 0, 0.18)) !important;
}

html[data-qtc-sidebar-active-bg="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active,
html[data-qtc-sidebar-active-bg2="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active {
    background: var(--qtc-sidebar-active-1) !important;
}

html[data-qtc-sidebar-active-bg="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active::before,
html[data-qtc-sidebar-active-bg2="1"] body.attendance-shell.attendance-ux-v3 .attendance-sidenav .sub-menu .side-nav-item .side-nav-link.active::before {
    background: var(--qtc-sidebar-active-2) !important;
    box-shadow: 0 0 0 4px var(--qtc-sidebar-active-2) !important;
}

/* Theme Customizer chrome is intentionally exempt from the site text-size
   setting. Font option previews retain their per-option inline family. */
html[data-qtc-font-size="1"] .qtc-panel,
html[data-qtc-font-size="1"] .qtc-panel input,
html[data-qtc-font-size="1"] .qtc-panel select,
html[data-qtc-font-size="1"] .qtc-panel output,
html[data-qtc-font-size="1"] .qtc-panel button:not(.qtc-font-picker__option) {
    font-size: 13px !important;
}
html[data-qtc-font-size="1"] .qtc-panel .offcanvas-title { font-size: 1.05rem !important; }
html[data-qtc-font-size="1"] .qtc-panel .qtc-panel__subtitle,
html[data-qtc-font-size="1"] .qtc-panel .qtc-panel__color-value,
html[data-qtc-font-size="1"] .qtc-panel .qtc-panel__range-value,
html[data-qtc-font-size="1"] .qtc-panel .form-label { font-size: .8rem !important; }
html[data-qtc-font-size="1"] .qtc-panel .qtc-panel__section-title { font-size: .9rem !important; }

@media (max-width: 575.98px) {
    .qtc-panel {
        width: min(100vw, 400px);
    }
    .qtc-font-picker__menu { max-height: 220px; }
}

/* Keep the Customizer chrome independent from site typography and control
   geometry. These selectors intentionally stay below the unique panel root. */
.qtc-panel,
.qtc-panel .offcanvas-title,
.qtc-panel .qtc-panel__subtitle,
.qtc-panel .qtc-panel__section-title,
.qtc-panel .form-label,
.qtc-panel .qtc-panel__color-value,
.qtc-panel .qtc-panel__range-value,
.qtc-panel .qtc-panel__range-button,
.qtc-panel .qtc-font-picker__toggle,
.qtc-panel .qtc-font-picker__search,
.qtc-panel [data-qtc-reset] {
    font-family: "Ramis Arabic", Arial, sans-serif !important;
}

.qtc-panel {
    font-size: 13px !important;
}

.qtc-panel .offcanvas-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
}

.qtc-panel .qtc-panel__subtitle,
.qtc-panel .qtc-panel__color-value,
.qtc-panel .qtc-panel__range-value,
.qtc-panel .form-label {
    font-size: .8rem !important;
    line-height: 1.5 !important;
}

.qtc-panel .qtc-panel__section-title {
    font-size: .9rem !important;
    line-height: 1.4 !important;
}

.qtc-panel .qtc-panel__section {
    padding-bottom: 14px;
}

.qtc-panel .qtc-panel__section + .qtc-panel__section {
    padding-top: 14px;
}

.qtc-panel .form-label {
    display: block;
    margin: 0 0 6px !important;
}

.qtc-panel .form-label.mt-3 {
    margin-top: 14px !important;
}

.qtc-panel .qtc-panel__color-row {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 38px;
}

.qtc-panel .qtc-panel__color-row input[type="color"] {
    box-sizing: border-box;
    flex: 0 0 48px;
    height: 38px;
    max-height: 38px;
    max-width: 48px;
    min-height: 38px;
    min-width: 48px;
    padding: 3px;
    width: 48px;
}

html[data-qtc-font-size="1"] .qtc-panel .qtc-panel__color-row input[type="color"] {
    height: 38px !important;
    width: 48px !important;
}

.qtc-panel .qtc-panel__color-value {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    text-align: start;
}

.qtc-panel .qtc-panel__range-row {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 32px;
}

.qtc-panel .qtc-panel__range-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.qtc-panel .qtc-panel__range-button {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px !important;
    justify-content: center;
    line-height: 1 !important;
    min-height: 32px;
    padding: 0 !important;
    width: 32px;
}

.qtc-panel .qtc-panel__range-value {
    flex: 0 0 42px;
    min-width: 42px;
    text-align: center;
}

.qtc-panel .qtc-font-picker,
.qtc-panel .qtc-font-picker__toggle {
    min-width: 0;
}

.qtc-panel .qtc-font-picker__toggle {
    height: 38px !important;
    min-height: 38px;
}

.qtc-panel .qtc-panel__footer {
    margin-top: 16px;
    padding-top: 14px;
}

.qtc-panel .qtc-panel__footer [data-qtc-reset] {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 45px !important;
    justify-content: center;
    line-height: 1.5 !important;
    min-height: 45px;
    padding: 8px 12px !important;
    width: 100%;
}

.qtc-panel .qtc-font-picker__chevron,
.qtc-panel [data-qtc-reset] i.ti {
    font-family: tabler-icons !important;
}

/* The site font bridge is intentionally high-specificity and important so
   the panel keeps its own chrome font while the option buttons retain their
   per-font inline preview families. */
html[data-qtc-font-family="1"] body .qtc-panel .offcanvas-title,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__subtitle,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__section-title,
html[data-qtc-font-family="1"] body .qtc-panel .form-label,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__color-value,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__range-value,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__range-button,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-font-picker__toggle,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__range-row input[type="range"],
html[data-qtc-font-family="1"] body .qtc-panel .qtc-font-picker__search,
html[data-qtc-font-family="1"] body .qtc-panel [data-qtc-reset] {
    font-family: "Ramis Arabic", Arial, sans-serif !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__range-button {
    font-size: 16px !important;
    line-height: 16px !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__range-row input[type="range"] {
    font-size: 13px !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-font-picker__search {
    font-size: 13px !important;
    line-height: 19.5px !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__footer button[data-qtc-reset] {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 19.5px !important;
}

/* Qalam's typography bridge is intentionally high-specificity. Match that
   specificity for the Customizer root and native controls so saved site-wide
   font settings cannot resize the panel chrome. */
html[data-qtc-font-family="1"] body .qtc-panel,
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__color-row input[type="color"],
html[data-qtc-font-family="1"] body .qtc-panel .qtc-panel__range-row input[type="range"] {
    font-family: "Ramis Arabic", Arial, sans-serif !important;
}

html[data-qtc-font-size="1"] body .qtc-panel,
html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__color-row input[type="color"],
html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__range-button,
html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__range-value,
html[data-qtc-font-size="1"] body .qtc-panel .qtc-font-picker__toggle,
html[data-qtc-font-size="1"] body .qtc-panel .qtc-font-picker__search,
html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__footer button[data-qtc-reset] {
    font-size: 13px !important;
    line-height: 19.5px !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__range-button {
    font-size: 16px !important;
    line-height: 16px !important;
}

html[data-qtc-font-size="1"] body .qtc-panel .qtc-panel__footer button[data-qtc-reset] {
    width: 100% !important;
}

/* The application bridge also targets native inputs and .btn variants with
   several :not() clauses. The unique panel id keeps these final UI-only
   exceptions ahead of those rules without affecting application controls. */
html[data-qtc-font-family="1"] body #qtcPanel,
html[data-qtc-font-family="1"] body #qtcPanel input[type="color"],
html[data-qtc-font-family="1"] body #qtcPanel input[type="range"] {
    font-family: "Ramis Arabic", Arial, sans-serif !important;
}

html[data-qtc-font-size="1"] body #qtcPanel,
html[data-qtc-font-size="1"] body #qtcPanel input[type="color"],
html[data-qtc-font-size="1"] body #qtcPanel input[type="range"],
html[data-qtc-font-size="1"] body #qtcPanel .qtc-font-picker__search,
html[data-qtc-font-size="1"] body #qtcPanel .qtc-panel__footer button[data-qtc-reset] {
    font-size: 13px !important;
    line-height: 19.5px !important;
}

html[data-qtc-font-size="1"] body #qtcPanel .qtc-panel__range-button {
    font-size: 16px !important;
    line-height: 16px !important;
}

html[data-qtc-font-size="1"] body #qtcPanel .qtc-panel__footer button[data-qtc-reset] {
    width: 100% !important;
}