/* ============================================================
   SwineFarm SaaS - Dark Mode
   ============================================================ */

[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: rgba(59, 130, 246, 0.15);
    
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-sidebar: #1e293b;
    --bg-header: #1e293b;
    --bg-hover: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --border: #334155;
    --border-light: #1e293b;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        #334155 25%,
        #475569 50%,
        #334155 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .auth-page {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}

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

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .plan-card.featured {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}