📭 Пустое состояние

<div class="rounded-xl border border-dashed border-slate-300 bg-white p-10 text-center dark:border-slate-600 dark:bg-slate-900">
  <div class="mx-auto flex size-12 items-center justify-center rounded-full bg-slate-100 text-2xl dark:bg-slate-800">📊</div>
  <h3 class="mt-4 text-base font-semibold text-slate-900 dark:text-slate-50">Здесь появятся отчёты</h3>
  <p class="mx-auto mt-1 max-w-sm text-sm text-slate-600 dark:text-slate-400">
    Загрузите первый файл с данными — мы построим сводку и график автоматически.
  </p>
  <button class="mt-5 rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">
    Загрузить данные
  </button>
</div>

<div class="rounded-xl border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900">
  <div class="mx-auto flex size-10 items-center justify-center rounded-full bg-slate-100 text-xl dark:bg-slate-800">🔍</div>
  <h3 class="mt-3 text-sm font-semibold text-slate-900 dark:text-slate-50">Ничего не найдено</h3>
  <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">По запросу «квартальный отчёт 2019» ничего нет.</p>
  <div class="mt-4 flex flex-wrap justify-center gap-2">
    <button class="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-700 dark:border-slate-600 dark:text-slate-200">Сбросить фильтры</button>
    <button class="rounded-md px-3 py-1.5 text-sm text-sky-700 hover:underline dark:text-sky-400">Искать во всех разделах</button>
  </div>
</div>

<div class="rounded-xl border border-rose-200 bg-rose-50 p-6 text-center dark:border-rose-900/50 dark:bg-rose-950/30">
  <div class="mx-auto flex size-10 items-center justify-center rounded-full bg-rose-100 text-xl dark:bg-rose-900/50">⚠️</div>
  <h3 class="mt-3 text-sm font-semibold text-rose-900 dark:text-rose-200">Не удалось загрузить данные</h3>
  <p class="mt-1 text-sm text-rose-800 dark:text-rose-300">Проверьте соединение и попробуйте ещё раз.</p>
  <button class="mt-4 rounded-md bg-rose-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-rose-700">Повторить</button>
</div>

<div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
  <div class="bg-slate-50 px-4 py-2 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">Заказы</div>
  <div class="p-8 text-center">
    <p class="text-sm font-medium text-slate-900 dark:text-slate-50">Заказов пока нет</p>
    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Они появятся здесь после первой продажи.</p>
  </div>
</div>