/* App-specific additions on top of Pico.css. */

:root {
    --flash-success-bg: #d8f3dc;
    --flash-success-fg: #1b4332;
    --flash-error-bg: #fde2e1;
    --flash-error-fg: #7a1712;
}

@media (prefers-color-scheme: dark) {
    :root {
        --flash-success-bg: #1b4332;
        --flash-success-fg: #d8f3dc;
        --flash-error-bg: #5c1612;
        --flash-error-fg: #fde2e1;
    }
}

.brand {
    font-weight: 700;
}

nav form.inline {
    margin: 0;
}

nav form.inline button {
    margin: 0;
    padding: 0.3rem 0.75rem;
}

.narrow {
    max-width: 26rem;
    margin-inline: auto;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
}

.flash-success {
    background: var(--flash-success-bg);
    color: var(--flash-success-fg);
}

.flash-error {
    background: var(--flash-error-bg);
    color: var(--flash-error-fg);
}

/* Cards (one per catalog item / item type) */
.card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header form.inline {
    margin: 0;
    display: flex;
    gap: 0.25rem;
}

.spacer {
    flex: 1;
}

.card.inactive {
    opacity: 0.65;
}

.card.has-error {
    border: 2px solid var(--flash-error-fg);
}

.generic {
    font-size: 1.15rem;
}

button.small {
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.875rem;
    width: auto;
}

.badge {
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    background: var(--pico-secondary-background);
    color: var(--pico-secondary-inverse);
}

.label {
    display: block;
    margin-bottom: 0.375rem;
}

.field-error {
    color: var(--flash-error-fg);
    background: var(--flash-error-bg);
    padding: 0.25rem 0.75rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 0.5rem;
}

.actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.actions button {
    width: auto;
}

.confirm {
    margin-block: 0.75rem;
}

/* Month checkboxes: 6 per row on phones, 12 on wide screens */
fieldset.months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem 0.5rem;
    margin-bottom: var(--pico-spacing);
}

fieldset.months label {
    margin: 0;
    white-space: nowrap;
}

@media (min-width: 768px) {
    fieldset.months {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Year status badges */
.status {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8em;
    font-weight: 600;
    vertical-align: middle;
    color: #fff;
}

.status-setup { background: #6c757d; }
.status-collecting { background: #1971c2; }
.status-ordered { background: #2b8a3e; }
.status-closed { background: #495057; }

.inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.inline-form input {
    max-width: 10rem;
}

.inline-form button {
    width: auto;
}

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

/* Compact collapsible cards: one row (name, controls) until expanded */
.card.compact {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}

.card.compact > .card-header {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.card.compact.open > .card-header {
    margin-bottom: 0.75rem;
}

.card-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.card-title .subtitle {
    color: var(--pico-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}

button.icon-btn {
    margin: 0;
    padding: 0.35rem 0.5rem;
    width: auto;
    line-height: 1;
    flex: none;
}

.price-field {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
}

.price-field input {
    width: 5.5rem;
    margin: 0;
    padding: 0.3rem 0.5rem;
    height: auto;
    text-align: right;
}

.price-field span {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
}

details.add-new {
    margin-bottom: 1rem;
}

details.add-new > summary[role="button"] {
    width: auto;
    display: inline-block;
}

details.add-new > summary::after {
    display: none;
}

.muted {
    color: var(--pico-muted-color);
    font-weight: normal;
}

:root {
    --flash-warning-bg: #fff3bf;
    --flash-warning-fg: #5c4400;
}

@media (prefers-color-scheme: dark) {
    :root {
        --flash-warning-bg: #5c4400;
        --flash-warning-fg: #fff3bf;
    }
}

.flash-warning {
    background: var(--flash-warning-bg);
    color: var(--flash-warning-fg);
}

.flash-warning a {
    color: inherit;
    font-weight: 600;
}

.flash-warning ul {
    margin-bottom: 0.5rem;
}

/* Members */
.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 1rem;
}

.search-form input[type="search"] {
    flex: 1 1 12rem;
    margin: 0;
}

.search-form select {
    flex: 0 1 9rem;
    margin: 0;
}

.search-form button {
    width: auto;
    margin: 0;
}

.member-list {
    list-style: none;
    padding: 0;
}

.member-list li {
    list-style: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.member-list li a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.25rem;
    text-decoration: none;
    color: inherit;
}

.member-list li.inactive {
    opacity: 0.6;
}

.actions a[role="button"] {
    width: auto;
}

/* Import preview */
.import-status {
    display: inline-block;
    margin-right: 0.75rem;
}

tr.import-exact td,
tr.import-invalid td {
    color: var(--pico-muted-color);
}

tr.import-possible td {
    background: var(--flash-warning-bg);
    color: var(--flash-warning-fg);
}

tr.import-invalid td:last-child {
    color: var(--flash-error-fg);
}

/* Navigation wraps on narrow screens */
header nav {
    flex-wrap: wrap;
}

header nav ul {
    flex-wrap: wrap;
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.text-error { color: var(--flash-error-fg); }
.text-warning { color: var(--flash-warning-fg); background: var(--flash-warning-bg); padding: 0 0.25rem; border-radius: 0.25rem; }
.text-ok { color: var(--flash-success-fg); }

th.num, td.num {
    text-align: right;
    white-space: nowrap;
}

/* Member autocomplete */
.autocomplete {
    position: relative;
    margin-bottom: 1rem;
}

.suggestions {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    top: 100%;
    margin: -0.75rem 0 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-card-box-shadow);
}

.suggestions li {
    list-style: none;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.suggestions li[aria-selected="true"] {
    background: var(--pico-primary-focus);
}

.suggestions li small {
    color: var(--pico-muted-color);
}

.suggestions .add-new-option {
    font-weight: 600;
    color: var(--pico-primary);
}

/* Stub form */
.stub-member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stub-items {
    margin-bottom: 1rem;
}

.stub-row {
    display: grid;
    grid-template-columns: 1fr auto 3.5rem;
    grid-template-areas:
        "name price qty"
        "name total total";
    align-items: center;
    gap: 0 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.stub-name {
    grid-area: name;
    display: flex;
    flex-direction: column;
    margin: 0;
    cursor: pointer;
}

.stub-name strong {
    font-size: 1.1rem;
}

.stub-name small {
    color: var(--pico-muted-color);
}

.stub-price {
    grid-area: price;
    white-space: nowrap;
    color: var(--pico-muted-color);
}

.stub-row input {
    grid-area: qty;
    margin: 0;
    padding: 0.35rem 0.5rem;
    height: auto;
    text-align: center;
    font-size: 1.1rem;
}

.stub-line-total {
    grid-area: total;
    text-align: right;
    font-size: 0.875rem;
    min-height: 1em;
}

.stub-total {
    font-size: 1.25rem;
}

.input-with-button {
    display: flex;
    gap: 0.5rem;
}

.input-with-button input {
    margin: 0;
}

.input-with-button button {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.stub-form .grid label {
    margin-bottom: 0.75rem;
}

/* Totals */
.totals-table tr.zero td {
    color: var(--pico-muted-color);
}

.totals-table tfoot th,
.summary-table td {
    font-weight: 600;
}

.summary-table {
    max-width: 32rem;
}

/* Print: only the content, compact black-on-white tables */
@media print {
    header.container,
    .no-print,
    .flash,
    button,
    a[role="button"] {
        display: none !important;
    }

    :root {
        --pico-background-color: #fff;
        --pico-color: #000;
        --pico-muted-color: #444;
        --pico-font-size: 11pt;
    }

    body,
    main.container {
        padding: 0;
        max-width: none;
    }

    table {
        font-size: 10pt;
    }

    th,
    td {
        padding: 0.2rem 0.4rem;
        border-bottom: 1px solid #999;
    }

    tr {
        break-inside: avoid;
    }

    .page-break {
        break-before: page;
    }

    .table-wrap {
        overflow: visible;
    }

    .text-warning,
    .text-error {
        background: none;
        color: #000;
    }
}

/* Distribution (phone-first) */
.dist-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dist-period h1 {
    margin: 0 auto 0 0;
}

.dist-period select {
    width: auto;
    margin: 0;
}

.dist-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dist-controls input[type="search"] {
    flex: 1 1 10rem;
    margin: 0;
}

.segmented {
    display: flex;
    flex: 1 1 18rem;
}

.segmented button {
    flex: 1;
    margin: 0;
    padding: 0.45rem 0.5rem;
    border-radius: 0;
    background: transparent;
    color: var(--pico-primary);
    border: 1px solid var(--pico-primary);
    white-space: nowrap;
}

.segmented button:first-child {
    border-radius: var(--pico-border-radius) 0 0 var(--pico-border-radius);
}

.segmented button:last-child {
    border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
}

.segmented button[aria-pressed="true"] {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
}

.dist-member .done-mark {
    display: none;
    color: var(--flash-success-fg);
    font-weight: 700;
    font-size: 1.2rem;
}

.dist-member.done .done-mark {
    display: inline;
}

.dist-member.done .card-title strong {
    color: var(--pico-muted-color);
}

.overdue-badge {
    background: var(--flash-warning-bg);
    color: var(--flash-warning-fg);
    white-space: nowrap;
    font-size: 0.8rem;
}

.dist-entries {
    padding: 0;
    margin-bottom: 0.75rem;
}

.dist-entries li {
    list-style: none;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.dist-entries label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    margin: 0;
}

.dist-entries input[type="checkbox"] {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    flex: none;
}

.dist-entries label span {
    display: flex;
    flex-direction: column;
}

.dist-entries small {
    color: var(--pico-muted-color);
}

.dist-entries li.overdue small {
    color: var(--flash-warning-fg);
}

.dist-member [data-mark-all] {
    width: 100%;
    margin: 0;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.6rem 0.75rem 0.6rem 1rem;
    border-radius: var(--pico-border-radius);
    background: #212529;
    color: #fff;
    box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}

.toast[hidden] {
    display: none;
}

.toast.toast-error {
    background: var(--flash-error-fg);
}

.toast button {
    width: auto;
    margin: 0;
    padding: 0.3rem 0.75rem;
}

/* Dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.dash-card > .card-header {
    margin-bottom: 0.75rem;
}

.dash-highlight {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: var(--pico-border-radius);
    background: var(--pico-primary-focus);
    text-decoration: none;
}

.dash-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.dash-stats {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.dash-stats div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-bottom: 0.3rem;
}

.dash-stats dt {
    font-weight: normal;
    color: var(--pico-muted-color);
}

.dash-stats dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* Member detail */
.year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.year-tabs a {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    text-decoration: none;
}

.year-tabs a[aria-current="page"] {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

.delivery-grid th,
.delivery-grid td {
    padding: 0.35rem 0.3rem;
    text-align: center;
    font-size: 0.875rem;
}

.delivery-grid th[scope="row"] {
    text-align: left;
    white-space: nowrap;
}

.delivery-grid th.month.current {
    color: var(--pico-primary);
    text-decoration: underline;
}

.cell-delivered { color: var(--flash-success-fg); font-weight: 700; }
.cell-pending { color: var(--flash-error-fg); background: var(--flash-error-bg); font-weight: 700; }
.cell-scheduled { color: var(--pico-muted-color); }

.legend span {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    border-radius: 0.25rem;
}