/* Motyw panelu Metako: granat + niebieski akcent, jasne tło, białe karty.
   Wczytywany z AdminPanelProvider (renderHook HEAD_END) - bez kroku budowania (Vite/Node
   nie ma na hostingu). Kolory tylko przez zmienne --m-*; tryb ciemny zostaje domyślny Filamentu. */
:root {
    --m-navy: #0f2a4a;
    --m-navy-2: #16375f;
    --m-blue: #1d5fd1;
    --m-blue-soft: #e8f0fd;
    --m-bg: #eef2f7;
    --m-line: #dbe3ee;
    --m-orange: #f59e0b;
}

/* --- tło strony i karty --- */
html:not(.dark) .fi-body { background: var(--m-bg); }
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-fo-field-wrp .fi-input-wrp {
    box-shadow: 0 1px 2px rgba(15, 42, 74, .06), 0 1px 3px rgba(15, 42, 74, .05);
}
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat {
    border: 1px solid var(--m-line);
    border-radius: .75rem;
}
html:not(.dark) .fi-section-header-heading,
html:not(.dark) .fi-header-heading { color: var(--m-navy); }

/* --- pasek górny: cienki niebieski akcent --- */
html:not(.dark) .fi-topbar > nav {
    background: #fff;
    border-bottom: 1px solid var(--m-line);
    box-shadow: 0 2px 0 0 var(--m-blue) inset, 0 1px 2px rgba(15, 42, 74, .05);
}

/* --- menu boczne: granatowe --- */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
    background: linear-gradient(180deg, var(--m-navy) 0%, var(--m-navy-2) 100%);
    border-color: rgba(255, 255, 255, .08);
    --tw-ring-color: transparent;
}
html:not(.dark) .fi-sidebar-header { background: var(--m-navy); border-bottom: 1px solid rgba(255, 255, 255, .1); }
html:not(.dark) .fi-sidebar-header .fi-logo,
html:not(.dark) .fi-sidebar-header a,
html:not(.dark) .fi-sidebar-header span { color: #fff; }
html:not(.dark) .fi-sidebar-header button { color: #c7d6ea; }
html:not(.dark) .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-group-label,
html:not(.dark) .fi-sidebar-group-collapse-button { color: #c7d6ea; }
html:not(.dark) .fi-sidebar-group-label { text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: #8fa8c8; }
html:not(.dark) .fi-sidebar-item > a:hover,
html:not(.dark) .fi-sidebar-item-button:hover { background: rgba(255, 255, 255, .08); }
html:not(.dark) .fi-sidebar-item.fi-active > a,
html:not(.dark) .fi-sidebar-item-active > a,
html:not(.dark) .fi-sidebar-item-active > .fi-sidebar-item-button {
    background: var(--m-blue);
    box-shadow: 0 2px 8px rgba(29, 95, 209, .45);
}
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff; }
html:not(.dark) .fi-sidebar .fi-sidebar-nav { scrollbar-color: #3b5b85 transparent; }
html:not(.dark) .fi-sidebar-footer, html:not(.dark) .fi-sidebar .fi-sidebar-database-notifications-btn { color: #c7d6ea; }

/* --- tabele: nagłówek w odcieniu niebieskiego, delikatne podświetlanie wierszy --- */
html:not(.dark) .fi-ta-header-cell { background: #f3f7fc; }
html:not(.dark) .fi-ta-header-cell-label,
html:not(.dark) .fi-ta-header-cell button { color: var(--m-navy); font-weight: 600; }
html:not(.dark) .fi-ta-row:hover { background: var(--m-blue-soft); }
.fi-ta-row { transition: background-color .12s ease; }
html:not(.dark) .fi-ta-header-toolbar { border-color: var(--m-line); }

/* --- lista zamówień: kolorowy pasek z lewej strony wiersza wg statusu realizacji ---
   Klasa `order-row-status-*` dopisana do <tr> przez OrderResource::table()->recordClasses().
   Pasek na pierwszej komórce (nie na <tr> - box-shadow/border na <tr> nie renderuje się
   niezawodnie we wszystkich przeglądarkach w układzie tabelowym), ten sam trik co Filament
   sam używa do zaznaczenia wybranego wiersza (`[&>*:first-child]:before:...` w row.blade.php). */
.fi-ta-row[class*="order-row-status-"] > *:first-child { position: relative; }
.fi-ta-row[class*="order-row-status-"] > *:first-child::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
html:not(.dark) .fi-ta-row.order-row-status-new > *:first-child::before { background: var(--m-blue); }
html:not(.dark) .fi-ta-row.order-row-status-in_progress > *:first-child::before { background: var(--m-orange); }
html:not(.dark) .fi-ta-row.order-row-status-completed > *:first-child::before { background: #10b981; }
html:not(.dark) .fi-ta-row.order-row-status-unknown > *:first-child::before { background: #9ca3af; }

/* --- lista zamówień: kolumna „Produkcja” - opis etapu (np. „rysunek gotowy - czeka na handlowca (Technolog: ...)”)
   bywa długi i rozpychał kolumnę do ~450 px, przez co tabela wychodziła poza ekran. Szerokość ograniczona,
   opis zawija się do 2-3 linii. --- */
.fi-table-cell-production-status .fi-ta-text { max-width: 210px; }
.fi-table-cell-production-status .fi-ta-text p { white-space: normal; }

/* --- strony edycji / tworzenia / podglądu rekordu: nagłówek w dwóch liniach (zgłoszenie 2026-10-06) ---
   Tytuł na górze, pod nim rząd przycisków akcji (zawijany, gdy się nie mieści). Wcześniej przy zleceniu z kilkoma
   akcjami (Przekaż technologowi, Rysunki gotowe, Wyślij na produkcję, Drukuj, Potwierdzenie...) przyciski stały
   obok tytułu i łamały go na dwie linie. */
.fi-resource-edit-record-page .fi-header,
.fi-resource-create-record-page .fi-header,
.fi-resource-view-record-page .fi-header {
    flex-direction: column; align-items: stretch; gap: .85rem;
    padding-bottom: .9rem; border-bottom: 1px solid var(--m-line);
}
.fi-resource-edit-record-page .fi-header > div:last-child,
.fi-resource-create-record-page .fi-header > div:last-child,
.fi-resource-view-record-page .fi-header > div:last-child {
    flex-wrap: wrap; gap: .6rem; margin-top: 0 !important; width: 100%;
}
.fi-resource-edit-record-page .fi-header-heading,
.fi-resource-create-record-page .fi-header-heading,
.fi-resource-view-record-page .fi-header-heading { white-space: nowrap; }

/* Przyciski akcji w nagłówku odrobinę mniejsze i z mniejszym odstępem, żeby 6 akcji zlecenia mieściło się w jednym rzędzie
   (kolumna treści ma 1216 px, same przyciski miały 1223 px). */
.fi-resource-edit-record-page .fi-header .fi-ac,
.fi-resource-view-record-page .fi-header .fi-ac { gap: .5rem; }
.fi-resource-edit-record-page .fi-header .fi-ac .fi-btn,
.fi-resource-view-record-page .fi-header .fi-ac .fi-btn { font-size: .8rem; padding-inline: .65rem; }

/* Przycisk niszczący (Usuń) odsunięty na prawą stronę rzędu, z dala od akcji obiegu - mniejsze ryzyko pomyłki. */
.fi-resource-edit-record-page .fi-header .fi-ac > .fi-btn.fi-color-danger,
.fi-resource-view-record-page .fi-header .fi-ac > .fi-btn.fi-color-danger { margin-left: auto; }

/* --- formularz zlecenia: główne belki (sekcje) w różnych kolorach + pogrubione nagłówki (zgłoszenie 2026-10-06:
   "wszystko się zlewa"). Klasy `metako-sec-*` dopisuje OrderResource::form() przez extraAttributes().
   --sc = kolor akcentu (lewa grubsza krawędź + nagłówek), --st = delikatne tło paska nagłówka. --- */
.metako-sec { --sc: #64748b; --st: rgba(100, 116, 139, .10); border-left: 6px solid var(--sc) !important; }
.metako-sec-ident    { --sc: #1d5fd1; --st: rgba(29, 95, 209, .10); }
.metako-sec-finance  { --sc: #059669; --st: rgba(5, 150, 105, .11); }
.metako-sec-items    { --sc: #7c3aed; --st: rgba(124, 58, 237, .10); }
.metako-sec-status   { --sc: #d97706; --st: rgba(217, 119, 6, .12); }
.metako-sec-returned { --sc: #dc2626; --st: rgba(220, 38, 38, .10); }
.metako-sec > .fi-section-header { background: var(--st); border-radius: .5rem .5rem 0 0; }
.metako-sec .fi-section-header-heading {
    font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--sc) !important;
}
html.dark .metako-sec .fi-section-header-heading { filter: brightness(1.35); }

/* --- lista zamówień: kolumny z tekstem (Nr oferty, Klient + „Handlowiec: ...”) mogą zawijać do 2 linii, gdy brakuje miejsca - bez tego
   ich najdłuższa zawartość wyznaczała minimalną szerokość i tabela wychodziła poza ekran (zgłoszenie 2026-10-26). Min. szerokość
   kolumn ograniczona, więc zawijanie nie ściska ich do pojedynczych liter. --- */
.fi-table-cell-client-order-number .fi-ta-text,
.fi-table-cell-client-name .fi-ta-text { min-width: 110px; }
.fi-table-cell-client-order-number .fi-ta-text p,
.fi-table-cell-client-name .fi-ta-text p,
.fi-table-cell-client-order-number .fi-ta-text span,
.fi-table-cell-client-name .fi-ta-text span { white-space: normal; overflow-wrap: anywhere; }

/* --- lista zamówień: pomarańczowe tło wiersza = zlecenie czeka na handlowca (szkic / rysunek gotowy / odesłane z uwagami) --- */
html:not(.dark) .fi-ta-row.order-row-waiting-salesperson,
html:not(.dark) .fi-ta-row.order-row-waiting-salesperson > td { background-color: #fff3dc; }
html.dark .fi-ta-row.order-row-waiting-salesperson,
html.dark .fi-ta-row.order-row-waiting-salesperson > td { background-color: rgba(245, 158, 11, 0.16); }

/* --- lista zamówień: czerwone tło wiersza = zgłoszona zmiana rysunku, czeka na potwierdzenie kierownika (2026-10-08).
   Po regule pomarańczowej, żeby czerwień miała pierwszeństwo, gdy zlecenie spełnia oba warunki. --- */
html:not(.dark) .fi-ta-row.order-row-drawing-changed,
html:not(.dark) .fi-ta-row.order-row-drawing-changed > td { background-color: #fee2e2; }
html.dark .fi-ta-row.order-row-drawing-changed,
html.dark .fi-ta-row.order-row-drawing-changed > td { background-color: rgba(220, 38, 38, 0.22); }

/* --- kafelki statystyk: cała ramka w kolorze (zgłoszenie: nie tylko pasek z lewej) --- */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; border-width: 3px; }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(1) { border-color: var(--m-blue); }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(2) { border-color: #10b981; }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(3) { border-color: var(--m-orange); }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(4) { border-color: #8b5cf6; }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(5) { border-color: #ef4444; }
html:not(.dark) .fi-wi-stats-overview-stat:nth-child(n+6) { border-color: var(--m-line); }
.fi-wi-stats-overview-stat-value { color: var(--m-navy); font-weight: 700; }
html.dark .fi-wi-stats-overview-stat-value { color: #fff; }

/* --- przyciski i pola --- */
.fi-btn { border-radius: .5rem; font-weight: 600; }
html:not(.dark) .fi-input-wrp:focus-within { border-color: var(--m-blue); }

/* --- logowanie: granatowy gradient i biała karta --- */
html:not(.dark) .fi-simple-layout {
    background: radial-gradient(1200px 600px at 20% -10%, #2a5ba8 0%, transparent 60%),
        linear-gradient(160deg, var(--m-navy) 0%, #0b1f38 100%);
}
html:not(.dark) .fi-simple-main { border-radius: 1rem; box-shadow: 0 20px 45px rgba(0, 0, 0, .35); }
.fi-simple-header-heading { color: var(--m-navy); font-weight: 700; }
html.dark .fi-simple-header-heading { color: #fff; }

/* --- stopka --- */
html:not(.dark) .metako-footer { color: #6b7f99; }