/* App-specific overrides on top of Pico — mobile-first */

/* Tighten Pico's default container padding on mobile so we get more usable width */
@media (max-width: 600px) {
    main.container, header.container, footer.container { padding: 0.75rem; }
    h2 { font-size: 1.4rem; }
    h4 { font-size: 1.1rem; }
    nav.app-nav ul { padding: 0; }
    article { padding: 1rem; margin-bottom: 1rem; }
}

/* Generic helpers */
.muted { color: var(--pico-muted-color); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.error { color: var(--pico-color-red-500); }
.success { color: var(--pico-color-green-500); }

/* Flex row that stacks on narrow screens (used for headers w/ buttons, form rows) */
.row-flex {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.row-flex > * { flex: 1 1 auto; min-width: 0; }
.row-flex > .grow { flex: 1 1 100%; }
/* Forms inside a row-flex disappear from layout so their child button
   participates directly as a flex item (keeps inline alignment). */
.row-flex > form.inline-action { display: contents; }

/* De-emphasized "danger zone" section (archive, etc.) */
.trip-danger-zone { margin-top: 2rem; }
.trip-danger-zone summary { cursor: pointer; padding: 0.25rem 0; }
.trip-danger-btn {
    font-size: 0.85rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.9rem;
}

/* Share-input row — single column on mobile, two columns on wider screens */
.share-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
@media (min-width: 480px) {
    .share-row { grid-template-columns: 1fr 9rem; gap: 0.5rem; }
}
.share-row input { margin-bottom: 0; }

/* Bigger touch targets for mobile */
button, [role="button"], input[type="submit"] {
    min-height: 2.75rem;
}
input[type="checkbox"] {
    min-width: 1.25rem;
    min-height: 1.25rem;
}

/* Archived badge */
.archived-badge {
    background: var(--pico-muted-border-color);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* Tables — wrap them in a horizontally scrollable container on narrow screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compact { width: 100%; margin-bottom: 0; }
table.compact td, table.compact th {
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
}
table.compact td.wrap { white-space: normal; }

/* Cards (used for mobile-friendly expense list alternative) */
.card-list { list-style: none; padding: 0; margin: 0; }
.card-list > li {
    padding: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    margin-bottom: 0.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
}
.card-list .card-meta { color: var(--pico-muted-color); font-size: 0.85rem; grid-column: 1 / -1; }
.card-list .card-amount { font-weight: bold; text-align: right; align-self: center; }
.card-list .card-actions { grid-column: 1 / -1; text-align: right; }

/* Footer spacing */
nav.app-nav { margin-bottom: 1rem; }
nav.app-nav button { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

/* Forms: make inputs full-width on mobile and keep labels readable */
form fieldset { padding: 0.5rem 0; margin-bottom: 1rem; }
form fieldset label { display: block; padding: 0.35rem 0; }

/* Hide pico's default form-margin clutter on stacked rows */
form .row-flex > div { display: flex; flex-direction: column; }
form .row-flex input { margin-bottom: 0; }