/*
 * Reskin CSS for classes that jQuery/Select2/the Persian datepicker/jQuery Unobtrusive Validation
 * inject at runtime (or that ASP.NET Core tag helpers add without the literal class name ever
 * appearing as a string in a .cshtml/.js source file). Tailwind's build only keeps @layer rules
 * whose selector text is found by scanning the project's content globs (Views/**, Areas/**,
 * wwwroot/js/**) -- none of these classes are ever typed there, they only exist once the DOM is
 * built, so Tailwind silently deleted every rule below when they lived in app.css's @layer
 * components/@layer base. Kept here instead, loaded as a plain stylesheet with no build step, so
 * nothing can purge it. Uses the same --clr-* custom properties as app.css (Restonex.Web/wwwroot/
 * css/app.css) so it still tracks the light/dark theme toggle.
 */

/* asp-validation-summary / asp-validation-for render their wrapper even with no errors;
   ASP.NET Core's tag helpers add these classes to toggle visibility themselves. */
.validation-summary-valid,
.field-validation-valid {
    display: none;
}

/* Select2 reskin -- keep the mandated Select2 widget (AGENTS.md), just match its accent/
   radius/spacing to the rest of the theme instead of the library's default blue. The library's
   own CSS hard-codes a white selection box and dropdown, so background/text also need setting
   explicitly here -- not just border/accent -- or dark theme leaves a white box behind. */
.select2-container--default .select2-selection--single {
    height: 38px;
    border-radius: 0.5rem;
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-inline-end: 0.5rem;
    padding-inline-start: 0.75rem;
    font-size: 0.875rem;
    color: var(--clr-text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
/* The multi-select (and the tag editor built on it) needs the same typography the single variant
   gets above -- Select2 styles only `--single`, so `--multiple` was left at the 16px body default
   while every .form-control around it renders at 14px. The explicit line-height matters more than
   the size: at `normal`, IRANYekanX's ascenders/descenders overflow the line box and the chips'
   own background clips the glyphs. Heights are budgeted to land on the same 38px as
   .form-control: 4px top margin + 26px line + 2px chip border + 4px bottom padding + 2px
   container border. */
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    padding: 0 0.25rem 0.25rem;
    border-radius: 0.5rem;
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
    /* Must sit on the container, not just its children: this is the block that establishes the
       line box, so its own strut (16px at `normal`, i.e. IRANYekanX's tall default metrics) is
       what set the height -- an empty box measured 56px against .form-control's 38px. At 26px the
       strut matches the chips, so the line box lands on 32 and 32+4+2 = the same 38. */
    font-size: 0.875rem;
    line-height: 1.625rem;
}
/* Nothing to set here, and specifically NOT horizontal padding: Select2's JS gives the inline
   search field `width: 100%`, which resolves against this <ul>'s containing block, so any padding
   added here makes the field one line too wide to fit beside it and it wraps onto a second line --
   an empty editor measured 62px instead of 38px. Horizontal inset belongs on the container above. */
/* `font-family: sans-serif` is hard-coded on this field by the library, so what you type lands in
   the browser's default sans (Arial here) instead of IRANYekanX -- visibly a different typeface
   from the chips right beside it. Everything else on the page inherits the body font. */
.select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0.25rem;
    height: 1.625rem;
    line-height: 1.625rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--clr-text);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary) 20%, transparent);
}
/* No `padding` shorthand here on purpose: the library reserves the × button's slot with
   `padding-left: 20px` on the chip and then places the button at `position: absolute; left: 0`.
   Overwriting the shorthand removes that reservation and drops the × straight on top of the
   label. Only the properties that actually need theming are touched. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.25rem;
    line-height: 1.625rem;
    border-radius: 0.375rem;
    background-color: var(--clr-bg);
    border-color: var(--clr-border);
    color: var(--clr-text);
}
/* The button's #999 text, #aaa divider and #f1f1f1/#333 hover are all fixed by the library and
   read as washed-out or inverted on the dark surface. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--clr-surface);
    color: var(--clr-danger);
}

/* Options already chosen. Select2 hard-codes them to #ddd at a specificity (0,3,0) that the
   generic .select2-results__option colour rule below can't reach, so on the dark theme they kept
   the light grey background while inheriting near-white text -- ~1.1:1 contrast, effectively
   invisible. Must stay ABOVE the --highlighted rule: both are (0,3,0), so source order is what
   lets hovering still win. */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--clr-bg);
    color: var(--clr-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--clr-primary);
    color: #fff;
}
/* Dark theme flips --clr-primary to teal-400, which is far too light to carry white text. */
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--clr-bg);
}
.select2-dropdown {
    border-radius: 0.5rem;
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
    color: var(--clr-text);
}
.select2-search--dropdown .select2-search__field {
    border-color: var(--clr-border);
    background-color: var(--clr-surface);
    color: var(--clr-text);
}
.select2-results__option {
    color: var(--clr-text);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--clr-text-muted);
}

/* Persian datepicker reskin -- swap the library's default blue for the theme accent. */
.pdp-day-selected,
.pdp-day-selected:hover {
    background-color: var(--clr-primary) !important;
}
.pdp-day-today {
    box-shadow: inset 0 0 0 1px var(--clr-primary) !important;
}
.pdp-year-input:focus {
    box-shadow: inset 0 0 0 2px var(--clr-primary) !important;
}
.pdp-link {
    color: var(--clr-primary) !important;
}
.pdp-day:hover {
    background-color: var(--clr-bg) !important;
    color: var(--clr-primary) !important;
}

/* ── GLightbox ──────────────────────────────────────────────────────────────
   The library positions its buttons with physical left/right and assumes an LTR
   document. Every page here is dir="rtl", which mirrors those coordinates and puts the
   arrows on the wrong sides. The overlay is therefore forced back to LTR and each button
   hard-pinned with position:fixed, so the page's bidi resolution cannot move them.
   (Docs/Third-Party-Libraries.md; the library's own guide calls this out as the one
   override an RTL project must not skip.)

   Icons come from Font Awesome via ::before. GLightbox 3.x renders its own inline SVG and
   ignores the prevHTML/nextHTML/closeHTML options entirely, so the SVG is hidden and the
   glyph injected instead -- passing HTML to those options looks like it should work and
   silently does nothing.
─────────────────────────────────────────────────────────────────────────── */

.glightbox-container {
    direction: ltr;
}

.glightbox-container .gnext,
.glightbox-container .gprev,
.glightbox-container .gclose {
    position: fixed;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    opacity: 1;
    visibility: visible;
}

.glightbox-container .gclose {
    top: 15px;
    right: 15px;
    left: auto;
    width: 40px;
    height: 40px;
}

.glightbox-container .gprev {
    top: 50%;
    left: 15px;
    right: auto;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

.glightbox-container .gnext {
    top: 50%;
    right: 15px;
    left: auto;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
}

.glightbox-container .gprev svg,
.glightbox-container .gnext svg,
.glightbox-container .gclose svg {
    display: none;
}

.glightbox-container .gprev::before,
.glightbox-container .gnext::before,
.glightbox-container .gclose::before {
    /* The family name the bundled all.min.css actually declares -- FA 7. "Font Awesome 6 Free"
       trails it so a later swap to the free build keeps working rather than silently losing
       every lightbox icon. */
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    color: #101817;
}

/* fa-chevron-left / fa-chevron-right / fa-xmark. The arrows keep their physical meaning:
   the overlay is LTR, so left really is "previous". */
.glightbox-container .gprev::before { content: "\f053"; }
.glightbox-container .gnext::before { content: "\f054"; }
.glightbox-container .gclose::before { content: "\f00d"; }

.glightbox-container .gbtn:hover,
.glightbox-container .gbtn:focus-visible {
    background: #fff;
}

@media (min-width: 992px) {
    .glightbox-container .gclose,
    .glightbox-container .gprev,
    .glightbox-container .gnext {
        width: 52px;
        height: 52px;
    }
}

/* The caption bar is driven by the anchor's title/data-title. Thumbnails keep a title as a
   hover tooltip, but repeating it under the enlarged image adds nothing. */
.glightbox-container .gslide-description,
.glightbox-container .gdesc-inner {
    display: none;
}