/* RTL (Right-to-Left) Support voor Arabische taal
 * Gebaseerd op Unicode Bidirectional Algorithm (UAX #9)
 * Zie: https://www.w3.org/International/questions/qa-html-dir
 */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* MudBlazor Component Overrides */

/* Navigation & Layout */
[dir="rtl"] .mud-drawer {
    right: 0;
    left: auto;
}

[dir="rtl"] .mud-drawer-open {
    transform: translateX(0);
}

[dir="rtl"] .mud-drawer-close {
    transform: translateX(100%);
}

[dir="rtl"] .mud-nav-link {
    padding-right: 24px;
    padding-left: 16px;
}

[dir="rtl"] .mud-nav-link .mud-icon-start {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .mud-appbar .mud-toolbar {
    flex-direction: row-reverse;
}

/* Forms & Input
 * JO-086: MudBlazor wraps inputs in een .mud-input container met text-align,
 * maar het onderliggende <input>-element kreeg `dir="ltr"` via een externe
 * stylesheet/framework-default. Forceer de direction op de raw input zodat
 * tekstinvoer ook RTL-uitgelijnd is voor email/text/password/tel/url/number-
 * minus de numeric/date-velden die expliciet LTR moeten blijven (verderop).
 */
[dir="rtl"] .mud-input {
    text-align: right;
}

[dir="rtl"] input[type="text"]:not(.numeric):not(.currency),
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .mud-input-adornment.mud-input-adornment-start {
    margin-right: 0;
    margin-left: 8px;
    order: 2;
}

[dir="rtl"] .mud-input-adornment.mud-input-adornment-end {
    margin-left: 0;
    margin-right: 8px;
    order: -1;
}

[dir="rtl"] .mud-input-label {
    right: 0;
    left: auto;
    transform-origin: top right;
}

[dir="rtl"] .mud-select .mud-select-input {
    padding-right: 0;
    padding-left: 32px;
}

[dir="rtl"] .mud-select .mud-select-icon {
    right: auto;
    left: 0;
}

/* Buttons & Actions */
[dir="rtl"] .mud-button-root .mud-button-icon-start {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .mud-button-root .mud-button-icon-end {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .mud-fab {
    right: auto;
    left: 16px;
}

/* Tables */
[dir="rtl"] .mud-table-cell {
    text-align: right;
}

[dir="rtl"] .mud-table-cell:first-child {
    padding-right: 24px;
    padding-left: 16px;
}

[dir="rtl"] .mud-table-cell:last-child {
    padding-right: 16px;
    padding-left: 24px;
}

[dir="rtl"] .mud-table-sortlabel .mud-table-sortlabel-icon {
    margin-right: 4px;
    margin-left: 0;
}

/* Cards */
[dir="rtl"] .mud-card-actions {
    justify-content: flex-start;
}

[dir="rtl"] .mud-card-header-avatar {
    margin-right: 0;
    margin-left: 16px;
}

/* Lists */
[dir="rtl"] .mud-list-item {
    padding-right: 16px;
    padding-left: 16px;
}

[dir="rtl"] .mud-list-item-icon {
    margin-right: 0;
    margin-left: 32px;
}

[dir="rtl"] .mud-list-item-text {
    text-align: right;
}

/* Dialogs & Modals */
[dir="rtl"] .mud-dialog-title {
    text-align: right;
}

[dir="rtl"] .mud-dialog-content {
    text-align: right;
}

[dir="rtl"] .mud-dialog-actions {
    justify-content: flex-start;
}

/* Chips */
[dir="rtl"] .mud-chip {
    padding-right: 12px;
    padding-left: 12px;
}

[dir="rtl"] .mud-chip .mud-chip-icon {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .mud-chip-close-button {
    margin-right: 8px;
    margin-left: -4px;
}

/* Breadcrumbs */
[dir="rtl"] .mud-breadcrumbs {
    flex-direction: row-reverse;
}

[dir="rtl"] .mud-breadcrumbs .mud-breadcrumb-separator {
    transform: scaleX(-1);
}

/* Alerts & Messages */
[dir="rtl"] .mud-alert-icon {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .mud-alert-close-icon {
    margin-left: 0;
    margin-right: 12px;
}

/* Snackbar */
[dir="rtl"] .mud-snackbar {
    right: auto;
    left: 8px;
}

[dir="rtl"] .mud-snackbar-content {
    flex-direction: row-reverse;
}

/* Progress & Loading */
[dir="rtl"] .mud-progress-linear {
    transform: scaleX(-1);
}

[dir="rtl"] .mud-progress-circular {
    /* Circulaire progress heeft geen RTL aanpassing nodig */
}

/* Menus & Dropdowns */
[dir="rtl"] .mud-menu .mud-list {
    text-align: right;
}

[dir="rtl"] .mud-popover {
    /* Transform origin wordt dynamisch berekend */
}

/* Expansion Panels */
[dir="rtl"] .mud-expand-panel-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .mud-expand-panel-icon {
    margin-right: 0;
    margin-left: 12px;
}

/* Tabs */
[dir="rtl"] .mud-tabs .mud-tab {
    text-align: right;
}

[dir="rtl"] .mud-tabs-toolbar {
    flex-direction: row-reverse;
}

/* Stepper (voor Calculator Wizard) */
[dir="rtl"] .mud-stepper-content {
    text-align: right;
}

[dir="rtl"] .mud-stepper-header {
    flex-direction: row-reverse;
}

/* Eigen stijlen JurisOffice */
[dir="rtl"] .legal-nav {
    text-align: right;
}

[dir="rtl"] .case-card,
[dir="rtl"] .calculator-card {
    text-align: right;
}

[dir="rtl"] .case-card .mud-card-header,
[dir="rtl"] .calculator-card .mud-card-header {
    flex-direction: row-reverse;
}

/* Utility Classes */
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }

[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }

[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }

[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }

[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }

[dir="rtl"] .float-left { float: right !important; }
[dir="rtl"] .float-right { float: left !important; }

/* Flexbox Direction Reversal */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

/* Grid Layout - geen aanpassing nodig, grid gebruikt logical properties */

/* Font Optimization voor Arabisch */
[dir="rtl"] body,
[dir="rtl"] .mud-typography {
    /* Gebruik native Arabische fonts waar beschikbaar */
    font-family: "Segoe UI Arabic", "Tahoma", "Arial", sans-serif;
}

/* Numerieke waardes blijven LTR (getallen, bedragen) */
[dir="rtl"] .numeric,
[dir="rtl"] .currency,
[dir="rtl"] .mud-numeric-field input {
    direction: ltr;
    text-align: left;
}

/* Datums kunnen LTR blijven voor internationale formaten */
[dir="rtl"] .date-display {
    direction: ltr;
    text-align: left;
}

/* Code blocks en technische content blijven LTR */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .code-block {
    direction: ltr;
    text-align: left;
}
