/* ==========================================================================
   LIBRARY SKIN

   Four plugins draw things Bootstrap has no component for, and none of them
   ships a stylesheet the admin can link: they all position carets, arrows and
   close buttons with `left` and `right`, and this admin serves `ar` and `en`
   off one set of binaries. Bootstrap itself is the exception — it publishes a
   real right-to-left build, and _Head.cshtml picks the correct one per request.

   So what is here is only what Bootstrap does not already cover:

     1. DataTables   sort indicators
     2. Choices      searchable select, drawn as a Bootstrap form control
     3. flatpickr    the calendar
     4. Dropzone     the drop area and its per-file previews
     5. GLightbox    two corrections to the one vendor stylesheet that is linked

   Everything modal-, dropdown-, offcanvas-, toast-, tooltip-, collapse- and
   tab-shaped used to live here too. Bootstrap's CSS owns all of it now, and
   this file lost about two thirds of its length to that.

   Contract, not invention: the selectors below are the class names each
   library's JavaScript actually toggles. Renaming one silently unstyles the
   component — the script keeps working and the thing merely looks wrong.

   Values come from Bootstrap's `--bs-*` variables where the thing is meant to
   match a Bootstrap component, from the admin's own `--ad-*` neutral ramp in
   admin.css for chrome, and from Wasl.Theme tokens for the brand and the
   spacing scale. Logical properties throughout, with the two documented
   exceptions at the end.
   ========================================================================== */


/* ==========================================================================
   1. DATATABLES

   Column ordering only. Paging, search and the row count stay on the server —
   these lists are server-paged, and a client pager over one page of rows would
   be counting the wrong thing.
   ========================================================================== */
.dt-container { position: relative; }

/* DataTables wraps the table in its own layout rows. The admin uses none of
   them, so they only have to not add space. */
.dt-layout-row:empty { display: none; }

table.dataTable { width: 100% !important; }

/* The affordance sits at the inline-end of the cell, so it follows the reading
   direction. The chevrons themselves point up and down, which no direction
   changes. */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
  position: relative;
  padding-inline-end: var(--space-7);
  cursor: pointer;
  user-select: none;
}

table.dataTable thead th.dt-orderable-asc:hover,
table.dataTable thead th.dt-orderable-desc:hover { color: var(--color-primary); }

table.dataTable thead th .dt-column-order {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-3);
  width: 10px;
}

table.dataTable thead th .dt-column-order::before,
table.dataTable thead th .dt-column-order::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  opacity: 0.35;
  transition: var(--transition);
}

table.dataTable thead th .dt-column-order::before {
  inset-block-start: calc(50% - 8px);
  border-block-end: 5px solid currentcolor;
}

table.dataTable thead th .dt-column-order::after {
  inset-block-start: calc(50% + 3px);
  border-block-start: 5px solid currentcolor;
}

/* `dt-ordering-*` marks the column the table is actually sorted by. */
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc { color: var(--color-primary); }

table.dataTable thead th.dt-ordering-asc .dt-column-order::before,
table.dataTable thead th.dt-ordering-desc .dt-column-order::after { opacity: 1; }

table.dataTable td.dt-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--ad-muted);
}


/* ==========================================================================
   2. CHOICES.JS

   Replaces a <select> with a div it controls. Every class below is one Choices
   writes, and the geometry is Bootstrap's `.form-select` so a searchable field
   and a plain one line up on the same row.
   ========================================================================== */
.choices { position: relative; margin: 0; }
.choices:focus { outline: none; }

.choices__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: calc(1.5em + 0.75rem + 2px);   /* Bootstrap's .form-select height */
  padding-block: 0.375rem;
  padding-inline: 0.75rem 2.25rem;           /* end side leaves room for the caret */
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font-size: 0.875rem;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: var(--transition);
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.choices.is-disabled .choices__inner {
  background: var(--bs-secondary-bg);
  cursor: not-allowed;
}

/* The caret. It points down and rotates in place, so it has no direction. */
.choices::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.9rem;
  width: 8px;
  height: 8px;
  border-block-end: 1.5px solid var(--ad-muted);
  border-inline-end: 1.5px solid var(--ad-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
  pointer-events: none;
}

.choices.is-open::after { transform: translateY(-20%) rotate(-135deg); }

.choices__list--single { display: block; width: 100%; padding: 0; }
.choices__list--multiple { display: contents; }

/* A selected value in a multi-select, drawn as a Bootstrap badge. */
.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
}

.choices__button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background-color: currentcolor;
  /* A symmetrical ×; no direction. */
  mask: center / 8px 8px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5l13 13M14.5 1.5l-13 13' stroke='%23000' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  text-indent: -9999px;
  cursor: pointer;
  opacity: 0.6;
}

.choices__button:hover { opacity: 1; }

.choices__placeholder { color: var(--ad-faint); opacity: 1; }

/* The open panel, matched to .dropdown-menu. */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 1000;                             /* Bootstrap's $zindex-dropdown */
  display: none;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--ad-line);
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow-md);
  word-break: break-word;
}

.choices__list--dropdown.is-active,
.choices__list[aria-expanded].is-active { display: block; }

/* Choices flips this on itself when there is not enough room below. */
.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
  inset-block: auto calc(100% + 4px);
}

.choices__list--dropdown .choices__list {
  max-height: 260px;
  overflow: auto;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
}

.choices__list--dropdown .choices__item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--ad-radius);
  font-size: 0.875rem;
  color: var(--bs-body-color);
  text-align: start;
  cursor: pointer;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--bs-primary-bg-subtle);
  color: var(--color-primary);
}

.choices__list--dropdown .choices__item--selectable[data-choice-selected="true"] {
  font-weight: var(--fw-medium);
  color: var(--ad-title);
}

.choices__list--dropdown .choices__placeholder { display: none; }

/* The type-to-filter box Choices injects at the top of the panel. */
.choices__input {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--bs-body-color);
}

.choices__input:focus { outline: none; }

.choices__list--dropdown .choices__input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--ad-line);
  background: var(--bs-secondary-bg);
}

/* Choices leaves the original <select> in the DOM, which is what still posts. */
.choices [hidden] { display: none !important; }


/* ==========================================================================
   3. FLATPICKR

   The calendar is a flex grid of seven columns. The two widths below are
   flatpickr's own constants: the day cells are laid out as
   `flex-basis: 14.2857%` of a container it expects to be a fixed width, and a
   fluid container makes the last column wrap onto its own row.
   ========================================================================== */
.flatpickr-calendar {
  position: absolute;
  display: none;
  width: 307.875px;          /* flatpickr constant: 7 × 43.98px day cells */
  padding: 0;
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--ad-line);
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  visibility: hidden;
  opacity: 0;
  /* flatpickr writes `left`/`top` here from a measured rectangle, so the
     physical property is the measurement, not a reading direction. */
  transition: opacity var(--dur) var(--ease);
}

.flatpickr-calendar.open {
  display: block;
  z-index: 1055;             /* above a Bootstrap modal, which is 1055 */
  visibility: visible;
  opacity: 1;
}

.flatpickr-months {
  display: flex;
  align-items: center;
  padding: var(--space-3);
}

.flatpickr-month {
  flex: 1 1 auto;
  overflow: hidden;
  text-align: center;
  color: var(--ad-title);
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
}

.flatpickr-monthDropdown-months {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--ad-radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.flatpickr-monthDropdown-months:hover { background: var(--bs-secondary-bg); }

.numInputWrapper { position: relative; }

.numInputWrapper .numInput {
  width: 5ch;
  padding: var(--space-1);
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
  appearance: textfield;
}

.numInputWrapper .numInput::-webkit-inner-spin-button,
.numInputWrapper .numInput::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* flatpickr's own year steppers: 4px targets that only appear on hover, over a
   field that is already typeable. */
.numInputWrapper .arrowUp,
.numInputWrapper .arrowDown { display: none; }

/* The month arrows. flatpickr puts "prev" first in the DOM and never mirrors
   it, so in Arabic the button meaning "earlier" already sits on the right —
   which is correct — but the chevron inside it still points the ltr way.
   --flip turns the glyph and leaves the buttons where DOM order put them. */
.flatpickr-prev-month,
.flatpickr-next-month {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--ad-radius);
  color: var(--ad-muted);
  cursor: pointer;
  transition: var(--transition);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--color-primary);
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  width: 12px;
  height: 12px;
  fill: currentcolor;
  transform: scaleX(var(--flip));
}

.flatpickr-calendar.hidePrevMonthArrow .flatpickr-prev-month,
.flatpickr-calendar.hideNextMonthArrow .flatpickr-next-month { visibility: hidden; }

.flatpickr-weekdays { display: flex; padding-inline: var(--space-3); }
.flatpickr-weekdaycontainer { display: flex; flex: 1 1 auto; }

span.flatpickr-weekday {
  flex: 1 1 14.2857143%;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--ad-faint);
  text-align: center;
}

.flatpickr-days {
  display: flex;
  padding: var(--space-2) var(--space-3) var(--space-3);
  overflow: hidden;
}

.dayContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 283.875px;          /* flatpickr constant: .flatpickr-days minus padding */
  min-width: 283.875px;
  max-width: 283.875px;
  padding: 0;
}

.flatpickr-day {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  margin-block: 1px;
  border: 1px solid transparent;
  border-radius: var(--ad-radius);
  color: var(--bs-body-color);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
}

.flatpickr-day:hover { background: var(--bs-secondary-bg); color: var(--ad-title); }

.flatpickr-day.today {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--ad-on-primary);
  font-weight: var(--fw-medium);
}

.flatpickr-day.inRange {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-bg-subtle);
  color: var(--color-primary);
  border-radius: 0;
}

.flatpickr-day.startRange { border-start-end-radius: 0; border-end-end-radius: 0; }
.flatpickr-day.endRange   { border-start-start-radius: 0; border-end-start-radius: 0; }

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--ad-faint); }

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  color: var(--ad-faint);
  opacity: 0.4;
  cursor: not-allowed;
}

.flatpickr-day.hidden { visibility: hidden; }


/* ==========================================================================
   4. DROPZONE
   ========================================================================== */
.dropzone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: 180px;
  padding: var(--space-6);
  background: var(--bs-secondary-bg);
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--ad-radius-lg);
  cursor: pointer;
  transition: var(--transition);
}

.dropzone:hover,
.dropzone.dz-drag-hover {
  border-color: var(--color-primary);
  background: var(--bs-primary-bg-subtle);
}

.dropzone .dz-message {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  text-align: center;
  color: var(--ad-muted);
}

.dropzone .dz-message .icon { font-size: 32px; color: var(--color-primary); }

.dropzone .dz-message__title {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: var(--ad-title);
}

/* Once a file is queued Dropzone adds `.dz-started`; the prompt gives way to
   the thumbnails so the panel does not grow a dead heading above them. */
.dropzone.dz-started .dz-message { display: none; }

.dropzone .dz-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 132px;
  min-width: 0;
}

.dropzone .dz-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--ad-radius);
  background: var(--bs-body-bg);
}

.dropzone .dz-image img { width: 100%; height: 100%; object-fit: cover; }

.dropzone .dz-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--ad-muted);
}

.dropzone .dz-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ad-title);
}

.dropzone .dz-progress {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--ad-line);
}

/* Dropzone sets `width` as a percentage on this element as the upload runs.
   The bar has to grow from the side the reading direction starts on. */
.dropzone .dz-upload {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  width: 0;
  background: var(--color-primary);
  transition: width var(--dur) var(--ease);
}

.dropzone .dz-success .dz-progress { opacity: 0; }

.dropzone .dz-error-message { font-size: 0.75rem; color: rgb(var(--bs-danger-rgb)); }

.dropzone .dz-success-mark,
.dropzone .dz-error-mark {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-1);
  display: none;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--ad-on-primary);
}

.dropzone .dz-success .dz-success-mark,
.dropzone .dz-error .dz-error-mark { display: flex; }

.dropzone .dz-success-mark { background: rgb(var(--bs-success-rgb)); }
.dropzone .dz-error-mark   { background: rgb(var(--bs-danger-rgb)); }

.dropzone .dz-success-mark svg,
.dropzone .dz-error-mark svg { width: 12px; height: 12px; fill: currentcolor; }


/* ==========================================================================
   5. GLIGHTBOX

   The one vendor stylesheet besides Bootstrap that the admin links, because it
   is a full-screen overlay: it centres a single image in the viewport and has
   almost nothing a reading direction could get wrong. The two things it does
   have are corrected here.
   ========================================================================== */

/* GLightbox pins prev to `left` and next to `right`. Those *are* about reading
   direction — "next" belongs on the side the reader moves towards — so in
   Arabic they trade places. Physical properties on purpose: they are undoing
   physical properties, and `inset-inline` would not out-specify the vendor rule
   it is overriding. */
[dir="rtl"] .gprev { left: auto; right: 30px; }
[dir="rtl"] .gnext { right: auto; left: 30px; }

.goverlay { background: rgb(9 11 15 / 94%); }

.gslide-description { background: var(--bs-body-bg); }
.gslide-title { font-family: var(--font-heading); color: var(--ad-title); }
.gslide-desc  { font-family: var(--font-body); color: var(--bs-body-color); }