/* Admin messages + basic app visuals */
.success {
    background: #e6ffed;
    border: 1px solid #2ecc71;
    color: #1e7e34;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    font-weight: bold;
}

.error {
    background: #ffe6e6;
    border: 1px solid #e74c3c;
    color: #a10000;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    font-weight: bold;
}

body { font-family: Arial, Helvetica, sans-serif; margin: 18px; color:#222; }
table { border-collapse: collapse; width: 100%; }
table th, table td { border: 1px solid #ddd; padding: 6px 8px; }
/* ----------------------------
  Space grid visual polish
   - keeps original HTML structure
-----------------------------*/

/* Header / top bar */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
header .left { font-weight: 600; }
header .right a { margin-left: 8px; color: #0d6efd; text-decoration:none; }
header .right a:hover { text-decoration:underline; }

/* Grid & spaces */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.space {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px;
  min-height: 70px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow .12s ease, transform .08s ease;
  text-align: center;
  font-size: 14px;
}

/* hover */
.space:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

/* states */
.space.available { border-color: #cbeed8; background: #f7fff9; }
.space.selected { border-color: #0d6efd; box-shadow: 0 0 0 4px rgba(13,110,253,0.08); background:#eef6ff; }
.space.reserved { border-color: #f5c6cb; background:#fff5f6; color:#6a0a0a; }
.space.held { border-color: #ffecb5; background:#fffdf6; }

/* label and controls */
.space .label { font-weight:600; margin-bottom:8px; }
.space .select-label { display:block; font-size:13px; color:#333; }
.space .select-label input[type="checkbox"] { transform: scale(1.15); margin-right:6px; vertical-align:middle; }

/* reserved by text + unreserve button */
.space .reserved-meta { display:block; margin-top:6px; font-size:12px; color:#7a3535; }
.space .unreserve { display:inline-block; margin-top:6px; font-size:12px; background:#fff; border:1px solid #d9534f; color:#d9534f; padding:4px 6px; border-radius:6px; cursor:pointer; text-decoration:none; }
.space .unreserve:hover { background:#d9534f; color:#fff; }

/* actions row */
.actions { margin-top:14px; display:flex; gap:8px; align-items:center; }
.actions button { padding:8px 12px; border-radius:6px; border:0; cursor:pointer; }
#reserveSelected { background:#198754; color:#fff; }
#checkoutSelected { background:#0d6efd; color:#fff; }
/* ---- Pretty polish for space grid & header ---- */

.container { max-width: 1100px; margin: 0 auto; }

/* Header */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 16px;
}
header .left { font-weight:700; font-size:16px; }
header .right { font-size:14px; }
header .right a { margin-left:10px; color:#0d6efd; text-decoration:none; }
header .right a:hover { text-decoration:underline; }

/* Grid */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

/* Space box */
.space {
  background: linear-gradient(180deg,#fff 0%, #fbfbff 100%);
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 12px;
  min-height: 88px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* nicer label */
.space .label { font-weight:700; font-size:15px; margin-bottom:8px; color:#222; }

/* control area */
.space .select-label { font-size:13px; color:#444; display:block; }
.space .select-label input { transform:scale(1.15); margin-right:6px; vertical-align:middle; }

/* hover */
.space:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(15,20,30,0.06); }

/* states - prettier */
.space.available { border-color: #d1e7dd; background: linear-gradient(180deg,#f8fffb, #f1fff6); }
.space.selected { border-color: #86b7ff; box-shadow: 0 0 0 6px rgba(13,110,253,0.06); background:#eef6ff; }
.space.reserved { border-color:#f8d7da; background: linear-gradient(180deg,#fff6f7,#fff5f7); color:#6b0b0b; }
.space.held { border-color:#fff3cd; background: linear-gradient(180deg,#fffdf6,#fffdfa); }

/* reserved-by text and unreserve */
.space .reserved-meta { font-size:12px; color:#7a2b2b; margin-top:6px; }
.space .unreserve { display:inline-block; margin-top:6px; background:transparent; border:1px solid #d9534f; color:#d9534f; padding:4px 8px; border-radius:6px; cursor:pointer; text-decoration:none; font-size:13px; }
.space .unreserve:hover { background:#d9534f; color:#fff; }

/* Actions row */
.actions { margin-top:16px; display:flex; gap:10px; justify-content:flex-end; }
.actions button { padding:8px 14px; border-radius:8px; border:0; cursor:pointer; font-weight:600; }
#reserveSelected { background:#198754; color:#fff; }
#checkoutSelected { background:#0d6efd; color:#fff; }

/* Responsive fine-tune */
@media (max-width:600px) {
  header { flex-direction:column; align-items:flex-start; gap:6px; }
  .actions { flex-direction:column; width:100%; }
  .actions button { width:100%; }
}