: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;
}

/* Tables (quill-table-better). Its own stylesheet is injected at runtime and
   leaves cells unruled; these give the editor the same visible grid the print
   renders, and keep cell content flowing right-to-left like the rest of the
   editor. The size picker the module appends into the toolbar button must stay
   left-to-right or its rows/columns count backwards. */
.ql-editor table.ql-table-better {
    border-collapse: collapse;
    width: 100%;
    direction: rtl;
}

.ql-editor table.ql-table-better td,
.ql-editor table.ql-table-better th {
    border: 1px solid #4a4a4a;
    padding: 4px 8px;
}

.ql-snow button.ql-table-better .ql-table-select-container,
.qlbt-operation-menu,
.qlbt-col-tool {
    direction: ltr;
}

.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;

}
/* Exam result tables — the client's four swatches. The header is the one dark fill
   (white text); the serial column, position rows and fail rows are light fills with
   near-black ink. Selectors out-rank Bootstrap's striped/hover rules so the fill wins. */
.table > thead > tr > th.result-head,
.table > tbody > tr > td.result-serial,
.table > tbody > tr.result-position > td,
.table > tbody > tr.result-fail > td,
.table > tbody > tr > td.result-fail {
    --bs-table-bg-type: transparent;
    --bs-table-bg-state: transparent;
    --bs-table-color-type: #1f1f1f;
    --bs-table-color-state: #1f1f1f;
    color: #1f1f1f;
}

.table > thead > tr > th.result-head {
    --bs-table-bg: #70735F;
    --bs-table-color-type: #fff;
    --bs-table-color-state: #fff;
    color: #fff;
}

.table > tbody > tr > td.result-serial {
    --bs-table-bg: #BFBC95;
}

.table > tbody > tr.result-position > td {
    --bs-table-bg: #B8BF80;
}

.table > tbody > tr.result-fail > td,
.table > tbody > tr > td.result-fail {
    --bs-table-bg: #D9BAC0;
}

.result-position a,
.result-fail a {
    color: #1f1f1f;
}

/* Urdu labels for the toolbar size picker, same mechanism as the font picker. */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: 'معمولی' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: 'چھوٹا' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: 'بڑا' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: 'بہت بڑا' !important;
}

/* Abdo Line — regular and bold faces served as one family for the editor. */
@font-face {
    font-family: 'Abdo Line';
    src: url('assets/fonts/AbdoLine-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Abdo Line';
    src: url('assets/fonts/AbdoLine-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.ql-font-abdo { font-family: 'Abdo Line', serif; }

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="abdo"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="abdo"]::before {
    content: 'عبدو لائن' !important;
    font-family: 'Abdo Line', serif;
}