/* [جدید] تعریف متغیرهای فونت */
:root {
    --font-persian: 'Vazirmatn', sans-serif;
    --font-english: 'Roboto Mono', monospace;
}

:root[data-theme="default"] {
    --bg-color: #323437;
    --main-color: #e2b714;
    --sub-color: #646669;
    --text-color: #d1d0c5;
    --error-color: #ca4754;
    --success-color: #72b159;
    --panel-bg: #2c2e31;
    --main-color-rgb: 226, 183, 20;
    --btn-text-color: var(--bg-color);
    --nav-bg: #2c2e31;
}

:root[data-theme="matrix"] {
    --bg-color: #0d0d0d; /* پس‌زمینه ثابت تیره */
    --main-color: #00b140;
    --sub-color: #555;
    --text-color: #b3ffb3;
    --error-color: #ff0000;
    --success-color: #00b140;
    --panel-bg: rgba(26, 26, 26, 0.95);
    --main-color-rgb: 0, 177, 64;
    --btn-text-color: #0d0d0d;
    --nav-bg: #1a1a1a;
}

:root[data-theme="8008"] {
    --bg-color: #333a45;
    --main-color: #f44c7f;
    --sub-color: #4b535d;
    --text-color: #e5e5e5;
    --error-color: #f44c7f;
    --success-color: #83b692;
    --panel-bg: #2b313a;
    --main-color-rgb: 244, 76, 127;
    --btn-text-color: var(--bg-color);
    --nav-bg: #2b313a;
}

:root[data-theme="bento"] {
    --bg-color: #2d3047;
    --main-color: #ff7a90;
    --sub-color: #4b4e66;
    --text-color: #fffaf8;
    --error-color: #ff7a90;
    --success-color: #a0d9b1;
    --panel-bg: #23253a;
    --main-color-rgb: 255, 122, 144;
    --btn-text-color: var(--bg-color);
    --nav-bg: #23253a;
}

:root[data-theme="aether"] {
    --bg-color: #1a2c3a;
    --main-color: #63f2f1;
    --sub-color: #3a5669;
    --text-color: #c7ecee;
    --error-color: #ff7a90;
    --success-color: #63f2f1;
    --panel-bg: #13222e;
    --main-color-rgb: 99, 242, 241;
    --btn-text-color: var(--bg-color);
    --nav-bg: #13222e;
}

body {
    font-family: var(--font-persian);
    background: var(--bg-color);
    color: var(--text-color);
    background-image: none;
    background-attachment: fixed;
    direction: rtl;
    text-align: right;
    transition: background-color 0.3s, color 0.3s;
    /* فاصله از پایین برای نوار موبایل */
    padding-bottom: 80px; 
}

/* --- استایل‌های عمومی متن --- */
h1, h2, h3, h4, h5, h6, label, p, li, small, th, td {
    color: var(--text-color);
}
small.text-muted, .form-text.text-muted {
    color: var(--sub-color) !important;
}

/* --- کلاس‌های کمکی --- */
.font-english {
    font-family: var(--font-english) !important;
    direction: ltr;
    font-weight: 500;
}
.font-persian {
    font-family: var(--font-persian) !important;
}
.text-main {
    color: var(--main-color) !important;
}
.text-glow {
    color: var(--main-color) !important;
    text-shadow: 0 0 5px var(--main-color);
}
.text-sub {
    color: var(--sub-color) !important;
}
.text-body {
    color: var(--text-color) !important;
}

:root[data-theme="matrix"] .text-description {
    color: var(--text-color) !important;
    opacity: 0.9;
}

/* --- Navbar Desktop --- */
.navbar {
    background-color: var(--nav-bg) !important;
    border-bottom: 1px solid var(--sub-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.navbar-brand {
    font-family: var(--font-english);
    color: var(--main-color) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

/* --- [جدید] Bottom Navigation (Mobile) --- */
.mobile-bottom-nav {
    display: none; /* پیش‌فرض مخفی (برای دسکتاپ) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--nav-bg);
    border-top: 1px solid var(--sub-color);
    z-index: 1050;
    height: 65px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--sub-color);
    font-size: 0.75rem;
    transition: color 0.2s;
}

.mobile-nav-item i {
    font-size: 1.4rem;
    margin-bottom: 3px;
}

.mobile-nav-item.active {
    color: var(--main-color);
}
.mobile-nav-item:hover {
    color: var(--text-color);
}

/* --- [جدید] Mobile Top Header --- */
.mobile-top-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--sub-color);
    position: sticky;
    top: 0;
    z-index: 1040;
}

/* --- Media Queries برای موبایل --- */
@media (max-width: 991px) {
    /* حذف ماتریکس در موبایل */
    #matrix-bg {
        display: none !important;
    }
    
    /* حذف نوار ناوبری دسکتاپ */
    .desktop-navbar {
        display: none !important;
    }

    /* نمایش هدر و فوتر موبایل */
    .mobile-bottom-nav {
        display: flex;
    }
    .mobile-top-header {
        display: flex;
    }
    
    /* تنظیمات بدنه برای خوانایی بهتر */
    body {
        background-color: var(--bg-color);
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
}

/* --- سایر استایل‌ها --- */
.card {
    background-color: var(--panel-bg);
    border: 1px solid var(--sub-color);
    border-radius: 0.5rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.card-dark {
    background-color: var(--panel-bg);
    border: 1px solid var(--sub-color);
}
.card:hover {
    transform: translateY(-5px);
    border-color: var(--main-color);
    box-shadow: 0 8px 25px rgba(var(--main-color-rgb), 0.3);
}

.btn {
    font-family: var(--font-persian) !important;
    font-weight: 500;
    text-shadow: none !important;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.btn:hover, .btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--btn-text-color) !important;
}
.btn-primary:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: var(--bg-color);
    filter: brightness(1.2);
}

.btn-outline-primary {
    color: var(--main-color);
    border-color: var(--main-color);
}
.btn-outline-primary:hover {
    background-color: var(--main-color);
    color: var(--btn-text-color) !important;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--panel-bg);
}
.btn-success:hover { filter: brightness(1.2); }

.btn-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: var(--panel-bg);
}
.btn-danger:hover { filter: brightness(1.2); }

.btn-social {
    color: var(--text-color);
    background-color: var(--sub-color);
    border-color: var(--sub-color);
}
.btn-social:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    background-color: var(--sub-color);
}

.btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--sub-color);
}
.btn-outline-secondary:hover {
    background-color: var(--sub-color);
    border-color: var(--sub-color);
    color: var(--text-color);
    filter: brightness(1.2);
}

.form-control, .form-select {
    background-color: var(--panel-bg);
    border: 1px solid var(--sub-color);
    color: var(--text-color);
    font-family: var(--font-persian);
}
.form-control:focus, .form-select:focus {
    background-color: var(--panel-bg);
    border-color: var(--main-color);
    box-shadow: 0 0 10px rgba(var(--main-color-rgb), 0.5);
    color: var(--text-color);
}
.form-control::placeholder {
    color: var(--sub-color);
    font-family: var(--font-persian);
}
.form-select option {
    background-color: var(--panel-bg);
    color: var(--text-color);
}

hr { border-color: var(--sub-color); }

.text-muted { color: var(--sub-color) !important; }
.text-light { color: var(--text-color) !important; }
.text-warning { color: var(--main-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--error-color) !important; }

.alert-success {
    background-color: rgba(114, 177, 89, 0.2);
    border-color: var(--success-color);
    color: var(--text-color);
}
.alert-danger {
    background-color: rgba(202, 71, 84, 0.2);
    border-color: var(--error-color);
    color: var(--text-color);
}
.alert-info {
    background-color: rgba(226, 183, 20, 0.2);
    border-color: var(--main-color);
    color: var(--text-color);
}

.list-group-item {
    background-color: var(--panel-bg) !important;
    border-color: var(--sub-color) !important;
    color: var(--text-color) !important;
}
.table {
    border-color: var(--sub-color);
    color: var(--text-color) !important;
}
.table-dark {
    --bs-table-bg: var(--panel-bg);
    --bs-table-border-color: var(--sub-color);
}

a {
    color: var(--main-color);
    text-decoration: none;
}
a:hover {
    color: var(--main-color);
    filter: brightness(1.2);
}

.dropdown-menu {
    background-color: var(--panel-bg);
    border-color: var(--sub-color);
}
.dropdown-item { color: var(--text-color); }
.dropdown-item:hover {
    background-color: var(--bg-color);
    color: var(--main-color);
}

.modal-content {
    background-color: var(--panel-bg) !important;
    border-color: var(--sub-color) !important;
    color: var(--text-color) !important;
}

.badge.bg-primary {
    background-color: var(--main-color) !important;
    color: var(--btn-text-color) !important;
}
.badge.bg-secondary {
    background-color: var(--sub-color) !important;
    color: var(--btn-text-color) !important;
}

.article-content * {
    color: var(--text-color) !important;
    font-family: var(--font-persian) !important;
}
.article-content a {
    color: var(--main-color) !important;
    text-decoration: underline;
}

.theme-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    font-family: var(--font-english);
}
.theme-dropdown-menu .dropdown-item::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    border: 2px solid var(--sub-color);
}
.theme-dropdown-menu [data-theme="default"]::before { background-color: #e2b714; }
.theme-dropdown-menu [data-theme="matrix"]::before { background-color: #00b140; }
.theme-dropdown-menu [data-theme="8008"]::before { background-color: #f44c7f; }
.theme-dropdown-menu [data-theme="bento"]::before { background-color: #ff7a90; }
.theme-dropdown-menu [data-theme="aether"]::before { background-color: #63f2f1; }

#matrix-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #0d0d0d;
    opacity: 0.9;
}

.accordion-item {
    background-color: var(--panel-bg);
    border: 1px solid var(--sub-color);
    color: var(--text-color);
}
.accordion-button {
    background-color: var(--panel-bg);
    color: var(--text-color);
    font-family: var(--font-persian);
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bg-color);
    color: var(--main-color);
    box-shadow: inset 0 -1px 0 var(--sub-color);
}
.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.accordion-button:focus {
    box-shadow: 0 0 10px rgba(var(--main-color-rgb), 0.5);
    border-color: var(--main-color);
}
.accordion-body {
    background-color: var(--bg-color);
    color: var(--text-color);
}