/* ---------------------------------------------------------------------------
   Portal design layer.

   wwwroot/assets/css/demo_1/style.css is a 982 KB pre-compiled vendor sheet
   (NobleUI, Bootstrap 4) that has been hand-patched. Its SCSS sources in
   wwwroot/assets/scss/ are stale and cannot be rebuilt -- they @import from a
   node_modules that does not exist in this repo. Both are READ-ONLY.

   This file is loaded last, so source order wins ties. Match the vendor's
   selector exactly and let order do the work. !important is reserved for the
   handful of places the vendor itself uses it:

     - Bootstrap 4 utility classes (.text-muted, .text-danger, .text-md-*)
     - font-family:"iransans"!important on button/input/select (9464, 9486, 9492)
     - .sidebar-dark ... .nav-link{color:#bfc3ce!important} (31725)
     - .text-monospace (21484) and div.tagsinput span.tag (39168)
     - body,html{padding-right:0!important} (29257)
     - perfect-scrollbar's .ps and .rtl .ps>.ps__rail-y

   Anywhere else, an !important here means the selector is wrong.

   Line numbers in comments refer to assets/css/demo_1/style.css.
   --------------------------------------------------------------------------- */


/* ===========================================================================
   1. Font
   ---------------------------------------------------------------------------
   The portal shipped with IRANSansWeb_Light only -- a single 300 face -- while
   the template asks for 600 on headings, bold on table headers and 900 on the
   sidebar brand. Every one of those was synthetically emboldened, which on
   Persian smears the letterforms. Vazirmatn is a variable font covering
   100-900 in one file, it is OFL licensed (see vazirmatn/Vazirmatn-OFL.txt)
   and it is what the web and Godot clients already use.

   Do not subset it: "Vazirmatn" is a Reserved Font Name under the OFL, so a
   subset would have to be renamed. A lossless woff2 recompression is welcome
   if the tooling is ever available -- drop the file next to the ttf and add
   it as the first src entry.
   =========================================================================== */

@font-face {
    font-family: "Vazirmatn";
    src: url("../assets/fonts/vazirmatn/vazirmatn-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* ===========================================================================
   2. Tokens
   =========================================================================== */

:root {
    /* Palette -- the same identity, tightened. Hues match the vendor sheet. */
    --pi-primary: #727cf5;
    --pi-primary-600: #5a63e8;
    --pi-primary-050: #eef0fe;
    --pi-success: #10b759;
    --pi-warning: #fbbc06;
    --pi-danger: #ff3366;

    /* Ink. The vendor's #000 body text is too hard against a #f9fafb canvas. */
    --pi-ink: #1b1f2b;
    --pi-ink-2: #4a5163;
    --pi-muted: #6b7280;

    /* Surfaces */
    --pi-surface: #ffffff;
    --pi-canvas: #f6f8fb;
    --pi-line: #e8ebf1;
    --pi-line-soft: #f2f4f9;
    --pi-line-strong: #d8dde7;

    /* Dark sidebar */
    --pi-sb-bg: #0c1427;
    --pi-sb-line: #1c2740;
    --pi-sb-link: #bfc3ce;
    --pi-sb-hover: rgba(255, 255, 255, .06);
    --pi-sb-active: rgba(114, 124, 245, .18);

    /* Radii */
    --pi-r-sm: 6px;
    --pi-r: 10px;
    --pi-r-lg: 14px;
    --pi-r-pill: 999px;

    /* Spacing rhythm, 4px base */
    --pi-s-1: 4px;
    --pi-s-2: 8px;
    --pi-s-3: 12px;
    --pi-s-4: 16px;
    --pi-s-5: 24px;
    --pi-s-6: 32px;
    --pi-s-7: 48px;

    /* Elevation. Layered and low-alpha, replacing the vendor's single
       0 0 10px rgba(183,192,206,.2) halo, which reads as a glow not a lift. */
    --pi-e-1: 0 1px 2px rgba(16, 24, 40, .05);
    --pi-e-2: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --pi-e-3: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04);
    --pi-e-4: 0 16px 40px rgba(16, 24, 40, .14), 0 4px 10px rgba(16, 24, 40, .06);

    --pi-focus: 0 0 0 3px rgba(114, 124, 245, .32);

    --pi-t-fast: 120ms cubic-bezier(.2, 0, .2, 1);
    --pi-t: 180ms cubic-bezier(.2, 0, .2, 1);

    /* Shell metrics, mirroring the vendor's magic numbers so nothing desyncs. */
    --pi-navbar-h: 60px;
    --pi-sidebar-w: 240px;
    --pi-sidebar-folded-w: 70px;

    --pi-font: "Vazirmatn", "iransans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pi-font-num: "Vazirmatn", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
    --pi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}


/* ===========================================================================
   3. Base
   ---------------------------------------------------------------------------
   The four rules that used to live in this file are gone on purpose:

     html{font-size:14px} + the 768px override -- the desktop half was a no-op,
       and the only live effect was shrinking every rem in a sheet authored
       against a 16px root by 12.5% below 768px.
     html{position:relative;min-height:100%} and body{margin-bottom:60px} --
       the old sticky-footer recipe. NobleUI already uses flex
       (.page-wrapper{min-height:100vh;display:flex} + .footer{margin-top:auto}),
       so all these did was add 60px of dead scroll to every page.
     .btn:focus{box-shadow:0 0 0 .1rem white,0 0 0 .25rem #258cfb} -- wrong hue,
       fired on mouse-down rather than keyboard focus, and the white-then-blue
       double ring read as a rendering bug. See section 9.
   =========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--pi-canvas);
    color: var(--pi-ink);
    font-size: .875rem;
    /* Persian needs more leading than the vendor's 1.5. */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(114, 124, 245, .18);
    color: var(--pi-ink);
}

/* Latin and numeric runs inside Persian prose. unicode-bidi:isolate stops a
   trailing "/" or "-" jumping to the wrong end of the string. */
.eng-num {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: var(--pi-font-num);
    font-variant-numeric: tabular-nums;
}

/* Scrollbars. Deliberately not applied to .ps -- perfect-scrollbar sets
   overflow:hidden!important and draws its own rails, so the native
   pseudo-elements never fire there anyway. */
* {
    scrollbar-width: thin;
    scrollbar-color: #c6ccd9 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c6ccd9;
    border-radius: var(--pi-r-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #a9b2c4;
    background-clip: padding-box;
}


/* ===========================================================================
   4. Typography
   ---------------------------------------------------------------------------
   Tier 1 of the font override. The vendor hard-sets font-family on ~14
   *element-level* selectors (9311, 9318, 9391, 9441, 9458, 9534, 9611, 29229,
   30215). Those are not inheritable, so setting html/body alone would not
   reach them -- they have to be listed. No !important needed: equal or higher
   specificity plus later source order.
   =========================================================================== */

html, body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, a, table, label, textarea,
.btn, .form-control, .card-title, .nav-link, .modal-title,
.footer, .tooltip, .popover {
    font-family: var(--pi-font);
}

/* Tier 2: the vendor's font-family:"iransans"!important rules at 9464, 9486,
   9492 and 39168. Same specificity plus later source order beats them. */
button, input, select, optgroup, textarea {
    font-family: var(--pi-font) !important;
}

div.tagsinput span.tag {
    font-family: var(--pi-font) !important;
}

/* .text-monospace is "iransans, <mono stack> !important" (21484), which means
   it has not actually been monospace. Restore it. */
.text-monospace {
    font-family: var(--pi-font-mono) !important;
}

/* NobleUI's scale is a marketing scale (h1:3rem ... h4:1.4rem). _Layout uses
   h4 for the page title, so retune to an admin scale. */
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: 1.4;
    color: var(--pi-ink);
    margin-bottom: 0;
}

p {
    line-height: 1.7;
}

small, .small {
    font-size: .75rem;
}

/* Bootstrap utility -- !important is required to match. */
.text-muted {
    color: var(--pi-muted) !important;
}

a {
    color: var(--pi-primary);
}

a:hover {
    color: var(--pi-primary-600);
}

/* text-transform:uppercase is a no-op on Persian but silently mangles the
   Latin strings that do appear -- usernames, "AdminPanel", column headers. */
.card .card-title,
.table thead th,
.sidebar .sidebar-body .nav .nav-item.nav-category {
    text-transform: none;
}


/* ===========================================================================
   5. Shell -- page content, navbar, footer
   =========================================================================== */

.main-wrapper .page-wrapper {
    background: var(--pi-canvas);
}

.main-wrapper .page-wrapper .page-content {
    padding: var(--pi-s-5) var(--pi-s-5) var(--pi-s-6);
}

@media (max-width: 767px) {
    .main-wrapper .page-wrapper .page-content {
        padding: var(--pi-s-4);
    }
}

/* _Layout carries a `page-header` class on the title row so this can target it
   honestly instead of chaining five utility classes. */
.page-content > .page-header {
    margin-bottom: var(--pi-s-5);
}

.page-content > .page-header h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.navbar {
    background: var(--pi-surface);
    border-bottom: 1px solid var(--pi-line-soft);
    /* The vendor's 3px 0 10px casts sideways, and the wrong way in RTL. */
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.navbar .navbar-content {
    padding-left: var(--pi-s-5);
    padding-right: var(--pi-s-5);
}

.footer {
    background: transparent;
    border-top: 1px solid var(--pi-line-soft);
    padding: var(--pi-s-4) var(--pi-s-5);
    font-size: .75rem;
    color: var(--pi-muted);
}

.footer p {
    margin-bottom: 0;
}

/* text-md-left / text-md-right are physical Bootstrap utilities. */
.rtl .footer .text-md-left { text-align: right !important; }
.rtl .footer .text-md-right { text-align: left !important; }


/* ===========================================================================
   6. Sidebar
   ---------------------------------------------------------------------------
   The one structural change: the active item becomes a pill instead of the 3px
   ::before bar. That bar is positioned at left:-25px (31603) and right:-25px
   (31963), with the sub-menu dots at -29px (31645, 31976) -- four magic
   numbers coupled to the .nav padding of 25px in two directions. A pill
   decouples them, so the padding can move without desyncing anything.
   =========================================================================== */

.sidebar-dark .sidebar .sidebar-header,
.sidebar-dark .sidebar .sidebar-body {
    background: var(--pi-sb-bg);
}

.sidebar-dark .sidebar .sidebar-header {
    border-bottom: 1px solid var(--pi-sb-line);
    border-right: 1px solid var(--pi-sb-line);
}

.sidebar-dark.rtl .main-wrapper .sidebar .sidebar-header {
    border-left: 1px solid var(--pi-sb-line);
}

.sidebar-dark .sidebar .sidebar-body {
    /* The vendor's 0 8px 10px halo shows as a smear against the dark panel. */
    box-shadow: none;
    border-right: 1px solid var(--pi-sb-line);
}

.sidebar .sidebar-header .sidebar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.2px;
}

.sidebar-dark .sidebar .sidebar-header .sidebar-brand {
    color: #ffffff;
}

.sidebar .sidebar-body .nav {
    padding: 20px 16px 48px;
}

.sidebar .sidebar-body .nav .nav-item .nav-link {
    height: auto;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--pi-r-sm);
    transition: background-color var(--pi-t), color var(--pi-t);
}

.sidebar .sidebar-body .nav .nav-item .nav-link .link-icon {
    width: 18px;
    height: 18px;
}

/* The vendor pins the link colour with !important at 31725, so hover and
   active have to match it. */
.sidebar-dark .sidebar .sidebar-body .nav .nav-item:hover .nav-link,
.sidebar-dark .sidebar .sidebar-body .nav .nav-item.active .nav-link {
    color: #ffffff !important;
}

.sidebar .sidebar-body .nav .nav-item:hover .nav-link {
    background: var(--pi-sb-hover);
}

.sidebar .sidebar-body .nav .nav-item.active .nav-link {
    background: var(--pi-sb-active);
    font-weight: 500;
}

.sidebar-dark .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title,
.sidebar-dark .sidebar .sidebar-body .nav .nav-item.active .nav-link .link-title {
    color: inherit;
}

/* The pill replaces the bar in both directions. */
.sidebar .sidebar-body .nav .nav-item.active .nav-link::before {
    display: none;
}

/* The vendor nudges .link-title by 1px on hover (31590), which is visible
   jitter -- and in RTL it applies the margin to the wrong side entirely.
   (0,8,0) is what it takes to beat the RTL rule at 31953. */
.sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title {
    margin-left: 30px;
}

.rtl .main-wrapper .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title {
    margin-left: 0;
    margin-right: 30px;
}

/* nav-category has height:15px pinned (31572), which clips Persian descenders
   in "اصلی". */
.sidebar .sidebar-body .nav .nav-item.nav-category {
    height: auto;
    line-height: 1.7;
    padding: 0 10px;
    margin-bottom: 6px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.sidebar-dark .sidebar .sidebar-body .nav .nav-item.nav-category {
    color: #6b7794;
}

/* _LoginPartial renders the signed-in username as a .nav-category inside a
   <form>. Give it a chip rather than shouting it in tracked caps. */
.sidebar .sidebar-body .nav form .nav-item.nav-category {
    padding: 10px;
    margin: 0 0 var(--pi-s-4);
    background: var(--pi-sb-hover);
    border-radius: var(--pi-r-sm);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
}

.sidebar-dark .sidebar .sidebar-body .nav form .nav-item.nav-category {
    color: #ffffff;
}

/* Folded, the vendor replaces every nav-category with a 5px dot (31867) as a
   "a section starts here" marker. On the username that marker means nothing,
   so the chip leaves a stray dot floating above the icons. */
.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav form .nav-item.nav-category,
.sidebar-folded:not(.open-sidebar-folded) .sidebar .sidebar-body .nav form .nav-item.nav-category::before {
    display: none;
}

/* Sub-menu: a guide line instead of the dot-per-item, which removes the last
   two coupled offsets (31645, 31976). */
.sidebar .sidebar-body .nav.sub-menu {
    padding: 4px 0 12px 12px;
    margin-left: 22px;
    border-left: 1px solid var(--pi-sb-line);
}

.rtl .main-wrapper .sidebar .sidebar-body .nav.sub-menu {
    padding: 4px 12px 12px 0;
    margin-left: 0;
    margin-right: 22px;
    border-left: 0;
    border-right: 1px solid var(--pi-sb-line);
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link {
    height: auto;
    min-height: 32px;
    font-size: .8125rem;
}

.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link::before {
    display: none;
}

/* Another 3px jitter, wrong side in RTL (31680). */
.sidebar .sidebar-body .nav.sub-menu .nav-item:hover .nav-link {
    margin-left: 0;
}


/* ===========================================================================
   7. Cards, tables
   =========================================================================== */

/* The vendor emits -webkit-/-moz-/-ms-box-shadow aliases alongside the
   standard property (35820). No current engine reads the prefixed forms, so
   overriding box-shadow alone is enough. */
.card {
    border: 1px solid var(--pi-line-soft);
    border-radius: var(--pi-r);
    background: var(--pi-surface);
    box-shadow: var(--pi-e-2);
    transition: box-shadow var(--pi-t), border-color var(--pi-t);
}

.card .card-body {
    padding: var(--pi-s-5);
}

@media (max-width: 575.98px) {
    .card .card-body {
        padding: var(--pi-s-4);
    }
}

.card .card-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pi-ink);
    margin-bottom: var(--pi-s-4);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--pi-line-soft);
    padding: var(--pi-s-4) var(--pi-s-5);
}

.modal-content {
    border: 0;
    border-radius: var(--pi-r-lg);
    box-shadow: var(--pi-e-4);
}

.modal-backdrop.show {
    opacity: .45;
}

.dropdown-menu {
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-r);
    box-shadow: var(--pi-e-3);
    padding: var(--pi-s-1) 0;
}

/* Tables.
   Two facts about this codebase drive the selectors below:
     - 23 of the 26 tables put `table-responsive` on the <table> itself, and
       only 3 use <thead>. So header cells usually live at
       tbody > tr:first-child > th and have to be targeted both ways.
     - :not(.table-condensed) keeps all of this away from
       bootstrap-datepicker's calendar grid, which is also a .table. */
.table:not(.table-condensed) {
    margin-bottom: 0;
    color: var(--pi-ink);
}

.table:not(.table-condensed) thead th,
.table:not(.table-condensed) > tbody > tr:first-child > th {
    background: #f7f8fb;
    border-top: 0;
    border-bottom: 1px solid var(--pi-line);
    padding: .75rem 1rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pi-ink-2);
    text-transform: none;
    white-space: nowrap;
}

.table:not(.table-condensed) th,
.table:not(.table-condensed) td {
    vertical-align: middle;
    /* The vendor's line-height:1 (37288) clips ی, ج and گ. */
    line-height: 1.5;
    padding: .7rem 1rem;
    border-top: 1px solid var(--pi-line-soft);
    white-space: nowrap;
}

.table:not(.table-condensed) td {
    font-size: .8125rem;
    color: var(--pi-ink-2);
    /* IDs and balances line up column-wise. */
    font-variant-numeric: tabular-nums;
}

/* No zebra striping: against RTL and eight-column tables it reads as noise,
   and hover already answers "which row am I on". */
.table:not(.table-condensed) > tbody > tr:hover > td {
    background: #fafbfe;
}

/* `table-responsive` on the <table> sets display:block, which drops the table
   formatting context so column widths come from anonymous boxes and drift.
   Fixing it in CSS avoids touching 23 views.

   Fallback path: keep the block scroll but restore a formatting context. */
table.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.table-responsive > thead,
table.table-responsive > tbody {
    display: table;
    width: 100%;
}

/* Preferred path: undo the anti-pattern and move the scroll up to the card. */
@supports selector(:has(*)) {
    .card-body:has(> table.table-responsive),
    .card-body:has(> form > table.table-responsive) {
        overflow-x: auto;
    }

    table.table-responsive {
        display: table;
        width: 100%;
        overflow-x: visible;
    }

    table.table-responsive > thead {
        display: table-header-group;
    }

    table.table-responsive > tbody {
        display: table-row-group;
    }
}


/* ===========================================================================
   8. Buttons, forms, alerts, pagination
   =========================================================================== */

.btn {
    border-radius: var(--pi-r-sm);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    padding: .5rem 1rem;
    transition: background-color var(--pi-t), border-color var(--pi-t),
                color var(--pi-t), box-shadow var(--pi-t), transform var(--pi-t-fast);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--pi-primary);
    border-color: var(--pi-primary);
}

.btn-primary:hover {
    background-color: var(--pi-primary-600);
    border-color: var(--pi-primary-600);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--pi-primary-600);
    border-color: var(--pi-primary-600);
}

/* .btn-xs is the action column in every list view; the vendor's .625rem is
   not readable in Persian. Selector matches the vendor's (0,2,0) at 33065. */
.btn.btn-xs {
    padding: .3rem .625rem;
    font-size: .75rem;
    border-radius: var(--pi-r-sm);
}

/* .form-control:focus at (0,2,0) beats the vendor's input:focus (0,1,1) at
   29146 and the box-shadow:none list at 29045 without !important. */
.form-control {
    height: auto;
    min-height: 38px;
    padding: .5rem .875rem;
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-r-sm);
    background-color: #fff;
    color: var(--pi-ink);
    font-size: .8125rem;
    line-height: 1.5;
    transition: border-color var(--pi-t), box-shadow var(--pi-t);
}

.form-control::placeholder {
    color: #a7aebc;
}

.form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--pi-line-strong);
}

.form-control:focus {
    border-color: var(--pi-primary);
    box-shadow: var(--pi-focus);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f4f6fa;
    color: #8b93a5;
}

textarea.form-control {
    min-height: 96px;
    line-height: 1.7;
    /* The vendor sets resize:none on every textarea (29040). */
    resize: vertical;
    overflow-x: auto;
}

.form-group {
    margin-bottom: var(--pi-s-4);
}

.form-group label,
label.control-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pi-ink-2);
    margin-bottom: .375rem;
    line-height: 1.6;
}

/* EditorTemplates/{Input,Box}.cshtml render .form-group.row with a col-* label. */
@media (min-width: 768px) {
    .form-group.row > label {
        padding-top: .55rem;
        margin-bottom: 0;
    }
}

/* Validation. .text-danger is a Bootstrap utility, hence !important. */
.text-danger,
.field-validation-error {
    color: var(--pi-danger) !important;
}

.form-control.input-validation-error {
    border-color: var(--pi-danger);
}

.form-control.input-validation-error:focus {
    box-shadow: 0 0 0 3px rgba(255, 51, 102, .25);
}

/* Stops the empty <ul> a clean asp-validation-summary emits from reserving
   vertical space, so no view needs a conditional around it. */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    background: rgba(255, 51, 102, .08);
    border: 1px solid rgba(255, 51, 102, .25);
    border-radius: var(--pi-r);
    padding: .75rem 1rem;
    margin-bottom: var(--pi-s-4);
    font-size: .8125rem;
}

.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* .form-check: the vendor pushes the label 1.75rem off the physical left
   (36202) and pins the input and its frame to left:0. That is the wrong side
   for every checkbox in the portal. */
.rtl .form-check .form-check-label {
    margin-left: 0;
    margin-right: 1.75rem;
}

.rtl .form-check .form-check-label input,
.rtl .form-check .form-check-label input[type="checkbox"] + .input-frame:before,
.rtl .form-check .form-check-label input[type="checkbox"] + .input-frame:after {
    left: auto;
    right: 0;
}

/* Alerts are bare text nodes throughout the portal, so no flex layout. */
.alert {
    border: 0;
    border-radius: var(--pi-r);
    padding: .875rem 1.125rem;
    font-size: .8125rem;
    box-shadow: var(--pi-e-1);
}

/* Bootstrap 4 joins pages with margin-left:-1px, which leaves a 1px seam on
   the wrong edge in RTL. */
.pagination {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-item .page-link {
    margin: 0;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-r-sm);
    background: #fff;
    color: var(--pi-ink-2);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--pi-t), border-color var(--pi-t), color var(--pi-t);
}

.pagination .page-item .page-link:hover {
    background: var(--pi-primary-050);
    border-color: #c9cdfb;
    color: var(--pi-primary);
}

.pagination .page-item.active .page-link {
    background: var(--pi-primary);
    border-color: var(--pi-primary);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    opacity: .5;
}


/* ===========================================================================
   9. Focus
   ---------------------------------------------------------------------------
   The vendor blanket-suppresses focus at a:focus,input:focus{outline:none}
   (0,1,1) at 29146 and button{outline:0} (0,0,1). Do NOT wrap these in
   :where() -- that would drop the specificity to (0,1,0) and lose. Writing
   the elements out matches the specificity and lets source order decide.
   =========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pi-primary);
    outline-offset: 2px;
    border-radius: var(--pi-r-sm);
}

.btn:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--pi-primary);
    outline-offset: 2px;
    box-shadow: var(--pi-focus);
}

/* Text inputs match :focus-visible on mouse focus too, and the ring in
   section 8 is already the affordance there. (0,2,0) beats (0,1,1). */
.form-control:focus-visible {
    outline: none;
}

/* Indigo on #0c1427 is illegible. */
.sidebar .sidebar-body .nav .nav-item .nav-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}


/* ===========================================================================
   10. RTL
   ---------------------------------------------------------------------------
   Policy: we do NOT remap Bootstrap 4's physical spacing utilities. .ml-2,
   .pl-md-0, .mr-sm-2 and friends appear across all 84 views plus 32 inline
   style attributes; flipping them globally would move things in views nobody
   is going to re-check. They get fixed per instance, in files we touch.

   What is worth having globally is below. The sidebar, footer and pagination
   RTL corrections live in their own sections, next to what they fix.
   =========================================================================== */

/* Bootstrap 4's input-group radii are physical. Used by _Layout's search box
   and the login password toggle. */
.rtl .input-group > .form-control:not(:last-child) {
    border-radius: 0 var(--pi-r-sm) var(--pi-r-sm) 0;
}

.rtl .input-group > .form-control:not(:first-child) {
    border-radius: var(--pi-r-sm) 0 0 var(--pi-r-sm);
}

.rtl .input-group-append > .btn,
.rtl .input-group-append > .input-group-text {
    border-radius: var(--pi-r-sm) 0 0 var(--pi-r-sm);
}

.rtl .input-group-prepend > .input-group-text {
    border-radius: 0 var(--pi-r-sm) var(--pi-r-sm) 0;
}

.rtl select.form-control {
    background-position: left .75rem center;
    padding-left: 2rem;
    padding-right: .875rem;
}


/* ===========================================================================
   11. Vendor plugins
   ---------------------------------------------------------------------------
   apexcharts, chartjs, tinymce, sweetalert2, DataTables, dropzone and
   fullcalendar all ship under assets/vendors/ but are used by zero views, so
   they are not defended here. The two that matter are select2 (Ticket/Edit)
   and bootstrap-datepicker (_Layout's search box).
   =========================================================================== */

/* The vendor groups .form-control with select2 in one selector list (36668),
   so restyling .form-control alone would leave two different input
   treatments side by side in the same form. Keep this in sync with
   .form-control above. */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--pi-line);
    border-radius: var(--pi-r-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    font-family: var(--pi-font);
}

.rtl .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 6px;
    right: auto;
}

.select2-dropdown {
    border-color: var(--pi-line);
    border-radius: var(--pi-r);
    box-shadow: var(--pi-e-3);
}

/* Chrome only -- the :not(.table-condensed) guard in section 7 already keeps
   our cell padding out of the calendar grid itself. */
.datepicker.datepicker-dropdown {
    border-radius: var(--pi-r);
    border-color: var(--pi-line);
    box-shadow: var(--pi-e-3);
}

.tooltip .tooltip-inner {
    border-radius: var(--pi-r-sm);
    font-size: .75rem;
    padding: .4rem .625rem;
}

/* perfect-scrollbar owns .sidebar-body and .content-nav-wrapper
   (template.js:42-47) -- never set overflow on them, only tint the rail. */
.ps > .ps__rail-y > .ps__thumb-y {
    background-color: #33405c;
}


/* ===========================================================================
   12. Sign-in page
   ---------------------------------------------------------------------------
   Scoped under .auth-page so none of it can reach the 83 signed-in views.
   The panel is a CSS gradient: the vendor's .auth-left-wrapper background is
   images/img6.jpg, a 392 KB stock photo (37783), and the sign-in page is not
   supposed to say anything about what this portal is for.
   =========================================================================== */

.auth-page {
    width: 100%;
}

.auth-page .auth-card {
    max-width: 900px;
    margin: 0 auto;
    border: 0;
    border-radius: var(--pi-r-lg);
    box-shadow: var(--pi-e-4);
    overflow: hidden;
}

.auth-page .auth-brand {
    position: relative;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--pi-s-7) var(--pi-s-5);
    background: linear-gradient(145deg, #3d47c9 0%, var(--pi-primary) 55%, #8f97f8 100%);
    color: #fff;
}

/* A soft light source, top-trailing. */
.auth-page .auth-brand::before {
    content: "";
    position: absolute;
    inset: -40% -30% auto -30%;
    height: 120%;
    background: radial-gradient(60% 60% at 70% 15%, rgba(255, 255, 255, .28), transparent 70%);
}

/* Texture without imagery. */
.auth-page .auth-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
            mask-image: linear-gradient(to top, #000, transparent 70%);
}

.auth-page .auth-brand > * {
    position: relative;
    z-index: 1;
}

.auth-page .auth-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--pi-s-5);
}

.auth-page .auth-mark svg {
    width: 24px;
    height: 24px;
}

.auth-page .auth-brand h3 {
    color: #fff;
    margin-bottom: var(--pi-s-2);
}

.auth-page .auth-brand p {
    color: rgba(255, 255, 255, .78);
    font-size: .8125rem;
    margin-bottom: 0;
}

.auth-page .auth-form {
    padding: var(--pi-s-7) var(--pi-s-6);
}

.auth-page .auth-form h4 {
    margin-bottom: var(--pi-s-2);
}

.auth-page .auth-lead {
    margin-bottom: var(--pi-s-5);
}

/* Reserve the widget's height so the card does not jump when it loads. */
.auth-page .auth-captcha {
    min-height: 65px;
    margin: var(--pi-s-4) 0;
}

.auth-page .auth-submit {
    height: 44px;
    font-size: .875rem;
}

.auth-page .auth-meta {
    margin: var(--pi-s-6) 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--pi-muted);
    font-variant-numeric: tabular-nums;
}

/* Both feather icons are rendered up front and swapped in CSS, so the toggle
   never has to re-run feather.replace(). */
.auth-page .auth-eye {
    border: 1px solid var(--pi-line);
    background: #fff;
    color: var(--pi-muted);
    padding: 0 .75rem;
}

.auth-page .auth-eye:hover {
    color: var(--pi-ink-2);
    background: #f7f8fb;
}

.auth-page .auth-eye svg {
    width: 17px;
    height: 17px;
}

.auth-page .auth-eye .feather-eye-off {
    display: none;
}

.auth-page .auth-eye.is-on .feather-eye {
    display: none;
}

.auth-page .auth-eye.is-on .feather-eye-off {
    display: inline;
}

@media (max-width: 767.98px) {
    /* The panel becomes a strip above the form. The heading and its line stay
       stacked inside .auth-brand-text -- as direct flex children of a row they
       would sit side by side and both wrap. */
    .auth-page .auth-brand {
        min-height: 0;
        padding: var(--pi-s-4) var(--pi-s-5);
        flex-direction: row;
        align-items: center;
    }

    .auth-page .auth-brand::after {
        display: none;
    }

    .auth-page .auth-brand h3 {
        font-size: 1.0625rem;
    }

    .auth-page .auth-brand p {
        font-size: .75rem;
    }

    .auth-page .auth-mark {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        margin: 0 0 0 var(--pi-s-3);
    }

    .auth-page .auth-form {
        padding: var(--pi-s-5) var(--pi-s-4);
    }
}


/* ===========================================================================
   13. Motion and print
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Finance, Transaction and Income get printed. */
@media print {
    .sidebar, .navbar, .footer, .pagination, .btn {
        display: none !important;
    }

    .main-wrapper .page-wrapper {
        margin: 0 !important;
        width: 100% !important;
    }

    .main-wrapper .page-wrapper .page-content {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}