/* =============================================================================
   custom.css — project overrides for the EduDash template
   -----------------------------------------------------------------------------
   Load order: remixicon.css -> lib/*.css -> style.css -> custom.css (LAST)

   The template's own files are never edited. Everything that differs from stock
   EduDash lives here.

   Contents:
     1. Vazirmatn @font-face
     2. Font-family overrides
     3. RTL fixes for Bootstrap's LTR utility build
     4. RTL fixes for style.css physical properties
     5. Directional icon orientation
     6. Charts (ApexCharts) RTL
     7. Numerals, dates and tabular data
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Vazirmatn @font-face
   Fonts live in public/fonts/ (NOT public/assets/fonts/).
   This file sits at public/assets/edudash/css/, so ../../../fonts/ = public/fonts/
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../../fonts/Vazirmatn-RD-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------------------------
   2. Font-family overrides

   IMPORTANT: no `!important` and no universal (`*`) selector here. The icon
   fonts (remixicon, FontAwesome) declare their own font-family in
   remixicon.css / style.css; if we forced Vazirmatn globally, every icon would
   render as a blank box. Relying on normal inheritance keeps icons intact.
   -------------------------------------------------------------------------- */

:root {
  --default-font: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}

body {
  font-family: var(--default-font);
}

/* Form controls do not inherit font by default in any browser. */
button,
input,
select,
textarea,
optgroup {
  font-family: inherit;
}

/* ApexCharts hardcodes Inter on data labels (style.css:13032). */
.title-style .apexcharts-text.apexcharts-datalabel-label,
.apexcharts-text,
.apexcharts-title-text,
.apexcharts-legend-text {
  font-family: var(--default-font) !important;
}

/* Vazirmatn runs slightly large; nudge line-height for Persian text. */
body {
  line-height: 1.85;
}


/* -----------------------------------------------------------------------------
   3. RTL fixes for Bootstrap's LTR utility build

   The template bundles bootstrap.min.css v5.3.3 built for LTR (194 physical
   `margin-left` declarations, zero logical). Its directional utilities
   therefore point the wrong way under dir="rtl".

   Only the utilities actually used by the EduDash markup are corrected. Scope
   is limited to [dir="rtl"] so nothing changes if the panel is ever LTR.

   Verified against the bundled build:
     .text-start     -> text-align: left
     .text-end       -> text-align: right
     .me-1 / .me-2   -> margin-right
     .ms-4           -> margin-left
     .pe-0 / .pe-4   -> padding-right
     .border-start-0 -> border-left: 0
     .border-end-0   -> border-right: 0
   -------------------------------------------------------------------------- */

[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left  !important; }

[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem  !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem    !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem  !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem    !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem  !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem    !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem  !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem    !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem  !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem    !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem  !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem    !important; }

[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem  !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem    !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem  !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem    !important; }

[dir="rtl"] .border-start-0 { border-left: revert !important; border-right: 0 !important; }
[dir="rtl"] .border-end-0   { border-right: revert !important; border-left: 0 !important; }

[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }

/* Dropdowns anchored to an edge. */
[dir="rtl"] .dropdown-menu-end { --bs-position: start; right: auto !important; left: 0 !important; }
[dir="rtl"] .dropdown-menu-start { --bs-position: end; left: auto !important; right: 0 !important; }


/* -----------------------------------------------------------------------------
   4. RTL fixes for style.css physical properties

   style.css is overwhelmingly written with logical properties
   (~212 logical vs ~45 physical), so the shell — sidebar position, main content
   offset — is already direction-aware and needs no help. Only the small set of
   physical declarations is corrected here.
   -------------------------------------------------------------------------- */

/* Sidebar submenu indent guide. */
[dir="rtl"] .sidebar-submenu {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* Table cell alignment: first/last column edges. */
[dir="rtl"] .table > :not(caption) > * > * {
  text-align: center;
}

/* Bootstrap's form-check puts the box on the left. */
[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: 0;
}

[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

/* Input groups: rounded corners sit on the wrong side in RTL. */
[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-right: -1px;
  margin-left: 0;
}

/* Breadcrumb separator direction. */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-right: 0.5rem;
  padding-left: 0;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-right: 0;
  padding-left: 0.5rem;
}

/* Pagination arrows. */
[dir="rtl"] .pagination {
  padding-right: 0;
}


/* -----------------------------------------------------------------------------
   5. Directional icon orientation

   Arrow/chevron/caret glyphs are physically drawn; they must be mirrored in
   RTL. Non-directional icons (user, calendar, search...) must NOT be touched,
   so this is an explicit allow-list rather than a blanket transform.
   -------------------------------------------------------------------------- */

[dir="rtl"] .ri-arrow-left-line,
[dir="rtl"] .ri-arrow-right-line,
[dir="rtl"] .ri-arrow-left-s-line,
[dir="rtl"] .ri-arrow-right-s-line,
[dir="rtl"] .ri-arrow-drop-left-line,
[dir="rtl"] .ri-arrow-drop-right-line,
[dir="rtl"] .ri-arrow-left-circle-line,
[dir="rtl"] .ri-arrow-right-circle-line,
[dir="rtl"] .ri-arrow-left-up-line,
[dir="rtl"] .ri-arrow-right-up-line,
[dir="rtl"] .ri-arrow-left-down-line,
[dir="rtl"] .ri-arrow-right-down-line,
[dir="rtl"] .ri-arrow-go-back-line,
[dir="rtl"] .ri-arrow-go-forward-line,
[dir="rtl"] .ri-corner-up-left-line,
[dir="rtl"] .ri-corner-up-right-line,
[dir="rtl"] .ri-logout-box-r-line,
[dir="rtl"] .ri-logout-box-line,
[dir="rtl"] .ri-login-box-line,
[dir="rtl"] .ri-share-forward-line,
[dir="rtl"] .ri-reply-line {
  display: inline-block;
  transform: scaleX(-1);
}

/* Iconify directional icons (used in the topbar and pagination). */
[dir="rtl"] iconify-icon[icon*="arrow-left"],
[dir="rtl"] iconify-icon[icon*="arrow-right"],
[dir="rtl"] iconify-icon[icon*="chevron-left"],
[dir="rtl"] iconify-icon[icon*="chevron-right"],
[dir="rtl"] iconify-icon[icon*="caret-left"],
[dir="rtl"] iconify-icon[icon*="caret-right"],
[dir="rtl"] iconify-icon[icon*="angle-left"],
[dir="rtl"] iconify-icon[icon*="angle-right"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* Bootstrap accordion / dropdown carets. */
[dir="rtl"] .accordion-button::after {
  margin-right: auto;
  margin-left: 0;
}

/* Sidebar submenu expand arrow. */
[dir="rtl"] .sidebar-menu .has-dropdown > a::after {
  transform: scaleX(-1);
}


/* -----------------------------------------------------------------------------
   6. Charts (ApexCharts) RTL

   ApexCharts renders into SVG and does not read `dir`. The y-axis labels and
   legend must be repositioned; the plot itself is left alone so data is not
   mirrored (mirroring a chart would misrepresent the data).
   -------------------------------------------------------------------------- */

[dir="rtl"] .apexcharts-canvas {
  direction: ltr;
}

[dir="rtl"] .apexcharts-legend {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .apexcharts-legend-series {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.35rem;
}

[dir="rtl"] .apexcharts-legend-marker {
  margin-right: 0;
  margin-left: 0.35rem;
}

[dir="rtl"] .apexcharts-tooltip,
[dir="rtl"] .apexcharts-tooltip-series-group {
  direction: rtl;
  text-align: right;
}

/* Axis labels keep Latin digits upright inside the LTR canvas. */
[dir="rtl"] .apexcharts-xaxis-label,
[dir="rtl"] .apexcharts-yaxis-label {
  direction: ltr;
  unicode-bidi: embed;
}


/* -----------------------------------------------------------------------------
   7. Numerals, dates and tabular data

   Persian UI with Latin-digit data: numbers, dates, phone numbers and currency
   must stay LTR-ordered inside RTL text or they render scrambled.
   -------------------------------------------------------------------------- */

[dir="rtl"] .num,
[dir="rtl"] .ltr,
[dir="rtl"] time,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .text-ltr {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Numeric table columns: align and keep digit order stable. */
[dir="rtl"] td.num,
[dir="rtl"] th.num {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Tabular figures make numeric columns line up. */
.table td,
.table th {
  font-variant-numeric: tabular-nums;
}

/* Inputs that carry Latin data (phone, national id, dates, passwords). */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input.ltr {
  direction: ltr;
  text-align: right;
}

/* Jalali date picker: the project's own component, restyled only.
   Structure (visible readonly input + hidden input carrying `name`) is
   preserved exactly — see resources/views/components/date-picker.blade.php */
[dir="rtl"] .date-picker-group {
  position: relative;
}

/* Vertically centre the calendar glyph regardless of input height, replacing
   the legacy fixed `top: 16px` that assumed the old theme's input metrics. */
[dir="rtl"] .date-picker-group .date-icon {
  left: 0.75rem;
  right: auto;
  top: 67%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Match Bootstrap's .form-control box so a date field lines up with the
   inputs beside it in a grid row (requested by the library migration). */
[dir="rtl"] .date-picker-input {
  padding-left: 2.5rem;
  padding-right: 0.75rem;
  direction: ltr;
  text-align: right;
  width: 100%;
  min-height: calc(1.5em + 1rem + 2px);
  border: 1px solid var(--neutral-300, #d1d5db);
  border-radius: 8px;
  background-color: var(--input-bg, #fff);
  font-size: 1rem;
  line-height: 1.5;
}

[dir="rtl"] .calendar-dropdown {
  right: 0;
  left: auto;
  z-index: 99999;
}


/* -----------------------------------------------------------------------------
   8. Guest pages (login / forgot password)

   Scoped to `.auth-shell` so nothing here can reach the dashboard.
   -------------------------------------------------------------------------- */

/* EduDash's login.html leaves the split panel at its natural height, which is
   fine for a tall login form but leaves the short forgot-password form as a
   strip across the top of the viewport. `min-height` (not the template's
   `h-100vh`) fills the screen without clipping a form taller than the viewport
   on small phones. */
.auth-shell {
  min-height: 100vh;
}

/* The password eye.

   `.end-0` is a PHYSICAL `right: 0 !important` in the template's LTR Bootstrap
   build, and `.me-16` is `margin-inline-end`. Under dir="rtl" the two pin the
   button to the right edge — which is the START of the field, directly on top
   of the text, because §7 forces password inputs to direction: ltr with
   text-align: right. Move the button to the visual end and reserve room for it. */
[dir="rtl"] .auth-shell .toggle-password {
  right: auto !important;
  left: 0;
  margin-inline-end: 0 !important;
  margin-left: 1rem;
}

[dir="rtl"] .auth-shell .position-relative > .form-control {
  padding-left: 3rem;
}

/* Field-level validation copy sits directly under its input; the template only
   styles the colour, so the spacing is set here. */
.auth-shell .invalid-feedback {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}