/* Steuerkanzlei Ilka Seidel — Admin-Bereich (Webseite verwalten) */

/* Defensive: make sure the [hidden] attribute always wins, even against
   classes below that set their own `display` (e.g. display:flex) on the
   same element — otherwise a same-specificity class rule can silently
   defeat [hidden] and leave the element visible. */
[hidden]{ display:none !important; }

body.admin-body{ background: var(--bg); min-height:100vh; margin:0; }

/* ================= Login-Bildschirm ================= */
.auth-screen{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem; padding:2.5rem 20px;
}
.auth-branding{ display:flex; align-items:center; gap:12px; }
.auth-branding img{ height:46px; width:auto; border-radius:6px; }
.auth-branding strong{ display:block; font-size:1.05rem; color: var(--blue-darker); }
.auth-branding span{ display:block; font-size:0.78rem; color: var(--text-faint); }

.auth-back-link{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:0.88rem; color: var(--text-soft);
}
.auth-back-link svg{ width:14px; height:14px; }
.auth-back-link:hover{ color: var(--blue); text-decoration:none; }

.admin-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:1.8rem 2rem; margin-bottom:1.6rem;
}
.admin-card h2{ margin-top:0; font-size:1.2rem; }
.admin-card-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.admin-card-head h2{ margin:0; }

.admin-steps{ padding-left:1.2rem; color: var(--text-soft); display:flex; flex-direction:column; gap:0.6rem; }
.admin-steps li{ padding-left:0.2rem; }
.admin-steps code{ background: var(--blue-lighter); padding:0.1em 0.4em; border-radius:4px; font-size:0.9em; }

.auth-card{ max-width:420px; width:100%; margin:0; text-align:center; }
.auth-card .icon-badge{
  width:56px; height:56px; border-radius:50%; background: var(--blue-light); color: var(--blue);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
}
.auth-card .icon-badge svg{ width:26px; height:26px; }
.auth-card h2{ margin-top:0; }
.auth-card .field{ text-align:left; }
.auth-error{ background:#fdecec; border:1px solid #f3c6c6; color:#a32020; border-radius: var(--radius-sm); padding:0.7em 1em; font-size:0.88rem; margin-bottom:1rem; text-align:left; }
.auth-error:empty{ display:none; }
.auth-reset{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--border); font-size:0.8rem; color: var(--text-faint); text-align:left; }
.auth-reset code{ background: var(--blue-lighter); padding:0.1em 0.4em; border-radius:4px; }

/* ================= App-Shell (Sidebar + Hauptbereich) ================= */
.admin-app-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:252px; flex:none; background: var(--blue-darker); color:#c9d6f2;
  display:flex; flex-direction:column; padding:1.6rem 1.1rem; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; margin-bottom:2rem; padding:0 0.4rem; }
.sidebar-brand img{ height:38px; width:auto; border-radius:5px; flex:none; }
.sidebar-brand strong{ display:block; color:#fff; font-size:0.92rem; line-height:1.3; }
.sidebar-brand span{ display:block; font-size:0.72rem; color:#93a8d6; }

.sidebar-nav{ display:flex; flex-direction:column; gap:0.25rem; flex:1; }
.sidebar-link{
  display:flex; align-items:center; gap:11px; width:100%; background:none; border:none; border-radius:8px;
  padding:0.72em 0.9em; font-size:0.9rem; font-weight:600; color:#c9d6f2; cursor:pointer; text-align:left;
}
.sidebar-link svg{ width:17px; height:17px; flex:none; opacity:0.8; }
.sidebar-link:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.sidebar-link.active{ background: var(--blue); color:#fff; }
.sidebar-link.active svg{ opacity:1; }

.sidebar-foot{
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,0.16);
  display:flex; flex-direction:column; gap:0.8rem;
}
.sidebar-back-link{ display:flex; align-items:center; gap:8px; font-size:0.84rem; font-weight:600; color:#93a8d6; padding:0 0.4rem; }
.sidebar-back-link svg{ width:14px; height:14px; }
.sidebar-back-link:hover{ color:#fff; text-decoration:none; }

.sidebar-user{ display:flex; align-items:center; gap:9px; padding:0 0.4rem; min-width:0; }
.sidebar-user span:not(.admin-user-badge){
  font-weight:700; color:#fff; font-size:0.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin-user-badge{
  width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.14); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.admin-user-badge svg{ width:14px; height:14px; }

.sidebar-logout-btn.btn-outline{
  width:100%; justify-content:center; background:transparent; border-color: rgba(255,255,255,0.35); color:#fff;
}
.sidebar-logout-btn.btn-outline:hover{ background: rgba(255,255,255,0.14); color:#fff; border-color: rgba(255,255,255,0.55); }

.sidebar-scrim{ position:fixed; inset:0; background: rgba(13,42,99,0.5); z-index:150; }

.admin-mobile-bar{
  display:none; align-items:center; gap:12px; background:#fff; border-bottom:1px solid var(--border);
  padding:0.85rem 1.2rem; position:sticky; top:0; z-index:120;
}
.admin-mobile-bar strong{ font-size:0.95rem; color: var(--text); }
.admin-mobile-bar .nav-toggle{ display:flex; }

.admin-main{ flex:1; min-width:0; }
.admin-main-inner{ max-width:1000px; margin:0 auto; padding:2.2rem 2.4rem 4rem; }

.admin-main-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.5rem; }
.admin-main-head h1{ margin:0; font-size:1.55rem; }

/* Safety net: any bare icon dropped directly into a .btn (no dedicated
   wrapper/class of its own) must never render at its unsized SVG default —
   pin it to a sensible icon size and stop it from being a flex item that can
   grow. */
.btn svg{ width:16px; height:16px; flex:none; }
.sidebar-logout-btn svg{ width:15px; height:15px; }

.admin-toolbar{ display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; }
.file-status{ margin:0.8rem 0 0; font-size:0.85rem; color: var(--text-faint); }
.file-status:empty{ display:none; }

.admin-tab-panel{ display:none; }
.admin-tab-panel.active{ display:block; }

/* Übersicht: KPI-Kacheln */
.admin-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.6rem; }
.admin-stat-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.3rem;
}
.admin-stat-icon{
  width:38px; height:38px; border-radius:10px; background: var(--blue-light); color: var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:0.3rem;
}
.admin-stat-icon svg{ width:19px; height:19px; }
.admin-stat-card strong{ font-size:1.9rem; font-weight:800; color: var(--blue-darker); line-height:1; font-variant-numeric: tabular-nums; }
.admin-stat-card > span:last-child{ font-size:0.85rem; color: var(--text-soft); font-weight:600; }

@media (max-width:900px){ .admin-stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .admin-stat-grid{ grid-template-columns:1fr; } }

.admin-preview-link{
  display:inline-flex; align-items:center; gap:5px; font-size:0.82rem; color: var(--text-faint); white-space:nowrap;
}
.admin-preview-link:hover{ color: var(--blue); text-decoration:underline; }
.admin-preview-link svg{ width:14px; height:14px; }

.admin-entry-list{ display:flex; flex-direction:column; gap:0.9rem; }
.admin-entry-empty{ color: var(--text-faint); font-size:0.92rem; }
.admin-entry-row{
  display:flex; align-items:flex-start; gap:1rem; border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:0.9rem 1.1rem;
}
.admin-entry-row.is-inactive{ background: var(--bg); opacity:0.75; }
.admin-entry-main{ flex:1; min-width:0; }
.admin-entry-main h4{ margin:0 0 0.2rem; font-size:1rem; }
.admin-entry-main .admin-entry-meta{ font-size:0.8rem; color: var(--text-faint); }
.admin-entry-actions{ display:flex; align-items:center; gap:0.6rem; flex:none; }
.admin-entry-actions button{
  background:none; border:1px solid var(--border); border-radius: var(--radius-sm); width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; color: var(--text-soft); cursor:pointer;
}
.admin-entry-actions button:hover{ color: var(--blue); border-color: var(--blue); }
.admin-entry-actions button.danger:hover{ color:#c0392b; border-color:#c0392b; }
.admin-entry-actions svg{ width:16px; height:16px; }

.admin-entry-tag{
  display:inline-block; margin-left:0.5rem; font-size:0.72rem; font-weight:700; color: var(--blue);
  background: var(--blue-light); padding:0.15em 0.6em; border-radius:999px; vertical-align:middle;
}

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; inset:0; background: var(--border); border-radius:999px; cursor:pointer; transition: background .15s ease;
}
.switch .slider::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%;
  transition: transform .15s ease; box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.switch input:checked + .slider{ background: var(--blue); }
.switch input:checked + .slider::before{ transform: translateX(18px); }
.switch input:focus-visible + .slider{ outline:2px solid var(--blue); outline-offset:2px; }

.job-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .job-form-grid{ grid-template-columns:1fr; } }
.field-inline{ display:flex; align-items:center; gap:0.6rem; margin-bottom:1.1rem; }
.field-inline label{ font-size:0.9rem; font-weight:600; color: var(--text); }

#pageLinkPreview{ display:block; margin-top:0.3rem; word-break:break-all; }
#pageLinkPreview code{ background: var(--blue-lighter); padding:0.1em 0.4em; border-radius:4px; }

/* ================= Modale (Stelle/Beitrag/Seite/Konto anlegen) ================= */
.admin-modal-backdrop{
  position:fixed; inset:0; background: rgba(13,42,99,0.5); z-index:300;
  display:flex; align-items:flex-start; justify-content:center; padding:3.2rem 1.2rem; overflow-y:auto;
}
.admin-modal{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding:2rem 2.2rem; max-width:560px; width:100%;
}
.admin-modal h2{ margin-top:0; }
@media (max-width:600px){ .admin-modal{ padding:1.5rem; } }

/* ================= Responsive: Sidebar wird zur Schublade ================= */
@media (max-width:960px){
  .admin-sidebar{
    position:fixed; top:0; left:0; z-index:200; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-lg);
  }
  .admin-sidebar.open{ transform: translateX(0); }
  .admin-mobile-bar{ display:flex; }
  .admin-main-inner{ padding:1.6rem 1.2rem 3rem; }
}

@media (max-width:600px){
  .admin-card{ padding:1.4rem 1.2rem; }
}

/* ---- Wartungsmodus ---- */
.sidebar-badge{ margin-left:auto; background:#b3261e; color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:.05em; padding:0.15em 0.55em; border-radius:999px; }
.maintenance-state{ font-size:0.8rem; font-weight:700; padding:0.3em 0.8em; border-radius:999px; background:#e7ebe8; color:#3b4a40; }
.maintenance-state.on{ background:#fde7e5; color:#b3261e; }
.maintenance-alert{ display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; margin-bottom:1.6rem; border-color:#e8b4ae; background:#fdf1ef; }
.maintenance-alert .btn{ margin-left:auto; }
.bypass-row{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.bypass-row input{ flex:1 1 260px; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:0.85rem; }