/* ===========
   MineMapper Pro — Mobile stylesheet
   Loaded only when (max-width: 860px)
   =========== */

/* Base + layout */
:root{
  --pad: 12px;
}
html,body{height:100%}
body{font-size:16px; line-height:1.45}
.app{
  display:grid;
  grid-template-columns: 1fr;     /* collapse to single column */
  min-height:100vh;
}

/* Sidebar becomes a top block with horizontal scroll chips */
.sidebar{
  position:sticky; top:0; z-index:30;
  background:#0a0f1a; border-bottom:1px solid #152036; border-right:none;
  padding:8px var(--pad);
  overflow-x:auto; white-space:nowrap;
}
.sidebar nav{display:inline-flex; gap:8px}
.sidebar .btn{padding:8px 10px; border-radius:999px}

/* Content fills the rest */
.content{padding:12px; height:auto; min-height:calc(100vh - 56px); overflow:visible}
.container{max-width:none}

/* Cards: tighter margins/padding */
.card{padding:12px; border-radius:14px; margin-bottom:12px}
.h1{font-size:18px;margin-bottom:8px}
.h2{font-size:16px;margin:8px 0}

/* Forms: full-width, nice touch sizes */
input, select, textarea, .btn{
  font-size:16px;
}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
}
button, .btn{
  padding:10px 12px;
  border-radius:12px;
}
.grid{display:grid; gap:10px}
.grid.cols-2{grid-template-columns:1fr}  /* stack pairs vertically on mobile */

/* Buttons rows: wrap neatly */
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center}
.btn-icon{padding:8px 10px; font-size:15px}

/* Badges smaller but readable */
.badge{padding:3px 8px; font-size:12px; border-radius:999px}

/* ====== Table → Card Reflow (generic) ======
   Works without changing PHP:
   - Hide thead
   - Each row becomes a block "card"
   - Each cell shows a label via nth-child when possible
   For best results, keep 5–7 columns per table.
*/
.table{width:100%}
.table thead{display:none}
.table,
.table tbody,
.table tr,
.table td,
.table th{display:block}
.table tr{
  background:#0b1220;
  border:1px solid #1e293b;
  border-radius:12px;
  padding:8px 10px;
  margin-bottom:10px;
}
.table td{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:6px 0; border:none !important;
}
.table td::before{
  content: attr(data-label);
  color:#93a4b5; font-size:12px; flex:0 0 auto; margin-right:8px;
}

/* If PHP didn’t set data-label, we provide sensible defaults
   for the common Sites table (ID | Icon | Code | Name | Region | Status | Actions) */
.card .table tbody tr td:nth-child(1)::before{ content: "ID"; }
.card .table tbody tr td:nth-child(2)::before{ content: "Icon"; }
.card .table tbody tr td:nth-child(3)::before{ content: "Code"; }
.card .table tbody tr td:nth-child(4)::before{ content: "Name"; }
.card .table tbody tr td:nth-child(5)::before{ content: "Region"; }
.card .table tbody tr td:nth-child(6)::before{ content: "Status"; }
.card .table tbody tr td:nth-child(7)::before{ content: "Actions"; }

/* Keep name from overflowing */
.td-name{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Action area: keep on one line if possible */
.text-right{justify-content:flex-end}
.table .text-right{display:flex}

/* Icon dot alignment */
.icon-dot{width:12px; height:12px; border-radius:50%; border:1px solid #0003}

/* Pagination buttons stack nicely */
.pagination{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.pagination .btn{padding:8px 12px}

/* Map & big visual areas can fill height when used */
.fill{min-height:300px}
#map{width:100%; min-height:300px}

/* Spacing helpers on mobile */
.mt-10{margin-top:10px}