/* 
Dispensight Portal - Theme System
Based on the color themes from your Tkinter application
*/

/* ============================================================================
   SOFT DARK THEME (Default)
   ============================================================================ */
.theme-soft-dark {
    --bg-primary: #1e1e2e;
    --bg-secondary: #2a2a3e;
    --bg-tertiary: #363654;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --accent-blue: #4a90e2;
    --accent-green: #50c878;
    --accent-orange: #ff8c42;
    --accent-purple: #a29bfe;
    --accent-red: #ff6b6b;
}

/* ============================================================================
   MATRIX THEME
   ============================================================================ */
.theme-matrix {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #1f2937;
    --text-primary: #00ff41;
    --text-secondary: #00cc33;
    --accent-blue: #00ff88;
    --accent-green: #39ff14;
    --accent-orange: #00ff41;
    --accent-purple: #00ff88;
    --accent-red: #ff004d;
}

/* ============================================================================
   SUNSET THEME
   ============================================================================ */
.theme-sunset {
    --bg-primary: #2d1b3d;
    --bg-secondary: #3d2751;
    --bg-tertiary: #4d3362;
    --text-primary: #ffd89b;
    --text-secondary: #ffb07c;
    --accent-blue: #ff6b9d;
    --accent-green: #c9ada7;
    --accent-orange: #ff8c42;
    --accent-purple: #d4a5a5;
    --accent-red: #ff4757;
}

/* ============================================================================
   OCEAN THEME
   ============================================================================ */
.theme-ocean {
    --bg-primary: #1a1f2e;
    --bg-secondary: #22293d;
    --bg-tertiary: #2d3548;
    --text-primary: #e0f7fa;
    --text-secondary: #b2ebf2;
    --accent-blue: #00acc1;
    --accent-green: #26c6da;
    --accent-orange: #4dd0e1;
    --accent-purple: #00838f;
    --accent-red: #ff5252;
}

/* ============================================================================
   NORD THEME
   ============================================================================ */
.theme-nord {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --accent-blue: #88c0d0;
    --accent-green: #a3be8c;
    --accent-orange: #d08770;
    --accent-purple: #b48ead;
    --accent-red: #bf616a;
}

/* ============================================================================
   DRACULA THEME
   ============================================================================ */
.theme-dracula {
    --bg-primary: #282a36;
    --bg-secondary: #44475a;
    --bg-tertiary: #6272a4;
    --text-primary: #f8f8f2;
    --text-secondary: #bd93f9;
    --accent-blue: #8be9fd;
    --accent-green: #50fa7b;
    --accent-orange: #ffb86c;
    --accent-purple: #bd93f9;
    --accent-red: #ff5555;
}

/* ============================================================================
   GRUVBOX THEME
   ============================================================================ */
.theme-gruvbox {
    --bg-primary: #282828;
    --bg-secondary: #3c3836;
    --bg-tertiary: #504945;
    --text-primary: #ebdbb2;
    --text-secondary: #d5c4a1;
    --accent-blue: #83a598;
    --accent-green: #b8bb26;
    --accent-orange: #fe8019;
    --accent-purple: #d3869b;
    --accent-red: #fb4934;
}

/* ============================================================================
   CYBERPUNK THEME
   ============================================================================ */
.theme-cyberpunk {
    --bg-primary: #0a0e27;
    --bg-secondary: #1a1f3a;
    --bg-tertiary: #2a2f4a;
    --text-primary: #00f0ff;
    --text-secondary: #ff00ff;
    --accent-blue: #00f0ff;
    --accent-green: #00ff9f;
    --accent-orange: #ff9f00;
    --accent-purple: #ff00ff;
    --accent-red: #ff0055;
}

/* ============================================================================
   BASE STYLES USING CSS VARIABLES
   ============================================================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar-dark {
    background-color: var(--bg-secondary) !important;
}

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--bg-primary);
}

.table {
    color: var(--text-primary);
}

.table-dark {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.table-hover tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.text-primary {
    color: var(--accent-blue) !important;
}

.text-success {
    color: var(--accent-green) !important;
}

.text-warning {
    color: var(--accent-orange) !important;
}

.text-danger {
    color: var(--accent-red) !important;
}

.bg-dark {
    background-color: var(--bg-secondary) !important;
}

/* ============================================================================
   METRIC CARDS
   ============================================================================ */

.metric-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.bg-gradient-blue {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.bg-gradient-green {
    background: linear-gradient(135deg, #50c878 0%, #3da35d 100%);
}

.bg-gradient-orange {
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
}

.bg-gradient-purple {
    background: linear-gradient(135deg, #a29bfe 0%, #7b72e9 100%);
}

.bg-gradient-red {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.metric-icon {
    opacity: 0.6;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.5s ease-out;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .metric-card {
        margin-bottom: 15px;
    }
    
    .table {
        font-size: 0.875rem;
    }
}

/* ============================================================================
   CUSTOM SCROLLBAR
   ============================================================================ */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}