/* mobileclean.css — mobile-first, unified dark panels, clean cards */

/* Theme tokens */
:root{
  --bg:#0b0f14; --panel:#0f1622; --panelTop:#101a29; --muted:#9fb4c6;
  --text:#e8f1fb; --line:#223346; --accent:#14b8a6; --card:#0f1622; --cardHover:#152131;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

html, body { background: var(--bg); color: var(--text); }

/* Global shell */
.shell{ max-width: 1200px; margin: 12px auto 24px; padding: 0 12px; }
.section{ background: var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px; }
.section .head{ display:flex; align-items:center; justify-content: space-between; gap:10px; padding:10px 12px; background:var(--panelTop); border-bottom:1px solid var(--line); }
.section .body{ padding: 10px; }

/* Make app container stack vertically */
#appwrap.wrap{ display:flex !important; flex-direction: column !important; gap: 12px; height: auto !important; }

/* Map section */
#map{ width:100%; height: clamp(360px, 56dvh, 680px); }

/* Filters: mobile-first stacked grid */
.filters-grid{ display:grid; grid-template-columns: 1fr; gap:10px; }
.filters-grid select,
.filters-grid input[type="text"],
.filters-grid .token-input{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e1520;
  color: #e6eef7;
}
label.chk{ display:flex; align-items:center; gap:8px; }

/* Has Hardware toggle styling (keeps same input id) */
#filterHasHw{
  appearance: none;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: #233043;
  border: 1px solid var(--line);
  position: relative;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}
#filterHasHw::before{
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #e6eef7;
  transition: transform .18s ease;
}
#filterHasHw:checked{ background: #0f2d1b; border-color: #1e6749; }
#filterHasHw:checked::before{ transform: translateX(18px); background:#89f0a1; }

/* Action buttons row (if present) */
.filters-actions{ display:flex; gap:10px; flex-wrap: wrap; }
.filters-actions .btn{ padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background:#0f1a28; color:#e6eef7; }
.filters-actions .btn:hover{ background:#152235; border-color:#2d4d6a; }

/* Devices list cards: mobile-friendly */
#list{ max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 6px; }
#list .item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
  display:flex; gap:12px;
  transition: background .18s ease, transform .12s ease;
}
#list .item:hover{ background: var(--cardHover); transform: translateY(-1px); }
#list .item .title{ font-weight:650; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#list .item .sub{ color:#9fb4c6; font-size:13px; }

/* Desktop upscaling for list and filters */
@media (min-width: 900px){
  .filters-grid{ grid-template-columns: repeat(3, 1fr); }
  #list{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  #list{ grid-template-columns: repeat(3, 1fr); }
}

/* Hide any legacy sidebar chrome */
#openSidebar, #closeSidebar{ display:none !important; }
#sidebar{ border:none !important; background: transparent !important; padding: 0 !important; }


/* --- Refinements: full-width filters, scrollable device list, prevent zoom --- */

/* Ensure full-width filters section */
.section.filters-section {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Device list scrollable area (~6 cards visible) */
.section.devices-section .body {
  max-height: calc(6 * 150px);
  overflow-y: auto;
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: transparent transparent;
  position: relative;
}

/* Auto-hide scrollbar (WebKit) */
.section.devices-section .body::-webkit-scrollbar { width: 8px; }
.section.devices-section .body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.section.devices-section .body:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* Subtle fade to hint scroll */
.section.devices-section .body::after {
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:30px;
  background:linear-gradient(to bottom, rgba(15,22,34,0) 0%, rgba(15,22,34,0.9) 100%);
  pointer-events:none;
}

/* Ensure #list content sizes nicely inside scroll area */
#list {
  overflow: visible;
  padding-right: 6px; /* a bit of breathing room next to scrollbar */
}

/* Prevent iOS zoom on focus by ensuring >=16px */
input, select, textarea, button {
  font-size: 16px !important;
}


/* --- Inline Hardware section styling --- */
.hardware-block {
  background: rgba(255,255,255,0.02);
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 10px;
}
.hardware-block .hw-header {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hardware-block div {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.4;
}
.hardware-block div strong {
  color: #f1f5f9;
}

/* === Improved Popup Styling === */
.device-popup {
  font-family: system-ui, sans-serif;
  font-size: 13px;
  color: #e5eef5;
  background: #0d141d;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 260px;
  line-height: 1.4;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.popup-header h2 {
  font-size: 15px;
  margin: 0;
  color: #cbe0f5;
}

.popup-section {
  border-top: 1px solid #1b2a38;
  border-bottom: 1px solid #1b2a38;
  padding: 6px 0;
  margin: 6px 0;
}

.popup-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}

.popup-row .label {
  font-weight: 500;
  color: #8aa1b1;
  white-space: nowrap;
}

.popup-row .value {
  flex: 1;
  text-align: right;
  color: #cbe0f5;
  overflow-wrap: anywhere;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.popup-updated {
  margin-top: 6px;
  font-size: 11px;
  color: #8aa1b1;
  text-align: right;
}