/**
 * rtl-ltr.css - LTR Layout Overrides
 *
 * When the app is switched to a left-to-right language (e.g. English),
 * these rules flip physical-direction CSS properties so the layout
 * reads naturally in that direction.
 *
 * Uses the html[dir="ltr"] selector applied by setLanguage().
 */

/* ─── Spinner FAB ─── */
html[dir="ltr"] .spinner-fab {
  right: auto;
  left: 18px;
}

/* ─── Spinner close button ─── */
html[dir="ltr"] .sp-close {
  right: auto;
  left: 12px;
}

/* ─── Toast container ─── */
html[dir="ltr"] #toast-container {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Stat popup close ─── */
html[dir="ltr"] .stat-popup-close {
  right: auto;
  left: 12px;
}

/* ─── Task bonus badge ─── */
html[dir="ltr"] .task-bonus {
  right: auto;
  left: 4px;
}

/* ─── Time bar positioning ─── */
html[dir="ltr"] .time-bar-estimated,
html[dir="ltr"] .time-bar-actual {
  right: auto;
  left: 0;
}

/* ─── Missing tool warning alt text ─── */
html[dir="ltr"] .mtw-alt {
  padding-right: 0;
  padding-left: 20px;
  border-right: none;
  border-left: 2px solid rgba(255,229,86,0.2);
}

/* ─── Room bar note position ─── */
html[dir="ltr"] .room-bar-note {
  right: auto;
}

/* ─── XP note position (JS handles the exact value) ─── */
html[dir="ltr"] #xpNote {
  right: auto;
}

/* ─── Floating notes direction ─── */
html[dir="ltr"] .floating-note {
  right: auto;
  animation-name: floatNote-ltr;
}

@keyframes floatNote-ltr {
  0%   { transform: translateX(-100px) translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateX(calc(100vw + 100px)) translateY(-100px) rotate(360deg); opacity: 0; }
}

/* ─── General text direction ─── */
html[dir="ltr"] .task-search,
html[dir="ltr"] .custom-task-form input,
html[dir="ltr"] .custom-task-form textarea,
html[dir="ltr"] .task-edit-form input,
html[dir="ltr"] .task-edit-form textarea {
  direction: ltr;
  text-align: left;
}

/* ─── Room toggle arrow ─── */
html[dir="ltr"] .room-toggle {
  margin-left: 0;
  margin-right: auto;
}

/* ─── Log entry time ─── */
html[dir="ltr"] .log-time {
  direction: ltr;
}

/* ─── Music player bar collapse ─── */
html[dir="ltr"] .mpb-collapse {
  right: auto;
  left: 6px;
}

/* ─── Boss overlay text alignment ─── */
html[dir="ltr"] .boss-overlay {
  direction: ltr;
}

/* ─── Shopping list toggle ─── */
html[dir="ltr"] .shopping-toggle {
  margin-right: 0;
  margin-left: auto;
}