/* ============================================================================
   Isnaad Certificates — Bootstrap 5 → design-system bridge.
   ----------------------------------------------------------------------------
   HaramApp is "Bootstrap 5 + a custom theme layer", and this app follows the
   same model: Bootstrap keeps providing the grid, the dismissible alert, the
   collapse and the Select2 host markup, while every visible surface is
   re-pointed at the Halaqat tokens.

   Buttons, alerts and pagination are themed through Bootstrap's OWN
   `--bs-*` custom properties rather than by overriding painted properties, so
   variant classes keep working exactly as Bootstrap intends.

   LOAD ORDER: bootstrap.rtl.min.css → tokens.css → components.css → this file.
   ============================================================================ */

/* ---------------------------------------------------------------- Root ---- */
/* Feed the design-system values into the variables Bootstrap itself reads. */
body {
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-base);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--haram-primary-light);
  /* --bs-border-radius intentionally NOT re-declared here: tokens.css:146 states
     it once as --r-md, per the design system. Setting it on `body` beat that
     :root declaration for every descendant, so the token file recorded an
     answer that never resolved. One stated answer, in the token layer. */
}

/* -------------------------------------------------------------- Buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);            --bs-btn-border-color: var(--bs-primary);
  /* Hover LIGHTENS. --haram-primary-light is the token declared for it; the two
     -d1/-d2 stops are the hero gradient's, and using -d1 here moved hover in the
     opposite direction from every other interactive surface (--bs-link-hover-color
     two rules up already lightens). DESIGN_SYSTEM.md:836. */
  --bs-btn-hover-bg: var(--haram-primary-light); --bs-btn-hover-border-color: var(--haram-primary-light);
  --bs-btn-active-bg: var(--haram-primary-d2); --bs-btn-active-border-color: var(--haram-primary-d2);
  --bs-btn-disabled-bg: var(--bs-primary);   --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-gold {
  --bs-btn-color: #fff;                      --bs-btn-bg: var(--bs-gold);
  --bs-btn-border-color: var(--bs-gold);
  --bs-btn-hover-color: #fff;                --bs-btn-hover-bg: #9d7d4f;
  --bs-btn-hover-border-color: #9d7d4f;
  --bs-btn-active-color: #fff;               --bs-btn-active-bg: #8a6d3b;
  --bs-btn-active-border-color: #8a6d3b;
  --bs-btn-disabled-color: #fff;             --bs-btn-disabled-bg: var(--bs-gold);
  --bs-btn-disabled-border-color: var(--bs-gold);
  --bs-btn-focus-shadow-rgb: var(--bs-gold-rgb);
}
/* The outline family is the workhorse: a hairline border that gains the brand
   colour on hover — exactly the borders-not-shadows idiom. */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);         --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-bg: var(--bs-paper-bg);
  --bs-btn-hover-color: #fff;                --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;               --bs-btn-active-bg: var(--haram-primary-d1);
  --bs-btn-active-border-color: var(--haram-primary-d1);
  --bs-btn-disabled-color: var(--bs-gray-500);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-gray-700);        --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-bg: var(--bs-paper-bg);
  --bs-btn-hover-color: var(--bs-primary);   --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .06);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-primary);  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .10);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-gray-500);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-text);        --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-bg: var(--bs-paper-bg);
  --bs-btn-hover-color: #fff;                --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff;               --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-gray-500);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-light {
  --bs-btn-color: #fff;                      --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-bg: rgba(255, 255, 255, .10);
  --bs-btn-hover-color: var(--bs-primary);   --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--bs-primary);  --bs-btn-active-bg: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
/* Focus is a 2px outline, matching every other control in the shell. */
.btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; box-shadow: none !important; }
.btn-close:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; box-shadow: none; }

/* ---------------------------------------------------------------- Forms ---- */
.form-control, .form-select {
  min-height: 44px; border: 1px solid var(--bs-border-color); border-radius: var(--r-xs);
  background-color: var(--bs-paper-bg); color: var(--bs-heading-color);
  font-family: inherit; font-size: 14px; padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--bs-gray-500); }
/* Focus THICKENS the border; the system has no focus shadow (DESIGN_SYSTEM.md
   §5). Padding is trimmed by the extra 1px so the control does not reflow. */
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary); border-width: 2px; outline: none;
  box-shadow: none; padding: 9px 13px;
}
.form-control:disabled, .form-select:disabled { background-color: var(--bs-tertiary-bg); opacity: 1; }
.form-control-sm, .form-select-sm { min-height: 38px; padding: 6px 12px; font-size: 13px; border-radius: var(--r-xs); }

/* A <select> carries Bootstrap's caret as a background image inset 12px from the
   inline end. The padding above is uniform, so it reserves no room for it and a
   long option label runs underneath. Reserve the caret's lane on the inline end
   only - logical, so it mirrors with the language rather than needing an RTL
   twin. (The RTL Bootstrap build pins the same caret to the physical left, which
   IS the inline end in Arabic, so one declaration covers both.) */
.form-select { padding-inline-end: 34px; }
.form-select-sm { padding-inline-end: 32px; }
.form-select:focus { padding-inline-end: 33px; }
.form-select-sm:focus { padding-inline-end: 31px; }
.form-label { font-size: 13px; font-weight: var(--fw-bold); color: var(--bs-heading-color); margin-bottom: 6px; }
.form-text { font-size: 12.5px; color: var(--bs-gray-600); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bs-danger); }
.invalid-feedback { color: var(--danger-text); font-size: 12.5px; font-weight: var(--fw-bold); }

.input-group-text {
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  color: var(--bs-gray-600); border-radius: var(--r-xs); font-size: 14px;
}
/* Bootstrap RTL already flips the group's corner radii; only the fill differs. */
.input-group .form-control:focus { z-index: 3; }

/* --------------------------------------------------------------- Cards ---- */
.card { box-shadow: none; }
.card-header {
  background: transparent; border-bottom: 1px solid var(--bs-border-color);
  font-weight: var(--fw-extrabold); color: var(--bs-heading-color);
  padding: 16px 20px; border-radius: 0;
}
.card-header:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.card-footer { background: transparent; border-top: 1px solid var(--bs-border-color); }
/* `.shadow` is in the markup on a few cards; the system has no elevation. */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* --------------------------------------------------------------- Table ---- */
.table {
  --bs-table-color: var(--bs-gray-700);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-color: var(--bs-gray-700);
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .03);
  --bs-table-striped-color: var(--bs-gray-700);
  --bs-table-striped-bg: rgba(var(--bs-primary-rgb), .02);
  font-size: 13.5px; margin-bottom: 0;
}
.table > thead th {
  background: rgba(var(--bs-primary-rgb), .03); color: var(--bs-secondary-color);
  font-weight: var(--fw-bold); font-size: 12px; letter-spacing: .02em;
  border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; padding: 13px 16px;
}
.table > tbody td { padding: 13px 16px; vertical-align: middle; }

/* ---------------------------------------------------------- Pagination ---- */
.pagination {
  --bs-pagination-color: var(--bs-gray-700);
  --bs-pagination-bg: var(--bs-paper-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: 6px;
  --bs-pagination-hover-color: var(--bs-primary);
  --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), .04);
  --bs-pagination-hover-border-color: var(--bs-primary);
  --bs-pagination-focus-color: var(--bs-primary);
  --bs-pagination-focus-bg: rgba(var(--bs-primary-rgb), .04);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-gray-400);
  --bs-pagination-disabled-bg: var(--bs-paper-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  gap: 6px;
}
.page-link { font-weight: var(--fw-semibold); font-size: 12.5px; }

/* -------------------------------------------------------------- Alerts ---- */
/* Django's message framework emits `error`, which is NOT a Bootstrap variant —
   `alert-error` rendered completely unstyled. Both spellings are covered. */
.alert {
  --bs-alert-border-color: var(--bs-border-color);
  border: 1px solid var(--bs-border-color); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: .92rem; margin-bottom: 16px;
}
.alert-success { border-inline-start: 4px solid var(--bs-success); background: rgba(var(--bs-success-rgb), .08); color: var(--success-text); }
.alert-info,
.alert-debug   { border-inline-start: 4px solid var(--bs-info);    background: rgba(var(--bs-info-rgb), .08);    color: var(--info-text); }
.alert-warning { border-inline-start: 4px solid var(--bs-warning); background: rgba(var(--bs-warning-rgb), .12); color: var(--warning-text); }
.alert-danger,
.alert-error   { border-inline-start: 4px solid var(--bs-danger);  background: rgba(var(--bs-danger-rgb), .08);  color: var(--danger-text); }

/* -------------------------------------------------------------- Badges ---- */
.badge { font-weight: var(--fw-bold); font-size: 12px; padding: 3px 11px; border-radius: var(--r-pill); }

/* ------------------------------------------------------------- Spinner ---- */
.spinner-border { border-width: 2px; }
.spinner-border-sm { width: 1rem; height: 1rem; }

/* ---------------------------------------------------------- List group ---- */
.list-group {
  --bs-list-group-bg: var(--bs-paper-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-radius: var(--r-sm);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}

/* --------------------------------------------------- Contextual fills ---- */
/* The statistics page painted its section headers with Bootstrap's raw
   contextual colours (bg-primary / success / info / warning / danger /
   secondary), producing a six-colour rainbow that has no place in a
   single-accent system. They are re-pointed at the tokens; where a fill would
   be pure decoration it becomes a neutral surface instead. */
.bg-primary   { background-color: var(--bs-primary) !important; }
.bg-success   { background-color: var(--bs-success) !important; }
.bg-info      { background-color: var(--bs-info) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-light     { background-color: var(--bs-tertiary-bg) !important; }
.bg-white     { background-color: var(--bs-paper-bg) !important; }
.text-muted   { color: var(--bs-secondary-color) !important; }
.text-danger  { color: var(--danger-text) !important; }
.text-success { color: var(--success-text) !important; }
.border       { border-color: var(--bs-border-color) !important; }
.border-top    { border-top-color: var(--bs-border-color) !important; }
.rounded      { border-radius: var(--r-xs) !important; }

/* ------------------------------------------------------------- Select2 ---- */
/* Select2 renders its own DOM next to the <select>; it has to be dressed to
   match `.form-control` exactly or the cascading pickers look foreign. */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 44px; border: 1px solid var(--bs-border-color); border-radius: var(--r-xs);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--bs-paper-bg);
  transition: border-color .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1; min-width: 0; line-height: 1.6; color: var(--bs-heading-color); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Select2 reserves room for its absolutely-positioned arrow by padding
   `__rendered` (8px on the text side, 20px on the caret side), and it does so
   from a `[dir="rtl"]` rule — an attribute selector, so it outranked the
   class-only `padding: 0` that used to sit here and stacked on the field's own
   14px. The text was landing 22px in where a plain `.inp` puts it at 14px.
   Matching that weight with `[dir]` — and a flex caret that needs no reserve —
   is what actually clears it. */
.select2-container--default[dir] .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--bs-gray-500); }

/* The caret. Select2 pins its arrow at `top: 1px` with a full-height box, so it
   rendered a pixel low and hung a pixel past the field's bottom border; and it
   draws a CSS border-triangle, which looks nothing like `.qm-menu-caret`, the
   Tabler chevron every other dropdown in this system uses. The selection is
   already a flex row, so the arrow just becomes a normal flex item and centres
   itself — which also means it moves with the padding when focus thickens the
   border, instead of staying pinned to the old edge. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: static; order: 2; flex: none; width: auto; height: auto;
  display: inline-flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow::before {
  content: "\ea5f";                                    /* ti-chevron-down */
  font-family: 'tabler-icons'; font-size: 16px; line-height: 1;
  color: var(--bs-gray-500); transition: transform .15s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::before {
  transform: rotate(180deg);
}

/* The clear "x", which only exists once a choice is made. Select2 emits it as a
   <button> FIRST in the DOM — before the label — and floats it with a 20px margin
   to dodge the arrow it used to position absolutely. As a flex item that put it
   at the reading start, where it read as part of the book's name. `order` moves
   it beside the caret without touching the DOM, and the row's own 8px gap spaces
   it; because it stays in flow it can never overlap a long name the way an
   absolutely-positioned one would. It also needs the button chrome stripped. */
.select2-container--default[dir] .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
  order: 1; flex: none; float: none; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--bs-gray-500); font-weight: var(--fw-normal);
  /* Centred, and sized to sit with the caret.

     Select2 leaves this a `display: block` box 6.4px wide holding a bare "×"
     (U+00D7). The BOX was already centred in the row — the glyph inside it was not:
     the multiplication sign is drawn on the maths axis, above the middle of its em
     box, so with `line-height: 1` and nothing centring it, it rode high and sat off
     to one side of a box narrower than the character. A square inline-flex box with
     both axes centred puts the glyph where the box is, in both directions.

     18px is the 15px it computed to, 20% larger. The box is 18px square so it
     matches the 16px caret beside it without the row growing — the field is 44px
     tall, so neither is close to setting the height. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 18px; line-height: 1;
}
/* Centring the flex line box is not the same as centring the ink. "×" is drawn on
   the maths axis, above the middle of the em box, so the box centres perfectly while
   the mark itself measured 1.78px LOW inside it. This lifts the glyph, not the button,
   so the 18px hit area stays where it is. Stated in `em` so it tracks the font-size
   above rather than becoming wrong the moment that changes. Measured, not guessed:
   ink centroid vs box centre was dx +0.00 / dy +1.78 CSS px before this line. */
.select2-container--default .select2-selection--single .select2-selection__clear > span {
  display: block; transform: translateY(-0.1em);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--danger-text); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
  border-color: var(--bs-primary); border-width: 2px; box-shadow: none; padding: 0 13px;
}
.select2-container--default .select2-selection--single[aria-disabled="true"] { background: var(--bs-tertiary-bg); }
.select2-dropdown {
  border-color: var(--bs-border-color); border-radius: var(--r-xs);
  background: var(--bs-paper-bg); box-shadow: none;
}
.select2-container--default .select2-results__option {
  font-size: 14px; color: var(--bs-body-color); padding: 9px 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bs-primary); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(var(--bs-primary-rgb), .10); color: var(--bs-primary); }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--bs-border-color); border-radius: var(--r-xs);
  padding: 8px 12px; font-family: inherit; background: var(--bs-paper-bg); color: var(--bs-heading-color);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bs-primary); outline: none;
}

/* ------------------------------------------------------------ Dark mode ---- */
/* Bootstrap's own dark handling keys off [data-bs-theme]; these are the few
   spots where the app's markup would otherwise stay light. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-dropdown {
  background: var(--bs-paper-bg); border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }