/* ---------------------------------------------------------
   Line Construction Tools – Luxury UI v3
   Replace /public/styles.css with this file
--------------------------------------------------------- */

:root {
  --bg0: #07060a;
  /* richer charcoal */
  --bg1: #0b0a10;
  --bg2: #0a1222;
  /* deep navy */

  --royal: #2f6fed;
  --royalSoft: rgba(47, 111, 237, .18);
  --royalLine: rgba(47, 111, 237, .55);
  --royalFill: rgba(47, 111, 237, .13);
  --royalFillHover: rgba(47, 111, 237, .09);

  --glass: rgba(255, 255, 255, .060);
  --glass2: rgba(255, 255, 255, .030);

  --stroke: rgba(255, 255, 255, .11);
  --stroke2: rgba(255, 255, 255, .18);

  --text: #f3f1ea;
  /* warm white */
  --muted: rgba(243, 241, 234, .66);

  --gold: #d6b15c;
  /* executive accent */
  --gold2: #f0d08a;
  --inkblue: #1d2b45;
  /* subtle premium blue */

  --ok: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;

  --r: 18px;
  --r2: 26px;

  --shadowA: 0 55px 160px rgba(0, 0, 0, .70);
  --shadowB: 0 22px 70px rgba(0, 0, 0, .44);
  --shadowC: 0 10px 28px rgba(0, 0, 0, .30);

  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Map + dashboard semantic colors */
  --ws-ready: #3b82f6;
  /* blue */
  --ws-progress: #a855f7;
  /* purple */
  --ws-hold: #f97316;
  /* orange */
  --ws-complete: #22c55e;
  /* green */

  --ls-needs: #ef4444;
  --ls-expiring: #f97316;
  --ls-good: #22c55e;
  --ls-na: #94a3b8;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg2));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle premium typography polish */
h1,
h2,
h3,
.sbTitle .name,
.navbtn,
.btn {
  letter-spacing: .15px;
}

.card h2 {
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.cardSub {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cardSub h3 {
  margin-top: 0;
}

body {
  text-shadow: 0 0 0 transparent;
  /* keeps rendering consistent */
}

.muted {
  letter-spacing: .10px;
}

/* Micro-contrast boost (subtle, premium) */
.card,
.sidebar,
.navbtn,
.btn,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
}

/* Premium aurora depth (subtle animated light) */
body::before {
  content: "";
  position: fixed;
  inset: -1px;
  background:
    /* subtle top glow (royal blue) */
    radial-gradient(900px 420px at 46% 0%, rgba(59, 130, 246, .12), transparent 64%),

    /* thin left edge glow (royal blue, not gold) */
    radial-gradient(520px 1200px at 0% 52%, rgba(59, 130, 246, .07), transparent 55%),

    /* cool highlight for depth */
    radial-gradient(900px 650px at 84% 26%, rgba(96, 165, 250, .10), transparent 66%),

    /* vignette */
    radial-gradient(1200px 900px at 50% 35%, transparent 45%, rgba(0, 0, 0, .58) 90%);

  pointer-events: none;
  z-index: 0;
  animation: aurora 12s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.08);
}

@keyframes aurora {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, -10px, 0) scale(1.02);
    opacity: .95;
  }
}

/* Subtle noise (kills “flat/cheap” look) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Layout */
.app {
  min-height: 100vh;
  display: flex;
  position: relative;
  z-index: 1;
}

/* Executive watermark — large, subtle, fixed */
.app {
  position: relative;
  /* ensure pseudo element anchors */
}

.app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("/fr-watermark.png");
  background-repeat: no-repeat;
  background-position: 88% 18%;
  background-size: 520px auto;
  opacity: .055;

  filter: grayscale(1) contrast(1.15) brightness(1.25);
  mix-blend-mode: overlay;
}

/* keep your app content above the watermark */
.sidebar,
.main {
  position: relative;
  z-index: 1;
}

.sidebar {
  width: 330px;
  padding: 18px 16px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadowC);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.main {
  flex: 1;
  padding: 24px;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
}

/* Brand block */
.sbBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
  position: relative;
  overflow: hidden;
}

.sbBrand::after {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent);
  opacity: .24;
  pointer-events: none;
}

.sbLogo {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px;
}

.sbTitle .name {
  font-weight: 900;
  letter-spacing: .2px;
}

.sbTitle .tag {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Meta card */
.sbMeta {
  padding: 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.sbMeta .muted {
  color: var(--muted);
  font-size: 12.5px;
}

.sbMeta .k {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}

.sbMeta .k span {
  color: var(--muted);
}

.sbMeta .k b {
  font-weight: 800;
}

/* Nav */
.sbNav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.navbtn {
  width: 100%;
  text-align: left;

  /* a little more left padding for the “dot” */
  padding: 12px 12px 12px 40px;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .11);

  /* layered background: subtle dot + premium surface */
  background:
    radial-gradient(12px 12px at 18px 50%, rgba(47, 111, 237, .22), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .070), rgba(255, 255, 255, .032));

  color: var(--text);
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 12px 28px rgba(0, 0, 0, .26);

  transition:
    transform .14s cubic-bezier(.2, .8, .2, 1),
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}

/* top gloss */
.navbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 55%);
  opacity: .16;
  pointer-events: none;
}

.navbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 237, .55);

  background:
    radial-gradient(12px 12px at 18px 50%, rgba(47, 111, 237, .34), transparent 62%),
    linear-gradient(180deg, rgba(47, 111, 237, .10), rgba(255, 255, 255, .030));

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(0, 0, 0, .32);
}

.navbtn.active {
  border-color: rgba(47, 111, 237, .72);

  background:
    radial-gradient(12px 12px at 18px 50%, rgba(47, 111, 237, .45), transparent 62%),
    linear-gradient(180deg, rgba(47, 111, 237, .16), rgba(255, 255, 255, .028));

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 18px 40px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(47, 111, 237, .18);
}

/* active left rail */
.navbtn.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .40), rgba(47, 111, 237, .62));
  opacity: .95;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* keyboard focus */
.navbtn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(47, 111, 237, .20),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(0, 0, 0, .32);
}

.navbtn,
.btn {
  letter-spacing: .15px;
}

/* Bottom */
.sbBottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Messages */
.msg {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}

/* Cards */
.card {
  border-radius: 30px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: var(--shadowA);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent);
  opacity: .22;
  pointer-events: none;
}

.card h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .2px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(236, 243, 255, .78);
}

.muted {
  color: var(--muted);
}

.divider {
  height: 1px;
  margin: 16px 0;
  background: rgba(255, 255, 255, .10);
}

/* Section scaffolding inside cards */
.card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  /* separation between groups */
}

.card h3::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06), transparent);
  opacity: .9;
}

/* don’t push the first section down too far */
.card h2+.muted+.divider+h3,
.card h2+.muted+h3,
.card h2+h3 {
  margin-top: 14px;
}

/* give form groupings a subtle container when you use grid2 */
.card .grid2 {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Layout helpers */
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rowInline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Inputs */
label {
  display: flex;
  flex-direction: column;
  gap: 7px;

  font-size: 11.5px;
  letter-spacing: .10em;
  color: rgba(243, 241, 234, .72);
}

input,
select,
textarea {
  font-family: var(--font);
  color: var(--text);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(0, 0, 0, .26);
  padding: 11px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

textarea {
  resize: vertical;
  min-height: 86px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(47, 111, 237, .70);
  box-shadow: 0 0 0 4px rgba(47, 111, 237, .18);
  background: rgba(0, 0, 0, .32);
}

/* Buttons */
.btn {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  transition:
    transform .14s cubic-bezier(.2, .8, .2, 1),
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: -45% -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .26), transparent 55%);
  opacity: .16;
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 237, .55);
  background: rgba(47, 111, 237, .10);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
}

.btn.primary {
  border-color: rgba(47, 111, 237, .62);
  background: linear-gradient(180deg, rgba(47, 111, 237, .24), rgba(47, 111, 237, .10));
}

.btn.mini {
  padding: 7px 10px;
  border-radius: 14px;
  font-size: 12px;
  letter-spacing: .02em;
}

/* details summary should look like a button */
details>summary {
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

/* Danger button */
.btn.danger {
  border-color: rgba(239, 68, 68, .55);
  background: linear-gradient(180deg, rgba(239, 68, 68, .20), rgba(239, 68, 68, .08));
}

.btn.danger:hover {
  border-color: rgba(239, 68, 68, .80);
  background: rgba(239, 68, 68, .14);
}

/* Lists */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  padding: 13px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .18);
  transition:
    transform .14s cubic-bezier(.2, .8, .2, 1),
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.item:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, .40);
  background: rgba(96, 165, 250, .10);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.itemTitle {
  font-weight: 850;
  letter-spacing: .15px;
}

.itemMeta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------------- Dashboard v2 layout ---------------- */

.dashGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

/* column spans */
.dashSpan5 {
  grid-column: span 5;
}

.dashSpan7 {
  grid-column: span 7;
}

/* KPI rows */
.kpiRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 1200px) {
  .kpiRow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpiRowMini {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* KPI tile */
.kpi {
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .18);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  min-height: 84px;
  overflow: hidden;
}

.kpi .k {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.kpi .v {
  font-weight: 900;
  font-size: 19px;
  margin-top: 6px;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
}

.kpi .s {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* KPI tones */
.kpi.good {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .08);
}

.kpi.warn {
  border-color: rgba(249, 115, 22, .35);
  background: rgba(249, 115, 22, .08);
}

.kpi.bad {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .08);
}

.kpi.info {
  border-color: rgba(59, 130, 246, .30);
  background: rgba(59, 130, 246, .08);
}

/* Dashboard KPI customization */
.kpiRow.customize .kpi {
  cursor: grab;
}

.kpiRow.customize .kpi:active {
  cursor: grabbing;
}

.kpi.dragging {
  opacity: .65;
  outline: 2px dashed rgba(255, 255, 255, .25);
  outline-offset: 4px;
}

.kpiHide {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .25);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
}

.kpiRow.customize .kpiHide {
  display: block;
}

.kpi {
  position: relative;
  /* required for the hide button */
}

/* Charts + totals layout */
.dashCharts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashChartRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dashChartHalf {
  min-width: 0;
}

.chartWrap.chartLg {
  height: 320px;
}

.chartWrap.chartSm {
  height: 240px;
}

.dashLists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rainWrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.rainWrap input {
  flex: 1;
}

.rainPill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.rainPill input {
  accent-color: #7dd3fc;
}

.prodMini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.prodMini .span2 {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .prodMini {
    grid-template-columns: 1fr;
  }

  .prodMini .span2 {
    grid-column: span 1;
  }
}

/* Responsive */
@media (max-width: 1020px) {
  .dashGrid {
    grid-template-columns: 1fr;
  }

  .dashSpan5,
  .dashSpan7 {
    grid-column: auto;
  }

  .dashLists {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .kpiRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpiRowMini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashChartRow {
    grid-template-columns: 1fr;
  }
}

/* Thumbs */
.thumbRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.thumb {
  width: 160px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.thumb .tname {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  word-break: break-word;
}

.thumb .tbtn {
  margin-top: 8px;
  width: 100%;
  font-size: 12px;
  padding: 9px 10px;
}

/* Map */
.map {
  height: 380px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  background: rgba(0, 0, 0, .22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

/* Responsive */
@media (max-width: 1020px) {
  .dashGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 4;
  }

  .main {
    padding: 14px;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .dashGrid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   Mobile-first polish (feels like an app)
--------------------------------------------------------- */

/* Better tap targets everywhere */
@media (hover: none) and (pointer: coarse) {

  .navbtn,
  .btn {
    min-height: 46px;
  }

  input,
  select,
  textarea {
    min-height: 46px;
    font-size: 16px;
    /* prevents iOS zoom on focus */
  }
}

/* Phones */
@media (max-width: 560px) {

  /* reduce overall padding so things breathe */
  .main {
    padding: 12px;
  }

  .wrap {
    max-width: 100%;
  }

  /* sidebar becomes a compact top bar */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 12px;
    gap: 10px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0 0 22px 22px;
  }

  /* brand row tighter */
  .sbBrand {
    padding: 10px;
    border-radius: 20px;
  }

  .sbLogo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  /* hide the meta card on phones (optional but recommended) */
  .sbMeta {
    display: none;
  }

  /* nav becomes a 2-column grid so it doesn’t take a whole screen */
  .sbNav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* pills tighten up; remove extra left padding if you added the dot */
  .navbtn {
    padding: 12px 12px;
    border-radius: 16px;
    font-size: 13.5px;
  }

  /* cards less “desktop blocky” */
  .card {
    padding: 16px;
    border-radius: 22px;
  }

  /* headers scale down */
  .card h2 {
    font-size: 20px;
  }

  /* force grids to single column */
  .grid2 {
    grid-template-columns: 1fr;
  }

  /* KPI grid to 2 across, then 1 across on very small */
  .dashGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .sbNav {
    grid-template-columns: 1fr;
  }

  .dashGrid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   Asset modal (opens when clicking a map dot)
--------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
}

.modalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
}

.modalCard {
  position: relative;
  /* smaller, less "take over the whole screen" */
  width: min(640px, 94vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 11, 16, .92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.modalTitle {
  font-weight: 900;
  letter-spacing: .2px;
}

.modalBody {
  padding: 14px;
  overflow: auto;
  max-height: calc(90vh - 64px);
}

/* Assets page: we use the popup now, so hide the docked panel under the map */
#viewAssets #assetBottomGrid {
  grid-template-columns: 1fr;
}

#viewAssets #assetDetailPanel {
  display: none;
}

#assetModalBody #assetDetailPanel {
  display: block;
}

body.modalOpen {
  overflow: hidden;
}

#assetDetailPanelGhost {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .03);
}

/* ---------------------------------------------------------
   Daily Log helper: allow a field to span both columns
--------------------------------------------------------- */
.grid2 .span2 {
  grid-column: 1 / -1;
}

/* Assets list: slightly tighter so rows don’t eat the page */
#assetList .item {
  padding: 10px 12px;
}

#assetList .itemMeta {
  margin-top: 4px;
  font-size: 12px;
}

/* Asset markers (shape by type) using Leaflet divIcon */
/* Keep the checkmark upright on diamonds */
.assetMark.diamond.complete::after {
  transform: rotate(-45deg);
}

/* Counter (top-right) */
.assetCounter {
  background: rgba(10, 10, 10, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.assetCounter .lbl {
  opacity: .75;
  letter-spacing: .02em;
}

.assetCounter .n {
  font-weight: 900;
}

/* Cluster icons (heat-map feel as you zoom out) */
.assetClusterWrap {
  background: transparent !important;
  border: none !important;
}

.assetClusterIcon {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}

.assetClusterIcon span {
  font-size: 13px;
}

/* cluster intensity tiers */
.assetClusterIcon.c1 {
  background: radial-gradient(circle at 30% 30%,
      rgba(34, 197, 94, .60),
      rgba(34, 197, 94, .20) 65%,
      rgba(0, 0, 0, .10));
}

.assetClusterIcon.c2 {
  background: radial-gradient(circle at 30% 30%,
      rgba(59, 130, 246, .62),
      rgba(59, 130, 246, .22) 65%,
      rgba(0, 0, 0, .10));
}

.assetClusterIcon.c3 {
  background: radial-gradient(circle at 30% 30%,
      rgba(251, 191, 36, .65),
      rgba(251, 191, 36, .25) 65%,
      rgba(0, 0, 0, .10));
}

.assetClusterIcon.c4 {
  background: radial-gradient(circle at 30% 30%,
      rgba(239, 68, 68, .62),
      rgba(239, 68, 68, .22) 65%,
      rgba(0, 0, 0, .10));
}

.asset-div-icon {
  background: transparent !important;
  border: none !important;
}

.assetMark {
  width: 18px;
  height: 18px;
  border: 3px solid var(--stroke, #fff);
  background: var(--fill, #fff);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  opacity: .95;
}

.assetMark.complete {
  width: 20px;
  height: 20px;
}

.assetMark.circle {
  border-radius: 50%;
}

.assetMark.square {
  border-radius: 3px;
}

.assetMark.diamond {
  transform: rotate(45deg);
  border-radius: 3px;
}

.assetMark.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tomorrowBrief {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .22);
  border-radius: 16px;
  padding: 14px;
}

.tomorrowBrief .tbHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.tomorrowBrief .tbTitle {
  font-weight: 900;
  font-size: 16px;
}

.tomorrowBrief .tbPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tomorrowBrief .tbPill {
  font-size: 12px;
  color: rgba(255, 255, 255, .80);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
}

.tomorrowBrief .tbSection {
  margin-top: 14px;
}

.tomorrowBrief .tbSectionTitle {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 6px;
}

.tomorrowBrief ul {
  margin: 0;
  padding-left: 18px;
}

.tomorrowBrief li {
  margin: 4px 0;
}

#assetNotes {
  width: 100%;
  min-height: 44px;
  height: 44px;
  resize: none;
}

.pwField {
  position: relative;
  display: flex;
  align-items: center;
}

.pwField input {
  width: 100%;
  padding-right: 44px;
}

.pwToggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: rgba(255, 255, 255, .75);
}

.pwToggle:hover {
  color: #fff;
}

.gridProd {
  display: grid;
  grid-template-columns: 1.3fr .5fr 1.5fr auto;
  gap: 10px;
  align-items: end;
}

.gridProd input {
  width: 100%;
}

.leaflet-control-layers {
  background: rgba(15, 15, 20, .92) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
}

.leaflet-control-layers label {
  color: rgba(255, 255, 255, .85) !important;
}

.card>* {
  position: relative;
  z-index: 1;
}

.rowBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gridCrew {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1fr) 72px 72px auto;
  gap: 10px;
  align-items: end;
}

.gridCrew>* {
  min-width: 0;
}

@media (max-width: 980px) {
  .gridCrew {
    grid-template-columns: 1fr 1fr;
  }

  .gridCrew .c_remove {
    grid-column: 1 / -1;
  }
}

.gridEquip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 90px auto;
  gap: 10px;
  align-items: end;
}

.gridEquip>* {
  min-width: 0;
}

@media (max-width: 980px) {
  .gridEquip {
    grid-template-columns: 1fr 90px;
  }

  .gridEquip .e_remove {
    grid-column: 1 / -1;
  }
}

.miniLab {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}

.miniLab input {
  margin-top: 4px;
}

.pillRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pillDesc {
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewRates h3 {
  margin-top: 6px;
}

.rateRowGrid {
  display: grid;
  grid-template-columns: 74px minmax(180px, 1fr) 48px 84px 120px;
  gap: 8px;
  align-items: center;
}

.rateAct {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.rateType,
.rateUnit {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  white-space: nowrap;
}

.rateName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.rateVal {
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.rateRow {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
}

.rateRow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, .18);
}

.rateRow.rate-labor::before {
  background: rgba(47, 111, 237, .85);
}

.rateRow.rate-equipment::before {
  background: rgba(245, 158, 11, .85);
}

.rateRow.rate-material::before {
  background: rgba(34, 197, 94, .85);
}

.rateRow.rate-other::before {
  background: rgba(167, 139, 250, .85);
}

.rateRow:hover {
  border-color: rgba(255, 255, 255, .20);
  background: rgba(0, 0, 0, .24);
}

.leaflet-control-layers {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(10, 11, 16, .92) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
}

.leaflet-control-layers-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
}

.leaflet-control-layers-expanded {
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

.pwToggle {
  z-index: 5;
}

.miniSel {
  max-width: 220px;
  height: 38px;
  padding: 0 10px;
}

.leaflet-control-layers {
  background: rgba(10, 10, 14, .92) !important;
  color: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45) !important;
}

.leaflet-control-layers label {
  font-size: 13px;
}

.leaflet-control-layers-toggle {
  filter: brightness(1.15);
}

/* ------------------------------
   DASHBOARD KPI TILE CLEANUP
   (scoped to #dashKpis only)
-------------------------------- */

#dashKpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

#dashKpis .kpi {
  padding: 10px 12px;
  min-height: 92px;
  border-radius: 18px;
}

/* stop mid-word and mid-number wrapping */
#dashKpis .kpi,
#dashKpis .kpi * {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* most of your “big number” elements are bold/strong or the 2nd line in the tile */
#dashKpis .kpi b,
#dashKpis .kpi strong {
  font-size: 22px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

/* tighten the small header text */
#dashKpis .kpi .muted,
#dashKpis .kpi small {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

/* if any tile uses inline spans/divs for values, keep them on one line */
#dashKpis .kpi span,
#dashKpis .kpi div {
  max-width: 100%;
}

/* optional: tighten spacing inside tiles if your template uses rows */
#dashKpis .kpi .row {
  gap: 6px;
}

/* ------------------------------
   DAILY LOG: STOP RIGHT-OVERFLOW
   (scoped to #viewDaily only)
-------------------------------- */

#viewDaily,
#viewDaily * {
  box-sizing: border-box;
}

#viewDaily {
  max-width: 100%;
  overflow-x: hidden;
  /* prevents accidental sideways scroll */
}

/* inputs/selects inside grid need min-width:0 to shrink */
#viewDaily input,
#viewDaily select,
#viewDaily textarea {
  min-width: 0;
  max-width: 100%;
}

/* if your daily log uses grid2, make it responsive instead of fixed */
#viewDaily .grid2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* crew/equipment/downtime rows: force them to wrap instead of overflow */
#viewDaily .crewRow,
#viewDaily .equipRow,
#viewDaily .downRow {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* “Add row” buttons should not push width */
#viewDaily button {
  max-width: 100%;
}

/* if any row uses a flex container, allow wrapping */
#viewDaily .row {
  flex-wrap: wrap;
}

/* ------------------------------
   RATE SHEETS ROW: READABLE TYPE
-------------------------------- */

.rateAct .btn {
  padding: 6px 10px;
  font-size: 12px;
}

#dashKpis.kpiRow {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

/* =========================================================
   DAILY LOGS — AUTO RESPONSIVE + ALIGNMENT (drop-in)
   - 4 columns when wide, wraps to 2/1 when narrow
   - fixes rain pill height + weather field vertical alignment
   - makes crew/equip/downtime rows wrap instead of overflow
========================================================= */

#viewDaily,
#viewDaily * {
  box-sizing: border-box;
}

#viewDaily {
  max-width: 100%;
  overflow-x: hidden;
}

#viewDaily input,
#viewDaily select,
#viewDaily textarea {
  min-width: 0;
  max-width: 100%;
}

/* The main form grids (top row + summary/plans) */
#viewDaily .grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: end;
}

/* Yesterday production grid */
#viewDaily .prodMini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
}

#viewDaily .prodMini .span2 {
  grid-column: span 2;
}

@media (max-width: 760px) {
  #viewDaily .prodMini .span2 {
    grid-column: 1 / -1;
  }
}

/* Make label text not push inputs down */
#viewDaily label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#viewDaily label>span,
#viewDaily .miniLab {
  line-height: 1.1;
}

/* Weather + Rain control */
#viewDaily .rainWrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

#viewDaily #weatherHours {
  height: 44px;
}

#viewDaily .rainPill {
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#viewDaily .rainPill input[type="checkbox"] {
  margin: 0;
  transform: scale(1.05);
}

/* CREW rows */
.gridCrew {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(160px, 1fr) 80px 80px 96px;
  gap: 10px;
  align-items: end;
}

.gridCrew>* {
  min-width: 0;
}

.gridCrew input,
.gridCrew select {
  height: 44px;
}

@media (max-width: 980px) {
  .gridCrew {
    grid-template-columns: 1fr 1fr;
  }

  .gridCrew .c_remove {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .gridCrew {
    grid-template-columns: 1fr;
  }

  .gridCrew .c_remove {
    grid-column: 1;
    justify-self: stretch;
  }
}

/* EQUIPMENT rows */
.gridEquip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 96px 96px;
  gap: 10px;
  align-items: end;
}

.gridEquip>* {
  min-width: 0;
}

.gridEquip input,
.gridEquip select {
  height: 44px;
}

@media (max-width: 760px) {
  .gridEquip {
    grid-template-columns: 1fr 110px;
  }

  .gridEquip .e_remove {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .gridEquip {
    grid-template-columns: 1fr;
  }

  .gridEquip .e_remove {
    grid-column: 1;
    justify-self: stretch;
  }
}

/* DOWNTIME rows */
.gridDown {
  display: grid;
  grid-template-columns: 190px 120px 120px 140px minmax(160px, 1fr) minmax(180px, 1fr) 96px;
  gap: 10px;
  align-items: end;
}

.gridDown>* {
  min-width: 0;
}

.gridDown input,
.gridDown select {
  height: 44px;
}

.gridDown .d_hours {
  text-align: right;
}

.gridDown .miniLab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
}

@media (max-width: 1200px) {
  .gridDown {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .gridDown .d_remove {
    justify-self: end;
  }
}

@media (max-width: 780px) {
  .gridDown {
    grid-template-columns: 1fr 1fr;
  }

  .gridDown .d_remove {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .gridDown {
    grid-template-columns: 1fr;
  }

  .gridDown .d_remove {
    grid-column: 1;
    justify-self: stretch;
  }
}

/* ==============================
   PILLS (GLOBAL)
   - works for .pillChk (toggle pills)
   - works for label.pill (rain day)
   - works for span.pill (tags like ARCHIVED / WO / etc.)
============================== */

:root {
  --pillBorder: rgba(255, 255, 255, .26);
  --pillBgTop: rgba(255, 255, 255, .18);
  --pillBgBot: rgba(255, 255, 255, .08);
  --pillText: rgba(255, 255, 255, .93);
  --pillInset: inset 0 1px 0 rgba(255, 255, 255, .16);
  --pillShadow: 0 10px 20px rgba(0, 0, 0, .40);
  --pillHoverBorder: rgba(255, 255, 255, .38);

  --pillSelBorder: rgba(47, 111, 237, .90);
  --pillSelBgTop: rgba(47, 111, 237, .42);
  --pillSelBgBot: rgba(47, 111, 237, .14);
  --pillSelGlow: 0 0 18px rgba(47, 111, 237, .22);
}

/* --- Toggle pills (.pillChk) --- */
.pillChk {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.pillChk input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --- Label pills (label.pill) like Rain day --- */
label.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

label.pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --- Static pills (span.pill) like ARCHIVED / WO / etc. --- */
span.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--pillBorder);
  background: linear-gradient(180deg, var(--pillBgTop), var(--pillBgBot));
  color: var(--pillText);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  box-shadow: var(--pillInset), var(--pillShadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* --- Visual skin for toggle pill text --- */
.pillChk span,
label.pill>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--pillBorder);
  background: linear-gradient(180deg, var(--pillBgTop), var(--pillBgBot));
  color: var(--pillText);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  box-shadow: var(--pillInset), var(--pillShadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.pillChk:hover span,
label.pill:hover>span {
  border-color: var(--pillHoverBorder);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09));
}

.pillChk:active span,
label.pill:active>span {
  transform: translateY(1px);
}

.pillChk input:checked+span,
label.pill>input:checked+span {
  border-color: var(--pillSelBorder);
  background: linear-gradient(180deg, var(--pillSelBgTop), var(--pillSelBgBot));
  box-shadow: var(--pillInset), 0 12px 24px rgba(0, 0, 0, .45), var(--pillSelGlow);
}

/* keyboard focus */
.pillChk input:focus-visible+span,
label.pill>input:focus-visible+span {
  outline: 2px solid rgba(47, 111, 237, .55);
  outline-offset: 2px;
}

/* Asset marker: add checkmark for Complete */
.assetMark {
  position: relative;
}

.assetMark.complete::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Map legend overlay */
.assetLegend {
  background: rgba(10, 10, 10, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 10px 10px 8px;
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  max-width: 260px;
}

.assetLegend .legTitle {
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.assetLegend .legHdr {
  font-weight: 800;
  font-size: 11px;
  margin-top: 8px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .82);
}

.assetLegend .legRow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin: 4px 0;
}

.assetLegend .assetMark {
  width: 14px;
  height: 14px;
  border-width: 3px;
  box-shadow: none;
}

.assetLegend .legNote {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
}

/* Dashboard top row alignment + layout toggle */
.dashTopRow {
  align-items: flex-end;
  gap: 10px;
}

.dashTopRow .btn,
.dashTopRow select {
  height: 34px;
  padding: 6px 12px;
  line-height: 1.2;
}

.dashTopRow select {
  padding-right: 34px;
  min-width: 140px;
}

/* Dashboard layout modes */
#viewDash.dashStack .dashGrid {
  grid-template-columns: 1fr;
}

#viewDash.dashStack .dashSpan5,
#viewDash.dashStack .dashSpan7 {
  grid-column: 1 / -1;
}

#viewDash.dashStack .kpiRow {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

#viewDash .dashControls {
  align-items: flex-end;
}

#viewDash .dashControls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#viewDash .dashControls select,
#viewDash .dashControls button {
  height: 34px;
}

/* Legend: collapsible + tighter */
.assetLegend {
  padding: 10px 10px 8px;
  min-width: 210px;
  max-width: 260px;
}

.assetLegend .legHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  margin-bottom: 8px;
}

.assetLegend.collapsed .legBody {
  display: none;
}

.assetLegend .legTitle {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}

.assetLegend .legCaret {
  opacity: .8;
  font-size: 12px;
}

.assetLegend .legGroup {
  margin-top: 8px;
}

.assetLegend .legHdr {
  font-size: 11px;
  opacity: .8;
  margin: 6px 0 6px;
  letter-spacing: .02em;
}

.assetLegend .legRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 4px 0;
}

.assetLegend .legSwatch {
  position: relative;
  width: 14px;
  height: 14px;
  background: var(--fill);
  border: 2px solid var(--stroke);
  border-radius: 4px;
  box-sizing: border-box;
}

.assetLegend .legSwatch.locBadge::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--loc);
  border: 1px solid rgba(0, 0, 0, .35);
  box-sizing: border-box;
}

.attTbl {
  display: grid;
  gap: 6px;
}

.attRow {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1.6fr .7fr .8fr .5fr;
  gap: 8px;
  align-items: center;
}

.attHead {
  opacity: .75;
  font-size: 12px;
  padding: 0 2px;
}

.btn.mini {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* Safety Tailboard – Hazards table */
.tbHazTbl {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.tbHazHead {
  display: grid;
  grid-template-columns: 44px 1.4fr 2.2fr;
  gap: 10px;
  opacity: .78;
  font-size: 12px;
  padding: 0 4px;
}

.tbHazRow {
  display: grid;
  grid-template-columns: 44px 1.4fr 2.2fr;
  gap: 10px;
  align-items: center;
}

.tbHazChk {
  display: flex;
  justify-content: center;
}

.tbHazLbl {
  color: rgba(243, 241, 234, .86);
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* --- Safety tailboard compact layout (scoped) --- */
#viewSafety .cardSub .grid2 {
  padding: 10px;
  gap: 8px;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

#viewSafety .cardSub label {
  gap: 5px;
}

#viewSafety .cardSub input,
#viewSafety .cardSub select {
  height: 34px;
  padding: 7px 10px;
}

#viewSafety .cardSub .pillChk span {
  line-height: 1.1;
}

/* Hazards table slightly tighter too (optional but helps overall height) */
#viewSafety .tbHazTbl {
  padding: 10px;
  gap: 6px;
}

#viewSafety .tbHazRow {
  gap: 8px;
}

#viewSafety .tbHazRow input {
  height: 32px;
  padding: 6px 10px;
}

/* Bottom submit stays visible as you scroll */
#viewSafety .safetyBottomBar {
  position: sticky;
  bottom: 10px;
  padding-top: 10px;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

/* ------------------------------
   SAFETY VIEW – polish + color
------------------------------ */
#viewSafety .cardSub {
  border: 1px solid rgba(47, 111, 237, .14);
  background: linear-gradient(180deg, rgba(47, 111, 237, .05), rgba(0, 0, 0, .14));
}

#viewSafety .cardSub h3 {
  position: relative;
  padding-left: 12px;
}

#viewSafety .cardSub h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(47, 111, 237, .95), rgba(34, 197, 94, .75));
}

/* Make dividers less plain */
#viewSafety .divider {
  background: linear-gradient(90deg, rgba(47, 111, 237, .22), rgba(255, 255, 255, .08), rgba(34, 197, 94, .18));
  opacity: .9;
}

/* Checkbox accent color */
#viewSafety input[type="checkbox"] {
  accent-color: var(--royal);
}

/* Hazards table: add subtle “checked” highlight without wrecking layout */
#viewSafety .tbHazRow {
  border-radius: 14px;
  padding: 4px 6px;
}

#viewSafety .tbHazRow:has(.tbHazChk input:checked) {
  outline: 1px solid rgba(47, 111, 237, .20);
  background: rgba(47, 111, 237, .05);
}

/* --- Safety pills (compact, NOT full-width bars) --- */
#viewSafety .pillGrid2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#viewSafety .pillChk {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  max-width: 100%;
  padding: 0;
  /* keep padding on the span */
  border: none;
  background: transparent;
}

#viewSafety .pillChk input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#viewSafety .pillChk span {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewSafety .pillChk input:checked+span {
  border-color: rgba(47, 111, 237, .55);
  background: linear-gradient(180deg, rgba(47, 111, 237, .24), rgba(47, 111, 237, .08));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}

/* Energy section layout */
#viewSafety .energyGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 10px;
}

@media (max-width: 980px) {
  #viewSafety .energyGrid {
    grid-template-columns: 1fr;
  }
}

#viewSafety .energyCard {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .10);
  border-radius: 18px;
  padding: 10px;
}

#viewSafety .energyHdr {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 8px;
}

/* Hazards grid: 2 columns */
#viewSafety .tbHazGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

#viewSafety .tbHazItem {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .10);
  border-radius: 18px;
  padding: 10px;
  overflow: hidden;
}

#viewSafety .tbHazItem input {
  width: 100%;
  height: 34px;
  padding: 7px 10px;
  margin-top: 8px;
}