/* ==========================================================================
   Rayaman Jalali — picker theme, twin inputs, converted-text helpers
   --------------------------------------------------------------------------
   Loaded by AdminAreaHeadOutput / ClientAreaHeadOutput BEFORE the vendored
   @majidh1/jalalidatepicker stylesheet (DESIGN 5.9), so every popup rule is
   written as "body jdp-container …": one specificity step above the vendor's
   "jdp-container …" rules, which would otherwise win by source order.
   Everything is namespaced --rj-* / .rj-* / jdp-*; nothing here touches WHMCS
   markup except through the classes the twin copies.

   Structure
     1. Tokens: stock Blend (Bootstrap 3) and Twenty-One (Bootstrap 4)
        fallbacks, Rayaman theme remap, OS dark fallback without the theme
     2. Popup (jdp-container / jdp-overlay)
     3. Shortcut strip (.rj-shortcuts)
     4. Twin inputs (.rj-jalali-input), validation, hint
     5. Converted text (.rj-greg, tabular figures) and chart hosts
     6. Motion + print
   ========================================================================== */


/* 1. Tokens ------------------------------------------------------------- */

:root {
  /* Stock Blend = Bootstrap 3 defaults (Open Sans page, #337ab7 primary) */
  --rj-bg: #fff;
  --rj-fg: #333;
  --rj-border: #d7d7d7;
  --rj-muted: #f5f5f5;
  --rj-muted-fg: #777;
  --rj-accent: #e9eef5;
  --rj-primary: #337ab7;
  --rj-primary-fg: #fff;
  --rj-destructive: #a94442;
  --rj-radius: 4px;
  --rj-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  /* Persian-capable stack first: Blend/Twenty-One only ship Open Sans, whose
     Arabic-script fallback is whatever the OS picks. */
  --rj-font: "Vazirmatn", "Vazir", "IRANSans", Tahoma, "Segoe UI", "Open Sans", Roboto, Arial, sans-serif;
  /* Bootstrap modals sit at 1050; the picker JS also sets this inline. */
  --rj-z: 1100;
}

/* Twenty-One marks its body with primary-bg-color: Bootstrap 4 palette there */
body.primary-bg-color {
  --rj-fg: #212529;
  --rj-border: #ced4da;
  --rj-muted-fg: #6c757d;
  --rj-accent: #e9ecef;
  --rj-primary: #007bff;
  --rj-destructive: #dc3545;
  --rj-radius: 0.25rem;
}

/* Rayaman theme active: inherit its tokens, so dark mode comes for free.
   The theme loads Vazirmatn on every page but leads with it only under
   dir=rtl; the popup is Persian-only, so it always leads here. */
html.rayaman-theme,
html.rayaman-theme body {
  --rj-bg: var(--popover, #fff);
  --rj-fg: var(--popover-foreground, #171717);
  --rj-border: var(--border, #e5e5e5);
  --rj-muted: var(--muted, #f5f5f5);
  --rj-muted-fg: var(--muted-foreground, #737373);
  --rj-accent: var(--accent, #f5f5f5);
  --rj-primary: var(--primary, #171717);
  --rj-primary-fg: var(--primary-foreground, #fafafa);
  --rj-destructive: var(--destructive, #d4183d);
  --rj-radius: var(--radius-md, 0.5rem);
  --rj-shadow: var(--shadow-md, 0 4px 12px -2px rgb(0 0 0 / 0.08));
  --rj-font: "Vazirmatn", var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

/* No OS-dark fallback on purpose: stock Blend and Twenty-One are always light, so a
   dark popup would sit on a white page. Dark mode arrives through the theme tokens. */


/* 2. Popup -------------------------------------------------------------- */

body jdp-container {
  --jdp-day-size: 40px;
  --jdp-color-0: var(--rj-bg);
  --jdp-color-1: var(--rj-muted);
  --jdp-color-2: var(--rj-accent);
  --jdp-color-3: var(--rj-border);
  --jdp-color-4: var(--rj-muted-fg);
  --jdp-color-5: var(--rj-fg);
  --jdp-primary: var(--rj-primary);
  --jdp-red: var(--rj-destructive);
  direction: rtl;
  z-index: var(--rj-z);
  font-family: var(--rj-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rj-fg);
  border: 1px solid var(--rj-border);
  border-radius: var(--rj-radius);
  /* The vendor CSS fakes a border with four 1px shadows; a real border plus
     the page's elevation shadow reads correctly on dark backgrounds too. */
  box-shadow: var(--rj-shadow);
}
html.rayaman-theme[data-rayaman-density="compact"] body jdp-container { --jdp-day-size: 36px; }

body jdp-container .jdp-years,
body jdp-container .jdp-months { font-size: 105%; }
body jdp-container .jdp-year select,
body jdp-container .jdp-month select,
body jdp-container .jdp-year input { font-weight: 500; color: var(--rj-fg); }
body jdp-container .jdp-icon-plus,
body jdp-container .jdp-icon-minus { border-radius: var(--rj-radius); color: var(--rj-muted-fg); fill: var(--rj-muted-fg); }
body jdp-container .jdp-days-header { border-radius: var(--rj-radius); }
body jdp-container .jdp-day-name { color: var(--rj-muted-fg); font-weight: 600; }
/* Today must be findable at a glance: primary ring instead of the grey one */
body jdp-container .jdp-day.today { border-color: var(--rj-primary); font-weight: 600; }
body jdp-container .jdp-day.selected { color: var(--rj-primary-fg) !important; }
body jdp-container .jdp-btn-today,
body jdp-container .jdp-btn-empty,
body jdp-container .jdp-btn-close { color: var(--rj-primary-fg); border-radius: var(--rj-radius); padding: 0.3em 0.8em; }
body jdp-container .jdp-btn-today:hover,
body jdp-container .jdp-btn-empty:hover,
body jdp-container .jdp-btn-close:hover { filter: brightness(1.1); }
body jdp-container .jdp-time-container .jdp-time select { border-radius: var(--rj-radius); }

/* Blend's RTL-less layout: keep the bottom-sheet overlay above the modal too */
body jdp-overlay { z-index: calc(var(--rj-z) - 1); }


/* 3. Shortcut strip ------------------------------------------------------ */

body jdp-container .rj-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px 2px;
  margin-top: 4px;
  border-top: 1px solid var(--rj-border);
  direction: rtl;
}
body jdp-container .rj-shortcuts > * {
  -webkit-appearance: none;
  appearance: none;
  font: 12px/1.4 var(--rj-font);
  padding: 2px 10px;
  margin: 0;
  border: 1px solid var(--rj-border);
  border-radius: 999px;
  background: var(--rj-muted);
  color: var(--rj-fg);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.1s, border-color 0.1s;
}
body jdp-container .rj-shortcuts > *:hover { background: var(--rj-accent); border-color: var(--rj-muted-fg); }
body jdp-container .rj-shortcuts > *:focus-visible { outline: 2px solid var(--rj-primary); outline-offset: 1px; }
body jdp-container .rj-shortcuts > .active { background: var(--rj-primary); border-color: var(--rj-primary); color: var(--rj-primary-fg); }


/* 4. Twin inputs --------------------------------------------------------- */

/* The twin always holds ASCII YYYY/MM/DD; an RTL page would otherwise
   reorder "A - B" ranges, so the value box is LTR while alignment follows
   the page. */
.rj-jalali-input {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
html[dir="rtl"] .rj-jalali-input { text-align: right; }

/* Blend keys width and icon padding on these classes (css/all.css); the twin
   carries them, but repeat the values so the layout survives without Blend
   (blend-new preview, third-party admin templates). */
.rj-jalali-input.date-picker-single,
.rj-jalali-input.date-picker-single-no-range,
.rj-jalali-input.date-picker,
.rj-jalali-input.datepick { max-width: 135px; }
.rj-jalali-input.date-picker-single.time,
.rj-jalali-input.date-picker-single-no-range.time { max-width: 170px; }
.rj-jalali-input.date-picker-search { max-width: 250px; } /* 'YYYY/MM/DD - YYYY/MM/DD' + the icon inset needs more than Blend's 215px */
/* The twin is direction:ltr, so its own inline-start is always the left; the icon
   follows the PAGE direction (Blend: left; the theme in RTL: inset-inline-start = right). */
.date-picker-prepend-icon .rj-jalali-input { padding-left: 38px; }
html[dir="rtl"] .date-picker-prepend-icon .rj-jalali-input {
  padding-left: 0.625rem !important; /* beats the theme's padding-inline-start, whichever sheet loads last */
  padding-right: 38px !important;
}

/* Validation: destructive ring, kept while focused so the message reads */
.rj-jalali-input.rj-invalid,
.rj-jalali-input.rj-invalid:focus {
  border-color: var(--rj-destructive);
  box-shadow: 0 0 0 1px var(--rj-destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rj-destructive) 25%, transparent);
}
.rj-shake { animation: rj-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* Three-second caption under the twin ("Gregorian date detected", errors) */
.rj-hint {
  display: block;
  margin-top: 2px;
  font: 0.75rem/1.3 var(--rj-font);
  color: var(--rj-muted-fg);
  animation: rj-hint-in 0.15s ease-out;
}
.rj-hint.rj-hint-error { color: var(--rj-destructive); }
.rj-hint[hidden] { display: none; }


/* 5. Converted text + charts -------------------------------------------- */

/* Inline Gregorian twin of a converted date: muted, LTR and isolated so the
   pair never reorders inside an RTL sentence. */
.rj-greg {
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline-start: 0.25em;
  color: var(--rj-muted-fg);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Converted leaves (tooltip carriers, pickers, DataTables footers) keep
   tabular figures so Persian and Latin digits line up in columns. */
.rj-date,
[data-rj-tip],
.dataTables_info,
.pagination { font-variant-numeric: tabular-nums; }

/* Chart hosts stay LTR: canvas/SVG axes are laid out physically and the
   labels are already digit-converted and isolated by the JS layer. */
.rj-canvas-parent,
[id^="chartcont"],
.google-visualization-tooltip,
:where(div, td, figure, section):has(> canvas) { direction: ltr; }
.google-visualization-tooltip { font-family: var(--rj-font); }


/* 6. Motion + print ------------------------------------------------------- */

@keyframes rj-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@keyframes rj-hint-in { from { opacity: 0; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  body jdp-container,
  .rj-shake,
  .rj-hint { animation: none; }
}

@media print {
  body jdp-container,
  body jdp-overlay,
  .rj-shortcuts,
  .rj-hint { display: none !important; }
  .rj-jalali-input { box-shadow: none; }
}