/* ============================================================
   REEON – admin.css
   Inline Edit Mode: Overlays, Edit Bar, Panels, Toast
   ============================================================ */


/* ─── OVERLAYS ───────────────────────────────────────────────── */

.adm-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.adm-overlay.open { display: flex; }


/* ─── LOGIN BOX ──────────────────────────────────────────────── */

.adm-login-box {
    background: #141414; border: 1px solid #2a2a2a;
    border-radius: 12px; padding: 36px; width: 300px;
    display: flex; flex-direction: column; gap: 14px;
}
.adm-login-box h3 {
    color: #fff; font-size: 11px;
    letter-spacing: 0.15em; text-transform: uppercase;
}
.adm-login-box input {
    background: #1e1e1e; border: 1px solid #333; border-radius: 6px;
    color: #fff; font-size: 14px; padding: 10px 14px;
    outline: none; transition: border-color 0.2s; width: 100%;
}
.adm-login-box input:focus { border-color: #4cb3ff; }
.adm-login-box button {
    background: #4cb3ff; border: none; border-radius: 6px; color: #000;
    cursor: pointer; font-size: 12px; font-weight: 700;
    letter-spacing: 0.1em; padding: 11px; text-transform: uppercase;
}
.adm-login-error { color: #ff5555; font-size: 12px; display: none; }


/* ─── EDIT BAR ───────────────────────────────────────────────── */

:root { --edit-bar-h: 48px; }

#edit-bar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--edit-bar-h);
    background: #141414; border-bottom: 1px solid #252525;
    padding: 0 20px;
    align-items: center; gap: 12px;
    z-index: 110;
}
#edit-bar.open { display: flex; }

.edit-label-container {
    display: flex;
    flex-wrap: wrap;
}

.edit-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #11ee67; flex-shrink: 0;
    animation: editPulse 1.5s infinite;
}
@keyframes editPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

#edit-bar:has(.edit-label-unsaved) .edit-dot { background: #ff4940; }
#edit-bar:has(.edit-label-draft)   .edit-dot { background: #ff8840; }

.edit-label, .edit-label-draft, .edit-label-unsaved  {
    margin-right: 10px;
    color: #4cb3ff; font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.edit-label-draft {
    color: #ff8840;
}
.edit-label-unsaved {
    color: #ff4940;
}
.edit-bar-right {
    margin-left: auto;
    display: flex; gap: 8px;
}


/* ─── ADMIN BUTTONS ──────────────────────────────────────────── */

.btn-p-sm {
    background: #4cb3ff; border: none; border-radius: 6px;
    color: #000; cursor: pointer; font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; padding: 7px 14px; text-transform: uppercase;
    transition: opacity 0.15s; white-space: nowrap; transition: all var(--transition-default);
}
.btn-p-sm:hover { opacity: 0.7; }

.btn-s-sm {
    background: none; border: 1px solid #2a2a2a; border-radius: 6px;
    color: #555; cursor: pointer; font-size: 11px;
    letter-spacing: 0.08em; padding: 6px 12px; text-transform: uppercase;
    white-space: nowrap; transition: all var(--transition-default);
}
#btn-save-draft {
    color: #939393;
    background-color: #343434;
    border: 1px solid #343434;
}
#btn-save-draft:hover { background-color: #272727;; }
.btn-s-sm:hover { border-color: #444; color: #888; }


/* ─── EDIT PANEL ─────────────────────────────────────────────── */

.adm-panel {
    background: #141414; border: 1px solid #2a2a2a;
    border-radius: 12px; padding: 32px;
    width: 580px; max-width: calc(100vw - 40px);
    display: flex; flex-direction: column; gap: 12px;
    max-height: 85vh; overflow-y: auto;
}
.adm-panel h3 {
    color: #4cb3ff; font-size: 11px;
    letter-spacing: 0.15em; text-transform: uppercase;
}

.adm-row-grid {
    display: grid;
    grid-template-columns: 22px 1fr 2fr;
    gap: 10px; align-items: end;
}
.adm-row-num {
    color: #333; font-size: 11px;
    text-align: center; padding-bottom: 10px;
}
.adm-field { display: flex; flex-direction: column; gap: 5px; }
.adm-field label {
    color: #555; font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.adm-field input {
    background: #1e1e1e; border: 1px solid #2a2a2a;
    border-radius: 6px; color: #fff; font-size: 13px;
    padding: 9px 12px; outline: none;
    transition: border-color 0.2s; width: 100%;
}
.adm-field input:focus { border-color: #4cb3ff; }
.adm-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-divider { height: 1px; background: #2a2a2a; margin: 6px 0; }
.adm-btn-row { display: flex; gap: 10px; margin-top: 4px; }
.adm-btn-row .btn-s-sm,
.adm-btn-row .btn-p-sm { flex: 1; padding: 11px; }


/* ─── TOAST ──────────────────────────────────────────────────── */

#adm-toast {
    position: fixed; bottom: 50px; left: 50px;
    background: #11ee67; border: 1px solid #2a2a2a;
    border-radius: 8px; padding: 12px 18px;
    font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #111111; pointer-events: none;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 300;
    font-weight: var(--weight-black);
}
#adm-toast.show { opacity: 1; transform: translateY(0); }
#adm-toast.error { color: #ff5555; border-color: #3a1a1a; }


/* ─── EDIT MODE STATES ───────────────────────────────────────── */

/* Navbar unter die Edit Bar schieben */
body.edit .nav {
    top: var(--edit-bar-h);
}

/* Content um Edit Bar Höhe nach unten verschieben */
body.edit {
    padding-top: var(--edit-bar-h);
}


/* ─── NAV EDIT HINTS ─────────────────────────────────────────── */

/* Anklickbare Nav-Elemente im Edit Mode */
body.edit .nav__link {
    position: relative;
    cursor: pointer;
    outline: 1px dashed rgba(76, 179, 255, 0.3);
    outline-offset: 6px;
    border-radius: 2px;
}

body.edit .nav__subscribe {
    cursor: pointer;
    outline: 1px dashed rgba(76, 179, 255, 0.3);
    outline-offset: 6px;
    border-radius: 50%;
}

body.edit .nav__link:hover,
body.edit .nav__subscribe:hover {
    outline: 1px dashed rgba(76, 179, 255, 0.85);
    outline-offset: 6px;
}

/* Stift-Icon oben rechts auf jedem Nav Link */
body.edit .nav__link::after {
    content: '';
    position: absolute;
    top: -12px; right: -14px;
    width: 15px; height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234cb3ff' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    opacity: 0.65;
}