/* ================================================================ the board
   The screen a nominated person watches for the length of an isolation. The
   ordering is deliberate: what this isolation is, how to add an earth, the
   three counts, then — loudest of all — what is still on the line, and only
   then the map and the hand back.
   ---------------------------------------------------------------------- */

/* ------------------------------------------------- the isolation header
   The same language as the isolations list: a status badge, the reference, a
   state chip, icon-led facts, and lit edges that carry the state. It is the
   one card a nom watches for hours, so it is the largest thing on the screen
   and states its condition in four places at once — badge, chip, border and
   glow — because colour alone is not a safe way to say "six are still out".
   ---------------------------------------------------------------------- */

.iso-banner {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 13px;
  margin-top: 4px; padding: 17px 16px 16px;
  border-radius: 22px;
  color: #eef3ee;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02) 58%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
  transition: border-color .18s, box-shadow .18s;
}

/* a specular streak along the top edge, and its echo underneath */
.iso-banner::before,
.iso-banner::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 46%, transparent);
  opacity: .5;
}
.iso-banner::before { top: -1px; }
.iso-banner::after { bottom: -1px; opacity: 0; }

/* -- all accounted for -------------------------------------------------- */
.iso-banner.clear,
.iso-banner.idle {
  border-color: rgba(47, 227, 106, .62);
  background:
    linear-gradient(158deg, rgba(47, 227, 106, .16), rgba(47, 227, 106, .035) 62%),
    #08140d;
  box-shadow: 0 0 34px rgba(47, 227, 106, .2), 0 10px 30px rgba(0, 0, 0, .45);
}
.iso-banner.clear::before,
.iso-banner.idle::before {
  background: linear-gradient(90deg, transparent, #9affc2 42%, #2fe36a 70%, transparent);
  opacity: 1; height: 2px;
  box-shadow: 0 0 14px rgba(47, 227, 106, .9);
}
.iso-banner.clear::after,
.iso-banner.idle::after {
  background: linear-gradient(90deg, transparent, rgba(47, 227, 106, .85) 50%, transparent);
  opacity: .85; box-shadow: 0 0 18px rgba(47, 227, 106, .7);
}

/* -- earths still on the line ------------------------------------------- */
.iso-banner.out {
  border-color: rgba(229, 67, 60, .68);
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .2), rgba(229, 67, 60, .05) 62%),
    #150a09;
  box-shadow: 0 0 34px rgba(229, 67, 60, .22), 0 10px 30px rgba(0, 0, 0, .45);
}
.iso-banner.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 45%, #e5433c 72%, transparent);
  opacity: 1; height: 2px;
  box-shadow: 0 0 14px rgba(229, 67, 60, .9);
}
.iso-banner.out::after {
  background: linear-gradient(90deg, transparent, rgba(229, 67, 60, .8) 50%, transparent);
  opacity: .8; box-shadow: 0 0 18px rgba(229, 67, 60, .6);
}

/* -- handed back: finished, so it recedes -------------------------------- */
.iso-banner.closed { border-color: rgba(47, 227, 106, .22); }
.iso-banner.closed .ib-ref { color: #dde6df; }

/* ---------------------------------------------------------------- head */
.ib-head { display: flex; align-items: center; gap: 12px; }

.ib-badge {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #c7d3c9;
  /* the hairline divider between the badge and the reference */
  box-shadow: 17px 0 0 -16px rgba(255, 255, 255, .16);
  margin-right: 5px;
}
.ib-badge svg { width: 23px; height: 23px; }
.iso-banner.clear .ib-badge,
.iso-banner.idle .ib-badge,
.iso-banner.closed .ib-badge {
  background: rgba(47, 227, 106, .16); border-color: rgba(47, 227, 106, .5); color: #6bffa0;
  box-shadow: 17px 0 0 -16px rgba(47, 227, 106, .35);
}
.iso-banner.out .ib-badge {
  background: rgba(229, 67, 60, .18); border-color: rgba(229, 67, 60, .55); color: #ff8178;
  box-shadow: 17px 0 0 -16px rgba(229, 67, 60, .35);
}

.ib-ref {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display, inherit);
  font-size: 21px; font-weight: 800; letter-spacing: -.35px; line-height: 1.2;
  color: #fff; overflow-wrap: anywhere;
}

.ib-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px;
  background: rgba(47, 227, 106, .14);
  border: 1px solid rgba(47, 227, 106, .55);
  color: #6bffa0;
}
.ib-chip svg { width: 15px; height: 15px; }
.ib-chip .ib-live {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #2fe36a; box-shadow: 0 0 9px rgba(47, 227, 106, .95);
  animation: ib-live 2.4s ease-in-out infinite;
}
@keyframes ib-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
.iso-banner.out .ib-chip {
  background: rgba(229, 67, 60, .16); border-color: rgba(229, 67, 60, .6); color: #ff8178;
}
.iso-banner.out .ib-chip .ib-live {
  background: #ff6a60; box-shadow: 0 0 9px rgba(255, 106, 96, .95);
}
.iso-banner.closed .ib-chip {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #b8c6bd;
}

/* ---------------------------------------------------------- the facts */
.ib-meta {
  display: flex; flex-wrap: wrap; gap: 9px 16px;
  font-size: 13.5px; line-height: 1.4; color: #c2d0c6;
}
.ib-meta > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ib-meta svg { width: 16px; height: 16px; flex: 0 0 auto; color: #8fa094; }
.ib-time {
  padding: 3px 9px; border-radius: 999px; font-weight: 700;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #dbe6de; font-variant-numeric: tabular-nums;
}
.iso-banner.clear .ib-time,
.iso-banner.idle .ib-time {
  background: rgba(47, 227, 106, .14); border-color: rgba(47, 227, 106, .42); color: #6bffa0;
}
.ib-time.late {
  background: rgba(229, 67, 60, .3); border-color: #e5433c; color: #ffb4ae;
}

/* ------------------------------------------------------------ actions */
.ib-acts {
  display: flex; gap: 9px; flex-wrap: nowrap;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.iso-banner.out .ib-acts { border-top-color: rgba(229, 67, 60, .28); }
.iso-banner.clear .ib-acts,
.iso-banner.idle .ib-acts { border-top-color: rgba(47, 227, 106, .22); }

/* Each sized to its own label: stretching them to fill the row turned
   "All isolations" into a banner on a wide screen, and squeezed it to
   "All isolati..." on a phone. All three fit at 390px as they are. */
.ghost-act {
  flex: 0 0 auto; min-width: 0; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 10px; border-radius: 14px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  color: #dbe6de;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s, border-color .15s, color .15s;
}
.ghost-act svg { width: 17px; height: 17px; flex: 0 0 auto; color: #9fb3a6; }
.ghost-act span { overflow: hidden; text-overflow: ellipsis; }
.ghost-act:hover {
  background: rgba(255, 255, 255, .095); border-color: rgba(255, 255, 255, .24); color: #fff;
}
.ghost-act:hover svg { color: #6bffa0; }

/* The two exports wear their own format's colour — Adobe red and Excel green
   — so a nom reaching for one picks it out by colour instead of reading three
   near-identical grey buttons. Both are the published brand values, lifted
   only where the dark card would have swallowed them: Excel's #217346 sits at
   3.2:1 here, so the icon uses #21A366, the lighter face of the same mark. */
.ghost-act.act-pdf svg { color: #fa0f00; }
.ghost-act.act-csv svg { color: #21a366; }
.ghost-act.act-pdf:hover { border-color: rgba(250, 15, 0, .6); }
.ghost-act.act-pdf:hover svg { color: #ff3b2f; }
.ghost-act.act-csv:hover { border-color: rgba(33, 163, 102, .65); }
.ghost-act.act-csv:hover svg { color: #2fd189; }
.ghost-act:active { transform: translateY(1px); }

/* ------------------------------------------------------------ the scan
   The only action on this screen that puts an earth on the line, so it is
   the only solid green thing above the fold. */
.scan-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 64px; margin: 14px 0 0;
  border: 0; border-radius: 20px; cursor: pointer;
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: 1.2px;
  color: #04210f;
  background: linear-gradient(140deg, #6bffa0, #26d964 46%, #12a04e);
  box-shadow: 0 10px 28px rgba(47, 227, 106, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: box-shadow .18s, filter .15s, transform .12s;
}
.scan-btn svg { width: 21px; height: 21px; }
.scan-btn:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 34px rgba(47, 227, 106, .42), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.scan-btn:active { transform: translateY(1px); }
/* while the camera is open the button closes it, so it stops inviting a scan */
.scan-btn.closing {
  background: linear-gradient(140deg, #3a4a3f, #212c25);
  color: #eef3ee;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------- the counts
   Issued, back, outstanding — the same three standing numbers as the
   isolations screen, in the same tile. Only outstanding is ever an alarm,
   and it is red and breathing only while something is genuinely on the
   line: at zero it goes quiet, because stillness is the good state. */
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 14px; }

.count {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
  padding: 15px 11px 14px;
  border-radius: 18px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .1);
}
.count::before {
  content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  opacity: .45;
}

.count-ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  color: #9fb3a6;
}
.count-ico svg { width: 17px; height: 17px; }

.count-body { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.count .n {
  font-family: var(--font-display, inherit);
  font-size: 30px; font-weight: 800; line-height: 1.06; letter-spacing: -1px;
  color: #f2f7f2; font-variant-numeric: tabular-nums;
}
.count .l {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: #8fa094; line-height: 1.3;
}

/* back ---------------------------------------------------------------- */
.count.ok { border-color: rgba(47, 227, 106, .4); }
.count.ok::before {
  background: linear-gradient(90deg, transparent, #6bffa0 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(47, 227, 106, .7);
}
.count.ok .n { color: #6bffa0; }
.count.ok .count-ico {
  background: rgba(47, 227, 106, .15); border-color: rgba(47, 227, 106, .45); color: #6bffa0;
}

/* outstanding — the alarm, and only while it is one -------------------- */
.count.out {
  border-color: rgba(229, 67, 60, .5);
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .17), rgba(229, 67, 60, .04) 62%),
    #150a09;
  animation: count-breathe 3.4s ease-in-out infinite;
}
.count.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(229, 67, 60, .8);
}
.count.out .n { color: #ff6a60; }
.count.out .l { color: #d9a9a4; }
.count.out .count-ico {
  background: rgba(229, 67, 60, .2); border-color: rgba(229, 67, 60, .55); color: #ff8178;
}
@keyframes count-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 67, 60, 0), 0 8px 24px rgba(0, 0, 0, .4); }
  50%      { box-shadow: 0 0 30px rgba(229, 67, 60, .4), 0 8px 24px rgba(0, 0, 0, .4); }
}

/* ------------------------------------------------- issue an earth, by hand
   The fallback for a tag that will not scan: a damaged QR, a dead camera, a
   cutting with no light. It uses the same fields as the new-isolation form so
   there is one form language in the app, and it deliberately sits below the
   green scan button — reading down the screen is the order you should try
   them in.
   ---------------------------------------------------------------------- */

.issue-panel {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  margin: 26px 0 0; padding: 18px 16px 16px;
  border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
}
.issue-panel::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  opacity: .5;
}

.ip-head { display: flex; align-items: center; gap: 13px; }
.ip-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(47, 227, 106, .14);
  border: 1px solid rgba(47, 227, 106, .42);
  color: #6bffa0;
}
.ip-ico svg { width: 22px; height: 22px; }
.ip-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ip-text b {
  font-family: var(--font-display, inherit);
  font-size: 15.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.25;
  color: #fff;
}
.ip-text i { font-style: normal; font-size: 12px; line-height: 1.35; color: #93a899; }

@media (max-width: 400px) {
  .issue-panel { padding: 16px 14px 14px; gap: 12px; margin-top: 22px; }
  .ip-ico { width: 40px; height: 40px; }
  .ip-text b { font-size: 14.5px; }
  .ip-text i { font-size: 11.5px; }
}

/* ------------------------------------------------- the outstanding alert */
.banner.alert-card {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 16px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(229, 67, 60, .22), rgba(229, 67, 60, .09));
  border: 1px solid rgba(229, 67, 60, .5);
  color: #ff8178;
}
.alert-ico { flex: 0 0 auto; color: #ff8178; line-height: 0; margin-top: 1px; }
.alert-ico svg { width: 26px; height: 26px; }
.alert-body { display: block; min-width: 0; }
.alert-body b {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: .3px; color: #ff8178;
}
.alert-list { display: block; margin-top: 8px; font-size: 13px; line-height: 1.65; color: #f0d5d2; }

/* ----------------------------------------------------------------- map */
.panel.map-panel { padding: 14px; margin-top: 14px; border-radius: 20px; }
.map-title {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-size: 12px; letter-spacing: .6px; color: #8fa094; text-transform: uppercase;
}
.map-title svg { width: 17px; height: 17px; color: #6bffa0; flex: 0 0 auto; }
.map-title b { color: #dbe6de; font-weight: 700; }
.map-panel .mapbox { border-radius: 14px; overflow: hidden; }
.map-panel .map-key { margin-top: 11px; font-size: 12.5px; color: #a7b7ac; }

/* Leaflet's own controls, in the app's language */
.map-panel .leaflet-control-zoom {
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important;
}
.map-panel .leaflet-control-zoom a {
  width: 36px !important; height: 36px !important; line-height: 36px !important;
  background: rgba(14, 20, 16, .94) !important; color: #dbe6de !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  font-size: 19px !important;
}
.map-panel .leaflet-control-zoom a:hover { background: rgba(28, 40, 32, .98) !important; }

/* ---------------------------------------------------------- hand back
   Locked is the normal state and has to look locked, not merely inactive.
   It becomes solid, green and tappable only at zero outstanding. */
.handback-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 62px; margin-top: 16px;
  border-radius: 999px; cursor: not-allowed;
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: 1.2px;
  color: #7f9086;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12);
}
.handback-btn svg { width: 22px; height: 22px; }
.handback-btn.ready {
  cursor: pointer; color: #04210f;
  background: linear-gradient(100deg, #26d964, #6bffa0 52%, #26d964);
  border-color: transparent;
}
.handback-btn.ready:hover { filter: brightness(1.05); }

@media (max-width: 400px) {
  .iso-banner { padding: 15px 14px 14px; border-radius: 20px; gap: 11px; }
  .ib-head { gap: 10px; flex-wrap: wrap; }
  .ib-ref { font-size: 18px; flex-basis: calc(100% - 64px); }
  .ib-badge { width: 42px; height: 42px; }
  .ib-badge svg { width: 21px; height: 21px; }
  .ib-chip { font-size: 10px; padding: 6px 10px; }
  .ib-meta { font-size: 12.5px; gap: 8px 13px; }
  .ib-acts { gap: 7px; padding-top: 11px; }
  .ghost-act { font-size: 11.5px; gap: 6px; min-height: 44px; padding: 0 11px; }
  .ghost-act svg { width: 16px; height: 16px; }
  .scan-btn { min-height: 60px; font-size: 14.5px; letter-spacing: 1px; gap: 10px; }
  .scan-btn svg { width: 19px; height: 19px; }
  .counts { gap: 8px; }
  .count { padding: 13px 9px 12px; border-radius: 16px; }
  .count .n { font-size: 25px; }
  .count .l { font-size: 9.5px; letter-spacing: .8px; }
  .count-ico { width: 28px; height: 28px; margin-bottom: 5px; }
  .count-ico svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ib-chip .ib-live { animation: none; }
  .count.out { animation: none; box-shadow: 0 0 20px rgba(229, 67, 60, .3); }
}