/* ============================================================
   Tryb EDIT (CMS). Ta sama paleta i typografia co playground —
   narzędzie projektowe, nie dashboard SaaS.
   ============================================================ */

/* ---------------- Przełącznik trybów ---------------- */
.mode-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.mode-switch__btn {
  height: 26px;
  padding: 0 var(--s-3);
  border-radius: 4px;
  font-size: var(--fs-12);
  font-weight: 550;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink-muted);
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.mode-switch__btn:hover { color: var(--c-ink); }

.mode-switch__btn[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-1);
}

/* ---------------- Shell CMS ---------------- */
.cms {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--c-canvas);
}

.cms__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-7);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.cms__project {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-4);
  border-right: 1px solid var(--c-line);
  margin-right: var(--s-2);
}

.cms__project .cms-input--select {
  width: auto;
  min-width: 150px;
}

.cms__status {
  font-size: var(--fs-12);
  color: var(--c-ink-faint);
  letter-spacing: var(--ls-tight);
}

.cms__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.cms__cols {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 300px 332px minmax(0, 1fr) 328px;
  min-height: 0;
}

.cms-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  overflow-y: auto;
  border-right: 1px solid var(--c-line);
  background: var(--c-surface);
}

.cms-col:last-child {
  border-right: 0;
  background: var(--c-surface-sunk);
}

.cms-col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.cms-col__count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
}

.cms-empty {
  font-size: var(--fs-13);
  color: var(--c-ink-faint);
  line-height: 1.6;
}

/* ---------------- Listy ---------------- */
.cms-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cms-row,
.cms-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}

.cms-row:hover,
.cms-card:hover { border-color: var(--c-line-strong); }

.cms-row[aria-selected="true"],
.cms-card[aria-selected="true"] {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

/* Dwie linie: nazwa ekranu w pełnej szerokości, sterowanie pod spodem */
.cms-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
}

.cms-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cms-row__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-ink-faint);
  padding-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-row__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex: 0 0 auto;
}

.cms-row__side .cms-input--select { width: 82px; }

/* Kolor chromu telefonu dla ekranu */
.cms-chrome {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cms-color {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
}

.cms-color--auto { opacity: 0.45; }

.cms-icon--on {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 650;
}

.cms-icon--on:hover:not(:disabled) {
  background: #2a2c31;
  color: var(--c-accent-ink);
}

.cms-color::-webkit-color-swatch-wrapper { padding: 0; }
.cms-color::-webkit-color-swatch { border: 0; border-radius: 3px; }

.cms-row__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.cms-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cms-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.cms-card__head .cms-input { flex: 1 1 auto; }

.cms-card__meta {
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
  letter-spacing: var(--ls-tight);
}

/* ---------------- Pola formularza ---------------- */
.cms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

/* Pole zajmujące całą szerokość siatki (np. Key) */
.cms-field--wide { grid-column: 1 / -1; }

.cms-grid--2 { grid-template-columns: 72px minmax(0, 1fr); }

.cms-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cms-field__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.cms-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  font-family: inherit;
  font-size: var(--fs-13);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--e-out);
}

.cms-input:hover { border-color: var(--c-line-strong); }

.cms-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

.cms-input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-muted) 50%),
    linear-gradient(135deg, var(--c-ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 13px, calc(100% - 8px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------------- Podgląd na żywo ---------------- */
.cms-col--preview {
  background: var(--c-surface);
  border-right: 0;
  border-left: 1px solid var(--c-line);
  align-items: stretch;
}

.cms-col:last-child { background: var(--c-surface); }
.cms-col[data-cms-variants] { background: var(--c-surface-sunk); }

.cms-preview__stage {
  display: flex;
  justify-content: center;
  padding: var(--s-2) 0 var(--s-4);
}

.cms-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-11);
  color: var(--c-ink-faint);
  line-height: 1.5;
}

.cms-preview__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

.cms-preview__row b {
  font-weight: 550;
  color: var(--c-ink-soft);
}

/* Miniatura wariantu jest klikalna — ustawia wariant w podglądzie */
.cms-variant__frame { cursor: pointer; }

.cms-variant[aria-selected="true"] .cms-variant__frame {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

/* ---------------- Zależności warstw ---------------- */
.cms-depends {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cms-chip {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
  background: var(--c-surface);
  transition: border-color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}

.cms-chip:hover { border-color: var(--c-line-strong); color: var(--c-ink); }

.cms-chip[aria-pressed="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.cms-depends__hint {
  font-size: var(--fs-11);
  line-height: 1.5;
  color: var(--c-ink-faint);
}

.cms-depends__hint--warn { color: var(--c-ink-soft); font-weight: 550; }

.cms-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-size: var(--fs-11);
  color: var(--c-ink-soft);
}

.cms-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-ink-faint);
}

.cms-status--locked {
  border-color: var(--c-accent);
  color: var(--c-ink);
  font-weight: 550;
}

.cms-status--locked::before { background: var(--c-accent); }

/* ---------------- Wybór ekranów (kopiowanie warstwy) ---------------- */
.cms-choose {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-2);
}

.cms-choose__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  color: var(--c-ink-soft);
  cursor: pointer;
}

.cms-choose__item:hover { background: var(--c-surface-hover); }

.cms-choose__item input {
  width: 14px;
  height: 14px;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.cms-choose__warn {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ---------------- Nadpisania wariantu ---------------- */
.cms-overrides {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
}

.cms-override {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-sunk);
}

.cms-override__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.cms-override__head .cms-input { flex: 1 1 auto; }

.cms-add--sm { height: 28px; font-size: var(--fs-11); }

.cms-variant__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--ls-mid);
}

/* ---------------- Suwak pozycji ---------------- */
.cms-slider {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.cms-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  margin: 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.cms-input--num {
  flex: 0 0 auto;
  width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Przyciski ---------------- */
.cms-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  line-height: 1;
  color: var(--c-ink-muted);
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.cms-icon:hover:not(:disabled) {
  background: var(--c-surface-hover);
  color: var(--c-ink);
}

.cms-icon:disabled { opacity: 0.25; }

.cms-add {
  width: 100%;
  height: 34px;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink-muted);
  background: transparent;
  transition: border-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out);
}

.cms-add:hover {
  border-color: var(--c-accent);
  color: var(--c-ink);
  background: var(--c-surface-hover);
}

.cms-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.cms-btn:hover { border-color: var(--c-line-strong); color: var(--c-ink); }

.cms-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------- Warianty ---------------- */
.cms-variants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 268px));
  gap: var(--s-4);
}

.cms-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.cms-variant__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface-sunk);
}

.cms-variant__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cms-variant__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-2);
}

.cms-asset {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-asset__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.cms-asset__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-11);
  color: var(--c-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-asset__name--empty { color: var(--c-ink-faint); }

/* ---------------- Potwierdzenie ---------------- */
.cms-confirm {
  position: fixed;
  inset: 0;
  z-index: 240;   /* nad modalem ustawień (220) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: rgba(22, 23, 26, 0.16);
  animation: layer-in var(--t-mid) var(--e-out);
}

.cms-confirm__box {
  width: 100%;
  max-width: 380px;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.cms-confirm__text {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.cms-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}

/* ---------------- Placeholder pustego wariantu ---------------- */
.ph-empty {
  min-height: 96px;
  border: 1px dashed var(--c-ph-line);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}

.ph-empty span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* ---------------- Responsywność ---------------- */
@media (max-width: 1480px) {
  .cms__cols { grid-template-columns: 280px 320px minmax(0, 1fr) 292px; }
}

@media (max-width: 1180px) {
  .cms__cols {
    grid-template-columns: minmax(0, 1fr);
    display: flex;
    flex-direction: column;
  }
  .cms-col {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    overflow-y: visible;
  }
  .cms { overflow-y: auto; }
}

@media (max-width: 620px) {
  .cms__bar { flex-wrap: wrap; padding: var(--s-4); }
  .cms-col { padding: var(--s-5) var(--s-4); }
}

/* Publikacja — akcja o innej wadze niż eksport/import */
.cms-btn--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 550;
}

.cms-btn--accent:hover {
  background: #2a2c31;
  border-color: #2a2c31;
  color: var(--c-accent-ink);
}

/* ---------------- Przeciąganie kart ---------------- */
.cms-drag {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1;
  color: var(--c-ink-faint);
  cursor: grab;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.cms-drag:hover {
  background: var(--c-surface-hover);
  color: var(--c-ink);
}

.cms-drag:active { cursor: grabbing; }

/* Przeciągana karta zostaje w pełni widoczna i lekko uniesiona,
   reszta listy przygasa — wzrok idzie za tym, co przenosisz. */
.is-dragging {
  opacity: 1;
  cursor: grabbing;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent), var(--sh-2);
}

.is-sorting .cms-row:not(.is-dragging),
.is-sorting .cms-card:not(.is-dragging),
.is-sorting .cms-variant:not(.is-dragging),
.is-sorting .wp-project:not(.is-dragging) {
  opacity: 0.4;
}

.cms-row,
.cms-card,
.cms-variant,
.wp-project {
  transition: opacity var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}

.is-sorting { cursor: grabbing; }