/**
 * MicAppTemplate — RTL (Right-to-Left) Overrides
 *
 * Loaded automatically when the active locale is RTL (e.g. Arabic, Hebrew).
 * All rules are scoped under [dir="rtl"] so they only apply when
 * WordPress outputs dir="rtl" on the <html> element.
 *
 * @package MicAppTemplate
 * @since   1.0.0
 */

/* ==========================================================================
   1. Base Direction & Text
   ========================================================================== */

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

/* ==========================================================================
   2. Blockquote
   ========================================================================== */

[dir="rtl"] blockquote {
	border-left: none;
	border-right: 4px solid var(--mat-color-primary);
	border-radius: var(--mat-radius-md) 0 0 var(--mat-radius-md);
}

/* ==========================================================================
   3. Stat Cards — Coloured Left Border → Right Border
   ========================================================================== */

[dir="rtl"] .mat-stat-card--success {
	border-left: none;
	border-right: 4px solid var(--mat-color-success);
}

[dir="rtl"] .mat-stat-card--warning {
	border-left: none;
	border-right: 4px solid var(--mat-color-warning);
}

[dir="rtl"] .mat-stat-card--error {
	border-left: none;
	border-right: 4px solid var(--mat-color-error);
}

[dir="rtl"] .mat-stat-card--info {
	border-left: none;
	border-right: 4px solid var(--mat-color-info);
}

[dir="rtl"] .mat-stat-card--primary {
	border-left: none;
	border-right: 4px solid var(--mat-color-primary);
}

[dir="rtl"] .mat-stat-card--accent {
	border-left: none;
	border-right: 4px solid var(--mat-color-accent);
}

/* ==========================================================================
   4. Buttons — Loading Spinner Border
   ========================================================================== */

[dir="rtl"] .mat-btn--loading::after {
	border-right-color: currentColor;
	border-left-color: transparent;
}

/* ==========================================================================
   5. Button Groups — Rounded Corners
   ========================================================================== */

[dir="rtl"] .mat-btn-group .mat-btn:first-child {
	border-radius: 0 var(--mat-radius-lg) var(--mat-radius-lg) 0;
}

[dir="rtl"] .mat-btn-group .mat-btn:last-child {
	border-radius: var(--mat-radius-lg) 0 0 var(--mat-radius-lg);
}

/* ==========================================================================
   6. Forms — Select Arrow & Icon Input
   ========================================================================== */

[dir="rtl"] .mat-select {
	padding-right: var(--mat-space-3);
	padding-left: var(--mat-space-10);
	background-position: left var(--mat-space-3) center;
}

[dir="rtl"] .mat-input-icon-wrap .mat-input {
	padding-left: var(--mat-space-3);
	padding-right: var(--mat-space-10);
}

[dir="rtl"] .mat-input-icon-wrap__icon {
	left: auto;
	right: var(--mat-space-3);
}

/* ==========================================================================
   7. Toggle / Switch — now handled in global.css / components.css via
      inset-inline-start and the --mat-dir transform multiplier. The rules
      that lived here flipped .mat-toggle__slider::before and the unused
      .mat-toggle__thumb, while the knob that actually renders comes from
      components.css's ::after — so in RTL the two knobs pulled apart.
   ========================================================================== */

/* ==========================================================================
   8. Tables
   ========================================================================== */

[dir="rtl"] .mat-table th {
	text-align: right;
}

/* .mat-data-table__th / __td now use text-align: start in components.css,
   which resolves to right here without an override. The --right modifiers
   stay physical: they name an explicit column alignment, not a direction. */

/* ==========================================================================
   9. Navigation — Bottom Bar Badge
   ========================================================================== */

[dir="rtl"] .mat-bottom-nav__item .mat-count-badge {
	right: auto;
	left: var(--mat-space-1);
}

/* ==========================================================================
  10. Sidebar
   ========================================================================== */

[dir="rtl"] .mat-sidebar {
	left: auto;
	right: 0;
	border-right: none;
	border-left: 1px solid var(--mat-border-color);
	transform: translateX(100%);
}

[dir="rtl"] .mat-sidebar.is-open {
	transform: translateX(0);
}

[dir="rtl"] .mat-sidebar-badge {
	margin-left: 0;
	margin-right: var(--mat-space-1-5);
}

/* ==========================================================================
  11. Utility Classes — Margin / Text Align
   ========================================================================== */

[dir="rtl"] .mat-ml-auto {
	margin-left: unset;
	margin-right: auto;
}

[dir="rtl"] .mat-mr-auto {
	margin-right: unset;
	margin-left: auto;
}

[dir="rtl"] .mat-text-left {
	text-align: right;
}

[dir="rtl"] .mat-text-right {
	text-align: left;
}

/* ==========================================================================
  12. Animations — Skeleton Pulse & Slide
   ========================================================================== */

@keyframes mat-skeleton-pulse-rtl {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

[dir="rtl"] .mat-skeleton::after {
	animation-name: mat-skeleton-pulse-rtl;
}

@keyframes mat-slide-in-right-rtl {
	from { transform: translateX(-100%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

@keyframes mat-slide-in-left-rtl {
	from { transform: translateX(100%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
  13. Responsive — Tablet (≥ 768px)
   ========================================================================== */

@media (min-width: 768px) {
	[dir="rtl"] .mat-stat-card {
		text-align: right;
	}
}

/* ==========================================================================
  14. Responsive — Desktop (≥ 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	[dir="rtl"] .mat-sidebar {
		transform: translateX(0);
	}

	[dir="rtl"] .mat-main-with-sidebar {
		margin-left: 0;
		margin-right: var(--mat-sidebar-width);
	}

	[dir="rtl"] .mat-app-bar {
		left: auto;
		right: var(--mat-sidebar-width);
	}

	[dir="rtl"] .mat-footer {
		margin-left: 0;
		margin-right: var(--mat-sidebar-width);
	}

	[dir="rtl"] .mat-toast-container {
		right: auto;
		left: var(--mat-space-6);
	}
}

/* ==========================================================================
   Documentation (/app/docs)
   --------------------------------------------------------------------------
   docs.css is written with CSS logical properties, so padding, margins,
   borders and text alignment already mirror themselves. Only the pager's
   arrow glyphs are genuinely direction-bound and need overriding here.
   ========================================================================== */

[dir="rtl"] .mat-docs-pager__link--prev .mat-docs-pager__label::before {
	content: "\2192\00a0";
}

[dir="rtl"] .mat-docs-pager__link--next .mat-docs-pager__label::after {
	content: "\00a0\2190";
}

/* ==========================================================================
   Notifications (bell dropdown, notification centre, detail page)
   --------------------------------------------------------------------------
   notifications.css anchors the bell badge and dropdown panel with physical
   `right`, which pins the panel to the left of the bell and pushes it off
   screen once the app bar is mirrored. Flip both to the inline-start edge.
   ========================================================================== */

[dir="rtl"] .mat-notification-bell__badge {
	right: auto;
	left: -6px;
}

/* Only the floating (non-mobile) panel is anchored to the bell — the
   ≤480px rule turns it into a fixed, full-width sheet that already spans
   left:0/right:0 and must keep both edges. */
@media (min-width: 481px) {
	[dir="rtl"] .mat-notification-dropdown {
		right: auto;
		left: -8px;
	}
}

[dir="rtl"] .mat-notification-dropdown__view-all svg {
	transform: scaleX(-1);
}

[dir="rtl"] .mat-notification-item.is-unread {
	border-left: none;
	border-right: 3px solid var(--mat-color-primary);
}

[dir="rtl"] .mat-notification-item.is-removing {
	transform: translateX(-20px);
}

/* Notification detail — prose block */
[dir="rtl"] .mat-prose ul,
[dir="rtl"] .mat-prose ol {
	padding-left: 0;
	padding-right: 1.5em;
}

[dir="rtl"] .mat-prose blockquote {
	border-left: none;
	border-right: 3px solid var(--color-primary, #2563eb);
	padding-left: 0;
	padding-right: var(--spacing-md, 16px);
}