/* --- /styles/hea_app.css (organized) --- */
/* =========================
   1) Design tokens
   ========================= */
/* --- /styles/hea_tokens.css — single source of truth --- */

/* =========================
   2) Global layout & type
   ========================= */
html, body { height:100%; }
html, body {
  margin:0;
  display:flex;
  flex-direction:column;
}

body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.loading { visibility:hidden; }

/* L2 submenu width normalizer */
.hea-menu-l2{
  max-width: var(--page-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--app-pad) !important;
  padding-right: var(--app-pad) !important;
  box-sizing: border-box;
}

/* =========================
   3) Footer  — unified version
   ========================= */

footer.hea-footer {
  flex-shrink: 0;
  width: 100%;
  background: var(--surface);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 0; /* outer shell has no padding */
  box-sizing: border-box;
}

/* Inner wrapper — keeps content centered */
footer.hea-footer > * {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 16px var(--app-pad);
  text-align: center;
  box-sizing: border-box;
}

/* Paragraph style */
footer.hea-footer p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.5em 0;
}

/* Allow footer to stick to bottom when content is short */
.hea-footer {
  margin-top: auto;
}

.hea-footer {
  margin-top: auto;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  text-align: center;
}

.hea-footer--app{
  background: transparent;
  border-top: 1px solid var(--line);
}
.hea-footer--app .hea-footer-inner{
  padding: 10px 18px;
  font-size: 11.5px;
  opacity: .75;
}

/* =========================
   4) Cards & common wrappers
   ========================= */
.page-wrapper,
.account-wrapper,
.usage-wrapper,
.settings-wrapper,
.billing-wrapper {
  width: 100%;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.page-wrapper h1,
.account-wrapper h1,
.usage-wrapper h1,
.settings-wrapper h1,
.billing-wrapper h1 {
  font-size: 1.75rem;
  margin: 0 0 .25rem;
}

.subtitle { color: var(--muted); font-size:1rem; margin:0 0 1rem; }

/* Status bar (kept warm accent, themed surfaces) */
.statusbar {
  display:flex; gap:.75rem; flex-wrap:wrap;
  padding:.6rem .8rem;
  background: color-mix(in oklab, var(--brand2) 12%, var(--surface));
  border:1px solid color-mix(in oklab, var(--brand2) 35%, var(--line));
  border-radius:10px; margin-bottom:1rem;
  font-size:.9rem; color: color-mix(in oklab, #7a4a12 85%, var(--ink));
}
.status-pill {
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--brand2) 35%, var(--line));
  border-radius:999px; padding:.2rem .6rem;
}

/* Form hint */
#formHint{
  background:color-mix(in oklab, var(--brand2) 12%, var(--surface));
  border:1px solid color-mix(in oklab, var(--brand2) 35%, var(--line));
  border-radius:10px;
  padding:10px 12px;
}

/* Form hint */
#billingBanner{
  background:color-mix(in oklab, var(--brand2) 12%, var(--surface));
  border:1px solid color-mix(in oklab, var(--brand2) 35%, var(--line));
  border-radius:10px;
  padding:10px 12px;
}

/* Section headings */
.section-title {
  font-size:1.05rem; font-weight:700; margin:1.5rem 0 .75rem;
  color: var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:.35rem;
  display:flex; align-items:center; gap:.4rem;
}

/* =========================
   5) Field lists / rows
   ========================= */
.field-list {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.field-row {
  display:flex; justify-content:space-between; gap:12px;
  padding:.7rem .9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.field-row:nth-child(odd){ background: var(--surface-2); }
.field-row:last-child { border-bottom:none; }

.field-row label {
  font-size:.92rem; color: var(--muted); width:45%;
}
.field-row span {
  font-size:.98rem; font-weight:550; color: var(--ink); width:55%;
  text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.field-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2);
  color: var(--ink);
  padding:.1rem .4rem; border-radius:4px; border:1px solid var(--line);
}

/* Older "field-group" (kept for compatibility) */
.field-group {
  display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line);
}
.field-group label { font-size:.9rem; color:var(--muted); width:40%; }
.field-group span  { font-size:.95rem; font-weight:500; color:var(--ink); width:55%; text-align:right; }

/* =========================
   6) Controls & buttons
   ========================= */
.actions, .row-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.actions { margin-top:1rem; }
.row-actions { margin-top:.5rem; }
.row-actions > *:empty { display:none; }

.btn {
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color:#fff; border:none; padding:.55rem .9rem; border-radius:8px; cursor:pointer; font-size:.95rem;
  transition: transform .05s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Secondary & outline adapt to theme */
.btn.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.outline {
  background: transparent;
  color: var(--ink);
  border:1px solid var(--line);
}
.btn.brand { background: linear-gradient(90deg, var(--brand1), var(--brand2)); color:#fff; border:none; }
button.btn { -webkit-appearance:none; appearance:none; }

/* Checkboxes group */
.checkbox-group { margin-top:.25rem; }
.checkbox-group label { display:block; margin:.35rem 0; font-size:.95rem; color:var(--ink); }

/* Hints */
.hintline, .note { color: var(--muted); font-size:.9rem; margin-top:.35rem; }
.note { margin-top:.4rem; }

/* =========================
   7) Editor pages (unified)
   ========================= */

/* Compact toolbar inside context card */
.toolbar.compact{ margin:0; }

.editor-page .page {
  max-width:1100px; 
  margin:24px auto; 
  padding:0 20px;
}

.editor-page .toolbar,
.toolbar {
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
  margin:12px 0;
}

.editor-page .toolbar .select { 
  min-width:320px; 
  width:420px; 
  max-width:100%; 
}

.card,
.editor-page .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.grid { display:grid; gap:12px; }
.grid.col2 { grid-template-columns: minmax(360px,1fr) minmax(360px,1fr); gap:12px; }
@media (min-width:900px){ .grid.col2 { grid-template-columns:1fr 1fr; } }
@media (max-width:768px){
  .editor-page .page { max-width:100%; padding:0 12px; }
  .editor-page .grid.col2 { grid-template-columns:1fr; }
}

label { font-weight:700; margin-top:10px; display:block; }
textarea { min-height:120px; }

/* Inputs (full-width, themed) */
.input, .select,
input[type="text"], input[type="color"], textarea, select {
  width:100%; height:38px;
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding:8px 12px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 0 var(--ring);
}
textarea { height:auto; }

input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--muted) 85%, var(--ink)); }

input:focus, textarea:focus, select:focus {
  border-color: color-mix(in oklab, var(--brand1) 50%, var(--line));
  box-shadow: 0 0 0 3px var(--ring);
}

.editor-page { 
  max-width: var(--page-w) !important;
  background:var(--surface);
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--app-pad) !important;
  box-sizing: border-box;
}

.editor-page .editor-wrapper {
  max-width: var(--panel-w) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.editor-page .btn {
  height:38px; padding:0 14px; border-radius:999px;
  border:1px solid var(--line); background: var(--surface); font-weight:700; cursor:pointer;
}
.editor-page .btn-primary { background: linear-gradient(90deg, var(--brand1), var(--brand2)); color:#fff; border:none; }
.editor-page .btn:disabled { opacity:.55; cursor:not-allowed; }

.muted { color: var(--muted); }
.preview {
  width:180px; height:180px; border:1px solid var(--line); border-radius:8px;
  object-fit:cover; display:none; margin-top:6px; background: var(--surface-2);
}

  /* Draft bar */
  #draft-actions{ border-left:4px solid var(--brand-orange); }

/* =========================
   8) Misc
   ========================= */
.spacer { flex:1; }
.emoji { filter: grayscale(100%) brightness(0.25); margin-right:.4rem; vertical-align:middle; width:1em; height:1em; font-size:1rem; line-height:1; }

/* === App-wide width normalizer (single source of truth) === */
:root{
  --page-w: 1160px;   /* outer shell (header + page) */
  --panel-w: 920px;   /* inner content card/forms width */
  --app-pad: 16px;    /* side padding */
}

.logbox{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  background:#0b0b0b; color:#9df59d;
  border-radius:10px; padding:10px;
  min-height:160px; max-height:340px; overflow:auto;
  border:1px solid #1e1e1e; white-space:pre-wrap;
}
.logbox .time{ color:#8fa3a3; margin-right:.5em }

@media (min-width:1600px){
  :root{ --page-w: 1360px; --panel-w: 1160px; }
}

@media (min-width:1800px){
  :root{ --app-pad: 32px; }
}

/* 1) Outer page shell (same on every page) */
.page { flex:1 0 auto; }

.hea-header .hea-header-inner,
.page{
  max-width: var(--page-w) !important;
  background:var(--surface);
  width: 100%;
  margin-inline: auto !important;
  padding-inline: var(--app-pad) !important;
  box-sizing: border-box;
}

/* 2) Inner content panel (cards/forms/tables) */
.page > .card,
.page > section,
.page .page-wrapper,
.page .account-card,
.page .billing-card,
.page .usage-card,
.page .settings-card,
.page .account-wrapper,
.page .billing-wrapper,
.page .usage-wrapper,
.page .settings-wrapper,
.page .content-panel,
.page .statusbar {
  max-width: var(--panel-w) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* 3) Wide elements that should still respect the panel width */
.page .hea-compare-table,
.page table,
.page .chart,
.page .usage-graph {
  max-width: var(--panel-w) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Prevent stray full-width blocks from breaking the layout */
.page > * { box-sizing: border-box; }

/* Optional: on very small screens let the panel breathe */
@media (max-width: 860px){
  :root { --panel-w: 100%; }
}