/* Shared navigation without tabs. Directional overrides for the Pashto UI. */
[hidden] { display: none !important; }
.brand { color: var(--text); }
.language-control { display: flex; align-items: center; gap: 5px; }
.language-control .form-select { width: 89px; font-size: 11px; padding-block: 5px; }
.language-control > .bi { color: var(--muted); }
.page-screen { min-width: 0; }
.page-heading h1:focus { outline: none; }
.data-table td { unicode-bidi: plaintext; }
.product-thumb img { object-fit: cover; border-radius: 3px; }
.modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.modal-content > form > .modal-body { overflow-y: auto; }
.modal-content > form > .modal-header,
.modal-content > form > .modal-footer { flex-shrink: 0; }
.data-table th, .data-table td, .nav-item, .group-label, .context-menu button { text-align: start; }
.data-table .num { text-align: end; }

/* Keep chart coordinates and identifiers readable in both text directions. */
.sales-chart { direction: ltr; }
input[type=number], input[type=date], input[type=email], input[type=tel],
input[name=sku], input[name=barcode] { direction: ltr; text-align: start; }

html[dir=rtl] body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir=rtl] .sidebar { right: 0; left: auto; }
html[dir=rtl] .main { left: 0; right: var(--sidebar); transition: right .15s; }
html[dir=rtl] .top-right { margin-left: 0; margin-right: auto; padding-left: 20px; padding-right: 0; }
html[dir=rtl] .top-actions { padding-left: 0; padding-right: 17px; }
html[dir=rtl] .brand { letter-spacing: 0; }
html[dir=rtl] h1 { letter-spacing: 0; }
html[dir=rtl] .company > .bi,
html[dir=rtl] .nav-item .badge,
html[dir=rtl] .stock-alert button,
html[dir=rtl] .filters .filter-summary { margin-left: 0; margin-right: auto; }
html[dir=rtl] .statusbar .status-right { margin-left: 0; margin-right: auto; }
html[dir=rtl] .group-label { letter-spacing: 0; font-size: 11px; }
html[dir=rtl] .nav-item { font-size: 12px; }
html[dir=rtl] .kpi-top,
html[dir=rtl] .subtitle,
html[dir=rtl] .stock-legend p,
html[dir=rtl] .form-label { font-size: 11px; }
html[dir=rtl] .kpi-foot { white-space: normal; line-height: 1.6; }
html[dir=rtl] .data-table { font-size: 11px; }
html[dir=rtl] .data-table th { font-size: 10px; }
html[dir=rtl] .form-section { letter-spacing: 0; }
html[dir=rtl] .legend-dot,
html[dir=rtl] .stock-legend i,
html[dir=rtl] .sidebar-bottom .online-dot,
html[dir=rtl] .statusbar .online-dot,
html[dir=rtl] .statusbar .bi { margin-right: 0; margin-left: 5px; }
html[dir=rtl] .trend { margin-right: 0; margin-left: 4px; }
html[dir=rtl] .count-badge { margin-left: 0; margin-right: 6px; }
html[dir=rtl] .chart-total strong { margin-left: 0; margin-right: 8px; }
html[dir=rtl] .dropdown-item .bi { margin-right: 0; margin-left: 8px; }
html[dir=rtl] .dropdown-item kbd { float: left; margin-left: 0; margin-right: 20px; direction: ltr; }
html[dir=rtl] .search-field > .bi { left: auto; right: 10px; }
html[dir=rtl] .search-field input { padding-left: 10px; padding-right: 31px; }
html[dir=rtl] .panel-link .bi-arrow-right,
html[dir=rtl] .stock-alert .bi-arrow-right { transform: scaleX(-1); }
html[dir=rtl] .collapsed .brand { padding-inline: 16px; }
html[dir=rtl] .context-menu { text-align: right; }

@media(max-width:1200px) {
  .top-actions .toolbar-button { font-size: 10px; }
  .top-right { gap: 4px; }
  html[dir=rtl] .top-actions { padding-right: 5px; }
}
@media(max-width:950px) {
  html[dir=rtl] .main { right: 62px; left: 0; }
  html[dir=rtl] .brand { padding-right: 17px; padding-left: 0; }
}
@media(max-width:600px) {
  html[dir=rtl] .top-right { padding-left: 8px; }
  .language-control .form-select { width: 77px; }
  .language-control > .bi { display: none; }
  html[dir=rtl] .kpi-top { font-size: 10px; }
}
@media print {
  html[dir=rtl] .main { position: static; }
  .language-control { display: none; }
  body:has(.modal.show) #app { display: none !important; }
  .modal.show { position: static; overflow: visible !important; }
  .modal.show .modal-dialog { max-width: 100%; margin: 0; transform: none; }
  .modal.show .modal-content { box-shadow: none; border: 0; }
  .modal.show .modal-footer, .modal.show .btn-close { display: none; }
  .modal-backdrop { display: none; }
}