/* HAFEZ — shared list/form components (search, filters, pager, searchable combo, editors).
   Mobile-first like app.css; @media (min-width) blocks enhance wider screens. */

.stack { display: grid; gap: 1rem; }
.card-title { font-size: 1.05rem; margin-block-end: 0.75rem; }
.form-card-wide { max-width: 48rem; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 0.5rem; }
.inline-form .input { flex: 1 1 12rem; }
.inline-form .select { flex: 1 1 12rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
textarea.input { min-height: auto; resize: vertical; line-height: 1.5; }

.btn-icon { min-width: 44px; padding-inline: 0.5rem; }
.btn-ghost-neutral { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost-neutral:hover { background: var(--surface-2); }

/* ---- List toolbar: search + filters ---- */

.list-toolbar { display: grid; gap: 0.5rem; margin-block-end: 1rem; align-items: center; }
.search-box { position: relative; display: flex; align-items: stretch; }
.search-box .input { padding-inline-start: 2.5rem; }
.search-box .search-icon {
    position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.list-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: center; }
/* .filter is a flex wrapper (not a block box) so its control — native select, date input, or the
   SearchSelect .select div — is centred to the same line as every sibling filter/input/button,
   whatever the row's own cross-axis stretch does. */
.filter { display: flex; align-items: center; min-width: 0; }
.filter select { width: 100%; min-height: var(--tap); }
.filter-wide { min-width: 0; }
.filter-wide > * { width: 100%; }
.filter-check {
    display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding-inline: 0.75rem;
    border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
.filter-check input { width: 18px; height: 18px; accent-color: var(--primary); }

@media (min-width: 768px) {
    .list-toolbar { grid-template-columns: minmax(14rem, 1fr) auto; align-items: center; }
    .list-filters { display: flex; flex-wrap: wrap; align-items: center; }
    .filter { min-width: 11rem; }
    .filter-wide { min-width: 14rem; }
}

/* ---- Pager ---- */

.pager { flex-wrap: wrap; }
.pager-total { color: var(--muted); font-size: 0.9rem; }
.pager-controls { display: flex; align-items: center; gap: 0.5rem; }
.pager-size { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.pager-size select { width: auto; min-height: 40px; }
@media (max-width: 639px) {
    .pager { justify-content: center; }
    .pager-total { width: 100%; text-align: center; }
}

/* ---- Tabs ---- */

.tabs { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem; margin-block-end: 1rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.tab {
    flex: 1; min-height: 44px; border: 0; border-radius: 8px; background: transparent;
    color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }

/* ---- Searchable combo ---- */

/* Same box model as .input/select/.btn (border-box + shared --tap height), and a flex wrapper so the
   trigger fills the wrapper's height exactly — no extra block-level box around it that could grow taller
   or shorter than sibling controls in the same row. */
.select { position: relative; display: flex; align-items: stretch; min-width: 0; }
.select-trigger { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: start; cursor: pointer; margin: 0; }
.select-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.select-invalid .select-trigger { border-color: var(--danger); }
.select-placeholder { color: var(--muted); flex: 1; }
.select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; }
.select-caret { color: var(--muted); }
.chip {
    padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--primary-soft);
    color: var(--primary); font-size: 0.85rem; font-weight: 600;
}

.select-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.35); }

/* Phones: the options open as a bottom sheet within thumb reach. */
.select-panel {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    max-height: 75dvh;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgb(0 0 0 / 0.2);
}

.select-panel-header { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem; border-block-end: 1px solid var(--border); }
.select-panel-header .search-box { flex: 1; }
.select-options { list-style: none; margin: 0; padding: 0.25rem 0; overflow-y: auto; flex: 1; }
.select-option {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 52px; padding: 0.5rem 1rem;
    border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.select-option:hover { background: var(--surface-2); }
.select-option.selected { color: var(--primary); font-weight: 600; }
.select-option-text { display: grid; flex: 1; }
.select-check { color: var(--primary); }
.select-empty { padding: 1rem; text-align: center; }
.select-panel-footer { display: flex; gap: 0.5rem; padding: 0.75rem; border-block-start: 1px solid var(--border); }
.select-panel-footer:empty { display: none; }
.select-panel-footer .btn { flex: 1; }

.checkbox {
    display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
    border: 2px solid var(--border); border-radius: 6px; color: var(--primary-contrast);
}
.checkbox.checked { background: var(--primary); border-color: var(--primary); }

/* Wider screens: a dropdown under the field. */
@media (min-width: 768px) {
    .select-backdrop { background: transparent; }
    .select-panel {
        position: absolute;
        inset-inline: 0;
        inset-block-end: auto;
        top: calc(100% + 4px);
        max-height: 22rem;
        min-width: 16rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
    }
    .select-option { min-height: 44px; }
}

/* ---- Data list column layouts on wide screens ---- */

.data-note { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.row-editor { display: grid; gap: 0.75rem; width: 100%; padding-block: 0.5rem; }
@media (min-width: 768px) {
    .data-list-users .data-row { grid-template-columns: 1.6fr 1.3fr 1.6fr 0.8fr 0.9fr; }
    .data-list-orgs .data-row { grid-template-columns: 2fr 1.2fr 1fr 0.8fr 0.9fr; }
    .data-list-roles .data-row { grid-template-columns: 2.2fr 1fr 1fr 0.8fr 0.9fr; }
    .data-list-permissions .data-row { grid-template-columns: 2.4fr 1fr 0.8fr 0.9fr; }
    .data-list-4 .data-row { grid-template-columns: 2fr 1fr 0.8fr 0.9fr; }
    .row-editor { grid-column: 1 / -1; }
}

/* ---- Permissions checklist ---- */

.permission-group { display: grid; gap: 0.5rem; margin-block-start: 0.75rem; }
.permission-group-title { font-size: 0.9rem; color: var(--muted); margin: 0; }
.permission {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
.permission input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.permission > span { display: grid; gap: 0.125rem; }
.permission-name { font-weight: 600; }
.permission.checked { border-color: var(--primary); background: var(--primary-soft); }

/* ---- Terms editor ---- */

.term-list { display: grid; gap: 0.75rem; margin-block-start: 0.75rem; }
.term-row { display: grid; gap: 0.375rem; }
.term-label { font-weight: 600; display: flex; gap: 0.5rem; align-items: baseline; }
.term-key { font-size: 0.8rem; font-weight: 400; }
.term-input { display: flex; gap: 0.5rem; }
.term-input .input { flex: 1; }
.add-term { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px dashed var(--border); }
@media (min-width: 640px) {
    .term-row { grid-template-columns: 12rem 1fr; align-items: center; }
}

/* ---- Texts ---- */

.text-list { display: grid; gap: 0.75rem; }
.text-item { display: grid; gap: 0.5rem; }
.text-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.text-key { font-size: 0.8rem; margin-inline-start: auto; }
.text-value { white-space: pre-wrap; margin: 0; }
.text-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- Navigation: management items live in the hub on phones ---- */


/* ---- Participants & points ---- */

.badge-warn { background: var(--warn-soft); color: var(--warn); }
.input-narrow { flex: 0 0 6.5rem !important; }
.filter-label { display: block; font-size: 0.8rem; color: var(--muted); margin-block-end: 0.125rem; }
.choice-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }

.points { font-weight: 700; font-variant-numeric: tabular-nums; }
.points-plus { color: var(--ok); }
.points-minus { color: var(--danger); }
.input-points { font-size: 1.5rem; font-weight: 700; text-align: center; }

.quick-amounts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; }
.chip-btn {
    min-width: 52px; min-height: 44px; padding-inline: 0.75rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.chip-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.balance-card {
    display: grid; justify-items: center; gap: 0.25rem; padding: 1.25rem; text-align: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.balance-value { font-size: 2.5rem; line-height: 1.1; color: var(--primary); font-variant-numeric: tabular-nums; }
.balance-totals { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; font-size: 0.85rem; color: var(--muted); }

.tabs { overflow-x: auto; }
.tab { white-space: nowrap; padding-inline: 0.75rem; }

@media (min-width: 768px) {
    .data-list-units .data-row { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr 0.8fr 1fr; }
    .data-list-participants .data-row { grid-template-columns: 1.8fr 1.2fr 1fr 0.7fr 0.8fr 1fr; }
    .data-list-points .data-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
    .filter input[type="date"] { min-width: 10rem; }
}

fieldset.form { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---- Rewards & inventory ---- */
.badge-danger { background: var(--danger-soft); color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-block-end: 1rem; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.stat {
    display: grid; gap: 0.15rem; padding: 0.75rem; text-align: start; color: var(--text); text-decoration: none; font: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: var(--tap);
}
button.stat, a.stat { cursor: pointer; }
.stat-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.8rem; color: var(--muted); }
.stat-warn .stat-value { color: var(--warn, #b45309); }
.stat-danger .stat-value { color: var(--danger); }
.stat-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.reward-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .reward-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .reward-grid { grid-template-columns: repeat(4, 1fr); } }
.reward-card {
    display: grid; height: 100%; overflow: hidden; color: var(--text); text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.reward-card:hover { border-color: var(--primary); }
.reward-card-off { opacity: 0.7; }
.reward-card-body { display: grid; gap: 0.25rem; padding: 0.6rem 0.75rem 0.75rem; align-content: start; }
.reward-card-name { font-weight: 600; line-height: 1.3; }
.reward-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: space-between; }

.reward-grid li { position: relative; }
.reward-card-action { position: absolute; inset-inline-end: 0.4rem; inset-block-end: 0.4rem; }

.reward-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.reward-image-empty { display: grid; place-items: center; color: var(--muted); }
.reward-image-lg { aspect-ratio: auto; max-height: 20rem; object-fit: contain; border-radius: var(--radius-sm); }
.reward-image-lg.reward-image-empty { aspect-ratio: 16 / 9; }

.reward-layout { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .reward-layout { grid-template-columns: 3fr 2fr; align-items: start; } }
.reward-hero { display: grid; gap: 0.75rem; }
.reward-hero-info { display: grid; justify-items: center; gap: 0.25rem; text-align: center; }
.reward-image-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.reward-image-actions label.btn { cursor: pointer; }
.reward-image-actions .disabled { opacity: 0.6; pointer-events: none; }
fieldset.form { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Cards & selling ---- */
.sell { max-width: 36rem; margin-inline: auto; }
.tap-card { display: grid; gap: 0.75rem; text-align: center; }
.tap-reward { font-size: 1.2rem; }
.tap-price { display: flex; gap: 0.4rem; align-items: baseline; justify-content: center; margin: 0; }
.tap-zone {
    display: grid; gap: 0.35rem; justify-items: center; padding: 1.5rem 1rem; color: var(--primary);
    background: var(--primary-soft); border: 2px dashed var(--primary); border-radius: var(--radius);
    animation: tap-pulse 1.8s ease-in-out infinite;
}
.tap-zone-busy { animation: none; opacity: 0.7; }
@keyframes tap-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 8px var(--primary-soft); } }
@media (prefers-reduced-motion: reduce) { .tap-zone { animation: none; } }
.manual { text-align: start; }
.manual summary { cursor: pointer; color: var(--muted); padding-block: 0.5rem; min-height: var(--tap); display: flex; align-items: center; }
.receipt { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.receipt-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.receipt-line { margin: 0; font-size: 1.1rem; }
.write-panel { display: grid; gap: 0.5rem; padding: 0.75rem; margin-block-end: 0.75rem; background: var(--primary-soft); border-radius: var(--radius-sm); }
.write-panel p { margin: 0; }

/* ---- Achievements & notifications ---- */
.topbar-bell {
    position: relative; display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap);
    color: var(--text); border-radius: var(--radius-sm); text-decoration: none;
}
.topbar-bell:hover { background: var(--surface-2); }
.bell-badge {
    position: absolute; top: 4px; inset-inline-end: 2px; min-width: 1.15rem; height: 1.15rem; padding-inline: 0.25rem;
    display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; line-height: 1;
    background: var(--danger); color: #fff; border-radius: 999px;
}

.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.notice {
    display: flex; gap: 0.75rem; align-items: flex-start; width: 100%; text-align: start; padding: 0.75rem; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: var(--tap); cursor: pointer;
}
.notice-unread { border-color: var(--primary); background: var(--primary-soft); }
.notice-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-2); color: var(--primary); }
.notice-body { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.notice-dot { flex: none; width: 0.6rem; height: 0.6rem; margin-block-start: 0.4rem; border-radius: 50%; background: var(--primary); }

.medal-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.medal { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.medal-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.medal-body { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }

/* Web Push opt-in (A6): a friendly first-run card, plus a quiet dismissible reminder strip on the home page. */
.push-card { max-width: 36rem; }
.push-install-steps { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.75rem 1rem; }
.push-install-steps ol { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.push-reminder-strip {
    display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.6rem 0.9rem; margin-block-end: 0.75rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9rem;
}
.push-reminder-strip .btn-sm { margin-inline-start: auto; }
.push-reminder-strip .btn-sm + .btn-sm { margin-inline-start: 0; }
.check-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.check-group legend { font-weight: 600; padding: 0; margin-block-end: 0.25rem; }

/* ---- Organization identity ---- */
.brand-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo-org { width: auto; max-width: 72px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; }
.logo-preview { display: grid; place-items: center; min-height: 8rem; padding: 0.75rem; margin-block-end: 0.75rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.logo-preview img { max-width: 100%; max-height: 8rem; object-fit: contain; }
.logo-empty { color: var(--muted); }

/* ---- Dashboard & reports ---- */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.5rem; }
.dash-head .section-title { margin: 0; }
.dash-grid { display: grid; gap: 0.75rem; margin-block: 0.75rem; }
@media (min-width: 768px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-ok .stat-value { color: var(--success); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plain-list li { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }

.chart { display: flex; align-items: flex-end; gap: 2px; height: 9rem; padding-block-start: 0.5rem; }
.chart-day { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.bar { flex: 1; min-height: 0; border-radius: 2px 2px 0 0; }
.bar-earned { background: var(--ok); }
.bar-spent { background: var(--warn); }
.chart-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-block-start: 0.25rem; }
.chart-legend { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.dot-earned { background: var(--ok); }
.dot-spent { background: var(--warn); }

.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; gap: 0.15rem 0.5rem; align-items: baseline; }
.bar-label { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { grid-area: value; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-track { grid-area: track; height: 0.5rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.self-card { display: grid; gap: 0.5rem; margin-block-end: 0.75rem; }
.self-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.self-balance { display: flex; align-items: baseline; gap: 0.5rem; }

.report-layout { display: grid; gap: 1rem; }
@media (min-width: 900px) { .report-layout { grid-template-columns: minmax(16rem, 1fr) 2fr; align-items: start; } }
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.report-item {
    display: grid; gap: 0.15rem; width: 100%; text-align: start; padding: 0.75rem; font: inherit; color: var(--text); cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: var(--tap);
}
.report-item:hover { border-color: var(--primary); }
.report-item-active { border-color: var(--primary); background: var(--primary-soft); }
/* The form sits in its own grid track next to the report list; let it use that track's full width instead of the generic form-card cap. */
.report-form { max-width: none; }