/* public/front/css/status.css */

/* Header */
.status-header {
  background: var(--gradient);
  color: #fff;
  padding: 6rem 0 4rem;
  position: relative;
}
.page-header.status-header::after { display: none; }

/* Container */
.status-container {
  margin-top: -2.5rem;
  position: relative;
  z-index: 5;
}

/* Cards */
.status-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.status-card {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 25px -12px rgba(0,0,0,.15);
}
.status-label { color: var(--secondary); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.status-label i { color: var(--primary); }
.status-value { font-size: 1.35rem; font-weight: 800; color: var(--dark); margin-top: .35rem; }
.status-value.ok { color: #16a34a; }

/* Map */
.map-wrap {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px -12px rgba(0,0,0,.15);
  margin-bottom: 1.25rem;
}
#status-map { width: 100%; height: 520px; }
.map-legend {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #f8fafc; border-top: 1px solid var(--gray);
  padding: .6rem .8rem; font-size: .9rem; color: var(--secondary);
}
.dot { width: 10px; height: 10px; border-radius: 9999px; display: inline-block; }
.dot.green { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }

/* Table */
.probes-table {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px -12px rgba(0,0,0,.15);
}
.table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; background: var(--dark); color: #fff;
}
.table-header h2 { display: flex; gap: .6rem; align-items: center; margin: 0; font-size: 1.1rem; }
.table-header i { color: var(--primary); }
.table-header .hint { color: #a7b0bf; font-size: .9rem; }

.table-scroll { overflow: auto; max-height: 420px; }
table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: #0f172a; color: #e2e8f0; text-align: left; font-weight: 700;
  padding: .75rem .9rem;
}
tbody td { padding: .65rem .9rem; border-bottom: 1px solid #e5e7eb; color: var(--dark); }
tbody tr:hover { background: #f8fafc; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .5rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
}
.pill.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

/* Responsive */
@media (max-width: 1024px) {
  .status-cards { grid-template-columns: repeat(2, 1fr); }
  #status-map { height: 460px; }
}
@media (max-width: 640px) {
  .status-cards { grid-template-columns: 1fr; }
  #status-map { height: 380px; }
}