/* style.css — clean, professional, mobile-friendly. Plain CSS, no framework. */

:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #0369a1;
  --brand-dark: #075985;
  --danger: #dc2626;
  --ok: #16a34a;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--brand); color: #fff;
  box-shadow: var(--shadow); position: relative; z-index: 1000;
}
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.topbar a, .topbar button {
  color: #fff; text-decoration: none; font-size: 14px;
  background: transparent; border: 1px solid rgba(255,255,255,.5);
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
}
.topbar a.active { background: rgba(255,255,255,.18); }
.topbar .who { font-size: 13px; opacity: .9; }

/* ---- Branding (four admin-uploaded logos) ----
   Two slots live in the blue header, two in the footer strip. Logos sit in the
   app chrome rather than on the map, so they never collide with the zoom
   control, the Map/Satellite switcher or the OpenStreetMap attribution. */
.logo-slot { display: flex; align-items: center; }
.logo-slot:empty { display: none; }          /* no logo -> no gap in the layout */

.brand-logo { display: block; width: auto; object-fit: contain; }
.topbar .brand-logo { max-height: 34px; max-width: 150px; }

/* A white pill behind header logos, because most client logos are dark ink
   designed for white paper and would disappear against the blue bar. */
.topbar .logo-slot { background: #fff; border-radius: 6px; padding: 3px 7px; }

.brandbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 4px 16px;
  background: var(--card); border-top: 1px solid var(--line);
  z-index: 1000;
}
.brandbar .brand-logo { max-height: 34px; max-width: 200px; }
.brandbar[hidden] { display: none; }

/* ---- Map layout ---- */
#map { position: absolute; inset: 56px 0 0 0; }
/* Shorten the map (and side panel) only when a footer logo actually exists. */
body.has-brandbar #map { bottom: 44px; }
body.has-brandbar .panel { bottom: 44px; }
body.has-brandbar .full { bottom: 44px; }

/* ---- Side panel ---- */
.panel {
  position: absolute; top: 56px; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--card); box-shadow: var(--shadow); z-index: 1000;
  transform: translateX(105%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.panel.open { transform: translateX(0); }
.panel .phead { padding: 16px; border-bottom: 1px solid var(--line); }
.panel .phead .close { float: right; cursor: pointer; color: var(--muted); font-size: 20px; border: none; background: none; }
.panel h2 { margin: 0 0 4px; font-size: 18px; }
.panel .sub { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #fff; vertical-align: middle; }
.badge.stale { background: var(--danger); }
.badge.live { background: var(--ok); }
.pbody { padding: 16px; }

/* ---- Cards & value grids ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.value { background: var(--bg); border-radius: 10px; padding: 10px; }
.value .n { font-size: 20px; font-weight: 600; }
.value .u { font-size: 12px; color: var(--muted); margin-left: 3px; }
.value .l { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---- Trend controls ---- */
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.controls select, .controls input, select, input[type=date], input[type=text], input[type=password], input[type=number] {
  font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.segbtns { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segbtns button { border: none; background: #fff; padding: 7px 11px; cursor: pointer; font-size: 13px; color: var(--ink); }
.segbtns button.active { background: var(--brand); color: #fff; }
.chart-wrap { position: relative; height: 220px; }

button.primary { background: var(--brand); color: #fff; border: none; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
button.primary:hover { background: var(--brand-dark); }
button.ghost { background: #fff; border: 1px solid var(--line); padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }

/* ---- Login ---- */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.login-card { width: 340px; max-width: 100%; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 28px; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card p.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.login-card label { display: block; font-size: 13px; margin: 12px 0 5px; color: var(--muted); }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 20px; }
.error { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ---- Custom table page ---- */
.page { padding: 16px; max-width: 1100px; margin: 0 auto; }
.grid-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
table.grid { border-collapse: collapse; width: 100%; background: var(--card); box-shadow: var(--shadow); border-radius: 12px; overflow: hidden; }
table.grid td { border: 1px solid var(--line); height: 92px; width: 1%; padding: 8px; vertical-align: top; cursor: pointer; position: relative; }
table.grid td.empty { color: var(--muted); text-align: center; vertical-align: middle; font-size: 13px; }
.cell .cv { font-size: 22px; font-weight: 600; }
.cell .cu { font-size: 12px; color: var(--muted); margin-left: 3px; }
.cell .cc { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.3; }
.cell .cx { position: absolute; top: 4px; right: 6px; color: var(--muted); border: none; background: none; cursor: pointer; font-size: 14px; }

/* ---- Modal ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; place-items: center; z-index: 2000; padding: 16px; }
.modal-bg.open { display: grid; }
.modal { background: #fff; border-radius: 14px; padding: 20px; width: 380px; max-width: 100%; box-shadow: var(--shadow); }
.modal h3 { margin: 0 0 14px; }
.modal label { display: block; font-size: 13px; margin: 10px 0 5px; color: var(--muted); }
.modal select { width: 100%; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.panel .phead .expand-btn { float: right; margin-right: 10px; padding: 4px 10px; font-size: 12px; }

/* ---- Full-window site view ---- */
.full {
  position: fixed; inset: 0; background: var(--bg); z-index: 3000;
  overflow-y: auto; display: none;
}
.full.open { display: block; }
.full-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 1;
}
.full-head .ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.full-title h2 { margin: 0; font-size: 20px; }
.full-title .sub { color: rgba(255,255,255,.85); font-size: 13px; }
.full-body { max-width: 1000px; margin: 0 auto; padding: 20px; }
.values.wide { grid-template-columns: repeat(4, 1fr); }
.chart-wrap.big { height: 56vh; min-height: 340px; }
@media (max-width: 700px) { .values.wide { grid-template-columns: 1fr 1fr; } .chart-wrap.big { height: 46vh; } }

/* ---- Map marker labels ---- */
.leaflet-tooltip.mk-tip {
  background: #fff; border: none; box-shadow: var(--shadow);
  padding: 0; border-radius: 8px; font: inherit;
}
.leaflet-tooltip.mk-tip::before { display: none; } /* hide the little arrow */
.mk-label { padding: 5px 9px; border-left: 4px solid #999; border-radius: 8px; font-size: 12px; line-height: 1.35; white-space: nowrap; }
.mk-label b { font-size: 13px; }
.mk-label.stale { background: #fff5f5; }
.mk-warn { color: #dc2626; font-size: 14px; }

/* Draggable live-value cards (admin) */
.value[draggable="true"] { cursor: move; }
.value.dragging { opacity: .45; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
           height: 72vh; transform: translateY(105%); border-radius: 16px 16px 0 0; }
  .panel.open { transform: translateY(0); }
  .values { grid-template-columns: 1fr 1fr; }
  .topbar h1 { font-size: 15px; }
}

/* ---- Admin page ---- */
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-tabs button {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 14px;
}
.admin-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tabpane[hidden] { display: none; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .actions { text-align: right; white-space: nowrap; }
.admin-table .actions button { margin-left: 6px; }
.table-scroll { overflow-x: auto; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill.admin { background: #e0e7ff; color: #3730a3; }
.pill.user  { background: #f1f5f9; color: #475569; }
.pill.ok    { background: #dcfce7; color: #166534; }
.pill.warn  { background: #fee2e2; color: #991b1b; }

.field { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full-width { grid-column: 1 / -1; }
.admin-wrap input[type="text"], .admin-wrap input[type="password"],
.admin-wrap input[type="number"], .admin-wrap select { width: 100%; }

/* Logo slots: a 2x2 grid mirroring where each logo actually appears. */
.logo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.logo-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); }
.logo-card h4 { margin: 0 0 2px; font-size: 14px; }
.logo-card .hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.logo-preview {
  height: 84px; border: 1px dashed var(--line); border-radius: 8px; margin-bottom: 10px;
  display: grid; place-items: center; background: #fbfcfd; padding: 8px;
}
.logo-preview img { max-height: 68px; max-width: 100%; object-fit: contain; }
.logo-preview .empty { color: var(--muted); font-size: 12px; }
.logo-card .fname { font-size: 11px; color: var(--muted); word-break: break-all; margin-bottom: 8px; min-height: 14px; }

.note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; display: none; }
.flash.show { display: block; }
.flash.ok { background: #dcfce7; color: #166534; }
.flash.err { background: #fee2e2; color: #991b1b; }
button.danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }

@media (max-width: 700px) {
  .form-grid, .logo-grid { grid-template-columns: 1fr; }
}

/* Logos on the login page, which has no header bar of its own. */
.login-brand { display: flex; gap: 20px; justify-content: center; align-items: center; margin-bottom: 18px; }
.login-brand:empty { display: none; }
.login-brand .brand-logo { max-height: 52px; max-width: 180px; }