/*
  Saipa Ostovar — component styles.
  Hand-written from the Tailwind classes in lasp-ir/hooshsazmani (apps/web/src/components/ui/*)
  and ebrahimzar1360/azreshyabi (src/components/ui.tsx, src/app/globals.css).
  Every colour, radius, space and shadow reads a token from tokens.css.
  Layout is RTL-first: only logical properties (inline-start/end).
*/

.so-root {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.005em;
  font-feature-settings: 'ss01';
  color: var(--navy-800);
  -webkit-font-smoothing: antialiased;
}
.so-root *, .so-root *::before, .so-root *::after { box-sizing: border-box; }
.so-root ::selection { background: var(--brand-200); color: var(--brand-900); }
.so-root :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.so-page { background: var(--page); }

/* ---------- Button ---------- */
.so-btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  gap: var(--space-1-5); white-space: nowrap;
  border: 0; border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms;
}
.so-btn svg { width: 16px; height: 16px; }
.so-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.so-btn--sm { padding: var(--space-1-5) var(--space-3); font-size: 12px; line-height: 16px; }
.so-btn--lg { padding: 10px var(--space-6); }
.so-btn--touch { min-height: 44px; }
.so-btn--primary { background: var(--brand-600); color: #ffffff; font-weight: 700; box-shadow: var(--shadow-primary); }
.so-btn--primary:hover:not(:disabled) { background: var(--brand-700); }
.so-btn--primary:active:not(:disabled) { background: var(--brand-800); }
.so-btn--navy { background: var(--navy-900); color: #ffffff; font-weight: 700; }
.so-btn--navy:hover:not(:disabled) { background: var(--navy-800); }
.so-btn--secondary { background: var(--surface); color: var(--navy-700); border: 1px solid var(--navy-200); }
.so-btn--secondary:hover:not(:disabled) { background: var(--navy-50); border-color: var(--navy-300); }
.so-btn--ghost { background: transparent; color: var(--navy-600); }
.so-btn--ghost:hover:not(:disabled) { background: var(--navy-100); }
.so-btn--danger { background: var(--rose-600); color: #ffffff; }
.so-btn--danger:hover:not(:disabled) { background: var(--rose-700); }
.so-btn--success { background: var(--emerald-600); color: #ffffff; }
.so-btn--success:hover:not(:disabled) { background: var(--emerald-700); }

/* ---------- Badge ---------- */
.so-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap;
  border-radius: var(--radius-full); padding: var(--space-0-5) var(--space-2);
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.so-badge--neutral { background: var(--navy-100); color: var(--navy-700); }
.so-badge--success { background: var(--emerald-100); color: var(--emerald-700); }
.so-badge--warning { background: var(--amber-100); color: var(--amber-700); }
.so-badge--severe  { background: var(--brand-100); color: var(--brand-800); }
.so-badge--danger  { background: var(--rose-100); color: var(--rose-700); }
.so-badge--info    { background: var(--navy-100); color: var(--navy-800); }
.so-badge--ok        { background: var(--ok-soft); color: var(--ok); }
.so-badge--attention { background: var(--attention-soft); color: var(--attention); }
.so-badge--warn      { background: var(--warn-soft); color: var(--warn); }

/* ---------- Alert & ErrorBanner ---------- */
.so-alert {
  border: 1px solid; border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4); font-size: 14px; line-height: 1.625;
}
.so-alert__title { margin: 0; font-weight: 500; }
.so-alert__body { margin: var(--space-1) 0 0; }
.so-alert--info      { border-color: var(--brand-200); background: var(--brand-50); color: var(--navy-900); }
.so-alert--ok        { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.so-alert--attention { border-color: var(--attention); background: var(--attention-soft); color: var(--attention); }
.so-alert--warn      { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.so-alert--danger    { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.so-error-banner {
  margin: 0; border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  background: var(--rose-50); color: var(--rose-700); font-size: 14px;
}

/* ---------- Card ---------- */
.so-card {
  min-width: 0; border-radius: var(--radius-2xl);
  border: 1px solid var(--navy-200); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.so-card__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid var(--navy-100); padding: var(--space-4) var(--space-5);
}
.so-card__lead { display: flex; align-items: flex-start; gap: 10px; }
.so-card__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; margin-top: 2px; border-radius: var(--radius-lg);
  background: var(--navy-900); color: var(--brand-400);
}
.so-card__icon svg { width: 18px; height: 18px; }
.so-card__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--navy-900); }
.so-card__subtitle { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--navy-500); }
.so-card__body { padding: var(--space-4) var(--space-5); }
.so-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.so-table th { background: var(--navy-50); color: var(--navy-600); font-weight: 500; text-align: start; padding: var(--space-2) var(--space-3); }
.so-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--navy-100); color: var(--navy-800); }
.so-table tbody tr:hover { background: var(--brand-50); }

/* ---------- Field / Input ---------- */
.so-field__label { display: block; margin-bottom: var(--space-1-5); font-size: 14px; font-weight: 500; color: var(--navy-700); }
.so-field__req { margin-inline-start: var(--space-1); color: var(--danger); }
.so-field__hint { margin: var(--space-1) 0 0; font-size: 12px; line-height: 16px; color: var(--navy-500); }
.so-field__error { margin: var(--space-1) 0 0; font-size: 12px; line-height: 16px; color: var(--danger); }
.so-input {
  display: block; width: 100%; min-height: 44px;
  border: 1px solid var(--navy-300); border-radius: var(--radius-xl); background: var(--surface);
  padding: var(--space-2) var(--space-3); font: inherit; color: var(--navy-900);
  outline: none; transition: border-color 150ms, box-shadow 150ms;
}
.so-input::placeholder { color: var(--navy-400); }
.so-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(255, 121, 0, 0.15); }
.so-input:disabled { cursor: not-allowed; background: var(--navy-100); color: var(--navy-500); }
.so-input--invalid { border-color: var(--danger); background: var(--danger-soft); }
textarea.so-input { min-height: 88px; resize: vertical; }

/* ---------- Stat ---------- */
.so-stat {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3);
  overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid var(--navy-200);
  background: var(--surface); padding: var(--space-4); box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none; transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}
a.so-stat:hover { transform: translateY(-2px); border-color: var(--brand-300); box-shadow: var(--shadow-lift); }
.so-stat__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-xl);
}
.so-stat__icon svg { width: 20px; height: 20px; }
.so-stat__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--navy-500); }
.so-stat__value { margin-top: 2px; font-size: 24px; line-height: 32px; font-weight: 900; color: var(--navy-900); }
.so-stat__hint { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--navy-500); }
.so-stat--neutral .so-stat__icon { background: var(--brand-50); color: var(--brand-600); }
.so-stat--brand .so-stat__icon { background: var(--navy-900); color: var(--brand-400); }
.so-stat--good .so-stat__icon { background: var(--ok-soft); color: var(--emerald-600); }
.so-stat--good .so-stat__value { color: var(--emerald-700); }
.so-stat--warn .so-stat__icon { background: var(--attention-soft); color: var(--amber-700); }
.so-stat--warn .so-stat__value { color: var(--amber-700); }
.so-stat--bad .so-stat__icon { background: var(--rose-50); color: var(--rose-600); }
.so-stat--bad .so-stat__value { color: var(--rose-700); }

/* ---------- PageHeader ---------- */
.so-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.so-page-header__eyebrow {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1-5);
  font-size: 12px; line-height: 16px; font-weight: 700; color: var(--brand-600);
}
.so-page-header__eyebrow::before { content: ''; width: 20px; height: 4px; border-radius: var(--radius-full); background: var(--brand-500); }
.so-page-header__title { margin: 0; font-size: 26px; line-height: 1.5; font-weight: 900; letter-spacing: -0.025em; color: var(--navy-900); }
.so-page-header__desc { margin: var(--space-1-5) 0 0; max-width: 42rem; font-size: 14px; line-height: 1.625; color: var(--navy-500); }
.so-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Segmented ---------- */
.so-segmented { display: inline-flex; border: 1px solid var(--navy-200); border-radius: var(--radius-xl); background: var(--surface); padding: var(--space-0-5); }
.so-segmented button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  border-radius: var(--radius-lg); padding: var(--space-1-5) var(--space-3);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--navy-600);
}
.so-segmented button:hover { background: var(--navy-100); color: var(--navy-900); }
.so-segmented button[aria-checked='true'] { background: var(--navy-900); color: #ffffff; }

/* ---------- EmptyState ---------- */
.so-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px dashed var(--navy-300); border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.6); padding: var(--space-10) var(--space-6);
}
.so-empty__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-3); border-radius: var(--radius-full); background: var(--navy-100); color: var(--navy-500); }
.so-empty__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--navy-800); }
.so-empty__body { margin-top: var(--space-1); font-size: 14px; line-height: 1.625; color: var(--navy-500); }
.so-empty__action { margin-top: var(--space-4); }

/* ---------- Modal ---------- */
.so-modal-scrim { position: absolute; inset: 0; background: var(--overlay); }
.so-modal {
  position: relative; width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
  border: 1px solid var(--navy-200); border-radius: var(--radius-2xl); background: var(--surface);
  padding: var(--space-5); box-shadow: var(--shadow-lift);
}
.so-modal__title { margin: 0 0 var(--space-4); font-size: 14px; font-weight: 600; color: var(--navy-900); }

/* ---------- Loading ---------- */
.so-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-full);
  border: 2px solid var(--navy-300); border-top-color: var(--brand-500);
  animation: so-spin 1s linear infinite;
}
.so-loading { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; color: var(--navy-500); }
.so-skeleton { border-radius: var(--radius-lg); background: var(--navy-200); animation: so-pulse 2s ease-in-out infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }
@keyframes so-pulse { 50% { opacity: 0.5; } }

/* ---------- AI assist (orange «aurora») ---------- */
.so-ai-surface {
  position: relative; isolation: isolate; border: 1px solid transparent; border-radius: var(--radius-2xl);
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(135deg, var(--brand-300), var(--brand-300) 55%, var(--brand-200)) border-box;
  box-shadow: var(--shadow-ai);
}
.so-ai-badge {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 0.8rem; color: #ffffff;
  background: linear-gradient(135deg, var(--brand-500), var(--ai-violet) 70%, var(--ai-fuchsia));
}
.so-ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 40px; border: 0; border-radius: var(--radius-full); padding: 0.5rem 1.1rem;
  font: inherit; font-size: 14px; font-weight: 500; color: #ffffff; cursor: pointer;
  background: linear-gradient(120deg, var(--brand-600), var(--ai-violet) 65%, var(--ai-fuchsia));
  box-shadow: 0 8px 18px -10px rgba(224, 100, 0, 0.8);
}
.so-ai-btn-soft {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 36px; border: 0; cursor: pointer;
  border-radius: var(--radius-full); padding: 0.35rem 0.9rem; font: inherit; font-size: 13px;
  color: var(--brand-700); background: rgba(224, 100, 0, 0.08);
}
.so-ai-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem; font-size: 11px; font-weight: 500; color: var(--brand-700);
  background: linear-gradient(90deg, rgba(13, 32, 65, 0.1), rgba(224, 100, 0, 0.12));
}
.so-ai-skeleton {
  height: 0.6rem; border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(224, 100, 0, 0.08), rgba(13, 32, 65, 0.22), rgba(224, 100, 0, 0.08));
  background-size: 200% 100%; animation: so-flow 1.6s linear infinite;
}
@keyframes so-flow { from { background-position: 0% 0; } to { background-position: 200% 0; } }

/* ---------- Brand lockup ---------- */
.so-lockup { display: inline-flex; align-items: center; gap: var(--space-3); }
.so-lockup__rule { width: 1px; height: 36px; background: var(--navy-300); }
.so-lockup__name { font-size: 20px; line-height: 1.25; font-weight: 900; letter-spacing: -0.025em; color: var(--brand-500); }
.so-lockup__sub { font-size: 12px; line-height: 1.25; font-weight: 700; color: var(--navy-900); }
.so-lockup--dark .so-lockup__rule { background: rgba(255, 255, 255, 0.2); }
.so-lockup--dark .so-lockup__sub { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .so-root *, .so-root *::before, .so-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}