body {
    background-color: #f3f4f6;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-print-color-adjust: exact;
}

[x-cloak] { display: none !important; }
.valign-top { vertical-align: top !important; }

input,
textarea,
select {
    width: 100%;
    margin: 0;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    line-height: 1.4;
    vertical-align: top;
}

.input-group:hover input,
.input-group:hover textarea,
input:focus,
textarea:focus,
select:focus {
    border-radius: 2px;
    background-color: #f0f9ff;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    min-height: 28px;
    box-sizing: border-box;
    padding: 2px 4px;
    appearance: auto;
    -webkit-appearance: auto;
    line-height: 1.2;
    vertical-align: middle;
}

textarea {
    display: block;
    min-height: 1.5em;
    overflow: hidden;
    resize: none;
    field-sizing: content;
}

table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { padding-bottom: 0.5rem; border-bottom: 2px solid #000; color: #000 !important; font-weight: 600; text-align: left; vertical-align: middle; }
td { padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; vertical-align: middle !important; }
td.align-top,
td.valign-top { vertical-align: top !important; }
tr { break-inside: avoid !important; page-break-inside: avoid !important; }

.sort-cursor { cursor: pointer; user-select: none; }
.sort-cursor:hover { background-color: #f9fafb; }
.customer-textarea { min-height: 2.8em !important; }

.status-pill { padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; }
.status-paid { background-color: #dcfce7; color: #166534; }
.status-open { background-color: #fef9c3; color: #854d0e; }
.status-overdue { background-color: #fee2e2; color: #991b1b; }