/* ============================================================
   SocialBanana Manager — tema "control room"
   Font: stiva de sistem (aplicatia ruleaza offline, local)
   ============================================================ */

:root {
  --bg: #12151B;
  --surface: #1A1F28;
  --surface-hover: #212736;
  --border: #2A3040;
  --text: #FFFFFF;
  --text-dim: #B8C0CC;
  --accent: #45D9C7;
  --accent-dim: #2B7A70;
  --warning: #F0A94E;
  --danger: #E6675E;
  --radius: 10px;
  --mono: "Consolas", "SFMono-Regular", Menlo, monospace;
  --sans: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
}

.app-shell {
  display: flex;
  height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #0E1116;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 24px 8px;
}

.brand-mark {
  color: var(--accent);
  font-size: 20px;
}

.brand-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover:not(.disabled) {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-link.active {
  background: var(--surface);
  color: var(--accent);
}

.nav-link.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.nav-icon {
  width: 18px;
  text-align: center;
}

.nav-apps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.nav-apps-title {
  padding: 0 12px 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.7;
}

.nav-app-link {
  font-size: 13px;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--text-dim);
  font-size: 12px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* ---------- Content ---------- */

.content {
  flex: 1;
  padding: 32px 40px;
  overflow-y: auto;
}

/* ---------- Mod simplificat (cont cu reel_generator.mode = "simplified",
   ex. Laura) - bara orizontala sus in loc de sidebar lateral, ca sa ramana
   tot latimea ecranului pentru continut pe mobil. Legat de cont (JWT), nu de
   latimea ecranului - vezi is_simplified_mode in app.py. ---------- */

.app-shell.simplified {
  flex-direction: column;
  height: auto;
  min-height: 100vh;
}

.simplified .sidebar {
  width: 100%;
  flex-direction: column;
  border-right: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  overflow-y: visible;
}

.simplified .brand {
  padding: 4px 8px 10px 8px;
}

.simplified .nav-apps {
  order: -1;
  flex-direction: row;
  gap: 10px;
  padding-top: 0;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 12px;
  border-top: none;
  border-bottom: 1px solid var(--border);
}

.simplified .nav-apps-title {
  display: none;
}

.simplified .nav-app-link {
  flex: 1;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  padding: 18px 16px;
}

.simplified .nav-links {
  flex-direction: row;
  flex-wrap: wrap;
  flex: none;
  gap: 10px;
}

.simplified .nav-link {
  flex: 1 1 100px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 26px 10px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius);
}

.simplified .nav-icon {
  width: auto;
  font-size: 34px;
}

.simplified .sidebar-footer {
  display: none;
}

.simplified .content {
  padding: 16px;
  overflow-y: visible;
}

/* Controale avansate (Volum muzica/AI provider/Sursa imagini) de pe Generate -
   ascunse DOAR pentru conturi in mod simplificat (Laura), indiferent de ecran -
   se seteaza din API Keys, o singura data, nu per generare. Campurile raman in
   DOM (trimit valoarea implicita neschimbata la submit), doar nu se mai vad. */
.simplified .advanced-only {
  display: none;
}

/* ---------- Acelasi tratament "bara sus + butoane mari" de mai sus, dar legat
   de LATIMEA ecranului, nu de cont - orice cont (inclusiv cel complet, cu
   sidebar pe desktop) primeste bara mare pe telefon. Tine valorile sincronizate
   cu blocul .simplified de mai sus - Laura il are oricum, mereu, prin .simplified;
   asta doar extinde acelasi tratament la toata lumea sub 768px. ---------- */
@media (max-width: 768px) {
  /* body are overflow:hidden + height:100vh fix, ca sa incapa sidebar-ul
     lateral pe desktop fara scroll de pagina - pe mobil, layout-ul e coloana
     (bara sus + continut dedesubt), mai inalt decat un ecran, deci pagina
     intreaga trebuie sa poata da scroll, altfel tot ce trece de primul ecran
     e pur si simplu invizibil, netaiat de nimic vizibil ca atare. */
  body {
    overflow-y: auto;
    height: auto;
  }

  .app-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .sidebar {
    width: 100%;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    overflow-y: visible;
  }

  .brand {
    padding: 4px 8px 10px 8px;
  }

  .nav-apps {
    order: -1;
    flex-direction: row;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 12px;
    margin-top: 0;
    margin-bottom: 12px;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  .nav-apps-title {
    display: none;
  }

  .nav-app-link {
    flex: 1;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 16px;
  }

  .nav-links {
    flex-direction: row;
    flex-wrap: wrap;
    flex: none;
    gap: 10px;
  }

  .nav-link {
    flex: 1 1 100px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 26px 10px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius);
  }

  .nav-icon {
    width: auto;
    font-size: 34px;
  }

  .sidebar-footer {
    display: none;
  }

  .content {
    padding: 16px;
    overflow-y: visible;
  }
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.content-header h1 {
  margin: 0 0 4px 0;
  font-size: 22px;
}

.subtitle {
  margin: 0;
  color: var(--text-dim);
}

/* ---------- Buttons ---------- */

.btn {
  border: none;
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter 0.15s, background 0.15s;
}

.btn:hover { filter: brightness(1.1); }

.btn-primary {
  background: var(--accent);
  color: #0A2622;
}

.btn-secondary {
  background: var(--surface-hover);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-danger {
  background: var(--danger);
  color: #2A0A08;
}

/* ---------- Banner ---------- */

.banner {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13px;
  background: rgba(69, 217, 199, 0.1);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}

.banner.error {
  background: rgba(230, 103, 94, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- Two-pane layout ---------- */

.two-pane {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

/* Trebuie sa vina DUPA regula de baza .two-pane de mai sus (nu inainte, in
   blocul media timpuriu) - la specificitate egala, CSS-ul rezolva prin
   ordinea din sursa, nu prin @media, deci o regula media pusa inaintea
   regulii de baza e ignorata mereu, chiar daca media query se potriveste. */
@media (max-width: 768px) {
  .two-pane {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 400px;
}

.pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.count-badge {
  background: var(--surface-hover);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
}

/* Lista de pagini poate ajunge la 70+ intrari - fara o inaltime limitata,
   fiecare lista (Pagini + checklist-ul din Generate) ar creste nelimitat.
   Arata cam 10 randuri (marimea implicita a unui rand), restul cu scroll -
   pe mobil, checklist-ul din Generate isi mareste randurile (vezi reel.css),
   deci arata mai putine randuri in aceeasi inaltime, ceea ce e de asteptat. */
.page-list {
  padding: 6px;
  max-height: 440px;
  overflow-y: auto;
}

.page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
}

.page-item:hover {
  background: var(--surface-hover);
}

.page-item.selected {
  background: var(--surface-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}

.page-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--border);
  object-fit: cover;
}

/* flex:1 (nu doar latimea textului) + ellipsis: numele umple spatiul liber
   ramas pe rand, deci etichetele CM/nisa de dupa el (si orice vine dupa ele)
   ajung mereu in aceeasi pozitie pe orizontala, indiferent de lungimea
   numelui - fara asta, etichetele "sar" in zig-zag dupa fiecare nume diferit
   ca lungime. min-width:0 e necesar ca ellipsis sa prinda efectiv (implicit,
   un element flex nu se poate micsora sub latimea continutului lui). */
.page-name {
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-status-dots {
  margin-left: auto;
  display: flex;
  gap: 3px;
}

.folder-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.folder-dot.filled {
  background: var(--accent);
}

/* Etichete pagina: CM (Content Monetization) + nisa (emoji) - setate din
   Scheduler (Sources), sincronizate automat aici. */
.cm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
}

.cm-badge.cm-on {
  background: #2e9e3f;
}

.cm-badge.cm-off {
  background: #c0392b;
}

.cm-badge.cm-lost {
  background: #d9822b;
}

/* Selector CM editabil local (colectii manuale, fara pagina Scheduler in
   spate - Scheduler-ul nu are cum sa impinga o valoare pentru ele, deci e
   singurul loc unde CM-ul lor poate fi setat). Mirror exact al .cm-status-group
   din Scheduler (Sources). */
.cm-status-group {
  display: flex;
  gap: 6px;
}

.cm-status-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}

.cm-status-btn.selected {
  color: #fff;
  border-color: transparent;
}

.cm-status-btn.cm-on.selected {
  background: #2e9e3f;
}

.cm-status-btn.cm-off.selected {
  background: #c0392b;
}

.cm-status-btn.cm-lost.selected {
  background: #d9822b;
}

/* width fix: latime fixa, ca sa formeze o coloana reala impreuna cu CM
   (randata mereu, chiar goala, in home.js pentru colectiile fara nisa). */
.niche-badge {
  display: inline-block;
  width: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* A treia eticheta, doar litera (fara patrat colorat) - colectia e marcata
   "Disponibila pentru Laura" in Scheduler (Sources), sincronizata aici. */
.laura-badge {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #2e9e3f;
  line-height: 1;
  flex-shrink: 0;
}

/* A patra coloana - link scurtat catre pagina de Facebook (username-ul,
   preluat de la SocialBanana). Placeholder gol randat mereu (nu omis
   conditionat) ca sa nu strice alinierea pe coloane a badge-urilor de dupa. */
.page-link {
  display: inline-block;
  width: 46px;
  font-size: 12px;
  color: #4a90d9;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.page-link:hover {
  text-decoration: underline;
}

/* ---------- Detail pane ---------- */

.pane-detail {
  padding: 24px;
}

.empty-state, .empty-state-large {
  color: var(--text-dim);
  padding: 20px;
  text-align: center;
  font-size: 13px;
}

.empty-state-large {
  padding: 60px 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--border);
  object-fit: cover;
}

.detail-header h2 {
  margin: 0;
  font-size: 18px;
}

.folder-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.folder-label {
  width: 100px;
  flex-shrink: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.folder-icon {
  color: var(--accent);
}

.folder-path {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-path.set {
  color: var(--text);
}

.excel-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-alt, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.excel-count-empty {
  color: #ff6b6b;
  border-color: #ff6b6b;
}

.detail-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.save-confirm {
  color: var(--accent);
  font-size: 13px;
}

/* ---------- Modal explorator foldere ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 520px;
  /* Multe modale isi seteaza propria latime fixa (px) prin style inline -
     asta nu incape pe un telefon ingust. max-width castiga mereu peste orice
     width (inline sau nu, aceeasi proprietate CSS), deci un singur loc
     rezolva toate modalele din aplicatie, prezente si viitoare. */
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.modal-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.modal-title-row .modal-title {
  margin-bottom: 0;
}

.modal-close-btn {
  padding: 6px 12px;
  font-size: 12px;
  flex-shrink: 0;
}

.browse-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  word-break: break-all;
}

.browse-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 200px;
}

.browse-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.browse-item:last-child { border-bottom: none; }

.browse-item:hover {
  background: var(--surface-hover);
}

.browse-item.up {
  color: var(--text-dim);
}

.modal-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   Program / Bonus / Delete — clase suplimentare
   ============================================================ */

.section-title {
  font-weight: 600;
  margin: 20px 0 10px 0;
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Continut ramas */

.remaining-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.remaining-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}

.remaining-card.warn {
  border-color: var(--warning);
}

.remaining-type {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.remaining-count {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  margin: 4px 0;
}

.remaining-days {
  font-size: 12px;
  color: var(--text-dim);
}

.remaining-card.warn .remaining-days {
  color: var(--warning);
}

/* Sloturi de postare */

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.slot-day {
  width: 80px;
  font-weight: 600;
}

.slot-time {
  font-family: var(--mono);
  color: var(--text-dim);
  width: 60px;
}

.slot-type-badge {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.type-photo { background: rgba(79, 209, 197, 0.15); color: #4FD1C5; }
.type-reel { background: rgba(240, 169, 78, 0.15); color: #F0A94E; }
.type-text { background: rgba(139, 147, 161, 0.2); color: #B8C0CC; }
.type-story { background: rgba(230, 103, 94, 0.15); color: #E6675E; }

.slot-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
}

.slot-remove:hover { color: var(--danger); }

.add-slot-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.input-select, .input-text {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.generate-box {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.generate-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* Tabele Bonus / Delete */

.bonus-table {
  width: 100%;
  border-collapse: collapse;
}

.bonus-table th {
  text-align: left;
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.bonus-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.bonus-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-count {
  font-family: var(--mono);
  color: var(--accent);
}

.bonus-run-box, .delete-filters {
  margin-top: 20px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.delete-filters {
  flex-direction: column;
  align-items: stretch;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-row label {
  width: 260px;
  font-size: 13px;
  color: var(--text-dim);
}

#deleteResult, #bonusResult, #generateResult {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   Badge Failed + efect glow
   ============================================================ */

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #2A0A08;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: var(--mono);
}

.nav-link.glow {
  animation: nav-glow 1.6s ease-in-out infinite;
}

@keyframes nav-glow {
  0%, 100% { box-shadow: inset 2px 0 0 var(--danger), 0 0 0 rgba(230,103,94,0); }
  50% { box-shadow: inset 2px 0 0 var(--danger), 0 0 10px rgba(230,103,94,0.5); }
}

/* Weekly grid (Program) */

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.week-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 80px;
}

.week-col-header {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.week-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 6px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  position: relative;
}

.week-slot .slot-time-small {
  font-family: var(--mono);
  font-weight: 600;
}

.week-slot .slot-remove-small {
  position: absolute;
  top: 2px;
  right: 4px;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 10px;
}

.week-slot .slot-remove-small:hover { opacity: 1; }

/* Custom time picker */

.time-picker {
  display: flex;
  gap: 4px;
  align-items: center;
}

.time-picker select {
  padding: 8px 6px;
}

/* Postari tab */

.posts-table input[type="number"] {
  width: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}

.posts-table th {
  text-align: center;
}

.posts-table th:nth-child(2) {
  text-align: left;
}

/* Failed tab */

.failed-preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.failed-reason {
  color: var(--danger);
  font-size: 12px;
  max-width: 320px;
}

/* ============================================================
   Pauza (pagina / slot)
   ============================================================ */

.week-slot.slot-paused {
  opacity: 0.45;
  border: 1px dashed var(--warning);
}

.slot-pause-small, .slot-reactivate-small {
  position: absolute;
  top: 2px;
  right: 18px;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 10px;
}

.slot-pause-small:hover, .slot-reactivate-small:hover { opacity: 1; }

.detail-header {
  align-items: center;
}

/* ============================================================
   Postari - tabel rezumat + numere sub 5
   ============================================================ */

.low-number {
  color: var(--danger);
  font-weight: 700;
}

.posts-subheader th {
  font-size: 10px;
  color: var(--text-dim);
  padding-top: 0;
}

/* ============================================================
   Programate / Istoric - lista pe zile + lightbox
   ============================================================ */

.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

.list-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.posts-day-list {
  max-height: 75vh;
  overflow-y: auto;
}

.day-header {
  padding: 12px 16px 6px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.post-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.post-row:hover {
  background: var(--surface-hover);
}

.post-time {
  width: 70px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.post-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--bg);
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-video {
  width: 100%;
  height: 100%;
  position: relative;
}

.thumb-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-video-fallback, .thumb-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-dim);
}

.thumb-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.15s;
}

.post-thumb:hover .thumb-play-overlay {
  opacity: 1;
}

.post-title {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-name-inline {
  color: var(--accent);
  font-weight: 600;
}

.type-pill {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.fb-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.fb-link:hover { text-decoration: underline; }

.post-checkbox {
  flex-shrink: 0;
}

/* Lightbox */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.lightbox-content img, .lightbox-content video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

/* ============================================================
   Filtru tip continut (Programate / Istoric / Failed)
   ============================================================ */

.type-filter-bar {
  display: flex;
  gap: 16px;
}

.type-filter-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}

.type-filter-bar input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ============================================================
   Manager sub-tipuri
   ============================================================ */

.subtype-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subtype-manage-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============================================================
   Postari - tabel lat cu sub-tipuri, header + coloana fixe
   ============================================================ */

.type-toggle-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.posts-table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.posts-wide-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  white-space: nowrap;
}

.posts-wide-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.posts-wide-table th, .posts-wide-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.posts-wide-table th {
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
}

.posts-wide-table .group-header {
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.posts-wide-table .type-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.posts-wide-table .subtype-header {
  font-size: 11px;
  min-width: 90px;
  max-width: 110px;
  white-space: normal;
  word-break: break-word;
}

.posts-wide-table .frozen-col {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  min-width: 220px;
}

.posts-wide-table thead .frozen-col {
  z-index: 6;
}

.posts-wide-table .count-input {
  width: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
}

/* ============================================================
   Filtru grupat pe tip principal + sub-tipuri
   ============================================================ */

.type-filter-bar {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 140px;
}

.filter-group-label {
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.filter-subtype-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 4px;
}

.filter-subtype-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

/* ============================================================
   Galerie reeluri (Pagini) - grid 3/rand, 6 randuri vizibile
   (inaltime fixa per rand, nu procentuala, ca sa fie previzibil
   indiferent de latimea coloanei) inainte sa apara scroll.
   ============================================================ */

.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
  max-height: 650px;
  overflow-y: auto;
  padding-right: 4px;
}

.reel-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}

.reel-card:hover {
  border-color: var(--accent);
}

.reel-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: none;
}

.reel-card-badges {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
}

.reel-badge {
  background: rgba(0,0,0,0.7);
  color: var(--accent);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 6px;
}

.reel-caption {
  /* Un singur rand, trunchiat cu "..." - caption-ul complet ramane accesibil
     prin title (hover) si prin butonul "Copiaza text" (copiaza reel.caption
     intreg, nu textul afisat aici). Tinut scurt intentionat ca butoanele de
     sub el sa ramana mereu vizibile fara scroll pe un telefon. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.reel-video-wrap {
  position: relative;
  margin-bottom: 12px;
}

.reel-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reel-nav-arrow:hover { background: rgba(0, 0, 0, 0.75); }

.reel-nav-prev { left: 8px; }
.reel-nav-next { right: 8px; }

.reel-detail-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reel-detail-actions .btn {
  justify-content: center;
  padding: 9px 8px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .reel-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    /* Pe mobil, .two-pane e deja o coloana (vezi @media 768px mai sus) - grid-ul
       de reel-uri nu mai are nevoie de propriul scroll intern, pagina intreaga
       da scroll (vezi si body/.content overflow din blocul 768px) - fara cap,
       arata TOATE reel-urile deodata, nu doar primele cateva randuri. */
    max-height: none;
    overflow-y: visible;
  }
}

.filter-group input[type="checkbox"], .filter-subtype-list input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ============================================================
   Liste scrolabile intern (Failed, Bonus, Delete) - butonul de
   jos ramane mereu vizibil, fara sa fie nevoie de scroll pe toata pagina
   ============================================================ */

.list-scroll-wrap {
  max-height: 60vh;
  overflow-y: auto;
}

.list-scroll-wrap table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.list-scroll-wrap table thead th {
  background: var(--surface);
}

/* ============================================================
   Istoric — rulari de generare
   ============================================================ */

.run-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.run-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.run-card-title {
  font-weight: 600;
  font-family: var(--mono);
}

.run-card-sub {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 4px;
}

.run-card-message {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
  white-space: pre-wrap;
}

.run-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.run-badge-ok {
  background: rgba(69, 217, 199, 0.12);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}

.run-badge-warn {
  background: rgba(240, 169, 78, 0.12);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.run-badge-err {
  background: rgba(230, 103, 94, 0.12);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.run-page-table {
  margin-top: 12px;
}

.run-ok {
  color: var(--accent);
  font-family: var(--mono);
}

.run-err {
  color: var(--danger);
  font-family: var(--mono);
}


/* "i" cu informatii - textul explicativ apare doar la hover / focus / tap,
   in loc sa stea permanent pe ecran. */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font: italic 700 11px/1 Georgia, serif;
  cursor: help;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--accent); border-color: var(--accent-dim); outline: none; }
.info-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: -10px;
  z-index: 50;
  width: max-content;
  max-width: min(340px, 80vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  color: var(--text);
  font: 400 13px/1.5 var(--sans);
  white-space: normal;
  text-align: left;
  display: none; /* display (nu visibility) - ascuns nu ocupa loc / nu da scroll orizontal */
}
.info-pop.info-pop-left { left: auto; right: -10px; }
.info-pop code { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.info-tip:hover .info-pop, .info-tip:focus .info-pop, .info-tip:focus-within .info-pop { display: block; }

/* Pagina al carei token nu mai merge - trebuie reconectata */
.gl-warn { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff;
           font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* Logo-ul PikPlanner (P alb pe negru) - acelasi ca iconita aplicatiei Meta */
.brand-logo { display: block; width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }