/* ============================================================
   Cairo Font Family
   ============================================================ */
@font-face {
  font-family: 'Cairo';
  src: url('/static/fonts/Cairo-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/static/fonts/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/static/fonts/Cairo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/static/fonts/Cairo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/static/fonts/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply Cairo globally */
body,
input,
textarea,
select,
button,
th,
td {
  font-family: 'Cairo', sans-serif !important;
}

/* ============================================================
   RTL Base
   ============================================================ */
[dir="rtl"] {
  direction: rtl;
}

[dir="rtl"] body {
  text-align: right;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

/* ============================================================
   RTL Table – Headers & Cells
   ============================================================ */

/* Table header cells: flip text-left → text-right */
[dir="rtl"] #result_list th {
  text-align: right !important;
}

/* Table data cells: flip text-left → text-right */
[dir="rtl"] #result_list td {
  text-align: right !important;
}

/* Mobile data-label pseudo-element: flip mr-auto → ml-auto */
[dir="rtl"] #result_list td::before {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Checkbox column stays consistent */
[dir="rtl"] #result_list td.action-checkbox {
  text-align: center !important;
}

/* ============================================================
   RTL Search + Filter Bar
   ============================================================ */

/* Filter button: flip ml-auto → mr-auto */
[dir="rtl"] #toolbar + div > a,
[dir="rtl"] .flex.sm\:flex-row > a[class*="ml-auto"] {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* More specific: target the filter toggle link next to search */
[dir="rtl"] #changelist form > div.flex > a {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================================
   RTL Sidebar & Navigation
   ============================================================ */

/* Sidebar items text alignment */
[dir="rtl"] nav a,
[dir="rtl"] nav span {
  text-align: right;
}

/* ============================================================
   RTL Datetime & Misc Widgets
   ============================================================ */
[dir="rtl"] .datetimeshortcuts {
  right: auto;
  left: 1px;
}

[dir="rtl"] .timezonewarning {
  right: auto;
  left: calc(var(--spacing) * 11);
}

/* ============================================================
   RTL Icon Flipping
   ============================================================ */

/* Flip directional arrow icons */
[dir="rtl"] span.material-symbols-outlined:is(
  [class*="arrow_back"],
  [class*="arrow_forward"],
  [class*="chevron_left"],
  [class*="chevron_right"],
  [class*="navigate_before"],
  [class*="navigate_next"]
) {
  transform: scaleX(-1);
}

[dir="rtl"] .material-symbols-outlined {
  unicode-bidi: isolate;
}

/* Back button arrow */
[dir="rtl"] a[title="رجوع"] .material-symbols-outlined,
[dir="rtl"] a[title="Go back"] .material-symbols-outlined {
  transform: scaleX(-1);
}

/* Pagination arrows */
[dir="rtl"] .flex a .material-symbols-outlined,
[dir="rtl"] nav .material-symbols-outlined {
  transform: scaleX(-1);
}

/* ============================================================
   RTL Margin & Padding Fixes
   ============================================================ */
[dir="rtl"] .mr-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

[dir="rtl"] .mr-3 {
  margin-right: 0 !important;
  margin-left: 0.75rem !important;
}

[dir="rtl"] .ml-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

[dir="rtl"] .ml-3 {
  margin-left: 0 !important;
  margin-right: 0.75rem !important;
}

/* Flip ml-auto / mr-auto utilities */
[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* Flip padding-left / padding-right utilities */
[dir="rtl"] .pl-3 {
  padding-left: 0 !important;
  padding-right: 0.75rem !important;
}

[dir="rtl"] .pr-3 {
  padding-right: 0 !important;
  padding-left: 0.75rem !important;
}

/* ============================================================
   RTL Flex Row Reverse (search bar, breadcrumbs, etc.)
   ============================================================ */

/* The search+filter row should reverse its items in RTL */
[dir="rtl"] #changelist > form > div.flex.sm\:flex-row {
  flex-direction: row-reverse;
}

/* ============================================================
   RTL Dashboard Tables (Unfold components/table.html
   + helpers/app_list_default.html — used on the admin index)
   The component hard-codes text-left + ltr ordering. Flip both.
   ============================================================ */

/* Force right-to-left column flow on every table on RTL pages.
   Tables don't always inherit direction from <html>, so make it explicit. */
[dir="rtl"] table {
  direction: rtl;
}

/* Flip the Tailwind text-left utility on cells / captions inside tables. */
[dir="rtl"] table th.text-left,
[dir="rtl"] table td.text-left,
[dir="rtl"] table caption.text-left {
  text-align: right !important;
}

/* App-list (Unfold helpers/app_list_default.html) — action column uses
   ml-auto + justify-end which positions actions on the LTR right; flip. */
[dir="rtl"] .module table td .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}
[dir="rtl"] .module table td .justify-end {
  justify-content: flex-start;
}

/* ============================================================
   Form label column width (gap between a field's label and input)
   ------------------------------------------------------------
   Unfold's ModelAdmin defaults to compressed_fields=True, which pins
   every field label to a fixed 14rem (w-56 = 224px) column. Short
   Arabic labels then sit far from their input. The label is the first
   child of each .field-line; shrink that column to reduce the gap.
   Tune --nds-form-label-width to taste (smaller = less gap; too small
   wraps long labels onto two lines, which is harmless). Applies on lg+
   only — on small screens the label stacks above the field.

   IMPORTANT: only target a regular field's label, which is the FIRST of
   two children of .field-line (label + input). A checkbox/boolean field
   uses a different template whose single wrapper is the ONLY child of
   .field-line, so it is first AND last child; :not(:last-child) excludes
   it. Without that guard the whole toggle+help-text row gets squeezed to
   11rem and the help text wraps one word per line.
   ============================================================ */
:root {
  --nds-form-label-width: 11rem;
}

@media (min-width: 1024px) {
  .field-line > div:first-child:not(:last-child) {
    width: var(--nds-form-label-width) !important;
    min-width: var(--nds-form-label-width) !important;
  }
}

/* ============================================================
   Bulk-action bar sidebar offset
   ------------------------------------------------------------
   The floating action bar (the green bar that appears once a row is
   ticked) lives in a `fixed inset-x-0` container, so it is out of flow
   and spans the whole viewport — it does not get the sidebar offset the
   in-flow changelist gets for free. Unfold compensates by re-adding it
   by hand in unfold/helpers/change_list_actions.html:

     x-bind:class="{'xl:ml-0': !sidebarDesktopOpen, 'xl:ml-72': sidebarDesktopOpen}"

   That is margin-LEFT only, i.e. LTR-only: the sidebar is w-[288px] and
   xl:relative, and in RTL it renders on the right. So the 288px lands on
   the wrong side — a dead gap on the left while the bar runs under the
   sidebar on the right. Swap the side. Alpine toggles between the two
   classes, so both are matched: ml-72 becomes a right offset, ml-0 stays
   flush (and explicitly clears the right margin for the collapsed case).

   Escaped colons (\:) are the Tailwind class names themselves, not a
   pseudo-selector. Breakpoint matches Tailwind's xl (1280px), which is
   also where the sidebar starts being displayed.
   ============================================================ */
@media (min-width: 1280px) {
  [dir="rtl"] #changelist-actions-wrapper.xl\:ml-72 {
    margin-left: 0 !important;
    margin-right: 18rem !important;
  }

  [dir="rtl"] #changelist-actions-wrapper.xl\:ml-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   filter_horizontal chooser arrows (groups, user_permissions)

   Unfold hardcodes the two buttons LTR:

     .selector-add:after    { content: "arrow_forward" }
     .selector-remove:after { content: "arrow_back" }

   Those are Material Symbols ligatures, so the glyph is chosen by NAME,
   not by direction — `direction: ltr` is even set on the pseudo-element,
   which pins them. In RTL the boxes swap sides: "available" renders on
   the right and "chosen" on the left, so the arrow that ADDS has to point
   LEFT and the one that REMOVES has to point RIGHT. Untouched, every
   button points at the box it is taking rows *out of*.

   Swapping the ligature names rather than mirroring with transform: a
   flipped glyph inherits the flip on anything else the button ever grows
   (a focus ring, a tooltip), and the arrow is the whole content here.
   ============================================================ */
[dir="rtl"] .selector-add:after {
  content: "arrow_back";
}

[dir="rtl"] .selector-remove:after {
  content: "arrow_forward";
}