/* ====================================
   Postimelabs
   CMS / Template Editor Chrome
   ==================================== */

/* --cms-topbar-height drives both the sticky offset and the preview panel height */
:root {
  --cms-topbar-height: 56px;
}

/* === Editor Wrapper ===
   position:fixed anchors the editor precisely below the site header,
   avoiding margin-collapse issues that occur with margin-top on a
   block element inside #page-content. */
.cms-editor {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;           /* below site header (1000), above page content */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gray-100);
}

/* === Top Bar === */
.cms-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  height: 64px;
  background: var(--white);
  border-bottom: 2px solid var(--primary-color);
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.cms-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cms-topbar-select {
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  min-width: 220px;
  cursor: pointer;
  outline: none;
}

.cms-topbar-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(45, 106, 47, 0.12);
}

.cms-topbar-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.01em;
}

/* === Two-Column Body === */
.cms-body {
  display: grid;
  grid-template-columns: 720px 1fr;
  flex: 1;
  min-height: 0;
  min-width: 1024px;
  overflow-x: auto;
  padding-top: 4px;
}

/* === Left Panel === */
.cms-panel {
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  overflow-y: auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* === Field Groups === */
.cms-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.cms-hint {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 2px;
}

.cms-input {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cms-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(45, 106, 47, 0.12);
}

.cms-textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cms-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(45, 106, 47, 0.12);
}

.cms-file-input {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
}

/* === Full-height TinyMCE field === */
.cms-editor-field {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* === Sections List === */
.cms-sections-heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-400);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--gray-200);
  margin-top: 2px;
}

.cms-section-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cms-section-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--gray-50);
  user-select: none;
  transition: background var(--transition-fast);
}

.cms-section-toggle:hover {
  background: var(--gray-100);
}

.cms-section-block:has(input:checked) .cms-section-toggle {
  background: #edf5ed;
  border-bottom: 1px solid var(--gray-200);
}

.cms-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color);
  flex-shrink: 0;
  cursor: pointer;
}

.cms-section-name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
}

.cms-section-desc {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-left: auto;
  white-space: nowrap;
}

.cms-section-fields {
  padding: var(--spacing-sm) 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: var(--white);
}

/* === Actions === */
.cms-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--spacing-xs);
}

.cms-actions .btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.9rem;
}

/* === Right Panel === */
.cms-preview-panel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
}

.cms-tinymce-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Force TinyMCE to fill the wrapper */
.cms-tinymce-wrap .tox.tox-tinymce {
  flex: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

.cms-preview-bar {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
  height: 36px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.cms-preview-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
}

.cms-preview-wrapper {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-sm);
  overflow: hidden;
}

.cms-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  display: block;
}

/* === Access Denied === */
.cms-access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--spacing-2xl);
  text-align: center;
}

.cms-access-denied h3 {
  color: var(--danger);
  margin-bottom: var(--spacing-sm);
}

.cms-access-denied p {
  font-family: var(--font-sans);
  color: var(--gray-500);
}