@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --accent: #5b5ff0;
    --accent-dark: #4c50e0;
    --accent-soft: #eef0ff;
    --bg: #f4f5fa;
    --ink: #171923;
    --border: #ecedf3;
}

* { box-sizing: border-box; }
body { margin:0; font-family:"Inter", -apple-system, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
.layout { display:flex; min-height:100vh; }

.sidebar { width:246px; background:#12141c; color:#fff; display:flex; flex-direction:column; padding:22px 18px; position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0; }
.sidebar .logo { font-size:17px; font-weight:800; margin-bottom:20px; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.sidebar .logo i { color:var(--accent); }
.sidebar nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar nav a { color:#9297a8; text-decoration:none; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:11px; transition:background .12s ease, color .12s ease; }
.sidebar nav a i { width:16px; text-align:center; opacity:.85; font-size:13px; }
.sidebar nav a:hover { background:#1c1f2b; color:#fff; }
.sidebar nav a.nav-cta { background:linear-gradient(135deg, var(--accent), #7b5ff5); color:#fff; margin-top:10px; text-align:center; justify-content:center; font-weight:600; box-shadow:0 4px 14px rgba(91,95,240,.35); }
.sidebar nav a.nav-cta:hover { filter:brightness(1.06); }
.sidebar-footer { display:flex; justify-content:space-between; font-size:13px; color:#6c7183; border-top:1px solid #23273400; padding-top:16px; margin-top:8px; border-top:1px solid #232734; }
.sidebar-footer a { color:#6c7183; text-decoration:none; }
.sidebar-footer a:hover { color:#fff; }

.content { flex:1; padding:34px 42px; width:100%; max-width:100%; box-sizing:border-box; }
@media (max-width: 900px) { .content { padding:20px; } }

h1 { font-size:23px; margin:0 0 20px; font-weight:800; letter-spacing:-.01em; }
h2 { font-weight:700; }

.card { background:#fff; border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(20,22,31,.04), 0 8px 24px -12px rgba(20,22,31,.08); margin-bottom:16px; border:1px solid var(--border); }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat { background:#fff; border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(20,22,31,.04), 0 8px 24px -12px rgba(20,22,31,.08); border:1px solid var(--border); position:relative; overflow:hidden; }
.stat::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent); opacity:.5; }
.stat.stat-green::before { background:#1e7e34; opacity:.7; }
.stat.stat-green .value { color:#1a7a3e; }
.stat.stat-purple::before { background:#7b3ff2; opacity:.7; }
.stat.stat-purple .value { color:#7b3ff2; }
.stat.stat-red::before { background:#c0392b; opacity:.7; }
.stat.stat-red .value { color:#c0392b; }
.stat .value { font-size:28px; font-weight:800; letter-spacing:-.01em; }
.stat .label { font-size:13px; color:#7c8091; margin-top:4px; font-weight:500; }

table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--border); }
th, td { text-align:left; padding:13px 15px; font-size:14px; border-bottom:1px solid var(--border); }
th { background:#fafafc; color:#6c7183; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#fbfbfe; }

.btn { display:inline-block; background:var(--accent); color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:filter .12s ease, transform .05s ease; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(1px); }
.btn-secondary { background:#f0f1f6; color:#33364a; }
.btn-secondary:hover { background:#e6e8f2; filter:none; }

form label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; color:#33364a; }
form input, form select, form textarea { width:100%; padding:10px 12px; border:1px solid #dfe1ea; border-radius:9px; font-size:14px; font-family:inherit; background:#fff; }

/* Formularz planowania postów - trochę większe elementy, żeby wszystko było wyraźniej widoczne */
.plan-form label { font-size:14px; margin-top:18px; }
.plan-form input, .plan-form select, .plan-form textarea { font-size:15px; padding:12px 14px; }
.plan-form textarea[name="caption"] { min-height:130px; font-size:15px; }
.plan-form h1 { font-size:26px; }
.plan-form .account-option { font-size:14px; padding:8px 0 !important; }
.plan-form .dropzone { padding:28px; }
.plan-form .dropzone div { font-size:14px !important; }

/* Delikatnie oddzielone sekcje formularza (tytuł + pole, którego dotyczy) */
.form-section { border:1px solid #e6e8f0; border-radius:12px; padding:16px 18px; margin:18px 0; background:#fbfbfe; }
.form-section > label:first-child,
.form-section > label.section-title { margin-top:0 !important; font-size:14px; font-weight:700; color:#2a2c3d; }

/* Większe, okrągłe checkboxy przy profilach */
.account-checkbox { width:20px !important; height:20px; accent-color:#5b5ff0; cursor:pointer; border-radius:50%; flex-shrink:0; }
.account-option { border-radius:8px; padding:8px 10px !important; transition:background .12s ease; cursor:pointer; }
.account-option:hover { background:#f0f1f8; }
.account-option.is-selected { background:#eef0ff; box-shadow:inset 0 0 0 1.5px #5b5ff0; }

/* Przyciski typu treści (segmented control) */
.content-type-options { display:flex; gap:8px; flex-wrap:wrap; }
.content-type-btn { flex:1; min-width:140px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border:1.5px solid #dcdee6; border-radius:10px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#555; transition:all .12s ease; }
.content-type-btn:hover { border-color:#b9beed; }
.content-type-btn.is-selected { border-color:#5b5ff0; background:#eef0ff; color:#5b5ff0; }
.content-type-btn input { position:absolute; opacity:0; pointer-events:none; }

/* Panel edycji kroku w automatyzacji nie jest wewnątrz <form> (obsługiwany przez AJAX), więc
   globalne style pól ("form input, form select...") go nie obejmują - dublujemy je tutaj,
   żeby pola wyglądały tak samo jak wszędzie indziej, zamiast domyślnie po przeglądarce. */
#side-panel input[type="text"], #side-panel select, #side-panel textarea {
    width:100%; padding:10px 12px; border:1px solid #dfe1ea; border-radius:9px;
    font-size:14px; font-family:inherit; background:#fff; box-sizing:border-box;
}
#side-panel .pb-type { width:auto; }

/* Planowanie Zaawansowane - pola NIE są wewnątrz <form> (budowane w JS, wysyłane jednym POST-em
   na końcu), więc globalne style pól ich nie obejmują - dublujemy je tutaj, plus troszkę większe
   elementy tam, gdzie użytkownik o to prosił (godzina, treść). */
.adv-schedule-page input[type="text"], .adv-schedule-page input[type="date"],
.adv-schedule-page input[type="time"], .adv-schedule-page select, .adv-schedule-page textarea {
    width:100%; padding:11px 13px; border:1px solid #dfe1ea; border-radius:9px;
    font-size:14px; font-family:inherit; background:#fff; box-sizing:border-box;
}
.adv-schedule-page label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; color:#33364a; }
.adv-schedule-page input[type="time"] { font-size:20px; font-weight:700; padding:12px 14px; max-width:160px; letter-spacing:.02em; }
.adv-schedule-page textarea { min-height:110px; font-size:15px; }
.adv-schedule-page .account-checkbox { width:20px !important; height:20px; accent-color:#5b5ff0; cursor:pointer; border-radius:50%; flex-shrink:0; }
.adv-schedule-page .add-modal-account { width:20px !important; height:20px; accent-color:#5b5ff0; cursor:pointer; border-radius:50%; flex-shrink:0; }

/* Układ kanwy automatyzacji + panelu bocznego - Grid zamiast Flex, bo dużo pewniej pilnuje,
   żeby nic nie wystawało poza prawą krawędź ekranu (minmax(0, 1fr) potrafi się skurczyć do zera,
   floating-point flex-basis z flex czasem tego nie gwarantował). */
.automation-canvas-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 420px); gap:16px; align-items:start; margin-top:16px; max-width:100%; }
@media (max-width: 1000px) {
    .automation-canvas-layout { grid-template-columns:minmax(0, 1fr); }
}
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
form textarea { min-height:100px; }
.form-row { display:flex; gap:16px; }
.form-row > div { flex:1; }

.alert-error { background:#fdecea; color:#b3261e; padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.badge { display:inline-block; padding:3px 11px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-pending { background:#fff3cd; color:#8a6d00; }
.badge-published { background:#dcf5e4; color:#1a7a3e; }
.badge-failed { background:#fbe3e3; color:#a3241f; }

.icon-btn { color:#c0392b; text-decoration:none; }
.icon-btn:hover { color:#a3241f; }

.pill-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; background:#f0f1f6; color:#33364a; font-size:12px; text-decoration:none; border:none; cursor:pointer; white-space:nowrap; transition:background .12s ease; }
.pill-btn:hover { background:#e6e8f2; }
.pill-btn.pill-danger { background:#fdecea; color:#a3241f; }
.pill-btn.pill-danger:hover { background:#fbdcd9; }
.pill-btn.pill-active { background:#5b5ff0; color:#fff; }
.pill-btn.pill-active:hover { filter:brightness(1.08); }

#recurrence-fields { display:none; background:#f8f9fd; padding:16px; border-radius:10px; margin-top:8px; }

/* Przeciągnij-i-upuść pliki */
.dropzone { border:2px dashed #d5d8e6; border-radius:12px; padding:24px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.dropzone:hover, .dropzone.dragover { border-color:var(--accent); background:var(--accent-soft); }

/* Skrzynka odbiorcza - dymki czatu */
.chat-window { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; max-height:60vh; overflow-y:auto; padding:4px 2px; }
.chat-bubble { max-width:72%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.45; position:relative; }
.chat-bubble.incoming { align-self:flex-start; background:#f0f1f6; color:var(--ink); border-bottom-left-radius:4px; }
.chat-bubble.outgoing { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble img { max-width:220px; border-radius:10px; display:block; margin-top:6px; }
.chat-meta { font-size:11px; opacity:.65; margin-top:4px; display:flex; gap:6px; align-items:center; }
.thread-row { display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:background .1s ease; }
.thread-row:hover { background:#fafafc; }
.thread-avatar { width:38px; height:38px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--accent); flex-shrink:0; overflow:hidden; }