:root {
    --bs-accordion-btn-dark-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-form-select-bg-dark-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-form-switch-bg-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%000000'/%3e%3c/svg%3e");
}

.accordian {
    --bs-accordion-body-padding-x: 0 !important;
}

.form-select.bg-dark {
    --bs-form-select-bg-dark-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion-button.bg-dark::after {
    background-image: var(--bs-accordion-btn-dark-icon);
}

.accordion-body {
    padding: var(--bs-accordion-body-padding-y) 0;
}

.form-check.form-switch .form-check-input.form-check-input-secondary:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e");
}

.left-border::before {
    content: "";
    display: block;
    position: absolute;
    background-color: var(--b-theme-primary);
    left: -0.25rem; /* Equivalent to -left-1 (−4px) */
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 0.5rem; /* w-2 = 8px */
    height: 6rem; /* h-24 = 96px */
    border-radius: 9999px; /* rounded-full */
}

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('assets/fonts/NotoNastaliqUrdu-Regular.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('assets/fonts/JameelNooriNastaleeq-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Print faces surfaced on screen so the paper editor previews match the PDF. */
@font-face {
    font-family: 'Sakkal Majalla';
    src: url('assets/fonts/Sakkal Majalla Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aslam';
    src: url('assets/fonts/Aslam.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Quill editor (exam paper questions): RTL flow, house formats, font preview.
   Quill's own stylesheet is injected at runtime AFTER app.css, so these rules
   need !important to survive it. Base font stays the default — a face applies
   only when explicitly picked from the toolbar. */
.ql-editor {
    direction: rtl !important;
    text-align: right !important;
    min-height: 4rem;
}

.ql-overline {
    text-decoration: overline;
}

.ql-font-jameel { font-family: 'Jameel Noori Nastaleeq', serif; }
.ql-font-sakkal { font-family: 'Sakkal Majalla', serif; }
.ql-font-aslam { font-family: 'Aslam', serif; }

/* Urdu labels for the toolbar font picker (Quill renders labels via ::before).
   !important throughout — Quill's runtime-injected stylesheet defines the same
   selectors and loads after app.css. The unvalued (default) entry keeps Quill's
   own original label. */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="jameel"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="jameel"]::before {
    content: 'جمیل نوری' !important;
    font-family: 'Jameel Noori Nastaleeq', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sakkal"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sakkal"]::before {
    content: 'سكال مجلة' !important;
    font-family: 'Sakkal Majalla', serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="aslam"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="aslam"]::before {
    content: 'اسلم' !important;
    font-family: 'Aslam', serif;
}

/* The overline toolbar button carries the ql-overline class itself, so the
   letter inside it renders with the overline — a self-demonstrating icon. */
.ql-snow button.ql-overline {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1;
}

.ql-snow button.ql-overline.ql-active {
    color: #06c;
}

html {
    direction: rtl;
    font-family: 'Jameel Noori Nastaleeq', serif !important;
}

body {
    font-family: 'Jameel Noori Nastaleeq', serif !important;
}
.b-file-picker .b-file-picker-file {
    min-width: 0 !important;

}