/* ============================================================
   design-system.css — NEW shared pieces added in the Phase 1
   foundation pass. Every selector here is prefixed `.ds-` and is
   therefore guaranteed to collide with nothing in components.css
   or legacy-pages.css. Reuses existing tokens/buttons/badges —
   does not redeclare them.

   Backs the EmptyState/LoadingState/ErrorState/PermissionDeniedState
   ViewComponents (Views/Shared/Components/{Name}/Default.cshtml).
   ============================================================ */

/* Shared state-panel shell (empty / loading / error / permission-denied) */
.ds-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--text3);
}

.ds-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--muted);
    flex-shrink: 0;
}

.ds-state-icon svg {
    width: 24px;
    height: 24px;
}

.ds-state-icon-danger  { background: var(--danger-bg);  color: var(--danger); }
.ds-state-icon-warning { background: var(--warning-bg); color: var(--warning); }
.ds-state-icon-muted   { background: var(--bg);         color: var(--muted); }

.ds-state-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text1);
}

.ds-state-message {
    font-size: .82rem;
    color: var(--text3);
    max-width: 360px;
    line-height: 1.6;
}

.ds-state-action {
    margin-top: 6px;
}

/* Loading state: skeleton shimmer, no icon */
.ds-loading-state {
    padding: 24px;
}

.ds-skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-skeleton {
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}

.ds-skeleton-sm { width: 40%; }
.ds-skeleton-md { width: 70%; }
.ds-skeleton-lg { width: 100%; }

@keyframes ds-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-skeleton { animation: none; }
}

/* Status badge icon slot — additive sizing rule for icons placed
   inside the existing .badge class (components.css:531); .badge
   itself already has display:inline-flex + gap, so this only fixes
   icon size, it does not redeclare the badge shell. */
.badge svg,
.badge .ds-badge-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Shared tab bar — splits a long form into sections instead of one tall
   stacked page (first consumer: InternationalPurchaseOrder/Edit.cshtml).
   Same visual language as the bespoke tab bar Rfq/Compare.cshtml built
   first (rfq-compare.css's .dnax-compare-tab*) — that one is left alone
   (a working shipped page, not worth the churn/risk of migrating), but any
   new tabbed page should reach for these generic classes instead of
   forking its own copy again. */
.ds-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--space-3, 12px);
    overflow-x: auto;
}

.ds-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 14px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text3);
    cursor: pointer;
    white-space: nowrap;
}

.ds-tab:hover { color: var(--text1); }
.ds-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.ds-tab-content { display: none; }
.ds-tab-content.active { display: block; }

/* Sub-section header inside a .ds-tab-content panel — a repeatable child
   list (e.g. per-screen email templates) living below a tab's main form
   needs its own small title + action button row, distinct from the tab
   bar above. Reuse instead of forking another inline-styled header. */
.ds-tab-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}

.ds-tab-details-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text1);
    margin: 0;
}

.ds-tab-details-note {
    font-size: .8rem;
    color: var(--muted);
}

/* ── لوحة المطابقة (dnax-match-panel.js): نتيجة مطابقة مستند الشراء بتسامح المورد ── */
.ds-match { padding: var(--space-3, 12px) var(--space-4, 16px); margin-block: var(--space-3, 12px); }
.ds-match-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }
.ds-match-title { font-size: .95rem; font-weight: 700; color: var(--text1); margin: 0; }
.ds-match-meta { font-size: .8rem; color: var(--muted); margin-block-start: var(--space-1, 4px); }
.ds-match-issues { margin: var(--space-2, 8px) 0 0; padding-inline-start: var(--space-4, 16px); color: var(--danger); font-size: .85rem; }
.ds-match-note { margin-block-start: var(--space-2, 8px); font-size: .8rem; color: var(--text2); }