/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f2f5f8;
  color: #1f2937;
  font-size: 14px;
}

.container {
  max-width: 1020px;
  margin: 24px auto;
  padding: 28px 32px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

/* ── Pełnoekranowy układ edytora (editor.ejs / edit.ejs) ── */
.container.editor-page {
  max-width: none;
  width: 100%;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-page > header,
.editor-page > .alert {
  flex-shrink: 0;
}

/* Proporcja 3/4: nowy projekt newslettera (kolumna główna) / projekty, subskrybenci, statystyki (kolumna boczna) */
.editor-grid {
  display: flex;
  gap: 20px;
  flex: 1;
  min-height: 0;
}
.editor-main {
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.editor-side {
  flex: 1;
  min-width: 300px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding-right: 4px;
}
.editor-side .section { margin-bottom: 0; }
.editor-side .table-card { overflow-x: auto; }

/* Karta z edytorem treści wypełnia dostępną wysokość */
.editor-page > .card,
.editor-main > .section.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
.editor-page > .card > form,
.editor-main > .section.card > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.editor-page .nl-shell {
  flex: 1;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.editor-page .nl-body {
  flex: 1;
  min-height: 0;
}

@media (max-width: 1100px) {
  .container.editor-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .editor-grid { flex-direction: column; }
  .editor-main,
  .editor-side {
    flex: none;
    max-width: none;
    overflow: visible;
  }
  .editor-page > .card,
  .editor-main > .section.card,
  .editor-page > .card > form,
  .editor-main > .section.card > form {
    flex: none;
  }
  .editor-page .nl-shell {
    flex: none;
    min-height: 0;
  }
  .editor-page .nl-body {
    flex: none;
    min-height: 500px;
  }
}

/* ── Header ── */
.header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.header-row h1 { margin: 0; font-size: 22px; }

nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
nav a {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
}
nav a:hover { text-decoration: underline; }

.user-info { color: #6b7280; font-size: 13px; }

/* ── Alert ── */
.alert {
  padding: 12px 16px;
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
}

/* ── Sections ── */
.section { margin-bottom: 28px; }
.section h2 { margin: 0 0 12px; font-size: 17px; }
.section-meta { margin: -4px 0 10px; color: #6b7280; font-size: 13px; }

/* ── Cards ── */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  background: #f9fafb;
  margin-bottom: 12px;
}
.table-card { padding: 0; overflow: hidden; }
.stat-card { padding: 16px 20px; }

.empty-state { color: #9ca3af; text-align: center; padding: 24px; }

/* ── Form elements ── */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
}
.hint { font-weight: 400; color: #9ca3af; font-size: 12px; }

input[type=text],
input[type=email],
textarea,
select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

textarea { resize: vertical; }

/* ── Checkbox label ── */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 14px;
  cursor: pointer;
}
.checkbox-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* ── Buttons ── */
button {
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-family: inherit;
}
button:hover { background: #1d4ed8; }

button.secondary {
  background: #6b7280;
}
button.secondary:hover { background: #4b5563; }

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-green { background: #16a34a; }
.btn-green:hover { background: #15803d; }

.btn-danger { background: #dc2626; }
.btn-danger:hover { background: #b91c1c; }

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

/* ── Table ── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  padding: 10px 14px;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e5e7eb;
}
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.table tr:last-child td { border-bottom: none; }

.col-subject { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-date { white-space: nowrap; color: #9ca3af; }
.actions { white-space: nowrap; }
.actions a, .actions form { display: inline-block; margin-right: 4px; }
.link-cell { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.muted { color: #9ca3af; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: #e0f2fe;
  color: #0369a1;
  white-space: nowrap;
}
.badge-green { background: #dcfce7; color: #15803d; }
.badge-red   { background: #fee2e2; color: #dc2626; }
.badge-blue  { background: #dbeafe; color: #1d4ed8; }

/* ── Stats ── */
.stat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.stat-header h3 { margin: 0; font-size: 15px; }

.who-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.who-list li {
  padding: 1px 0;
  color: #374151;
}

/* ── Newsletter editor (GrapesJS) ── */
.editor-help {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #1e3a5f;
}
.editor-help h3 { margin: 0 0 8px; font-size: 14px; color: #1d4ed8; }
.editor-help ol { margin: 0; padding-left: 20px; }
.editor-help li { margin-bottom: 4px; line-height: 1.5; }

.nl-shell {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
}
.nl-shell .gjs-pn-panels { display: none !important; }

.nl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.nl-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  cursor: pointer;
}
.nl-btn:hover { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.nl-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.nl-body {
  display: flex;
  align-items: stretch;
  min-height: 640px;
}
.nl-canvas { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.nl-shell .gjs-cv-canvas { top: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; background: #fff !important; }
.nl-sidebar {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  background: #f9fafb;
}
.nl-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.nl-tabs button {
  flex: 1;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: none;
  color: #6b7280;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.nl-tabs button:hover { color: #2563eb; background: #f9fafb; }
.nl-tabs button.active { color: #2563eb; border-bottom-color: #2563eb; }

.nl-tab-content { flex: 1; overflow-y: auto; }
.nl-layers, .nl-styles, .nl-traits { display: none; }

@media (max-width: 760px) {
  .nl-body { flex-direction: column; }
  .nl-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e7eb; }
}

/* Menedżer bloków */
.nl-shell .gjs-blocks-c { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; padding: 12px !important; background: #f9fafb !important; height: auto !important; }
.nl-shell .gjs-block {
  width: calc(50% - 5px) !important;
  height: auto !important;
  min-height: 76px !important;
  margin: 0 !important;
  font-size: 12px !important;
  padding: 10px 6px !important;
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
.nl-shell .gjs-block:hover { border-color: #2563eb !important; background: #eff6ff !important; color: #2563eb !important; }
.nl-shell .gjs-block .gjs-block__media { height: auto !important; margin-bottom: 4px !important; }
.nl-shell .gjs-block svg { width: 28px !important; height: 28px !important; }
.nl-shell .gjs-block-label { font-size: 12px !important; margin-top: 6px !important; color: inherit !important; }

/* Menedżer warstw */
.nl-shell .gjs-layer-title { font-size: 13px !important; padding: 10px 8px !important; }
.nl-shell .gjs-layer-name { font-size: 13px !important; }
.nl-shell .gjs-layer-item { background: #fff !important; color: #374151 !important; border-bottom: 1px solid #f3f4f6 !important; }
.nl-shell .gjs-layer-item:hover { background: #f9fafb !important; }
.nl-shell .gjs-layer.gjs-selected > .gjs-layer-item { background: #dbeafe !important; }
.nl-shell .gjs-layer-count { background: #e5e7eb !important; color: #374151 !important; }
.nl-shell .gjs-layer-vis svg,
.nl-shell .gjs-layer-move svg,
.nl-shell .gjs-layer-caret svg { color: #9ca3af !important; }

/* Menedżer stylów i ustawień */
.nl-shell .gjs-sm-sector .gjs-sm-title { font-size: 13px !important; padding: 10px 12px !important; font-weight: 600 !important; }
.nl-shell .gjs-sm-sector-title { background: #f3f4f6 !important; color: #374151 !important; border-bottom: 1px solid #e5e7eb !important; }
.nl-shell .gjs-sm-sector-title:hover { background: #e5e7eb !important; }
.nl-shell .gjs-sm-sector-caret svg { color: #6b7280 !important; }
.nl-shell .gjs-sm-properties { background: #fff !important; }
.nl-shell .gjs-sm-property,
.nl-shell .gjs-trt-trait { font-size: 12px !important; padding: 6px 10px !important; background: #fff !important; }
.nl-shell .gjs-field { font-size: 12px !important; min-height: 30px !important; }
.nl-shell .gjs-label { font-size: 11px !important; color: #6b7280 !important; }

/* Pasek formatowania tekstu (RTE) */
.gjs-rte-toolbar { font-size: 13px; padding: 4px; border-radius: 6px; }
.gjs-rte-action { padding: 6px 9px !important; min-width: 30px; font-size: 13px; }
.gjs-rte-action:has(.nl-rte-select) { width: 92px !important; padding: 6px 4px !important; }
.gjs-rte-action:has(.nl-rte-color) { width: 36px !important; padding: 6px 4px !important; }
.nl-rte-select { width: 84px !important; height: 24px !important; font-size: 12px; padding: 3px; border-radius: 4px; border: 1px solid #d1d5db; }
.nl-rte-color { width: 28px !important; height: 26px !important; padding: 0; border: none; border-radius: 4px; cursor: pointer; vertical-align: middle; }

/* ── Quill editor ── */
.quill-wrap {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 4px;
  background: #fff;
}
.ql-toolbar.ql-snow {
  border: 1px solid #d1d5db;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f9fafb;
}
.ql-container.ql-snow {
  border: 1px solid #d1d5db;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
}
.ql-editor {
  min-height: 240px;
  font-family: Arial, sans-serif;
}