/* ==========================================================================
   ZanPOS — Global Theme Polish
   Loaded AFTER bootstrap + app css. Refines the existing Minible template
   across every page (cards, buttons, tables, forms, sidebar, topbar…).
   Works in both light & dark modes and in RTL. Non-destructive: only visual.
   ========================================================================== */

:root {
    --zp-primary: #5156be;
    --zp-primary-rgb: 81, 86, 190;
    --zp-primary-strong: #454aad;
    --zp-primary-soft: rgba(81, 86, 190, .12);
    --zp-radius-sm: 8px;
    --zp-radius: 12px;
    --zp-radius-lg: 16px;
    --zp-transition: .18s ease;
}

/* Per-theme surface + shadow tokens ------------------------------------- */
[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    --zp-shadow: 0 2px 12px rgba(18, 38, 63, .06), 0 1px 2px rgba(18, 38, 63, .04);
    --zp-shadow-hover: 0 8px 24px rgba(18, 38, 63, .10);
    --zp-border: rgba(18, 38, 63, .08);
    --zp-hover-bg: rgba(18, 38, 63, .03);
    --zp-scroll: rgba(18, 38, 63, .18);
}

[data-bs-theme="dark"] {
    --zp-shadow: 0 2px 14px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .22);
    --zp-shadow-hover: 0 10px 28px rgba(0, 0, 0, .40);
    --zp-border: rgba(255, 255, 255, .07);
    --zp-hover-bg: rgba(255, 255, 255, .035);
    --zp-scroll: rgba(255, 255, 255, .16);
}

/* Global smoothing ------------------------------------------------------- */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    letter-spacing: .1px;
}

/* Cards ------------------------------------------------------------------ */
.card {
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius) !important;
    box-shadow: var(--zp-shadow);
    transition: box-shadow var(--zp-transition), transform var(--zp-transition);
}

.card:hover {
    box-shadow: var(--zp-shadow-hover);
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--zp-border);
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 600;
}

.card .card-title {
    font-weight: 600;
    letter-spacing: .2px;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
    border-radius: var(--zp-radius-sm);
    font-weight: 500;
    padding: .5rem 1.05rem;
    transition: transform var(--zp-transition), box-shadow var(--zp-transition), background-color var(--zp-transition), border-color var(--zp-transition);
}

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

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    border-radius: var(--zp-radius-sm);
    padding: .3rem .7rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--zp-primary), var(--zp-primary-strong));
    border-color: var(--zp-primary-strong);
    box-shadow: 0 4px 12px rgba(var(--zp-primary-rgb), .28);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--zp-primary-strong), var(--zp-primary-strong));
    border-color: var(--zp-primary-strong);
    box-shadow: 0 6px 18px rgba(var(--zp-primary-rgb), .38);
}

.btn-rounded,
.rounded-pill.btn {
    border-radius: 50rem;
}

/* Focus ring ------------------------------------------------------------- */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .18rem rgba(var(--zp-primary-rgb), .25) !important;
    border-color: rgba(var(--zp-primary-rgb), .5) !important;
}

/* Forms ------------------------------------------------------------------ */
.form-control,
.form-select {
    border-radius: var(--zp-radius-sm);
    transition: border-color var(--zp-transition), box-shadow var(--zp-transition);
}

.form-label {
    font-weight: 500;
    margin-bottom: .4rem;
}

.input-group > .form-control,
.input-group > .form-select {
    border-radius: var(--zp-radius-sm);
}

/* Tables ----------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: var(--zp-hover-bg);
}

.table > thead th {
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .5px;
    font-weight: 600;
    border-bottom-width: 1px;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.table > tbody > tr {
    transition: background-color var(--zp-transition);
}

.table > :not(caption) > * > * {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.table-responsive {
    border-radius: var(--zp-radius);
}

/* Report / list tables inside a card:
   sticky header (stays under the topbar), zebra striping, row hover.
   Uses theme-native card bg so it adapts to light & dark. */
.card .table-responsive {
    max-height: calc(100vh - 250px);
    border-radius: var(--zp-radius);
}

.card .table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-card-bg, var(--bs-body-bg, #fff));
    box-shadow: inset 0 -1px 0 var(--zp-border);
}

.card .table > tbody > tr {
    transition: background-color var(--zp-transition);
}

.card .table > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in srgb, var(--zp-hover-bg) 60%, transparent);
}

.card .table > tbody > tr:hover > * {
    background-color: var(--zp-hover-bg);
}

/* Badges ----------------------------------------------------------------- */
.badge {
    border-radius: 50rem;
    font-weight: 600;
    padding: .35em .7em;
    letter-spacing: .2px;
}

/* Dropdowns, modals, popovers ------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius);
    box-shadow: var(--zp-shadow-hover);
    padding: .35rem;
}

.dropdown-item {
    border-radius: var(--zp-radius-sm);
    padding: .5rem .75rem;
}

.modal-content {
    border: 1px solid var(--zp-border);
    border-radius: var(--zp-radius-lg);
    box-shadow: var(--zp-shadow-hover);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--zp-border);
}

/* Pagination ------------------------------------------------------------- */
.pagination {
    gap: .25rem;
}

.page-link {
    border-radius: var(--zp-radius-sm) !important;
    border: 1px solid var(--zp-border);
    transition: background-color var(--zp-transition), color var(--zp-transition);
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--zp-primary), var(--zp-primary-strong));
    border-color: var(--zp-primary-strong);
}

/* Alerts ----------------------------------------------------------------- */
.alert {
    border-radius: var(--zp-radius);
    border: 1px solid var(--zp-border);
}

/* Topbar ----------------------------------------------------------------- */
#page-topbar {
    box-shadow: 0 1px 0 var(--zp-border), 0 2px 10px rgba(0, 0, 0, .04);
    backdrop-filter: saturate(180%) blur(6px);
}

.header-item {
    transition: background-color var(--zp-transition);
}

/* ==========================================================================
   Sidebar (vertical menu)
   ========================================================================== */
#sidebar-menu ul li a {
    border-radius: var(--zp-radius-sm);
    margin: 2px 10px;
    padding: .62rem .9rem;
    transition: background-color var(--zp-transition), color var(--zp-transition), box-shadow var(--zp-transition);
}

#sidebar-menu ul li a i {
    transition: color var(--zp-transition), transform var(--zp-transition);
}

#sidebar-menu ul li a:hover {
    background-color: var(--zp-hover-bg);
}

#sidebar-menu ul li a:hover i {
    transform: translateY(-1px);
}

/* Active item — soft pill with accent bar */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
    background-color: var(--zp-primary-soft);
    color: var(--zp-primary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--zp-primary);
}

html[dir="rtl"] #sidebar-menu ul li a.active,
html[dir="rtl"] #sidebar-menu ul li.mm-active > a {
    box-shadow: inset -3px 0 0 0 var(--zp-primary);
}

#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i {
    color: var(--zp-primary) !important;
}

#sidebar-menu .menu-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .68rem;
    font-weight: 700;
    opacity: .55;
    padding: 1rem 1.5rem .4rem;
}

/* Page title box --------------------------------------------------------- */
.page-title-box {
    padding: 1rem 0 1.2rem;
}

.page-title-box h4,
.page-title-box .page-title {
    font-weight: 600;
    letter-spacing: .2px;
}

/* ==========================================================================
   Custom scrollbars
   ========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--zp-scroll) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: var(--zp-scroll);
    border-radius: 50rem;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--zp-primary-rgb), .55);
    background-clip: content-box;
}

/* Nav pills / tabs ------------------------------------------------------- */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--zp-primary), var(--zp-primary-strong));
}

.nav-tabs .nav-link {
    border-radius: var(--zp-radius-sm) var(--zp-radius-sm) 0 0;
}

/* Progress bars ---------------------------------------------------------- */
.progress {
    border-radius: 50rem;
    height: .6rem;
}

.progress-bar {
    background: linear-gradient(135deg, var(--zp-primary), var(--zp-primary-strong));
}

/* Soft avatar / icon tiles get a bit rounder ---------------------------- */
.avatar-title {
    border-radius: var(--zp-radius);
}

/* Brand color switcher swatches ----------------------------------------- */
.zp-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .65);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
    padding: 0;
    transition: transform var(--zp-transition), box-shadow var(--zp-transition);
}

.zp-swatch:hover {
    transform: scale(1.18);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   Login / Auth page
   ========================================================================== */
.auth-full-page-content {
    position: relative;
}

.auth-content .welcome,
.auth-content h5 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.auth-logo .logo-txt {
    font-size: 1.35rem;
    font-weight: 700;
    vertical-align: middle;
    margin-inline-start: .4rem;
}

.auth-page .form-control {
    padding: .7rem .9rem;
    border-radius: var(--zp-radius);
}

.auth-page .btn-primary {
    padding: .7rem;
    font-size: 1rem;
    border-radius: var(--zp-radius);
}

/* Language flags */
.auth-page .flag-pic {
    border-radius: 4px;
    transition: transform var(--zp-transition), box-shadow var(--zp-transition);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.auth-page .flag-pic:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

/* Captcha container */
.auth-page dnt-captcha {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.auth-page dnt-captcha img {
    border-radius: var(--zp-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* Right-side brand panel — rich gradient + soft glows instead of flat color */
.auth-bg {
    position: relative;
    overflow: hidden;
}

.auth-bg .bg-overlay.bg-primary {
    background: linear-gradient(135deg, #5156be 0%, #6f5ad6 45%, #8a63e8 100%) !important;
    opacity: 1;
}

.auth-bg .bg-overlay.bg-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .18), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .12), transparent 45%);
    pointer-events: none;
}

/* Floating bubbles — smoother, glassier */
.auth-bg .bg-bubbles li {
    background: rgba(255, 255, 255, .10);
    border-radius: 30%;
    backdrop-filter: blur(1px);
}

/* ───────────────────────────────────────────────────────────────
   Select2 — فونتِ سایت
   select2.min.css روی .select2-container مقدارِ `font-family: sans-serif`
   می‌گذارد و Vazirmatn را دور می‌زند (به‌ویژه در placeholder دیده می‌شود).
   چون select2.min.css در بعضی ویوها بعد از این فایل لود می‌شود،
   inherit با !important گذاشته شده تا مستقل از ترتیبِ لود کار کند.
   .select2-dropdown به <body> چسبانده می‌شود، پس inherit همان فونتِ سایت را می‌گیرد.
   ─────────────────────────────────────────────────────────────── */
.select2-container,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__placeholder,
.select2-container .select2-selection__choice,
.select2-container .select2-search__field,
.select2-dropdown,
.select2-results,
.select2-results__option {
    font-family: inherit !important;
}