/* ===================================================================== */
/* سیستم انبار هوشمند - تم بلوبانک + معماری ایرانی                     */
/* طراحی ساده، زیبا و کاربرپسند                                        */
/* ===================================================================== */

/* ===================================================================== */
/* متغیرهای رنگ - حالت روشن (Bluebank-inspired) */
/* ===================================================================== */
:root {
    /* سبز حرفه‌ای (جایگزین بلوبانک آبی) */
    --blue-bank: #2D7D46;
    --blue-bank-hover: #236B3A;
    --blue-bank-pressed: #1F5C38;
    --blue-bank-light: rgba(45, 125, 70, 0.1);
    --blue-bank-glow: rgba(45, 125, 70, 0.25);

    /* رنگ‌های ایرانی تأکیدی */
    --persian-turquoise: #00B4D8;
    --persian-gold: #FFB703;
    --persian-rose: #E63946;
    --persian-lapis: #1E3A8A;

    /* گرادیانت‌ها */
    --gradient-primary: linear-gradient(135deg, #2D7D46 0%, #34A66E 100%);
    --gradient-hero: linear-gradient(135deg, #2D7D46 0%, #1F5C38 100%);
    --gradient-persian: linear-gradient(135deg, #2D7D46 0%, #34A66E 50%, #FFB703 100%);
    --gradient-success: linear-gradient(135deg, #00B894 0%, #00D4AA 100%);
    --gradient-warning: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
    --gradient-danger: linear-gradient(135deg, #E63946 0%, #F77F00 100%);
    --gradient-info: linear-gradient(135deg, #34A66E 0%, #2D7D46 100%);
    --gradient-purple: linear-gradient(135deg, #7209B7 0%, #560BAD 100%);

    /* پس‌زمینه‌ها - سبز با خاکستری ملایم (برای راحتی چشم) */
    --bg-primary: #F7F8FA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F4F2;
    --bg-hover: #E8F0E8;
    --bg-active: #D8EAD8;
    --bg-sidebar: #D9F1E4;
    --bg-sidebar-hover: #C5E8D4;

    /* متن‌ها */
    --text-primary: #1A1F36;
    --text-secondary: #5A6458;
    --text-tertiary: #8A92A6;

    /* حاشیه‌ها */
    --border-subtle: #E8F0E8;
    --border-default: #D8EAD8;
    --border-strong: #B4C9B8;

    /* سایه‌ها - نرم و طبیعی */
    --shadow-xs: 0 1px 2px rgba(26, 31, 54, 0.04);
    --shadow-sm: 0 2px 8px rgba(26, 31, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(26, 31, 54, 0.08);
    --shadow-lg: 0 12px 32px rgba(26, 31, 54, 0.1);
    --shadow-xl: 0 20px 40px rgba(26, 31, 54, 0.12);
    --shadow-blue: 0 8px 24px rgba(45, 125, 70, 0.25);
    --shadow-blue-lg: 0 16px 40px rgba(45, 125, 70, 0.35);

    /* رنگ‌های تأکیدی */
    --accent: #2D7D46;
    --accent-hover: #236B3A;
    --accent-light: rgba(45, 125, 70, 0.1);
    --accent-text: #2D7D46;

    /* رنگ‌های وضعیت */
    --success: #00B894;
    --success-bg: rgba(0, 184, 148, 0.1);
    --success-text: #00A085;

    --warning: #F9AA33;
    --warning-bg: rgba(249, 170, 51, 0.1);
    --warning-text: #E69500;

    --danger: #FF5252;
    --danger-bg: rgba(255, 82, 82, 0.1);
    --danger-text: #E53935;

    --info: #00B4D8;
    --info-bg: rgba(0, 180, 216, 0.1);
    --info-text: #0099BA;

    /* شعاع گوشه‌ها - تقریباً مستطیل */
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 5px;
    --radius-2xl: 6px;
    --radius-3xl: 8px;

    /* الگوی ایرانی گره‌چینی (8-point Islamic star) */
    --pattern-gereh-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='white' stroke-width='0.8' opacity='0.12'%3E%3Crect x='15' y='15' width='50' height='50'/%3E%3Cpolygon points='40,5 75,40 40,75 5,40'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-gereh-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231A1F36' stroke-width='0.6' opacity='0.08'%3E%3Crect x='15' y='15' width='50' height='50'/%3E%3Cpolygon points='40,5 75,40 40,75 5,40'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-gereh-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%232D7D46' stroke-width='0.6' opacity='0.08'%3E%3Crect x='15' y='15' width='50' height='50'/%3E%3Cpolygon points='40,5 75,40 40,75 5,40'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===================================================================== */
/* شعاع گوشه‌ها - اوردراید کلاس‌های Tailwind برای ظاهر تقریباً مستطیلی */
.rounded-xs { border-radius: 1px !important; }
.rounded-sm { border-radius: 1px !important; }
.rounded { border-radius: 2px !important; }
.rounded-md { border-radius: 3px !important; }
.rounded-lg { border-radius: 4px !important; }
.rounded-xl { border-radius: 5px !important; }
.rounded-2xl { border-radius: 6px !important; }
.rounded-3xl { border-radius: 8px !important; }
.rounded-t-3xl { border-radius: 8px 8px 0 0 !important; }
/* rounded-full و rounded-none عمداً دست‌نخورده باقی می‌مانند (دایره‌ها/آواتار/گوشه‌های صفر) */

/* ===================================================================== */
/* متغیرهای رنگ - حالت تاریک (Dark Mode) */
/* ===================================================================== */
html.dark {
    --bg-primary: #0F1410;
    --bg-secondary: #1A201C;
    --bg-tertiary: #222A24;
    --bg-hover: #2A352C;
    --bg-active: #334029;
    --bg-sidebar: #1F3027;
    --bg-sidebar-hover: #2B4537;

    --text-primary: #F5F7FA;
    --text-secondary: #A0A6BF;
    --text-tertiary: #6B7280;

    --border-subtle: #222A24;
    --border-default: #2A352C;
    --border-strong: #45584C;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-blue: 0 8px 24px rgba(76, 175, 110, 0.35);
    --shadow-blue-lg: 0 16px 40px rgba(76, 175, 110, 0.45);

    --accent: #4CAF6E;
    --accent-hover: #3D9660;
    --accent-light: rgba(76, 175, 110, 0.15);
    --accent-text: #7ED69C;

    --success: #00D9A6;
    --success-bg: rgba(0, 217, 166, 0.15);
    --success-text: #5EE8C5;

    --warning: #FFC93C;
    --warning-bg: rgba(255, 201, 60, 0.15);
    --warning-text: #FFD966;

    --danger: #FF6B6B;
    --danger-bg: rgba(255, 107, 107, 0.15);
    --danger-text: #FF9999;

    --info: #00D4FF;
    --info-bg: rgba(0, 212, 255, 0.15);
    --info-text: #66E5FF;

    --gradient-primary: linear-gradient(135deg, #4CAF6E 0%, #2D7D46 100%);
    --gradient-hero: linear-gradient(135deg, #1F5C38 0%, #0F1410 100%);
}

/* ===================================================================== */
/* استایل‌های پایه */
/* ===================================================================== */

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===================================================================== */
/* کارت‌ها - به سبک بلوبانک (گوشه‌های گرد، سایه‌های نرم) */
/* ===================================================================== */

.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-flat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
}

/* کارت با الگوی ایرانی */
.card-persian {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.card-persian::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-gereh-blue);
    background-repeat: repeat;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.card-persian > * {
    position: relative;
    z-index: 1;
}

html.dark .card-persian::before {
    background-image: var(--pattern-gereh-white);
    opacity: 0.3;
}

/* ===================================================================== */
/* الگوی ایرانی گره‌چینی - کلاس‌های کمکی */
/* ===================================================================== */

.persian-pattern-white {
    background-image: var(--pattern-gereh-white);
    background-repeat: repeat;
}

.persian-pattern-dark {
    background-image: var(--pattern-gereh-dark);
    background-repeat: repeat;
}

.persian-pattern-blue {
    background-image: var(--pattern-gereh-blue);
    background-repeat: repeat;
}

.persian-border {
    position: relative;
}

.persian-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-persian);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ===================================================================== */
/* فرم‌ها - ساده و کاربرپسند */
/* ===================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary);
}

label {
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
}

/* ===================================================================== */
/* دکمه‌ها - بلوبانک */
/* ===================================================================== */

.btn-primary,
button[type="submit"] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-blue);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
}

.btn-primary:hover,
button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue-lg);
    filter: brightness(1.05);
}

.btn-primary:active,
button[type="submit"]:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent-text);
}

.btn-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1.5px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    font-family: inherit;
}

.btn-danger:hover {
    background: var(--danger);
    color: white;
}

/* ===================================================================== */
/* لینک‌ها */
/* ===================================================================== */

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
}

/* ===================================================================== */
/* جداول */
/* ===================================================================== */

table {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.875rem 1rem;
    text-align: right;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

td {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

tr {
    transition: background 0.15s ease;
}

tr:hover {
    background: var(--bg-hover);
}

/* ===================================================================== */
/* Badge ها (نشان‌ها) */
/* ===================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-primary {
    background: var(--accent-light);
    color: var(--accent-text);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.badge-info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* ===================================================================== */
/* انیمیشن‌های نرم */
/* ===================================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ping-slow {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

.animate-fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-slide-up { animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-scale-in { animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.animate-ping-slow { animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ===================================================================== */
/* اسکرول‌بار سفارشی (هماهنگ با تم سایت و همیشه سمت راست) */
/* ===================================================================== */

/* ✅ ترفند استاندارد و قطعی برای قرارگیری اسکرول‌بار اصلی در سمت راست */
/* در حالی که تمام محتوای سایت کاملاً راست‌چین (RTL) باقی می‌ماند */
html {
    direction: ltr; /* مرورگر را مجبور می‌کند اسکرول‌بار را در سمت راست قرار دهد */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg-tertiary);
}

body {
    direction: rtl; /* تمام محتوا، فلکس‌ها و گریدها را راست‌چین نگه می‌دارد */
}

/* استایل یکپارچه و زیبا برای تمام اسکرول‌بارهای سایت */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* مسیر اسکرول‌بار (Track) */
::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 999px;
    margin: 4px;
}

/* دسته اسکرول‌بار (Thumb) - هماهنگ با رنگ اصلی تم */
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 999px;
    border: 2px solid var(--bg-tertiary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* حالت هاور دسته اسکرول‌بار */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
    border-width: 1px;
}

/* حالت فعال (در حال کشیدن) */
::-webkit-scrollbar-thumb:active {
    background: var(--blue-bank-pressed);
}

/* اسکرول‌بار ظریف‌تر و شیک‌تر برای سایدبار و کانتینرهای داخلی */
.sidebar-scroll,
.custom-scroll,
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.sidebar-scroll::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
    margin: 0;
}

.sidebar-scroll::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: none;
    transition: background 0.3s ease;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.custom-scroll::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ===================================================================== */
/* Bottom Navigation (موبایل) */
/* ===================================================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
    backdrop-filter: blur(10px);
}

html.dark .bottom-nav {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.5rem 0.25rem;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.bottom-nav-item:hover {
    color: var(--text-primary);
}

.bottom-nav-item.active {
    color: var(--accent-text);
}

.bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 0 0 2px 2px;
}

.bottom-nav-item .icon {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.bottom-nav-item.active .icon {
    transform: scale(1.15);
}

.bottom-nav-item .label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
}

/* ===================================================================== */
/* Sidebar Links - طراحی مدرن با آیکون‌های رنگی و پس‌زمینه نرم */
/* ===================================================================== */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateX(-4px);
}

#mainSidebar .sidebar-link:hover {
    background: var(--bg-sidebar-hover);
}

.sidebar-link .icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sidebar-link .icon-wrapper svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
}

.sidebar-link:hover .icon-wrapper {
    background: var(--bg-active);
    color: var(--accent-text);
    transform: scale(1.05);
}

/* حالت فعال (Active) */
.sidebar-link.active {
    background: var(--accent);
    color: white;
    box-shadow: var(--shadow-blue);
    font-weight: 600;
    border-color: transparent;
}

.sidebar-link.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================ */
/* رنگ‌های متمایز و زیبا برای هر آیتم منو */
/* ============================================ */

/* داشبورد - آبی */
.sidebar-link.color-dashboard .icon-wrapper { background: rgba(45, 125, 70, 0.1); color: #2D7D46; }
html.dark .sidebar-link.color-dashboard .icon-wrapper { background: rgba(76, 175, 110, 0.15); color: #7ED69C; }
.sidebar-link.color-dashboard.active { background: #2D7D46; }
html.dark .sidebar-link.color-dashboard.active { background: #4CAF6E; }

/* موجودی انبار - سبز */
.sidebar-link.color-batches .icon-wrapper { background: rgba(0, 184, 148, 0.1); color: #00B894; }
html.dark .sidebar-link.color-batches .icon-wrapper { background: rgba(0, 217, 166, 0.15); color: #5EE8C5; }
.sidebar-link.color-batches.active { background: #00B894; }
html.dark .sidebar-link.color-batches.active { background: #00D9A6; }

/* ورود کالا - فیروزه‌ای */
.sidebar-link.color-batches-create .icon-wrapper { background: rgba(0, 180, 216, 0.1); color: #00B4D8; }
html.dark .sidebar-link.color-batches-create .icon-wrapper { background: rgba(0, 212, 255, 0.15); color: #66E5FF; }
.sidebar-link.color-batches-create.active { background: #00B4D8; }
html.dark .sidebar-link.color-batches-create.active { background: #00D4FF; }

/* حواله‌های خروج - قرمز/نارنجی */
.sidebar-link.color-issues .icon-wrapper { background: rgba(255, 82, 82, 0.1); color: #FF5252; }
html.dark .sidebar-link.color-issues .icon-wrapper { background: rgba(255, 107, 107, 0.15); color: #FF9999; }
.sidebar-link.color-issues.active { background: #FF5252; }
html.dark .sidebar-link.color-issues.active { background: #FF6B6B; }

/* محصولات - بنفش */
.sidebar-link.color-products .icon-wrapper { background: rgba(114, 9, 183, 0.1); color: #7209B7; }
html.dark .sidebar-link.color-products .icon-wrapper { background: rgba(114, 9, 183, 0.15); color: #C77DFF; }
.sidebar-link.color-products.active { background: #7209B7; }
html.dark .sidebar-link.color-products.active { background: #7209B7; }

/* طرف حساب - طلایی/زرد */
.sidebar-link.color-parties .icon-wrapper { background: rgba(249, 170, 51, 0.1); color: #F9AA33; }
html.dark .sidebar-link.color-parties .icon-wrapper { background: rgba(255, 201, 60, 0.15); color: #FFD966; }
.sidebar-link.color-parties.active { background: #F9AA33; }
html.dark .sidebar-link.color-parties.active { background: #FFC93C; }

/* دسته‌بندی‌ها - سرمه‌ای */
.sidebar-link.color-categories .icon-wrapper { background: rgba(30, 58, 138, 0.1); color: #1E3A8A; }
html.dark .sidebar-link.color-categories .icon-wrapper { background: rgba(76, 175, 110, 0.15); color: #7ED69C; }
.sidebar-link.color-categories.active { background: #1E3A8A; }
html.dark .sidebar-link.color-categories.active { background: #4CAF6E; }

/* مدیریت - خاکستری تیره */
.sidebar-link.color-admin .icon-wrapper { background: rgba(90, 96, 127, 0.1); color: #5A607F; }
html.dark .sidebar-link.color-admin .icon-wrapper { background: rgba(160, 166, 191, 0.15); color: #A0A6BF; }
.sidebar-link.color-admin.active { background: #5A607F; }
html.dark .sidebar-link.color-admin.active { background: #4A5568; }

/* ===================================================================== */
/* Top Header */
/* ===================================================================== */

.top-header {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
}

.header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.header-action:hover {
    background: var(--bg-hover);
    color: var(--accent-text);
    transform: scale(1.05);
}

.header-action.active {
    background: var(--accent);
    color: white;
    box-shadow: var(--shadow-blue);
}

/* ===================================================================== */
/* More Sheet (موبایل - منوی بیشتر) */
/* ===================================================================== */

.more-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-secondary);
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

.more-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 0 auto 1rem;
}

.more-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: var(--radius-xl);
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.more-sheet-item:hover {
    background: var(--bg-hover);
}

.more-sheet-item .icon-circle {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
}

.more-sheet-item:hover .icon-circle {
    transform: scale(1.05);
}

.more-sheet-item .item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
}

/* ===================================================================== */
/* Hero Card (کارت اصلی داشبورد) */
/* ===================================================================== */

.hero-card {
    background: var(--gradient-hero);
    border-radius: var(--radius-3xl);
    padding: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-blue-lg);
}

.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-gereh-white);
    background-repeat: repeat;
    opacity: 1;
    pointer-events: none;
}

.hero-card > * {
    position: relative;
    z-index: 1;
}

/* دایره‌های تزئینی */
.hero-card .decor-circle-1 {
    position: absolute;
    top: -30%;
    left: -10%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-card .decor-circle-2 {
    position: absolute;
    bottom: -20%;
    right: -5%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* ===================================================================== */
/* Quick Action Buttons */
/* ===================================================================== */

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 0.75rem;
    border-radius: var(--radius-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    transition: all 0.25s ease;
    text-decoration: none;
    cursor: pointer;
}

.quick-action:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.quick-action .icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.quick-action:hover .icon-box {
    transform: scale(1.1);
}

.quick-action .action-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* ===================================================================== */
/* Stat Cards */
/* ===================================================================== */

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    transition: all 0.25s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    transition: transform 0.2s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ===================================================================== */
/* بهبودهای چاپ */
/* ===================================================================== */

@media print {
    .no-print,
    .sidebar,
    .bottom-nav,
    .top-header,
    .more-sheet,
    .sidebar-overlay {
        display: none !important;
    }
    main { margin-right: 0 !important; }
    body { background: white !important; color: black !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ===================================================================== */
/* Safe Area (iPhone Notch) */
/* ===================================================================== */

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

/* ===================================================================== */
/* Scroll Lock */
/* ===================================================================== */

body.no-scroll {
    overflow: hidden;
}

/* ===================================================================== */
/* Loading Spinner */
/* ===================================================================== */

.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===================================================================== */
/* Empty State */
/* ===================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-tertiary);
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h4 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.875rem;
    max-width: 320px;
}

/* ===================================================================== */
/* Responsive - Main content padding for mobile bottom nav */
/* ===================================================================== */

@media (max-width: 1023px) {
    main {
        padding-bottom: 5rem !important; /* فاصله از Bottom Nav */
    }
}

/* ===================================================================== */
/* Touch-friendly: larger tap targets */
/* ===================================================================== */

@media (max-width: 768px) {
    .sidebar-link,
    .quick-action,
    .more-sheet-item,
    .btn-primary,
    button[type="submit"] {
        min-height: 48px;
    }
}

/* ===================================================================== */
/* Accessibility: Focus visible */
/* ===================================================================== */

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===================================================================== */
/* Typography helpers */
/* ===================================================================== */

.text-balance {
    text-wrap: balance;
}

.tracking-tight {
    letter-spacing: -0.02em;
}

/* ===================================================================== */
/* Sidebar Menu Colors (Soft UI + Active States) */
/* ===================================================================== */

/* Base Sidebar Link Styling */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateX(-4px);
}

.sidebar-link .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-link .icon-wrapper svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.25s ease;
}

/* --- Color Variants --- */

/* Dashboard (Blue) */
.sidebar-link.color-dashboard .icon-wrapper {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.sidebar-link.color-dashboard:hover .icon-wrapper {
    background: rgba(59, 130, 246, 0.15);
}
.sidebar-link.color-dashboard.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.sidebar-link.color-dashboard.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Batches / Inventory (Emerald) */
.sidebar-link.color-batches .icon-wrapper {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.sidebar-link.color-batches:hover .icon-wrapper {
    background: rgba(16, 185, 129, 0.15);
}
.sidebar-link.color-batches.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.sidebar-link.color-batches.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Batches/Create (Teal) */
.sidebar-link.color-batches-create .icon-wrapper {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}
.sidebar-link.color-batches-create:hover .icon-wrapper {
    background: rgba(20, 184, 166, 0.15);
}
.sidebar-link.color-batches-create.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.sidebar-link.color-batches-create.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Issues (Rose/Red) */
.sidebar-link.color-issues .icon-wrapper {
    background: rgba(244, 63, 94, 0.1);
    color: #f43f5e;
}
.sidebar-link.color-issues:hover .icon-wrapper {
    background: rgba(244, 63, 94, 0.15);
}
.sidebar-link.color-issues.active {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: white;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}
.sidebar-link.color-issues.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Products (Purple) */
.sidebar-link.color-products .icon-wrapper {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}
.sidebar-link.color-products:hover .icon-wrapper {
    background: rgba(139, 92, 246, 0.15);
}
.sidebar-link.color-products.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.sidebar-link.color-products.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Parties (Amber) */
.sidebar-link.color-parties .icon-wrapper {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.sidebar-link.color-parties:hover .icon-wrapper {
    background: rgba(245, 158, 11, 0.15);
}
.sidebar-link.color-parties.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.sidebar-link.color-parties.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Categories (Indigo) */
.sidebar-link.color-categories .icon-wrapper {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}
.sidebar-link.color-categories:hover .icon-wrapper {
    background: rgba(99, 102, 241, 0.15);
}
.sidebar-link.color-categories.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.sidebar-link.color-categories.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Admin (Slate) - Default */
.sidebar-link.color-admin .icon-wrapper {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}
.sidebar-link.color-admin:hover .icon-wrapper {
    background: rgba(100, 116, 139, 0.15);
}
.sidebar-link.color-admin.active {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}
.sidebar-link.color-admin.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ============================================ */
/* Admin Submenus - رنگی و متمایز */
/* ============================================ */

/* کاربران - بنفش (Purple) */
.sidebar-link.color-admin-users .icon-wrapper {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}
.sidebar-link.color-admin-users:hover .icon-wrapper {
    background: rgba(139, 92, 246, 0.15);
}
.sidebar-link.color-admin-users.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.sidebar-link.color-admin-users.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* نقش‌ها - طلایی/کهربایی (Amber) */
.sidebar-link.color-admin-roles .icon-wrapper {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.sidebar-link.color-admin-roles:hover .icon-wrapper {
    background: rgba(245, 158, 11, 0.15);
}
.sidebar-link.color-admin-roles.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.sidebar-link.color-admin-roles.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* لاگ فعالیت‌ها - فیروزه‌ای (Teal) */
.sidebar-link.color-admin-logs .icon-wrapper {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}
.sidebar-link.color-admin-logs:hover .icon-wrapper {
    background: rgba(20, 184, 166, 0.15);
}
.sidebar-link.color-admin-logs.active {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}
.sidebar-link.color-admin-logs.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Dark Mode Adjustments for Admin Submenus */
html.dark .sidebar-link.color-admin-users .icon-wrapper { background: rgba(139, 92, 246, 0.15); }
html.dark .sidebar-link.color-admin-roles .icon-wrapper { background: rgba(245, 158, 11, 0.15); }
html.dark .sidebar-link.color-admin-logs .icon-wrapper { background: rgba(20, 184, 166, 0.15); }

/* Settings & Profile (Cyan) */
.sidebar-link.color-settings .icon-wrapper,
.sidebar-link.color-profile .icon-wrapper {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}
.sidebar-link.color-settings:hover .icon-wrapper,
.sidebar-link.color-profile:hover .icon-wrapper {
    background: rgba(6, 182, 212, 0.15);
}
.sidebar-link.color-settings.active,
.sidebar-link.color-profile.active {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
.sidebar-link.color-settings.active .icon-wrapper,
.sidebar-link.color-profile.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Dark Mode Adjustments for Sidebar */
html.dark .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

html.dark .sidebar-link.color-dashboard .icon-wrapper { background: rgba(59, 130, 246, 0.15); }
html.dark .sidebar-link.color-batches .icon-wrapper { background: rgba(16, 185, 129, 0.15); }
html.dark .sidebar-link.color-batches-create .icon-wrapper { background: rgba(20, 184, 166, 0.15); }
html.dark .sidebar-link.color-issues .icon-wrapper { background: rgba(244, 63, 94, 0.15); }
html.dark .sidebar-link.color-products .icon-wrapper { background: rgba(139, 92, 246, 0.15); }
html.dark .sidebar-link.color-parties .icon-wrapper { background: rgba(245, 158, 11, 0.15); }
html.dark .sidebar-link.color-categories .icon-wrapper { background: rgba(99, 102, 241, 0.15); }
html.dark .sidebar-link.color-admin .icon-wrapper { background: rgba(100, 116, 139, 0.15); }
html.dark .sidebar-link.color-settings .icon-wrapper,
html.dark .sidebar-link.color-profile .icon-wrapper { background: rgba(6, 182, 212, 0.15); }

/* Warehouses (Sky) */
.sidebar-link.color-warehouses .icon-wrapper {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}
.sidebar-link.color-warehouses:hover .icon-wrapper {
    background: rgba(2, 132, 199, 0.15);
}
.sidebar-link.color-warehouses.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.sidebar-link.color-warehouses.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
html.dark .sidebar-link.color-warehouses .icon-wrapper { background: rgba(2, 132, 199, 0.15); }

/* Barter (Orange) */
.sidebar-link.color-barter .icon-wrapper {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.sidebar-link.color-barter:hover .icon-wrapper {
    background: rgba(249, 115, 22, 0.15);
}
.sidebar-link.color-barter.active {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.sidebar-link.color-barter.active .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
html.dark .sidebar-link.color-barter .icon-wrapper { background: rgba(249, 115, 22, 0.15); }