/* ============================================================
   KEEYNET dashboard — Overview, dense light layout
   ------------------------------------------------------------
   The page today: a centred "Welcome back / Loading your
   profile…", three stat cards reading em-dashes, and then a
   flat column with no cards at all — because app.css:586
   defines .content-card as a real card (surface, border,
   shadow) and app.css:5893 strips every bit of that back out
   with !important. Everything ends up at the same visual
   weight, so nothing reads as more important than anything
   else.

   This restores the card treatment the design system already
   describes, left-aligns the heading, tightens the rhythm and
   styles the health card that overview-studio.js inserts.

   Written in the existing design tokens, so Green / Black /
   Dull White all follow. Scoped to #overview.

   To remove: delete the <link> and <script> tags.
   ============================================================ */


/* ---------- heading ------------------------------------------- */

/* dashboard-r5.css turns #overview into a flex column and
   assigns an explicit order to each child. Anything inserted
   without an order defaults to 0 and jumps to the top, which is
   why the health card and the activity row landed in the wrong
   places. These put every child back in a deliberate sequence. */
#overview > .workspace-heading { order: 0 !important; }
#overview > #dashboard-message { order: 1 !important; }
#overview > .summary-grid { order: 2 !important; }
#overview > .ovs-health { order: 3; }
#overview > .r5-devices { order: 4 !important; }
#overview > .overview-device-action-card { order: 5 !important; }
#overview > .ovs-row { order: 6; }


/* The heading is a space-between flex row whose text sits
   centred; no other page in the console does that. */
#overview .workspace-heading {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;

  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 14px !important;
}

/* The inner block is a COLUMN flex with align-items: center,
   which centres each line on the cross axis — that, not
   text-align, is what centred the title. */
#overview .workspace-heading > div {
  align-items: flex-start !important;
  text-align: left !important;
}

#overview .workspace-heading h1,
#overview .workspace-heading p {
  text-align: left !important;
}

#overview .workspace-heading > div:first-child {
  min-width: 0 !important;
}

#overview .workspace-heading h1 {
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

#overview .workspace-heading p {
  margin: 4px 0 0 !important;
  font-size: 13.5px !important;
  color: var(--muted) !important;
}


/* ---------- cards, restored ----------------------------------- */

#overview .content-card {
  margin: 0 0 16px !important;
  padding: 20px 22px !important;

  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 16px !important;

  background: var(--surface) !important;
  box-shadow: var(--card-shadow) !important;
}


/* ---------- the stat row --------------------------------------- */

#overview .summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;

  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#overview .summary-card {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 20px !important;

  border: 1px solid var(--line) !important;
  border-radius: 14px !important;

  background: var(--surface) !important;
  box-shadow: none !important;
}

#overview .summary-card .card-topline {
  margin: 0 0 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted) !important;
}

#overview .summary-card .metric {
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

#overview .summary-card > p {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  color: var(--subtle) !important;
}


/* ---------- the health card ------------------------------------ */

#overview .ovs-health {
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 20px 22px;

  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

#overview .ovs-health-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

#overview .ovs-health-head h2 {
  margin: 0;
  flex: 1 1 220px;
  font-size: 15px;
  font-weight: 700;
}

#overview .ovs-head-note {
  font-size: 11.5px;
  color: var(--subtle);
}

#overview .ovs-health-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 18px;
}

#overview .ovs-health-figure {
  flex: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 11px;
  max-width: 260px;
}

#overview .ovs-health-figure .ovs-health-label {
  grid-column: 1 / -1;
}

#overview .ovs-health-value {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--text-tertiary);
}

#overview .ovs-health-label {
  font-size: 12.5px;
  color: var(--muted);
}

/* The same pill the device dialog uses, so "not built yet"
   looks the same everywhere. */
#overview .ovs-soon {
  display: inline-flex;
  align-items: center;

  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-soft);

  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--subtle);
  white-space: nowrap;
}

#overview .ovs-split-wrap {
  flex: 999 1 300px;
  min-width: 0;
}

#overview .ovs-split {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-soft);
}

#overview .ovs-split .is-empty {
  flex: 1;
  background: repeating-linear-gradient(
    135deg,
    var(--line-soft) 0 6px,
    transparent 6px 12px
  );
}

#overview .ovs-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 11px;
}

#overview .ovs-key-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

#overview .ovs-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

#overview .ovs-swatch.is-direct { background: var(--accent); }
#overview .ovs-swatch.is-relay { background: var(--warning); }
#overview .ovs-swatch.is-failed { background: var(--danger); }

#overview .ovs-health-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);

  font-size: 12px;
  line-height: 1.55;
  color: var(--subtle);
  max-width: 92ch;
}

#overview .ovs-health-note strong {
  font-weight: 700;
  color: var(--text-secondary);
}


/* ---------- section headings ----------------------------------- */

#overview .section-heading {
  margin-bottom: 14px !important;
  gap: 14px !important;
}

#overview .content-card h2 {
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}

#overview .eyebrow,
#overview .card-topline {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--subtle) !important;
}


/* ---------- the device table ------------------------------------ */

#overview .r5-table-wrap {
  margin-top: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;

  /* hidden clipped the table dead on a phone — the columns ran
     past the card with no way to reach them. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#overview .r5-table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#overview .r5-table-wrap thead th {
  padding: 10px 14px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line-soft);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--subtle);
  text-align: left;
  white-space: nowrap;
}

#overview .r5-table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

#overview .r5-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

#overview .r5-table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}


/* ---------- activity beside plan features ------------------------ */

#overview .ovs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

#overview .ovs-row > .r5-activity {
  flex: 999 1 420px;
  min-width: 0;
  margin: 0 0 16px !important;
}

#overview .ovs-row > .overview-services-card {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0 0 16px !important;
}

#overview .r5-activity ol {
  margin-top: 12px;
}

#overview .r5-activity li {
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

#overview .r5-activity li:first-child {
  border-top: 0;
}

#overview .r5-activity time {
  min-width: 150px;
  font-size: 12px;
  color: var(--text-tertiary);
}


/* ---------- the add-a-device card, now a footer ------------------ */

#overview .overview-device-action-card {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
}

/* A 320px flex-basis is a WIDTH only while the card is a row.
   At phone width app.css turns the card into a column, where the
   same basis becomes a 320px HEIGHT — which is the 250px of dead
   space above the Add device button on a phone. */
#overview .overview-device-action-copy {
  flex: 1 1 auto;
  min-width: 0;
}


/* ---------- narrow screens --------------------------------------- */

@media (max-width: 900px) {
  #overview .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #overview .summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #overview .r5-activity time {
    min-width: 0;
  }
}