/* =========================================================
   ADMIN CSS – ISOLIERT, LESBAR, STABIL
   ========================================================= */

/* ---------- RESET / BASIS ---------- */

.admin-wrap,
.admin-wrap *{
  box-sizing: border-box;
  color: #111 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* ---------- ADMIN HAUPTFLÄCHE ---------- */
/* DAS ist der entscheidende Block */

.admin-wrap{
  position: relative;
  background: #ffffff;
  max-width: 1200px;
  margin: 48px auto 96px;
  padding: 40px;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* ---------- HEADER ---------- */

.admin-head{
  margin-bottom: 32px;
}

.admin-head h1{
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
}

.admin-head p{
  margin: 0;
  color: #555 !important;
  font-size: 15px;
}

/* ---------- GRID / KACHELN ---------- */

.admin-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}

.admin-card{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.admin-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.admin-card .icon{
  font-size: 26px;
  line-height: 1;
}

.admin-card strong{
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.admin-card span{
  font-size: 13px;
  color: #555 !important;
}

/* Highlight Card */

.admin-card.primary{
  background: linear-gradient(135deg, #4f7cff, #6366f1);
}

.admin-card.primary *{
  color: #ffffff !important;
}

/* ---------- SECTIONS ---------- */

.admin-section{
  margin-top: 48px;
}

.admin-section h2{
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
}

/* ---------- TABLE ---------- */

.table-wrap{
  overflow-x: auto;
}

.admin-table{
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.admin-table th{
  background: #f3f4f6;
  padding: 12px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: left;
  color: #111 !important;
}

.admin-table td{
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 14px;
}

.admin-table tr:hover td{
  background: #f9fafb;
}

/* ---------- STATUS ---------- */

.status{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status.booked{
  background: #dcfce7;
  color: #166534 !important;
}

.status.cancelled{
  background: #fee2e2;
  color: #991b1b !important;
}

/* ---------- BUTTONS ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #ffffff;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

.btn:hover{
  background: #f3f4f6;
}

.btn-sm{
  padding: 6px 12px;
  font-size: 12px;
}

/* ---------- EMPTY ---------- */

.empty{
  padding: 18px;
  background: #f9fafb;
  border-radius: 14px;
  color: #555 !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 720px){

  .admin-wrap{
    padding: 24px;
    margin: 32px 12px 64px;
  }

  .admin-head h1{
    font-size: 24px;
  }

}