/* ==========================================================================
   Raddad - bidirectional layout layer.

   Loaded after the normal page styles. English remains untouched. Arabic sets
   dir=rtl on <html>; flex/grid components then mirror naturally, while this
   file fixes the few physical left/right anchors that cannot follow direction
   on their own. No colour/theme tokens are overridden here.
   ========================================================================== */

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

html[dir="rtl"] .raddad-dashboard {
  direction: rtl;
}

/* Authenticated child templates still contain English source copy that is
   translated by the presentation layer. Keep only the page body hidden until
   those already-known strings are translated, while the server-rendered shell
   (rail/topbar) stays visible. This removes the English -> Arabic flash and
   keeps the pre-translation content out of the accessibility tree. */
html.i18n-pending[lang="ar"] .rd-app .main {
  visibility: hidden;
}

/* Keep machine-oriented values readable and isolated even inside an Arabic
   sentence. Isolation matters for IDs/URLs next to Arabic punctuation and
   prevents surrounding RTL text from reordering the machine value. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .mono,
html[dir="rtl"] .td-mono,
html[dir="rtl"] .input-mono,
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* User-authored content chooses its own direction independently from the UI
   and is kept as its own BiDi paragraph so mixed Arabic/Latin content cannot
   reorder adjacent interface punctuation or metadata. */
html[dir="rtl"] [dir="auto"] {
  text-align: start;
  unicode-bidi: plaintext;
}

/* The profile control moves to the left edge when the top bar mirrors, so its
   absolutely-positioned menu must anchor to that edge as well. */
html[dir="rtl"] .raddad-dashboard .user-menu {
  right: auto;
  left: 0;
  text-align: right;
}

/* Avatar's Instagram badge is a trailing-corner decoration. */
html[dir="rtl"] .raddad-dashboard .avatar-badge {
  right: auto;
  left: -3px;
}

/* Same reasoning as .avatar-badge above: a single absolutely-positioned dot,
   safe to mirror without touching any sibling's layout. */
html[dir="rtl"] .raddad-dashboard .badge-dot {
  right: auto;
  left: 9px;
}

/* The toggle switch thumb rests and slides along the physical left in its
   base LTR rule; mirror both the resting edge and the checked-state travel
   direction so it doesn't appear to slide backward in RTL. */
html[dir="rtl"] .rd-ui .switch-thumb {
  left: auto;
  right: 2px;
}
html[dir="rtl"] .rd-ui .switch input:checked + .switch-track .switch-thumb {
  transform: translateX(-17px);
}

/* Required-field marker sits after the label in reading order; its LTR rule
   uses margin-left, so use margin-right in RTL instead. */
html[dir="rtl"] .rd-ui .field-required {
  margin-left: 0;
  margin-right: 2px;
}

/* Toasts anchor bottom-right, carry a left accent stripe, and slide in from
   the right - all tuned for LTR reading order. Mirror the anchor corner, the
   accent's side (all three severities), the dismiss button's snug-corner
   margin (it is the last flex child, which becomes the visually leftmost one
   once dir=rtl reverses the row), and the entrance direction. Keyframes
   cannot be scoped under a selector, so a second, mirrored keyframe is
   swapped in by name instead. */
html[dir="rtl"] .rd-ui .toast-wrap {
  right: auto;
  left: 20px;
}
html[dir="rtl"] .rd-ui .toast {
  border-left: 1px solid var(--rd-border);
  border-right: 3px solid var(--rd-blue);
}
html[dir="rtl"] .rd-ui .toast.ok {
  border-left-color: var(--rd-border);
  border-right-color: var(--rd-green);
}
html[dir="rtl"] .rd-ui .toast.err {
  border-left-color: var(--rd-border);
  border-right-color: var(--rd-red);
}
html[dir="rtl"] .rd-ui .toast.warn {
  border-left-color: var(--rd-border);
  border-right-color: var(--rd-amber);
}
html[dir="rtl"] .rd-ui .toast-dismiss {
  margin: -3px 0 -3px -3px;
}
@keyframes rd-toast-in-rtl {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] .rd-ui .toast {
    animation-name: rd-toast-in-rtl;
  }
}

/* Directional arrows are semantic rather than decorative: mirror them while
   leaving non-directional glyphs alone. */
html[dir="rtl"] .raddad-dashboard .rtl-mirror {
  transform: scaleX(-1);
}

/* Locale control lives with the other top-bar controls but deliberately looks
   quieter than a primary action. */
.raddad-dashboard .locale-switch-form {
  display: inline-flex;
  margin: 0;
}

.raddad-dashboard .locale-switch-btn {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--d-border-soft);
  border-radius: 11px;
  background: var(--d-fill);
  color: var(--d-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--d-motion) var(--d-ease),
              border-color var(--d-motion) var(--d-ease),
              transform var(--d-motion-fast) var(--d-ease);
}

.raddad-dashboard .locale-switch-btn:hover {
  background: var(--d-fill-hover);
  border-color: var(--d-border);
}

.raddad-dashboard .locale-switch-btn:active {
  transform: scale(var(--d-press));
}

.raddad-dashboard .locale-switch-btn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* Brand scope switcher. With JS it is upgraded to the shared themed select
   (raddad-select.css); this is the no-JS native control, drawn to the same
   spec so the closed state never looks like a browser default. */
.raddad-dashboard .brand-switch-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.raddad-dashboard .brand-switch-select {
  height: 44px;
  min-width: 168px;
  max-width: 240px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--rd-input-border, var(--d-border-soft));
  border-radius: 14px;
  background-color: var(--rd-input-bg, var(--d-fill));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0bed9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  color: var(--d-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

html[dir="rtl"] .raddad-dashboard .brand-switch-select {
  padding: 0 14px 0 38px;
  background-position: left 13px center;
}

.raddad-dashboard .brand-switch-select:focus-visible {
  outline: none;
  border-color: rgba(61, 145, 255, .62);
  box-shadow: 0 0 0 3px rgba(61, 145, 255, .16), 0 0 22px rgba(99, 102, 241, .18);
}

/* --------------------------------------------------------------------------
   Campaign Builder
   -------------------------------------------------------------------------- */

html[dir="rtl"] .rd-app .step-header {
  text-align: right;
}

html[dir="rtl"] .rd-app .step-optional-tag {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .rd-app [data-remove-variant] {
  margin-left: 0;
  margin-right: auto;
}

/* Character counters are numeric UI, not Arabic prose. Keep the complete
   current/max token isolated LTR so 10 / 20 never renders as 20 / 10. */
html[dir="rtl"] .rd-app .char-count,
html[dir="rtl"] .rd-app #final-combined-count {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* The DM/follow/final preview bubbles are visually offset toward the sending
   side. Their English rule uses margin-left, so swap the physical edge. */
html[dir="rtl"] .rd-app .preview-bubble.is-dm,
html[dir="rtl"] .rd-app .preview-bubble.is-follow,
html[dir="rtl"] .rd-app .preview-bubble.is-final,
html[dir="rtl"] .rd-app .preview-buttons,
html[dir="rtl"] .rd-app .preview-link {
  margin-left: 0;
  margin-right: 18px;
}

html[dir="rtl"] .rd-app .preview-link {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Workflow arrows point in the reading direction. `transform` does not apply
   reliably to a normal inline box, so make the arrow an inline-block before
   mirroring it. */
html[dir="rtl"] .rd-app .workflow-map b {
  display: inline-block;
  transform: scaleX(-1);
}

/* Button/action rows keep their labels RTL but URLs and machine values LTR. */
html[dir="rtl"] .rd-app .button-row-action input[data-button-value] {
  unicode-bidi: plaintext;
}

/* Campaign cards and action clusters mirror through flex naturally; these
   explicit alignments prevent inherited legacy left alignment from winning. */
html[dir="rtl"] .rd-app .campaign-title,
html[dir="rtl"] .rd-app .campaign-meta,
html[dir="rtl"] .rd-app .campaign-caption,
html[dir="rtl"] .rd-app .field-label,
html[dir="rtl"] .rd-app .field-hint,
html[dir="rtl"] .rd-app .step-desc,
html[dir="rtl"] .rd-app .preview-scope-note {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Conversations / Inbox
   -------------------------------------------------------------------------- */

/* In RTL the conversation list occupies the right column automatically through
   grid direction. Mirror the chat sides too: incoming starts on the right,
   operator/outgoing messages on the left. Message text itself still uses
   dir=auto so Arabic/English content remains independently readable. */
html[dir="rtl"] .rd-ui .inbox-msg-in {
  align-self: flex-end;
  align-items: flex-end;
}
html[dir="rtl"] .rd-ui .inbox-msg-out {
  align-self: flex-start;
  align-items: flex-start;
}

/* Mobile "back" points toward the list, which is the right side in RTL. */
html[dir="rtl"] .rd-ui .inbox-back .rail-icon {
  transform: none;
}

html[dir="rtl"] .rd-ui .inbox-policy-note {
  padding-left: 0;
  padding-right: 9px;
  border-left: 0;
  border-right: 2px solid var(--rd-border-soft);
}

html[dir="rtl"] .rd-ui .inbox-attachment-menu {
  left: auto;
  right: 0;
}

html[dir="rtl"] .rd-ui .inbox-attachment-menu button {
  text-align: right;
}

html[dir="rtl"] .rd-ui .inbox-attachment-panel {
  padding-left: 12px;
  padding-right: 52px;
}

html[dir="rtl"] .rd-ui .inbox-attachment-panel::before {
  left: auto;
  right: 13px;
}

/* Comment/attention action columns and metadata stay aligned to the reading
   edge while IDs remain LTR through .td-mono above. */
html[dir="rtl"] .rd-ui .comment-body,
html[dir="rtl"] .rd-ui .comment-side,
html[dir="rtl"] .rd-ui .comment-meta,
html[dir="rtl"] .rd-ui .comments-pager-info {
  text-align: right;
}

/* Long Arabic labels need a little more breathing room in the bottom rail. */
@media (max-width: 900px) {
  html[dir="rtl"] .raddad-dashboard .rail-item {
    line-height: 1.25;
  }
}

/* Below 1080px the campaign row wraps and its status pill uses margin-left:
   auto to push itself to the far edge of the now row-reverse .campaign-side.
   Mirror it, then cancel the mirrored margin at the same ≤620px point the
   LTR rule cancels its own (campaigns.css resets margin-left there once the
   side column stops being a single reversed row). */
@media (max-width: 1080px) {
  html[dir="rtl"] .rd-ui .campaign-side > .pill {
    margin-left: 0;
    margin-right: auto;
  }
}

@media (max-width: 620px) {
  html[dir="rtl"] .rd-app [data-remove-variant] {
    margin-right: 0;
  }
  html[dir="rtl"] .rd-ui .campaign-side > .pill {
    margin-right: 0;
  }
}