/*!
 * negarnovin-ltr.css — LTR (left-to-right) companion for the Negarnovin WHMCS theme
 * ---------------------------------------------------------------------------
 * Scope : every rule is gated behind html[dir="ltr"]. RTL output is untouched.
 * Load  : AFTER assets/css/negarnovin-theme.css (last stylesheet of the theme).
 * Notes : the theme itself is largely written with logical properties
 *         (inset-inline-*, margin-inline-*, border-inline-*), so most of the
 *         layout mirrors automatically once dir="ltr" is set. This file only
 *         fixes (a) the physical values that were hard-coded for RTL,
 *         (b) the Bootstrap-RTL build that is currently loaded for every
 *         language, and (c) a handful of typographic islands.
 * ---------------------------------------------------------------------------
 * Recommended companion change in header.tpl (not done here):
 *   load vendor/bootstrap/bootstrap.min.css instead of bootstrap.rtl.min.css
 *   when dir="ltr". Section 02 below is a safety net for deployments that
 *   keep the RTL build loaded.
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   01. Document base
   ========================================================================== */
html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

/* --------------------------------------------------------------------------
   02. Bootstrap-RTL normalisation
   The RTL build hard-codes physical sides for these utilities/components.
   Higher specificity (html[dir] + class) beats the vendor !important rules.
   -------------------------------------------------------------------------- */
html[dir="ltr"] .text-start { text-align: left !important; }
html[dir="ltr"] .text-end   { text-align: right !important; }
html[dir="ltr"] .float-start { float: left !important; }
html[dir="ltr"] .float-end   { float: right !important; }

html[dir="ltr"] .ms-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="ltr"] .ms-2 { margin-left: .5rem  !important; margin-right: 0 !important; }
html[dir="ltr"] .ms-3 { margin-left: 1rem   !important; margin-right: 0 !important; }
html[dir="ltr"] .ms-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="ltr"] .ms-5 { margin-left: 3rem   !important; margin-right: 0 !important; }
html[dir="ltr"] .ms-auto { margin-left: auto !important; margin-right: 0 !important; }

html[dir="ltr"] .me-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="ltr"] .me-2 { margin-right: .5rem  !important; margin-left: 0 !important; }
html[dir="ltr"] .me-3 { margin-right: 1rem   !important; margin-left: 0 !important; }
html[dir="ltr"] .me-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="ltr"] .me-5 { margin-right: 3rem   !important; margin-left: 0 !important; }
html[dir="ltr"] .me-auto { margin-right: auto !important; margin-left: 0 !important; }

html[dir="ltr"] .ps-1 { padding-left: .25rem !important; padding-right: 0 !important; }
html[dir="ltr"] .ps-2 { padding-left: .5rem  !important; padding-right: 0 !important; }
html[dir="ltr"] .ps-3 { padding-left: 1rem   !important; padding-right: 0 !important; }
html[dir="ltr"] .ps-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="ltr"] .ps-5 { padding-left: 3rem   !important; padding-right: 0 !important; }

html[dir="ltr"] .pe-1 { padding-right: .25rem !important; padding-left: 0 !important; }
html[dir="ltr"] .pe-2 { padding-right: .5rem  !important; padding-left: 0 !important; }
html[dir="ltr"] .pe-3 { padding-right: 1rem   !important; padding-left: 0 !important; }
html[dir="ltr"] .pe-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="ltr"] .pe-5 { padding-right: 3rem   !important; padding-left: 0 !important; }

html[dir="ltr"] .border-start {
    border-right: 0 !important;
    border-left: var(--bs-border-width, 1px) solid var(--bs-border-color, currentColor) !important;
}
html[dir="ltr"] .border-end {
    border-left: 0 !important;
    border-right: var(--bs-border-width, 1px) solid var(--bs-border-color, currentColor) !important;
}

html[dir="ltr"] .dropdown-menu { text-align: left; }
html[dir="ltr"] .dropdown-toggle::after {
    margin-left: .255em;
    margin-right: 0;
}
html[dir="ltr"] .dropdown-menu-end[data-bs-popper]   { right: 0; left: auto; }
html[dir="ltr"] .dropdown-menu-start[data-bs-popper] { left: 0; right: auto; }

html[dir="ltr"] .alert-dismissible {
    padding-right: 3rem;
    padding-left: var(--bs-alert-padding-x, 1rem);
}
html[dir="ltr"] .alert-dismissible .btn-close { right: 0; left: auto; }

html[dir="ltr"] .accordion-button::after { margin-left: auto; margin-right: 0; }

html[dir="ltr"] .modal-header .btn-close {
    margin-right: calc(-.5 * var(--bs-modal-header-padding-x));
    margin-left: auto;
}

html[dir="ltr"] .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x, .5rem);
    padding-left: 0;
}

/* ==========================================================================
   03. Application shell — sidebar / topbar / announcement
   ========================================================================== */
html[dir="ltr"] #nv-sidebar {
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform: translateX(-100%);
}
html[dir="ltr"] #nv-sidebar.mobile-open { transform: translateX(0); }

/* The search icon is pinned to inset-inline-start; its physical padding
   still reserves the RTL side, so mirror the reserved space. */
html[dir="ltr"] .topbar-search-compact input {
    padding: 0.45rem 1rem 0.45rem 2.3rem !important;
}

/* ==========================================================================
   04. Navigation dropdowns / mega menu / mini cart
   ========================================================================== */
html[dir="ltr"] #nv-topbar .topbar-nav .dropdown-menu { left: 0; right: auto; }
html[dir="ltr"] #nv-topbar .dropdown-menu { text-align: left; }
html[dir="ltr"] #nv-topbar .dropdown-menu .dropdown-item {
    direction: ltr;
    text-align: left;
}
html[dir="ltr"] .nv-store-menu-sublist { padding: 0 0 0 0.7rem; }
html[dir="ltr"] #nv-topbar .nv-store-mega .nv-mega-menu {
    right: auto;
    left: 20%;
}

/* ==========================================================================
   05. Content, cards, tables, panels
   ========================================================================== */
html[dir="ltr"] .nv-breadcrumb-item + .nv-breadcrumb-item::before { content: '›'; }

/* ==========================================================================
   06. Forms
   ========================================================================== */
html[dir="ltr"] .input-group-phone,
html[dir="ltr"] .form-group .input-group { direction: ltr; }
html[dir="ltr"] .input-group-phone .form-control { text-align: left; }

/* ==========================================================================
   07. Typographic islands that must follow the reading direction
   ========================================================================== */
html[dir="ltr"] .user-email,
html[dir="ltr"] .nv-mc-name,
html[dir="ltr"] .nv-mc-name .nv-mc-domain,
html[dir="ltr"] .nv-multi-card-name,
html[dir="ltr"] .nv-footer-lockup-sub,
html[dir="ltr"] .login-stat-item { text-align: left; }

/* ==========================================================================
   08. Page-level inline styles that hard-code RTL
   (search fields, knowledge base, invoice AI box, error page, sessions)
   ========================================================================== */
html[dir="ltr"] .dl-search-input,
html[dir="ltr"] .dsc-search-input,
html[dir="ltr"] .kb-search-input,
html[dir="ltr"] .kbcc-search-input,
html[dir="ltr"] .nv-lp { direction: ltr; }

html[dir="ltr"] .kb-article-body th,
html[dir="ltr"] .kb-article-body td,
html[dir="ltr"] .nv-sess-table th,
html[dir="ltr"] .nv500-info,
html[dir="ltr"] .nv-inv-ai-body { text-align: left; }

/* ==========================================================================
   09. Client area / ticket sidebar
   ========================================================================== */
html[dir="ltr"] #sidebarTicketCc .list-group-item {
    direction: ltr;
    text-align: left;
}
html[dir="ltr"] #sidebarTicketCc form { direction: ltr; }

/* ==========================================================================
   10. Footer
   ========================================================================== */
html[dir="ltr"] .nv-footer-list a:hover,
html[dir="ltr"] .nv-f2-list a:hover { transform: translateX(3px); }
html[dir="ltr"] .nv-f2-list a { padding: 0.28rem 0 0.28rem 0.5rem; }

/* ==========================================================================
   11. Badges pinned with physical coordinates
   ========================================================================== */
html[dir="ltr"] .nv-notify-badge,
html[dir="ltr"] .nv-cart-badge {
    left: auto !important;
    right: -3px !important;
}

/* ==========================================================================
   12. Small-screen refinements
   ========================================================================== */
@media (max-width: 575.98px) {
    html[dir="ltr"] #nv-ai-panel { left: 0.75rem; right: 0.75rem; }
}

/* ==========================================================================
   13. Legacy utility shims (Bootstrap 4 era class names still used by old pages)
   ========================================================================== */
html[dir="ltr"] .text-left { text-align: left !important; }
html[dir="ltr"] .text-right { text-align: right !important; }
html[dir="ltr"] .ml-auto { margin-left: auto !important; }
html[dir="ltr"] .mr-auto { margin-right: auto !important; }
html[dir="ltr"] .dropdown-menu-right { right: 0; left: auto; }
html[dir="ltr"] .dropdown-menu-left { left: 0; right: auto; }
html[dir="ltr"] .pagination { justify-content: flex-start; }
html[dir="ltr"] .table th, html[dir="ltr"] .table td { text-align: left; }
html[dir="ltr"] .table th.text-center, html[dir="ltr"] .table td.text-center { text-align: center; }
html[dir="ltr"] .progress-bar { float: left; }