/* Admin UI (separated) – uses theme variables */

/* Admin panel container */
body.admin-mode #admin-panel {
  display: block;
  position: fixed;
  top: 84px;
  right: 12px;
  z-index: 10010;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius, 12px) - 4px);
  box-shadow: 0 16px 34px color-mix(in oklab, var(--shadow-color, rgba(15,23,42,.28)) 100%, transparent);
  padding: 12px;
  backdrop-filter: blur(var(--glass-blur, 10px));
}

/* Admin small buttons */
body.admin-mode #admin-panel .control-btn {
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--surface) 88%, var(--text) 12%);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 85%, var(--text) 15%);
}
body.admin-mode #admin-panel .control-btn:hover { background: color-mix(in oklab, var(--accent) 22%, var(--surface) 78%); color:#fff; }

/* Make admin panel buttons draggable and visually clear for drag */
.admin-panel-body .draggable {
    cursor: grab;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.admin-panel-body .draggable:active {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Prevent button hover/active styles from getting "stuck" during panel drag */
body.dragging-admin-panel .control-btn:hover,
body.dragging-admin-panel .control-btn:active {
    background: color-mix(in oklab, var(--surface) 88%, var(--text) 12%);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* match non-active draggable */
}

/* Modal shell */
.modal-panel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 20px 40px color-mix(in oklab, var(--shadow-color, rgba(2,6,23,.35)) 100%, transparent);
  padding: 1.5rem;
}
.modal-panel h3, .modal-panel label { color: var(--text); }

/* Modal fields */
.modal-panel input,
.modal-panel textarea,
.modal-panel select {
  width: 100%;
  padding: 0.6rem;
  background: color-mix(in oklab, var(--surface) 88%, var(--text) 12%);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--border) 85%, var(--text) 15%);
  border-radius: 0.55rem;
  box-shadow: inset 0 1px 2px color-mix(in oklab, var(--text) 12%, transparent);
}
.modal-panel input::placeholder,
.modal-panel textarea::placeholder { color: color-mix(in oklab, var(--text) 55%, transparent); }
.modal-panel input:focus,
.modal-panel textarea:focus,
.modal-panel select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
.modal-panel select option { background: var(--surface); color: var(--text); }

/* Icon Finder popover */
.icon-finder-wrapper { position: relative; }
.icon-finder-shell { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; gap: .5rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); box-shadow: 0 20px 30px color-mix(in oklab, var(--shadow-color, rgba(15,23,42,.18)) 100%, transparent); padding: .75rem; z-index: 30; }
.icon-finder-shell.open { display: flex; }
.icon-finder-results { flex: 0 0 140px; background: color-mix(in oklab, var(--surface) 85%, var(--text) 15%); border-right: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; max-height: 260px; overflow-y: auto; }
.icon-finder-result { background: color-mix(in oklab, var(--surface) 92%, var(--text) 8%); border: 1px solid transparent; border-radius: .5rem; padding: .45rem; flex: 1 0 56px; display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--text); }
.icon-finder-result:hover { border-color: var(--accent); }
.icon-result-image { width: 32px; height: 32px; background-size: contain; background-position: center; background-repeat: no-repeat; display: block; }
.icon-links li a { color: var(--accent); font-weight: 600; text-decoration: none; }
.icon-links li a:hover { text-decoration: underline; }

/* Modal header and actions */
#admin-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.75rem;
}

#admin-modal-content .modal-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#admin-modal-close-btn {
    font-size: 2rem;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.2s;
}
#admin-modal-close-btn:hover {
    color: #1f2937;
    background: #f3f4f6;
}

#admin-modal-content .flex.justify-end {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

#admin-modal-cancel-btn, #admin-modal-save-btn {
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    transition: background 0.2s;
}
#admin-modal-cancel-btn[title], #admin-modal-save-btn[title] {
    outline: none;
}

/* Fix overlapping chips/tags/buttons in modal */
#admin-modal-form .chip-row, #admin-modal-form .tag-row, #admin-modal-form .button-row {
    position: static !important;
    z-index: 1 !important;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#admin-modal-form .chip, #admin-modal-form .tag, #admin-modal-form .modal-inline-btn {
    z-index: 1 !important;
    position: static !important;
    margin-bottom: 0 !important;
}
/* Fix admin modal chips/buttons overlapping UI */
#admin-modal-form .chip-row, #admin-modal-form .tag-row, #admin-modal-form .modal-inline-btn {
    position: static !important;
    z-index: auto !important;
    margin-bottom: 1.25rem !important;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
#admin-modal-form .chip, #admin-modal-form .tag, #admin-modal-form .modal-inline-btn {
    position: static !important;
    z-index: auto !important;
    margin-bottom: 0 !important;
}
/* Ensure modal fields have enough spacing below chips/tags/buttons */
#admin-modal-form input, #admin-modal-form textarea, #admin-modal-form select {
    margin-top: 0.5rem;
}