/* MP-4 density layer: preserves the visual language while increasing information density. */
:root {
  --density-sidebar: 218px;
  --density-topbar: 62px;
  --density-content: 22px;
  --density-panel: 15px;
  --density-gap: 10px;
  --density-control-height: 36px;
  --density-row-height: 44px;
  --density-radius: 12px;
}

body[data-density="normal"] {
  --density-sidebar: 250px;
  --density-topbar: 78px;
  --density-content: 38px;
  --density-panel: 22px;
  --density-gap: 16px;
  --density-control-height: 42px;
  --density-row-height: 58px;
  --density-radius: 18px;
}

body[data-density="dense"] {
  --density-sidebar: 200px;
  --density-topbar: 54px;
  --density-content: 14px;
  --density-panel: 10px;
  --density-gap: 7px;
  --density-control-height: 30px;
  --density-row-height: 36px;
  --density-radius: 9px;
}

.app-layout { grid-template-columns: var(--density-sidebar) minmax(0, 1fr); }
/* On a phone the sidebar is a fixed drawer (styles.css); without this the density column above won
   again and every page was squeezed into the 218 px the hidden sidebar left behind (found 2026-09-22). */
@media (max-width: 820px) { .app-layout { grid-template-columns: minmax(0, 1fr); } }
.sidebar { padding: 16px 12px; }
.sidebar-brand { padding: 0 6px 16px; }
#main-nav { gap: 3px; }
.nav-item {
  min-height: var(--density-control-height);
  padding: 7px 10px;
  gap: 9px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
}
.topbar {
  min-height: var(--density-topbar);
  padding: 8px 18px;
  gap: 14px;
}
.account-switcher select { min-width: 205px; padding: 7px 10px; }
#content { max-width: none; padding: var(--density-content); }
.page-head { margin-bottom: 18px; gap: 14px; }
.page-head h1 { font-size: clamp(28px, 3vw, 36px); }
.page-head p { margin-top: 5px; font-size: 13px; }
.panel, .metric-card { padding: var(--density-panel); border-radius: var(--density-radius); }
.hero-card { padding: calc(var(--density-panel) + 8px); border-radius: var(--density-radius); }
.control-card { padding: var(--density-panel); min-height: 190px; }
.grid-2, .grid-3, .metrics-grid, .hero-status { gap: var(--density-gap); }
.metrics-grid { margin-bottom: var(--density-gap); }
.metric-card .value { margin-top: 7px; font-size: 22px; }
.metric-card .hint { margin-top: 4px; }
.panel-head { margin-bottom: 10px; }
.list { gap: 5px; }
.list-row {
  min-height: var(--density-row-height);
  padding: 7px 10px;
  border-radius: 8px;
  gap: 9px;
}
.data-table th, .data-table td { padding: 8px 10px; }
.data-table { min-width: 680px; }
.button {
  min-height: var(--density-control-height);
  padding: 7px 12px;
  border-radius: 8px;
}
.button.small { min-height: 29px; padding: 5px 9px; }
input, select, textarea { padding: 8px 10px; border-radius: 8px; }
textarea { min-height: 88px; }
.stack { gap: 13px; }
.form-grid { gap: 11px; }
.modal-frame { border-radius: 12px; }
.modal-frame > header { padding: 15px 17px; }
.modal-body { padding: 17px; }
.empty { min-height: 130px; padding: 20px; }
.mt-16 { margin-top: 10px; }
.actions { gap: 6px; }
.auth-card { padding: clamp(28px, 4vw, 54px); }
.auth-tabs { margin-bottom: 28px; }
.auth-story { padding: clamp(42px, 6vw, 86px); }
.auth-story h1 { font-size: clamp(56px, 7vw, 100px); }
.brand-mark { margin-bottom: 34px; }
#auth-error[data-message-type="success"] { color: var(--green); }

.density-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.density-control select { width: auto; min-width: 84px; padding: 6px 8px; }

body[data-density="dense"] .page-head p,
body[data-density="dense"] .panel-head small,
body[data-density="dense"] .metric-card .hint { font-size: 9px; }
body[data-density="dense"] .nav-item { font-size: 12px; }
body[data-density="dense"] .pill { min-height: 20px; padding: 3px 6px; }
body[data-density="dense"] .user-block > span { width: 30px; height: 30px; }

@media (min-width: 1700px) {
  .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root, body[data-density="dense"], body[data-density="compact"] {
    --density-control-height: 44px;
    --density-row-height: 48px;
    --density-content: 14px;
  }
  .topbar { min-height: 62px; padding: 8px 12px; }
  .density-control { display: none; }
  .button, input, select, .nav-item, .icon-button { min-height: 44px; }
  .data-table th, .data-table td { padding: 10px; }
}