/* ===== Dashtreme Theme - Teal/Cyan Style ===== */

:root, [data-theme="dark"] {
    /* Primary Colors - Teal/Cyan like reference */
    --primary: #17a2b8;
    --primary-light: #20c9e0;
    --primary-dark: #138496;
    --primary-rgb: 23, 162, 184;
    
    /* Accent Colors */
    --accent: #00d4ff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    
    /* Background - Dark teal gradient */
    --bg-body: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1929 100%);
    --bg-sidebar: rgba(13, 27, 42, 0.95);
    --bg-card: rgba(20, 40, 60, 0.6);
    --bg-card-hover: rgba(30, 55, 80, 0.7);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-focus: rgba(255, 255, 255, 0.1);
    
    /* Sidebar active - LIGHT GRAY, not gradient */
    --sidebar-active-bg: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    
    /* Text - WHITE */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-table: #ffffff;
    
    /* Borders - SHARP, no radius */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-radius: 0px;
    --border-radius-sm: 0px;
    --border-radius-lg: 0px;
    
    /* Shadows - subtle */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    
    /* Sidebar - COMPACT */
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 60px;
    
    /* Fonts - SMALLER */
    --font-primary: 'Poppins', sans-serif;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.8rem;
    --font-size-md: 0.9rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    
    /* Icon sizes - SMALLER */
    --icon-size-sm: 12px;
    --icon-size-base: 14px;
    --icon-size-lg: 18px;
    --icon-size-xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    
    /* Navbar height for search modal positioning */
    --navbar-h: 48px;

    /* Layer scale: keep overlay priorities in one place. */
    --z-sidebar-overlay: 999;
    --z-sidebar: 1000;
    --z-floating-bg: 1100;
    --z-search-backdrop: 1000000;
    --z-search-modal: 1000001;
    --z-navbar: 1000002;
    --z-navbar-active: 1000003;
    --z-modal-backdrop: 2100001;
    --z-modal: 2100002;
    --z-table-context: 3000000;
    --z-table-row: 3000001;
    --z-table-dropdown-host: 3000002;
    --z-table-dropdown: 3000005;
    --z-toast: 3100000;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --bg-body: #f0f4f8;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --bg-input: #f0f2f5;
    
    --sidebar-active-bg: rgba(23, 162, 184, 0.1);
    --sidebar-hover-bg: rgba(0, 0, 0, 0.03);
    
    --text-primary: #1a2a3a;
    --text-secondary: #4a5a6a;
    --text-muted: #8a9aaa;
    --text-table: #2a3a4a;
    
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    /* Navbar height for search modal positioning */
    --navbar-h: 48px;
}

/* Background options */
[data-bg="gradient"] {
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1929 100%);
    background-attachment: fixed;
}

[data-bg="teal"] {
    background: linear-gradient(135deg, #0a2533 0%, #0d3344 50%, #0a2838 100%);
    background-attachment: fixed;
}

[data-bg="dark"] {
    background: #0a0f14;
}

[data-bg="minimal"] {
    background: #101820;
}

[data-bg="custom"] {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Light theme backgrounds - lighter versions */
[data-theme="light"][data-bg="gradient"] {
    background: linear-gradient(135deg, #e8f4fc 0%, #d0e8f5 50%, #e0f0fa 100%);
    background-attachment: fixed;
}

[data-theme="light"][data-bg="teal"] {
    background: linear-gradient(135deg, #d5f0f0 0%, #c0e8e8 50%, #d0eded 100%);
    background-attachment: fixed;
}

[data-theme="light"][data-bg="dark"] {
    background: #e8ecf0;
}

[data-theme="light"][data-bg="minimal"] {
    background: #f0f4f8;
}