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

/* ── Typography ── */
html[lang="fa"] body,
html[lang="fa"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-family: 'Vazirmatn', Tahoma, sans-serif !important;
}

html[lang="ar"] body,
html[lang="ar"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-family: 'Noto Sans Arabic', Tahoma, sans-serif !important;
}

html[lang="fa"] body {
    line-height: 1.75;
    letter-spacing: 0;
    word-spacing: 0.02em;
}

html[lang="ar"] body {
    line-height: 1.7;
    letter-spacing: 0;
}

html[dir="rtl"] {
    text-align: right;
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #content {
    direction: rtl;
    text-align: right;
}

/* Right-align readable text in main content (overrides inherited text-center on cards) */
html[dir="rtl"] #content h1,
html[dir="rtl"] #content h2,
html[dir="rtl"] #content h3,
html[dir="rtl"] #content h4,
html[dir="rtl"] #content h5,
html[dir="rtl"] #content h6,
html[dir="rtl"] #content p,
html[dir="rtl"] #content li,
html[dir="rtl"] #content label,
html[dir="rtl"] #content small,
html[dir="rtl"] #content .form-text,
html[dir="rtl"] #content .form-row-modern > [class*="col-md-"] {
    text-align: right;
}

html[dir="rtl"] #content .text-center,
html[dir="rtl"] #content h1.text-center,
html[dir="rtl"] #content h2.text-center,
html[dir="rtl"] #content h3.text-center,
html[dir="rtl"] #content h4.text-center,
html[dir="rtl"] #content h5.text-center,
html[dir="rtl"] #content p.text-center {
    text-align: center !important;
}

/* Persian/Arabic: avoid uppercase tracking used for English labels */
html[dir="rtl"] .filter-toolbar label,
html[dir="rtl"] .filter-toolbar h6,
html[dir="rtl"] .sidebar-language-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* ── RTL: Sidebar on RIGHT side ──
   With direction:rtl, flex row main-start is on the right.
   Smallest order sits on the right (sidebar). */
html[dir="rtl"] .wrapper {
    flex-direction: row;
}

html[dir="rtl"] #sidebar {
    order: 1 !important;
    direction: rtl;
    border-right: none;
    border-left: 1px solid var(--sidebar-border, #e5e7eb);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.06);
    text-align: right;
}

html[dir="rtl"] #content {
    order: 2 !important;
}

html[dir="rtl"] #sidebar ul.components {
    direction: rtl;
}

html[dir="rtl"] #sidebar ul li a {
    direction: rtl;
    text-align: right;
    flex-direction: row;
    justify-content: flex-start;
    border-left: none;
    border-right: 3px solid transparent;
}

html[dir="rtl"] #sidebar ul li a > span {
    text-align: right;
    flex: 1;
}

html[dir="rtl"] #sidebar ul li a:hover,
html[dir="rtl"] #sidebar ul li.active > a,
html[dir="rtl"] a[aria-expanded="true"] {
    border-left-color: transparent;
    border-right-color: var(--brand-primary, #2940B0);
}

html[dir="rtl"] .dropdown-toggle::after {
    right: auto;
    left: 1.25rem;
}

html[dir="rtl"] ul ul a {
    direction: rtl;
    text-align: right !important;
    padding: 0.5rem 2.75rem 0.5rem 1.25rem !important;
    border-left: none;
    border-right: 3px solid transparent;
}

html[dir="rtl"] li > .list-unstyled > li > a {
    margin-left: 0 !important;
    margin-right: 0;
    padding-right: 2.75rem !important;
    padding-left: 1.25rem !important;
}

/* ── Content header RTL ── */
html[dir="rtl"] #content > header {
    direction: rtl;
}

html[dir="rtl"] #content > header .col-md-3,
html[dir="rtl"] #content > header .col-md-2,
html[dir="rtl"] #content > header .col-md-1,
html[dir="rtl"] #content > header #page-name,
html[dir="rtl"] #content > header .col-md-8 {
    text-align: right;
}

html[dir="rtl"] #content > header .text-right {
    text-align: right !important;
}

html[dir="rtl"] #page-name > span {
    display: inline-block;
}

/* ── Bootstrap utility flips ── */
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }
html[dir="rtl"] .text-left   { text-align: right !important; }
html[dir="rtl"] .text-right  { text-align: left !important; }
html[dir="rtl"] .text-justify { text-align: right; }

html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }

/* Spacing utilities (Bootstrap 4) */
html[dir="rtl"] .ml-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-0 { margin-right: 0 !important; margin-left: 0 !important; }

/* ── Offset flips ── */
html[dir="rtl"] .offset-1  { margin-left: 0; margin-right: 8.333333%; }
html[dir="rtl"] .offset-2  { margin-left: 0; margin-right: 16.666667%; }
html[dir="rtl"] .offset-3  { margin-left: 0; margin-right: 25%; }
html[dir="rtl"] .offset-4  { margin-left: 0; margin-right: 33.333333%; }
html[dir="rtl"] .offset-5  { margin-left: 0; margin-right: 41.666667%; }
html[dir="rtl"] .offset-6  { margin-left: 0; margin-right: 50%; }
html[dir="rtl"] .offset-7  { margin-left: 0; margin-right: 58.333333%; }
html[dir="rtl"] .offset-8  { margin-left: 0; margin-right: 66.666667%; }
html[dir="rtl"] .offset-9  { margin-left: 0; margin-right: 75%; }
html[dir="rtl"] .offset-10 { margin-left: 0; margin-right: 83.333333%; }

@media (min-width: 768px) {
    html[dir="rtl"] .offset-md-1  { margin-left: 0; margin-right: 8.333333%; }
    html[dir="rtl"] .offset-md-2  { margin-left: 0; margin-right: 16.666667%; }
    html[dir="rtl"] .offset-md-3  { margin-left: 0; margin-right: 25%; }
    html[dir="rtl"] .offset-md-4  { margin-left: 0; margin-right: 33.333333%; }
}

/* ── Form controls RTL ── */
html[dir="rtl"] .form-control,
html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Keep technical / Latin values LTR for readability */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[name*="Email"],
html[dir="rtl"] input[id*="Email"],
html[dir="rtl"] input[name*="email"],
html[dir="rtl"] input[id*="email"],
html[dir="rtl"] input[name*="Password"],
html[dir="rtl"] input[id*="Password"],
html[dir="rtl"] input[name*="password"],
html[dir="rtl"] input[id*="password"],
html[dir="rtl"] input[name*="Username"],
html[dir="rtl"] input[id*="Username"],
html[dir="rtl"] input[name*="username"],
html[dir="rtl"] input[id*="username"],
html[dir="rtl"] input[name*="Website"],
html[dir="rtl"] input[id*="Website"],
html[dir="rtl"] input[name*="Code"],
html[dir="rtl"] input[id*="Code"],
html[dir="rtl"] input[name*="Key"],
html[dir="rtl"] input[id*="Key"],
html[dir="rtl"] input[name*="Phone"],
html[dir="rtl"] input[id*="Phone"],
html[dir="rtl"] input[name*="phone"],
html[dir="rtl"] input[id*="phone"],
html[dir="rtl"] .ltr-field,
html[dir="rtl"] .dir-ltr {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate;
}

html[dir="rtl"] input[type="radio"],
html[dir="rtl"] input[type="checkbox"] {
    margin-left: 0.375rem;
    margin-right: 0;
}

html[dir="rtl"] label {
    margin-right: 0;
}

html[dir="rtl"] .form-row-modern > [class*="col-md-"]:first-child {
    text-align: right;
}

html[dir="rtl"] .form-actions {
    justify-content: flex-start;
}

html[dir="rtl"] .custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
    left: auto;
    right: -1.5rem;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

html[dir="rtl"] .table .text-center,
html[dir="rtl"] .table th.text-center,
html[dir="rtl"] .table td.text-center {
    text-align: center !important;
}

html[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Modal / alert close buttons */
html[dir="rtl"] .modal-header .close,
html[dir="rtl"] .alert-dismissible .close {
    margin: -0.5rem auto -0.5rem -1rem;
    float: left;
}

html[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}

html[dir="rtl"] .modal-title {
    text-align: right;
}

/* Input groups */
html[dir="rtl"] .input-group > .form-control:not(:last-child),
html[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-radius: 0 0.25rem 0.25rem 0;
}

html[dir="rtl"] .input-group > .form-control:not(:first-child),
html[dir="rtl"] .input-group > .custom-select:not(:first-child) {
    border-radius: 0.25rem 0 0 0.25rem;
}

html[dir="rtl"] .input-group-prepend {
    margin-right: 0;
    margin-left: -1px;
}

html[dir="rtl"] .input-group-append {
    margin-left: 0;
    margin-right: -1px;
}

/* List groups & breadcrumbs */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0.5rem;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left: 0.5rem;
    float: right;
    content: "/";
}

html[dir="rtl"] .list-group {
    padding-right: 0;
}

/* Pagination */
html[dir="rtl"] .pagination {
    direction: rtl;
}

/* ── Auth pages RTL ── */
html[dir="rtl"] .login-language-switcher {
    right: auto;
    left: 15px;
}

html[dir="rtl"] #login-box .text-left {
    text-align: right !important;
}

html[dir="rtl"] #login-box .row > div {
    direction: rtl;
}

html[dir="rtl"] #login-box > div:last-child > div {
    text-align: right;
}

html[dir="rtl"] #login-page {
    direction: rtl;
}

html[dir="rtl"] #login-box {
    direction: rtl;
}

html[dir="rtl"] #login-box input[type="text"],
html[dir="rtl"] #login-box input[type="password"] {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] #login-box label {
    margin-right: 0.25rem;
}

html[dir="rtl"] .btn-my-primary,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn {
    letter-spacing: 0;
}

html[dir="rtl"] .culture-select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #sidebar .sidebar-header,
html[dir="rtl"] #sidebar .sidebar-header h3,
html[dir="rtl"] #sidebar .sidebar-header h3.text-center {
    text-align: center !important;
}

html[dir="rtl"] .sidebar-language-label {
    text-align: right;
}

html[dir="rtl"] .sidebar-footer {
    direction: rtl;
}

html[dir="rtl"] #content > header .header-username {
    text-align: left !important;
}

html[dir="rtl"] #content > header .header-logout {
    text-align: center;
}

/* Codes, IDs, and mixed Latin snippets stay LTR */
html[dir="rtl"] .ltr,
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] .mono,
html[dir="rtl"] [data-ltr="true"],
html[dir="rtl"] .dir-ltr {
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: left;
}

html[dir="rtl"] span.dir-ltr,
html[dir="rtl"] a.dir-ltr,
html[dir="rtl"] code.dir-ltr,
html[dir="rtl"] .ltr,
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] samp {
    display: inline-block;
}

/* ── Language switcher ── */
.language-switcher {
    z-index: 1100;
}

.language-switcher .culture-select {
    min-width: 130px;
    cursor: pointer;
    border-color: #2940B0;
    color: #2940B0;
    font-weight: 500;
    border-radius: 8px;
    padding: 4px 8px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.language-switcher .culture-select:hover,
.language-switcher .culture-select:focus {
    border-color: #2940e0;
    box-shadow: 0 0 0 3px rgba(41, 64, 176, 0.12);
    outline: none;
}

html[lang="fa"] .language-switcher .culture-select,
html[lang="ar"] .language-switcher .culture-select {
    font-size: 0.875rem;
}

/* ── Scrollbar RTL ── */
html[dir="rtl"] ::-webkit-scrollbar-track {
    border-left: none;
    border-right: none;
}

/* ── Footer RTL ── */
html[dir="rtl"] body > footer {
    direction: rtl;
}

/* Farsi-specific readability in cards / long descriptions */
html[lang="fa"] #login-box p,
html[lang="fa"] #content p,
html[lang="fa"] .form-text,
html[lang="fa"] small {
    line-height: 1.85;
}

html[lang="fa"] #sidebar ul li a {
    font-size: 0.9rem;
}

html[lang="fa"] #page-name > span {
    font-size: 1.125rem;
}

html[lang="fa"] .btn,
html[lang="fa"] .btn-my-primary,
html[lang="fa"] #btn-short-new-task {
    font-weight: 600;
}

/* Centered cards stay centered (overview tiles, payment, headings) */
html[dir="rtl"] .text-center,
html[dir="rtl"] .text-center h1,
html[dir="rtl"] .text-center h2,
html[dir="rtl"] .text-center h3,
html[dir="rtl"] .text-center h4,
html[dir="rtl"] .text-center h5,
html[dir="rtl"] .text-center h6,
html[dir="rtl"] .text-center p,
html[dir="rtl"] .text-center small,
html[dir="rtl"] .text-center label {
    text-align: center !important;
}

html[dir="rtl"] .form-control.text-center,
html[dir="rtl"] input.text-center,
html[dir="rtl"] #txt-key-character-1,
html[dir="rtl"] #txt-key-character-2,
html[dir="rtl"] #txt-key-character-3 {
    direction: ltr !important;
    text-align: center !important;
}

/* Login marketing panel: align to the start without a second flip */
html[dir="rtl"] .login-aside,
html[dir="rtl"] .login-aside h5,
html[dir="rtl"] .login-aside p {
    text-align: right !important;
}

/* Fullscreen video close sits on the end side */
html[dir="rtl"] #video-player > div {
    right: auto;
    left: 3%;
}

/* Signup back control sits on the start side */
html[dir="rtl"] #sign-up-page-back {
    left: auto;
    right: 10px;
}

html[dir="rtl"] #chb-agree-1,
html[dir="rtl"] #chb-agree-2 {
    margin-right: 0;
    margin-left: 0.375rem;
}

/* Filter toolbars: column order already reverses, so drop the extra offset */
html[dir="rtl"] .filter-toolbar [class*="offset-"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Comment composer: icon column lands on the left; pad toward the field */
html[dir="rtl"] #comment-box .col-md-1 {
    padding-left: 0 !important;
    padding-right: 2% !important;
}

html[dir="rtl"] #btn-submit-comment,
html[dir="rtl"] .fa-reply {
    transform: scaleX(-1);
}

@media (max-width: 991.98px) {
    html[dir="rtl"] #sidebar {
        left: auto;
        right: 0;
        margin: 0 !important;
        transform: translateX(105%);
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.16);
    }

    html[dir="rtl"] #sidebar.is-open {
        transform: translateX(0);
    }

    html[dir="rtl"] .offset-1,
    html[dir="rtl"] .offset-2,
    html[dir="rtl"] .offset-3,
    html[dir="rtl"] .offset-4,
    html[dir="rtl"] .offset-5,
    html[dir="rtl"] .offset-6,
    html[dir="rtl"] .offset-7,
    html[dir="rtl"] .offset-8,
    html[dir="rtl"] .offset-9,
    html[dir="rtl"] .offset-10 {
        margin-right: 0 !important;
    }
}