/* Schriften kommen lokal aus vendor/fonts/fonts.css (eingebunden in index.html), nicht von Google. */

/* =====================================================================
   Cardvisr-Design — Farb-Tokens (Details: .claude/skills/cardvisr-design)
   Logo Deep Teal #1A9BA3 · Marke hell #147F86 / dunkel #36B9C0 · Dunkel: Grau #1E2126
   Zweitakzent Aprikose. eBay-Inhalte bleiben bewusst blau (eigene Farbe).
   ===================================================================== */
:root {
    --logo: #1A9BA3;          /* Logo (hell + dunkel gleich) */
    --logo-accent: #E8914A;   /* Scan-Strahl im Logo (hell + dunkel gleich) */
    --bg-page: #F4F7F8;
    --bg-card: #FFFFFF;
    --border: #DFE6EA;
    --text-primary: #172733;
    --text-secondary: #5C6B74;
    --brand: #147F86;
    --brand-hover: #106A70;
    --brand-rgb: 20, 127, 134;
    --brand-soft: #E3F3F4;
    --on-brand: #FFFFFF;
    --accent: #E0893A;
    --success: #16A34A;
    --danger: #DC2626;
}
.dark {
    --logo: #1A9BA3;
    --logo-accent: #E8914A;
    --bg-page: #1E2126;
    --bg-card: #262A31;
    --border: #363B44;
    --text-primary: #F2F3F5;
    --text-secondary: #9CA3AF;
    --brand: #36B9C0;
    --brand-hover: #4FCAD0;
    --brand-rgb: 54, 185, 192;
    --brand-soft: #173236;
    --on-brand: #0F1417;
    --accent: #F4A962;
    --success: #4ADE80;
    --danger: #F87171;
}

body {
    font-family: 'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tcg-font {
    font-family: 'Space Grotesk', sans-serif;
}

.font-plex-mono {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* "Aktiv"-Zustand für Segmented-Controls (Range-Chips, Tabs, Nav) — zarte Markenfläche.
   Die volle Markenfarbe bleibt Haupt-Aktionen vorbehalten (Buttons wie "Foto-Scan"). */
.chip-active {
    background-color: var(--brand-soft);
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dark .chip-active {
    background-color: var(--brand-soft);
    color: var(--brand);
}

/* Sanftes Einblenden beim Wechsel zwischen Dashboard / Einzelkarten / Markt */
.layer-enter {
    animation: layerFadeIn 0.22s ease-out;
}
@keyframes layerFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .layer-enter { animation: none; }
}

/* Hide scrollbar for layout elements */
.hide-scroll::-webkit-scrollbar { 
    display: none; 
}
.hide-scroll { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Subtle scrollbar for internal lists */
.custom-scroll::-webkit-scrollbar { 
    width: 5px; 
}
.custom-scroll::-webkit-scrollbar-track { 
    background: transparent; 
}
.custom-scroll::-webkit-scrollbar-thumb { 
    background: #C9D1D8; 
    border-radius: 10px; 
}
.dark .custom-scroll::-webkit-scrollbar-thumb { 
    background: #454C57; 
}

/* Flash Animation for Camera */
.camera-flash {
    animation: flashAnimation 0.3s ease-out;
}
@keyframes flashAnimation {
    0% { background-color: rgba(255, 255, 255, 0); }
    20% { background-color: rgba(255, 255, 255, 0.9); }
    100% { background-color: rgba(255, 255, 255, 0); }
}

/* Autofill Dropdowns (Light & Dark Mode) */
.autofill-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    border: 1px solid var(--border);
    margin-top: 4px;
}
.dark .autofill-dropdown {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.autofill-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 11px;
    border-bottom: 1px solid #ECF0F3;
    color: var(--text-primary);
}
.dark .autofill-item {
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.autofill-item:last-child {
    border-bottom: none;
}
.autofill-item:hover {
    background-color: var(--brand-soft);
}
.dark .autofill-item:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
}
/* Clerk-Konto-Button: ohne eigenes Profilbild statt des bunten Standard-Avatars ein
   schlichtes Personen-Symbol im Stil der übrigen Kopfzeilen-Knöpfe (siehe mountClerkUserButton). */
body[data-clerk-default-avatar="true"] .cl-userButtonAvatarBox,
body[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox {
    position: relative;
    background: #ffffff;
    border: 1px solid #C9D1D8;
}
body.dark[data-clerk-default-avatar="true"] .cl-userButtonAvatarBox,
body.dark[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox {
    background: transparent;
    border-color: #454C57;
}
body[data-clerk-default-avatar="true"] .cl-userButtonAvatarBox img,
body[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox img {
    opacity: 0;
}
body[data-clerk-default-avatar="true"] .cl-userButtonAvatarBox::after,
body[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox::after {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #7A828E;
    pointer-events: none;
}
body.dark[data-clerk-default-avatar="true"] .cl-userButtonAvatarBox::after,
body.dark[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox::after {
    color: var(--brand);
}
body[data-clerk-default-avatar="true"] .cl-userPreviewAvatarBox::after {
    font-size: 18px;
}