:root{
  --bg:#020617;
  --card:#0f172a;
  --border:#1e293b;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#2563eb;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial;
  background:linear-gradient(180deg,#020617,#0f172a);
  color:var(--text);
}

/* LOGIN */
.auth{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.auth-glass{
  width:360px;
  padding:48px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(24px);
  text-align:center;
}
.logo{
  width:56px;
  height:56px;
  margin:auto;
  border-radius:14px;
  background:linear-gradient(135deg,#22c55e,#4ade80);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}
.field{
  position:relative;
  margin:18px 0;
}
.field input{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
}
.field label{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  transition:.25s;
  pointer-events:none;
}
.field input:focus+label,
.field input:valid+label{
  top:-6px;
  font-size:11px;
  background:#020617;
  padding:0 6px;
}

/* BUTTONS */
button{
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
button.primary{
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  color:white;
  border:none;
}
button.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
button.full{width:100%}
.dashboard-subrow{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #94a3b8;
}

.context{
  opacity: 0.9;
}

.live-status{
  color: #22c55e;
  font-weight: 600;
}


.hint{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  display:block;
}

/* DASHBOARD */
.hidden{display:none}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 40px;
  border-bottom:1px solid var(--border);
}
.subtitle{font-size:13px;color:var(--muted)}

.admin-bar{
  padding:16px 40px;
  display:flex;
  justify-content:flex-end;
}

.role{
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
}
.staff{background:#1e293b}
.admin{background:var(--success);color:#022c22}

/* METRICS */
.metrics{
  padding:0 40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.metric{
  background:var(--card);
  padding:20px;
  border-radius:14px;
  border:1px solid var(--border);
}
.metric h3{font-size:30px;margin:6px 0}
.success h3{color:var(--success)}
.warning h3{color:var(--warning)}
.danger h3{color:var(--danger)}

/* CONTENT */
.content{
  padding:30px 40px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:24px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
}
#ltMap{
  height:380px;
  border-radius:12px;
}

/* ADMIN */
.admin-panel{
  display:none;
  margin-bottom:20px;
}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:14px;
}
.admin-panel input{
  padding:12px;
  border-radius:10px;
  background:#020617;
  border:1px solid var(--border);
  color:var(--text);
}

/* TABLE */
table{width:100%;border-collapse:collapse}
th, td{
  padding:12px;
  border-bottom:1px solid var(--border);
  text-align:center;
  vertical-align: middle; 
}
.full{color:var(--danger)}
.half{color:var(--warning)}
.empty{color:var(--success)}
.offline {
  color: #cbd5e1;
  background: rgba(71, 85, 105, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.25);

  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;

  display: inline-flex;        /* important */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  min-width: 90px;
}


/* ===== STATUS PILL (ONLY ONCE) ===== */
td .status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.5px;
  border:1px solid transparent;
}

/* EMPTY — GREEN */
td .status-pill.empty{
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  border-color: rgba(34,197,94,0.35);
}

/* HALF — YELLOW */
td .status-pill.half{
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.35);
}

/* FULL — RED */
td .status-pill.full{
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-color: rgba(239,68,68,0.35);
}

/* OFFLINE — GRAY */
td .status-pill.offline{
  background: rgba(148,163,184,0.15);
  color: #94a3b8;
  border-color: rgba(148,163,184,0.35);
}

/* Dot */
td .status-pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
td .status-pill.empty .dot{ background:#22c55e; }
td .status-pill.half  .dot{ background:#f59e0b; }
td .status-pill.full  .dot{ background:#ef4444; }
td .status-pill.offline .dot{ background:#94a3b8; }




tr.offline-row{
  opacity:0.72;
}

tr.offline-row td{
  color:#cbd5e1;
}

/* Modal OFFLINE badge */
.modal-status-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.6px;

  background:rgba(71,85,105,0.22);
  border:1px solid rgba(148,163,184,0.28);
  color:#e2e8f0;
}
.modal-status-pill .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,0.14);
}



footer{
  text-align:center;
  padding:20px;
  color:var(--muted);
}
/* OVERLAY BACKGROUND */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(6px);
  z-index: 9000;
  transition: opacity 0.3s ease;
}


.bin-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:420px;
  padding:32px;
  background:rgba(15,23,42,.95);
  border-radius:18px;
  border:1px solid #1e293b;
  z-index:9500;   /* 👈 RAISED */
}


.bin-modal.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
}

.bin-modal:hover {
  box-shadow: 0 40px 100px rgba(0,0,0,.8);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: #94a3b8;
  cursor: pointer;
}

.modal-loc {
  color: #94a3b8;
  margin-bottom: 24px;
}

.modal-bar {
  height: 14px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.modal-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.modal-status {
  font-size: 18px;
  font-weight: 600;
}
/* ADD BIN MODAL INPUTS */
.modal-input,
.modal-grid input {
  width: 100%;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: rgba(2,6,23,.8);
  color: #e5e7eb;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.danger-btn{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:white;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-weight:600;
  cursor:pointer;
}

.modal-warning{
  color:#fca5a5;
  font-size:14px;
  margin-bottom:16px;
}
/* TOAST */
.toast{
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: rgba(15,23,42,.95);
  border: 1px solid #1e293b;
  padding: 16px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  z-index: 9999;
  animation: slideIn .3s ease;
}

.toast.hidden{
  display: none;
}

.toast-btn{
  background: none;
  border: none;
  color: #38bdf8;
  font-weight: 600;
  cursor: pointer;
}

@keyframes slideIn{
  from{
    transform: translateY(20px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}


.delete-btn {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
}

.delete-btn:hover {
  transform: scale(1.2);
}
/* FULL BIN ALERT PANEL */
.alert-card {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 340px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  color: #f8fafc;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  z-index: 9999;
  animation: alertSlideIn 0.35s ease-out;
}

.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-icon {
  font-size: 20px;
  margin-right: 8px;
}

.alert-title {
  font-weight: 600;
  font-size: 16px;
  flex: 1;
}

.alert-close {
  background: none;
  border: none;
  color: #cbd5f5;
  font-size: 18px;
  cursor: pointer;
}

.alert-subtitle {
  margin: 10px 0;
  font-size: 13px;
  color: #cbd5f5;
}

.alert-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.alert-list li {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(30, 41, 59, 0.7);
  border-radius: 10px;
  font-size: 13px;
}

.alert-action {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.alert-action:hover {
  opacity: 0.9;
}

@keyframes alertSlideIn {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* allow clicking the map while picking a location */
.overlay.allow-map-click {
  pointer-events: none;
}

/* MAP PICKER MODAL */
.bin-modal.map-pick{
  width: 720px;
  max-width: 92vw;
}

.pick-map{
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e293b;
  margin-top: 10px;
}

/* Leaflet needs explicit height */
#pickMap{
  height: 420px;
  width: 100%;
}

.map-pick-actions{
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

#mapPickOverlay { z-index: 9800; }
#mapPickModal   { z-index: 9900; }

/* Buttons row in bin modal */
#binModal .modal-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

#binModal .modal-actions button{
  width: 100%;
  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

#binModal .modal-actions button:active{
  transform: translateY(1px) scale(0.99);
}

/* Make Direction look premium */
#binModal .modal-actions .primary{
  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  border: 1px solid rgba(56,189,248,0.25);
  color: white;
  box-shadow: 0 18px 36px rgba(37,99,235,0.20);
}
#binModal .modal-actions .primary:hover{
  filter: brightness(1.06);
  box-shadow: 0 22px 44px rgba(37,99,235,0.28);
}

/* Delete: professional but not too loud */
#binModal .modal-actions .danger-btn{
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid rgba(239,68,68,0.25);
  color: white;
  box-shadow: 0 18px 36px rgba(239,68,68,0.14);
}
#binModal .modal-actions .danger-btn:hover{
  filter: brightness(1.05);
  box-shadow: 0 22px 44px rgba(239,68,68,0.22);
}

/* Small screens: stack buttons */
@media (max-width: 420px){
  #binModal .modal-actions{
    grid-template-columns: 1fr;
  }
}