/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Hide validation summary when there are no errors */
.validation-summary-valid {
    display: none;
}

/* ── Typography ───────────────────────────────────────────────────────────────
   Replaces `* { font-family: IranSansX; }`. Three things that rule got wrong:

   1. It set the family on *every* element with no fallback stack, so a browser that
      failed to load the webfont fell through to whatever the UA default is — Times,
      in practice, on a Persian RTL page.
   2. A universal selector cannot be overridden by inheritance, only by a more specific
      rule, which is why chat.css and documents.css each had to re-declare families.
   3. Headings got the body face. There was no heading font in the project at all.

   Both families are the variable FaNum cut: one file each, weight 100–1000 continuous,
   `font-display: swap`. Persian numerals come from these glyphs — which is what lets the
   ambient culture stay invariant (see Program.cs).
   ────────────────────────────────────────────────────────────────────────────── */
:root {
    --font-body:    'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
    --font-heading: 'IRANYekanX', 'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
    --font-mono:    'Cascadia Mono', Consolas, 'Courier New', monospace;
}

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand-text,
.card-header,
.modal-title {
    font-family: var(--font-heading);
}

/* Inputs and buttons do not inherit the page font on their own. */
input, select, textarea, button, .btn, .form-control, .form-select, .form-label, table {
    font-family: inherit;
}

/* Latin technical text: identifiers, keys, paths, stack traces. */
code, pre, kbd, samp, .font-monospace, .ltr {
    font-family: var(--font-mono);
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* ── Navbar logo brand ────────────────────────────────────────────────────── */
.navbar-brand--logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap !important;
    word-break: normal !important;
    text-decoration: none;
}

.navbar-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
}

.navbar-brand--logo:hover .navbar-logo {
    transform: rotate(-6deg) scale(1.08);
    filter: drop-shadow(0 2px 6px rgba(92,107,192,0.4));
}

.navbar-brand-text {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--site-navbar-text) !important;
}

/* Mobile: slightly smaller logo */
@media (max-width: 576px) {
    .navbar-logo { width: 28px; height: 28px; }
    .navbar-brand-text { font-size: 0.95rem; }
}

/* Provide sufficient contrast against white background */
a {
    color: var(--g-link-color);
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 17.5px; /* mobile: 14px × 1.25 */
}

@media (min-width: 768px) {
    html {
        font-size: 20px; /* tablet: 16px × 1.25 */
    }
}

@media (min-width: 992px) {
    html {
        font-size: 16px; /* desktop: original */
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    direction: rtl;
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}


/* Mehdi Custom Styles */
.ltr {
    direction: ltr;
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════════
   Global Dark Mode — CSS Variables
   Applied via [data-theme="dark"] on <html>, or OS preference as fallback.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --site-bg:           #f0f2f7;
    --site-text:         #1e2234;
    --site-text-muted:   #6b7492;
    --site-border:       #e2e6f0;
    --site-navbar-bg:    #ffffff;
    --site-navbar-text:  #1e2234;
    --site-card-bg:      #ffffff;
    --site-input-bg:     #f7f8fc;
    --site-input-text:   #1e2234;
    --site-input-border: #ced4e8;
    --site-modal-bg:     #ffffff;
    --site-modal-hdr-bg: #f4f5fb;
    --site-dropdown-bg:  #ffffff;
    --site-accent:       #5c6bc0;
    --site-accent-hover: #4a5898;
    --site-scrollbar:    #ced4e8;
    --site-footer-bg:    #f0f2f7;
    --site-footer-text:  #6b7492;
}

[data-theme="dark"] {
    --site-bg:           #0e1621;
    --site-text:         #f5f5f5;
    --site-text-muted:   #708499;
    --site-border:       #232e3c;
    --site-navbar-bg:    #17212b;
    --site-navbar-text:  #f5f5f5;
    --site-card-bg:      #17212b;
    --site-input-bg:     #232e3c;
    --site-input-text:   #f5f5f5;
    --site-input-border: #2b5278;
    --site-modal-bg:     #17212b;
    --site-modal-hdr-bg: #0e1621;
    --site-dropdown-bg:  #17212b;
    --site-accent:       #71bafa;
    --site-accent-hover: #2b5278;
    --site-scrollbar:    #232e3c;
    --site-footer-bg:    #17212b;
    --site-footer-text:  #708499;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --site-bg:           #0e1621;
        --site-text:         #f5f5f5;
        --site-text-muted:   #708499;
        --site-border:       #232e3c;
        --site-navbar-bg:    #17212b;
        --site-navbar-text:  #f5f5f5;
        --site-card-bg:      #17212b;
        --site-input-bg:     #232e3c;
        --site-input-text:   #f5f5f5;
        --site-input-border: #2b5278;
        --site-modal-bg:     #17212b;
        --site-modal-hdr-bg: #0e1621;
        --site-dropdown-bg:  #17212b;
        --site-accent:       #71bafa;
        --site-accent-hover: #2b5278;
        --site-scrollbar:    #232e3c;
        --site-footer-bg:    #17212b;
        --site-footer-text:  #708499;
    }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    background-color: var(--site-bg);
    color: var(--site-text);
    transition: background-color 0.2s, color 0.2s;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.site-navbar {
    background-color: var(--site-navbar-bg) !important;
    border-color: var(--site-border) !important;
}

.site-navbar .navbar-brand,
.site-navbar .nav-link {
    color: var(--site-navbar-text) !important;
}

.site-navbar .navbar-toggler { border-color: var(--site-border); }

/* Theme toggle button in the navbar */
.btn-theme-toggle {
    background: transparent;
    border: 1px solid var(--site-border);
    border-radius: 0.5rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--site-text-muted);
    font-size: 0.9rem;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    padding: 0;
}

.btn-theme-toggle:hover {
    background: var(--site-border);
    color: var(--site-text);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--site-card-bg) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

.card-header,
.card-footer {
    background-color: var(--site-modal-hdr-bg) !important;
    border-color: var(--site-border) !important;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--site-modal-bg) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--site-border) !important;
}

.modal-header:not(.bg-danger):not(.bg-success):not(.bg-primary):not(.bg-warning) {
    background-color: var(--site-modal-hdr-bg);
}

/* Ensure close button is visible in dark modals */
.modal-header .btn-close {
    filter: var(--site-close-btn-filter, none);
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--site-input-bg) !important;
    color: var(--site-input-text) !important;
    border-color: var(--site-input-border) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--site-input-bg) !important;
    color: var(--site-input-text) !important;
    border-color: var(--site-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(92, 107, 192, 0.25) !important;
}

.form-control::placeholder { color: var(--site-text-muted) !important; }

.input-group-text {
    background-color: var(--site-modal-hdr-bg) !important;
    border-color: var(--site-input-border) !important;
    color: var(--site-text) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.table > :not(caption) > * > * {
    background-color: var(--site-card-bg) !important;
    color: var(--site-text) !important;
    border-color: var(--site-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--site-modal-hdr-bg) !important;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--site-border) !important;
}

/* ── Dropdowns ───────────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--site-dropdown-bg) !important;
    border-color: var(--site-border) !important;
}

.dropdown-item { color: var(--site-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--site-border) !important; }
.dropdown-divider  { border-color: var(--site-border) !important; }

/* ── Borders & Text utilities ────────────────────────────────────────────── */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--site-border) !important; }

.text-dark   { color: var(--site-text)        !important; }
.text-muted  { color: var(--site-text-muted)  !important; }

/* ── List groups ─────────────────────────────────────────────────────────── */
.list-group-item {
    background-color: var(--site-card-bg)  !important;
    border-color:     var(--site-border)   !important;
    color:            var(--site-text)     !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
    background-color: var(--site-footer-bg)   !important;
    border-color:     var(--site-border)       !important;
    color:            var(--site-footer-text)  !important;
}

/* ── Scrollbar (WebKit) ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--site-scrollbar); border-radius: 4px; }

/* ── Alerts (dark mode) ──────────────────────────────────────────────────── */
/* Override Bootstrap's per-variant alert variables so they look correct on
   dark backgrounds. Bootstrap 5 scopes these on each .alert-* class, so we
   only need to set three custom properties per variant.                      */
[data-theme="dark"] .alert-success {
    --bs-alert-bg:           #061a0f;
    --bs-alert-border-color: #1a5c35;
    --bs-alert-color:        #75b798;
}
[data-theme="dark"] .alert-danger {
    --bs-alert-bg:           #2c0b0e;
    --bs-alert-border-color: #842029;
    --bs-alert-color:        #ea868f;
}
[data-theme="dark"] .alert-warning {
    --bs-alert-bg:           #2c1f02;
    --bs-alert-border-color: #6c4f03;
    --bs-alert-color:        #ffda6a;
}
[data-theme="dark"] .alert-info {
    --bs-alert-bg:           #032028;
    --bs-alert-border-color: #055160;
    --bs-alert-color:        #6edff6;
}
[data-theme="dark"] .alert-primary {
    --bs-alert-bg:           #051033;
    --bs-alert-border-color: #0d3498;
    --bs-alert-color:        #6ea8fe;
}
[data-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-success {
        --bs-alert-bg:           #061a0f;
        --bs-alert-border-color: #1a5c35;
        --bs-alert-color:        #75b798;
    }
    :root:not([data-theme="light"]) .alert-danger {
        --bs-alert-bg:           #2c0b0e;
        --bs-alert-border-color: #842029;
        --bs-alert-color:        #ea868f;
    }
    :root:not([data-theme="light"]) .alert-warning {
        --bs-alert-bg:           #2c1f02;
        --bs-alert-border-color: #6c4f03;
        --bs-alert-color:        #ffda6a;
    }
    :root:not([data-theme="light"]) .alert-info {
        --bs-alert-bg:           #032028;
        --bs-alert-border-color: #055160;
        --bs-alert-color:        #6edff6;
    }
    :root:not([data-theme="light"]) .alert-primary {
        --bs-alert-bg:           #051033;
        --bs-alert-border-color: #0d3498;
        --bs-alert-color:        #6ea8fe;
    }
    :root:not([data-theme="light"]) .alert .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

/* IRR currency display: ریال on the left, sign+number LTR on the right */
.irr-amount {
    display: inline-flex;
    direction: rtl;
    align-items: center;
    gap: 0.2rem;
}

/* ── Controls ──────────────────────────────────────────────────────────
   legacy-admin.css (also loaded by the public layout) sets `.btn { border: none }` and a 2px, 45px-tall
   .form-control — the outline buttons lose their only visible edge and nothing lines up with
   select2. UI-Conventions §11.1: every field and the button beside it is 40px with a 1px border.
   Prefixed with `body` so it wins over legacy-admin.css, which _Layout loads after this file. */
body .btn {
    border: 1px solid transparent;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
}

body .btn-sm { min-height: 2rem; }
body .btn-lg { min-height: 48px; }

body .btn-outline-primary { border-color: var(--site-accent); color: var(--site-accent); background: transparent; }
body .btn-outline-primary:hover,
body .btn-check:checked + .btn-outline-primary { background: var(--site-accent); border-color: var(--site-accent); color: #fff; }
/* The dark accent is a light blue; white text on it is barely readable. */
[data-theme="dark"] body .btn-outline-primary:hover,
[data-theme="dark"] body .btn-check:checked + .btn-outline-primary { color: var(--site-bg); }

body .btn-outline-secondary { border-color: var(--site-input-border); color: var(--site-text); background: transparent; }
body .btn-outline-secondary:hover { background: var(--site-input-bg); color: var(--site-text); }

body .btn-outline-danger { border-color: #dc3545; color: #dc3545; background: transparent; }
body .btn-outline-danger:hover { background: #dc3545; color: #fff; }
[data-theme="dark"] body .btn-outline-danger { border-color: #ef6b77; color: #ef6b77; }
[data-theme="dark"] body .btn-outline-danger:hover { background: #dc3545; color: #fff; }

body .form-control {
    border: 1px solid var(--site-input-border) !important;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
}

body input.form-control, body .form-select { height: 40px; }

/* select2 ships a light-only stylesheet and this project has no vendor theme for it yet. The dropdown itself is appended to <body>, which
   is why its selectors are not scoped to .pets-page. */
body .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid var(--site-input-border);
    border-radius: 0.5rem;
    background: var(--site-input-bg);
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    color: var(--site-input-text);
    padding-inline: 0.75rem 2rem;
}

body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--site-text-muted); }

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: auto;
    left: 0.4rem;
}

body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--site-accent); }

.select2-dropdown {
    background: var(--site-dropdown-bg);
    border-color: var(--site-input-border);
    color: var(--site-text);
}

.select2-container--default .select2-results__option--selected { background: var(--site-input-bg); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--site-accent); color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--site-input-bg);
    color: var(--site-input-text);
    border-color: var(--site-input-border);
}

/* Bootstrap btn-close carrying a Font Awesome glyph instead of its background X. */
.btn-close:has(> i) { background-image: none; filter: none !important; display: inline-flex; align-items: center; justify-content: center; color: var(--site-text); opacity: .6; }
.btn-close:has(> i):hover { opacity: 1; }