/* Admin Cockpit – glossy light theme (UI only, no logic) */
:root{
  --bg: #f3f5fb;
  --bg2: #eef2ff;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #52637a;
  --line: rgba(10,18,32,0.12);
  --primary: #2563eb;
  --primary2: #1d4ed8;
  --danger: #dc2626;
  --success: #16a34a;
  --shadow: 0 12px 36px rgba(2, 6, 23, 0.10);
  --shadow2: 0 18px 60px rgba(2, 6, 23, 0.16);
  --radius: 18px;
  --radius2: 22px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background: radial-gradient(1200px 800px at 20% -20%, var(--bg2), var(--bg)), var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===============
   Shell layout
   =============== */
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns: 280px 1fr;
}

/* Backdrop for mobile off-canvas menu (HTML uses id="backdrop" with class "backdrop") */
.sb-backdrop,
.backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(2,6,23,0.45);
  backdrop-filter: blur(6px);
  z-index:30;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:16px;
  border-right:1px solid rgba(10,18,32,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.74));
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

.sb-head{
  flex:0 0 auto;
}

.sb-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border:1px solid rgba(10,18,32,0.10);
  background:rgba(255,255,255,0.72);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
}
.sb-logo{
  width:40px;
  height:40px;
  border-radius:14px;
  background: radial-gradient(20px 20px at 30% 25%, rgba(255,255,255,0.95), rgba(255,255,255,0.25)), rgba(37,99,235,0.24);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(37,99,235,0.25);
  font-weight:900;
  color:#1847b8;
}

.sb-dot{
  width:10px; height:10px;
  border-radius:999px;
  background:var(--primary);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.12);
}
.sb-title{ font-weight:850; letter-spacing:0.2px; }
.sb-sub{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:2px; }

/* NEW: dedicated scroll container between header and footer */
.sb-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  margin-top:14px;
  padding-right:6px;
  padding-bottom:8px;
}

.sb-scroll::-webkit-scrollbar{
  width:8px;
}
.sb-scroll::-webkit-scrollbar-thumb{
  background:rgba(82,99,122,0.24);
  border-radius:999px;
}
.sb-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.sb-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:min-content;
}

.sb-group{
  border:1px solid rgba(10,18,32,0.08);
  background:rgba(255,255,255,0.50);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.04);
}

.sb-group[open]{
  background:rgba(255,255,255,0.70);
  border-color:rgba(37,99,235,0.16);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.07);
}

.sb-group__summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
}
.sb-group__summary::-webkit-details-marker{
  display:none;
}
.sb-group__summary:hover{
  background:rgba(15,23,42,0.03);
}

.sb-group__metaWrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.sb-group__icon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,0.10);
  border:1px solid rgba(37,99,235,0.14);
  color:#1746b4;
  font-size:15px;
  flex:0 0 auto;
}

.sb-group__meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sb-group__title{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.02em;
  color:var(--text);
}
.sb-group__hint{
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
}

.sb-group__chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(11,18,32,0.42);
  border-bottom:2px solid rgba(11,18,32,0.42);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex:0 0 auto;
  margin-right:4px;
}
.sb-group[open] .sb-group__chev{
  transform: rotate(225deg);
}

.sb-group__items{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 10px 10px 10px;
}

.sb-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--text);
  background:transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.sb-link:hover{
  text-decoration:none;
  background:rgba(15,23,42,0.04);
  border-color:rgba(10,18,32,0.08);
}
.sb-link.is-active{
  background: rgba(37,99,235,0.12);
  border-color: rgba(37,99,235,0.22);
}

.sb-ico{
  width:24px;
  height:24px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(10,18,32,0.08);
  color:#223047;
}

.sb-link.is-active .sb-ico{
  background:rgba(37,99,235,0.12);
  border-color:rgba(37,99,235,0.18);
  color:#1746b4;
}

.sb-sep{ height:1px; margin:10px 6px; background:rgba(10,18,32,0.10); }
.sb-section{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding:6px 10px 2px; }
.sb-pill{
  margin-left:auto;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,0.18);
  background: rgba(37,99,235,0.10);
  color:#0b3aa6;
}

.sb-foot{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(10,18,32,0.10);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.sb-mini{
  font-size:12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(10,18,32,0.12);
  background:rgba(255,255,255,0.70);
  color:var(--text);
}
.sb-mini:hover{ text-decoration:none; background:#fff; }
.sb-mini.danger{ border-color: rgba(220,38,38,0.22); background: rgba(220,38,38,0.08); }

.main{ min-width:0; }

.wrap{ max-width:1200px; margin:0 auto; padding:18px 18px 28px; }

/* Topbar inside main */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  background: rgba(255,255,255,0.72);
  border-bottom:1px solid rgba(10,18,32,0.10);
  backdrop-filter: blur(10px);
}

/* Header markup helpers (layout_header.php) */
.top-title{ min-width:0; }
.top-h1{ font-weight:860; letter-spacing:0.2px; line-height:1.1; }
.top-h2{ color:var(--muted); font-size:12px; margin-top:2px; font-family:var(--mono); }
.top-actions{ display:flex; gap:10px; align-items:center; }

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(10,18,32,0.12);
  background: rgba(255,255,255,0.70);
  color:var(--primary);
  box-shadow: 0 8px 24px rgba(2,6,23,0.08);
  white-space:nowrap;
}
.pill:hover{ text-decoration:none; background:#fff; }

/* Hamburger (mobile nav trigger)
   In the previous CSS it was called .iconbtn; header uses .burger.
*/
.burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(10,18,32,0.12);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 8px 24px rgba(2,6,23,0.08);
  cursor:pointer;
  padding:10px;
}
.burger:hover{ background:#fff; }
.burger span{
  display:block;
  height:2px;
  background: rgba(11,18,32,0.68);
  border-radius:999px;
}
.burger span + span{ margin-top:6px; }

/* keep legacy class in case other pages use it */
.iconbtn{
  display:none;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(10,18,32,0.12);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 8px 24px rgba(2,6,23,0.08);
  cursor:pointer;
}
.iconbtn:hover{ background:#fff; }

@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(320px, 86vw);
    height:100dvh;
    max-height:100dvh;
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index:40;
    box-shadow: var(--shadow2);
  }
  .app.sb-open .sidebar{ transform: translateX(0); }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .iconbtn{ display:inline-flex; align-items:center; justify-content:center; }
  .sb-backdrop,
  .backdrop{ display:block; opacity:0; pointer-events:none; transition: opacity .22s ease; }
  .app.sb-open .sb-backdrop,
  .app.sb-open .backdrop{ opacity:1; pointer-events:auto; }
}

.grid{ display:grid; grid-template-columns: 1fr; gap:16px; margin-top:16px; }
@media (min-width: 980px){
  .grid{ grid-template-columns: 360px 1fr; align-items:start; }
}

/* Legacy header bits (used on login page) */
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand__title{ font-weight:850; letter-spacing:0.2px; }
.brand__badge{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(37,99,235,0.06); }
.nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav a{ padding:8px 10px; border-radius:10px; border:1px solid transparent; }
.nav a:hover{ border-color:var(--line); background:rgba(15,23,42,0.03); text-decoration:none; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.h1{ font-size:18px; margin:0 0 10px 0; }
.muted{ color:var(--muted); font-size:13px; }
.hr{ height:1px; background:var(--line); margin:14px 0; }

.form{ display:grid; gap:10px; }
.row{ display:grid; gap:10px; }
@media (min-width:720px){ .row.cols2{ grid-template-columns: 1fr 1fr; } }

/* Prevent grid/flex children from overflowing their cards */
.row > *{ min-width:0; }

/* Meta card is narrow in the 2-column edit layout; keep its internal rows stacked */
.grid > .card:first-child .row.cols2{ grid-template-columns: 1fr !important; }

label{ font-size:13px; color:var(--muted); }
input[type="text"], input[type="password"], input[type="url"], input[type="date"], input[type="search"], input[type="email"], input[type="number"], textarea, select{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--text);
  outline:none;
}
textarea{ min-height:180px; resize:vertical; font-family:inherit; }
input:focus, textarea:focus, select:focus{ border-color: rgba(37,99,235,0.45); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }

.btns{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background:rgba(15,23,42,0.03); color:var(--text); cursor:pointer;
  font-weight:650;
}
.btn.primary{ background:var(--primary); color:#fff; border-color:transparent; }
.btn.primary:hover{ background:var(--primary2); }
.btn.danger{ background:var(--danger); color:#fff; border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  text-align:left; padding:10px 10px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.table th{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.kbd{ font-family:var(--mono); font-size:12px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; background:rgba(15,23,42,0.03); color:var(--muted); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--muted); padding:4px 10px;
  border:1px solid var(--line); border-radius:999px; background:rgba(15,23,42,0.02);
}
.badge.ok{ background:rgba(22,163,74,0.10); border-color:rgba(22,163,74,0.25); color:#14532d; }
.badge.warn{ background:rgba(234,179,8,0.14); border-color:rgba(234,179,8,0.25); color:#713f12; }

.alert{ padding:12px 12px; border-radius:14px; border:1px solid var(--line); margin-bottom:12px; }
.alert.success{ background:rgba(22,163,74,0.10); border-color:rgba(22,163,74,0.25); }
.alert.error{ background:rgba(220,38,38,0.10); border-color:rgba(220,38,38,0.25); }

.small{ font-size:12px; color:var(--muted); }
.footer{
  margin:18px 22px 22px;
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
}
.footer .dot{ opacity:.6; }

/* Login */
.login-wrap{ max-width:520px; margin:0 auto; padding:42px 18px; }
.login-head{
  display:flex; justify-content:center;
  margin-bottom:14px;
}

/* =========================================================
   Admin Cockpit: responsive Posts-Tabelle (Index)
   - Desktop: normale Tabelle
   - Mobile: jede Zeile als "Card" mit Labels via data-label
   ========================================================= */

/* fallback: horizontal scroll for very wide tables */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* makes long content behave */
.posts-table{
  width:100%;
  table-layout:fixed;
}
.posts-table td,
.posts-table th{
  vertical-align:top;
}
.posts-table .kbd{
  max-width:100%;
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* title cell can shrink nicely */
.post-titlecell{
  min-width:0;
}

/* actions wrap nicely */
.post-actions{
  flex-wrap:wrap;
  gap:8px;
}
.post-actions .btn{
  white-space:nowrap;
}

/* MOBILE: convert table to stacked cards */
@media (max-width: 720px){
  .table-scroll{
    overflow:visible;
  }

  .posts-table{
    table-layout:auto;
  }

  .posts-table thead{
    display:none;
  }

  .posts-table,
  .posts-table tbody,
  .posts-table tr,
  .posts-table td{
    display:block;
    width:100%;
  }

  .posts-table tr{
    margin:12px 0;
    padding:12px;
    border:1px solid rgba(15,23,42,0.12);
    border-radius:14px;
    background:rgba(255,255,255,0.65);
  }

  .posts-table td{
    padding:10px 0;
    border:none;
  }

  .posts-table td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    font-weight:700;
    opacity:0.72;
    margin-bottom:6px;
  }

  .posts-table td[data-label="Titel"]::before{
    display:none;
  }

  .post-titlecell img{
    width:96px !important;
    height:62px !important;
  }

  .post-actions{
    justify-content:flex-start !important;
  }

  .posts-table .badge,
  .posts-table .kbd{
    max-width:100%;
  }
}

@media (max-width: 420px){
  .post-titlecell{
    gap:10px;
  }
  .post-titlecell img{
    width:88px !important;
    height:56px !important;
  }
  .post-actions .btn{
    width:100%;
    justify-content:center;
  }
  .post-actions form{
    width:100%;
  }
  .post-actions form .btn{
    width:100%;
  }
}