/* ═══════════════════════════════════════════════════
   Nexlog — hd-components.css
   Jedyne zrodlo prawdy dla komponentow .hd-* ("Atrium"),
   wspoldzielone przez panel wewnetrzny (layouts/app.blade.php)
   i portal klienta (client/layouts/app.blade.php).
   ═══════════════════════════════════════════════════

   Statyczny plik CSS (nie Blade-partial) - zeby korzystac z cache
   przegladarki miedzy stronami i nie dotykac storage/framework/views/
   przy kazdej edycji. Cache-busting przez query string z hashem builda
   (patrz <link> w obu layoutach: ?v={{ config('version.hash') }}).

   Kanoniczne wartosci wziete z panelu wewnetrznego (byl pelniejszy,
   portal mial podzbior z driftem) - jeden wyjatek: .hd-alert
   margin-bottom:16px wzieta z portalu (w panelu wygladalo na przeoczenie,
   alert bez marginesu stykal sie z kolejnym elementem).

   Zob. CLAUDE.md, sekcja "Standaryzacja UI (.hd-*)" dla historii tej
   zmiany i listy swiadomych, widocznych roznic dla portalu klienta
   (rozmiar .hd-stat-val, strzalka .hd-select, .hd-btn-danger itd.) */

/* ── CARDS ── */
.hd-card { background:var(--bg-1); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color 0.2s; box-shadow:0 1px 2px rgba(24,24,27,0.04), 0 4px 10px rgba(24,24,27,0.05); }
.hd-card:hover { border-color:var(--border-2); }
.hd-card-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.hd-card-title { font-size:14.5px; font-weight:700; color:var(--text); }

/* ── TABLES ── */
.hd-table { width:100%; border-collapse:collapse; }
.hd-table thead th { padding:11px 16px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border); }
.hd-table tbody td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--text-2); transition:background 0.1s; }
.hd-table tbody tr:last-child td { border-bottom:none; }
.hd-table tbody tr:hover td { background:var(--bg-glass-2); }
.hd-table .cell-title { color:var(--text); font-weight:600; }
.hd-table .cell-mono  { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-3); }

/* ── BADGES ── */
.hd-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; }
.hd-badge-cyan   { background:var(--accent-soft);  color:color-mix(in srgb, var(--a1) 65%, black); }
.hd-badge-violet { background:rgba(70,88,107,0.14); color:var(--a2); }
.hd-badge-pink   { background:var(--danger-soft);  color:var(--a3); }
.hd-badge-amber  { background:var(--warn-soft);    color:var(--a4); }
.hd-badge-gray   { background:var(--bg-glass-2);   color:var(--text-3); border:1px solid var(--border); }
/* Atrium 2: statusy zgloszen (Ticket::STATUS_BADGES) */
.hd-badge-blue   { background:var(--status-open-soft); color:var(--status-open); }
.hd-badge-green  { background:var(--success-soft); color:var(--success); }

/* ── PRIORYTET: slupki sygnalu + slowo (components/priority-badge) ──
   Ksztalt odroznia priorytet od statusu obok w tej samej tabeli. */
.hd-prio { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }
.hd-prio i { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.hd-prio i b { width:3px; border-radius:1px; background:currentColor; opacity:0.25; }
.hd-prio i b:nth-child(1) { height:5px; } .hd-prio i b:nth-child(2) { height:8px; } .hd-prio i b:nth-child(3) { height:12px; }
.hd-prio-low i b:nth-child(1), .hd-prio-normal i b:nth-child(-n+2), .hd-prio-high i b, .hd-prio-critical i b { opacity:1; }
.hd-prio-low { color:var(--text-3); font-weight:500; }
.hd-prio-high { color:var(--text); }
.hd-prio-critical { color:var(--a3); }

/* ── BUTTONS ── */
.hd-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; transition:all 0.15s; font-family:'Outfit',sans-serif; border:none; }
.hd-btn-primary { background:var(--text); color:var(--bg); }
.hd-btn-primary:hover { background:var(--text); filter:brightness(0.8); transform:translateY(-1px); }
:root[data-theme="dark"] .hd-btn-primary { background:var(--a1); color:#fff; }
:root[data-theme="dark"] .hd-btn-primary:hover { background:var(--a1); filter:brightness(1.12); }
.hd-btn-ghost { background:var(--bg-glass-2); border:1px solid var(--border); color:var(--text-2); }
.hd-btn-ghost:hover { border-color:var(--border-2); color:var(--text); }
.hd-btn-danger { background:var(--danger-soft); border:1px solid color-mix(in srgb, var(--a3) 20%, transparent); color:var(--a3); }
.hd-btn-sm { padding:6px 12px; font-size:12.5px; border-radius:7px; }

/* ── FORM INPUTS ── */
.hd-input { width:100%; background:var(--bg-glass-2); border:1px solid var(--border); color:var(--text); font-size:14px; border-radius:9px; padding:10px 14px; outline:none; transition:all 0.2s; font-family:'Outfit',sans-serif; }
.hd-input:focus { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 10%, transparent); }
.hd-input::placeholder { color:var(--text-3); }
.hd-label { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin-bottom:6px; font-weight:600; }
.hd-select { width:100%; background:var(--bg-glass-2); border:1px solid var(--border); color:var(--text); font-size:14px; border-radius:9px; padding:10px 14px; outline:none; transition:all 0.2s; font-family:'Outfit',sans-serif; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6A70' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.hd-select:focus { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 10%, transparent); }
.hd-select option { background:var(--bg-2); color:var(--text); }
.hd-textarea { width:100%; background:var(--bg-glass-2); border:1px solid var(--border); color:var(--text); font-size:14px; border-radius:9px; padding:10px 14px; outline:none; transition:all 0.2s; font-family:'Outfit',sans-serif; resize:vertical; }
.hd-textarea:focus { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 10%, transparent); }

/* ── PAGE HEADER ── */
.hd-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; }
.hd-page-title { font-size:25px; font-weight:700; letter-spacing:-0.02em; color:var(--text); font-family:var(--font-display); }
.hd-page-sub   { font-size:13.5px; color:var(--text-3); margin-top:4px; }

/* ── SECTION BOX ── */
.hd-section { background:var(--bg-1); border:1px solid var(--border); border-radius:14px; padding:22px 24px; margin-bottom:16px; transition:border-color 0.2s; box-shadow:0 1px 2px rgba(24,24,27,0.04), 0 4px 10px rgba(24,24,27,0.05); }
.hd-section-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:16px; }

/* ── STAT CARDS ── */
.hd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.hd-stat { background:var(--bg-1); border:1px solid var(--border); border-radius:14px; padding:18px 20px; position:relative; overflow:hidden; transition:transform 0.2s,border-color 0.2s; box-shadow:0 1px 2px rgba(24,24,27,0.04), 0 4px 10px rgba(24,24,27,0.05); }
.hd-stat:hover { transform:translateY(-2px); border-color:var(--border-2); }
.hd-stat-label { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; color:var(--text-2); margin-bottom:9px; }
.hd-stat-val   { font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1; margin-bottom:6px; font-family:var(--font-display); }
.hd-stat-sub   { font-size:12.5px; color:var(--text-3); }

/* ── UTILITY ── */
.mono { font-family:'JetBrains Mono',monospace; }
.hd-divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
.hd-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hd-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.hd-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hd-stack  { display:flex; flex-direction:column; gap:14px; }
.hd-row    { display:flex; align-items:center; gap:10px; }
.hd-row-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hd-form-group  { margin-bottom:14px; }

/* ── SZEROKOSC TRESCI (strony jednokolumnowe) ──
   Audyt 2026-10-10: 9 roznych wartosci max-width na stronach
   formularzy/tresci (480-960px), kazda strona wymyslala swoja wlasna.
   Skonsolidowane do 3 poziomow - listy/tabele i wielokolumnowe widoki
   (oferty, zgloszenie, projekt) nie uzywaja tych klas, zostaja pelnej
   szerokosci jak dotychczas. */
.hd-content-sm { max-width:520px; margin:0 auto; }
.hd-content-md { max-width:680px; margin:0 auto; }
.hd-content-lg { max-width:960px; margin:0 auto; }

/* ── ALERT BOXES ── */
/* margin-bottom:16px wzieta z portalu klienta - w panelu wygladalo na
   przeoczenie (alert bez marginesu stykal sie z kolejnym elementem). */
.hd-alert { border-radius:10px; padding:12px 16px; font-size:13.5px; border:1px solid; display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.hd-alert-info    { background:var(--bg-glass-2);  border-color:var(--border);         color:var(--text-2); }
.hd-alert-warn    { background:var(--warn-soft);   border-color:color-mix(in srgb, var(--a4) 20%, transparent);  color:var(--a4); }
.hd-alert-error   { background:var(--danger-soft); border-color:color-mix(in srgb, var(--a3) 20%, transparent);   color:var(--a3); }
.hd-alert-success { background:var(--success-soft);border-color:color-mix(in srgb, var(--success) 20%, transparent);   color:var(--success); }

/* ── EMPTY STATE ── */
.hd-empty { text-align:center; padding:48px 24px; color:var(--text-3); font-size:13.5px; }
.hd-empty-icon  { font-size:32px; margin-bottom:12px; opacity:0.35; display:block; }
.hd-empty-title { font-size:14.5px; font-weight:700; color:var(--text-2); margin-bottom:6px; }
.hd-empty-sub   { font-size:12.5px; color:var(--text-3); }

/* ── DESCRIPTION LIST ── */
.hd-dl { display:grid; grid-template-columns:160px 1fr; gap:10px 20px; }
.hd-dt { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); font-weight:600; padding-top:2px; }
.hd-dd { font-size:14px; color:var(--text); }

/* ── INLINE CODE ── */
.hd-code { font-family:'JetBrains Mono',monospace; font-size:12px; background:var(--bg-glass-2); border:1px solid var(--border); border-radius:5px; padding:2px 7px; color:var(--a1); }

/* ── TOOLTIP ── */
.hd-tip { position:relative; cursor:help; }
.hd-tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--text); border:1px solid var(--text); color:var(--bg); font-size:11px; white-space:nowrap; border-radius:6px; padding:4px 9px; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:999; }
.hd-tip:hover::after { opacity:1; }

/* ── ATRIUM 2: komponenty .hd-* (panel serwisanta i portal klienta) ──
   Nadpisuje reguly wyzej. Zmienia wyglad, nie uklad: bez cieni na
   kartach, etykiety pol zdaniem (13px zamiast 11.5px WIELKIMI), jeden
   przycisk glowny w obu motywach, widoczny fokus klawiatury. */
:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; }
.hd-card, .hd-section, .hd-stat { box-shadow:none; }
.hd-stat:hover { transform:none; }
.hd-card:hover, .hd-section:hover, .hd-stat:hover { border-color:var(--border-2); }
.hd-table thead th { background:var(--bg-2); font-size:12px; letter-spacing:0.06em; }
.hd-table tbody td { font-size:14px; }
.hd-table .cell-mono { font-size:12.5px; font-variant-numeric:tabular-nums; }
.hd-btn { border-radius:var(--radius-md); }
.hd-btn-sm { border-radius:8px; }
.hd-btn-primary, :root[data-theme="dark"] .hd-btn-primary { background:var(--accent-strong); color:var(--on-accent); }
.hd-btn-primary:hover, :root[data-theme="dark"] .hd-btn-primary:hover { background:var(--accent-strong); filter:brightness(1.08); transform:none; }
.hd-btn-ghost { background:var(--bg-1); border-color:var(--border-2); }
.hd-btn-ghost:hover { background:var(--bg-2); }
.hd-input, .hd-select, .hd-textarea { background-color:var(--bg-1); border-color:var(--border-control); border-radius:var(--radius-md); }
.hd-input:focus, .hd-select:focus, .hd-textarea:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft); }
.hd-label { font-size:13px; text-transform:none; letter-spacing:0; color:var(--text); font-weight:600; }
.hd-stat-label { font-size:12px; letter-spacing:0.06em; color:var(--text-3); }
.hd-dt { font-size:12px; }
.hd-badge-cyan { color:var(--accent-strong); }
.hd-code { color:var(--accent-strong); }

/* ── ATRIUM 2: okno modalne na natywnym <dialog> (etap 3) ──
   Wspolne dla panelu i portalu klienta (okno "Zgłoś problem" jest w obu).
   dialog.showModal() rysuje okno w top layer przegladarki - zawsze nad
   gornym paskiem, bez z-index i bez przenoszenia elementu do <body>.
   Esc zamyka natywnie, fokus wraca na przycisk, ktory otworzyl okno.
   Rozmiary: domyslny (krotkie formularze),
   --lg (75vw x 75vh, formularze z dluzszym tekstem). */
.hd-modal { border:none; padding:0; margin:auto; border-radius:16px; background:var(--bg-1); color:var(--text); box-shadow:0 24px 64px rgba(23,24,26,0.24); width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:hidden; }
.hd-modal::backdrop { background:rgba(23,24,26,0.55); backdrop-filter:blur(3px); }
:root[data-theme="dark"] .hd-modal { box-shadow:0 24px 64px rgba(0,0,0,0.6); border:1px solid var(--border-2); }
.hd-modal--lg { width:min(75vw, calc(100vw - 32px)); height:min(75vh, calc(100vh - 32px)); }
.hd-modal-inner { display:flex; flex-direction:column; height:100%; max-height:calc(100vh - 32px); }
.hd-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 28px 16px; flex-shrink:0; }
.hd-modal-title { font-size:20px; line-height:26px; font-weight:700; color:var(--text); font-family:var(--font-display); }
.hd-modal-sub { font-size:13.5px; color:var(--text-3); margin-top:4px; }
.hd-modal-sub strong { color:var(--text-2); }
.hd-modal-close { width:36px; height:36px; display:grid; place-items:center; border:none; background:none; border-radius:8px; color:var(--text-3); cursor:pointer; flex-shrink:0; }
.hd-modal-close:hover { background:var(--bg-2); color:var(--text); }
.hd-modal-body { flex:1; min-height:0; overflow:auto; padding:0 28px 8px; display:flex; flex-direction:column; }
.hd-modal-foot { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:16px 28px 22px; border-top:1px solid var(--border); flex-shrink:0; }
.hd-modal--lg .hd-modal-head { padding:32px 40px 20px; }
.hd-modal--lg .hd-modal-title { font-size:22px; line-height:28px; }
.hd-modal--lg .hd-modal-body { padding:0 40px 8px; font-size:16px; }
.hd-modal--lg .hd-modal-foot { padding:18px 40px 26px; }
.hd-modal--lg .hd-label { font-size:14.5px; margin-bottom:8px; }
.hd-modal--lg .hd-select, .hd-modal--lg .hd-input, .hd-modal--lg .hd-textarea { font-size:16px; padding:12px 14px; }
.hd-modal--lg .hd-textarea { flex:1; min-height:200px; resize:vertical; }
.hd-modal--lg .hd-btn { font-size:15px; padding:12px 26px; }
.hd-modal--lg input[type=checkbox] { width:18px; height:18px; }
@media (max-width:700px) {
    .hd-modal, .hd-modal--lg { width:100vw; max-width:100vw; height:fit-content; max-height:100dvh; margin:auto 0 0; border-radius:16px 16px 0 0; }
    .hd-modal-head, .hd-modal--lg .hd-modal-head { padding:22px 20px 14px; }
    .hd-modal-body, .hd-modal--lg .hd-modal-body { padding:0 20px 8px; }
    .hd-modal-foot, .hd-modal--lg .hd-modal-foot { padding:14px 20px 20px; }
}

/* ── ATRIUM 2: podglady na <dialog> (zdjecia, zalaczniki, pliki) ──
   Pelny ekran na ciemnym tle jak dotad, ale w top layer: Esc zamyka natywnie,
   fokus wraca na element, ktory otworzyl podglad. */
dialog.hd-lightbox { border:none; padding:0; margin:0; width:100vw; height:100vh; max-width:none; max-height:none; background:transparent; color:#fff; overflow:hidden; }
dialog.hd-lightbox[open] { display:flex; align-items:center; justify-content:center; }
dialog.hd-lightbox::backdrop { background:rgba(0,0,0,0.88); }
dialog.hd-lightbox--img { cursor:zoom-out; }
dialog.hd-lightbox--img::backdrop { background:rgba(0,0,0,0.92); }
dialog.hd-lightbox--img img { max-width:95vw; max-height:95vh; border-radius:10px; }

/* ── ATRIUM 2 etap 4: klasy zamiast najczestszych stylow wpisanych w kod ──
   Te same deklaracje co dawne style="" (wyglad bez zmian). Bez !important,
   zeby skrypty ustawiajace el.style.* dalej wygrywaly. */
.hd-hint { font-size:12px; color:var(--text-3); }
.hd-hint-sm { font-size:11px; color:var(--text-3); }
.hd-hint-xs { font-size:10px; color:var(--text-3); }
.hd-muted { color:var(--text-3); }
.hd-field-error { color:var(--a3); font-size:12px; margin-top:4px; }
.hd-span-2 { grid-column:span 2; }

/* ── ATRIUM 2 etap 4 (cz. 3): male klasy pomocnicze zamiast stylow wpisanych w kod ──
   Kazda = dokladnie jedna dawna deklaracja z style="". Bez !important. */
.hd-no-underline { text-decoration:none; }
.hd-muted { color:var(--text-3); }
.hd-text-2 { color:var(--text-2); }
.hd-text { color:var(--text); }
.hd-accent { color:var(--a1); }
.hd-danger-text { color:var(--a3); }
.hd-warn-text { color:var(--a4); }
.hd-fs-10 { font-size:10px; }
.hd-fs-11 { font-size:11px; }
.hd-fs-12 { font-size:12px; }
.hd-fs-13 { font-size:13px; }
.hd-mb-12 { margin-bottom:12px; }
.hd-mb-14 { margin-bottom:14px; }
.hd-mb-16 { margin-bottom:16px; }
.hd-mt-4 { margin-top:4px; }
.hd-flex { display:flex; }
.hd-col { flex-direction:column; }
.hd-items-center { align-items:center; }
.hd-between { justify-content:space-between; }
.hd-gap-6 { gap:6px; }
.hd-gap-8 { gap:8px; }
.hd-gap-12 { gap:12px; }
.hd-gap-14 { gap:14px; }
.hd-shrink-0 { flex-shrink:0; }
.hd-pointer { cursor:pointer; }
.hd-accent-check { accent-color:var(--a1); }
.hd-p-20 { padding:20px; }
.hd-p-24 { padding:24px; }