/**
 * ============================================================
 * AgriConnect Theme - Bit.BlazorUI Integration
 * ============================================================
 * 
 * This is the ONLY theme file needed for AgriConnect after migration.
 * It extends Bit.BlazorUI with AgriConnect-specific branding.
 * 
 * Version: 2.0
 * Last Updated: 2025
 * 
 * File Size Target: < 500 lines (down from 15,000+ lines)
 * ============================================================
 */

/* ===== DESIGN TOKENS ===== */
:root {
    /* === Primary Brand Colors === */
    --bit-clr-pri-pri: #22c55e; /* AgriConnect Green */
    --bit-clr-pri: #22c55e;
    --bit-clr-pri-hover: #16a34a;
    --bit-clr-pri-active: #15803d;
    --bit-clr-pri-lt: #dcfce7;
    --bit-clr-pri-dk: #166534;
    /* === Secondary Colors === */
    --bit-clr-sec-sec: #16a34a;
    --bit-clr-sec-hover: #15803d;
    --bit-clr-sec-lt: #bbf7d0;
    --bit-clr-sec-dk: #14532d;
    /* === Background === */
    --bit-clr-bg-pri: #ffffff;
    --bit-clr-bg-sec: #f9fafb;
    --bit-clr-bg-ter: #f3f4f6;
    /* === Foreground/Text === */
    --bit-clr-fg-pri: #1f2937;
    --bit-clr-fg-sec: #6b7280;
    --bit-clr-fg-ter: #9ca3af;
    /* === Borders === */
    --bit-clr-brd-pri: #e5e7eb;
    --bit-clr-brd-sec: #d1d5db;
    /* === Semantic Colors === */
    --bit-clr-suc-main: #22c55e;
    --bit-clr-suc-lt: #dcfce7;
    --bit-clr-wrn-main: #f59e0b;
    --bit-clr-wrn-lt: #fef3c7;
    --bit-clr-err-main: #ef4444;
    --bit-clr-err-lt: #fee2e2;
    --bit-clr-inf-main: #3b82f6;
    --bit-clr-inf-lt: #dbeafe;
    /* === AgriConnect Extensions === */
    --agri-gradient-primary: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --agri-gradient-hero: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #ffffff 100%);
    --agri-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --agri-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --agri-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --agri-radius-sm: 6px;
    --agri-radius-md: 8px;
    --agri-radius-lg: 12px;
    --agri-radius-xl: 16px;
    --agri-transition: 250ms ease;
    /* === Typography === */
    --agri-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --agri-font-display: 'Poppins', var(--agri-font-sans);
}

/* ===== DARK MODE ===== */
.bit-theme-dark,
[data-theme="dark"] {
    --bit-clr-bg-pri: #111827;
    --bit-clr-bg-sec: #1f2937;
    --bit-clr-bg-ter: #374151;
    --bit-clr-fg-pri: #f9fafb;
    --bit-clr-fg-sec: #d1d5db;
    --bit-clr-brd-pri: #374151;
    --agri-gradient-hero: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #111827 100%);
}

/* ===== GLOBAL STYLES ===== */
body {
    font-family: var(--agri-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--agri-font-display);
}

/* ===== BIT COMPONENT OVERRIDES ===== */

/* === Buttons === */
.bit-btn {
    border-radius: var(--agri-radius-md);
    transition: all var(--agri-transition);
    font-weight: 500;
}

.bit-btn.bit-btn-pri {
    background: var(--agri-gradient-primary);
    border: none;
}

.bit-btn.bit-btn-pri:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--agri-shadow-md);
}

/* === Cards === */
.bit-crd {
    border-radius: var(--agri-radius-lg);
border: 1px solid var(--bit-clr-brd-pri);
    transition: all var(--agri-transition);
}

.bit-crd:hover {
    box-shadow: var(--agri-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--bit-clr-pri-pri);
}

/* === Text Fields === */
.bit-txt-fld input:focus,
.bit-txt-fld textarea:focus {
    border-color: var(--bit-clr-pri-pri);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* === Dropdowns === */
.bit-drp {
    border-radius: var(--agri-radius-md);
}

.bit-drp-itm:hover {
    background: var(--bit-clr-pri-lt);
}

.bit-drp-itm.bit-drp-sel {
    background: var(--bit-clr-pri-pri);
    color: white;
}

/* === Navigation === */
.bit-nav-itm.bit-nav-sel {
    background: var(--bit-clr-pri-lt);
    color: var(--bit-clr-pri-dk);
    font-weight: 600;
}

/* === Badges === */
.bit-bdg {
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
}

.bit-bdg.bit-bdg-pri {
    background: var(--bit-clr-pri-lt);
    color: var(--bit-clr-pri-dk);
}

/* === Data Grid === */
.bit-dg {
    border-radius: var(--agri-radius-lg);
    border: 1px solid var(--bit-clr-brd-pri);
}

.bit-dg-header {
  background: var(--bit-clr-bg-sec);
}

.bit-dg-row:hover {
    background: var(--bit-clr-bg-sec);
}

/* === Dialogs === */
.bit-dia {
    border-radius: var(--agri-radius-xl);
    box-shadow: var(--agri-shadow-lg);
}

/* ===== AGRICONNECT CUSTOM COMPONENTS ===== */

/* === Product Card === */
.agri-product-card {
    background: var(--bit-clr-bg-pri);
    border-radius: var(--agri-radius-lg);
    border: 1px solid var(--bit-clr-brd-pri);
    transition: all var(--agri-transition);
    overflow: hidden;
}

.agri-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--agri-shadow-lg);
    border-color: var(--bit-clr-pri-pri);
}

.agri-product-image {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
}

.agri-product-body {
    padding: 1rem;
}

.agri-product-title {
    font-weight: 600;
    color: var(--bit-clr-fg-pri);
    margin-bottom: 0.5rem;
}

.agri-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bit-clr-pri-pri);
}

/* === Stat Card === */
.agri-stat-card {
    background: var(--bit-clr-bg-pri);
    border-radius: var(--agri-radius-lg);
 padding: 1.5rem;
    border: 1px solid var(--bit-clr-brd-pri);
    transition: all var(--agri-transition);
}

.agri-stat-card:hover {
border-color: var(--bit-clr-pri-pri);
    box-shadow: var(--agri-shadow-md);
}

.agri-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bit-clr-fg-pri);
    line-height: 1;
}

.agri-stat-label {
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

/* === Empty State === */
.agri-empty-state {
    text-align: center;
  padding: 3rem 2rem;
}

.agri-empty-icon {
    font-size: 4rem;
    color: var(--bit-clr-fg-ter);
    margin-bottom: 1rem;
}

/* Note: Removed overly broad min-width rule that was affecting BitToggle */
/* The original rule "button, a[role="switch"]{ min-width:22px !important; }" */
/* was causing BitToggle height issues system-wide */

.agri-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bit-clr-fg-pri);
    margin-bottom: 0.5rem;
}

.agri-empty-description {
    color: var(--bit-clr-fg-sec);
    max-width: 24rem;
    margin: 0 auto 1.5rem;
}

/* === Hero Section (Landing Page) === */
.agri-hero {
    background: var(--agri-gradient-hero);
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
}

.agri-hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.agri-hero-gradient-text {
    background: var(--agri-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== UTILITIES ===== */

/* === Layout === */
.agri-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .agri-container {
        padding: 0 2rem;
    }
}

/* === Spacing === */
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* === Flexbox === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* === Text === */
.text-center { text-align: center; }
.text-muted { color: var(--bit-clr-fg-sec); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ===== ANIMATIONS ===== */
@keyframes agri-fade-in {
    from {
        opacity: 0;
     transform: translateY(10px);
    }
    to {
        opacity: 1;
  transform: translateY(0);
    }
}

@keyframes agri-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.agri-fade-in {
    animation: agri-fade-in 0.3s ease-out;
}

.agri-pulse {
    animation: agri-pulse 2s ease-in-out infinite;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .agri-stat-value {
        font-size: 1.5rem;
    }
    
 .agri-hero-title {
     font-size: 2rem;
    }
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
    outline: 2px solid var(--bit-clr-pri-pri);
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .bit-btn,
    .agri-nav,
    .no-print {
 display: none !important;
    }
}

/**
 * ============================================================
 * END OF AGRICONNECT THEME
 * ============================================================
 * 
 * Total Lines: ~400
 * Original CSS: ~15,000 lines
 * Reduction: ~96%
 * 
 * Maintainers: Keep this file minimal. Only add styles that are:
 * 1. Brand-specific (AgriConnect green gradient, etc.)
 * 2. Business-specific (product cards, stat displays)
 * 3. Cannot be achieved with Bit components
 * 
 * Do NOT add:
 * - Generic button styles (use BitButton)
 * - Form field styles (use BitTextField)
 * - Modal styles (use BitDialog)
 * - Table styles (use BitDataGrid)
 * 
 * ============================================================
 */