/* rtl.css — right-to-left layout for Hebrew ([#7-STG], D-worker-portal-hebrew). Loaded after the four reference
   stylesheets, which stay untouched. Every rule here is scoped to html[dir="rtl"], so German, English and Romanian
   (no dir attribute) never match any of it. Flex and grid rows mirror by themselves under dir="rtl"; this file only
   mirrors what the reference fixed to a physical side (left/right offsets, side margins, side borders, text-align,
   horizontal transforms), in the same media contexts and order as the reference, and isolates fields that must stay
   left to right. law worker-portal-app.h checks the scope. */

/* directional icons: arrows, chevrons and the sign-out arrow point the reading way */
html[dir="rtl"] svg.dir-icon { transform: scaleX(-1); }

/* inputs whose content is left to right by nature stay readable: time, date, month, number, e-mail, password */
html[dir="rtl"] input[type="time"], html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"] { direction: ltr; text-align: right; }

/* the reference spaces out small capitals and tightens big Latin headings; Hebrew letters must not be pulled apart
   or squeezed, so letter spacing is normal everywhere in Hebrew */
html[dir="rtl"] body, html[dir="rtl"] body * { letter-spacing: normal !important; }

/* shown free text (description, notes, materials, table tasks) keeps its own direction (dir="auto") but lines up with
   the right-to-left page */
html[dir="rtl"] dd[dir="auto"], html[dir="rtl"] td[dir="auto"] { text-align: right; }

/* an empty free-text field shows its Hebrew placeholder right to left; typed text then follows dir="auto" */
html[dir="rtl"] textarea[dir="auto"]:placeholder-shown, html[dir="rtl"] input[dir="auto"]:placeholder-shown { direction: rtl; }

/* style.css */
html[dir="rtl"] .visual-copy { left: 45px; right: 60px; }
html[dir="rtl"] .visual-bottom { left: 45px; right: 60px; }
html[dir="rtl"] .sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--border); }
html[dir="rtl"] .sidebar nav button { text-align: right; }
html[dir="rtl"] .sidebar nav button b { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .person button { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .main-area { margin-left: 0; margin-right: 234px; }
html[dir="rtl"] .cta-card>img { right: auto; left: 0; mask-image: linear-gradient(270deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(270deg, transparent, #000 40%); }
html[dir="rtl"] .total-card:after { right: auto; left: -36px; }
html[dir="rtl"] .total-card>strong>small { margin-left: 0; margin-right: 9px; }
html[dir="rtl"] .stats-row strong { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .report-row { text-align: right; }
html[dir="rtl"] .report-time { text-align: left; }
html[dir="rtl"] .report-row>.badge { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .stepper button { text-align: right; }
html[dir="rtl"] .switch-row input { right: auto; left: 18px; }
html[dir="rtl"] .switch-row i:after { left: auto; right: 3px; }
html[dir="rtl"] .switch-row input:checked+i:after { transform: translateX(-16px); }
html[dir="rtl"] .photo-tile button { right: auto; left: 5px; }
html[dir="rtl"] .travel summary span { margin-left: 0; margin-right: 10px; }
@media (max-width:1150px) {
  html[dir="rtl"] .main-area { margin-left: 0; margin-right: 200px; }
  html[dir="rtl"] .visual-copy { left: 25px; right: 40px; }
  html[dir="rtl"] .visual-bottom { left: 25px; right: 40px; }
}
@media (max-width:800px) {
  html[dir="rtl"] .main-area { margin: 0; }
  html[dir="rtl"] .stats-row strong { margin: 3px 25px 0 0; }
}
@media (max-width:540px) {
  html[dir="rtl"] .page-intro .month-picker { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .total-card>strong { text-align: left; }
  html[dir="rtl"] .stats-row strong { margin-right: 0; }
  html[dir="rtl"] .report-main { padding-left: 0; }
  html[dir="rtl"] .report-row>.badge { margin: 0 41px 0 0; }
  html[dir="rtl"] .report-row>svg:last-child { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .form-actions>div>.primary { margin-left: 0; margin-right: auto; }
}
@media print {
  html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
  html[dir="rtl"] .main-area { margin: 0 !important; }
}

/* portal.css */
html[dir="rtl"] .calendar-day { text-align: right; }

/* mobile.css (the install help page uses it too) */
html[dir="rtl"] .help-page ol { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .help-page #install-steps ol li { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] .photo-group button { text-align: right; }

/* refine.css */
html[dir="rtl"] .sidebar nav button:hover { transform: translateX(-3px); }
html[dir="rtl"] .sidebar nav button.active { box-shadow: inset -3px 0 var(--orange); }
html[dir="rtl"] .report-row:hover { transform: translateX(-2px); }
html[dir="rtl"] .data-table th { text-align: right; }
html[dir="rtl"] .table-open { text-align: right; }
html[dir="rtl"] .data-table .number { text-align: left; }
html[dir="rtl"] .summary-line { text-align: right; }
html[dir="rtl"] .photo-open span { right: auto; left: 8px; }
html[dir="rtl"] .feedback-dot { right: auto; left: 5px; }