/* ---------------------------------------------------------------------------
   Panel overrides on top of the Metronic bundles.
   Loaded last, so everything here wins without touching the theme sources.
   --------------------------------------------------------------------------- */

/* Vazirmatn variable font: one file covers weights 100-900. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/assets/fonts/vazirmatn.woff2') format('woff2-variations'),
         url('/assets/fonts/vazirmatn.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Persian UI switches the whole type stack; Latin text inside still renders
   correctly because Vazirmatn ships full Latin coverage. */
html[dir='rtl'] {
    --bs-font-sans-serif: 'Vazirmatn', 'Inter', Helvetica, sans-serif;
}

html[dir='rtl'] body,
html[dir='rtl'] .btn,
html[dir='rtl'] .form-control,
html[dir='rtl'] .form-select,
html[dir='rtl'] .menu,
html[dir='rtl'] .modal,
html[dir='rtl'] .dataTables_wrapper {
    font-family: var(--bs-font-sans-serif);
}

/* Persian reads better with slightly looser lines. */
html[dir='rtl'] body {
    line-height: 1.7;
}

/* Numbers, prices, SKUs and dates stay legible when they sit inside RTL text. */
.ltr-nums {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Jalali datepicker, restyled to match Metronic instead of its own theme.
   --------------------------------------------------------------------------- */
.datepicker-plot-area {
    font-family: var(--bs-font-sans-serif);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.475rem;
    box-shadow: var(--bs-dropdown-box-shadow);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1060;
}

.datepicker-plot-area .navigator .btn,
.datepicker-plot-area .table-days td span,
.datepicker-plot-area .table-months td span,
.datepicker-plot-area .table-years td span {
    color: var(--bs-gray-800);
    border-radius: 0.475rem;
}

.datepicker-plot-area .table-days td.selected span,
.datepicker-plot-area .table-months td.selected span,
.datepicker-plot-area .table-years td.selected span {
    background-color: var(--bs-primary);
    color: var(--bs-primary-inverse);
}

.datepicker-plot-area .table-days td:hover span,
.datepicker-plot-area .table-months td:hover span,
.datepicker-plot-area .table-years td:hover span {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
}

.datepicker-plot-area .table-days td.disabled span,
.datepicker-plot-area .table-days td.other-month span {
    color: var(--bs-gray-400);
}

/* ---------------------------------------------------------------------------
   Small panel-specific pieces.
   --------------------------------------------------------------------------- */

/* Image grid on the product form. */
.product-image-tile {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.475rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-gray-100);
}

.product-image-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-tile .tile-actions {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.35rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.product-image-tile:hover .tile-actions,
.product-image-tile:focus-within .tile-actions {
    opacity: 1;
}

.product-image-tile.is-primary {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}

/* Tabs that hold one input per language. */
.locale-tabs .nav-link {
    text-transform: none;
}

.locale-tabs .nav-link .locale-badge {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-inline-start: 0.35rem;
}

/* Field-level validation message, matching Metronic's own invalid-feedback. */
.form-error {
    color: var(--bs-danger);
    font-size: 0.925rem;
    font-weight: 500;
    margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Metronic dropzones without Dropzone.js: a native multi-file input is layered
   over the template's drop area so files post with the surrounding form. The
   visual result is exactly the template's.
   --------------------------------------------------------------------------- */
.panel-dropzone {
    position: relative;
}

.panel-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Names of the picked files, appended by panel.js under the drop area. */
.panel-dropzone-files {
    position: relative;
    z-index: 1;
    margin-top: 0.75rem;
    font-size: 0.925rem;
    color: var(--bs-gray-700);
}

/* --- impersonation bar ---------------------------------------------------
   Sticky rather than fixed: it must survive scrolling without the theme's own
   fixed header having to know about it. The amber is not a Metronic variable
   on purpose — this bar is meant to look like it does not belong. */
.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #b54708;
    border-bottom: 2px solid #7a2e0e;
}

[data-bs-theme="dark"] .impersonation-bar {
    background: #93370d;
}

/* --- server console ------------------------------------------------------
   A black box the guest draws into. Fixed height rather than growing with the
   guest's resolution, so the page does not jump around while a machine boots
   and changes mode two or three times. */
.console-screen {
    height: 70vh;
    min-height: 420px;
    background: #000;
    border-radius: .475rem;
    overflow: hidden;
}

.console-screen canvas {
    display: block;
}

/* --- charts in a right-to-left page --------------------------------------
   amCharts 5 paints to a <canvas>, and a 2D context inherits the page's CSS
   `direction`. Under direction: rtl the context's default textAlign of "start"
   means the RIGHT edge, so every label it draws is shifted left by its own
   width and the leading characters fall outside the plot: the dashboard's
   y-axis read ",000" where it should have read "1,000". amCharts measures text
   on a detached canvas, which stays LTR, so the measuring and the painting
   disagreed as well.

   These charts are left-to-right by design — a time series running from the
   older date to the newer one — so the fix is to keep their canvas LTR, not to
   mirror them. Persian labels inside a chart still render right-to-left,
   because bidi resolves each run on its own.

   ApexCharts needs nothing: it draws SVG and sets the direction on its own
   root. */
[dir="rtl"] canvas[class*="am5-"],
[dir="rtl"] .am5-html-container {
    direction: ltr;
}