/* map.css - styling peta parkir sederhana */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --free: #e6f7e9;
  --occupied: #ffdfe1;
  --reserved: #fff5cc;
  --border: #e2e8f0;
  --accent: #2b6dff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Arial,sans-serif; background:var(--bg); color:#101827;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(90deg,#5a73ff,#c42bfc);color:white;
}
.title{font-weight:700}
.actions{display:flex;gap:8px;align-items:center}
.actions input[type=file]{color:transparent}
.actions button{background:white;color:#222;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.actions .uploader-link{color:white;opacity:0.9;text-decoration:underline;font-size:13px}

/* layout main */
.container{max-width:1100px;margin:20px auto;padding:12px}
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.controls input[type=number]{width:70px;padding:6px;border-radius:6px;border:1px solid var(--border)}
.controls button{background:var(--accent);color:white;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
.hint{color:#566270;font-size:13px;margin-left:8px}

/* map wrap */
.map-wrap{
  background:var(--card);
  border:1px solid var(--border);
  padding:12px;
  border-radius:10px;
  min-height:200px;
  overflow:auto;
}

a{
    text-decoration: none;
    color: black;
}

/* grid container will be display:grid */
.parking-grid{
  display:grid;
  gap:8px;
  align-items:stretch;
}

/* cell */
.slot{
  border-radius:8px;
  border:1px solid rgba(14,18,36,0.06);
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:#111827;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, box-shadow .12s;
  padding:8px;
}
.slot:active{transform:scale(.995)}
.slot.free{background:var(--free);box-shadow:0 4px 10px rgba(66, 122, 62, 0.06)}
.slot.occupied{background:var(--occupied);box-shadow:0 4px 10px rgba(200, 30, 45, 0.06)}
.slot.reserved{background:var(--reserved);box-shadow:0 4px 8px rgba(204,160,10,0.06)}

/* small label inside */
.slot .label{font-size:14px}
.slot .meta{font-size:11px;color:#4b5563;margin-top:6px}

/* legend */
.legend{display:flex;gap:12px;margin-top:12px;align-items:center}
.legend-item{display:flex;gap:8px;align-items:center;font-size:13px;color:#374151}
.legend-item .cell{width:18px;height:18px;border-radius:4px;border:1px solid rgba(10,20,30,0.04)}
.legend-item .cell.free{background:var(--free)}
.legend-item .cell.occupied{background:var(--occupied)}
.legend-item .cell.reserved{background:var(--reserved)}

/* responsive */
@media (max-width:750px){
  .controls{gap:8px}
  .actions button, .controls button{padding:7px 8px}
}