/* ==========================================================================
   Theme & Resets
   ========================================================================== */
* { box-sizing: border-box; }

:root{
	--ink:       #1b1b1b;
	--muted:     #6b7280;
	--paper:     #fff;
	--grid:      #e5e7eb;   /* light gray for separators */
	--na:        #f3f4f6;

	--btn:       #e5e7eb;
	--btn-text:  #9ca3af;   /* lighter gray for glyphs (e.g., ✖) */
	--btn-hover: #d1d5db;
	--bold:      #111827;
}

html, body { height: 100%; }

body{
	margin: 0;
	color: var(--ink);
	background: #f3f4f6;
	font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* ==========================================================================
   Topbar & Primary Actions
   ========================================================================== */
.topbar{
	position: sticky; top: 0; z-index: 10;
	background: #f8fafc;
	border-bottom: 1px solid var(--grid);
	padding: .6rem 1rem;
	display: flex; align-items: center; justify-content: space-between;
}
.topbar h1{ margin: 0; font-size: 1rem; }
.subtitle{ color: var(--muted); font-size: .9rem; }

/* Status chip */
.chip{
	margin-left: .25rem;
	padding: .25rem .5rem;
	border: 1px solid #e5e7eb;
	border-radius: .5rem;
	font-size: .85rem;
	color: #6b7280;
	background: #fff;
}

/* Export button turns blue when ledger is dirty */
button#export.dirty{
	border-color: #60a5fa;
	color: #1d4ed8;
	box-shadow: 0 0 0 2px rgba(96,165,250,.2) inset;
	font-weight: 600;
}

/* Header actions (import/export/etc.) */
.actions{ display: flex; gap: .5rem; align-items: center; }
button,
.import-label span{
	padding: .35rem .55rem;
	border: 1px solid var(--grid);
	background: #fff;
	border-radius: .45rem;
	cursor: pointer;
}
button:hover,
.import-label span:hover{ background: #f3f4f6; }
.import-label{ display: inline-flex; }


/* ==========================================================================
   Page Layout
   ========================================================================== */
.layout{ padding: 1rem; max-width: 1280px; margin: 0 auto; }

.sheet{
	background: var(--paper);
	border: 1px solid var(--grid);
	border-radius: .6rem;
	padding: 1rem;
}
.sheet-head{
	display: flex; align-items: flex-start; justify-content: space-between;
	margin-bottom: .5rem;
}
.title{ font-weight: 600; font-size: 1.1rem; }
.meta{ color: var(--muted); font-size: .9rem; }

.table-wrap{
	overflow: auto;
	border: 1px solid var(--grid);   /* uniform outer frame */
	border-radius: .5rem;
}


/* ==========================================================================
   Table Structure
   ========================================================================== */
table{
	border-collapse: separate;       /* needed for sticky header + shadow borders */
	border-spacing: 0;
	width: 100%;
	background: #fff;
	min-width: 980px;
}

/* Sticky header (thin baseline only; no verticals in THEAD) */
thead th{
	position: sticky; top: 0; z-index: 1;
	background: #fafafa;
	text-align: center; vertical-align: middle;
	border-bottom: 1px solid var(--grid);
}
thead th.group-sep,
thead th.party-sep{
	border-left: 1px solid var(--grid);
}

/* Body & Foot: paint ALL verticals here, uniformly thin */
tbody td.group-sep,
tfoot td.group-sep,
tbody td.party-sep,
tfoot td.party-sep{
	border-left: 1px solid var(--grid);
}

/* Cell spacing & alignment (no horizontal row rules for cleaner sheet look) */
th, td{ padding: .3rem .4rem; border-bottom: 0; }
td{ text-align: left; }
td.num{ text-align: right; }

/* Alternative (shadow-based) verticals, if subpixel borders flicker:
   tbody td.group-sep, tfoot td.group-sep,
   tbody td.party-sep, tfoot td.party-sep{
   	border-left: 0; box-shadow: inset 1px 0 0 0 var(--grid);
   }
*/


/* ==========================================================================
   Inputs & Validation
   ========================================================================== */
.cell input{
	width: 100%;
	padding: .25rem .35rem;
	border: 1px solid #d1d5db;
	border-radius: .25rem;
	font-size: .96rem;
}
.cell input:focus{
	outline: 2px solid #bfdbfe;
	border-color: #93c5fd;
}

/* Right-align numeric text (amount inputs) */
.cell.num input{ text-align: right; }

/* Subtle cue for incomplete date fields */
.input-warn{
	outline: 2px solid #ff0000;   /* red outline only */
}

/* Stronger styling for invalid inputs (e.g., row-date > sum-date) */
.input-warn.invalid,
input[aria-invalid="true"]{
	border-color: #ef4444 !important;
	outline-color: #ef4444;
	background: #fff1f2;          /* subtle red tint */
}

/* Hint when Date is valid but Description is empty */
.desc-warn{
	outline: 2px solid #3b82f6;   /* blue-500 */
	/* Optional stronger affordance — uncomment if desired:
	   background: #eff6ff;       /* blue-50 */
	*/
}


/* ==========================================================================
   Text Treatments (TVA, Footer labels)
   ========================================================================== */
   
.sum-date.invalid { color: #c00; } 

.sum-date { 
  font-style: italic;      /* always italic */
}

.tva{ font-style: italic; }

tfoot .sum-row td{
	font-weight: 700;
	color: var(--bold);
	border-top: 0;
}
tfoot .eop-row td{
	font-weight: 500;
	color: #374151;
	border-top: 1px solid var(--grid);
}

/* Footer label emphasis */
tfoot .sum-label em,
tfoot .eop-label em{ font-style: italic; }

/* ==========================================================================
   Row Actions (right rail)
   ========================================================================== */
.sf-actions{ white-space: nowrap; text-align: center; }
.sf-actions .x{
	padding: .2rem .4rem;
	border: 1px solid var(--btn);
	border-radius: .3rem;
	background: #fff;
	cursor: pointer;
	color: var(--btn-text);
	font-size: .9rem;
}
.sf-actions .x:hover{
	background: #fff;
	border-color: var(--btn-hover);
	color: #6b7280;
}


/* ==========================================================================
   Utility Cells
   ========================================================================== */
td.na{
	background: var(--na);
	color: transparent;   /* keeps layout stable even if content sneaks in */
}


/* ==========================================================================
   Footer Note
   ========================================================================== */
.sheet-foot{
	margin-top: .6rem;
	color: var(--muted);
	font-size: .9rem;
}
.sheet-foot .note{ line-height: 1.3; }