/* =========================================================
   Design v03 — right-to-left overrides (Arabic)

   Loaded from _Layout ONLY when the active UI culture is RTL, after
   eduegate-portal.css, so nothing here costs anything in English.

   Every rule is prefixed with [dir="rtl"] on purpose. That is not decoration:
   it raises specificity to (0,2,0), which beats the plain single-class rules
   in the inline <style> blocks inside _Layout.cshtml. Those blocks appear later
   in the document than this <link>, so without the prefix they would win on
   source order and the help dialog would come out mirrored wrongly.

   Only the physically-directional declarations in eduegate-portal.css are
   restated here. Symmetric rules (left:0 AND right:0), flex-direction: column,
   and flex-direction: row-reverse are already direction-aware and are
   deliberately NOT touched — flexbox resolves row/row-reverse against the
   writing direction on its own.
   ========================================================= */

/* ---------- direction ----------
   Content/style.css (loaded by _Layout, but NOT by the standalone login page)
   contains `body { direction: ltr; ... }`. A CSS `direction` declaration beats the
   dir="rtl" HTML attribute for everything inside <body>, so the page stayed
   left-to-right even though <html dir="rtl"> was rendered correctly. That is why
   the login screen mirrored but the authenticated pages did not.

   `[dir="rtl"] body` is specificity (0,1,1) against that rule's (0,0,1), so this
   wins regardless of load order. */
[dir="rtl"] body,
[dir="rtl"] .wrapper {
    direction: rtl;
}

/* ---------- typography ----------
   Override the --eg3-font token itself rather than setting font-family on body, so every
   component that reads var(--eg3-font) picks Cairo up without being listed here.
   Poppins is kept in the stack after Cairo so Latin runs inside Arabic text (a student
   ID, an email, "EduGate") keep the portal's Latin face instead of Cairo's. */
[dir="rtl"] {
    --eg3-font: 'Cairo', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] .eg3-body {
    font-family: var(--eg3-font);
}

/* ---------- header: user chip ---------- */
[dir="rtl"] .eg3-user-chip {
    /* was 4px 8px 4px 4px — the tight side must stay against the avatar */
    padding: 4px 4px 4px 8px;
    text-align: right;
}

[dir="rtl"] .eg3-user-chip .eg3-caret {
    margin-left: 0;
    margin-right: 4px;
}

/* ---------- primary nav ---------- */
[dir="rtl"] .eg3-nav-caret {
    margin-left: 0;
    margin-right: -4px;
}

[dir="rtl"] .eg3-nav-submenu {
    left: auto;
    right: 0;
}

/* the Application dropdown is pinned with !important, so match it */
[dir="rtl"] .eg3-nav-list .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

/* ---------- profile menu ---------- */
[dir="rtl"] .eg3-profile-chev,
[dir="rtl"] .eg3-profile-mode {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .eg3-profile-email,
[dir="rtl"] .eg3-profile-name {
    text-align: right;
}

/* ---------- language switcher ---------- */
[dir="rtl"] .eg3-profile-lang-flag {
    margin-left: 0;
    margin-right: auto;
}

/* ---------- search ---------- */
[dir="rtl"] .eg3-search svg {
    right: auto;
    left: 10px;
}

[dir="rtl"] .eg3-search input {
    padding-left: 36px;
    padding-right: 12px;
}

/* ---------- selected-child chip ---------- */
[dir="rtl"] .eg3-childchip-wrap {
    margin-left: 0;
    margin-right: auto;
}

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

/* ---------- form controls ---------- */
[dir="rtl"] .eg3-select {
    padding-right: 12px;
    padding-left: 42px;
    background-position: left 16px center;
}

[dir="rtl"] .eg3-input,
[dir="rtl"] .eg3-textarea,
[dir="rtl"] .eg3-select {
    text-align: right;
}

/* Latin-only values stay LTR even inside an RTL form, otherwise an email or a
   phone number renders with its punctuation shunted to the wrong end. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"] {
    direction: ltr;
    text-align: right;
}

/* ---------- tables ---------- */
[dir="rtl"] .eg3-table th {
    text-align: right;
}

[dir="rtl"] .eg3-table th:first-child {
    border-radius: 0 8px 0 0;
}

[dir="rtl"] .eg3-table th:last-child {
    border-radius: 8px 0 0 0;
}

/* Money and dates stay Latin-digit and LTR — see the RequestLocalizationOptions
   note in Startup.cs. Cells opt in with .eg3-num. */
[dir="rtl"] .eg3-num {
    direction: ltr;
    text-align: right;
    unicode-bidi: embed;
}

/* ---------- toasts (notify) ---------- */
[dir="rtl"] .notify.notify--type-1 {
    border-left: 1px solid var(--eg3-border) !important;
    border-right: 4px solid var(--eg3-fg-3) !important;
}

[dir="rtl"] .notify.notify--type-1.notify--success { border-right-color: var(--eg3-success-fg) !important; }
[dir="rtl"] .notify.notify--type-1.notify--error { border-right-color: var(--eg3-danger-fg) !important; }
[dir="rtl"] .notify.notify--type-1.notify--warning { border-right-color: var(--eg3-warning-fg) !important; }

[dir="rtl"] .notify.notify--type-1 .notify__icon {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .notify.notify--type-1 .notify__close {
    right: auto;
    left: 14px;
}

/* ---------- help / support dialog (styles live inline in _Layout) ---------- */
[dir="rtl"] .eg3-help-mclose {
    right: auto;
    left: 16px;
}

[dir="rtl"] .eg3-help-mtitle {
    margin: 0 0 4px 24px;
}

/* ---------- skeleton shimmer ---------- */
[dir="rtl"] .eg3-skel::after {
    transform: translateX(100%);
    animation-name: eg3-shimmer-rtl;
}

@keyframes eg3-shimmer-rtl {
    100% { transform: translateX(-100%); }
}

/* ---------- icons that encode direction ---------- */
/* Chevrons/arrows that point "forward" must mirror; a caret pointing down must not,
   which is why this targets the back/forward classes rather than every svg. */
[dir="rtl"] .eg3-icon-back svg,
[dir="rtl"] .eg3-icon-next svg,
[dir="rtl"] .eg3-btn--icon-next svg,
[dir="rtl"] .eg3-breadcrumb-sep svg {
    transform: scaleX(-1);
}

/* ---------- mobile drawer ---------- */
@media (max-width: 1199.98px) {
    [dir="rtl"] .eg3-hdr-burger {
        margin-right: 0;
        margin-left: 8px;
    }

    /* drawer slides in from the right in RTL */
    [dir="rtl"] .eg3-nav .eg3-nav-list {
        transform: translateX(105%);
    }

    [dir="rtl"] .eg3-nav.is-open .eg3-nav-list {
        transform: translateX(0);
    }
}
