@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');

/* اعمال اجباری فونت روی تمام تگ‌ها */
*, *::before, *::after {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
}

html, body {
    direction: rtl;
    text-align: right;
    margin: 0;
    padding: 0;
}

a, .btn-link {
    color: #006bb7;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "خطایی رخ داده است.";
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.btn-tab {
    padding: 10px 20px;
    margin: 0 5px 0 0;
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 14px;
    color: #2c3e50;
    transition: all 0.2s;
}

    .btn-tab:hover {
        background: #d5dbdb;
    }

    .btn-tab.active {
        background: #2980b9;
        color: white;
        border-color: #2980b9;
        font-weight: bold;
    }

.table {
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 13px;
    width: 100%;
}

    .table th,
    .table td {
        padding: 8px 12px;
        text-align: right;
        border: 1px solid #ddd;
    }

.table-striped tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.table-striped tbody tr:hover {
    background: #eaf4fb;
}

/* =========================================
   Dark Mode
   ========================================= */
.dark-mode {
    background: #1a1a2e !important;
    color: #e8e8e8 !important;
}

    .dark-mode > div,
    .dark-mode > div > div {
        background: #16213e !important;
    }

    .dark-mode [style*="background: white"],
    .dark-mode [style*="background:white"],
    .dark-mode [style*="background-color: white"],
    .dark-mode [style*="background: #ffffff"],
    .dark-mode [style*="background:#ffffff"],
    .dark-mode [style*="background: #fff"],
    .dark-mode [style*="background:#fff"],
    .dark-mode [style*="background: #FFFFFF"],
    .dark-mode [style*="#FFFFFF"],
    .dark-mode [style*="#ffffff"] {
        background: #0f3460 !important;
        background-color: #0f3460 !important;
        color: #e8e8e8 !important;
    }

    .dark-mode [style*="background: #ecf0f1"],
    .dark-mode [style*="background:#ecf0f1"],
    .dark-mode [style*="background: #f5f7fa"],
    .dark-mode [style*="background:#f5f7fa"],
    .dark-mode [style*="background: #f8fafc"],
    .dark-mode [style*="background:#f8fafc"],
    .dark-mode [style*="background: #f8f9fa"],
    .dark-mode [style*="background:#f8f9fa"],
    .dark-mode [style*="background: #f4f6f7"],
    .dark-mode [style*="background:#f4f6f7"],
    .dark-mode [style*="background: #fafafa"],
    .dark-mode [style*="background:#fafafa"],
    .dark-mode [style*="background: #f0f4f8"] {
        background: #16213e !important;
        background-color: #16213e !important;
        color: #e8e8e8 !important;
    }

    .dark-mode h1,
    .dark-mode h2,
    .dark-mode h3,
    .dark-mode h4,
    .dark-mode h5,
    .dark-mode [style*="color: #2c3e50"],
    .dark-mode [style*="color:#2c3e50"],
    .dark-mode [style*="color: #34495e"],
    .dark-mode [style*="color:#34495e"],
    .dark-mode [style*="color: #0F3A4D"] {
        color: #e8e8e8 !important;
    }

    .dark-mode table {
        background: #0f3460 !important;
    }

    .dark-mode td {
        background: #0f3460 !important;
        color: #e8e8e8 !important;
        border-color: #1a4a6e !important;
    }

    .dark-mode th {
        background: #0a2540 !important;
        color: white !important;
    }

    .dark-mode input,
    .dark-mode select,
    .dark-mode textarea {
        background: #16213e !important;
        color: #e8e8e8 !important;
        border-color: #1a4a6e !important;
    }

    .dark-mode a {
        color: #4fc3f7 !important;
    }