/* =========================================================
   Buecherkiste – Global Styles (Dark)
   ========================================================= */

/* Theme Vars */
:root{
  --bg:#0f1115;
  --panel:#151923;
  --text:#eaeef3;
  --muted:#a7b0c0;
  --line:#232937;
  --acc:#00d2ff;
  --card:#10151d;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{ max-width:1100px; margin:0 auto; padding:16px; }

a{ color:#8ad9ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   Header & Nav
   ========================================================= */
.site-header{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0f1115,#0f111500);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
}
.brand{ display:flex; align-items:center; gap:.5rem; font-size:1.6rem; margin:.2rem 0; }
.brand span{ filter:drop-shadow(0 2px 6px rgba(0,210,255,.25)); }
.brand a.brand-link{ color:inherit; text-decoration:none; }

.site-nav{ display:flex; gap:12px; align-items:center; }
.site-nav a,
.site-nav .link{
  color:#8ad9ff; text-decoration:none;
  padding:.4rem .6rem; border-radius:8px; border:1px solid transparent;
}
.site-nav a:hover{ border-color:var(--line); background:rgba(138,217,255,.08); }
.site-nav .link.danger,
.btn.danger{ background:#ff6b6b!important; color:#001015; }

/* =========================================================
   Search Box
   ========================================================= */
.search-box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin:18px 0;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
#searchForm{ display:grid; grid-template-columns:1fr auto; gap:8px; }
#q{
  padding:.8rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
}
#searchForm button{
  padding:.8rem 1rem; border:0; border-radius:10px;
  background:var(--acc); color:#001015; font-weight:700; cursor:pointer;
}
#searchForm button:hover{ filter:brightness(1.05); }
.search-meta{ color:var(--muted); font-size:.9rem; margin-top:.4rem; }

/* =========================================================
   Cards / Results Grid
   ========================================================= */
.results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px; margin:16px 0;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.card .cover{
  aspect-ratio:3/4;
  background:#0b0f16;
  display:flex; align-items:center; justify-content:center;
  color:#4a5568;
}
.card .cover img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding:12px; }
.card h3{ font-size:1.05rem; margin:.2rem 0; }
.card .authors{ color:var(--muted); font-size:.95rem; }
.card .meta{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; margin-top:6px; }

.star{
  display:inline-block; width:1rem; height:1rem;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;
  background:#ffd166;
}

/* =========================================================
   Buttons & Links
   ========================================================= */
.btn{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:10px; border:0;
  background:var(--acc); color:#001015; font-weight:700;
  text-decoration:none; cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--text); }
.link{ background:none; border:0; color:#8ad9ff; cursor:pointer; }

/* =========================================================
   Forms (Auth/CRUD)
   ========================================================= */
.auth-form label{ display:block; margin:.5rem 0 .25rem; }
.auth-form input,
.auth-form textarea{
  width:100%; padding:.6rem;
  border:1px solid var(--line);
  background:var(--card); color:var(--text);
  border-radius:8px;
}
.auth-form button{
  margin-top:.6rem; padding:.7rem 1rem;
  border:0; border-radius:10px; background:var(--acc);
  color:#001015; font-weight:700; cursor:pointer;
}
select{
  width:100%; padding:.6rem;
  border:1px solid var(--line); background:var(--card);
  color:var(--text); border-radius:8px;
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* Native dialog (falls verwendet) */
dialog{
  border:0; border-radius:12px; background:var(--panel); color:var(--text);
  padding:16px; max-width:680px;
}
dialog::backdrop{ background:rgba(0,0,0,.5); }

/* =========================================================
   Pager
   ========================================================= */
.pager{
  display:flex; align-items:center; gap:12px; justify-content:center;
  margin:12px 0 24px;
}
.pager button{
  padding:.8rem 1rem; border:0; border-radius:10px;
  background:var(--acc); color:#001015; font-weight:700; cursor:pointer;
}
.pager button[disabled]{ opacity:.65; cursor:not-allowed; }
.pager-info{ color:var(--muted); font-size:.9rem; }

/* =========================================================
   Messages / Utilities
   ========================================================= */
.msg{ padding:12px; border-radius:10px; margin:12px 0; }
.msg.ok{ background:#0a332f; color:#9ff0d1; }
.msg.err{ background:#3b1216; color:#ffc0c7; }
.row-between{ display:flex; align-items:center; justify-content:space-between; }
.hint{ color:var(--muted); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ border-top:1px solid var(--line); margin-top:24px; }
.site-footer nav{ display:flex; gap:12px; }
.site-footer a{ color:#8ad9ff; }

/* =========================================================
   Dashboard Cards
   ========================================================= */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px; margin-top:12px;
}
.card.stat .body{ display:flex; flex-direction:column; gap:8px; }
.stat-number{ font-size:2rem; font-weight:800; margin:.2rem 0; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* =========================================================
   Reviews / Voting
   ========================================================= */
.reviews .card .body .meta{ color:var(--muted); font-size:.9rem; }
.vote-form .btn{ min-width:80px; }

/* =========================================================
   Modal (Bewerten)
   ========================================================= */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:1rem;
}
.modal-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; max-width:720px; width:100%;
  padding:16px; box-shadow:0 20px 80px rgba(0,0,0,.5);
  opacity:0; transform:translateY(8px);
  animation:modalIn .18s ease-out forwards;
}
@keyframes modalIn{ to{ opacity:1; transform:none; } }
.modal h3{ margin:0 0 8px; font-size:1.25rem; }
.modal .hint{ color:var(--muted); }
.modal .grid2, .modal .grid3{ display:grid; gap:12px; }
.modal .grid2{ grid-template-columns:1fr 1fr; }
.modal .grid3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px){ .modal .grid2, .modal .grid3{ grid-template-columns:1fr; } }
.modal label{ display:block; font-weight:600; margin:8px 0 6px; }
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="search"],
.modal input:not([type]),
.modal textarea,
.modal select{
  width:100%; padding:.6rem .7rem;
  border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--text);
  outline:none; box-shadow:none;
}
.modal textarea{ resize:vertical; min-height:110px; }
.modal .actions{ display:flex; gap:8px; margin-top:10px; }
.modal .btn{ min-width:120px; cursor:pointer; }
.modal .btn.ghost{ background:transparent; border:1px solid var(--line); }
.modal .close{ position:absolute; top:10px; right:10px; border:0; background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.modal[hidden]{ display:none!important; }
body.modal-open{ overflow:hidden; }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width:820px){
  .grid2{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
}