/* Arabic typography for the whole template (Vuexy reads --bs-font-sans-serif) */
:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
  --bs-font-sans-serif: 'Cairo', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-feature-settings: 'tnum';
}

/* Numbers in tables and inputs stay left-to-right inside the RTL layout. Aligned to the physical right: with
   unicode-bidi: plaintext an Arabic header such as «الكمية» is a right-to-left paragraph, where "end" is the left. */
.num,
input[type='number'],
input.numeral,
td.num,
th.num {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: right;
}

.table td.num {
  white-space: nowrap;
}

/* DataTables' own CSS (loaded after this file) aligns every cell to its start, which is the left in these LTR number
   cells; keep figures and their headers on the right like the other columns. */
body table.dataTable thead th.num,
body table.dataTable tbody td.num,
body table.dataTable tfoot th.num,
body table.dataTable tfoot td.num {
  text-align: right;
}

/* DataTables keeps the sort-arrow space on the right as in LTR tables, but Vuexy draws the arrow on the left in RTL:
   move the space to the left so header labels line up with the values below them. */
[dir='rtl'] table.dataTable thead > tr > th.dt-orderable-asc,
[dir='rtl'] table.dataTable thead > tr > th.dt-orderable-desc,
[dir='rtl'] table.dataTable thead > tr > th.dt-ordering-asc,
[dir='rtl'] table.dataTable thead > tr > th.dt-ordering-desc {
  padding-right: 1.25rem;
  padding-left: 30px;
}

/* Long notes take only the width left over and end with «…» instead of widening the table past the card */
.table td.text-truncate {
  max-width: 0 !important;
}

/* Page header used by the system's screens */
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-head h4 { margin: 0; }
.page-head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.table-sm-dense td, .table-sm-dense th { padding-block: 0.45rem; }
.text-debit { color: var(--bs-danger); }
.text-credit { color: var(--bs-success); }

@media print {
  .layout-menu, .layout-navbar, .content-footer, .no-print, .page-head .actions { display: none !important; }
  .layout-page { padding: 0 !important; }
  .card { box-shadow: none !important; border: 0 !important; }
  /* Tables print every row (app.js), so the pager, page size and «1 - 100 من …» do not belong on paper. */
  .dt-paging, .dt-length, .dt-info { display: none !important; }
}

/* Vuexy Flatpickr / Typeahead inside the RTL forms */
.flatpickr-input[readonly] { background-color: var(--bs-paper-bg, var(--bs-body-bg)); cursor: pointer; }
.twitter-typeahead { width: 100%; }
.twitter-typeahead .tt-menu { right: 0; width: 100%; text-align: right; max-height: 18rem; overflow-y: auto; }

/* ASP.NET renders the validation summary even with no errors; show the alert box only when it has messages */
.validation-summary-valid { display: none; }

/* Every Select2 box looks and opens like Vuexy's AppSelect (Vue template): the list is a floating menu card with
   rounded items, the hovered item tinted grey and the chosen item in the primary colour.
   select2.css loads after this file, hence the body prefix. */
body .select2-container--default .select2-dropdown,
body .select2-container--default.select2-container--open .select2-dropdown--above,
body .select2-container--default.select2-container--open .select2-dropdown--below {
  border: 0;
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow-lg);
  overflow: hidden;
}
body .select2-container--open .select2-dropdown--below { margin-top: 0.25rem; }
body .select2-container--open .select2-dropdown--above { margin-top: -0.25rem; }
body .select2-container--default .select2-results > .select2-results__options {
  max-height: 18rem;
  margin-block: 0;
  padding-block: 0.5rem;
}
body .select2-container--default .select2-results__option {
  margin: 0.125rem 0.5rem;
  padding: 0.5rem 1rem;
  min-height: 2.375rem;
  border-radius: var(--bs-border-radius);
  color: var(--bs-heading-color);
  font-size: 0.9375rem;
}
body .select2-container--default .select2-results__option:first-child { margin-top: 0; }
body .select2-container--default .select2-results__option:last-child { margin-bottom: 0; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-select-dropdown-link-hover-bg);
  color: var(--bs-heading-color);
}
body .select2-container--default .select2-results__option[aria-selected=true],
body .select2-container--default .select2-results__option--highlighted[aria-selected=true] {
  background-color: rgba(var(--bs-primary-rgb), 0.16);
  color: var(--bs-primary);
}
body .select2-container--default .select2-results__message { color: var(--bs-secondary-color); }
/* The search box of long lists sits at the top of the menu as a Vuexy input */
body .select2-container--default .select2-search--dropdown { padding: 0.5rem 0.5rem 0; }
body .select2-container--default .select2-search--dropdown .select2-search__field {
  inline-size: 100%;
  margin: 0;
  padding: 0.4rem 0.875rem;
  border: var(--bs-border-width) solid var(--bs-select-border-color);
  border-radius: var(--bs-border-radius);
  outline: 0;
}
body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary);
}
/* The arrow turns only while the menu is open, as in AppSelect (not merely on focus) */
body .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single .select2-selection__arrow b { transform: none; }
body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg); }

/* Table footer: rows-per-page box beside the page numbers */
.dt-container .dt-layout-end:has(> .dt-length) { flex-wrap: wrap; gap: 1rem; }

/* Drawer forms: the save / cancel buttons sit in a footer under the scrolling body */
.offcanvas-footer { padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); }

/* While a page loads its content is not shown (see _CommonMasterLayout and app.js): the menu and navbar stay, and
   the content fades in once its tables and inputs are in their final form, instead of flashing the raw page.
   visibility, not display: what is built while hidden still gets its real width (DataTables sizes its page numbers to
   it; with display:none the pager showed only «1» until the first click). */
html.page-loading .content-wrapper { visibility: hidden; }
.content-wrapper { animation: page-in 0.15s ease-out; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Row action buttons in tables and lists: Vuexy's small buttons draw a 13px icon, too small to aim at; use the icon size of
   Vuexy's own list pages (icon-only buttons), and a little smaller beside a label. */
:is(.table, .list-group) .btn-icon.btn-sm { block-size: 2.125rem; inline-size: 2.125rem; }
:is(.table, .list-group) .btn-icon.btn-sm .icon-base { --bs-icon-size: 1.25rem; block-size: 1.25rem; font-size: 1.25rem; inline-size: 1.25rem; }
:is(.table, .list-group) .btn-sm:not(.btn-icon) .icon-base { --bs-icon-size: 1rem; block-size: 1rem; font-size: 1rem; inline-size: 1rem; }

/* The system name «نظام المبيعات والمخازن» is longer than the template's: keep it on one line beside the logo */
#layout-menu .app-brand-text.demo { font-size: 1rem; white-space: nowrap; }

/* Invoice line tables (sales, purchases): tight cells and inputs so every column fits the card at desktop width
   (Vuexy's 1.25rem cell padding pushed the purchase lines to 1,580px). */
#lines :is(th, td) { padding-inline: 0.375rem; vertical-align: middle; }
#lines th { white-space: normal; line-height: 1.25; }
#lines .select2-container { min-width: 15rem; }
#lines input.form-control { min-width: 5rem; padding-inline: 0.5rem; }
#lines input.form-control:is(.pack, .cartons) { min-width: 4rem; }

/* ApexCharts draws its text and grid in fixed light-theme colours; take them from the theme so the charts read in dark
   mode too (CSS fill beats the SVG attributes, and follows a live theme switch). */
.apexcharts-text, .apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--bs-secondary-color) !important; }
.apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-xaxis line { stroke: var(--bs-border-color) !important; }
/* Tooltips in reading order: «المبيعات (د.ع): 43,620,158», the number kept left to right */
.apexcharts-tooltip { direction: rtl; text-align: right; }
.apexcharts-tooltip-text-y-value { direction: ltr; unicode-bidi: isolate; }