/* ============================================================
   Social Co-pilot — wspólny system UI (design system).
   Ładowany PO inline <style> każdej strony (link jest niżej w <head>),
   więc ujednolica komponenty (karty, przyciski, piny, formularze, tabele)
   dla całego panelu — jeden spójny wygląd zamiast kopii per strona.
   Motyw sterowany atrybutem data-theme (ustawia go theme.js przed paintem).
   ============================================================ */

/* ---------- Tokeny: jasny ---------- */
:root {
    --accent:#4154f1;  --accent-soft:#eef0ff;
    --violet:#7c5cff;  --violet-soft:#f0ebff;
    --ok:#1e9e5a;      --ok-soft:#e4f5ea;
    --warn:#c77c1a;    --warn-soft:#fdf3e3;
    --danger:#c0392b;
    --on-accent:#ffffff;   /* tekst na tle akcentu (przyciski) */

    --page:#f5f6fb;        /* tło strony */
    --surface:#ffffff;     /* karty */
    --surface-2:#f6f7fb;   /* wstawki, nagłówki tabel */
    --bg:#f6f7fb;          /* alias legacy (== surface-2) */
    --field:#ffffff;       /* tło pól formularza */

    --line:#e6e8f4;
    --line-strong:#ccd0e6;
    --text:#1a1a2e;
    --muted:#5f6488;
    --faint:#9096b8;

    --radius:12px;
    --shadow:0 1px 2px rgba(28,30,60,.04), 0 6px 20px rgba(28,30,60,.05);
    --nav-bg:#eef0fb;
}

/* ---------- Tokeny: ciemny ---------- */
:root[data-theme="dark"] {
    --accent:#7c8bff;  --accent-soft:#232647;
    --violet:#a58bff;  --violet-soft:#2a2440;
    --ok:#35c47c;      --ok-soft:#15311f;
    --warn:#e0a24a;    --warn-soft:#2c2413;
    --danger:#ff8b7e;
    --on-accent:#15161f;   /* ciemny akcent jest jasny → tekst ciemny */

    --page:#14151d;
    --surface:#1e2030;
    --surface-2:#171826;
    --bg:#1b1d2a;
    --field:#13141d;

    --line:#2c2f42;
    --line-strong:#3a3d56;
    --text:#e7e9f3;
    --muted:#9aa0bd;
    --faint:#6f7495;

    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.32);
    --nav-bg:#191b28;
}

/* ---------- Baza ---------- */
* { box-sizing:border-box; }
body {
    background:var(--page); color:var(--text);
    font-family:system-ui,'Segoe UI',Roboto,sans-serif; line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

h1 { font-size:1.35rem; font-weight:800; letter-spacing:-.015em; margin:0 0 .3rem; color:var(--text); }
h1 .sub, h1 small { font-weight:400; font-size:.85rem; color:var(--faint); letter-spacing:0; }
h2 { font-size:1.05rem; font-weight:700; margin:1.6rem 0 .6rem; padding-bottom:.35rem; border-bottom:1px solid var(--line); color:var(--text); }
h3 { font-size:.95rem; font-weight:700; color:var(--text); }
/* Nagłówek wewnątrz karty nie potrzebuje podkreślenia */
.card > h2:first-child, .card > h3:first-child { margin-top:.1rem; }
.card > h2 { border-bottom:0; padding-bottom:0; margin-bottom:.4rem; }

/* ---------- Karty ---------- */
.card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:1.1rem 1.15rem; margin-bottom:1rem;
    box-shadow:var(--shadow);
}

/* ---------- Tabele (kontener = karta) ---------- */
.tablewrap {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    overflow:auto; -webkit-overflow-scrolling:touch; margin-bottom:1rem;
}
.tablewrap > table { margin:0; }
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th {
    text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--faint); font-weight:700; padding:.55rem .8rem;
    background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
td { padding:.55rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td, table tr:last-child td { border-bottom:0; }
.tnum { font-variant-numeric:tabular-nums; }

/* ---------- Przyciski ---------- */
.btn {
    display:inline-block; background:var(--accent); color:var(--on-accent); border:0;
    padding:.55rem 1.1rem; border-radius:8px; font:inherit; font-weight:600;
    font-size:.9rem; line-height:1.25; cursor:pointer; text-decoration:none;
    transition:filter .12s, background .12s;
}
.btn:hover { filter:brightness(1.07); }
.btn.ghost { background:var(--surface); color:var(--accent); border:1px solid var(--accent); }
.btn.ghost:hover { background:var(--accent-soft); filter:none; }
.btn.warn { background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
.btn.warn:hover { filter:none; border-color:var(--line-strong); }
.btn.sm { padding:.32rem .65rem; font-size:.8rem; }
/* Marki (LinkedIn/FB/X) zdefiniowane per strona — wyższa specyficzność, zostają. */

/* ---------- Formularze ---------- */
input, textarea, select {
    font:inherit; padding:.5rem .6rem; border:1px solid var(--line-strong);
    border-radius:8px; background:var(--field); color:var(--text);
}
input:focus, textarea:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
textarea::placeholder, input::placeholder { color:var(--faint); }
/* Checkboxy/radia nie łapią width:100% z reguł stron (bug rozpychania „Kanały"). */
input[type="checkbox"], input[type="radio"] { width:auto; flex:none; }
label.chk { justify-content:flex-start; }

/* ---------- Piny (plakietki) ---------- */
.pill { font-size:.7rem; padding:.08rem .5rem; border-radius:99px; font-weight:600; white-space:nowrap; }
.pill.cat  { background:var(--accent-soft); color:var(--accent); }
.pill.prod { background:var(--violet-soft); color:var(--violet); }
.pill.cool { background:var(--warn-soft); color:var(--warn); }
.pill.ok   { background:var(--ok-soft); color:var(--ok); }

/* ---------- Statusy inline (kropka + etykieta) ---------- */
.status-dot { display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; }
.status-dot i { width:7px; height:7px; border-radius:99px; background:var(--ok); display:inline-block; }
.status-dot.watch i { background:var(--warn); }
.status-dot.removed i { background:var(--faint); }

/* ---------- Utility ---------- */
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.meta  { font-size:.8rem; color:var(--muted); }
.section-lead { color:var(--muted); font-size:.85rem; margin:.1rem 0 1rem; max-width:72ch; }
.grid  { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.ok-msg { background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent); color:var(--text); padding:.6rem 1rem; border-radius:10px; }
.err { color:var(--danger); font-size:.85rem; }
.out, #out { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; color:var(--text); }
.out.err { color:var(--danger); }
@media (max-width:560px) { .grid { grid-template-columns:1fr; } }

/* ---------- Licznik znaków (Publisher) ---------- */
.counter { font-size:.78rem; color:var(--faint); margin-top:.25rem; text-align:right; }
.counter.over { color:var(--danger); font-weight:600; }

/* ---------- Panel Asystenta AI (Publisher) ---------- */
.ai { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:.7rem; margin-bottom:.9rem; }
.ai-row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.ai-row + .ai-row { margin-top:.5rem; }
.ai-row input, .ai-row select { width:auto; }
#ai-msg { display:block; margin-top:.5rem; font-size:.82rem; }

/* ---------- Siatka miniatur stock (Publisher) ---------- */
.stock-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:.4rem; margin:.5rem 0; }
.stock-thumb { width:100%; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; transition:outline .1s; }
.stock-thumb:hover { outline:2px solid var(--accent); }

/* ---------- Kalendarz (widok miesiąca): kafle na tle strony ---------- */
.cal-cell { background:var(--surface); }
.cal-cell.empty { background:transparent; }

/* ---------- Pomoc na dole strony ---------- */
.help { margin-top:2.5rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:.86rem; color:var(--muted); line-height:1.55; box-shadow:var(--shadow); }
.help h3 { margin:.1rem 0 .5rem; font-size:.95rem; color:var(--text); }
.help p { margin:.4rem 0; } .help b { color:var(--text); }
.help .dl { display:inline-block; margin-top:.4rem; background:var(--accent); color:var(--on-accent); padding:.45rem .9rem; border-radius:8px; text-decoration:none; font-weight:600; }

/* ---------- Logowanie (bez nav) ---------- */
.box { box-shadow:var(--shadow); }
[data-theme="dark"] .box { background:var(--surface); border-color:var(--line); }
[data-theme="dark"] a.google { background:var(--surface); border-color:var(--line-strong); color:var(--text); }
[data-theme="dark"] a.google:hover { background:var(--surface-2); }
[data-theme="dark"] .divider::before, [data-theme="dark"] .divider::after { border-color:var(--line); }

/* ---------- Nawigacja (górny pasek na mobile) ---------- */
nav { margin-bottom:1.2rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.nav-brand { display:none; }
nav a {
    display:inline-block; margin:0; padding:.42rem .9rem;
    border-radius:8px; border:1px solid var(--line);
    background:var(--nav-bg); color:var(--accent);
    font-size:.85rem; font-weight:600; text-decoration:none;
    transition:background .12s, color .12s;
}
nav a:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
nav a.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* Menu jako lewy sidebar na szerszych ekranach (mobile zostaje górny pasek). */
@media (min-width: 860px) {
    body:has(nav) { max-width:none; margin:0; padding:1.6rem 2.2rem 2.5rem 220px; }
    nav {
        position:fixed; left:0; top:0; bottom:0; width:190px; z-index:50;
        flex-direction:column; align-items:stretch; gap:.3rem; flex-wrap:nowrap;
        background:var(--nav-bg); border-right:1px solid var(--line);
        padding:1.1rem .7rem; margin:0; overflow-y:auto;
    }
    nav a { margin:0; text-align:left; }
    nav .nav-brand {
        display:block; font-weight:800; letter-spacing:-.02em; font-size:.98rem;
        color:var(--text); padding:.1rem .3rem .7rem; margin-bottom:.2rem;
        border-bottom:1px solid var(--line);
    }
    nav a.nav-logout { margin-top:auto; }
}

/* ---------- Przełącznik motywu (pływający) ---------- */
#theme-toggle {
    position:fixed; top:.8rem; right:.8rem; z-index:999;
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line); background:var(--surface); color:inherit;
    cursor:pointer; font-size:1.05rem; line-height:1;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    box-shadow:var(--shadow);
}

/* ---------- Responsywność drobna ---------- */
@media (max-width:520px) {
    #theme-toggle { width:32px; height:32px; top:.5rem; right:.5rem; font-size:.95rem; }
    h1 { padding-right:2.6rem; }
    table { font-size:.8rem; }
}