/* Peptide Plug shared consistency layer.
   Loaded after app.css so legacy page-specific patches cannot change the
   established component system. Functional selectors remain unchanged. */
:root{
  --pp-space-1:4px;
  --pp-space-2:8px;
  --pp-space-3:12px;
  --pp-space-4:16px;
  --pp-space-5:20px;
  --pp-control-height:38px;
  --pp-radius-control:9px;
  --pp-radius-card:14px;
  --pp-shadow-card:0 10px 28px var(--shadow);
}

/* Shared controls */
#app-shell .btn,
#app-shell button,
#app-shell input,
#app-shell select,
#app-shell textarea{
  box-sizing:border-box;
  font-family:inherit;
}
#app-shell .btn:not(.icon-btn),
#app-shell input:not([type="checkbox"]):not([type="radio"]),
#app-shell select{
  min-height:var(--pp-control-height);
  border-radius:var(--pp-radius-control);
}
#app-shell .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2;}
#app-shell .btn.small{min-height:30px;padding:5px 9px;}
#app-shell label{line-height:1.35;}

/* Shared surfaces and section rhythm */
#app-shell .card,
#app-shell .today-panel{
  border-radius:var(--pp-radius-card);
  box-sizing:border-box;
}
#app-shell .section-title{margin-top:var(--pp-space-5);margin-bottom:var(--pp-space-2);}
#app-shell .link-row{gap:var(--pp-space-2);}
#app-shell .empty,
#app-shell .mini-chart-empty{line-height:1.45;}

/* One table behavior across app sections */
#app-shell .table-wrap{width:100%;max-width:100%;box-sizing:border-box;}
#app-shell table{width:100%;border-collapse:collapse;}
#app-shell th{font-size:10px;line-height:1.25;letter-spacing:.045em;}
#app-shell td{line-height:1.35;}

/* One deep-dive structure for Levels, Labs, and Progress */
#tab-levels .dashboard-bubble-head,
#tab-labs .dashboard-bubble-head,
#tab-photos .dashboard-bubble-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--pp-space-3);
  margin:var(--pp-space-3) 0 var(--pp-space-2);
}
#tab-levels .dashboard-bubble-selector,
#tab-labs .dashboard-bubble-selector,
#tab-photos .dashboard-bubble-selector{
  width:100%;
  max-height:132px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--pp-space-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-sizing:border-box;
}
#tab-levels .trend-range-controls,
#tab-labs .trend-range-controls,
#tab-photos .trend-range-controls,
#tab-levels .dashboard-time-zoom,
#tab-labs .dashboard-time-zoom,
#tab-photos .dashboard-time-zoom{
  display:flex;
  align-items:flex-end;
  gap:var(--pp-space-2);
  flex-wrap:wrap;
}
#levels-deep-dive-workspace,
#lab-compare-chart,
#measurement-weight-chart{width:100%;min-width:0;}

/* Keep chart footers in document flow. */
#levels-deep-dive-chart,
#levels-deep-dive-chart .pk-chart-wrap,
#lab-compare-chart .progress-chart-interactive,
#measurement-weight-chart .progress-chart-interactive{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#levels-deep-dive-chart .trend-legend,
#lab-compare-chart .trend-legend,
#measurement-weight-chart .trend-legend,
#levels-deep-dive-workspace .level-chart-meta,
#lab-compare-chart .level-chart-meta,
#measurement-weight-chart .level-chart-meta,
#levels-deep-dive-workspace .comparison-unavailable,
#lab-compare-chart .comparison-unavailable,
#measurement-weight-chart .comparison-unavailable{
  position:relative !important;
  inset:auto !important;
  clear:both !important;
  height:auto !important;
  max-height:none !important;
}

/* Notification center follows the same card/action system. */
#notification-center .notification-center-item{
  border-radius:12px;
  padding:var(--pp-space-2);
}
#notification-center .notification-center-main{min-width:0;}
#notification-center .notification-center-actions{display:flex;gap:6px;flex-wrap:wrap;}

@media(max-width:760px){
  #app-shell .card{padding:14px;}
  #app-shell .section-title{margin-top:18px;}
  #app-shell .btn:not(.small):not(.icon-btn){min-height:42px;}
  #tab-levels .dashboard-bubble-head,
  #tab-labs .dashboard-bubble-head,
  #tab-photos .dashboard-bubble-head{align-items:flex-start;}
  #tab-levels .dashboard-bubble-selector,
  #tab-labs .dashboard-bubble-selector,
  #tab-photos .dashboard-bubble-selector{max-height:150px;}
  #app-shell .table-wrap.responsive-cards table,
  #app-shell .table-wrap.responsive-cards tbody,
  #app-shell .table-wrap.responsive-cards tr,
  #app-shell .table-wrap.responsive-cards td{width:100%;min-width:0;box-sizing:border-box;}
  #notification-center .notification-center-actions .btn{flex:1 1 110px;}
}


/* 2026-09 audit batch: denser catalog, clearer dashboard KPIs, and chart-area parity */
#tab-dashboard .dashboard-nav-card{
  position:relative;
  padding-bottom:38px;
  cursor:pointer;
}
#tab-dashboard .dashboard-kpi-open{
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  font-size:10px;
  font-weight:800;
  text-align:left;
  padding:0;
  cursor:pointer;
}
#tab-dashboard .dashboard-kpi-open:hover{text-decoration:underline;}
.dashboard-kpi-insight-value{font-size:30px;font-weight:850;letter-spacing:-.03em;color:var(--text);}

/* Dashboard and deep-dive charts should use the actual card width without oversized side gutters. */
#tab-dashboard .dashboard-chart-stage,
#tab-dashboard .progress-chart-interactive,
#tab-dashboard .pk-chart-wrap,
#tab-photos .deep-dive-chart-stage,
#tab-labs .lab-deep-dive-card .progress-chart-interactive,
#tab-levels #levels-deep-dive-chart{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}
#tab-dashboard .dashboard-chart-stage svg,
#tab-photos .deep-dive-chart-stage svg,
#tab-labs .lab-deep-dive-card svg,
#tab-levels #levels-deep-dive-chart svg{
  display:block;
  width:100%;
  max-width:none;
}
#tab-dashboard .response-card{overflow:visible;}
#tab-photos .progress-deep-dive-card,
#tab-labs .lab-deep-dive-card,
#tab-levels .levels-deep-dive-card{padding-bottom:14px;}

/* Catalog defaults to scan-first rows; editing appears only when requested. */
#tab-peptides .catalog-group-body{padding:4px 12px 10px;}
#tab-peptides .catalog-compact-row{border-top:1px solid var(--border);}
#tab-peptides .catalog-compact-row:first-child{border-top:0;}
#tab-peptides .catalog-row-view{
  display:grid;
  grid-template-columns:auto minmax(150px,1.25fr) minmax(180px,1.6fr) auto auto;
  gap:10px;
  align-items:center;
  min-height:46px;
  padding:6px 2px;
}
#tab-peptides .catalog-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tab-peptides .catalog-row-meta{font-size:11.5px;color:var(--text-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tab-peptides .catalog-row-usage{font-size:11px;color:var(--text-dim);white-space:nowrap;}
#tab-peptides .catalog-row-lock{font-size:11px;opacity:.55;}
#tab-peptides .catalog-row-edit{
  display:grid;
  grid-template-columns:minmax(150px,1fr) repeat(3,minmax(120px,.8fr)) auto auto;
  gap:8px;
  align-items:center;
  padding:8px 2px 10px;
}
#tab-peptides .catalog-row-edit[hidden],#tab-peptides .catalog-row-view[hidden]{display:none!important;}

/* Admin stays table-dense on desktop while retaining the existing mobile card pattern. */
@media(min-width:761px){
  #tab-growth #admin-users-table th,#tab-growth #admin-users-table td{padding:8px 9px;font-size:11px;vertical-align:middle;}
  #tab-growth #admin-users-table .admin-actions{flex-wrap:nowrap;gap:4px;}
  #tab-growth #admin-users-table .admin-actions .btn{padding:5px 7px;font-size:10px;white-space:nowrap;}
  #tab-growth .admin-section>summary{padding-top:14px;padding-bottom:14px;}
}

@media(max-width:760px){
  #tab-dashboard .dashboard-nav-card{padding-bottom:40px;}
  #tab-peptides .catalog-row-view{grid-template-columns:auto minmax(0,1fr) auto;gap:7px;}
  #tab-peptides .catalog-row-meta{grid-column:2/4;white-space:normal;}
  #tab-peptides .catalog-row-usage{grid-column:2;}
  #tab-peptides .catalog-row-edit{grid-template-columns:1fr;}
}

/* Cost Forecast: useful runway context without increasing section height dramatically. */
#table-cost-forecast .forecast-compound{display:flex;flex-direction:column;gap:2px;}
#table-cost-forecast .forecast-compound span{font-size:10.5px;color:var(--text-dim);}
#table-cost-forecast .forecast-runway-bar{width:100%;max-width:120px;height:4px;border-radius:999px;background:var(--surface-2);margin-top:5px;overflow:hidden;}
#table-cost-forecast .forecast-runway-bar span{display:block;height:100%;border-radius:inherit;background:var(--primary);}
#table-cost-forecast tfoot td{background:var(--surface-1);font-weight:800;}

/* Admin primary action + compact secondary action menu. */
#tab-growth .admin-actions-compact{align-items:center;position:relative;}
#tab-growth .admin-action-menu{position:relative;}
#tab-growth .admin-action-menu>summary{list-style:none;cursor:pointer;white-space:nowrap;}
#tab-growth .admin-action-menu>summary::-webkit-details-marker{display:none;}
#tab-growth .admin-action-menu-pop{position:absolute;z-index:30;right:0;top:calc(100% + 6px);min-width:210px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);display:grid;gap:6px;}
#tab-growth .admin-action-menu-pop .btn{justify-content:flex-start;width:100%;}
@media(max-width:760px){
  #tab-growth .admin-actions-compact{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  #tab-growth .admin-actions-compact>.btn,#tab-growth .admin-action-menu,#tab-growth .admin-action-menu>summary{width:100%;}
  #tab-growth .admin-action-menu-pop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;min-width:0;}
}

/* Settings: secondary sections start compact and expand on demand. */
#tab-settings .settings-collapsible{margin-top:16px;padding:0;}
#tab-settings .settings-collapsible>summary{cursor:pointer;font-weight:850;padding:16px 18px;list-style:none;display:flex;align-items:center;justify-content:space-between;}
#tab-settings .settings-collapsible>summary::-webkit-details-marker{display:none;}
#tab-settings .settings-collapsible>summary:after{content:"+";color:var(--primary);font-size:18px;}
#tab-settings .settings-collapsible[open]>summary:after{content:"−";}
#tab-settings .settings-collapsible-body{padding:0 18px 18px;}
#tab-settings .settings-collapsible-body>.section-title:first-child{margin-top:0;}