/* ════════════════════════════════════════════════════════════════
   theme-apple-surfaces.css — Zadanie 4: karty / tabele / modale / toasty
   Realne klasy: .card/.settings-card/.mes-section, dialog/.modal-*,
   .toast, tabele (table/thead/tr). Nadpisuje zakodowane #fff/#e5e9f0/14px
   z !important (które łamały dark mode).
   ════════════════════════════════════════════════════════════════ */

/* ── Karty / panele ── */
.card, .settings-card, .mes-section {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card:hover { box-shadow: var(--shadow) !important; }

/* ── Tabele: hairline-only, hover wiersza ── */
table { border-color: var(--border); }
thead th {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
tbody td { border-bottom: 1px solid var(--border); }
tbody tr { transition: background-color var(--dur) var(--ease); }
tbody tr:hover { background: var(--accent-soft); }

/* ── Modale / dialog: frosted backdrop + miękki panel ── */
dialog {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop {
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.modal-header { border-bottom: 1px solid var(--border); }
.modal-title { color: var(--text); letter-spacing: -.02em; font-weight: 650; }
.modal-footer { border-top: 1px solid var(--border); }

/* Drawer / overlay paneli (Order Manager t173, RCP) jeśli mają wspólne klasy */
.drawer, .side-drawer, [class*="drawer-panel"] {
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* ── Toasty / alerty: pill, miękki cień ── */
.toast {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

/* Subtelna animacja wejścia modali/toastów */
@keyframes apple-rise {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
dialog[open], .toast { animation: apple-rise var(--dur) var(--ease); }