/* Shared chrome for the GTM command center mockups. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  color: #18181b;
  background: #f4f4f5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* These dashboards are designed for a desktop window. Inside a case-study frame
   there is nowhere near that much room, so the page is laid out at its real
   width and zoomed to fit instead of being reflowed into something the team
   never actually used. */
.app { min-width: 1440px; min-height: var(--vh, 100vh); }

/* --- sidebar ------------------------------------------------------------- */

/* Fixed, not sticky: the nav has to stay a full viewport tall however far the
   report behind it scrolls, or its footer rides up into the report list. */
.sb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 276px;
  height: var(--vh, 100vh);
  display: flex;
  flex-direction: column;
  background: #272727;
  color: #fff;
}

.sb-head { height: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sb-brand { display: flex; align-items: center; height: 56px; color: #ff6f47; }
.sb-word { display: block; height: 14px; margin-left: -2px; }
.sb-icon { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; }
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

.sb-search,
.sb-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

.sb-search:hover, .sb-item:hover { background: rgba(0, 0, 0, 0.3); color: #fff; }
.sb-item.active { background: #000; color: #fff; }
.sb-search .f, .sb-item .f { flex: 1; text-align: left; }

kbd {
  margin-right: 16px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.badge {
  margin-right: 16px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ff6f47;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.sb-rule { margin: 8px 16px; height: 1px; background: rgba(255, 255, 255, 0.1); }

.grp {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.grp:hover { color: rgba(255, 255, 255, 0.7); }
.grp .f { flex: 1; }
.grp .n { font-weight: 400; color: rgba(255, 255, 255, 0.25); }
.grp[aria-expanded="true"] .n { display: none; }
.grp .chev { flex: none; transition: transform 0.15s; }
.grp[aria-expanded="true"] .chev { transform: rotate(90deg); }

.rep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 26px;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.65);
}

.rep .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep .ic { display: flex; align-items: center; justify-content: center; width: 15px; flex: none; opacity: 0.75; }
.rep.live { cursor: pointer; }
.rep.live:hover { background: rgba(0, 0, 0, 0.3); color: #fff; }
.rep.active { background: #000; color: #fff; }
.rep.active .ic { opacity: 1; }

/* --- main column --------------------------------------------------------- */

.main { margin-left: 276px; }

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 24px;
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
}

.top h1 { margin: 0; font-size: 16px; font-weight: 600; color: rgb(75, 72, 72); white-space: nowrap; }

.fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #a1a1aa; white-space: nowrap; }
.fresh::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22c55e; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: #3f3f46;
  cursor: pointer;
}

.btn:hover { background: #fafafa; }

.card { border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; }

/* The filter bar sits under the sticky header and bleeds into the page
   background above and below it, exactly as in the app. */
.filters {
  position: sticky;
  top: 56px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 0 0 #f4f4f5, 0 -16px 0 0 #f4f4f5;
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; font-weight: 600; color: #a1a1aa; }

select, .fake-select {
  padding: 6px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: #3f3f46;
  cursor: pointer;
}

.count { margin-left: auto; font-size: 12px; color: #a1a1aa; }

.note { max-width: 760px; margin: 12px 0 0; font-size: 12px; color: #a1a1aa; }
.note code { padding: 1px 4px; border-radius: 4px; background: #f4f4f5; color: #52525b; font-size: 11px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 8px; background: #fafafa; font-weight: 600; color: #71717a; text-align: left; white-space: nowrap; }
td { padding: 8px; border-top: 1px solid #f4f4f5; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.pill.green { background: #ecfdf5; color: #047857; }
.pill.amber { background: #fffbeb; color: #b45309; }
.pill.red { background: #fef2f2; color: #b91c1c; }
.pill.zinc { background: #f4f4f5; color: #52525b; }
.pill.blue { background: #eff6ff; color: #1d4ed8; }