/* ============================================================================
   RIGHT-TO-LEFT LAYER — Kurdish (Sorani) and any other bidi language
   ----------------------------------------------------------------------------
   Loaded by base.html only when the active language is right-to-left, so an
   English visitor never downloads a byte of it.

   Django puts dir="rtl" on <html> for a bidi language, so every rule here is
   scoped to [dir='rtl'] and the LTR layout is left completely untouched.

   Three kinds of mirroring are needed:
     a) physical offsets (left/right) on absolutely-positioned elements
     b) directional padding, margins and borders
     c) transforms, because translateX(+n) moves the opposite way visually

   Content that must NOT mirror — ticket IDs, numbers, code, canvases — is
   forced back to LTR at the end of the file.
   ========================================================================= */

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

[dir='rtl'] {
  /* Arabic-script text needs more leading than Latin to stay readable. */
  --lh-base: 1.75;
  --lh-snug: 1.55;
}

[dir='rtl'] body {
  /* Inter carries no Arabic glyphs, so a Kurdish-capable face leads and Inter
     stays only as the fallback for embedded Latin (ticket IDs, emails). */
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', 'Segoe UI',
               'Inter', Tahoma, sans-serif;
  /* Negative tracking breaks the cursive joins between Arabic-script letters. */
  letter-spacing: 0;
}

[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3,
[dir='rtl'] h4, [dir='rtl'] h5, [dir='rtl'] h6,
[dir='rtl'] .page-title,
[dir='rtl'] .stat-value,
[dir='rtl'] .eyebrow,
[dir='rtl'] .badge {
  letter-spacing: 0;
}

/* ============================================================
   a) LAYOUT SHELL
   ============================================================ */

[dir='rtl'] .main-wrapper {
  transition: padding-right var(--t-base) var(--ease-out);
}
[dir='rtl'] .main-wrapper.with-sidebar {
  padding-left: 0;
  padding-right: var(--sidebar-w);
}
[dir='rtl'] body.sidebar-collapsed .main-wrapper.with-sidebar {
  padding-left: 0;
  padding-right: var(--sidebar-w-collapsed);
}

[dir='rtl'] .sidebar {
  inset: 0 0 0 auto;                    /* pin to the right edge */
  border-right: none;
  border-left: 1px solid var(--glass-border);
}

[dir='rtl'] .nav-item:hover { transform: translateX(-2px); }

[dir='rtl'] .nav-item.active::before {
  left: auto;
  right: -12px;
  border-radius: var(--r-full) 0 0 var(--r-full);
}

/* ---- Navbar ---- */
[dir='rtl'] .navbar-search i { left: auto; right: var(--sp-4); }
[dir='rtl'] .navbar-search input { padding: 0 var(--sp-10) 0 var(--sp-4); }

[dir='rtl'] .notification-dot { right: auto; left: 7px; }
[dir='rtl'] .user-chip-meta { text-align: right; }

[dir='rtl'] .dropdown-panel {
  right: auto;
  left: 0;
  transform-origin: top left;
}
[dir='rtl'] .dropdown-item { text-align: right; }

/* ============================================================
   b) SURFACES, FORMS, TABLES
   ============================================================ */

[dir='rtl'] .form-label .required { margin-left: 0; margin-right: 2px; }

[dir='rtl'] select.form-control,
[dir='rtl'] .form-select {
  padding-right: var(--sp-4);
  padding-left: var(--sp-10);
  background-position: left var(--sp-4) center;
}

[dir='rtl'] .table thead th { text-align: right; }
[dir='rtl'] .table thead th[data-sort]::after {
  margin-left: 0;
  margin-right: var(--sp-2);
}
[dir='rtl'] .td-actions { text-align: left; }
[dir='rtl'] .prop-val { text-align: left; }

/* The priority rail hugs the reading edge. */
[dir='rtl'] .priority-rail::before { inset: 0 0 0 auto; }
[dir='rtl'] .ticket-card { padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5); }

/* ---- Timeline & activity feed ---- */
[dir='rtl'] .timeline-step::before { left: auto; right: -50%; }

[dir='rtl'] .activity-feed { padding-left: 0; padding-right: var(--sp-8); }
[dir='rtl'] .activity-feed::before { left: auto; right: 15px; }
[dir='rtl'] .activity-marker { left: auto; right: -28px; }

/* ---- Comment thread: the accent bar swaps sides ---- */
[dir='rtl'] .comment.internal .comment-body {
  border-left: 1px solid rgba(245, 158, 11, 0.3);
  border-right: 3px solid var(--status-high);
}
[dir='rtl'] .comment.system .comment-body {
  border-left: 1px solid rgba(37, 99, 235, 0.26);
  border-right: 3px solid var(--brand-primary);
}

/* ---- Toasts ---- */
[dir='rtl'] .toast-container { right: auto; left: var(--sp-6); }

[dir='rtl'] .toast-message {
  border-left: 1px solid var(--glass-border-hi);
  border-right: 3px solid var(--brand-primary);
  animation: slideInLeft var(--t-base) var(--ease-out);
}
[dir='rtl'] .toast-success { border-right-color: var(--status-success); }
[dir='rtl'] .toast-error   { border-right-color: var(--status-danger); }
[dir='rtl'] .toast-warning { border-right-color: var(--status-warning); }
[dir='rtl'] .toast-info    { border-right-color: var(--status-info); }

/* ============================================================
   c) TRANSFORMS & ANIMATION
   ============================================================ */

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-110%); }
}

[dir='rtl'] .btn::after { transform: translateX(120%); }
[dir='rtl'] .btn:hover::after { transform: translateX(-120%); }

[dir='rtl'] .kb-suggestion:hover { transform: translateX(-3px); }

/* The shimmer must sweep in the reading direction. */
[dir='rtl'] .skeleton::after { animation-name: shimmerRtl; }
@keyframes shimmerRtl {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* ============================================================
   CHATBOT
   ============================================================ */

[dir='rtl'] .chat-launcher { right: auto; left: var(--sp-6); }

[dir='rtl'] .chat-window {
  right: auto;
  left: var(--sp-6);
  transform-origin: bottom left;
}
[dir='rtl'] .chat-msg.bot .chat-bubble {
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-xs);
}
[dir='rtl'] .chat-msg.user .chat-bubble {
  border-bottom-right-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-xs);
}
[dir='rtl'] .chat-actions { padding-left: 0; padding-right: 38px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 860px) {
  /* The drawer slides in from the right. */
  [dir='rtl'] .sidebar { transform: translateX(100%); }
  [dir='rtl'] body.sidebar-open .sidebar { transform: translateX(0); }
  [dir='rtl'] .main-wrapper.with-sidebar,
  [dir='rtl'] body.sidebar-collapsed .main-wrapper.with-sidebar {
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  [dir='rtl'] .chat-launcher { left: var(--sp-4); right: auto; }
  [dir='rtl'] .table tbody td { text-align: right; }
}

/* ============================================================
   CONTENT THAT MUST NEVER MIRROR
   ----------------------------------------------------------------
   Identifiers, numbers, code and canvases are direction-neutral data.
   Isolating them stops the bidi algorithm reordering strings such as
   "TKT-0042", "12/60" or "you@qiu.edu.iq".
   ============================================================ */

[dir='rtl'] .ticket-id,
[dir='rtl'] .text-mono,
[dir='rtl'] .tabular,
[dir='rtl'] .workload-count,
[dir='rtl'] .stat-value,
[dir='rtl'] .confidence-text,
[dir='rtl'] .kb-match,
[dir='rtl'] .page-info,
[dir='rtl'] pre,
[dir='rtl'] code,
[dir='rtl'] input[type='email'],
[dir='rtl'] input[type='url'],
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='password'] {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

/* Chart.js draws its own axes; the canvas stays LTR. */
[dir='rtl'] .chart-canvas-wrap,
[dir='rtl'] canvas {
  direction: ltr;
}

/* Meters fill from the reading edge; the inner fill is un-flipped so its
   gradient keeps running from the same colour. */
[dir='rtl'] .meter,
[dir='rtl'] .workload-bar,
[dir='rtl'] .confidence-bar { transform: scaleX(-1); }

[dir='rtl'] .meter-fill,
[dir='rtl'] .workload-fill,
[dir='rtl'] .confidence-fill { transform: scaleX(-1); }