/* ============================================================
   KEEYNET ops console — density layer (v4)
   ------------------------------------------------------------
   CSS only. No DOM changes, no JS.

   v4 fixes three things seen on the deployed Sessions page:

   1. .admin-main centres itself (max-width + margin:auto) and
      adds 38px of padding, which left a wide empty gutter
      between the sidebar and the panel while the table ran out
      of width on the right. It now uses the full column.
   2. Panel content sat ~8px from the panel border, so text read
      as if it were spilling out. The panel now has real inner
      padding, and horizontal cell padding is left generous.
   3. v2/v3 put max-height + sticky headers on .table-wrap, which
      created a second scrollbar inside the panel. Removed.

   To remove entirely: delete the <link> to this file.
   ============================================================ */


/* ---------- one continuous header band ---------------------- */

/* The topbar draws a 1px rule along its bottom edge, but it
   stopped at the sidebar, and the brand sat at y 22..90 across
   that line. Squaring the brand into the same 64px band makes a
   single header rule run the full width of the window. */

.admin-sidebar {
  padding-top: 0 !important;
}

.sidebar-brand {
  height: 64px !important;
  box-sizing: border-box !important;

  /* Cancels the sidebar's own horizontal padding so the band
     reaches both edges, the way the topbar does. */
  margin: 0 -15px 14px !important;
  padding: 0 24px !important;

  align-items: center !important;
  border-bottom: 1px solid var(--kn-border) !important;
}


/* ---------- use the full width ------------------------------ */

/* This is the empty space between the sidebar and the content.
   max-width + margin:auto centred the column; the table needs
   that width far more than the gutters do. */
.admin-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 18px 28px !important;
}


/* ---------- page title -------------------------------------- */

/* Stays inside <main>, where the page scripts expect it and
   where its left edge lines up with the panel below. Only the
   wasted height around it is removed. */
.workspace-heading {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  gap: 12px !important;
  align-items: center !important;
}

.workspace-eyebrow {
  margin-bottom: 1px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
}

.workspace-heading h1,
#admin-page-title {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
}

.workspace-heading p,
#admin-page-subtitle {
  margin: 2px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}


/* ---------- panel toolbars ---------------------------------- */

.panel-toolbar {
  padding: 9px 20px !important;
  gap: 10px 14px !important;
}

.platform-toolbar {
  margin-bottom: 10px !important;
}


/* ---------- keep panel content off the border --------------- */

/* The platform pages render their own headings, meta line and
   table straight into #platform-*-body. Without inner padding
   that content sits against the panel edge. */

[id^="platform-"][id$="-body"] {
  padding: 0 20px 18px !important;
}

[id^="platform-"][id$="-body"] > h2,
[id^="platform-"][id$="-body"] > h3 {
  margin: 18px 0 6px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

[id^="platform-"][id$="-body"] > p {
  margin: 0 0 12px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  max-width: 110ch;
}

/* The table inside a platform page scrolls sideways on its own
   rather than pushing text past the panel border. */
[id^="platform-"][id$="-body"] .table-wrap,
.platform-table-wrap {
  overflow-x: auto;
}


/* ---------- table density ----------------------------------- */

/* Vertical only. Horizontal padding is left generous so cells
   never crowd the panel edge. */
th,
td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* The platform tables (Sessions, Routes, Billing, Users …) ran
   ~150px wider than the panel, so the last column was cut off.
   Measured against the 9-column Sessions table: the uppercase
   column LABELS were driving the width, not the data — they were
   set at body size, and headings like "AUTHORITY CURRENT" and
   "SESSION REQUESTS" are long. Dropping the labels to 10px (the
   size the main console tables already use) reclaims ~135px and
   leaves ~118px of headroom, so the data stays at a readable
   12px instead of being shrunk. */

.platform-table th {
  padding: 8px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
}

.platform-table td {
  padding: 9px 8px !important;
  font-size: 12px !important;
}

/* Timestamps are the widest data; keeping them on one line stops
   rows growing taller now that the columns are narrower. */
.platform-table td {
  white-space: nowrap;
}

/* Anything genuinely long still wraps rather than pushing the
   table out again. */
.platform-table td.wrap,
.platform-table td[data-wrap] {
  white-space: normal;
}

td .muted,
.platform-table td small {
  margin-top: 1px !important;
  line-height: 1.3 !important;
}


/* ---------- short viewports --------------------------------- */

@media (max-height: 820px) {
  .admin-main {
    padding-top: 10px !important;
  }

  .workspace-heading {
    margin-bottom: 9px !important;
  }

  .workspace-heading h1,
  #admin-page-title {
    font-size: 20px !important;
  }
}