/* ==========================================================================
   Panel admina bezkartek — powloka aplikacji.
   --------------------------------------------------------------------------
   Napisane od zera, w miejsce szablonu MaterialPro. Wyglad odwzorowuje
   MaterialM; wartosci (kolory, typografia, promienie, cienie, wymiary) beru
   z materialm-tokens.css, ktory generuje tools/materialm-tokens.mjs.

   Kolejnosc ladowania w app.blade.php:
     1. bootstrap.min.css      — siatka, utilities, komponenty
     2. tabler-icons.min.css   — ikony `ti ti-*` (89 uzyc w widokach)
     3. materialm-tokens.css   — zmienne
     4. admin.css              — ten plik: uklad + wyglad

   Uklad: staly sidebar po LEWEJ (240 px), obok niego kolumna z paskiem
   gornym (70 px) i trescia. Ponizej 1200 px sidebar chowa sie za krawedz i
   wysuwa hamburgerem z przyciemnieniem tla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Podstawa
   -------------------------------------------------------------------------- */
:root {
  --bs-primary: var(--mm-primary);
  --bs-primary-rgb: 0, 161, 255;
  --bs-primary-bg-subtle: var(--mm-lightprimary);
  --bs-link-color: var(--mm-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--mm-primary) 82%, #000);
  --bs-body-color: var(--mm-text-primary);
  --bs-body-bg: var(--mm-background);
  --bs-border-color: var(--mm-border-color);
  --bs-secondary-color: var(--mm-text-secondary);
  --bs-border-radius: var(--mm-radius);
  --bs-font-sans-serif: var(--mm-font-family);
  --bs-success: var(--mm-success);
  --bs-info: var(--mm-info);
  --bs-warning: var(--mm-warning);
  --bs-danger: var(--mm-error);
}

* { scrollbar-width: thin; scrollbar-color: var(--mm-border-color) transparent; }

body {
  font-family: var(--mm-font-family);
  font-size: var(--mm-body-1-size);
  background-color: var(--mm-background);
  color: var(--mm-text-primary);
  letter-spacing: 0;
  /* Inter ma warianty znakow, ktore domyslnie siedza wylaczone:
     cv11 = jednopietrowe „a"/„g" (czytelniejsze w malych stopniach),
     ss01 = alternatywne „l"/„1", zapobiega myleniu ich w SKU i numerach.
     tnum wlaczamy punktowo tam, gdzie liczby maja sie pionowo rownac. */
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Naglowki: Inter przy wiekszych stopniach potrzebuje ujemnego swiatla, inaczej
   wyglada na rozstrzelony. Im wiekszy stopien, tym mocniejsze scisniecie. */
h1, .h1 { font-size: var(--mm-h1-size); font-weight: 700; line-height: var(--mm-h1-lh); letter-spacing: -.035em; }
h2, .h2 { font-size: var(--mm-h2-size); font-weight: 700; line-height: var(--mm-h2-lh); letter-spacing: -.03em; }
h3, .h3 { font-size: var(--mm-h3-size); font-weight: 650; line-height: var(--mm-h3-lh); letter-spacing: -.025em; }
h4, .h4 { font-size: var(--mm-h4-size); font-weight: 650; line-height: var(--mm-h4-lh); letter-spacing: -.02em; }
h5, .h5 { font-size: var(--mm-h5-size); font-weight: 600; line-height: var(--mm-h5-lh); letter-spacing: -.015em; }
h6, .h6 { font-size: var(--mm-h6-size); font-weight: 600; line-height: var(--mm-h6-lh); letter-spacing: -.01em; }

/* Liczby w jednej kolumnie musza sie pionowo rownac — inaczej ceny i ilosci
   „taicza". `tnum` daje cyfrom rowna szerokosc, `lnum` wyrownuje wysokosc. */
.table td, .table th,
.kpi-value, .count-pill, .id-chip, .sku-chip,
.dataTables_info, .pagination {
  font-variant-numeric: tabular-nums lining-nums;
}

a { text-decoration: none; }
.text-muted { color: var(--mm-text-secondary) !important; }

/* --------------------------------------------------------------------------
   2. Powloka — sidebar po lewej + kolumna z trescia
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

/* Sidebar = rail (ikony grup) + panel (pozycje wybranej grupy), obok siebie.
   Szerokosci w tokenach, bo liczy je tez margines kolumny z trescia. */
.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(var(--mm-rail-width) + var(--mm-sidebar-width));
  display: flex;
  z-index: 1040;
  transition: transform .25s ease, width .25s ease;
}

/* ---- rail ---------------------------------------------------------------- */
.app-rail {
  width: var(--mm-rail-width);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mm-surface);
  border-inline-end: 1px solid var(--mm-border-color);
}
.app-rail-logo {
  height: var(--mm-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.app-rail-body {
  flex: 1 1 auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 24px;
}
.app-rail-btn {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mm-radius-pill);
  background: transparent;
  color: var(--mm-text-secondary);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.app-rail-btn:hover { background: var(--mm-lightprimary); color: var(--mm-primary); }
.app-rail-btn.is-active { background: var(--mm-lightprimary); color: var(--mm-primary); }

/* ---- panel --------------------------------------------------------------- */
.app-panel {
  width: var(--mm-sidebar-width);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--mm-surface);
  border-inline-end: 1px solid var(--mm-border-color);
}
.app-panel-head {
  height: var(--mm-header-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex: 0 0 auto;
}
.app-panel-head .logo-text { font-size: 1.25rem; font-weight: 700; color: var(--mm-primary); }
.app-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 24px;
}
.menu-group-title {
  font-size: var(--mm-body-2-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mm-text-secondary);
  padding: 8px 14px;
  margin: 0 0 4px;
}

/* kolumna z trescia */
.app-main {
  margin-inline-start: calc(var(--mm-rail-width) + var(--mm-sidebar-width));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin .25s ease;
}

.app-topbar {
  position: sticky;
  top: 0;
  height: var(--mm-header-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow);
  z-index: 1030;
}

.app-content { flex: 1 1 auto; padding: var(--mm-page-padding); }
@media (max-width: 767px) { .app-content { padding: 20px 12px; } }

/* --- stan zwiniety (mini): zostaje sam rail --------------------------------
   Panel chowamy zamiast zwezac pozycje do ikon — ikony sa juz na railu,
   a druga kolumna ikon nic by nie wnosila. */
.app-shell.is-mini .app-sidebar { width: var(--mm-rail-width); }
.app-shell.is-mini .app-panel { display: none; }
.app-shell.is-mini .app-main { margin-inline-start: var(--mm-rail-width); }

/* --- mobile: caly sidebar wysuwany ---------------------------------------- */
.app-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 28, 45, .45);
  z-index: 1035;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

@media (max-width: 1199.98px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--mm-shadow-1); }
  .app-main { margin-inline-start: 0; }
  .app-shell.is-open .app-sidebar { transform: none; }
  .app-shell.is-open .app-backdrop { opacity: 1; pointer-events: auto; }
  /* na waskim ekranie chowanie panelu nie ma sensu — wysuwamy komplet */
  .app-shell.is-mini .app-sidebar { width: calc(var(--mm-rail-width) + var(--mm-sidebar-width)); }
  .app-shell.is-mini .app-panel { display: flex; }
  .app-shell.is-mini .app-main { margin-inline-start: 0; }
}
@media (min-width: 1200px) { .app-backdrop { display: none; } }

/* --------------------------------------------------------------------------
   3. Pozycje menu w panelu.
   Kazda grupa to <section data-bk-group-panel>; widoczna jest tylko jedna,
   reszta ma atrybut `hidden`. Przelaczaniem zajmuje sie admin.js.
   Nie ma juz rozwijanych galezi — hierarchie przejal rail.
   -------------------------------------------------------------------------- */
.app-panel-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-item { margin: var(--mm-nav-margin); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--mm-nav-min-height);
  padding: 0 14px;
  border-radius: var(--mm-nav-radius);
  font-size: var(--mm-nav-font-size);
  color: var(--mm-text-primary);
  transition: background-color .15s ease, color .15s ease;
}
/* Punktor pozycji — `<i class="ti ti-circle">` scieniony do kropki. */
.sidebar-link > i.ti { font-size: 8px; opacity: .55; flex: 0 0 auto; }
.sidebar-link .hide-menu { flex: 1 1 auto; }

.sidebar-link:hover { background-color: var(--mm-lightprimary); color: var(--mm-primary); }
.sidebar-link.active { background-color: var(--mm-primary); color: #fff; }
.sidebar-link.active > i.ti { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Pasek gorny
   -------------------------------------------------------------------------- */
.app-topbar .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mm-text-primary);
  padding: 8px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.app-topbar .nav-link:hover { background-color: var(--mm-lightprimary); color: var(--mm-primary); }

.app-burger {
  border: 0;
  background: transparent;
  color: var(--mm-text-primary);
  font-size: 24px;
  line-height: 1;
  padding: 8px;
  border-radius: 50%;
}
.app-burger:hover { background-color: var(--mm-lightprimary); color: var(--mm-primary); }

.bk-avatar,
.bk-avatar-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mm-lightprimary);
  color: var(--mm-primary);
}
.bk-avatar { width: 38px; height: 38px; }
.bk-avatar-lg { width: 48px; height: 48px; }

.bk-notif-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Lista powiadomien (wiersze buduje admin-notifications.js). Sztywna szerokosc
   menu + overflow-x: hidden — inaczej dlugi tytul rozpycha wiersz i zamiast
   wielokropka pojawia sie poziomy pasek przewijania. min-width: 0 na dzieciach
   flexa jest konieczne, zeby text-truncate w ogole dzialalo. */
.bk-notifications .dropdown-menu { width: 360px !important; max-width: calc(100vw - 24px); }
.bk-notif-list { overflow-x: hidden !important; }
.bk-notif-item {
  position: relative;
  border-color: var(--mm-border-color) !important;
  transition: background-color .15s ease-in-out;
}
.bk-notif-item:last-child { border-bottom: 0 !important; }
.bk-notif-item:hover { background-color: var(--mm-hover-color); }
.bk-notif-item.bk-notif-unread { background-color: var(--mm-lightprimary); }
.bk-notif-item.bk-notif-unread::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background-color: var(--mm-primary);
}
.bk-notif-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 8px 12px 16px;
  color: inherit;
  text-decoration: none;
}
.bk-notif-item:not(.bk-notif-unread) .bk-notif-link { padding-inline-end: 16px; }
.bk-notif-link:hover { color: inherit; }
.bk-notif-link .round-40 { width: 40px; height: 40px; }
.bk-notif-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bk-notif-title,
.bk-notif-msg,
.bk-notif-time { display: block; line-height: 1.35; }
.bk-notif-title { font-size: 14px; font-weight: 600; color: var(--mm-text-primary); }
.bk-notif-msg { font-size: 13px; color: var(--mm-text-secondary); }
.bk-notif-msg:empty { display: none; }
.bk-notif-time { font-size: 12px; color: var(--mm-text-secondary); }
.bk-notif-read {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-inline-end: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mm-surface);
  color: var(--mm-primary);
  font-size: 17px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.bk-notif-read:hover { background: var(--mm-primary); color: #fff; }
.bk-notif-read-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .18);
  text-decoration: none;
}
.bk-notif-read-all:hover { background: rgba(255, 255, 255, .32); }
.table tr.bk-notif-unread > td { background-color: var(--mm-lightprimary); }

/* --------------------------------------------------------------------------
   5. Naglowek strony
   -------------------------------------------------------------------------- */
.page-head { margin-bottom: 24px; }
.page-head h4 { margin: 0; }
.page-head .breadcrumb { margin: 0; font-size: var(--mm-body-2-size); }
.page-head .breadcrumb a { color: var(--mm-text-secondary); }

/* --------------------------------------------------------------------------
   6. Komponenty Bootstrapa w wygladzie MaterialM
   -------------------------------------------------------------------------- */
.card {
  border: 0;
  border-radius: var(--mm-radius);
  background-color: var(--mm-surface);
  box-shadow: var(--mm-shadow);
  color: var(--mm-text-primary);
  margin-bottom: 24px;
}
.card-body { padding: var(--mm-card-padding); }
.card-header,
.card-footer {
  padding: 16px var(--mm-card-padding);
  background-color: transparent;
  border-color: var(--mm-border-color);
}
.card-title {
  font-size: var(--mm-h5-size);
  font-weight: var(--mm-h5-weight);
  line-height: normal;
  margin-bottom: var(--mm-card-title-mb);
}
.card-subtitle { color: var(--mm-text-secondary); }

/* przyciski: kapsulka, bez cienia.
   UWAGA: bez `capitalize` — MaterialM je ma, ale przy polskim tekscie robi
   "Nowy Produkt" / "Zapisz Zmiany", czego ortografia nie dopuszcza. */
.btn {
  border-radius: var(--mm-btn-radius);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--mm-button-size);
  font-weight: var(--mm-button-weight);
  padding: 9px 20px;
  box-shadow: none;
}
.btn:focus, .btn:active { box-shadow: none; }
.btn-sm { padding: 6px 15px; font-size: var(--mm-body-2-size); }
.btn-lg { padding: 12px 26px; font-size: var(--mm-body-1-size); }

.btn-primary {
  --bs-btn-bg: var(--mm-primary);
  --bs-btn-border-color: var(--mm-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--mm-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--mm-primary) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--mm-primary) 78%, #000);
}
.btn-outline-primary {
  --bs-btn-color: var(--mm-primary);
  --bs-btn-border-color: var(--mm-primary);
  --bs-btn-hover-bg: var(--mm-primary);
  --bs-btn-hover-border-color: var(--mm-primary);
}

.btn-icon {
  border-radius: 50%;
  padding: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* warianty `light*` — podstawowy przycisk drugiego planu w MaterialM */
.btn-light-primary { background-color: var(--mm-lightprimary); color: var(--mm-primary); }
.btn-light-secondary { background-color: var(--mm-lightsecondary); color: var(--mm-secondary); }
.btn-light-success { background-color: var(--mm-lightsuccess); color: var(--mm-success); }
.btn-light-danger { background-color: var(--mm-lighterror); color: var(--mm-error); }
.btn-light-warning { background-color: var(--mm-lightwarning); color: var(--mm-warning); }
.btn-light-info { background-color: var(--mm-lightinfo); color: var(--mm-info); }
.btn-light-primary:hover { background-color: var(--mm-primary); color: #fff; }
.btn-light-secondary:hover { background-color: var(--mm-secondary); color: #fff; }
.btn-light-success:hover { background-color: var(--mm-success); color: #fff; }
.btn-light-danger:hover { background-color: var(--mm-error); color: #fff; }
.btn-light-warning:hover { background-color: var(--mm-warning); color: #fff; }
.btn-light-info:hover { background-color: var(--mm-info); color: #fff; }

.badge {
  border-radius: var(--mm-radius-pill);
  font-size: 13px;
  font-weight: 600;
  padding: 0 10px;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
}
.badge.bg-light-primary { background-color: var(--mm-lightprimary) !important; color: var(--mm-primary); }
.badge.bg-light-success { background-color: var(--mm-lightsuccess) !important; color: var(--mm-success); }
.badge.bg-light-danger { background-color: var(--mm-lighterror) !important; color: var(--mm-error); }
.badge.bg-light-warning { background-color: var(--mm-lightwarning) !important; color: var(--mm-warning); }
.badge.bg-light-info { background-color: var(--mm-lightinfo) !important; color: var(--mm-info); }
.badge.bg-primary-subtle { background-color: var(--mm-lightprimary) !important; color: var(--mm-primary); }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * {
  padding: var(--mm-table-cell-padding);
  background-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--mm-border-color) 60%, transparent);
}
.table > thead > tr > th {
  font-size: var(--mm-table-th-size);
  font-weight: var(--mm-table-th-weight);
  color: var(--mm-text-secondary);
  text-transform: none;
  white-space: nowrap;
}
.table > tbody > tr > td { font-size: var(--mm-table-td-size); vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
  background-color: color-mix(in srgb, var(--mm-light) 60%, transparent);
}

.form-control,
.form-select {
  border-radius: var(--mm-radius);
  border-color: var(--mm-border-color);
  color: var(--mm-text-primary);
  background-color: var(--mm-surface);
  font-size: var(--mm-body-1-size);
  padding: 10px 14px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mm-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-primary) 18%, transparent);
}
.form-control::placeholder { color: var(--mm-text-secondary); }
.form-label { font-weight: 600; }
.form-text { color: var(--mm-text-secondary); font-size: var(--mm-body-2-size); }
.form-check-input:checked { background-color: var(--mm-primary); border-color: var(--mm-primary); }

.dropdown-menu {
  border: 0;
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-3);
  background-color: var(--mm-surface);
  padding: 8px;
  min-width: 240px;
}
.dropdown-item { border-radius: var(--mm-radius-sm); padding: 8px 12px; color: var(--mm-text-primary); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--mm-lightprimary); color: var(--mm-primary); }

.alert { border: 0; border-radius: var(--mm-radius); }
.alert-success { background-color: var(--mm-lightsuccess); color: var(--mm-success); }
.alert-danger { background-color: var(--mm-lighterror); color: var(--mm-error); }
.alert-warning { background-color: var(--mm-lightwarning); color: var(--mm-warning); }
.alert-info { background-color: var(--mm-lightinfo); color: var(--mm-info); }

.modal-content { border: 0; border-radius: var(--mm-radius-md); box-shadow: var(--mm-shadow-1); background: var(--mm-surface); }
.modal-header, .modal-footer { border-color: var(--mm-border-color); padding: 16px 24px; }
.modal-body { padding: 24px; }

.nav-tabs { border-bottom-color: var(--mm-border-color); }
.nav-tabs .nav-link { border: 0; color: var(--mm-text-secondary); font-weight: 600; padding: 12px 16px; }
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--mm-primary);
  box-shadow: inset 0 -2px 0 var(--mm-primary);
}

.pagination { --bs-pagination-color: var(--mm-text-primary); }
.page-link { border: 0; border-radius: var(--mm-radius-sm) !important; margin: 0 2px; }
.page-item.active .page-link { background-color: var(--mm-primary); }

/* --------------------------------------------------------------------------
   7. Tryb ciemny — palete podmienia materialm-tokens.css; tu miejsca, gdzie
   Bootstrap trzyma wlasne wartosci.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .app-topbar,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content { background-color: var(--mm-surface); }
[data-bs-theme="dark"] .app-sidebar { border-inline-end-color: var(--mm-border-color); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--mm-surface);
  border-color: var(--mm-border-color);
  color: var(--mm-text-primary);
}

/* --------------------------------------------------------------------------
   8. Druk — bez powloki
   -------------------------------------------------------------------------- */
@media print {
  .app-sidebar, .app-topbar, .app-backdrop { display: none !important; }
  .app-main { margin: 0 !important; }
  .card { box-shadow: none; border: 1px solid var(--mm-border-color); }
}

/* ==========================================================================
   9. Skala rozmiarow tekstu przeniesiona z MaterialPro.
   --------------------------------------------------------------------------
   UWAGA — TO NIE JEST SKALA BOOTSTRAPA I ROZNI SIE OD NIEJ ODWROTNIE.
   W Bootstrapie `.fs-1` jest NAJWIEKSZE (2.5rem), a `.fs-6` najmniejsze.
   MaterialPro odwrocil ten porzadek: `.fs-1` = 10px, `.fs-6` = 20px.

   W widokach panelu jest 125 uzyc tych klas, w tym 96 razy samo `.fs-2`
   w znaczeniu „drobny tekst". Na skali Bootstrapa `.fs-2` to 2rem, wiec bez
   tego bloku kazdy podpis, badge i komorka tabeli urosly by trzykrotnie.

   Wartosci sa przepisane 1:1 z usunietego styles.css. Nie „poprawiaj" ich
   na kolejnosc Bootstrapa bez przejscia przez wszystkie widoki.
   ========================================================================== */
.fs-1 { font-size: .625rem !important; }
.fs-2 { font-size: .75rem !important; }
.fs-3 { font-size: .875rem !important; }
.fs-4 { font-size: 1rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-6 { font-size: 1.25rem !important; }
.fs-7 { font-size: calc(1.275rem + .3vw) !important; }
.fs-8 { font-size: calc(1.3125rem + .75vw) !important; }
.fs-9 { font-size: calc(1.35rem + 1.2vw) !important; }
.fs-10 { font-size: calc(1.375rem + 1.5vw) !important; }
.fs-11 { font-size: .8125rem !important; }
.fs-12 { font-size: .9375rem !important; }

/* Odstepy powyzej piatki, ktorych Bootstrap nie ma. MaterialPro mial cala
   skale do 12 (z dziwnymi wartosciami: 6=12px, 11=93px); przenosimy tylko te
   trzy, ktore widoki faktycznie uzywaja. Reszta celowo nie wraca. */
.mb-7 { margin-bottom: 30px !important; }
.py-8 { padding-top: 10px !important; padding-bottom: 10px !important; }

/* ==========================================================================
   10. Poprawki po wymianie szablonu — miejsca, gdzie widoki licza na wyglad,
   ktorego czysty Bootstrap nie daje.
   ========================================================================== */

/* ---- Segmentowany filtr statusow (np. lista zamowien) --------------------
   Widoki uzywaja `btn-group` + `btn-outline-secondary.active`. Bootstrap maluje
   taki stan na ciemnoszaro, co gryzlo sie z paleta. MaterialM robi z tego
   jasny pasek z podswietlonym segmentem. */
.btn-group .btn-outline-secondary {
  --bs-btn-color: var(--mm-text-secondary);
  --bs-btn-border-color: var(--mm-border-color);
  --bs-btn-bg: var(--mm-surface);
  --bs-btn-hover-color: var(--mm-primary);
  --bs-btn-hover-bg: var(--mm-lightprimary);
  --bs-btn-hover-border-color: var(--mm-border-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mm-primary);
  --bs-btn-active-border-color: var(--mm-primary);
  font-weight: 500;
}
/* Bootstrap nie stosuje --bs-btn-active-* do samej klasy `.active`, tylko do
   :active/.show — a widoki przelaczaja filtr wlasnie klasa `.active`. */
.btn-group .btn-outline-secondary.active {
  background-color: var(--mm-primary);
  border-color: var(--mm-primary);
  color: #fff;
}
/* Skrajne segmenty zaokraglone, srodkowe proste — `.btn` daje 30px wszystkim. */
.btn-group > .btn:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.btn-group > .btn:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }

/* ---- DataTables: naglowki sortowalne ------------------------------------
   dataTables.bootstrap5.css rysuje dwa znaki ▲ i ▼ jeden nad drugim — w druku
   zlewaja sie w „diament" i wygladaja jak artefakt. Zastepujemy je jednym
   szewronem rysowanym krawedziami, ktory obraca sie zaleznie od kierunku.

   UWAGA NA SPECYFICZNOSC: oryginal to `table.dataTable thead>tr>th.sorting`
   — dwie klasy i cztery elementy. Krotszy zapis przegrywa i nic nie robi. */
table.dt-table.dataTable thead > tr > th.sorting,
table.dt-table.dataTable thead > tr > th.sorting_asc,
table.dt-table.dataTable thead > tr > th.sorting_desc {
  padding-right: 32px;
  cursor: pointer;
  transition: color .12s ease;
}
table.dt-table.dataTable thead > tr > th.sorting:hover { color: var(--mm-text-primary); }

/* gorny znak kasujemy — kierunek pokazuje obrot dolnego */
table.dt-table.dataTable thead > tr > th.sorting::before,
table.dt-table.dataTable thead > tr > th.sorting_asc::before,
table.dt-table.dataTable thead > tr > th.sorting_desc::before { display: none; }

table.dt-table.dataTable thead > tr > th.sorting::after,
table.dt-table.dataTable thead > tr > th.sorting_asc::after,
table.dt-table.dataTable thead > tr > th.sorting_desc::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .28;
  transition: opacity .12s ease, transform .15s ease, border-color .12s ease;
}
table.dt-table.dataTable thead > tr > th.sorting:hover::after { opacity: .6; }
table.dt-table.dataTable thead > tr > th.sorting_desc::after {
  opacity: 1;
  border-color: var(--mm-primary);
}
table.dt-table.dataTable thead > tr > th.sorting_asc::after {
  opacity: 1;
  border-color: var(--mm-primary);
  transform: rotate(-135deg);
  margin-top: -2px;
}

/* ---- DataTables: pusta tabela -------------------------------------------
   `td.dataTables_empty` dostawalo pasiaste tlo z `table-striped`. Odstepy
   wnosi teraz `.empty-state` wstawiany przez datatable-lang.blade.php. */
table.dt-table.dataTable tbody > tr > td.dataTables_empty {
  padding: 0;
  text-align: center;
  background: transparent;
  border-bottom: 0;
}
table.dt-table.dataTable tbody > tr:hover > td.dataTables_empty { background: transparent; }

/* ---- Naglowek karty z podtytulem ---------------------------------------- */
.card-header .card-title { margin-bottom: 2px; }
.card-header .card-subtitle { font-size: var(--mm-body-1-size); }

/* ---- Tabela w .table-responsive -----------------------------------------
   Karta ma promien 8px; bez tego tabela wychodzila poza zaokraglony rog. */
.card > .table-responsive { border-radius: 0 0 var(--mm-radius) var(--mm-radius); }

/* ---- Filtr statusow: zawijanie ------------------------------------------
   Lista zamowien ma dziewiec statusow (w tym dwa dlugie „Allegro — …").
   `btn-group` z zalozenia sie nie zawija, wiec przy waskiej karcie pasek
   wychodzil poza jej krawedz. Pozwalamy na zawijanie i nadajemy promien
   kazdemu segmentowi z osobna — inaczej zawiniety wiersz ma sciete rogi. */
.btn-group[aria-label="Filtr statusu"] {
  flex-wrap: wrap;
  gap: 6px;
}
.btn-group[aria-label="Filtr statusu"] > .btn {
  border-radius: var(--mm-btn-radius) !important;
  margin: 0 !important;
}
/* Zawiniete segmenty nie moga sie rozpychac — bez tego drugi wiersz filtra
   (dwa dlugie statusy Allegro) rozciagal sie na cala szerokosc karty. */
.btn-group[aria-label="Filtr statusu"] > .btn { flex: 0 0 auto; }

/* ==========================================================================
   11. Dopracowanie: ikony, pola wyboru, stany puste, mikrointerakcje.
   ========================================================================== */

/* ---- Ikony ---------------------------------------------------------------
   W widokach mieszaja sie dwa zrodla: `iconify-icon` (86 uzyc) i font Tablera
   `ti ti-*` (89). Roznia sie metryka — iconify to element inline o rozmiarze
   1em, Tabler to glif z wlasna linia bazowa. Bez wyrownania jedne wisza nad
   tekstem, drugie pod nim. Ustawiamy wspolna linie bazowa i skale. */
iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.145em;
  line-height: 1;
  flex: 0 0 auto;
}
i.ti { line-height: 1; vertical-align: -0.1em; }

/* Kafelek pod ikone — powtarza sie w pulpicie, listach i naglowkach kart.
   Zamiast `style="width:44px;height:44px;..."` przy kazdym uzyciu. */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--mm-radius-md);
  background: var(--mm-lightprimary);
  color: var(--mm-primary);
}
.icon-tile { width: 44px; height: 44px; font-size: 22px; }
.icon-tile-sm { width: 34px; height: 34px; font-size: 18px; border-radius: var(--mm-radius); }
.icon-tile-lg { width: 52px; height: 52px; font-size: 26px; border-radius: var(--mm-radius-lg); }
.icon-tile-round { border-radius: 50%; }

.icon-tile-success { background: var(--mm-lightsuccess); color: var(--mm-success); }
.icon-tile-warning { background: var(--mm-lightwarning); color: var(--mm-warning); }
.icon-tile-danger { background: var(--mm-lighterror); color: var(--mm-error); }
.icon-tile-info { background: var(--mm-lightinfo); color: var(--mm-info); }
.icon-tile-secondary { background: var(--mm-lightsecondary); color: var(--mm-secondary); }

/* ---- Pola wyboru ---------------------------------------------------------
   Natywna strzalka `select` nachodzila na tekst (widoczne na „Każdy typ"
   w Allegro). Wlasna strzalka + zapas z prawej. */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237b8893' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

/* ---- Stan pusty ----------------------------------------------------------
   „Brak zamówień" bylo golym tekstem posrodku pasa. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 16px;
  color: var(--mm-text-secondary);
}
.empty-state .icon-tile { background: var(--mm-light); color: var(--mm-text-secondary); }
.empty-state-title { font-weight: 600; color: var(--mm-text-primary); }

/* ---- Mikrointerakcje -----------------------------------------------------
   Karty i wiersze reaguja na kursor, ale delikatnie — panel to narzedzie
   pracy, nie strona reklamowa. */
.card { transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1); }
.card-interactive:hover { box-shadow: var(--mm-shadow-3); }

.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; }
.btn:active { transform: translateY(1px); }

/* ---- Obrys fokusu --------------------------------------------------------
   `:focus-visible` zamiast `:focus` — obrys pokazuje sie przy nawigacji
   klawiatura, ale nie po klikniesciu myszka. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.sidebar-link:focus-visible,
.app-rail-btn:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
  outline: 2px solid var(--mm-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- Pasek przewijania ---------------------------------------------------
   Domyslny pasek Windowsa jest szary i szeroki; w panelu z dwoma kolumnami
   przewijania rzucal sie w oczy bardziej niz tresc. */
.app-panel-body::-webkit-scrollbar,
.app-rail-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar { width: 6px; height: 6px; }
.app-panel-body::-webkit-scrollbar-thumb,
.app-rail-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--mm-border-color);
  border-radius: var(--mm-radius-pill);
}
.app-panel-body::-webkit-scrollbar-track,
.app-rail-body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track { background: transparent; }

/* ---- Etykiety w kartach szczegolow ---------------------------------------
   Wersaliki w drobnym stopniu potrzebuja swiatla, inaczej zbijaja sie w plame
   (widoczne na karcie produktu: SKU, SLUG, AUTOR…). */
.detail-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mm-text-secondary);
  margin-bottom: 2px;
}
.detail-value { font-size: var(--mm-body-1-size); color: var(--mm-text-primary); }
.detail-value:empty::before,
.detail-value.is-empty::before {
  content: "—";
  color: var(--mm-text-secondary);
  opacity: .6;
}

/* ---- Redukcja ruchu ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   12. Karty szczegolow (podglad produktu, zamowienia, klienta).
   ========================================================================== */

/* ---- Siatka pol ----------------------------------------------------------
   Gesciej niz `row g-3` + `col-sm-6`: kolumny dobieraja sie do szerokosci.

   Bez linii miedzy wierszami — przy `auto-fit` liczba kolumn zmienia sie z
   szerokoscia okna, wiec kazda proba rysowania ich przez `nth-child` urywa
   sie w polowie ostatniego, niepelnego wiersza. Rytm trzyma odstep i
   wersalikowa etykieta, ktora sama w sobie oddziela pary. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px 28px;
}
.detail-grid > div { min-width: 0; }

.detail-value { word-break: break-word; }
.detail-value a { color: var(--mm-primary); }

/* ---- Pola nieuzupelnione -------------------------------------------------
   Dziesiec myslnikow w siatce dominuje nad tym, co faktycznie wypelnione.
   Chowamy je pod rozwijana liste — nadal widac CZEGO brakuje, ale nie
   zajmuje to polowy karty. */
.detail-missing { margin-top: 16px; }
.detail-missing > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mm-body-1-size);
  color: var(--mm-text-secondary);
  padding: 6px 12px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-light);
  transition: background-color .15s ease, color .15s ease;
}
.detail-missing > summary::-webkit-details-marker { display: none; }
.detail-missing > summary:hover { background: var(--mm-lightprimary); color: var(--mm-primary); }
.detail-missing > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-block-end: 2px;
  transition: transform .15s ease;
}
.detail-missing[open] > summary::after { transform: rotate(-135deg); margin-block: 3px 0; }
.detail-missing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.detail-missing-list span {
  font-size: var(--mm-body-2-size);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mm-text-secondary);
  background: var(--mm-light);
  border-radius: var(--mm-radius-sm);
  padding: 4px 10px;
}

/* ---- Okladka -------------------------------------------------------------
   Puste miejsce po okladce bylo szara plama. Ramka kreskowana czyta sie jako
   „tu czegos brakuje", a nie jako element interfejsu. */
.cover-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  border-radius: var(--mm-radius-md);
  overflow: hidden;
  background: var(--mm-light);
}
.cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.cover-frame.is-empty {
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 2px dashed var(--mm-border-color);
  color: var(--mm-text-secondary);
}
.cover-frame.is-empty iconify-icon,
.cover-frame.is-empty i { font-size: 40px; opacity: .55; }
.cover-frame.is-empty span { font-size: var(--mm-body-2-size); }

/* ---- Sekcje w jednej karcie ---------------------------------------------
   Zamiast osobnej karty na kazdy drobiazg (np. dwa badge'e kategorii). */
.card-section + .card-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--mm-border-color) 55%, transparent);
}
.card-section-title {
  font-size: var(--mm-body-1-size);
  font-weight: 600;
  color: var(--mm-text-primary);
  margin-bottom: 10px;
}

/* ---- Lista par klucz–wartosc (ceny, podsumowania) ------------------------ */
.kv-list { display: flex; flex-direction: column; }
.kv-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-block-start: 1px solid color-mix(in srgb, var(--mm-border-color) 55%, transparent);
}
.kv-list > div:first-child { border-block-start: 0; }
.kv-list dt, .kv-list .kv-key { color: var(--mm-text-secondary); font-weight: 400; margin: 0; }
.kv-list dd, .kv-list .kv-val { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv-list .kv-val-lead { font-size: var(--mm-h5-size); color: var(--mm-primary); }

/* ---- Dostawa plikow na stronie zamowienia -------------------------------- */
.dv-card .badge.bg-light-secondary { background-color: var(--mm-light) !important; color: var(--mm-text-secondary) !important; }
[data-bs-theme="dark"] .dv-card .badge.bg-light-success { color: var(--mm-success) !important; }
.dv-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--mm-border-color);
}
.dv-overview + .dv-section { margin-top: 24px; }
.card-body > .dv-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dv-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: var(--mm-body-1-size);
  font-weight: 600;
  color: var(--mm-text-primary);
}
.dv-heading > .ti { font-size: 18px; color: var(--mm-primary); }
.dv-note { margin: 12px 0 0; font-size: 13px; color: var(--mm-text-secondary); }

/* Pary etykieta nad wartoscia */
.dv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 24px;
  margin: 0;
}
.dv-fields dt, .dv-label {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--mm-text-secondary);
}
.dv-fields dd { margin: 0; color: var(--mm-text-primary); }
.dv-field-wide { grid-column: 1 / -1; }
.dv-code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--mm-light);
  color: var(--mm-text-primary);
  font-size: 12.5px;
}

/* Panel jednego zrodla dostawy (eLibri, Azymut, Allegro, stary sklep) */
.dv-panels > .dv-panel { margin-top: 24px; }
.dv-panel {
  border: 1px solid var(--mm-border-color);
  border-radius: var(--mm-radius);
  overflow: hidden;
}
.dv-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--mm-light);
  border-bottom: 1px solid var(--mm-border-color);
}
.dv-panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--mm-text-primary);
}
.dv-source {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--mm-text-primary);
  color: var(--mm-surface);
  font-size: 12px;
  font-weight: 600;
}
.dv-panel-body { display: flex; flex-direction: column; gap: 20px; padding: 18px 16px; }
.dv-error {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mm-lighterror);
  color: var(--mm-error);
  overflow-wrap: anywhere;
}

/* Etapy dostawy: to prawdziwa kolejnosc, wiec os czasu, a nie lista */
.dv-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dv-step { position: relative; padding: 20px 12px 0 0; }
.dv-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--mm-border-color);
  border-radius: 50%;
  background: var(--mm-surface);
}
.dv-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 12px;
  right: 0;
  height: 2px;
  background: var(--mm-border-color);
}
.dv-step.is-done::before { border-color: var(--mm-success); background: var(--mm-success); }
.dv-step.is-done:has(+ .is-done)::after { background: var(--mm-success); }
.dv-step-label { display: block; font-weight: 600; color: var(--mm-text-primary); }
.dv-step-time { display: block; font-size: 13px; color: var(--mm-text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .dv-steps { grid-auto-flow: row; gap: 12px; }
  .dv-step { padding: 0 0 0 22px; }
  .dv-step::before { top: 4px; }
  .dv-step:not(:last-child)::after { display: none; }
}

/* Pliki u dostawcy: format i nazwa pliku zamiast dlugiego adresu */
.dv-file { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.dv-format {
  flex: none;
  min-width: 48px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--mm-lightprimary);
  color: var(--mm-primary);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}
.dv-link { align-self: flex-start; font-weight: 500; }

/* Historia zdarzen: zwinieta, bo w dzienniku bywa do 100 wpisow */
.dv-events summary { margin-bottom: 0; cursor: pointer; list-style: none; }
.dv-events summary::-webkit-details-marker { display: none; }
.dv-events summary:focus-visible { outline: 2px solid var(--mm-primary); outline-offset: 4px; border-radius: 4px; }
.dv-events .dv-chevron { transition: transform .15s ease; }
.dv-events[open] .dv-chevron { transform: rotate(90deg); }
.dv-events[open] summary { margin-bottom: 14px; }
.dv-events-scroll { max-height: 420px; overflow-y: auto; }
.dv-events-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--mm-surface); }
@media (prefers-reduced-motion: reduce) { .dv-events .dv-chevron { transition: none; } }