:root {
    color-scheme: light;
    --background: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafb;
    --text: #17202a;
    --muted: #5f6b76;
    --border: #d7dde3;
    --primary: #145a75;
    --primary-hover: #0e465c;
    --success-background: #e8f6ee;
    --success-text: #17633a;
    --warning-background: #fff6d9;
    --warning-text: #725500;
    --danger-background: #fff0f0;
    --danger-text: #8b1e1e;
    --danger-solid: #8b1e1e;
    --danger-solid-hover: #681616;
    --neutral-background: #e9edf0;
    --neutral-text: #47525c;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --background: #12181f;
        --surface: #1b232c;
        --surface-muted: #212b34;
        --text: #e7ecf1;
        --muted: #9aa7b4;
        --border: #303c47;
        --primary: #6cc0e3;
        --primary-hover: #8fd0ec;
        --success-background: #123524;
        --success-text: #6bd39a;
        --warning-background: #3a2f0c;
        --warning-text: #e0b846;
        --danger-background: #3a1414;
        --danger-text: #f29a9a;
        --danger-solid: #b23a3a;
        --danger-solid-hover: #c94f4f;
        --neutral-background: #2c3742;
        --neutral-text: #b3bfc9;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #12181f;
    --surface: #1b232c;
    --surface-muted: #212b34;
    --text: #e7ecf1;
    --muted: #9aa7b4;
    --border: #303c47;
    --primary: #6cc0e3;
    --primary-hover: #8fd0ec;
    --success-background: #123524;
    --success-text: #6bd39a;
    --warning-background: #3a2f0c;
    --warning-text: #e0b846;
    --danger-background: #3a1414;
    --danger-text: #f29a9a;
    --danger-solid: #b23a3a;
    --danger-solid-hover: #c94f4f;
    --neutral-background: #2c3742;
    --neutral-text: #b3bfc9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    line-height: 1.5;
    transition: background-color .15s ease, color .15s ease;
}

a { color: var(--primary); }

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.navigation,
.page {
    width: 100%;
    padding-inline: 1rem;
}

.navigation {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 750;
    text-decoration: none;
}

.navigation__links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navigation__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.theme-toggle:hover { border-color: var(--primary); color: var(--primary); }

.theme-toggle__icon {
    width: 1.15rem;
    height: 1.15rem;
}

.theme-toggle__icon--moon { display: none; }

:root[data-theme="dark"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: none; }
    :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: block; }
}

.navigation__links form { margin: 0; }
.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.link-button--danger { color: var(--danger-text); }
.link--danger { color: var(--danger-text); }

.page { padding-block: 2.5rem; }

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .4rem; line-height: 1.15; }

.eyebrow {
    margin-bottom: .35rem;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.muted { color: var(--muted); }

.card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface);
    box-shadow: 0 2px 8px rgb(23 32 42 / 5%);
}

.login-card {
    width: min(100%, 28rem);
    margin: 4rem auto;
}

.error-card {
    width: min(100%, 38rem);
    margin: 3rem auto;
}

.field { margin-block: 1rem; }

.field label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 650;
}

.field input {
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: .4rem;
    font: inherit;
}

.field textarea {
    width: 100%;
    padding: .65rem .7rem;
    border: 1px solid var(--border);
    border-radius: .4rem;
    resize: vertical;
    font: inherit;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--primary);
    outline: 3px solid rgb(20 90 117 / 16%);
}

.field--checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.field--checkbox input {
    width: auto;
    min-height: 0;
}

.field--checkbox label {
    margin-bottom: 0;
    font-weight: 500;
}

.form-errors,
.field-error {
    color: var(--danger-text);
    background: var(--danger-background);
}

.form-errors { padding: .75rem; border-radius: .4rem; }
.form-errors p, .field-error { margin: 0; }
.field-error { margin-top: .35rem; font-size: .9rem; }
.help-text { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; }

.button {
    display: inline-flex;
    min-height: 2.65rem;
    padding: .55rem 1rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .4rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.button--primary {
    background: var(--primary);
    color: white;
    cursor: pointer;
}

.button--primary:hover { background: var(--primary-hover); }
.button--secondary {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.button--secondary:hover { border-color: var(--primary); color: var(--primary); }
.button--danger {
    background: var(--danger-solid);
    color: white;
    cursor: pointer;
}
.button--danger:hover { background: var(--danger-solid-hover); }
.button--disabled { background: var(--neutral-background); color: var(--muted); }
.empty-state { text-align: center; padding-block: 4rem; }
.empty-state p { color: var(--muted); }
.empty-state--small { padding-block: 2rem; }
.empty-state--small p { margin-bottom: 0; }

.form-card { max-width: 42rem; }
.form-actions { margin-top: 1.5rem; }

.status-management {
    display: flex;
    max-width: 42rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.status-management h2 { margin-bottom: .35rem; }
.status-management p:last-child { margin-bottom: 0; color: var(--muted); }
.status-management form { margin: 0; }
.status-management__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: .6rem;
}

.billing-view-settings { max-width: 42rem; }
.billing-view-settings > p { color: var(--muted); }
.billing-view-password-form { margin-block: 1rem; max-width: 24rem; }
.billing-view-settings__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.billing-view-settings__actions form { margin: 0; }

.copy-field {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    max-width: 32rem;
}
.copy-field input { flex: 1 1 auto; font-family: monospace; }

.portal-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--neutral-background);
    color: var(--muted);
    font-size: .85rem;
}

.danger-card { border-color: var(--danger-text); }
.danger-card h2 { color: var(--danger-text); }
.danger-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}
.danger-card__actions form { margin: 0; }

.field input:disabled,
.field textarea:disabled {
    background: var(--surface-muted);
    color: var(--muted);
    cursor: not-allowed;
}

.table-card { padding: 0; overflow: hidden; container-type: inline-size; }
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

th,
td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    background: var(--surface-muted);
    font-size: .8rem;
    letter-spacing: .02em;
}

tbody tr:last-child td { border-bottom: 0; }
.project-link { color: var(--text); font-weight: 700; }
.row-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.row-actions form { margin: 0; }

.cell-wrap { white-space: normal; overflow-wrap: break-word; }

.icon-button {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}

.icon-button:hover { border-color: var(--primary); color: var(--primary); }
.icon-button__icon { width: 1.05rem; height: 1.05rem; }

.icon-button--danger { color: var(--danger-solid); }
.icon-button--danger:hover {
    border-color: var(--danger-solid);
    background: var(--danger-background);
    color: var(--danger-solid-hover);
}

.table-row-toggle { display: none; }
.table-row-toggle .icon-button__icon { transition: transform .15s ease; }
.table-row-toggle[aria-expanded="true"] .icon-button__icon { transform: rotate(180deg); }

@container (max-width: 60rem) {
    .table-collapsible thead { display: none; }

    .table-collapsible,
    .table-collapsible tbody,
    .table-collapsible tr {
        display: block;
        width: 100%;
    }

    .table-collapsible tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem .75rem;
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }

    .table-collapsible tbody tr:last-child { border-bottom: 0; }

    .table-collapsible td {
        display: none;
        width: auto;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .table-collapsible td.col-essential { display: block; }
    .table-collapsible td.col-grow { flex: 1 1 12rem; min-width: 0; }
    .table-collapsible td.col-actions { margin-left: auto; flex: 0 0 auto; }

    .table-collapsible tr.is-expanded td { display: block; width: 100%; }

    .table-collapsible td[data-label]:not(.col-essential)::before {
        content: attr(data-label) ": ";
        color: var(--muted);
        font-weight: 700;
    }

    .table-row-toggle { display: inline-flex; }
}

.status {
    display: inline-flex;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.status--active { background: var(--success-background); color: var(--success-text); }
.status--completed { background: var(--warning-background); color: var(--warning-text); }
.status--archived { background: var(--neutral-background); color: var(--neutral-text); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-heading--project { align-items: flex-end; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.heading-actions form { margin: 0; }

.notice,
.messages p {
    padding: .85rem 1rem;
    border: 1px solid #b9ddc8;
    border-radius: .5rem;
    background: var(--success-background);
}

.notice { margin-bottom: 1rem; }
.messages p { margin-bottom: 1rem; }

.tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}

.tabs__item {
    padding: .65rem .85rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.tabs__item--active {
    margin-bottom: -1px;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 700;
}

.tabs__item--disabled { opacity: .65; }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.summary-card { display: grid; gap: .35rem; }
.summary-card__label { color: var(--muted); font-size: .9rem; }
.summary-card strong { font-size: 1.35rem; }
.project-information { margin-top: 1rem; }

.definition-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.definition-list div { min-width: 0; }
.definition-list dt { color: var(--muted); font-size: .85rem; }
.definition-list dd { margin: .2rem 0 0; font-weight: 650; }
.pre-line { white-space: pre-line; }
.amount--negative { color: var(--danger-text); font-weight: 750; }

.time-entry-create { margin-bottom: 2rem; }
.time-entry-create h2 { margin-bottom: 1rem; }

.time-entry-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
    gap: 0 1rem;
}

.time-entry-grid .field--comment { grid-column: 1 / -1; }

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading span { color: var(--muted); }
.table-comment { min-width: 12rem; white-space: normal; }

.current-receipt {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-bottom: 1.25rem;
    padding: .75rem;
    border-radius: .4rem;
    background: var(--background);
}

.current-receipt small { width: 100%; color: var(--muted); }

.invoice-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.invoice-information { margin-bottom: 2rem; }
.adjustment-section { margin-bottom: 1rem; }
.adjustment-create { margin-top: 1rem; }
.adjustment-create h2 { margin-bottom: 1rem; }

.adjustment-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0 1rem;
}

.billing-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.transaction-create { margin-bottom: 2rem; }
.transaction-create h2 { margin-bottom: 1rem; }

.transaction-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1.5fr;
    gap: 0 1rem;
}

.transaction-grid .field--comment { grid-column: 1 / -1; }

.statement-customer { margin: 0; color: var(--muted); }
.statement-intro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.statement-intro > div { display: grid; align-content: start; gap: .2rem; }
.statement-label { color: var(--muted); font-size: .82rem; }
.statement-description { grid-column: 1 / -1; }
.statement-description p { margin: 0; }
.statement-section { margin-bottom: 2rem; }
.statement-section h2 { margin-bottom: .75rem; }
.statement-table { white-space: normal; }
.statement-table td small {
    display: block;
    margin-top: .15rem;
    color: var(--muted);
}

.statement-table .amount-column {
    text-align: right;
    white-space: nowrap;
}

.statement-table tfoot th {
    border-top: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.statement-main-row td { padding-top: 1.15rem; }
.statement-sub-row td { background: var(--surface-muted); }
.statement-sub-row td:nth-child(2) { padding-left: 2rem; }
.statement-subtotal td {
    border-bottom: 2px solid var(--border);
    font-weight: 700;
}

.statement-subtotal td:first-child { text-align: right; }
.statement-empty { padding-block: 1.25rem; color: var(--muted); }
.statement-totals {
    width: min(100%, 38rem);
    margin-left: auto;
}

.statement-totals dl { margin: 0; }
.statement-totals dl > div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-block: .4rem;
}

.statement-totals dt { color: var(--muted); }
.statement-totals dd { margin: 0; text-align: right; white-space: nowrap; }
.statement-totals .statement-total {
    margin-top: .5rem;
    padding-top: .9rem;
    border-top: 2px solid var(--border);
    font-weight: 700;
}

.statement-totals .statement-total dt { color: var(--text); }
.statement-totals .statement-open {
    margin-top: .5rem;
    padding-top: .9rem;
    border-top: 3px double var(--text);
    font-size: 1.25rem;
    font-weight: 800;
}

.statement-totals .statement-open dt { color: var(--text); }
.statement-disclaimer {
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: .85rem;
    text-align: right;
}

@media (max-width: 42rem) {
    .navigation { align-items: flex-start; padding-block: .85rem; }
    .navigation__links { align-items: flex-end; flex-direction: column; gap: .45rem; }
    .navigation__right { align-items: flex-end; flex-direction: column; gap: .5rem; }
    .page { padding-block: 1.5rem; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .login-card { margin-block: 1rem; }
    .heading-actions { align-items: stretch; flex-direction: column; }
    .heading-actions .button,
    .heading-actions form,
    .heading-actions form .button { width: 100%; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .definition-list { grid-template-columns: 1fr; }
    .status-management { align-items: stretch; flex-direction: column; }
    .status-management__actions { flex-direction: column; }
    .status-management__actions form .button,
    .status-management__actions .button { width: 100%; }
    .danger-card__actions { align-items: stretch; flex-direction: column; }
    .danger-card__actions form,
    .danger-card__actions .button { width: 100%; }
    .time-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .time-entry-grid .field--activity,
    .time-entry-grid .field--comment { grid-column: 1 / -1; }
    .invoice-summary { grid-template-columns: 1fr; }
    .adjustment-grid { grid-template-columns: 1fr; }
    .billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .transaction-grid { grid-template-columns: 1fr; }
    .statement-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statement-table-card { overflow-x: auto; }
    .statement-table { min-width: 38rem; }
    .statement-totals { width: 100%; }
}

@media print {
    @page { margin: 14mm; }

    :root {
        --background: #fff;
        --surface: #fff;
        --text: #000;
        --muted: #444;
        --border: #aaa;
        --danger-text: #000;
    }

    body { font-size: 10pt; }
    .site-header,
    .messages,
    .statement-page .tabs,
    .statement-page .print-actions { display: none; }
    .page { width: 100%; padding: 0; }
    .statement-heading { margin-bottom: 8mm; }
    .statement-heading h1 { font-size: 20pt; }
    .statement-page .card {
        border-color: #aaa;
        border-radius: 0;
        box-shadow: none;
    }
    .statement-intro,
    .statement-totals { break-inside: avoid; }
    .statement-section { margin-bottom: 7mm; }
    .statement-section h2 { break-after: avoid; }
    .statement-table-card { overflow: visible; }
    .statement-table { min-width: 0; }
    .statement-table thead { display: table-header-group; }
    .statement-table tr { break-inside: avoid; }
    .statement-disclaimer { margin-top: 7mm; }
}