/*
 * Wspólny wygląd panelu (nakłada się na Bootstrap 4 z app.css).
 * Czcionka Inter: czytelna w małych rozmiarach, polskie znaki, cyfry o równej szerokości (EAN, stany, ceny w kolumnach).
 * Rozmiary: tekst 16 px, tabele 15 px, opisy pomocnicze 14 px (nie mniej). Kody (EAN, symbole) czcionką o stałej szerokości.
 */

:root {
    --text: #1f2328;
    --text-muted: #59636e;      /* kontrast 6:1 na białym - czytelny, a wyraźnie drugoplanowy */
    --border: #e1e4e8;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --primary: #1d6fd1;
    --primary-strong: #1559b0;  /* tekst na jasnoniebieskim tle (kontrast ≥ 4,5:1) */
    --success: #1a7f37;
    --success-strong: #116329;  /* tekst etykiet na zielonym tle */
    --success-bg: #dafbe1;
    --warning: #7d4e00;
    --warning-bg: #fff4d6;
    --danger: #cf222e;
    --danger-bg: #ffebe9;
    --info-bg: #e8f0fb;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

html { font-size: 16px; }

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
h1, .h3 { font-size: 1.5rem; }
h2.h5, .h5 { font-size: 1.125rem; }
h3.h6, .h6 { font-size: 1rem; }

small, .small { font-size: .875rem; }
.text-muted { color: var(--text-muted) !important; }
a { color: var(--primary); }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }

/* Liczby w tabelach w równych kolumnach */
.table, .tabular { font-variant-numeric: tabular-nums; }
.table { font-size: .9375rem; color: var(--text); }
.table thead th { font-weight: 600; font-size: .875rem; color: var(--text-muted); border-bottom-width: 1px; white-space: nowrap; }
.table td, .table th { border-color: var(--border); }

/* Kody: EAN, symbol producenta, kod u dostawcy, adnotacja */
code, .code { font-family: var(--font-code); font-size: .9375em; color: var(--text); background: transparent; padding: 0; overflow-wrap: break-word; }
.table .code { white-space: nowrap; overflow-wrap: normal; }

/* Karty i sekcje: jedna lekka ramka zamiast ciężkich nagłówków */
.card { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.card-header { background: var(--surface); font-weight: 600; border-bottom-color: var(--border); }

/* Nagłówek strony (partials/page-header) */
.page-header { margin-bottom: 1.25rem; }
.page-header h1 { margin-bottom: .25rem; }
.page-back { display: inline-block; font-size: .875rem; margin-bottom: .5rem; }
.page-narrow { max-width: 1200px; }

/* Przyciski: wyraźna akcja główna, pozostałe spokojniejsze */
.btn { font-weight: 500; border-radius: 6px; }
.btn-sm { font-size: .875rem; padding: .3rem .65rem; min-height: 32px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
/* Bootstrap/Laravel mają za jasne kolory obramowanych przycisków (zielony 2,3:1) */
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
.btn-outline-secondary { color: #57606a; border-color: #8c959f; }
.btn-outline-secondary:hover { background: #57606a; border-color: #57606a; color: #fff; }

/* Etykiety */
.badge { font-weight: 600; font-size: .8125rem; padding: .25em .5em; border-radius: 4px; }
.badge-soft-success { background: var(--success-bg); color: var(--success-strong); }
.badge-soft-warning { background: var(--warning-bg); color: var(--warning); }
.badge-soft-danger { background: var(--danger-bg); color: var(--danger); }
.badge-soft-info { background: var(--info-bg); color: var(--primary-strong); }
.badge-soft-muted { background: #eef0f2; color: var(--text-muted); }
.supplier-badge { font-weight: 500; margin: 1px 2px 1px 0; }
.suspicious-badge { box-shadow: 0 0 0 2px var(--danger); }

/* Dobrze widoczny fokus przy obsłudze klawiaturą */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Górna belka: aktywna zakładka podkreślona (nie pogrubiona - napisy nie skaczą) */
.app-navbar { font-size: .9375rem; }
.app-navbar .navbar-nav > .nav-item > .nav-link { padding: .75rem .75rem; color: #3d444d; }
.app-navbar .navbar-nav > .nav-item > .nav-link:hover { color: var(--text); }
.app-navbar .navbar-nav > .nav-item > .nav-link.active { color: var(--text); font-weight: 500; box-shadow: inset 0 -3px 0 var(--primary); }
.app-navbar .badge { font-size: 70%; vertical-align: 2px; }
.app-navbar .dropdown-item small { white-space: normal; }
.app-navbar .dropdown-menu { min-width: 16rem; }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--info-bg); color: var(--primary-strong); font-weight: 700; font-size: .8rem; }

/* Numer wersji w rogu */
.app-version { font-size: .75rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Link "Przejdź do treści" - widoczny tylko przy obsłudze klawiaturą */
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 1100; padding: .5rem .75rem; background: var(--text); color: #fff; border-radius: 6px; }
.skip-link:focus { top: .5rem; color: #fff; }
main:focus { outline: none; }

/* Wskaźnik zadania w tle w górnej belce */
.nav-busy { display: inline-flex; align-items: center; font-size: .875rem; color: var(--text-muted); padding: .3rem .6rem; border-radius: 6px; background: #eef0f2; }

/* Stopka z wersją zawsze na dole strony, także przy krótkiej treści */
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; }

/* Strony szczegółów węższe, ale zaczynają się przy tej samej lewej krawędzi co listy */
.page-narrow { margin-left: 0; }

/* Linki w zwykłym tekście podkreślone - kolor nie może być jedynym wyróżnikiem (WCAG 1.4.1) */
p a:not(.btn), li a:not(.btn):not(.dropdown-item):not(.nav-link), .text-muted a:not(.btn), dd a { text-decoration: underline; text-underline-offset: 2px; }

/* Długie opisy czytelne: maks. ok. 90 znaków w linii */
.page-header .small, p.small, .help-text { max-width: 90ch; }