/* LeRent layout on app-forge tokens. Mobile first; no hard-coded colors or spacing. */

.topbar { background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap-inline); max-width: var(--ui-layout-content-max); margin-inline: auto; padding: var(--ui-space-sm) var(--ui-layout-gutter); }
.brand { font-family: var(--ui-font-heading); font-weight: 600; font-size: var(--ui-text-lg); color: var(--ui-fg); text-decoration: none; }

.nav-wide { display: none; }
.nav-narrow > summary { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-gap-inline); min-height: var(--ui-layout-touch-target); min-width: var(--ui-layout-touch-target); cursor: pointer; list-style: none; font-size: var(--ui-text-sm); font-weight: 600; }
.nav-narrow > summary::-webkit-details-marker { display: none; }
.nav-narrow[open] .nav-links { display: grid; position: absolute; left: 0; right: 0; z-index: var(--ui-z-dropdown); background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-pop); padding: var(--ui-space-sm) var(--ui-layout-gutter); }
.nav-links a, .nav-links button { display: flex; align-items: center; min-height: var(--ui-layout-touch-target); padding: 0 var(--ui-space-sm); border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-fg); font: inherit; font-size: var(--ui-text-sm); font-weight: 500; text-decoration: none; cursor: pointer; }
.nav-links a:hover, .nav-links button:hover { background: var(--ui-hover); }
.nav-links a[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 600; }
.nav-links form { margin: 0; }

@media (min-width: 48rem) {
    .nav-narrow { display: none; }
    .nav-wide { display: block; }
    .nav-wide .nav-links { display: flex; align-items: center; gap: var(--ui-gap-label); }
}

a.ui-btn, a.ui-btn:hover, a.ui-btn:focus-visible { text-decoration: none; }
.narrow { max-width: 28rem; margin-inline: auto; }
.narrow-input { width: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-gap-inline); }

.stat-value { font-family: var(--ui-font-heading); font-size: var(--ui-text-3xl); font-weight: 600; line-height: var(--ui-leading-heading); }
.stat-label { display: flex; align-items: center; gap: var(--ui-gap-label); font-size: var(--ui-text-sm); color: var(--ui-muted); }

.field-error { color: var(--ui-danger); font-weight: 500; font-size: var(--ui-text-xs); }
.ui-input[aria-invalid="true"] { border-color: var(--ui-danger); }
textarea.ui-input { min-height: 6rem; padding-block: var(--ui-space-sm); resize: vertical; }

.alert { display: flex; gap: var(--ui-gap-inline); align-items: flex-start; padding: var(--ui-pad-card); border-radius: var(--ui-radius-md); font-size: var(--ui-text-sm); }
.alert--success { background: var(--ui-success-bg); color: var(--ui-success); }
.alert--danger { background: var(--ui-danger-bg); color: var(--ui-danger); }
.alert--warning { background: var(--ui-warning-bg); color: var(--ui-warning); }

.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot th, tfoot td { font-weight: 600; border-bottom: 0; }
.inline-form { display: inline; margin: 0; }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: var(--ui-gap-label) var(--ui-space-md); margin: 0; }
.detail-list dt { color: var(--ui-muted); font-size: var(--ui-text-sm); }
.detail-list dd { margin: 0; }

.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap-inline); }
.table-tools .ui-input { flex: 1 1 12rem; width: auto; }
th[aria-sort] button { all: unset; cursor: pointer; font-weight: 600; min-height: 1.5rem; }
th[aria-sort] button:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus); outline-offset: 2px; }

.chart { display: block; width: 100%; height: auto; }
.chart-bar { fill: var(--ui-chart-1); }
.chart-bar--gas { fill: var(--ui-chart-2); }
.chart-axis { stroke: var(--ui-line-strong); }
.chart-label { fill: var(--ui-muted); font-size: 10px; }

.pay-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-gap-inline); }
.code-block { overflow-wrap: anywhere; }

@media print {
    .topbar, .no-print, .ui-actions { display: none !important; }
    .ui-card { border: 0; box-shadow: none; }
}