/* =========================================================
   GroBase 2.0 Design System — Phase 2
   Badges, tables, utilities, stages, empty states
   ========================================================= */

/* -------------------------------
   1. Badge Foundation
-------------------------------- */

.badge,
.gb-badge {
    border-radius: var(--gb-radius-pill);
    font-size: 0.7rem !important;
    font-weight: 700;
    padding: 0.4em 0.65em;
    line-height: 1;
}

/* -------------------------------
   2. General Badges
-------------------------------- */

.badge-general-info {
    background-color: #F3F0FF !important;
    color: #5F4BB6 !important;
}

.badge-number-solid {
    background-color: #E2E3E5 !important;
    color: #212529 !important;
}

.badge-number-oj {
    background-color: #E2E3E5 !important;
    color: var(--gb-accent) !important;
}

.badge-task {
    background-color: #F3E5F5 !important;
    color: #6A1B9A !important;
}

.badge-review-profile {
    background-color: #D1ECF1 !important;
    color: #0C5460 !important;
}

/* -------------------------------
   3. Grow Medium Badges
-------------------------------- */

.badge-soil {
    background-color: #7B5514 !important;
    color: #FFFFFF !important;
}

.badge-soilless {
    background-color: #D6B553 !important;
    color: #212529 !important;
}

.badge-hydroponic {
    background-color: #128AB0 !important;
    color: #FFFFFF !important;
}

.badge-watering-method {
    background-color: #E2E3E5 !important;
    color: #128AB0 !important;
}

/* -------------------------------
   4. Cycle / Plant Status Badges
-------------------------------- */

.badge-cycle-status-completed,
.badge-plant-status-harvested,
.badge-action-created {
    background-color: #D4EDDA !important;
    color: #155724 !important;
}

.badge-cycle-status-ongoing,
.badge-plant-status-ongoing {
    background-color: #FFF3CD !important;
    color: #856404 !important;
}

.badge-plant-status-terminated,
.badge-action-deleted {
    background-color: #F8D7DA !important;
    color: #842029 !important;
}

.badge-action-edited {
    background-color: #D1ECF1 !important;
    color: #0C5460 !important;
}

/* -------------------------------
   5. Plant / Genetic Badges
-------------------------------- */

.badge-sx-female {
    background-color: #FCE4EC !important;
    color: #880E4F !important;
}

.badge-sx-male {
    background-color: #D1ECF1 !important;
    color: #0C5460 !important;
}

.badge-sx-herm {
    background-color: #F8D7DA !important;
    color: #721C24 !important;
}

.badge-sx-unknown {
    background-color: #E2E3E5 !important;
    color: #383D41 !important;
}

.badge-flowering-photoperiod {
    background-color: #E0F7E9 !important;
    color: #2E7D32 !important;
}

.badge-flowering-autoflower {
    background-color: #FFF1CC !important;
    color: #9C7A1A !important;
}

.badge-genetic-regular {
    background-color: #D1ECF1 !important;
    color: #0C5460 !important;
}

.badge-genetic-feminized {
    background-color: #FCE4EC !important;
    color: #880E4F !important;
}

/* -------------------------------
   6. Genetic Analyzer Badges
-------------------------------- */

.badge-parent {
    background-color: var(--gb-accent) !important;
    color: #FFFFFF !important;
}

.badge-parent-a {
    background-color: #FFF3CD !important;
    color: #856404 !important;
}

.badge-parent-b {
    background-color: #F3F0FF !important;
    color: #5F4BB6 !important;
}

.badge-dominant {
    background-color: #D1E7DD !important;
    color: #198754 !important;
}

.badge-recessive {
    background-color: #E2E3E5 !important;
    color: #6C757D !important;
}

.badge-phenotype {
    background-color: var(--gb-primary) !important;
    color: #FFFFFF !important;
}

/* -------------------------------
   7. Stage Badges / Stage Blocks
-------------------------------- */

:root {
    --gb-stage-start-bg: #E2E3E5;
    --gb-stage-start-text: #212529;

    --gb-seedling-bg: #D9EBC7;
    --gb-seedling-text: #3E7D2F;
    --gb-seedling-hover: #84BF4B;

    --gb-veg-bg: #CDEEEE;
    --gb-veg-text: #1C7C7B;
    --gb-veg-hover: #4AC1C0;

    --gb-flower-bg: #FBD4DC;
    --gb-flower-text: #C7435F;
    --gb-flower-hover: #FE6385;

    --gb-autoflower-bg: #FFF1CC;
    --gb-autoflower-text: #9C7A1A;
    --gb-autoflower-hover: #FFCD56;
}

.badge-start {
    background-color: var(--gb-stage-start-bg) !important;
    color: var(--gb-stage-start-text) !important;
}

.badge-seedling,
.stage-seedling {
    background-color: var(--gb-seedling-bg) !important;
    color: var(--gb-seedling-text) !important;
}

.badge-veg,
.stage-veg {
    background-color: var(--gb-veg-bg) !important;
    color: var(--gb-veg-text) !important;
}

.badge-flower,
.stage-flower {
    background-color: var(--gb-flower-bg) !important;
    color: var(--gb-flower-text) !important;
}

.badge-autoflower,
.stage-autoflower {
    background-color: var(--gb-autoflower-bg) !important;
    color: var(--gb-autoflower-text) !important;
}

/* -------------------------------
   8. Stage Buttons
-------------------------------- */

.btn-seedling {
    background-color: var(--gb-seedling-bg) !important;
    color: var(--gb-seedling-text) !important;
    border-color: var(--gb-seedling-bg) !important;
    font-weight: 700 !important;
}

.btn-seedling:hover {
    background-color: var(--gb-seedling-hover) !important;
    border-color: var(--gb-seedling-hover) !important;
    color: #FFFFFF !important;
}

.btn-veg {
    background-color: var(--gb-veg-bg) !important;
    color: var(--gb-veg-text) !important;
    border-color: var(--gb-veg-bg) !important;
    font-weight: 700 !important;
}

.btn-veg:hover {
    background-color: var(--gb-veg-hover) !important;
    border-color: var(--gb-veg-hover) !important;
    color: #FFFFFF !important;
}

.btn-flower {
    background-color: var(--gb-flower-bg) !important;
    color: var(--gb-flower-text) !important;
    border-color: var(--gb-flower-bg) !important;
    font-weight: 700 !important;
}

.btn-flower:hover {
    background-color: var(--gb-flower-hover) !important;
    border-color: var(--gb-flower-hover) !important;
    color: #FFFFFF !important;
}

.btn-autoflower {
    background-color: var(--gb-autoflower-bg) !important;
    color: var(--gb-autoflower-text) !important;
    border-color: var(--gb-autoflower-bg) !important;
    font-weight: 700 !important;
}

.btn-autoflower:hover {
    background-color: var(--gb-autoflower-hover) !important;
    border-color: var(--gb-autoflower-hover) !important;
    color: #000000 !important;
}

/* -------------------------------
   9. Tables
-------------------------------- */

.gb-table-card {
    background: var(--gb-surface);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    box-shadow: var(--gb-shadow-sm);
    overflow: hidden;
}

.table {
    vertical-align: middle;
    --bs-table-bg: transparent;
}

.table thead th,
.gb-table thead th {
    color: var(--gb-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: var(--gb-border);
}

.table tbody td {
    border-color: var(--gb-border);
}

.table-hover tbody tr:hover {
    background-color: var(--gb-surface-soft);
}

.gb-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gb-space-3);
}

.gb-insight-card {
    background: var(--gb-surface-soft);
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-md);
    padding: var(--gb-space-4);
}

.gb-insight-label {
    color: var(--gb-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gb-insight-value {
    color: var(--gb-heading);
    font-size: 1rem;
    font-weight: 800;
    margin-top: var(--gb-space-2);
}

/* -------------------------------
   10. Empty States
-------------------------------- */

.gb-empty-state {
    text-align: center;
    background: var(--gb-surface);
    border: 1px dashed var(--gb-border-strong);
    border-radius: var(--gb-radius-lg);
    padding: var(--gb-space-6);
}

.gb-empty-state-icon {
    font-size: 2.5rem;
    color: var(--gb-text-muted);
    margin-bottom: var(--gb-space-3);
}

.gb-empty-state-title {
    color: var(--gb-heading);
    font-weight: 800;
    margin-bottom: var(--gb-space-2);
}

.gb-empty-state-text {
    color: var(--gb-text-muted);
    margin-bottom: var(--gb-space-4);
}

/* -------------------------------
   11. Scroll Rows
-------------------------------- */

.gb-scroll-row {
    display: flex;
    gap: var(--gb-space-4);
    overflow-x: auto;
    padding: var(--gb-space-3);
    scroll-snap-type: x proximity;
}

.gb-scroll-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.gb-card-compact {
    width: 250px;
    height: 100%;
}

/* -------------------------------
   12. Row States
-------------------------------- */

.row-parent {
    background-color: rgba(234, 103, 25, 0.5) !important;
}

.row-disabled {
    background-color: rgba(220, 53, 69, 0.56) !important;
    color: var(--gb-text-muted) !important;
    cursor: not-allowed;
}

/* -------------------------------
   13. Utility Helpers
-------------------------------- */

.gb-text-muted {
    color: var(--gb-text-muted) !important;
}

.gb-bg-surface {
    background-color: var(--gb-surface) !important;
}

.gb-bg-soft {
    background-color: var(--gb-surface-soft) !important;
}

.gb-border {
    border: 1px solid var(--gb-border) !important;
}

.gb-rounded {
    border-radius: var(--gb-radius-lg) !important;
}

.gb-rounded-md {
    border-radius: var(--gb-radius-md) !important;
}

.gb-shadow {
    box-shadow: var(--gb-shadow-sm) !important;
}

.gb-shadow-md {
    box-shadow: var(--gb-shadow-md) !important;
}

.gb-section-gap {
    margin-bottom: var(--gb-space-5);
}

.gb-small {
    font-size: var(--gb-font-size-sm);
}

/* -------------------------------
   14. Dark Mode Compatibility
-------------------------------- */

[data-bs-theme="dark"] .badge-number-solid,
[data-bs-theme="dark"] .badge-number-oj,
[data-bs-theme="dark"] .badge-start,
[data-bs-theme="dark"] .badge-watering-method {
    background-color: #2F2F2F !important;
    color: #E9ECEF !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: #252525;
}

[data-bs-theme="dark"] .gb-insight-card,
[data-bs-theme="dark"] .gb-metric-card {
    background-color: var(--gb-surface-soft);
}