/* Editor overrides: full-width, dark background, one-line field rows */

/* Darken page for visibility */
body.editor-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  pointer-events: none;
  z-index: 0;
}

/* Make the main editor container full width */
.overlay.editor-overlay {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: rgba(0,0,0,0.80);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
  text-align: left;
}
.overlay.editor-overlay .subtitle { margin-bottom: 10px; }

/* Edit panel: full width and darker */
#panel.overlay {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  background: rgba(0,0,0,0.88);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 12px 24px rgba(0,0,0,0.45);
  text-align: left;
}
#panel .title { font-size: clamp(28px, 3vw, 44px); }

/* One line per field: text + font + color side-by-side */
#panel .form { display: grid; grid-template-columns: minmax(0, 1fr) 220px 1fr; gap: 12px 14px; align-items: center; }
#panel .form .field-row { display: contents; }
#panel .form label { display: flex; align-items: center; gap: 10px; margin: 0; }
#panel .form label input[type="text"] { flex: 1; }
#panel .form label select { width: 100%; }
#panel .form .color-picker { display: flex; align-items: center; }
#panel .form .container-items { gap: 6px; overflow-x: auto; padding-bottom: 2px; }

/* Slightly smaller color swatches to fit better in one line */
.item-color { width: 28px; height: 36px; }
.item-color::after { width: 36px; height: 36px; }

/* Ensure login form stays single-column */
#loginForm { grid-template-columns: 1fr; }
#loginForm label { display: block; }


/* Editor overrides: full-width container and Bootstrap modal styles */

/* Ensure Bootstrap selects/options are readable on dark page */
.form-select, .form-control { color: #212529; background-color: #fff; }
.form-select option { color: #212529; background-color: #fff; }

/* Modal content brighter, not transparent */
.modal-content.bg-light { background-color: #f8f9fa !important; }

/* Color picker: no scrollbar, wrap neatly */
.bf-color-picker .d-flex { flex-wrap: wrap; gap: 6px; }
.bf-color-picker .item-color { width: 26px; height: 30px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.2); }
.bf-color-picker .item-color::after { width: 30px; height: 30px; }

/* Swatch base from existing styles.css (ensures visible color chip) */
.item-color { display:inline-block; position:relative; background: var(--color, #ffffff); }
.item-color.selected { outline: 2px solid #0d6efd; }

/* Make thumbnail grid spacing consistent with Bootstrap look */
.thumb-grid { gap: 12px; }


/* Editor overrides: ensure Bootstrap modal buttons visible, color swatches clear, grid responsive, logo smaller */

/* Modal buttons: force Bootstrap colors inside our modal */
.modal-content .btn-primary { color: #fff !important; background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.modal-content .btn-secondary { color: #fff !important; background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; }
.modal-content .btn { box-shadow: none; }

/* Swatches: visible on light modal, show selection clearly */
.bf-color-picker .item-color { width: 26px; height: 30px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.25); background: var(--color, #ffffff); }
.bf-color-picker .item-color::after { width: 30px; height: 30px; background-color: var(--color, #ffffff); }
.bf-color-picker .item-color::before { display: none; }
.bf-color-picker .item-color.selected { outline: 2px solid #0d6efd; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(13,110,253,.35); }

/* Default inputs and selects readable on light modal */
.form-select, .form-control { color: #212529; background-color: #fff; }
.form-select option { color: #212529; background-color: #fff; }

/* Responsive thumbnail grid */
/* Bigger thumbnails and responsive wrapping for editor grid */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.thumb .thumb-img { width: 100%; height: 240px; object-fit: cover; display: block; }

/* Top-right badge for non-deletable slides */
.thumb .thumb-badge {
  position: absolute;
  top: 8px;
  right: 6px;
  background: rgba(41, 75, 82, 0.95); /* Bootstrap danger */
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 10;
}

/* Smaller editor logo (approx 1/4 of prior size) */
.editor-logo {
  width: clamp(80px, 12vw, 160px);
  height: auto;
  margin-bottom: 8px;
}

/* Bright editor theme overrides */
body.editor-page {
  min-height: 100vh;
  background: #f8f9fa !important;
  color: #212529 !important;
}
body.editor-page::before { display: none !important; }
.editor-page .subtitle { color: #212529; }

/* Scenic background for login page */
body.login-view {
  background: url('../images/bkg.jpg') center/cover no-repeat fixed !important;
}
body.login-view::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.20); /* subtle wash for contrast */
  pointer-events: none;
}

/* Solid Bootstrap buttons (override transparent styles) */
.editor-page .btn-primary {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.editor-page .btn-secondary {
  color: #fff !important;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}
.editor-page .btn-danger {
  color: #fff !important;
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}.editor-page .btn-info {
  color: #0b0b0b !important;
  background-color: #90d1d600 !important;
  border-color: #80b8e6 !important;
}

/* Login card aesthetic */
.login-card {
  border-radius: 14px;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
.login-card .form-label { font-size: .9rem; color: #6c757d; }

/* Ensure login inputs are full width within card */
#loginForm .form-control { width: 100%; }

/* Thumbnail title readability and hover animations */
.thumb { position: relative; border-radius: 12px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.thumb:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }
.thumb .thumb-img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.3s ease, filter 0.3s ease; }
.thumb:hover .thumb-img { transform: scale(1.04); filter: brightness(1.05); }
.thumb .thumb-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px; background: rgba(0,0,0,0.55); color: #ffffff; font-weight: 600; font-size: 0.95rem; text-shadow: 0 2px 4px rgba(0,0,0,0.7); }
.thumb .badge { display: none !important; }
.thumb .thumb-actions { position: absolute; bottom: 8px; right: 6px; display: flex; gap: 6px; }

/* Drag-and-drop cues */
.thumb { transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease; }
.thumb.dragging { opacity: 0.6; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.thumb.drag-over { transform: translateY(6px) scale(0.98); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }

.thumb-placeholder { border: 2px dashed #0ea5e9; border-radius: 12px; background: rgba(14,165,233,0.12); min-height: 260px; position: relative; }
.thumb-placeholder::after { content: 'Drop here'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #0ea5e9; font-weight: 600; }
@keyframes pulsePlaceholder { from { background-color: rgba(14,165,233,0.12); } to { background-color: rgba(14,165,233,0.22); } }
.thumb-placeholder { animation: pulsePlaceholder 700ms ease-in-out infinite alternate; }

/* Editor page background: kg.jpg stretched */
body.editor-page { background: url('../images/bkg.jpg') center/cover no-repeat fixed !important; }