/* ══════════════════════════════
   SEARCH PAGE
   ══════════════════════════════ */
.search-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 6rem 2rem 3rem;
}
.search-header { text-align: center; margin-bottom: 2rem; }


.search-scope-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.search-form-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
}
.search-form-icon { font-size: 1.25rem; color: var(--outline); flex-shrink: 0; }
.search-form-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    padding: .625rem .25rem;
    color: var(--on-surface);
    font-family: var(--font-main);
    outline: none;
}
.search-form-btn {
    padding: .625rem 1.25rem;
    border-radius: .75rem;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-main);
    white-space: nowrap;
}
.search-form-btn:hover { opacity: .9; }
.search-results-heading { font-size: 1rem; font-weight: 700; color: var(--on-surface); margin: 0 0 1rem; }
.search-section-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--outline);
    margin: 0 0 .75rem;
}
.search-item-list { display: flex; flex-direction: column; margin-bottom: 1.5rem; overflow: hidden; border-radius: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.search-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    text-decoration: none;
    color: var(--on-surface);
    transition: background .15s;
}
.search-item-row:last-child { border-bottom: none; }
.search-item-row:hover { background: var(--surface-container); }
.search-item-name { font-size: .9375rem; font-weight: 600; color: var(--on-surface); margin: 0 0 .125rem; }
.search-item-meta { font-size: .8rem; color: var(--outline); display: flex; align-items: center; gap: .25rem; }
.search-item-price { text-align: right; flex-shrink: 0; margin-left: 1rem; }
.search-item-total { font-size: .9375rem; font-weight: 700; color: var(--on-surface); display: block; }
.search-item-unit { font-size: .75rem; color: var(--outline); display: block; }
.search-receipt-list { display: flex; flex-direction: column; margin-bottom: 1.5rem; overflow: hidden; border-radius: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.search-receipt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    text-decoration: none;
    color: var(--on-surface);
    transition: background .15s;
}
.search-receipt-row:last-child { border-bottom: none; }
.search-receipt-row:hover { background: var(--surface-container); }
.search-receipt-store { font-weight: 600; color: var(--on-surface); display: block; }
.search-receipt-date { font-size: .8rem; color: var(--outline); }
.search-receipt-amount { font-weight: 700; color: var(--primary); font-size: .9375rem; }
.search-no-results { text-align: center; padding: 3rem; color: var(--outline); }
.search-no-results-icon { font-size: 3rem; display: block; margin: 0 auto 1rem; opacity: .4; }

/* ══════════════════════════════
   TAGS PAGE
   ══════════════════════════════ */
.tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.tag-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid transparent;
    transition: box-shadow .15s, border-color .15s;
}
.tag-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); border-color: var(--outline-variant); }
.tag-card-left { display: flex; flex-direction: column; gap: .5rem; }
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
}
.tag-stats { display: flex; flex-direction: column; gap: .125rem; }
.tag-stat-line { font-size: .8rem; color: var(--outline); display: flex; align-items: center; gap: .25rem; }
.tag-stat-val { font-weight: 600; color: var(--on-surface); }
.tag-card-arrow { font-size: 1.25rem; color: var(--outline-variant); }
.tag-card:hover .tag-card-arrow { color: var(--primary); }
.tag-card-cta { font-size: .75rem; color: var(--outline); margin-top: .25rem; }

/* ══════════════════════════════
   TAG ITEMS PAGE
   ══════════════════════════════ */
.tagi-receipt-card {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
    margin-bottom: 1rem;
}
.tagi-receipt-header {
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
}
.tagi-receipt-header-left { display: flex; flex-direction: column; gap: .125rem; }
.tagi-receipt-store { font-size: 1rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.tagi-receipt-store:hover { opacity: .8; }
.tagi-receipt-date { font-size: .8rem; color: var(--outline); }
.tagi-receipt-total { font-size: 1rem; font-weight: 700; color: var(--on-surface); }

/* ══════════════════════════════
   USERS PAGE
   ══════════════════════════════ */
.user-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--secondary-container);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: .5rem;
}
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .5rem;
    border-radius: .375rem;
    font-size: .7rem;
    font-weight: 600;
    margin-right: .25rem;
}
.user-badge-admin    { background: #0891b2; color: #fff; }
.user-badge-user     { background: #e2edf2; color: #4b6b7c; }
.user-badge-provider { background: #1a3040; color: #fff; }

/* ══════════════════════════════
   ERRORS PAGE
   ══════════════════════════════ */
.errors-status-banner {
    background: rgba(186,26,26,.07);
    border: 1px solid rgba(186,26,26,.15);
    border-radius: .75rem;
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    color: var(--error);
    font-weight: 600;
}
.errors-empty-banner {
    background: #d1fae5;
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .875rem;
    font-size: .9375rem;
    color: #065f46;
    font-weight: 600;
}
.errors-traceback {
    font-family: monospace;
    font-size: .75rem;
    color: var(--outline);
    white-space: pre-wrap;
    margin-top: .25rem;
    display: block;
}
.errors-reparse-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .375rem .875rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--primary);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-main);
    transition: background .15s;
}
.errors-reparse-btn:hover { background: var(--surface-container-low); }

/* ══════════════════════════════
   ARTIKELÖVERSIKT PAGE
   ══════════════════════════════ */
.art-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 2rem 3rem;
}
.art-controls {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.art-ctrl-group { display: flex; flex-direction: column; gap: .375rem; }
.art-ctrl-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--outline);
}
.art-ctrl-select, .art-ctrl-input {
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    font-size: .875rem;
    color: var(--on-surface);
    font-family: var(--font-main);
}
.art-ctrl-select:focus, .art-ctrl-input:focus { outline: none; border-color: var(--primary); }
.art-ctrl-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    padding-bottom: .5rem;
}
.art-ctrl-toggle input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--primary);
}
.art-panels { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) { .art-panels.dual { grid-template-columns: 1fr 1fr; } }
.art-panel {
    background: var(--surface-container-lowest);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
}
.art-panel-header {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.art-panel-title { font-size: 1rem; font-weight: 700; color: var(--on-surface); margin: 0; }
.art-panel-meta { font-size: .8rem; color: var(--outline); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.art-count-badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .2rem .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(0,69,87,.1);
    color: var(--primary);
}
.art-ean-toggle-row {
    padding: .625rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--outline-variant);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--on-surface);
    background: var(--surface-container-low);
}
.art-ean-toggle-row input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }
.art-panel-loading { padding: 3rem; text-align: center; color: var(--outline); font-size: .9rem; }

/* ── Dark mode overrides for new pages ── */
[data-theme="dark"] .stat-mini-card,
[data-theme="dark"] .stat-spend-card,
[data-theme="dark"] .stat-year-card,
[data-theme="dark"] .stat-table-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .search-form-card,
[data-theme="dark"] .search-item-row,
[data-theme="dark"] .search-receipt-row,
[data-theme="dark"] .tag-card,
[data-theme="dark"] .tagi-receipt-card,
[data-theme="dark"] .art-panel,
[data-theme="dark"] .art-controls { background: var(--surface-container); }

[data-theme="dark"] .stat-year-header,
[data-theme="dark"] .stat-card-header,
[data-theme="dark"] .art-ean-toggle-row,
[data-theme="dark"] .tagi-receipt-header,
[data-theme="dark"] .stat-table th { background: var(--surface-container-high); }

[data-theme="dark"] .stat-month-cell { background: var(--surface-container-high); }
[data-theme="dark"] .stat-month-cell:hover { background: var(--surface-container-highest); }

[data-theme="dark"] .search-item-list,
[data-theme="dark"] .search-receipt-list { box-shadow: none; }
[data-theme="dark"] .search-item-row:hover,
[data-theme="dark"] .search-receipt-row:hover { background: var(--surface-container-high); }

[data-theme="dark"] .stat-nav-btn,
[data-theme="dark"] .stat-table-action,
[data-theme="dark"] .errors-reparse-btn,
[data-theme="dark"] .stat-year-export { background: var(--surface-container); border-color: var(--outline); }

[data-theme="dark"] .art-ctrl-select,
[data-theme="dark"] .art-ctrl-input {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface);
}