/* LilyJoTracker v0.2.7n37a — Dashboard Visual Cleanup
   Depends on n37 theme tokens when available.
   Dashboard-only: no layout/style changes on other Tracker modules.
*/

body.lilyjo-dashboard-n37a #content{
  --db37-gap:16px;
  --db37-card-pad:18px;
  --db37-radius:var(--lj-theme-radius-lg,18px);
  --db37-radius-sm:var(--lj-theme-radius-md,14px);
  --db37-surface:var(--lj-surface,#f4f9fb);
  --db37-surface-2:var(--lj-surface-2,#e8f3f6);
  --db37-border:var(--lj-border,#bfd7e0);
  --db37-border-strong:var(--lj-border-strong,#9fc2cf);
  --db37-text:var(--lj-text,#102b39);
  --db37-muted:var(--lj-muted,#607987);
  --db37-ocean:var(--lj-ocean,#0b789f);
  --db37-teal:var(--lj-teal,#168e9f);
  --db37-success:var(--lj-success,#15975f);
  --db37-warning:var(--lj-warning,#d99a23);
  color:var(--db37-text);
}

/* Keep Dashboard in a controlled reading width on very wide displays. */
body.lilyjo-dashboard-n37a #content.dashboard-cleanup-n37a{
  width:100%;
  max-width:1540px;
  margin:0 auto;
  padding-bottom:28px;
}

/* Consistent spacing between the Dashboard's existing two-column grids. */
body.lilyjo-dashboard-n37a #content .grid{
  gap:var(--db37-gap);
}
body.lilyjo-dashboard-n37a #content > .grid + .grid,
body.lilyjo-dashboard-n37a #content > * + .grid{
  margin-top:var(--db37-gap)!important;
}

/* Main Dashboard cards */
body.lilyjo-dashboard-n37a #content .card.db37-card{
  position:relative;
  overflow:hidden;
  padding:var(--db37-card-pad);
  border:1px solid var(--db37-border);
  border-radius:var(--db37-radius);
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--db37-surface) 96%,white 4%),
      color-mix(in srgb,var(--db37-surface-2) 70%,white 30%));
  box-shadow:0 8px 24px rgba(8,52,75,.07);
}

/* Very subtle nautical accent, same on every Dashboard card. */
body.lilyjo-dashboard-n37a #content .card.db37-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--db37-ocean),var(--db37-teal));
  opacity:.78;
}

body.lilyjo-dashboard-n37a #content .card.db37-card .card-title{
  display:flex;
  align-items:center;
  min-height:28px;
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid color-mix(in srgb,var(--db37-border) 72%,transparent);
  color:var(--db37-text);
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Metric tiles become one common size/typography system. */
body.lilyjo-dashboard-n37a #content .metric.db37-metric{
  min-width:0;
  min-height:92px;
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:1px solid color-mix(in srgb,var(--db37-border) 86%,transparent);
  border-radius:var(--db37-radius-sm);
  background:
    linear-gradient(150deg,
      color-mix(in srgb,var(--db37-surface-2) 76%,white 24%),
      color-mix(in srgb,var(--db37-surface) 96%,white 4%));
  box-shadow:none;
}

body.lilyjo-dashboard-n37a #content .metric.db37-metric small{
  display:block;
  margin:0;
  color:var(--db37-muted);
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.105em;
  text-transform:uppercase;
}

body.lilyjo-dashboard-n37a #content .metric.db37-metric :is(strong,b){
  min-width:0;
  color:var(--db37-text);
  font-size:22px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}

/* Position / primary navigation values get a restrained ocean accent. */
body.lilyjo-dashboard-n37a #content .db37-position-card .metric strong,
body.lilyjo-dashboard-n37a #content .db37-navigation-card .metric strong{
  color:color-mix(in srgb,var(--db37-ocean) 80%,var(--db37-text) 20%);
}

/* Top live-status row. */
body.lilyjo-dashboard-n37a #content .db37-live-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:62px;
  margin-bottom:16px;
  padding:12px 16px;
  border:1px solid var(--db37-border);
  border-radius:var(--db37-radius);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--db37-surface-2) 90%,white 10%),
      color-mix(in srgb,var(--db37-surface) 96%,white 4%));
  box-shadow:0 6px 18px rgba(8,52,75,.055);
}

body.lilyjo-dashboard-n37a #content .db37-live-strip > div:first-child{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

body.lilyjo-dashboard-n37a #content #db-live-state{
  color:var(--db37-text);
  font-size:15px;
  font-weight:800;
}

body.lilyjo-dashboard-n37a #content #db-runtime-note,
body.lilyjo-dashboard-n37a #content #db-age{
  color:var(--db37-muted);
  font-size:12px;
}

body.lilyjo-dashboard-n37a #content .status-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

body.lilyjo-dashboard-n37a #content .source-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--db37-ocean) 30%,transparent);
  background:color-mix(in srgb,var(--db37-ocean) 9%,white 91%);
  color:var(--db37-ocean);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.035em;
  white-space:nowrap;
}
body.lilyjo-dashboard-n37a #content .source-badge.live{
  background:color-mix(in srgb,var(--db37-success) 10%,white 90%);
  color:var(--db37-success);
  border-color:color-mix(in srgb,var(--db37-success) 28%,transparent);
}

/* Existing live dot becomes quieter but clearer. */
body.lilyjo-dashboard-n37a #content .live-dot{
  width:9px;
  height:9px;
  margin-right:2px;
  border-radius:50%;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--db37-muted) 9%,transparent);
}
body.lilyjo-dashboard-n37a #content .live-dot.ok{
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--db37-success) 12%,transparent),
    0 0 10px color-mix(in srgb,var(--db37-success) 28%,transparent);
}

/* Position metadata: one subdued footer line instead of floating labels. */
body.lilyjo-dashboard-n37a #content .position-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--db37-border) 70%,transparent);
  color:var(--db37-muted);
  font-size:11.5px;
}

/* Context rows aligned like a compact information table. */
body.lilyjo-dashboard-n37a #content .context-row{
  display:grid;
  grid-template-columns:minmax(110px,36%) minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:38px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--db37-border) 62%,transparent);
}
body.lilyjo-dashboard-n37a #content .context-row:last-child{
  border-bottom:0;
}
body.lilyjo-dashboard-n37a #content .context-row span{
  color:var(--db37-muted);
  font-size:12px;
}
body.lilyjo-dashboard-n37a #content .context-row strong{
  color:var(--db37-text);
  font-size:12.5px;
  text-align:right;
  overflow-wrap:anywhere;
}

/* Runtime/test notes use a calmer inset panel. */
body.lilyjo-dashboard-n37a #content .card.db37-runtime-card > .module-note{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--db37-border) 75%,transparent);
  background:color-mix(in srgb,var(--db37-surface-2) 68%,transparent);
  color:var(--db37-muted);
  line-height:1.4;
}

body.lilyjo-dashboard-n37a #content .test-badge{
  margin-left:auto;
  padding:5px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--db37-warning) 16%,white 84%);
  color:#8a6114;
  border:1px solid color-mix(in srgb,var(--db37-warning) 35%,transparent);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
}

/* Avoid excessively tall cards because a nested metric wraps. */
body.lilyjo-dashboard-n37a #content .db37-card > .grid{
  align-items:stretch;
}
body.lilyjo-dashboard-n37a #content .db37-card > .grid > .metric{
  height:100%;
}

/* Classic remains compatible: layout cleanup stays, palette falls back to the
   Classic variables/colors already supplied by the legacy Tracker CSS. */
html[data-tracker-theme="classic"] body.lilyjo-dashboard-n37a #content .card.db37-card{
  background:rgba(255,255,255,.96);
}
html[data-tracker-theme="classic"] body.lilyjo-dashboard-n37a #content .metric.db37-metric{
  background:#f8fbfc;
}

/* Responsive behaviour: no cramped two-column instrument panels on tablets. */
@media(max-width:1050px){
  body.lilyjo-dashboard-n37a #content > .grid.grid-2{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  body.lilyjo-dashboard-n37a #content{
    --db37-gap:12px;
    --db37-card-pad:14px;
  }
  body.lilyjo-dashboard-n37a #content .grid.grid-2{
    grid-template-columns:1fr;
  }
  body.lilyjo-dashboard-n37a #content .db37-live-strip{
    align-items:flex-start;
    flex-direction:column;
  }
  body.lilyjo-dashboard-n37a #content .status-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  body.lilyjo-dashboard-n37a #content .metric.db37-metric{
    min-height:78px;
  }
  body.lilyjo-dashboard-n37a #content .context-row{
    grid-template-columns:1fr;
    gap:3px;
  }
  body.lilyjo-dashboard-n37a #content .context-row strong{
    text-align:left;
  }
}