/* TOLA S6 — REV-B shared UX styles (tags · tabs · banners · empty states · column picker · charts) */
.ux-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; line-height: 1.6; }
.ux-tag-i { font-size: 10px; }
.ux-tag-ok { color: var(--color-ok); background: var(--color-ok-bg); border-color: var(--color-ok-border); }
.ux-tag-warn { color: var(--color-warn); background: var(--color-warn-bg); border-color: var(--color-warn-border); }
.ux-tag-danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.ux-tag-info { color: var(--color-info); background: var(--color-info-bg); border-color: var(--color-info-border); }
.ux-tag-neutral, .ux-tag-offline { color: var(--color-offline); background: var(--color-offline-bg); border-color: var(--color-offline-border); }
.ux-tag-gold { color: #7A5B12; background: var(--brand-gold-light); border-color: var(--brand-gold-border); }
[data-theme="dark"] .ux-tag-gold { color: var(--brand-gold); }

.ux-tabs { margin-bottom: 16px; flex-wrap: wrap; }
.ux-tab-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-alt); font-size: 11px; font-weight: 700; margin-inline-start: 4px; }
.ux-tab-badge.warn { background: var(--color-warn-bg); color: var(--color-warn); }
.ux-tab-badge.danger { background: var(--color-danger-bg); color: var(--color-danger); }

.ux-banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
.ux-banner-i { font-weight: 800; }
.ux-banner-info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--text-primary); }
.ux-banner-warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--text-primary); }
.ux-banner-danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--text-primary); }
.ux-banner-ok { background: var(--color-ok-bg); border-color: var(--color-ok-border); color: var(--text-primary); }

.ux-empty { text-align: center; padding: 34px 16px; color: var(--text-secondary); }
.ux-empty-i { font-size: 30px; color: var(--text-muted); margin-bottom: 6px; }
.ux-empty strong { display: block; font-size: 15px; color: var(--text-primary); margin-bottom: 4px; }
.ux-empty p { font-size: 13px; margin: 0 auto 12px; max-width: 460px; }

.ux-lastchg { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.ux-lastchg a { color: var(--brand-gold); text-decoration: none; font-weight: 600; }
.ux-lastchg a:hover, .ux-lastchg a:focus-visible { text-decoration: underline; }

.ux-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 12px; }
.ux-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: var(--radius-full); background: var(--brand-gold-light); border: 1px solid var(--brand-gold-border); font-size: 12px; }
[dir="rtl"] .ux-chip { padding: 3px 10px 3px 4px; }

.ux-kpi.ux-kpi-warn { border-top: 3px solid var(--color-warn); }
.ux-kpi.ux-kpi-danger { border-top: 3px solid var(--color-danger); }
.ux-kpi.ux-kpi-ok { border-top: 3px solid var(--color-ok); }
.ux-kpi.ux-kpi-info { border-top: 3px solid var(--color-info); }

.ux-chart-bar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.ux-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ux-colbar { display: flex; justify-content: flex-end; padding: 4px 8px 0; }
.ux-colpick { position: relative; }
.ux-colpick > summary { list-style: none; cursor: pointer; }
.ux-colpick > summary::-webkit-details-marker { display: none; }
.ux-colpick-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; min-width: 210px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.ux-colpick-menu label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.ux-colpick-menu label:hover { background: var(--surface-hover); }
.tola-table th.ux-sortable { cursor: pointer; user-select: none; }
.tola-table th.ux-sortable::after { content: ' ⇅'; color: var(--text-muted); font-size: 10px; }
.tola-table th.ux-sortable[aria-sort="ascending"]::after { content: ' ▲'; color: var(--brand-gold); }
.tola-table th.ux-sortable[aria-sort="descending"]::after { content: ' ▼'; color: var(--brand-gold); }
.tola-table th.ux-sortable:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }

.tola-modal.ux-modal-wide { max-width: 860px; width: calc(100vw - 48px); }
.ux-field-err { color: var(--color-danger); font-size: 12px; margin-top: 4px; }
.tola-input[aria-invalid="true"], .tola-select[aria-invalid="true"], .tola-textarea[aria-invalid="true"] { border-color: var(--color-danger); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Tabs rendered as <button> (REV-B area tabs, unit-detail added tabs): drop native button chrome so they
   match the design-system .tola-tab (underline style), keep a visible keyboard focus ring (A11y). */
button.tola-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: inherit;
  white-space: nowrap;
}
button.tola-tab.active { border-bottom-color: var(--brand-gold); }
button.tola-tab:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; }
.tola-tabs.ux-tabs { padding: 0 8px; overflow-x: auto; scrollbar-width: thin; }

/* ==========================================================================
   P7 QA · Topbar fit at 1280px and 200% zoom (A11y reflow, WCAG 1.4.10)
   The topbar items never shrank, so at ≤1440px the bar overflowed the main
   column: the scope badge wrapped to 3 lines, the profile was clipped and the
   whole page scrolled sideways (RTL shifted the sidebar off-screen).
   ========================================================================== */
.tola-main-wrapper { min-width: 0; overflow-x: clip; }
.tola-topbar { gap: 12px; padding-inline: 16px; }
.tola-topbar-start { flex: 1 1 auto; min-width: 0; gap: 10px; }
.tola-topbar-start > * { min-width: 0; }
.tola-topbar-end { flex: 0 0 auto; gap: 8px; }
.tola-scope-badge { white-space: nowrap; max-width: 300px; overflow: hidden; flex: 0 1 auto; }
.tola-scope-badge > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tola-topbar-start select.tola-select { max-width: 210px; text-overflow: ellipsis; }
.tola-topbar-end .tfa-profile > div:nth-child(2) > span,
.tola-topbar-end > div:last-child > div:nth-child(2) > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; display: block; }

@media (max-width: 1440px) {
  .tola-search-trigger > span, .tola-search-trigger > .tola-kbd { display: none; }
  .tola-search-trigger { padding: 0 10px; min-width: 0; width: auto; }
  .tola-scope-badge { max-width: 230px; }
  .tola-topbar-start > div:not(.tola-scope-badge) > span:first-child { display: none; } /* «محاكاة الدور:» label — the select keeps its title */
}
@media (max-width: 1280px) {
  .tola-topbar-end .tfa-profile > div:nth-child(2),
  .tola-topbar-end > div:last-child > div:nth-child(2) { display: none; } /* name/role remain in the account menu + avatar aria-label */
  .tola-scope-badge { max-width: 190px; }
  .tola-topbar-start select.tola-select { max-width: 170px; }
}
@media (max-width: 900px) {
  .tola-topbar { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
  .tola-topbar-start, .tola-topbar-end { flex-wrap: wrap; }
}