/* ===== Dark Theme Override (v4 colors for v5) ===== */
/* https://github.com/daisyui/v4-themes-for-v5 */
[data-theme="dark"] {
    --color-base-100: oklch(25.3267% 0.015896 252.417568);
    --color-base-200: oklch(23.2607% 0.013807 253.100675);
    --color-base-300: oklch(21.1484% 0.01165 254.087939);
    --color-base-content: oklch(74.6477% 0.0216 264.435964);
    --color-primary: oklch(65.69% 0.196 275.75);
    --color-primary-content: oklch(13.138% 0.0392 275.75);
    --color-secondary: oklch(74.8% 0.26 342.55);
    --color-secondary-content: oklch(14.96% 0.052 342.55);
    --color-accent: oklch(74.51% 0.167 183.61);
    --color-accent-content: oklch(14.902% 0.0334 183.61);
    --color-neutral: oklch(31.3815% 0.021108 254.139175);
    --color-neutral-content: oklch(74.6477% 0.0216 264.435964);
    --color-info: oklch(72.06% 0.191 231.6);
    --color-info-content: oklch(0% 0 0);
    --color-success: oklch(64.8% 0.150 160);
    --color-success-content: oklch(0% 0 0);
    --color-warning: oklch(84.71% 0.199 83.87);
    --color-warning-content: oklch(0% 0 0);
    --color-error: oklch(71.76% 0.221 22.18);
    --color-error-content: oklch(0% 0 0);
    --radius-selector: 1.9rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

/* ===== Rarity Badge Colors ===== */
/* Used in JS-generated HTML and templates */
.rarity-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    color: #fff;
    vertical-align: middle;
}

.rarity-common      { background-color: #747f8d; }
.rarity-uncommon    { background-color: #43b581; }
.rarity-novel       { background-color: #3ba3a3; }
.rarity-rare        { background-color: #5865f2; }
.rarity-unprecedented { background-color: #9b59b6; }
.rarity-remarkable  { background-color: #e91e63; }
.rarity-extraordinary { background-color: #faa61a; color: #1a1a1a; }
.rarity-unique      { background-color: #e74c3c; }
.rarity-legendary   { background-color: #f47b67; }

/* ===== Rarity Text Colors ===== */
/* Used for inline comma-separated mutation/breed names */
.rarity-text-common        { color: #747f8d; }
.rarity-text-uncommon      { color: #43b581; }
.rarity-text-novel         { color: #3ba3a3; }
.rarity-text-rare          { color: #5865f2; }
.rarity-text-unprecedented { color: #9b59b6; }
.rarity-text-remarkable    { color: #e91e63; }
.rarity-text-extraordinary { color: #faa61a; }
.rarity-text-unique        { color: #e74c3c; }
.rarity-text-legendary     { color: #f47b67; }

/* ===== Health Impact Border Colors ===== */
/* Applied as border-left to info/mutation cards */
.health-positive { border-left: 4px solid #57f287; }
.health-neutral  { border-left: 4px solid #72767d; }
.health-negative { border-left: 4px solid #ed4245; }

/* When used as an inline text label (stat cell), add breathing room after the bar */
.health-impact {
    padding-left: 8px;
}

/* ===== Pooch Card Status Border ===== */
.pooch-card {
    border-left: 4px solid #72767d;
}
.pooch-card.status-healthy { border-left-color: #57f287; }
.pooch-card.status-sick    { border-left-color: #fee75c; }
.pooch-card.status-old     { border-left-color: #faa61a; }
.pooch-card.status-dead    { border-left-color: #ed4245; }

/* ===== Pooch Selection Cards (Breeding) ===== */
.pooch-select-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}
.pooch-select-card:hover  { border-color: var(--color-primary); }
.pooch-select-card.selected {
    border-color: #57f287;
    background-color: rgba(87, 242, 135, 0.08);
}
.pooch-select-card.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Filter Buttons ===== */
.filter-btn {
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid var(--color-base-300);
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    transition: background-color 0.15s;
}
.filter-btn:hover    { background-color: var(--color-base-300); }
.filter-btn.active   { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }

/* ===== Breeding Interface Layout ===== */
.breeding-interface {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .breeding-interface {
        grid-template-columns: 1fr;
    }
    .breeding-middle {
        padding-top: 0;
    }
}

.breeding-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 60px;
}

/* ===== Detail Layout (Breed/Mutation detail pages) ===== */
.detail-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.detail-main   { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.detail-sidebar { width: 280px; flex-shrink: 0; }

@media (max-width: 768px) {
    .detail-layout {
        flex-direction: column;
    }
    .detail-sidebar { width: 100%; }
}

/* ===== Filters Bar ===== */
.filters-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-input,
.filter-select {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}

.search-input:focus,
.filter-select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ===== Event Feed ===== */
.births  { color: #57f287; }
.deaths  { color: #ed4245; }

/* ===== Incest Warning ===== */
.incest-warning {
    background-color: rgba(254, 231, 92, 0.15);
    color: #fee75c;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid rgba(254, 231, 92, 0.3);
}

/* ===== Stats Grid (Mutation Detail) ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-item .stat-label {
    font-size: 0.78rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-item .stat-display-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ===== Info List (Detail pages sidebar) ===== */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-item .info-label {
    font-size: 0.78rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-item .info-value {
    font-weight: 500;
}