:root { --C0: #ffffff; --C1: #0F2E4A; --C2: #FFF7E7; --C3: #5B88B2; --C4: #E8E8E8; --C5: #979797; --C6: #181818; --C7: #082035; --C8: #f5f5f5; --C9: #0c1f31; --C10: #0f2e4af0; --selection-bg: var(--C1); --selection-text: var(--C2); --mk-header-h: 120px; }

/* Dark theme palette فقط داخل marketer-panel */
.marketer-panel[data-bs-theme="dark"] { --C0: #0b1220; --C1: #5B88B2; --C2: #101826; --C3: #7fb1e1; --C4: #1f2a3a; --C5: #8b97a8; --C6: #e5e7eb; --C7: #0e1726; --C8: #0f172a; --C9: #0c1f31; --C10: #0f2e4a; --selection-bg: #23364a; --selection-text: #e5e7eb; color-scheme: dark; }

/* Core backgrounds and text in dark */
.marketer-panel[data-bs-theme="dark"] { background-color: var(--C0); color: var(--C6); }

.marketer-panel[data-bs-theme="dark"] .bg-light { background-color: var(--C8) !important; }
.marketer-panel[data-bs-theme="dark"] .navbar,
.marketer-panel[data-bs-theme="dark"] .navbar-light { background-color: var(--C8) !important; }
.marketer-panel[data-bs-theme="dark"] .sidebar { background-color: var(--C8) !important; color: var(--C6); }
.marketer-panel[data-bs-theme="dark"] .card { background-color: var(--C8); color: var(--C6); border-color: var(--C4); }
.marketer-panel[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.04); --bs-table-color: var(--C6); }
.marketer-panel[data-bs-theme="dark"] .form-control,
.marketer-panel[data-bs-theme="dark"] .form-select { background-color: #0b1626; color: var(--C6); border-color: #1e293b; }
.marketer-panel[data-bs-theme="dark"] .form-control:focus { border-color: var(--C3) !important; box-shadow: 0 0 0 0.2rem rgba(127, 177, 225, 0.25) !important; }

/* فیلدهای غیرفعال در دارک مد */
.marketer-panel[data-bs-theme="dark"] .form-control[readonly],
.marketer-panel[data-bs-theme="dark"] .form-control[disabled] { background-color: #1f2937 !important; color: #9ca3af !important; border-color: #374151 !important; cursor: not-allowed; }
.marketer-panel[data-bs-theme="dark"] .form-select[readonly],
.marketer-panel[data-bs-theme="dark"] .form-select[disabled] { background-color: #1f2937 !important; color: #9ca3af !important; border-color: #374151 !important; cursor: not-allowed; }

/* Loader styles */
#pageLoader { min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; }

#pageLoader .spinner-border { width: 3rem; height: 3rem; }

#mainContent { transition: opacity 0.3s ease-in-out; }

/* Dark mode loader */
.marketer-panel[data-bs-theme="dark"] #pageLoader { background-color: var(--C8); color: var(--C6); }

.marketer-panel[data-bs-theme="dark"] #pageLoader .spinner-border { color: var(--C3) !important; }
.marketer-panel[data-bs-theme="dark"] .nav-link { color: #cbd5e1; }
.marketer-panel[data-bs-theme="dark"] .nav-link.active { background-color: rgba(127,177,225,.12); color: var(--C3) !important; }


/* Alert styles for login page */
.mk-auth-card #mkAlert { border-radius: 8px; padding: 1rem; margin-bottom: 1rem; border: 1px solid; animation: slideDown 0.3s ease-out; }

.mk-auth-card #mkAlert.alert-warning { background-color: rgba(255, 193, 7, 0.1); border-color: rgba(255, 193, 7, 0.3); color: #856404; }

.mk-auth-card #mkAlert.alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); color: #721c24; }

.mk-auth-card #mkAlert.alert-success { background-color: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.3); color: #155724; }

.mk-auth-card #mkAlert.alert-info { background-color: rgba(23, 162, 184, 0.1); border-color: rgba(23, 162, 184, 0.3); color: #0c5460; }

.mk-auth-card #mkAlert strong { display: block; margin-bottom: 0.5rem; font-size: 1rem; }

.mk-auth-card #mkAlert .small { display: block; margin-bottom: 0.75rem; line-height: 1.5; }

.mk-auth-card #mkAlert .btn { margin-top: 0.5rem; }

.marketer-panel[data-bs-theme="dark"] .mk-auth-card #mkAlert.alert-warning { background-color: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.4); color: #ffc107; }

.marketer-panel[data-bs-theme="dark"] .mk-auth-card #mkAlert.alert-danger { background-color: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.4); color: #f5c6cb; }

.marketer-panel[data-bs-theme="dark"] .mk-auth-card #mkAlert.alert-success { background-color: rgba(40, 167, 69, 0.15); border-color: rgba(40, 167, 69, 0.4); color: #c3e6cb; }

.marketer-panel[data-bs-theme="dark"] .mk-auth-card #mkAlert.alert-info { background-color: rgba(23, 162, 184, 0.15); border-color: rgba(23, 162, 184, 0.4); color: #bee5eb; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Toggle button */
#themeToggle { position: absolute; top: 8px; left: 20px; z-index: 999; }
/* Adjusted z-index */
:root[data-bs-theme="dark"] #themeToggle { border-color: #334155; color: #cbd5e1; }
.navbar-toggler:focus { box-shadow: unset !important }
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--C2); z-index: 99999999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease, visibility 0.5s ease; }

.navbar.sticky-top { z-index: 999; top: 50px !important; }
/* Bootstrap's standard z-index for sticky navbars */
.navbar { background-color: var(--C1) !important }
.navbar-brand { padding: 10px; color: var(--C2) !important }
.navbar-toggler { color: var(--C2) !important }
.navbar-toggler-icon { background-color: var(--C2) !important }
.mk-toggle { border: none; outline: none; }
.mk-hamburger { position: relative; display: inline-block; width: 22px; height: 2px; background: var(--C2); transition: background .2s ease; }
.mk-hamburger::before, .mk-hamburger::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--C2); transition: transform .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease; }
.mk-hamburger::before { top: -9px; }
.mk-hamburger::after { bottom: -9px; }
/* Expanded (X) state driven by aria-expanded */
.mk-toggle[aria-expanded="true"] .mk-hamburger { background: transparent; }
.mk-toggle[aria-expanded="true"] .mk-hamburger::before { top: 0; transform: rotate(45deg); }
.mk-toggle[aria-expanded="true"] .mk-hamburger::after { bottom: 0; transform: rotate(-45deg); }


.offcanvas-md .offcanvas-body { display: block }

/* Mobile offcanvas adjustments */
@media (max-width: 767.98px) {
    #sidebarCollapse { top: 50px; height: calc(100% - var(--mk-nav-h)); z-index: 1045 !important; /* Force menu above backdrop */ }

    #sidebarCollapse.offcanvas .offcanvas-body { overflow-y: auto; /* Enable scrolling only when content overflows */ }

    .marketer-panel[data-bs-theme="dark"] #sidebarCollapse.offcanvas { background-color: var(--C8); }

    #themeToggle { top: -48px }

    #sidebarCollapse.show {
        padding-bottom: 100px;
    }
}

.offcanvas-backdrop { z-index: 1040 !important; /* Force backdrop below menu but above content */ }

.loader-content { text-align: center; font-size: 1.2em; color: var(--C1); display: flex; flex-direction: column; align-items: center; }

.spinner { border: 4px solid var(--C2); border-left-color: var(--C1); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin-top: 10px; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#preloader.hide { opacity: 0; visibility: hidden; }

html, body { height: 100%; }


.sidebar-sticky { position: sticky; top: 0; /* Stick to the top */ height: calc(100vh - 56px); /* Adjust 56px if your mobile navbar height is different */ padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable sidebar */ }

@media (max-width: 767.98px) {
    .sidebar-sticky { /* On mobile, sticky positioning is handled by offcanvas or fixed navbar */ position: static; height: auto; }
    main { /* Add padding top to prevent content from hiding behind sticky mobile navbar */ padding-top: 56px; /* Match mobile navbar height */ }
}

@media (min-width: 767.98px) {
    /* روی دسکتاپ: سایدبار به‌صورت شناور (چسبان) کنار صفحه بماند
       اما وقتی به انتهای محتوای اصلی و ابتدای فوتر رسید، دیگر روی فوتر نیاید. */
    .sidebar { position: sticky; /* فاصله از بالای صفحه به اندازه ارتفاع واقعی هدر (از طریق متغیر CSS که در JS تنظیم می‌شود) */ top: var(--mk-header-h); align-self: flex-start; height: calc(100vh - var(--mk-header-h)); overflow: auto; }

    /* بدنهٔ offcanvas روی دسکتاپ کل ارتفاع ستون را بگیرد تا اسکرول داخلی روی منو کار کند */
    #sidebarMenu .offcanvas-body { height: 100%; max-height: 100%; overflow: hidden; /* اسکرول داخل .sidebar-sticky مدیریت می‌شود */ }

    /* در دسکتاپ، خود بدنهٔ منو دیگر sticky نباشد و در صورت زیاد شدن آیتم‌ها، اسکرول داخلی داشته باشد */
    .sidebar-sticky { position: static; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; }
}

.sidebar .nav-link { font-weight: 500; color: #333; padding: .5rem 1rem; /* Adjust padding */ display: flex; /* Align icon and text */ align-items: center; /* Vertically center icon and text */ cursor: pointer; }

/* Adjust icon margin for RTL */
.sidebar .nav-link .bi { margin-left: .5rem; /* Add space between icon and text */ margin-right: 0; /* Reset LTR margin */ font-size: 1.1rem; /* Optional: Adjust icon size */ width: 20px; /* Ensure consistent icon spacing */ text-align: center; }

.sidebar .nav-link.active { color: #0d6efd; /* Bootstrap primary color */ background-color: rgba(0, 123, 255, 0.1); /* Light background for active item */ border-right: 3px solid #0d6efd; /* Active indicator for RTL */ padding-right: calc(1rem - 3px); /* Adjust padding to keep text aligned */ }

/* Active menu item styles */
.nav-item.active .nav-link { color: var(--C3) !important; background-color: rgba(127, 177, 225, 0.15) !important; border-right: 3px solid var(--C3) !important; padding-right: calc(1rem - 3px) !important; font-weight: 600; }

/* Dark theme active menu item */
.marketer-panel[data-bs-theme="dark"] .nav-item.active .nav-link { color: var(--C3) !important; background-color: rgba(127, 177, 225, 0.2) !important; border-right: 3px solid var(--C3) !important; }

/* Hover effect for non-active items */
.nav-item:not(.active) .nav-link:hover { color: var(--C3) !important; background-color: rgba(127, 177, 225, 0.08) !important; transition: all 0.2s ease; }

.sidebar .nav-link:hover:not(.active) { /* Avoid hover style on active link */ color: #0a58ca; background-color: rgba(0, 0, 0, 0.05); /* Subtle hover background */ }


.sidebar-heading { font-size: .85rem; text-transform: uppercase; padding: .5rem 1rem; margin-top: 1rem; color: #6c757d; /* Muted color */ }

/* Style the mobile offcanvas width if needed */
.offcanvas-end { width: 280px; /* Adjust as needed */ }

#menuInner { padding: 0 }

.badge { color: unset }

h1, h2, h3, h4, h4, h5, h6 { margin: 0 }

.card-header { align-items: center }

/* Commission Timer Card */
.commission-timer-card { background: linear-gradient(135deg, var(--C8) 0%, rgba(127, 177, 225, 0.05) 100%); border: 1px solid rgba(127, 177, 225, 0.2); border-radius: 12px; position: relative; overflow: hidden; }

.commission-timer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--C3), #7c3aed, #ec4899); }

.timer-icon { animation: pulse 2s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.timer-display { font-family: 'Courier New', monospace; direction: ltr; }

.timer-row { display: flex; justify-content: center; align-items: center; gap: 8px; }

.timer-item { display: flex; flex-direction: column; align-items: center; min-width: 45px; }

.timer-value { font-size: 20px; font-weight: 700; color: var(--C3); background: rgba(127, 177, 225, 0.1); padding: 8px 12px; border-radius: 8px; min-width: 40px; text-align: center; border: 1px solid rgba(127, 177, 225, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.timer-label { font-size: 10px; color: var(--C5); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

.timer-separator { font-size: 18px; font-weight: 700; color: var(--C3); margin: 0 2px; animation: blink 1s infinite; }

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.timer-title { font-weight: 600; color: var(--C6); }

.timer-target { font-size: 11px; color: var(--C5); }

/* Dark theme for timer */
.marketer-panel[data-bs-theme="dark"] .commission-timer-card { background: linear-gradient(135deg, var(--C8) 0%, rgba(127, 177, 225, 0.08) 100%); border-color: rgba(127, 177, 225, 0.3); }

.marketer-panel[data-bs-theme="dark"] .timer-value { background: rgba(127, 177, 225, 0.15); border-color: rgba(127, 177, 225, 0.3); color: var(--C3); }

.marketer-panel[data-bs-theme="dark"] .timer-label { color: var(--C5); }

.marketer-panel[data-bs-theme="dark"] .timer-target { color: var(--C5); }

/* User box in sidebar */
.mk-userbox { background: var(--C8); border: 1px solid var(--C4); border-radius: 10px; }
.mk-userbox .mk-avatar { width: 36px; height: 36px; background: rgba(127,177,225,.15); color: var(--C3); }
.mk-userbox .mk-phone.ltr { direction: ltr; text-align: left; }

.uploadimgbox { margin: 2px 5px 20px; display: grid; min-height: 50px; min-width: 50px }
.uploadimgbox img { color: transparent; font-size: 1px }
.uploadimgdiv { min-height: 50px; text-align: center; background: #f1f1f1 url(/assets/images/main/loader-main.gif) center center no-repeat }
.uploadimg { width: 100% !important; width: auto; }
.uploadimgalt { padding: 1%; background-color: #f9f9f9; border-bottom: 1px solid silver; float: right; direction: rtl; text-align: center; font-size: 75%; font-weight: bold }
.uploadimgbox320 { display: inline-grid; float: right; margin: 1%; width: 100% }

.hide { display: none; visibility: hidden }
.vhide { visibility: hidden }

.modal-open { overflow: auto !important; padding: 0 !important }

.nav-item ul { background-color: var(--C2); padding: 10px; }

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-right: calc(var(--bs-border-width) * -1); border-top-right-radius: 0; border-bottom-right-radius: 0; }


/* ==========================================
   Bootstrap Variables & Component Overrides
   ========================================== */
:root { --bs-primary: var(--C1); --bs-secondary: var(--C3); --bs-primary-rgb: 15, 46, 74; --bs-secondary-rgb: 91, 136, 178; }
/* Buttons */
.btn-primary { --bs-btn-color: var(--C2) !important; --bs-btn-bg: var(--C1) !important; --bs-btn-border-color: var(--C1) !important; --bs-btn-hover-color: var(--C2) !important; --bs-btn-hover-bg: var(--C3) !important; --bs-btn-hover-border-color: var(--C3) !important; --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important; --bs-btn-active-color: var(--C2) !important; --bs-btn-active-bg: var(--C7) !important; --bs-btn-active-border-color: var(--C7) !important; --bs-btn-disabled-color: var(--C2) !important; --bs-btn-disabled-bg: var(--C5) !important; --bs-btn-disabled-border-color: var(--C5) !important; }
.btn-secondary { --bs-btn-color: var(--C2) !important; --bs-btn-bg: var(--C3) !important; --bs-btn-border-color: var(--C3) !important; --bs-btn-hover-color: var(--C2) !important; --bs-btn-hover-bg: var(--C1) !important; --bs-btn-hover-border-color: var(--C1) !important; --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important; --bs-btn-active-color: var(--C2) !important; --bs-btn-active-bg: var(--C7) !important; --bs-btn-active-border-color: var(--C7) !important; --bs-btn-disabled-color: var(--C6) !important; --bs-btn-disabled-bg: var(--C4) !important; --bs-btn-disabled-border-color: var(--C4) !important; }
.btn-outline-primary { --bs-btn-color: var(--C1) !important; --bs-btn-border-color: var(--C1) !important; --bs-btn-hover-color: var(--C2) !important; --bs-btn-hover-bg: var(--C1) !important; --bs-btn-hover-border-color: var(--C1) !important; --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important; --bs-btn-active-color: var(--C2) !important; --bs-btn-active-bg: var(--C1) !important; --bs-btn-active-border-color: var(--C1) !important; --bs-btn-disabled-color: var(--C1) !important; --bs-btn-disabled-bg: transparent !important; --bs-btn-disabled-border-color: var(--C1) !important; }
.btn-outline-secondary { --bs-btn-color: var(--C3) !important; --bs-btn-border-color: var(--C3) !important; --bs-btn-hover-color: var(--C2) !important; --bs-btn-hover-bg: var(--C3) !important; --bs-btn-hover-border-color: var(--C3) !important; --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important; --bs-btn-active-color: var(--C2) !important; --bs-btn-active-bg: var(--C3) !important; --bs-btn-active-border-color: var(--C3) !important; --bs-btn-disabled-color: var(--C3) !important; --bs-btn-disabled-bg: transparent !important; --bs-btn-disabled-border-color: var(--C3) !important; }

/* Alerts */
.alert-primary { --bs-alert-color: var(--C1); --bs-alert-bg: #cfe2ff; --bs-alert-border-color: #b6d4fe; }
.alert-secondary { --bs-alert-color: var(--C3); --bs-alert-bg: #e2e3e5; --bs-alert-border-color: #d3d6d8; }

/* Text & Backgrounds */
.text-secondary { color: var(--C3) !important; }
.bg-secondary { background-color: var(--C3) !important; }
.border-primary { border-color: var(--C1) !important; }
.border-secondary { border-color: var(--C3) !important; }

/* Forms */
.form-check-input:checked { background-color: var(--C1) !important; border-color: var(--C1) !important; }
.form-control:focus { border-color: var(--C3) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important; }

/* List Group */
.list-group-item.active { background-color: var(--C1); border-color: var(--C1); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--C4); color: var(--C6); }

/* Badges */
.badge.bg-primary { background-color: var(--C1) !important; color: var(--C2) !important; }
.badge.bg-secondary { background-color: var(--C3) !important; color: var(--C2) !important; }

/* Dropdowns */
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--C1); color: var(--C2) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--C1); color: var(--C2) !important; }

/* Navs & Tabs */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--C1); color: var(--C2); }
.nav-link:hover, .nav-link:focus { color: var(--C3); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { border-color: var(--C5) var(--C5) var(--C0); color: var(--C1); }

/* Progress Bar */
.progress-bar { background-color: var(--C1); }

.mk-auth-wrap { min-height: 500px; display: flex; align-items: center; justify-content: center; padding: 0 32px }
.mk-auth-card { width: 100%; max-width: 440px; background: var(--mk-card); border-radius: 16px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 30px rgba(0,0,0,.25) }
.mk-auth-card .mk-header { padding: 24px 24px 8px; text-align: center }
.mk-auth-card .mk-header img { max-width: 120px; opacity: .95 }
.mk-auth-card .mk-header h1 { font-size: 18px; margin: 12px 0 0; color: var(--mk-text) }
.mk-auth-card .mk-body { padding: 24px }



.mk-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; color: var(--mk-muted) }
.mk-bottom-links { gap: 12px }

/* loader */
.mk-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: mkspin 1s linear infinite }

@keyframes mkspin {
    to { transform: rotate(360deg) }
}

.small, small { color: var(--mk-muted) }