/* cms layout */
.cms-content {
   margin-top: var(--spacing-xl);
}

/* cms sections */
.cms-section {
   margin-bottom: var(--spacing-lg);
}

.cms-section:last-child {
   margin-bottom: 0;
}

.section-title {
   font-size: var(--font-size-xl);
   color: var(--gray-700);
   margin-bottom: var(--spacing-sm);
   padding-bottom: var(--spacing-xs);
}

/* cms cards */
.cms-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
}

.cms-card {
   background: var(--color-white);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   cursor: pointer;
   transition: var(--transition-base);
   border: 1px solid var(--gray-200);
   position: relative;
   overflow: hidden;
}

.cms-card::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background: var(--color-primary);
   transform: scaleX(0);
   transform-origin: left;
   transition: var(--transition-base);
}

.cms-card:hover {
   border-color: var(--gray-300);
}

.cms-card:hover::after {
   transform: scaleX(1);
}

.cms-card.selected {
   background: var(--gray-50);
   border-color: var(--color-primary);
}

.cms-card.selected::after {
   transform: scaleX(1);
}

.cms-card-title {
   font-size: var(--font-size-lg);
   color: var(--gray-700);
   margin-bottom: var(--spacing-sm);
}

.cms-card-description {
   color: var(--gray-500);
   font-size: var(--font-size-sm);
   line-height: 1.4;
}

/* content editor */
.content-editor {
   background: var(--color-white);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-lg);
   margin-top: var(--spacing-md);
}

.content-editor-title {
   font-size: var(--font-size-lg);
   color: var(--gray-700);
   margin-bottom: var(--spacing-md);
   padding-bottom: var(--spacing-sm);
   border-bottom: 1px solid var(--gray-200);
}

/* entries */
.entries-list {
   margin-top: var(--spacing-lg);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
}

.entry-card {
   background: var(--color-white);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-lg);
   position: relative;
}

.entry-card.editing {
   border-color: var(--color-primary);
}

.entry-header {
   position: absolute;
   top: var(--spacing-sm);
   right: var(--spacing-sm);
   z-index: 1;
}

.entry-actions {
   display: flex;
   gap: var(--spacing-sm);
}

/* preview fields */
.preview-field {
   font-size: var(--font-size-sm);
}

.preview-field:last-child {
   margin-bottom: 0;
}

.field-label {
   color: var(--gray-500);
   margin-bottom: var(--spacing-xs);
}

.field-value {
   color: var(--gray-800);
   line-height: 1.4;
   white-space: normal;
}

.heading-field .field-value {
   font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--gray-800);
   line-height: 1.3;
}

.text-field .field-value {
   color: var(--gray-600);
   line-height: 1.4;
}

.answers-list {
   margin-top: var(--spacing-sm);
}

.answer-item {
   margin-bottom: var(--spacing-md);
   padding-left: var(--spacing-md);
   border-left: 2px solid var(--gray-200);
   color: var(--gray-600);
   line-height: 1.6;
}

.answer-item:last-child {
   margin-bottom: 0;
}

.answer-item p {
   margin-bottom: var(--spacing-sm);
}

.answer-item p:last-child {
   margin-bottom: 0;
}

.answer-item ul,
.answer-item ol {
   margin: var(--spacing-sm) 0;
   padding-left: var(--spacing-lg);
}

.answer-item li {
   margin-bottom: var(--spacing-xs);
}

.answer-item li:last-child {
   margin-bottom: 0;
}

.answer-item a {
   color: var(--color-primary);
   text-decoration: none;
}

.answer-item a:hover {
   text-decoration: underline;
}

/* debug panel */
.debug-panel {
   margin-top: var(--spacing-xl);
   border-top: 1px dashed var(--gray-300);
   padding-top: var(--spacing-md);
   max-width: 1200px;
   margin: var(--spacing-xl) auto 0;
   width: 100%;
}

.debug-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--gray-50);
   border: 1px solid var(--gray-300);
   border-radius: var(--border-radius-md);
   cursor: pointer;
   user-select: none;
}

.debug-content {
   margin-top: var(--spacing-md);
   padding: var(--spacing-md);
   background: var(--gray-800);
   border-radius: var(--border-radius-md);
   overflow-x: auto;
}

.debug-content pre {
   margin: 0;
   color: var(--gray-100);
   font-family: monospace;
   font-size: var(--font-size-sm);
   line-height: 1.5;
   white-space: pre-wrap;
}

/* editor content */
.entry-content {
   display: flex;
   gap: var(--spacing-lg);
}

.entry-thumbnail {
   flex-shrink: 0;
   width: 120px;
   height: 120px;
   border-radius: var(--border-radius-sm);
   overflow: hidden;
   border: 1px solid var(--gray-200);
   background: var(--gray-50);
}

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

.entry-thumbnail .no-image {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--gray-50);
   color: var(--gray-400);
   font-size: var(--font-size-sm);
}

.entry-thumbnail .no-image span {
   padding: var(--spacing-xs);
   border: 1px dashed var(--gray-300);
   border-radius: var(--border-radius-xs);
   background: var(--color-white);
}

.entry-fields {
   flex-grow: 1;
}

.entry-heading {
   font-size: var(--font-size-lg);
   color: var(--gray-800);
   margin-bottom: var(--spacing-sm);
}

/* editor buttons */
.btn-add {
   background: var(--color-primary);
   color: var(--color-white);
   border: none;
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.btn-add:hover {
   background: var(--color-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
}

.btn-edit, .btn-delete {
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-xs);
   border: 1px solid transparent;
   cursor: pointer;
   transition: var(--transition-base);
}

.btn-edit {
   background: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
}

.btn-edit:hover {
   background: var(--color-primary-dark);
   border-color: var(--color-primary-dark);
}

.btn-delete {
   background: var(--color-danger);
   color: var(--color-white);
   border-color: var(--color-danger);
}

.btn-delete:hover {
   background: var(--color-danger-dark);
   border-color: var(--color-danger-dark);
}

/* editor form */
.editor-actions {
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-sm);
}

.editor-actions button {
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.btn-save {
   background: var(--color-primary);
   color: var(--color-white);
   border: 1px solid var(--color-primary);
}

.btn-save:hover {
   background: var(--color-primary-dark);
   border-color: var(--color-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
}

.btn-cancel {
   background: var(--gray-100);
   color: var(--gray-700);
   border: 1px solid var(--gray-300);
}

.btn-cancel:hover {
   background: var(--gray-200);
   transform: translateY(-1px);
}

/* asset picker */
.asset-picker {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.asset-label {
   font-size: var(--font-size-sm);
   color: var(--gray-600);
   text-align: left;
}

.asset-prompt {
   color: var(--gray-500);
   font-style: italic;
}

.asset-preview {
   width: 120px;
   height: 120px;
   border-radius: var(--border-radius-sm);
   overflow: hidden;
   border: 1px solid var(--gray-200);
   cursor: pointer;
   transition: var(--transition-base);
}

.asset-preview:hover {
   border-color: var(--color-primary);
}

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

.asset-preview .no-image {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--gray-50);
   color: var(--gray-400);
   font-size: var(--font-size-sm);
}

.asset-preview .no-image span {
   padding: var(--spacing-xs);
   border: 1px dashed var(--gray-300);
   border-radius: var(--border-radius-xs);
   background: var(--color-white);
}

/* delete confirmation overlay */
.entry-card .delete-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, 0.95); /* nearly opaque white background */
   border-radius: var(--border-radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10; /* ensure overlay is above content */
}

.delete-confirm {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-md);
   text-align: center;
}

.confirm-message {
   color: var(--color-danger);
   font-size: var(--font-size-lg);
   font-weight: 500;
   margin-bottom: var(--spacing-sm);
}

.confirm-actions {
   display: flex;
   gap: var(--spacing-sm);
}

.confirm-actions button {
   padding: var(--spacing-sm) var(--spacing-lg);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.confirm-actions .btn-cancel {
   background: var(--color-white);
   border: 1px solid var(--gray-300);
   color: var(--gray-700);
}

.confirm-actions .btn-cancel:hover {
   background: var(--gray-50);
}

.confirm-actions .btn-delete {
   background: var(--color-danger);
   border: 1px solid var(--color-danger);
   color: var(--color-white);
}

.confirm-actions .btn-delete:hover {
   background: var(--color-danger-dark);
   border-color: var(--color-danger-dark);
}

/* global actions */
.global-actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: var(--spacing-md);
   padding: var(--spacing-md);
   background: var(--gray-50);
   border: 1px solid var(--color-danger-dark);
   border-radius: var(--border-radius-lg);
   max-width: 1200px;
   margin: var(--spacing-md) auto;
   width: 100%;
}

.changes-notice {
   color: var(--color-danger);
   font-size: var(--font-size-sm);
}

.action-buttons {
   display: flex;
   gap: var(--spacing-md);
}

.action-buttons .btn-cancel {
   background: var(--gray-100);
   color: var(--gray-700);
   border: 1px solid var(--gray-300);
   padding: var(--spacing-sm) var(--spacing-lg);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.action-buttons .btn-cancel:hover {
   background: var(--gray-200);
   transform: translateY(-1px);
}

.action-buttons .btn-save {
   background: var(--color-primary);
   color: var(--color-white);
   border: 1px solid var(--color-primary);
   padding: var(--spacing-sm) var(--spacing-lg);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.action-buttons .btn-save:hover {
   background: var(--color-primary-dark);
   border-color: var(--color-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
}

/* Action buttons container */
.cms-actions {
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-lg);
}

.btn-reorder {
   background: var(--gray-100);
   color: var(--gray-700);
   border: 1px solid var(--gray-300);
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.btn-reorder:hover {
   background: var(--gray-200);
   transform: translateY(-1px);
}

.btn-reorder.active {
   background: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
}

/* Reorder mode styles */
.entry-preview.reorder-mode {
   cursor: grab;
   border: 1px solid var(--gray-400);
}

.entry-preview.reorder-mode:active,
.entry-preview.dragging {
   cursor: grabbing;
   border-color: var(--color-primary);
}

/* reorder overlay */
.reorder-overlay {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: calc(var(--border-radius-lg) - 1px);
   z-index: 2;
   cursor: grab;
}

.entry-preview.reorder-mode:active .reorder-overlay {
   cursor: grabbing;
   background: rgba(255, 255, 255, 0.8);
}

.reorder-text {
   background: var(--color-white);
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-600);
   border: 1px dashed var(--gray-300);
   pointer-events: none;
}

/* Drop indicator line */
.entry-preview.reorder-mode::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--color-primary);
   transform: scaleX(0);
   transition: transform 0.2s ease;
   z-index: 3;
}

.entry-preview.reorder-mode[data-drop-target="before"]::before {
   top: -1px;
   transform: scaleX(1);
}

.entry-preview.reorder-mode[data-drop-target="after"]::before {
   bottom: -1px;
   transform: scaleX(1);
}

/* entry preview structure */
.entry-preview {
   position: relative;
   background: var(--color-white);
   border-radius: var(--border-radius-lg);
   transition: var(--transition-base);
}

.entry-editor {
   padding: var(--spacing-lg);
}

/* header positioning */
.entry-header {
   position: absolute;
   top: var(--spacing-sm);
   right: var(--spacing-sm);
   z-index: 1;
}

/* content wrapper */
.entry-content-wrapper {
   position: relative;
   display: flex;
   gap: var(--spacing-lg);
   padding: var(--spacing-lg); /* moved padding here from entry-preview */
}

/* reorder mode styles */
.entry-preview.reorder-mode {
   cursor: grab;
}

.entry-preview.reorder-mode:active {
   cursor: grabbing;
}

.entry-preview.dragging {
   opacity: 0.5;
}

/* reorder overlay */
.reorder-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   cursor: grab;
}

.reorder-text {
   background: var(--color-white);
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-600);
   border: 1px dashed var(--gray-300);
   pointer-events: none;
}

/* drop indicator styles */
.entry-preview.reorder-mode::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--color-primary);
   transform: scaleX(0);
   transition: transform 0.2s ease;
   z-index: 3;
}

.entry-preview.reorder-mode[data-drop-target="before"]::before {
   top: -1px;
   transform: scaleX(1);
}

.entry-preview.reorder-mode[data-drop-target="after"]::before {
   bottom: -1px;
   transform: scaleX(1);
}

/* adjust entry-content-wrapper to account for border */
.entry-preview.reorder-mode .entry-content-wrapper {
   opacity: 0.5;
}

/* hide action buttons during reorder */
.entry-preview.reorder-mode .entry-actions {
   display: none;
}

.btn-add.disabled,
.btn-add:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   background: var(--gray-400);
   border-color: var(--gray-400);
   transform: none;
   box-shadow: none;
}

.btn-add.disabled:hover,
.btn-add:disabled:hover {
   background: var(--gray-400);
   border-color: var(--gray-400);
   transform: none;
   box-shadow: none;
}

/* array fields styling */
.array-fields {
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-md);
}

.array-item {
   display: flex;
   gap: var(--spacing-sm);
   align-items: flex-start;
   margin-bottom: var(--spacing-sm);
}

.array-item:last-child {
   margin-bottom: 0;
}

.array-item .form-control {
   flex-grow: 1;
}

.array-item .btn-delete {
   flex-shrink: 0;
   margin-left: auto; /* pushes button to the right */
}

/* add item button positioning */
.array-fields .btn-add {
   margin-top: var(--spacing-md);
}

/* array object item styling */
.array-item .object-fields {
   background: var(--color-white);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
   padding: var(--spacing-md);
   width: 100%; /* ensure it takes full width */
}

/* spacing between form groups within array objects */
.array-item .object-fields .form-group {
   margin-bottom: var(--spacing-sm);
}

.array-item .object-fields .form-group:last-child {
   margin-bottom: 0;
}

/* maintain button positioning with object fields */
.array-item {
   align-items: flex-start;
   gap: var(--spacing-md); /* slightly larger gap for object items */
}

/* object fields styling */
.object-fields {
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-md);
   margin-top: var(--spacing-xs); /* space after label */
}

/* spacing between form groups within objects */
.object-fields .form-group {
   margin-bottom: var(--spacing-sm);
}

.object-fields .form-group:last-child {
   margin-bottom: 0;
}

/* nested object fields (objects within arrays) should be white */
.array-item .object-fields {
   background: var(--color-white);
}

/* asset field styling */
.asset-field {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
}

.asset-toggles {
   display: flex;
   gap: var(--spacing-xs);
}

.asset-toggle {
   padding: var(--spacing-xs) var(--spacing-sm);
   border: 1px solid var(--gray-300);
   border-radius: var(--border-radius-sm);
   background: var(--color-white);
   color: var(--gray-600);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: var(--transition-base);
}

.asset-toggle:hover {
   background: var(--gray-50);
   border-color: var(--gray-400);
}

.asset-toggle.active {
   background: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
}

/* asset picker grid */
.asset-picker-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: var(--spacing-sm);
   max-height: 400px;
   overflow-y: auto;
   background: var(--gray-50);
   padding: var(--spacing-sm);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
}

.asset-picker-grid .asset-item {
   display: flex;
   flex-direction: column;
   cursor: pointer;
   padding: var(--spacing-xs);
   background-color: #fff;
}

.asset-picker-grid .asset-item.selected {
   border-color: var(--color-primary);
   background-color: rgba(var(--color-primary-rgb), 0.1);
}

.asset-picker-grid .asset-thumbnail {
   aspect-ratio: 1;
   border-radius: var(--border-radius-xs);
   overflow: hidden;
   border: 2px solid transparent;
   transition: var(--transition-base);
}

.asset-picker-grid .asset-item:hover .asset-thumbnail {
   border-color: var(--color-primary);
}

.asset-picker-grid .asset-thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.asset-picker-grid .asset-thumbnail .no-image {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-white);
   font-size: var(--font-size-xs);
}

.asset-picker-grid .asset-filename {
   font-size: var(--font-size-xs);
   color: var(--gray-600);
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 0 var(--spacing-xs);
}

/* Add this to the asset picker grid section */
.asset-picker-grid .no-assets-message {
   grid-column: 1 / -1;
   padding: var(--spacing-lg);
   text-align: center;
   color: var(--gray-600);
   background: var(--color-white);
   border: 1px dashed var(--gray-300);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
}

/* status message */
.status-message {
   position: fixed;
   bottom: var(--spacing-lg);
   right: var(--spacing-lg);
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--border-radius-sm);
   font-size: var(--font-size-sm);
   z-index: 100;
   animation: slideIn 0.3s ease-out;
   box-shadow: var(--shadow-md);
   /* make background fully opaque */
   background: var(--color-white);
}

.status-message.success {
   background: var(--color-success);
   color: var(--color-white);
   border: 1px solid var(--color-success-dark);
}

.status-message.error {
   background: var(--color-danger);
   color: var(--color-white);
   border: 1px solid var(--color-danger-dark);
}

@keyframes slideIn {
   from {
      transform: translateY(100%);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

/* array items styling */
.array-items {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
   margin-top: var(--spacing-sm);
}

.array-item {
   border: 1px solid var(--gray-200);
   padding: var(--spacing-md);
   border-radius: var(--border-radius-md);
   background: var(--gray-50);
   margin-bottom: var(--spacing-sm);
   position: relative;
   width: 100%;
}

.array-item-content {
   width: calc(100% - 80px);
}

.array-item .form-group {
   margin-bottom: var(--spacing-sm);
   width: 100%;
}

.array-item .form-group:last-child {
   margin-bottom: 0;
}

.array-item .form-group label {
   display: block;
   margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--gray-700);
}

.array-item .form-group input,
.array-item .form-group textarea {
   width: 100%;
}

.array-item .btn-delete {
   position: absolute;
   top: var(--spacing-sm);
   right: var(--spacing-sm);
}

.array-item textarea {
   width: 100%;
}

.button-link {
   display: inline-block;
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--color-primary);
   color: var(--color-white);
   text-decoration: none;
   border-radius: var(--border-radius-md);
   margin-right: var(--spacing-sm);
   margin-bottom: var(--spacing-sm);
   transition: var(--transition-base);
}

.button-link:hover {
   background: var(--color-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
}