nav form {
    display: inline;
    margin: 0;
}

main.login {
    max-width: 24rem;
    margin: 4rem auto;
}

main.narrow {
    max-width: 44rem;
}

.error {
    color: var(--pico-color-red-500, #d93526);
}

/* The one wrapping row: a header, a button strip, a pager. Only the gap and the alignment
   along the main axis differ, so those are all each of them adds. */
.page-header,
.form-actions,
.pagination,
.reminders li {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header {
    justify-content: space-between;
}

.form-actions,
.reminders li {
    gap: 0.75rem;
}

.pagination {
    justify-content: center;
}

button,
[type="submit"],
[type="button"],
[role="button"] {
    width: auto;
}

main.login button {
    width: 100%;
}

.table-wrap {
    overflow-x: auto;
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    white-space: nowrap;
    color: #fff;
    background: var(--pico-muted-color, #777);
    vertical-align: middle;
}

.b-TO_ASSIGN { background: #5c6bc0; }
.b-TO_VISIT { background: #0172ad; }
.b-IN_PROGRESS { background: #b8860b; }
.b-SIGNED { background: #2e7d32; }
.b-REJECTED { background: #9e9e9e; }

.b-LIKWIDACJA { background: #0172ad; }
.b-SAD { background: #7b1fa2; }
.b-ZAKONCZONA { background: #2e7d32; }
.b-ARCHIWUM { background: #9e9e9e; }

.b-paid { background: #2e7d32; }
.b-unpaid { background: #b8860b; }
.b-overdue { background: #d93526; }
.b-due { background: #0172ad; }

/* P2.6 — a reminder is a date, an optional line of text and one button, on the detail page
   and on the dashboard alike. It is the wrapping row above (on a phone the note is what has to
   move to its own line, and the date badge and the button must not follow it), plus a rule
   between entries and the button pushed to the end. */
ul.reminders {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.reminders li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color, #e0e0e0);
}

ul.reminders form {
    margin: 0 0 0 auto;
}

article.note {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

article.note p {
    margin-bottom: 0.25rem;
}

dl dt {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--pico-muted-color, #777);
    margin-top: 0.5rem;
}

dl dd {
    margin-left: 0;
}

.small {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    width: auto;
}

.filters {
    margin-bottom: 1rem;
}

.filters .grid {
    align-items: end;
}

.filters .form-actions {
    margin-bottom: 1rem;
}

th a {
    text-decoration: none;
    white-space: nowrap;
}

/* The topbar is one nowrap flex row, and the signed-in address is long enough to make the whole
   document wider than the viewport — at which point the browser shrinks the page to fit and
   every tap lands slightly off its target. The cause is the address, not the screen size, so
   the repair is unconditional rather than a phone tweak. */
nav.container-fluid,
nav.container-fluid ul {
    flex-wrap: wrap;
}

nav.container-fluid li {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* P2.5 — the phone pass. Pico already stacks `.grid` below 768px, so what is left is thumb
   reach: full-width primary actions and controls tall enough to hit without zooming. Scoped
   to `main` on purpose — the topbar's inline logout button must stay inline. */
@media (max-width: 768px) {
    main input:not([type="checkbox"]),
    main select,
    main textarea,
    main button,
    main [role="button"] {
        min-height: 2.75rem;
    }

    main button:not(.small),
    main [role="button"]:not(.small) {
        width: 100%;
    }

    main .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Eight columns do not fit a phone. A table wider than the viewport makes mobile Chrome
       shrink the whole page to fit, and then a tap lands on the wrong row entirely — which is
       how a salesperson fails to open a lead by tapping its name. On a phone the list is who
       and what state; everything else is one tap away on the detail page. */
    main .col-wide {
        display: none;
    }
}

/* P2.8 — the staff table's active flag, the same badge shape as every status pill. */
.b-active { background: #2e7d32; }
.b-inactive { background: #9e9e9e; }