/* =====================================================================
   Tabler-style theme (lekka emulacja) - panele go / update / request.
   Wczytywany PO inline <style>. Uzywa podwyzszonej specyficznosci
   (html:root, body ...), wiec nadpisuje palety i drobne style niezaleznie
   od kolejnosci wczytania. Zero zewnetrznych zaleznosci. W pelni odwracalny
   - wystarczy usunac <link> do tego pliku, by wrocic do poprzedniego wygladu.
   ===================================================================== */

/* --- PALETA JASNA (Tabler light) --- */
html:root{
  --bg:#f1f5f9; --text:#1a2234; --card:#ffffff; --card-shadow:rgba(24,36,51,.05);
  --border:#e3e7ed; --border-soft:#eef1f5; --muted:#667382; --label:#3b4859;
  --accent:#066fd1; --accent-text:#ffffff; --input-bg:#ffffff;
  --tab-bg:#e9eef5; --tab-text:#3b4859; --stat-bg:#f7f9fc;
  --ok-bg:#d8f3df; --ok-text:#1a7a3d; --err-bg:#fbe0e0; --err-text:#b42318;
  --off-bg:#e9eef5; --off-text:#667382; --info-bg:#dbeafe; --info-text:#1e54b7;
  --ctx-bg:#eef5ff; --ctx-border:#cfe0fb; --danger:#d63939; --gray:#5d6b7d;
  --bubble-c:#eef5ff; --bubble-a:#f3f6fa; --file-bg:#eef2fb;
  --drop-border:#e3e7ed; --fail:#b42318; --shadow:rgba(24,36,51,.14);
  --toggle-bg:#e9eef5; --toggle-text:#3b4859;
}

/* --- PALETA CIEMNA (Tabler dark / jak NPM) --- */
html:root[data-theme=dark]{
  --bg:#15202e; --text:#e7eaef; --card:#1c2a3a; --card-shadow:rgba(0,0,0,.28);
  --border:#2a3a4f; --border-soft:#22303f; --muted:#8a97a8; --label:#c4ccd6;
  --accent:#3b82f6; --accent-text:#ffffff; --input-bg:#16222f;
  --tab-bg:#243244; --tab-text:#c4ccd6; --stat-bg:#1a2735;
  --ok-bg:#16613a; --ok-text:#bbf7d0; --err-bg:#7f2222; --err-text:#fecaca;
  --off-bg:#243244; --off-text:#8a97a8; --info-bg:#1e3a5f; --info-text:#bfdbfe;
  --ctx-bg:#1a2735; --ctx-border:#2a3a4f; --danger:#e35d5d; --gray:#5d6b7d;
  --bubble-c:#1f3147; --bubble-a:#1a2735; --file-bg:#22303f;
  --drop-border:#2a3a4f; --fail:#f87171; --shadow:rgba(0,0,0,.5);
  --toggle-bg:#243244; --toggle-text:#c4ccd6;
}

/* --- Font zblizony do Tabler (Inter), z fallbackiem systemowym --- */
html body{font-family:Inter,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}

/* --- Karty: subtelne obramowanie + lekki cien, mniej zaokraglone (jak Tabler) --- */
body .card{border:1px solid var(--border);border-radius:8px;box-shadow:0 1px 2px var(--card-shadow);}

/* --- Naglowek jako pasek (jak topbar w NPM) --- */
body .wrap>header{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 18px;margin-bottom:18px;}

/* --- Nawigacja zakladek --- */
body .tabs a{border-radius:6px;}
body .filters a{border-radius:6px;}

/* --- Pola formularzy i przyciski (Tabler: lekko zaokraglone) --- */
body input,body select,body textarea{border-radius:6px;}
body button{border-radius:6px;}
body button.sm{border-radius:6px;}
body .theme-toggle,body .logout-btn{border-radius:6px;}

/* --- Karta logowania --- */
body>form.card,body>.card{border:1px solid var(--border);border-radius:10px;}

/* --- Zdjecia w tresci (inline-img.js) --- */
.inl-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.inl-bar .inl-btn{margin:0;padding:6px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px;width:auto}
.inl-hint{font-size:12px;color:var(--muted)}
.inl-prev{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.inl-prev:empty{display:none}
.inl-thumb{position:relative;border:1px solid var(--border);border-radius:8px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
.inl-thumb img{max-width:120px;max-height:90px;border-radius:4px;display:block}
.inl-thumb .inl-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;padding:0;margin:0;border-radius:50%;font-size:14px;line-height:20px;text-align:center;cursor:pointer}
textarea.inl-drag{outline:2px dashed var(--accent, #3b82f6);outline-offset:2px}
a.inl-img{display:block;margin:6px 0;line-height:0;max-width:100%}
a.inl-img img{max-width:100%;height:auto;max-height:520px;border-radius:6px;border:1px solid var(--border);cursor:zoom-in}
.desc,.msg .b{max-width:100%;min-width:0;overflow-wrap:anywhere;box-sizing:border-box}

/* Kolumny przyciskow w tabelach (Ukryj / Usun) */
th.c-act, td.c-act { width: 1%; white-space: nowrap; text-align: center; padding-left: 4px; padding-right: 4px; }
td.c-act form { display: inline; margin: 0; }
td.c-act button { min-width: 84px; }
td.c-act + td.c-act button { min-width: 0; }