/* =====================================================================
   layout.css — thiebaux‑style formatting (alignment, grouping, tokens)
   No behavioral changes — formatting only.
   ===================================================================== */

:root{
  /* --- Color tokens --------------------------------------------------- */
  --bg               : #f5f7fb;   /* page background            */
  --panel            : #ffffff;   /* card/panel surface         */
  --text             : #111827;   /* primary text               */
  --muted            : #6b7280;   /* gray-500                   */
  --muted-2          : #374151;   /* gray-700                   */
  --th-bg            : #f8fafc;   /* header row background      */
  --border           : #e5e7eb;   /* gray-200                   */
  --border-strong    : #d1d5db;   /* gray-300                   */

  /* --- Radii & spacing ------------------------------------------------ */
  --radius-lg        : 14px;      /* panel radius               */
  --radius-sm        : 10px;      /* th top-corner radius       */
  --pad-1            : 6px;
  --pad-2            : 8px;
  --pad-3            : 12px;
  --pad-4            : 16px;
}

/* =====================================================================
   Base / Reset
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html,body           { height:100% }
body{
  margin     : 0;
  background : var(--bg);
  color      : var(--text);
  font       : 14px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* =====================================================================
   Header
   ===================================================================== */
header{
  padding       : 16px 20px;
  border-bottom : 1px solid var(--border);
  display       : flex;
  align-items   : center;
  gap           : 10px;
}
.header__title    { font-weight:700 }
.header__subtitle { color:#64748b }
.header__status   { margin-left:auto }
.pill{
  display         : inline-flex;
  align-items     : center;
  padding         : 6px 10px;
  border-radius   : 999px;
  background      : #f1f5f9;
  color           : #334155;
  border          : 1px solid var(--border);
}

/* =====================================================================
   Toolbar
   ===================================================================== */
.toolbar{
  padding    : 10px 20px;
  display    : flex;
  gap        : 8px;
  justify-content : flex-end;
}
.btn{
  background   : #f8fafc;
  border       : 1px solid var(--border-strong);
  border-radius: 10px;
  padding      : 8px 12px;
  color        : var(--text);
}
.btn--primary   { font-weight:700 }

/* =====================================================================
   Panel
   ===================================================================== */
.panel{
  background   : var(--panel);
  border       : 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow   : 0 1px 0 rgba(0,0,0,.02);
  margin       : 16px 20px;
}
.panel__head{
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  padding       : 16px 18px;
  border-bottom : 1px solid var(--border);
}
.panel__head h2 { margin:0; font-size:20px; color:#0f172a }
.ledger__apr     { font-weight:700; color:#4b5563 }
.panel__body     { padding:10px 12px 14px 12px }

/* =====================================================================
   Table
   ===================================================================== */
.ledger__table{
  width           : 100%;
  border-collapse : separate;
  border-spacing  : 0;
}
thead th{
  background   : var(--th-bg);
  color        : var(--text);
  border-bottom: 1px solid var(--border-strong);
  padding      : 10px;
  text-align   : left;
  font-weight  : 700;
  white-space  : nowrap;
}
thead th.group{ border-left:1px solid var(--border-strong); border-right:1px solid var(--border-strong); text-align:center }
thead th.sub  { font-weight:700; font-size:.9rem }

thead tr:first-child th:first-child{ border-top-left-radius : var(--radius-sm) }
thead tr:first-child th:last-child { border-top-right-radius: var(--radius-sm) }

tbody td{
  border-bottom : 1px solid var(--border);
  padding       : 8px 10px;
  vertical-align: middle;
}
td.num, th.num { text-align:right }
.td--num       { text-align:right }  /* optional semantic alias */
td.center      { text-align:center }

/* =====================================================================
   Inputs
   ===================================================================== */
.input{
  width        : 100%;
  padding      : 8px 10px;
  border       : 1px solid var(--border-strong);
  border-radius: 8px;
  background   : #ffffff;
  color        : var(--text);
}
.input--desc       { font-style:italic }
.carryover-label   { font-style:italic }

/* =====================================================================
   Icon Button (future use)
   ===================================================================== */
.iconbtn{
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  width         : 28px;
  height        : 28px;
  border        : 1px solid var(--border-strong);
  border-radius : 8px;
  background    : #f8fafc;
  color         : #475569;
}

/* =====================================================================
   Summary Rows (future)
   ===================================================================== */
.ledger__sumrow td{ font-weight:700 }
.ledger__sumrow td:first-child,
.ledger__sumrow td:nth-child(2){ font-style:italic }
.ledger__eoprow td{ color:var(--muted) }

/* =====================================================================
   Note
   ===================================================================== */
.note{ padding:10px 18px 16px 18px; color:var(--muted) }