/* ═══════════════════════════════════════════════════════════════════
   public_cad_realistic.css — the county 911 information viewer

   The compact board reads like an app. This reads like the GIS viewer a
   county emergency-management office actually publishes: a blue title
   strip, the tool cluster in the top-left corner of the map, permanent
   yellow call-type labels beside each pin, and the attribute table pinned
   across the bottom with the raw dispatch columns in it.

   Nothing here is a different page. It is the same map, the same feed and
   the same markers with different furniture around them, so the two views
   cannot disagree about what is happening in the county.

   Everything is scoped to body.skin-realistic. Without that class this
   file changes nothing, which is what lets the compact view stay exactly
   as it was — and it stays the default on a phone, where a six column
   attribute table is not a thing anybody wants.
   ═══════════════════════════════════════════════════════════════════ */

body.skin-realistic {
  --pc-bar:#1c6ea4;          /* the strip across the top */
  --pc-bar-dark:#175a86;
  --pc-red:#c0272d;          /* the 911 badge */
  --pc-ink:#2b2b2b;
  --pc-line:#c9c9c9;
  --pc-panel:#ffffff;
  --pc-hover:#eef4fa;
  --pc-select:#cfe3f5;
  --pc-law:#1f5fa8;
  --pc-ems:#e8862b;
  --pc-fire:#c0272d;

  background:#f2f2f2;
  color:var(--pc-ink);
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
}

/* The compact chrome steps aside rather than being deleted, so switching
   back does not have to rebuild it. */
body.skin-realistic > header.bar,
body.skin-realistic > .panel,
body.skin-realistic > .note { display:none !important; }

/* ...and the same in the other direction, which is the half that was
   missing. The realistic chrome below is styled by plain #pc-* selectors,
   so dropping the body class restyled nothing and left the whole 911
   viewer — bar, toolbar, scale, credit and attribute table — sitting on
   top of the compact view. It only looked right after a reload, because a
   reload never builds it in the first place.

   The rule keys off the marker that mount() stamps on every element this
   view adds, so chrome added later is covered without a new selector. */
body:not(.skin-realistic) [data-pc-skin="realistic"] { display:none !important; }

body.skin-realistic #map {
  inset:52px 0 var(--pc-table-h, 300px) 0;
  /* Where the county image ends. A light canvas rather than a dark void,
     so the edge reads as the map running out and not as a failure. */
  background:#eae7e1;
}
body.skin-realistic.table-shut #map { inset:52px 0 0 0; }

/* ── Title strip ────────────────────────────────────────────────── */
#pc-bar {
  position:fixed; inset:0 0 auto 0; z-index:1400; height:52px;
  display:flex; align-items:center; gap:0;
  background:var(--pc-bar); color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
#pc-bar .pc-badge {
  width:52px; height:52px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--pc-red);
}
#pc-bar .pc-badge svg { width:30px; height:30px; }
#pc-bar .pc-title {
  font-size:20px; font-weight:600; padding:0 22px 0 16px; white-space:nowrap;
}
#pc-bar .pc-tag { font-size:13px; opacity:.95; white-space:nowrap; }
#pc-bar .pc-spacer { flex:1; }
#pc-bar .pc-status {
  font-size:12px; display:flex; align-items:center; gap:7px;
  padding-right:14px; white-space:nowrap; opacity:.95;
}
#pc-bar .pc-status i {
  width:8px; height:8px; border-radius:50%; background:#7ee787; display:block;
}
#pc-bar .pc-status i.stale { background:#ffd479; }
#pc-bar .pc-status i.down  { background:#ff8b8b; }
#pc-bar button, #pc-bar a {
  font:inherit; font-size:12.5px; color:#fff; text-decoration:none;
  /* Darkened rather than lightened: white on the lightened bar fell short
     of 4.5:1. */
  background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.35);
  border-radius:3px; padding:5px 11px; margin-right:10px; cursor:pointer;
  white-space:nowrap;
}
#pc-bar button:hover, #pc-bar a:hover { background:rgba(255,255,255,.28); }

/* ── Map tools, in the corner of the map the way a viewer puts them ── */
body.skin-realistic .leaflet-top.leaflet-left { top:10px; left:10px; }
body.skin-realistic .leaflet-control-zoom {
  border:1px solid #a6a6a6 !important; border-radius:2px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.3) !important;
}
body.skin-realistic .leaflet-control-zoom a {
  width:32px; height:32px; line-height:31px; color:#4a4a4a;
  background:#fff; border-bottom:1px solid #d8d8d8; font-size:19px;
}
body.skin-realistic .leaflet-control-zoom a:hover { background:#f0f0f0; }

#pc-tools {
  position:fixed; z-index:1300; top:130px; left:10px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
#pc-tools .pc-btn {
  width:32px; height:32px; padding:0; display:flex; align-items:center;
  justify-content:center; background:#fff; color:#4a4a4a;
  border:1px solid #a6a6a6; border-radius:2px; cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3); font-size:15px;
}
#pc-tools .pc-btn:hover { background:#f0f0f0; }
#pc-tools .pc-btn.on { background:var(--pc-select); border-color:#7aa7d0; }

#pc-search {
  display:flex; background:#fff; border:1px solid #a6a6a6; border-radius:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.3); overflow:hidden;
}
#pc-search input {
  border:none; outline:none; font:inherit; font-size:13px;
  padding:8px 10px; width:238px; color:var(--pc-ink);
}
#pc-search button {
  border:none; border-left:1px solid #e0e0e0; background:#fff;
  width:36px; cursor:pointer; color:#4a4a4a; font-size:14px;
}
#pc-search button:hover { background:#f0f0f0; }

#pc-widgets { display:flex; gap:8px; }

/* ── Pins and the yellow labels beside them ─────────────────────── */
body.skin-realistic .pc-pin {
  width:26px; height:26px; border-radius:50%; background:#fff;
  border:1.5px solid #6b6b6b; box-shadow:0 1px 4px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
body.skin-realistic .pc-pin svg { width:15px; height:15px; }
body.skin-realistic .pc-pin.sel { border-color:#111; box-shadow:0 0 0 3px rgba(31,95,168,.5); }

body.skin-realistic .leaflet-tooltip.pc-label {
  background:#ffff2e; color:#000; border:none; border-radius:0;
  box-shadow:none; padding:0 2px; margin:0;
  font:700 11.5px/1.45 "Segoe UI", Arial, sans-serif;
  letter-spacing:.2px; white-space:nowrap;
}
body.skin-realistic .leaflet-tooltip.pc-label::before { display:none; }

body.skin-realistic .leaflet-popup-content-wrapper,
body.skin-realistic .leaflet-popup-tip {
  background:#fff; color:var(--pc-ink); border:1px solid #a6a6a6; border-radius:2px;
}
body.skin-realistic .pop-type { color:var(--pc-bar-dark); }
body.skin-realistic .pop-row  { color:#555; }

/* ── Scale bar and the coordinate readout ───────────────────────── */
#pc-scale, #pc-coords {
  position:fixed; z-index:1300; bottom:calc(var(--pc-table-h, 300px) + 8px);
  font-size:11px; color:#333;
}
body.skin-realistic.table-shut #pc-scale,
body.skin-realistic.table-shut #pc-coords { bottom:8px; }
#pc-scale { left:12px; }
#pc-scale .rule {
  border:1px solid #333; border-top:none; height:5px; width:120px;
  background:rgba(255,255,255,.6);
}
#pc-coords {
  left:12px; bottom:calc(var(--pc-table-h, 300px) + 34px);
  background:#4a4a4a; color:#fff; padding:3px 8px; border-radius:2px;
}
body.skin-realistic.table-shut #pc-coords { bottom:34px; }
#pc-credit {
  position:fixed; z-index:1300; right:10px;
  bottom:calc(var(--pc-table-h, 300px) + 8px);
  font-size:10.5px; color:#4a4a4a; background:rgba(255,255,255,.72);
  padding:2px 7px; border-radius:2px;
}
body.skin-realistic.table-shut #pc-credit { bottom:8px; }

/* ── The attribute table ────────────────────────────────────────── */
#pc-table {
  position:fixed; z-index:1350; inset:auto 0 0 0; height:var(--pc-table-h, 300px);
  display:flex; flex-direction:column;
  background:var(--pc-panel); border-top:1px solid #a6a6a6;
  box-shadow:0 -2px 8px rgba(0,0,0,.18);
}
body.skin-realistic.table-shut #pc-table { height:30px; }
body.skin-realistic.table-shut #pc-table .pc-tools-row,
body.skin-realistic.table-shut #pc-table .pc-grid,
body.skin-realistic.table-shut #pc-table .pc-foot { display:none; }

#pc-table .pc-tabs {
  display:flex; align-items:stretch; height:30px; background:#ededed;
  border-bottom:1px solid var(--pc-line);
}
#pc-table .pc-tab {
  padding:0 16px; display:flex; align-items:center; font-size:12.5px;
  background:#fff; border-right:1px solid var(--pc-line);
  border-top:2px solid var(--pc-bar); font-weight:600;
}
#pc-table .pc-grip { flex:1; cursor:ns-resize; }
#pc-table .pc-fold {
  width:34px; border:none; border-left:1px solid var(--pc-line);
  background:#ededed; cursor:pointer; color:#4a4a4a; font-size:13px;
}
#pc-table .pc-fold:hover { background:#e0e0e0; }

#pc-table .pc-tools-row {
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:5px 8px; border-bottom:1px solid var(--pc-line);
  background:#fafafa; font-size:12.5px;
}
#pc-table .pc-tools-row button {
  font:inherit; background:none; border:1px solid transparent; border-radius:2px;
  padding:4px 9px; cursor:pointer; color:#333; white-space:nowrap;
}
#pc-table .pc-tools-row button:hover { background:#eaeaea; border-color:#d5d5d5; }
#pc-table .pc-tools-row button[disabled] { color:#aaa; cursor:default; }
#pc-table .pc-tools-row button[disabled]:hover { background:none; border-color:transparent; }
#pc-table .pc-tools-row button.on { background:var(--pc-select); border-color:#7aa7d0; }
#pc-table .pc-tools-row .sep { width:1px; align-self:stretch; background:var(--pc-line); margin:0 6px; }

.pc-menu {
  position:fixed; z-index:1500; background:#fff; border:1px solid #a6a6a6;
  box-shadow:0 4px 14px rgba(0,0,0,.25); border-radius:2px; padding:4px 0;
  min-width:210px; font-size:12.5px;
}
.pc-menu button {
  display:block; width:100%; text-align:left; background:none; border:none;
  font:inherit; padding:7px 14px; cursor:pointer; color:#333;
}
.pc-menu button:hover { background:var(--pc-hover); }

#pc-table .pc-grid { flex:1; overflow:auto; }
#pc-table table { border-collapse:collapse; width:100%; font-size:12.5px; }
#pc-table thead th {
  position:sticky; top:0; z-index:1; background:#f5f5f5; text-align:left;
  font-weight:600; padding:7px 10px; white-space:nowrap;
  border-right:1px solid var(--pc-line); border-bottom:1px solid #a6a6a6;
  cursor:pointer; user-select:none;
}
#pc-table thead th .arrow { color:#777; margin-left:5px; font-size:10px; }
#pc-table tbody td {
  padding:6px 10px; border-right:1px solid #e6e6e6; border-bottom:1px solid #ededed;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;
}
#pc-table tbody tr { cursor:pointer; }
#pc-table tbody tr:hover { background:var(--pc-hover); }
#pc-table tbody tr.sel { background:var(--pc-select); }
#pc-table tbody tr.unplaced td:first-child { box-shadow:inset 3px 0 0 var(--pc-ems); }
/* The compact view styles .unplaced as small amber text; not in this table. */
#pc-table tbody tr.unplaced { color:inherit; font-size:inherit; }
#pc-table td.disc-LAW  { color:var(--pc-law);  font-weight:600; }
#pc-table td.disc-EMS  { color:var(--pc-ems);  font-weight:600; }
#pc-table td.disc-FIRE { color:var(--pc-fire); font-weight:600; }
#pc-table .pc-none { padding:26px; text-align:center; color:#777; }

#pc-table .pc-foot {
  height:26px; display:flex; align-items:center; gap:14px; padding:0 10px;
  border-top:1px solid var(--pc-line); background:#f5f5f5; font-size:11.5px; color:#555;
}

/* ── Legend and about, the two widget panels ────────────────────── */
.pc-pop {
  position:fixed; z-index:1380; top:130px; left:56px; width:264px;
  background:#fff; border:1px solid #a6a6a6; border-radius:2px;
  box-shadow:0 4px 16px rgba(0,0,0,.28); font-size:12.5px;
}
.pc-pop h3 {
  margin:0; padding:8px 12px; font-size:13px; background:#f0f0f0;
  border-bottom:1px solid var(--pc-line); display:flex; align-items:center;
}
.pc-pop h3 button {
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-size:14px; color:#666; padding:0 2px;
}
.pc-pop .pc-pop-body { padding:11px 12px; color:#444; }
.pc-pop .pc-key { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.pc-pop .pc-key svg { width:15px; height:15px; }
.pc-pop .pc-key .ring {
  width:24px; height:24px; border-radius:50%; background:#fff;
  border:1.5px solid #6b6b6b; display:flex; align-items:center; justify-content:center;
}

/* A six column attribute table is not a thing anybody wants on a phone,
   so the compact view stays the one that answers there. */
@media (max-width:900px) {
  #pc-bar .pc-tag, #pc-search { display:none; }
  #pc-bar .pc-title { font-size:16px; padding:0 12px; }
}