/** * ============================================================================ * AURO THEME - MAIN ENTRY POINT * ============================================================================ * * Tawseel Auro Theme - A modular, detachable theme system * * ARCHITECTURE: * This theme is designed as a completely isolated layer that can be: * - Added to any Metronic/Bootstrap project * - Removed without breaking default styling * - Easily rebranded by changing CSS variables * * USAGE: * 1. Add class="auro-theme" to your or wrapper element * 2. Include this CSS file after Metronic's default styles * 3. Theme automatically supports light/dark modes via data-bs-theme * * FILE STRUCTURE: * ├── auro-theme.css (this file - main entry) * ├── _variables.css (design tokens & CSS variables) * ├── _animations.css (keyframe animations) * ├── _base.css (body, backgrounds, scrollbar) * ├── _utilities.css (utility classes) * ├── components/ * │ ├── _cards.css (card components) * │ ├── _buttons.css (button styles) * │ ├── _forms.css (form controls) * │ ├── _tables.css (tables & DataTables) * │ ├── _badges.css (badges & indicators) * │ ├── _navigation.css (nav, tabs, breadcrumbs) * │ ├── _modals.css (modals, dropdowns, tooltips) * │ └── _layout.css (sidebar, navbar, header) * ├── plugins/ * │ └── _plugins.css (SweetAlert2, Select2, Leaflet) * └── pages/ * ├── _login.css (login page) * └── _pages.css (other page-specific styles) * * ============================================================================ * @version 2.0.0 * @author Tawseel Development Team * @license Proprietary * ============================================================================ */ /* ========================================================================== CORE IMPORTS ========================================================================== */ /* Design Tokens & CSS Variables */ /* ── inlined: ./_variables.css ── */ /** * ============================================================================ * AURO THEME - DESIGN TOKENS & CSS VARIABLES * ============================================================================ * * This file contains all design tokens for the Auro theme. * Modify these variables to create a new color scheme. * * Token Categories: * 1. Brand Tokens - Primary brand colors * 2. Semantic Tokens - Status colors (success, danger, warning, info) * 3. Surface Tokens - Backgrounds, cards, inputs * 4. Text Tokens - Typography colors * 5. Border Tokens - Borders and dividers * 6. Effect Tokens - Shadows, glows, animations * 7. Component Tokens - Specific component overrides * * Usage: This file should be loaded BEFORE the main theme file. * ============================================================================ */ /* ============================================================================ 1. BRAND TOKENS - Core brand identity colors ============================================================================ */ :root { /* Primary Brand Color - "Auro Green" */ --auro-brand-primary: #00D26A; --auro-brand-primary-light: #00FF7F; --auro-brand-primary-dark: #00A352; --auro-brand-primary-rgb: 0, 210, 106; /* Secondary Brand Color (if needed) */ --auro-brand-secondary: #0F172A; --auro-brand-secondary-light: #1E293B; --auro-brand-secondary-dark: #0A0F1C; } /* ============================================================================ 2. SEMANTIC TOKENS - Status & feedback colors ============================================================================ */ :root { /* Success - Uses brand primary */ --auro-success: var(--auro-brand-primary); --auro-success-light: rgba(0, 210, 106, 0.15); --auro-success-rgb: var(--auro-brand-primary-rgb); /* Danger */ --auro-danger: #EF4444; --auro-danger-light: rgba(239, 68, 68, 0.15); --auro-danger-rgb: 239, 68, 68; /* Warning */ --auro-warning: #F59E0B; --auro-warning-light: rgba(245, 158, 11, 0.15); --auro-warning-rgb: 245, 158, 11; /* Info */ --auro-info: #3B82F6; --auro-info-light: rgba(59, 130, 246, 0.15); --auro-info-rgb: 59, 130, 246; } /* ============================================================================ 3. ANIMATION TOKENS - Timing & easing ============================================================================ */ :root { /* Transition Durations */ --auro-transition-fast: 0.15s; --auro-transition-normal: 0.3s; --auro-transition-slow: 0.5s; /* Easing Functions */ --auro-ease-default: ease; --auro-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --auro-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Animation Durations */ --auro-anim-fast: 0.3s; --auro-anim-normal: 0.6s; --auro-anim-slow: 1s; --auro-anim-bg-pulse: 20s; --auro-anim-particle: 25s; --auro-anim-shimmer: 3s; } /* ============================================================================ 4. SPACING TOKENS ============================================================================ */ :root { --auro-spacing-xs: 0.25rem; --auro-spacing-sm: 0.5rem; --auro-spacing-md: 1rem; --auro-spacing-lg: 1.5rem; --auro-spacing-xl: 2rem; --auro-spacing-2xl: 3rem; } /* ============================================================================ 5. BORDER RADIUS TOKENS ============================================================================ */ :root { --auro-radius-sm: 6px; --auro-radius-md: 10px; --auro-radius-lg: 14px; --auro-radius-xl: 16px; --auro-radius-2xl: 20px; --auro-radius-round: 50%; --auro-radius-pill: 9999px; } /* ============================================================================ LIGHT MODE - Surface, Text, Border, Effect Tokens ============================================================================ */ [data-bs-theme="light"] .auro-theme, .auro-theme[data-bs-theme="light"], .auro-theme-light { /* Surface Colors */ --auro-surface-body: #E8F8F0; --auro-surface-card: rgba(255, 255, 255, 0.98); --auro-surface-card-solid: #FFFFFF; --auro-surface-card-gradient: linear-gradient(135deg, #FFFFFF, #F0FDF4); --auro-surface-input: rgba(240, 253, 244, 0.95); --auro-surface-hover: rgba(0, 210, 106, 0.12); --auro-surface-active: rgba(0, 210, 106, 0.18); /* Text Colors */ --auro-text-primary: #065F46; --auro-text-secondary: #047857; --auro-text-muted: #059669; --auro-text-light: #10B981; --auro-text-heading: #064E3B; --auro-text-inverse: #FFFFFF; /* Border Colors */ --auro-border-default: rgba(16, 185, 129, 0.3); --auro-border-light: rgba(16, 185, 129, 0.15); --auro-border-focus: rgba(0, 210, 106, 0.6); --auro-border-strong: rgba(5, 150, 105, 0.4); /* Shadow & Glow Effects */ --auro-shadow-sm: 0 2px 8px rgba(0, 210, 106, 0.1); --auro-shadow-md: 0 4px 20px rgba(0, 210, 106, 0.12); --auro-shadow-lg: 0 8px 40px rgba(0, 210, 106, 0.16); --auro-shadow-xl: 0 25px 50px rgba(0, 210, 106, 0.2); --auro-glow: rgba(0, 210, 106, 0.35); --auro-glow-strong: rgba(0, 210, 106, 0.5); /* Light mode brand override - vibrant green for better visibility */ --auro-brand-primary: #059669; --auro-brand-light: #10B981; --auro-brand-dark: #047857; --auro-brand-rgb: 5, 150, 105; /* Background Effects */ --auro-particle-opacity: 0.4; --auro-bg-gradient-1: rgba(16, 185, 129, 0.1); --auro-bg-gradient-2: rgba(52, 211, 153, 0.06); --auro-grid-opacity: 0.05; /* Component-Specific: Stat Cards */ --auro-stat-bg: linear-gradient(145deg, #FFFFFF, #F0FDF4); --auro-stat-border: rgba(16, 185, 129, 0.3); --auro-stat-shadow: 0 4px 15px rgba(0, 210, 106, 0.15); /* Component-Specific: Tables */ --auro-table-header-bg: rgba(16, 185, 129, 0.1); --auro-table-row-hover: rgba(16, 185, 129, 0.08); --auro-table-border: rgba(16, 185, 129, 0.15); /* Component-Specific: SweetAlert */ --auro-swal-bg: #FFFFFF; --auro-swal-border: rgba(16, 185, 129, 0.25); --auro-swal-shadow: 0 25px 50px rgba(0, 210, 106, 0.18); /* Component-Specific: Sidebar */ --auro-sidebar-bg: #FFFFFF; --auro-sidebar-border: rgba(16, 185, 129, 0.2); --auro-sidebar-shadow: 2px 0 25px rgba(0, 210, 106, 0.12); --auro-sidebar-item-hover: rgba(5, 150, 105, 0.45); --auro-sidebar-item-active: linear-gradient(90deg, rgba(5, 150, 105, 0.55), rgba(16, 185, 129, 0.35)); /* Component-Specific: Navbar */ --auro-navbar-bg: rgba(255, 255, 255, 0.98); --auro-navbar-border: rgba(16, 185, 129, 0.15); --auro-navbar-shadow: 0 2px 15px rgba(0, 210, 106, 0.08); } /* ============================================================================ DARK MODE - Surface, Text, Border, Effect Tokens ============================================================================ */ [data-bs-theme="dark"] .auro-theme, .auro-theme[data-bs-theme="dark"], .auro-theme-dark { /* Surface Colors */ --auro-surface-body: #0A0F1C; --auro-surface-card: rgba(15, 23, 42, 0.85); --auro-surface-card-solid: #0F172A; --auro-surface-card-gradient: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8)); --auro-surface-input: rgba(15, 23, 42, 0.7); --auro-surface-hover: rgba(0, 210, 106, 0.12); --auro-surface-active: rgba(0, 210, 106, 0.18); /* Text Colors */ --auro-text-primary: #E2E8F0; --auro-text-secondary: #CBD5E1; --auro-text-muted: #94A3B8; --auro-text-light: #64748B; --auro-text-heading: #F1F5F9; --auro-text-inverse: #0A0F1C; /* Border Colors */ --auro-border-default: rgba(0, 210, 106, 0.2); --auro-border-light: rgba(0, 210, 106, 0.1); --auro-border-focus: rgba(0, 210, 106, 0.6); --auro-border-strong: rgba(0, 210, 106, 0.35); /* Shadow & Glow Effects */ --auro-shadow-sm: 0 2px 8px rgba(0, 210, 106, 0.08); --auro-shadow-md: 0 4px 20px rgba(0, 210, 106, 0.1); --auro-shadow-lg: 0 8px 40px rgba(0, 210, 106, 0.15); --auro-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.5); --auro-glow: rgba(0, 210, 106, 0.35); --auro-glow-strong: rgba(0, 210, 106, 0.5); /* Background Effects */ --auro-particle-opacity: 0.5; --auro-bg-gradient-1: rgba(0, 210, 106, 0.1); --auro-bg-gradient-2: rgba(0, 210, 106, 0.06); --auro-grid-opacity: 0.03; /* Component-Specific: Stat Cards */ --auro-stat-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7)); --auro-stat-border: rgba(0, 210, 106, 0.3); --auro-stat-shadow: 0 4px 20px rgba(0, 210, 106, 0.15); /* Component-Specific: Tables */ --auro-table-header-bg: rgba(0, 210, 106, 0.08); --auro-table-row-hover: rgba(0, 210, 106, 0.06); --auro-table-border: rgba(0, 210, 106, 0.15); /* Component-Specific: SweetAlert */ --auro-swal-bg: rgba(15, 23, 42, 0.95); --auro-swal-border: rgba(0, 210, 106, 0.3); --auro-swal-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); /* Component-Specific: Sidebar */ --auro-sidebar-bg: #0F172A; --auro-sidebar-border: rgba(0, 210, 106, 0.2); --auro-sidebar-shadow: 2px 0 20px rgba(0, 210, 106, 0.1); --auro-sidebar-item-hover: rgba(0, 210, 106, 0.1); --auro-sidebar-item-active: linear-gradient(90deg, rgba(0, 210, 106, 0.15), rgba(0, 210, 106, 0.05)); /* Component-Specific: Navbar */ --auro-navbar-bg: rgba(15, 23, 42, 0.85); --auro-navbar-border: rgba(0, 210, 106, 0.2); --auro-navbar-shadow: 0 2px 20px rgba(0, 210, 106, 0.1); } /* ============================================================================ DEFAULT FALLBACK (when no theme attribute is set, assume light) ============================================================================ */ .auro-theme { /* Surface Colors - Default to Light */ --auro-surface-body: #F0F8F4; --auro-surface-card: rgba(255, 255, 255, 0.95); --auro-surface-card-solid: #FFFFFF; --auro-surface-card-gradient: linear-gradient(135deg, #F8FBF9, #EEF6F1); --auro-surface-input: rgba(240, 248, 244, 0.9); --auro-surface-hover: rgba(0, 210, 106, 0.08); --auro-surface-active: rgba(0, 210, 106, 0.12); /* Text Colors */ --auro-text-primary: #0F172A; --auro-text-secondary: #334155; --auro-text-muted: #475569; --auro-text-light: #64748B; --auro-text-heading: #1E293B; --auro-text-inverse: #FFFFFF; /* Border Colors */ --auro-border-default: rgba(0, 163, 82, 0.2); --auro-border-light: rgba(0, 163, 82, 0.1); --auro-border-focus: rgba(0, 210, 106, 0.5); --auro-border-strong: rgba(0, 163, 82, 0.3); /* Shadow & Glow */ --auro-shadow-sm: 0 2px 8px rgba(0, 163, 82, 0.06); --auro-shadow-md: 0 4px 20px rgba(0, 163, 82, 0.08); --auro-shadow-lg: 0 8px 40px rgba(0, 163, 82, 0.12); --auro-shadow-xl: 0 25px 50px rgba(0, 163, 82, 0.15); --auro-glow: rgba(0, 210, 106, 0.25); --auro-glow-strong: rgba(0, 210, 106, 0.4); /* Background Effects */ --auro-particle-opacity: 0.3; --auro-bg-gradient-1: rgba(0, 210, 106, 0.08); --auro-bg-gradient-2: rgba(0, 210, 106, 0.04); --auro-grid-opacity: 0.04; /* Component Defaults */ --auro-stat-bg: linear-gradient(145deg, #FFFFFF, #F0F8F4); --auro-stat-border: rgba(0, 163, 82, 0.25); --auro-stat-shadow: 0 4px 15px rgba(0, 163, 82, 0.1); --auro-table-header-bg: rgba(0, 210, 106, 0.06); --auro-table-row-hover: rgba(0, 210, 106, 0.04); --auro-table-border: rgba(0, 163, 82, 0.1); --auro-swal-bg: #FFFFFF; --auro-swal-border: rgba(0, 163, 82, 0.2); --auro-swal-shadow: 0 25px 50px rgba(0, 163, 82, 0.15); --auro-sidebar-bg: #FFFFFF; --auro-sidebar-border: rgba(0, 163, 82, 0.15); --auro-sidebar-shadow: 2px 0 25px rgba(0, 163, 82, 0.08); --auro-sidebar-item-hover: rgba(0, 163, 82, 0.12); --auro-sidebar-item-active: linear-gradient(90deg, rgba(0, 163, 82, 0.18), rgba(0, 163, 82, 0.08)); --auro-navbar-bg: rgba(255, 255, 255, 0.95); --auro-navbar-border: rgba(0, 163, 82, 0.1); --auro-navbar-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); } /* Keyframe Animations */ /* ── inlined: ./_animations.css ── */ /** * ============================================================================ * AURO THEME - KEYFRAME ANIMATIONS * ============================================================================ * * All animations used by the Auro theme. * These are defined globally but only applied within .auro-theme scope. * ============================================================================ */ /* ============================================================================ FADE ANIMATIONS ============================================================================ */ @keyframes auroFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes auroFadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes auroFadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes auroSlideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes auroSlideDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /* ============================================================================ BACKGROUND & EFFECT ANIMATIONS ============================================================================ */ @keyframes auroBgPulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.05) rotate(3deg); opacity: 0.8; } } @keyframes auroParticleFloat { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: var(--auro-particle-opacity, 0.4); } 90% { opacity: var(--auro-particle-opacity, 0.4); } 100% { transform: translateY(-100vh) scale(1); opacity: 0; } } @keyframes auroShimmer { 0% { opacity: 0.3; } 50% { opacity: 0.8; } 100% { opacity: 0.3; } } @keyframes auroShimmerScale { 0% { opacity: 0.3; transform: scaleX(0.5); } 50% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0.3; transform: scaleX(0.5); } } /* ============================================================================ GLOW & PULSE ANIMATIONS ============================================================================ */ @keyframes auroPulse { 0%, 100% { box-shadow: 0 0 20px var(--auro-glow); } 50% { box-shadow: 0 0 40px var(--auro-glow-strong); } } @keyframes auroBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 var(--auro-glow); } 50% { box-shadow: 0 0 20px var(--auro-glow); } } @keyframes auroIconPulse { 0%, 100% { box-shadow: 0 10px 40px var(--auro-glow); } 50% { box-shadow: 0 10px 60px var(--auro-glow-strong); } } /* ============================================================================ CARD & UI ANIMATIONS ============================================================================ */ @keyframes auroCardSlideUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes auroWelcomeSlide { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes auroDropdownSlide { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* ============================================================================ BUTTON & INTERACTION ANIMATIONS ============================================================================ */ @keyframes auroButtonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes auroSpin { to { transform: rotate(360deg); } } /* ============================================================================ SWEETALERT ANIMATIONS ============================================================================ */ @keyframes auroSwalShow { 0% { transform: scale(0.7); opacity: 0; } 45% { transform: scale(1.05); opacity: 1; } 80% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } } @keyframes auroSwalHide { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } } /* Base Styles (body, backgrounds, scrollbar) */ /* ── inlined: ./_base.css ── */ /** * ============================================================================ * AURO THEME - BASE STYLES * ============================================================================ * * Core base styles scoped under .auro-theme * Includes: body, backgrounds, animated effects * ============================================================================ */ /* ============================================================================ FONT FAMILY ============================================================================ */ .auro-theme { font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } [dir="rtl"] .auro-theme, .auro-theme[lang="ar"] { font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================================================ BODY STYLES ============================================================================ */ .auro-theme { background: var(--auro-surface-body); color: var(--auro-text-primary); transition: background var(--auro-transition-normal) var(--auro-ease-default), color var(--auro-transition-normal) var(--auro-ease-default); } /* ============================================================================ ANIMATED BACKGROUND CONTAINER ============================================================================ */ .auro-theme .auro-bg-animated, .auro-theme .dashboard-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; transition: opacity var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .auro-bg-animated::before, .auro-theme .dashboard-bg::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 20% 20%, var(--auro-bg-gradient-1) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, var(--auro-bg-gradient-2) 0%, transparent 50%), radial-gradient(ellipse at 40% 60%, rgba(0, 255, 127, 0.04) 0%, transparent 40%); animation: auroBgPulse var(--auro-anim-bg-pulse) ease-in-out infinite; } /* ============================================================================ GRID LINES OVERLAY ============================================================================ */ .auro-theme .auro-grid-lines, .auro-theme .dashboard-grid, .auro-theme .grid-lines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 210, 106, var(--auro-grid-opacity)) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 106, var(--auro-grid-opacity)) 1px, transparent 1px); background-size: 60px 60px; z-index: -1; pointer-events: none; } /* ============================================================================ FLOATING PARTICLES ============================================================================ */ .auro-theme .auro-particles, .auro-theme .dashboard-particles, .auro-theme .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .auro-theme .auro-particle, .auro-theme .dashboard-particle, .auro-theme .particle { position: absolute; width: 4px; height: 4px; background: var(--auro-brand-primary); border-radius: var(--auro-radius-round); opacity: var(--auro-particle-opacity); animation: auroParticleFloat var(--auro-anim-particle) infinite; box-shadow: 0 0 10px var(--auro-glow); } /* Particle positioning with staggered delays */ .auro-theme .auro-particle:nth-child(1), .auro-theme .dashboard-particle:nth-child(1), .auro-theme .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 30s; } .auro-theme .auro-particle:nth-child(2), .auro-theme .dashboard-particle:nth-child(2), .auro-theme .particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 25s; } .auro-theme .auro-particle:nth-child(3), .auro-theme .dashboard-particle:nth-child(3), .auro-theme .particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 32s; } .auro-theme .auro-particle:nth-child(4), .auro-theme .dashboard-particle:nth-child(4), .auro-theme .particle:nth-child(4) { left: 45%; animation-delay: 1s; animation-duration: 28s; } .auro-theme .auro-particle:nth-child(5), .auro-theme .dashboard-particle:nth-child(5), .auro-theme .particle:nth-child(5) { left: 60%; animation-delay: 3s; animation-duration: 27s; } .auro-theme .auro-particle:nth-child(6), .auro-theme .dashboard-particle:nth-child(6), .auro-theme .particle:nth-child(6) { left: 75%; animation-delay: 5s; animation-duration: 29s; } .auro-theme .auro-particle:nth-child(7), .auro-theme .dashboard-particle:nth-child(7), .auro-theme .particle:nth-child(7) { left: 85%; animation-delay: 2s; animation-duration: 26s; } .auro-theme .auro-particle:nth-child(8), .auro-theme .dashboard-particle:nth-child(8), .auro-theme .particle:nth-child(8) { left: 92%; animation-delay: 4s; animation-duration: 31s; } .auro-theme .particle:nth-child(9) { left: 90%; animation-delay: 1s; animation-duration: 27s; } /* ============================================================================ CUSTOM SCROLLBAR ============================================================================ */ .auro-theme ::-webkit-scrollbar { width: 10px; height: 10px; } .auro-theme ::-webkit-scrollbar-track { background: var(--auro-surface-card); border-radius: 5px; } .auro-theme ::-webkit-scrollbar-thumb { background: rgba(0, 210, 106, 0.3); border-radius: 5px; transition: background var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 106, 0.5); } /* ============================================================================ CONTENT ANIMATION ============================================================================ */ .auro-theme #kt_app_content { animation: auroFadeIn 0.8s var(--auro-ease-default); } .auro-theme .app-toolbar { animation: auroSlideDown 0.5s var(--auro-ease-default); } /* Utility Classes */ /* ── inlined: ./_utilities.css ── */ /** * ============================================================================ * AURO THEME - UTILITY CLASSES (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow utility overrides. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ TEXT UTILITIES ============================================================================ */ .auro-theme .text-primary { color: var(--auro-brand-primary) !important; } .auro-theme .text-secondary { color: var(--auro-text-secondary) !important; } .auro-theme .text-muted { color: var(--auro-text-muted) !important; } .auro-theme .text-success { color: var(--auro-brand-primary) !important; } .auro-theme .text-danger { color: var(--auro-danger) !important; } .auro-theme .text-warning { color: var(--auro-warning) !important; } .auro-theme .text-info { color: var(--auro-info) !important; } .auro-theme .text-dark { color: var(--auro-text-heading) !important; } /* Gradient text */ .auro-theme .gradient-text { background: linear-gradient(135deg, var(--auro-brand-primary-light), var(--auro-brand-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================ BACKGROUND UTILITIES ============================================================================ */ .auro-theme .bg-light { background: var(--auro-surface-card) !important; } .auro-theme .bg-body { background: var(--auro-bg-main) !important; } .auro-theme .bg-primary { background: var(--auro-brand-primary) !important; } .auro-theme .bg-success { background: var(--auro-brand-primary) !important; } .auro-theme .bg-light-primary { background: rgba(0, 210, 106, 0.1) !important; } .auro-theme .bg-light-success { background: rgba(0, 210, 106, 0.1) !important; } .auro-theme .bg-light-info { background: rgba(59, 130, 246, 0.1) !important; } .auro-theme .bg-light-warning { background: rgba(245, 158, 11, 0.1) !important; } .auro-theme .bg-light-danger { background: rgba(239, 68, 68, 0.1) !important; } /* ============================================================================ BORDER UTILITIES ============================================================================ */ .auro-theme .border { border-color: var(--auro-border-default) !important; } .auro-theme .border-primary { border-color: var(--auro-brand-primary) !important; } .auro-theme .border-success { border-color: var(--auro-brand-primary) !important; } .auro-theme .border-dashed { border-color: var(--auro-border-default) !important; } .auro-theme .separator { border-color: var(--auro-border-light) !important; } /* ============================================================================ LINK UTILITIES ============================================================================ */ .auro-theme a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item) { color: var(--auro-brand-primary); transition: color var(--auro-transition-fast); } .auro-theme a:not(.btn):not(.nav-link):not(.menu-link):not(.dropdown-item):hover { color: var(--auro-brand-primary-dark); } /* ============================================================================ SCROLLBAR STYLES ============================================================================ */ .auro-theme ::-webkit-scrollbar { width: 6px; height: 6px; } .auro-theme ::-webkit-scrollbar-track { background: transparent; } .auro-theme ::-webkit-scrollbar-thumb { background: rgba(0, 210, 106, 0.3); border-radius: 3px; } .auro-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 106, 0.5); } /* Firefox scrollbar */ .auro-theme * { scrollbar-width: thin; scrollbar-color: rgba(0, 210, 106, 0.3) transparent; } /* ============================================================================ SELECTION ============================================================================ */ .auro-theme ::selection { background: rgba(0, 210, 106, 0.3); color: var(--auro-text-heading); } /* ============================================================================ SHADOWS ============================================================================ */ .auro-theme .shadow-sm { box-shadow: var(--auro-shadow-sm) !important; } .auro-theme .shadow { box-shadow: var(--auro-shadow-md) !important; } .auro-theme .shadow-lg { box-shadow: var(--auro-shadow-lg) !important; } /* ============================================================================ EMPTY STATE ============================================================================ */ .auro-theme .empty-state { color: var(--auro-text-muted); } .auro-theme .empty-state i { color: var(--auro-brand-primary); opacity: 0.5; } /* ============================================================================ ALERT OVERRIDES ============================================================================ */ .auro-theme .alert-primary { background: rgba(0, 210, 106, 0.1); border-color: rgba(0, 210, 106, 0.3); color: var(--auro-brand-primary); } .auro-theme .alert-success { background: rgba(0, 210, 106, 0.1); border-color: rgba(0, 210, 106, 0.3); color: var(--auro-brand-primary); } .auro-theme .alert-warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--auro-warning); } .auro-theme .alert-danger { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: var(--auro-danger); } .auro-theme .alert-info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: var(--auro-info); } /* ============================================================================ PROGRESS BAR ============================================================================ */ .auro-theme .progress { background: var(--auro-surface-hover); } .auro-theme .progress-bar { background: linear-gradient(90deg, var(--auro-brand-primary), var(--auro-brand-primary-light)); } /* ============================================================================ LOADING OVERLAY ============================================================================ */ .auro-theme .loading-overlay { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .auro-theme .loading-spinner { border-color: rgba(0, 210, 106, 0.2); border-top-color: var(--auro-brand-primary); } /* ========================================================================== COMPONENT IMPORTS ========================================================================== */ /* Card Components */ /* ── inlined: ./components/_cards.css ── */ /** * ============================================================================ * AURO THEME - CARD COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for card components. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ BASE CARD - GLASSMORPHISM ============================================================================ */ .auro-theme .card, .auro-theme .auro-card { background: var(--auro-surface-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-md); transition: all var(--auro-transition-normal) var(--auro-ease-smooth); } /* Top shimmer line */ .auro-theme .card::before, .auro-theme .auro-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--auro-brand-primary), transparent); animation: auroShimmer var(--auro-anim-shimmer) infinite; } /* Card hover */ .auro-theme .card:hover, .auro-theme .auro-card:hover { transform: translateY(-4px); box-shadow: var(--auro-shadow-lg); border-color: var(--auro-border-strong); } /* Card header/title/body */ .auro-theme .card-header { background: transparent; border-bottom-color: var(--auro-border-light); } .auro-theme .card-title { color: var(--auro-text-heading); } .auro-theme .card-body { color: var(--auro-text-primary); } /* ============================================================================ STAT CARDS ============================================================================ */ .auro-theme .stat-card { background: var(--auro-stat-bg); border-color: var(--auro-stat-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--auro-stat-shadow); transition: all var(--auro-transition-normal) var(--auro-ease-smooth); } .auro-theme .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--auro-brand-primary), transparent); animation: auroShimmerScale var(--auro-anim-shimmer) infinite; } .auro-theme .stat-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 50px rgba(0, 210, 106, 0.25); border-color: var(--auro-border-strong); } /* Stat icon */ .auro-theme .stat-icon { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); box-shadow: 0 8px 30px var(--auro-glow); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .stat-icon i { color: white; } .auro-theme .stat-card:hover .stat-icon { transform: rotate(5deg) scale(1.1); box-shadow: 0 12px 40px rgba(0, 210, 106, 0.5); } /* Stat value - gradient text */ .auro-theme .stat-value { background: linear-gradient(135deg, var(--auro-brand-primary-light), var(--auro-brand-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Stat label */ .auro-theme .stat-label { color: var(--auro-text-muted); } /* Staggered animation */ .auro-theme .stat-card:nth-child(1) { animation: auroFadeInUp 0.6s 0.1s both; } .auro-theme .stat-card:nth-child(2) { animation: auroFadeInUp 0.6s 0.2s both; } .auro-theme .stat-card:nth-child(3) { animation: auroFadeInUp 0.6s 0.3s both; } .auro-theme .stat-card:nth-child(4) { animation: auroFadeInUp 0.6s 0.4s both; } .auro-theme .stat-card:nth-child(5) { animation: auroFadeInUp 0.6s 0.5s both; } .auro-theme .stat-card:nth-child(6) { animation: auroFadeInUp 0.6s 0.6s both; } /* ============================================================================ STAT MINI CARDS ============================================================================ */ .auro-theme .stat-mini-card { background: var(--auro-surface-card); border-color: var(--auro-border-default); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .stat-mini-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 210, 106, 0.15); } .auro-theme .stat-mini-card .stat-value { color: var(--auro-text-heading); } .auro-theme .stat-mini-card .stat-label { color: var(--auro-text-muted); } /* ============================================================================ INFO CARDS ============================================================================ */ .auro-theme .info-card { background: var(--auro-surface-card); border-color: var(--auro-border-default); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .info-card:hover { box-shadow: 0 8px 25px rgba(0, 210, 106, 0.1); } .auro-theme .info-card-title { color: var(--auro-brand-primary); border-bottom-color: var(--auro-border-default); } .auro-theme .info-item { border-bottom-color: var(--auro-border-light); } .auro-theme .info-label { color: var(--auro-text-muted); } .auro-theme .info-value { color: var(--auro-text-primary); } /* ============================================================================ DETAIL CARDS ============================================================================ */ .auro-theme .detail-card { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .detail-card-title { color: var(--auro-brand-primary); border-bottom-color: var(--auro-border-default); } .auro-theme .detail-item { border-bottom-color: var(--auro-border-default); } .auro-theme .detail-label { color: var(--auro-text-muted); } .auro-theme .detail-value { color: var(--auro-text-primary); } .auro-theme .detail-row { border-bottom-color: var(--auro-border-default); } .auro-theme .detail-row label { color: var(--auro-text-muted); } /* ============================================================================ CHART & WELCOME CARDS ============================================================================ */ .auro-theme .chart-card { animation: auroFadeInUp 0.8s both; background: var(--auro-surface-card); } .auro-theme .welcome-card { background: linear-gradient(135deg, rgba(0, 210, 106, 0.15), var(--auro-surface-card)); border-color: var(--auro-brand-primary); box-shadow: 0 8px 40px var(--auro-glow); animation: auroWelcomeSlide 0.8s var(--auro-ease-smooth); } /* ============================================================================ TABLE CONTAINER CARD ============================================================================ */ .auro-theme .table-container { background: var(--auro-surface-card); border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-md); } .auro-theme .table-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--auro-brand-primary), transparent); animation: auroShimmer var(--auro-anim-shimmer) infinite; } /* Button Components */ /* ── inlined: ./components/_buttons.css ── */ /** * ============================================================================ * AURO THEME - BUTTON COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for buttons. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ PRIMARY BUTTON ============================================================================ */ .auro-theme .btn-primary { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); border-color: transparent; color: var(--auro-text-inverse); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--auro-glow); color: var(--auro-text-inverse); } /* ============================================================================ ICON BUTTONS ============================================================================ */ .auro-theme .btn-icon { transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .btn-icon:hover { transform: translateY(-2px) scale(1.05); } /* ============================================================================ LIGHT VARIANT BUTTONS ============================================================================ */ .auro-theme .btn-light-info { background: var(--auro-info-light); color: var(--auro-info); border-color: rgba(59, 130, 246, 0.2); } .auro-theme .btn-light-info:hover { background: rgba(59, 130, 246, 0.25); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); color: var(--auro-info); } .auro-theme .btn-light-primary { background: rgba(0, 210, 106, 0.15); color: var(--auro-brand-primary); border-color: rgba(0, 210, 106, 0.2); } .auro-theme .btn-light-primary:hover { background: rgba(0, 210, 106, 0.25); box-shadow: 0 4px 15px var(--auro-glow); color: var(--auro-brand-primary); } .auro-theme .btn-light-warning { background: var(--auro-warning-light); color: var(--auro-warning); border-color: rgba(245, 158, 11, 0.2); } .auro-theme .btn-light-warning:hover { background: rgba(245, 158, 11, 0.25); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); color: var(--auro-warning); } .auro-theme .btn-light-danger { background: var(--auro-danger-light); color: var(--auro-danger); border-color: rgba(239, 68, 68, 0.2); } .auro-theme .btn-light-danger:hover { background: rgba(239, 68, 68, 0.25); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); color: var(--auro-danger); } .auro-theme .btn-light-success { background: rgba(0, 210, 106, 0.15); color: var(--auro-brand-primary); border-color: rgba(0, 210, 106, 0.2); } .auro-theme .btn-light-success:hover { background: rgba(0, 210, 106, 0.25); box-shadow: 0 4px 15px var(--auro-glow); color: var(--auro-brand-primary); } /* ============================================================================ ACTION BUTTONS ============================================================================ */ .auro-theme .btn-action { transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .btn-action:hover { transform: translateY(-2px); } /* ============================================================================ SAVE BUTTON ============================================================================ */ .auro-theme .btn-save { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); border-color: transparent; color: white; transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--auro-glow); color: white; } /* ============================================================================ SUBMIT BUTTON ============================================================================ */ .auro-theme .submit-btn { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); border-color: transparent; color: var(--auro-text-inverse); transition: all var(--auro-transition-normal) var(--auro-ease-default); animation: auroFadeInUp 0.6s 0.8s both; } .auro-theme .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left var(--auro-transition-slow); } .auro-theme .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 40px var(--auro-glow); } .auro-theme .submit-btn:hover::before { left: 100%; } .auro-theme .submit-btn .spinner { border-color: rgba(10, 15, 28, 0.3); border-top-color: var(--auro-text-inverse); } /* ============================================================================ THEME TOGGLE BUTTON ============================================================================ */ .auro-theme .theme-toggle-btn { background: rgba(0, 210, 106, 0.1); border-color: rgba(0, 210, 106, 0.3); color: var(--auro-brand-primary); transition: all var(--auro-transition-normal) var(--auro-ease-smooth); } .auro-theme .theme-toggle-btn:hover { background: rgba(0, 210, 106, 0.2); border-color: var(--auro-brand-primary); transform: scale(1.05); box-shadow: 0 4px 20px rgba(0, 210, 106, 0.3); } .auro-theme .theme-toggle-btn:active { transform: scale(0.95); } /* ============================================================================ LANGUAGE BUTTONS ============================================================================ */ .auro-theme .lang-btn { background: transparent; border-color: var(--auro-border-default); color: var(--auro-text-muted); transition: all var(--auro-transition-normal); } .auro-theme .lang-btn:hover { border-color: var(--auro-brand-primary); color: var(--auro-brand-primary); } .auro-theme .lang-btn.active { background: rgba(0, 210, 106, 0.1); border-color: var(--auro-brand-primary); color: var(--auro-brand-primary); } /* Form Components */ /* ── inlined: ./components/_forms.css ── */ /** * ============================================================================ * AURO THEME - FORM COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for form elements. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ BASE FORM CONTROLS ============================================================================ */ .auro-theme .form-control, .auro-theme .form-select { background: var(--auro-surface-input); border-color: var(--auro-border-default); color: var(--auro-text-primary); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .form-control:focus, .auro-theme .form-select:focus { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 4px var(--auro-glow); background: var(--auro-surface-card); } .auro-theme .form-control::placeholder { color: var(--auro-text-muted); } .auro-theme .form-label { color: var(--auro-text-primary); } .auro-theme .form-text { color: var(--auro-text-muted); } /* ============================================================================ FORM INPUT (Custom Login Style) ============================================================================ */ .auro-theme .form-input { background: var(--auro-surface-input); border-color: var(--auro-border-default); color: var(--auro-text-primary); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .form-input::placeholder { color: var(--auro-text-muted); } .auro-theme .form-input:focus { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 4px var(--auro-glow); background: var(--auro-surface-card); } /* ============================================================================ INPUT ICONS ============================================================================ */ .auro-theme .input-icon { color: var(--auro-text-muted); transition: color var(--auro-transition-normal); } .auro-theme .form-input:focus + .input-icon, .auro-theme .form-input:focus ~ .input-icon { color: var(--auro-brand-primary); } .auro-theme .password-toggle { color: var(--auro-text-muted); transition: color var(--auro-transition-normal); } .auro-theme .password-toggle:hover { color: var(--auro-brand-primary); } /* ============================================================================ CUSTOM CHECKBOX ============================================================================ */ .auro-theme .custom-checkbox { border-color: var(--auro-border-default); transition: all var(--auro-transition-normal); } .auro-theme .custom-checkbox:hover { border-color: var(--auro-brand-primary); } .auro-theme .checkbox-input:checked + .custom-checkbox { background: var(--auro-brand-primary); border-color: var(--auro-brand-primary); } .auro-theme .checkbox-input:checked + .custom-checkbox::after { border-color: var(--auro-text-inverse); } .auro-theme .checkbox-label { color: var(--auro-text-muted); } /* ============================================================================ FORM SWITCH ============================================================================ */ .auro-theme .form-switch .form-check-input:checked { background-color: var(--auro-brand-primary); border-color: var(--auro-brand-primary); } /* ============================================================================ FORM SECTIONS ============================================================================ */ .auro-theme .form-section { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .form-section-title { color: var(--auro-brand-primary); border-bottom-color: var(--auro-border-default); } /* ============================================================================ FORM GROUPS (Animation) ============================================================================ */ .auro-theme .form-group { animation: auroFadeInUp 0.6s both; } .auro-theme .form-group:nth-child(1) { animation-delay: 0.4s; } .auro-theme .form-group:nth-child(2) { animation-delay: 0.5s; } .auro-theme .form-group:nth-child(3) { animation-delay: 0.6s; } /* ============================================================================ AVATAR UPLOAD ============================================================================ */ .auro-theme .avatar-upload .avatar-preview { border-color: var(--auro-brand-primary); background: var(--auro-surface-card); } .auro-theme .avatar-upload .avatar-edit label { background: var(--auro-brand-primary); color: var(--auro-text-inverse); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .avatar-upload .avatar-edit label:hover { background: var(--auro-brand-primary-dark); transform: scale(1.1); } .auro-theme .avatar-upload-preview { border-color: var(--auro-brand-primary); box-shadow: 0 8px 30px var(--auro-glow); } /* ============================================================================ ERROR MESSAGES ============================================================================ */ .auro-theme .error-message { color: var(--auro-danger); } /* Table & DataTable Components */ /* ── inlined: ./components/_tables.css ── */ /** * ============================================================================ * AURO THEME - TABLE COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for tables and DataTables. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ BASE TABLE ============================================================================ */ .auro-theme .table { color: var(--auro-text-primary); } .auro-theme .table thead th { background: var(--auro-table-header-bg); color: var(--auro-text-primary); border-color: var(--auro-table-border); } .auro-theme .table tbody tr { border-color: var(--auro-table-border); transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .table tbody tr:hover { background: var(--auro-table-row-hover); } .auro-theme .table tbody td { color: var(--auro-text-primary); } /* ============================================================================ DATATABLES ============================================================================ */ .auro-theme .dataTables_wrapper { color: var(--auro-text-primary); } .auro-theme .dataTables_wrapper .dataTables_length, .auro-theme .dataTables_wrapper .dataTables_filter, .auro-theme .dataTables_wrapper .dataTables_info, .auro-theme .dataTables_wrapper .dataTables_paginate { color: var(--auro-text-muted); } .auro-theme .dataTables_wrapper .dataTables_length select, .auro-theme .dataTables_wrapper .dataTables_filter input { background: var(--auro-surface-input); border-color: var(--auro-border-default); color: var(--auro-text-primary); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .dataTables_wrapper .dataTables_length select:focus, .auro-theme .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 4px var(--auro-glow); } /* ============================================================================ DATATABLES PAGINATION ============================================================================ */ .auro-theme .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--auro-surface-card); border-color: var(--auro-border-default); color: var(--auro-text-primary); transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--auro-surface-hover); border-color: var(--auro-brand-primary); color: var(--auro-brand-primary); } .auro-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); border-color: var(--auro-brand-primary); color: var(--auro-text-inverse); } .auro-theme .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.5; } /* ============================================================================ MATRIX TABLE ============================================================================ */ .auro-theme .matrix-container { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .matrix-table th, .auro-theme .matrix-table td { border-color: var(--auro-border-default); } .auro-theme .matrix-table th { background: rgba(0, 210, 106, 0.1); color: var(--auro-brand-primary); } .auro-theme .matrix-table .zone-header { background: rgba(0, 210, 106, 0.05); } .auro-theme .matrix-table .diagonal { background: rgba(128, 128, 128, 0.2); } .auro-theme .matrix-table input { border-color: var(--auro-border-default); background: var(--auro-surface-input); color: var(--auro-text-primary); } .auro-theme .matrix-table input:focus { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 2px var(--auro-glow); } .auro-theme .matrix-table input.has-value { background: rgba(0, 210, 106, 0.1); border-color: var(--auro-brand-primary); } .auro-theme .matrix-info { background: rgba(0, 210, 106, 0.05); border-color: var(--auro-brand-primary); } .auro-theme .legend-has-fee { background: rgba(0, 210, 106, 0.2); border-color: var(--auro-brand-primary); } .auro-theme .legend-no-fee { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .legend-disabled { background: rgba(128, 128, 128, 0.2); } /* Badge Components */ /* ── inlined: ./components/_badges.css ── */ /** * ============================================================================ * AURO THEME - BADGE COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, and glow overrides for badges and status indicators. * No structural changes (padding, border-radius, font-size, font-weight). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ BASE BADGES ============================================================================ */ .auro-theme .badge { transition: all var(--auro-transition-fast) var(--auro-ease-default); } /* ============================================================================ STATUS BADGES ============================================================================ */ .auro-theme .badge-light-success, .auro-theme .badge.bg-success { background: rgba(0, 210, 106, 0.15) !important; color: var(--auro-brand-primary) !important; box-shadow: 0 0 10px rgba(0, 210, 106, 0.2); } .auro-theme .badge-light-warning, .auro-theme .badge.bg-warning { background: rgba(245, 158, 11, 0.15) !important; color: var(--auro-warning) !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); } .auro-theme .badge-light-danger, .auro-theme .badge.bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: var(--auro-danger) !important; box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); } .auro-theme .badge-light-info, .auro-theme .badge.bg-info { background: rgba(59, 130, 246, 0.15) !important; color: var(--auro-info) !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); } .auro-theme .badge-light-primary { background: rgba(0, 210, 106, 0.15) !important; color: var(--auro-brand-primary) !important; box-shadow: 0 0 10px rgba(0, 210, 106, 0.2); } .auro-theme .badge-light-secondary { background: rgba(148, 163, 184, 0.15) !important; color: var(--auro-text-muted) !important; } /* ============================================================================ CUSTOM STATUS BADGES ============================================================================ */ .auro-theme .status-badge { transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .status-badge:hover { transform: scale(1.05); } .auro-theme .status-badge.active { background: rgba(0, 210, 106, 0.15); color: var(--auro-brand-primary); box-shadow: 0 0 15px rgba(0, 210, 106, 0.3); } .auro-theme .status-badge.inactive { background: rgba(239, 68, 68, 0.15); color: var(--auro-danger); box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); } .auro-theme .status-badge.pending { background: rgba(245, 158, 11, 0.15); color: var(--auro-warning); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); } /* ============================================================================ VERSION BADGE ============================================================================ */ .auro-theme .version-badge { background: rgba(0, 210, 106, 0.15); color: var(--auro-brand-primary); border-color: rgba(0, 210, 106, 0.3); } /* ============================================================================ NOTIFICATION & COUNT BADGES ============================================================================ */ .auro-theme .badge-circle { background: var(--auro-brand-primary); color: var(--auro-text-inverse); box-shadow: 0 0 10px var(--auro-glow); } .auro-theme .notification-badge { background: var(--auro-danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); animation: auroPulse 2s infinite; } /* Navigation Components (tabs, pills, breadcrumbs) */ /* ── inlined: ./components/_navigation.css ── */ /** * ============================================================================ * AURO THEME - NAVIGATION COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, and glow overrides for nav tabs and pills. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ NAV TABS ============================================================================ */ .auro-theme .nav-tabs { border-bottom-color: var(--auro-border-default); } .auro-theme .nav-tabs .nav-link { color: var(--auro-text-muted); border-color: transparent; transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .nav-tabs .nav-link:hover { color: var(--auro-brand-primary); border-color: transparent; background: rgba(0, 210, 106, 0.05); } .auro-theme .nav-tabs .nav-link.active { color: var(--auro-brand-primary); border-color: var(--auro-brand-primary); background: transparent; box-shadow: 0 2px 0 0 var(--auro-brand-primary); } /* ============================================================================ NAV PILLS ============================================================================ */ .auro-theme .nav-pills .nav-link { color: var(--auro-text-muted); transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .nav-pills .nav-link:hover { color: var(--auro-brand-primary); background: rgba(0, 210, 106, 0.08); } .auro-theme .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); color: var(--auro-text-inverse); box-shadow: 0 4px 15px var(--auro-glow); } /* ============================================================================ BREADCRUMB ============================================================================ */ .auro-theme .breadcrumb-item a { color: var(--auro-text-muted); transition: color var(--auro-transition-fast); } .auro-theme .breadcrumb-item a:hover { color: var(--auro-brand-primary); } .auro-theme .breadcrumb-item.active { color: var(--auro-text-primary); } /* ============================================================================ PAGE TITLE ============================================================================ */ .auro-theme .page-title { color: var(--auro-text-heading); } /* Modal & Overlay Components */ /* ── inlined: ./components/_modals.css ── */ /** * ============================================================================ * AURO THEME - MODAL COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for modals and dialogs. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ MODAL BACKDROP ============================================================================ */ .auro-theme .modal-backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } /* ============================================================================ MODAL CONTENT ============================================================================ */ .auro-theme .modal-content { background: var(--auro-surface-card); border-color: var(--auro-border-default); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 30px var(--auro-glow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ============================================================================ MODAL HEADER ============================================================================ */ .auro-theme .modal-header { border-bottom-color: var(--auro-border-light); } .auro-theme .modal-title { color: var(--auro-text-heading); } .auro-theme .modal-header .btn-close { filter: var(--auro-close-btn-filter, none); transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .modal-header .btn-close:hover { transform: rotate(90deg); opacity: 1; } /* ============================================================================ MODAL BODY ============================================================================ */ .auro-theme .modal-body { color: var(--auro-text-primary); } /* ============================================================================ MODAL FOOTER ============================================================================ */ .auro-theme .modal-footer { border-top-color: var(--auro-border-light); } /* ============================================================================ SWAL MODALS ============================================================================ */ .auro-theme .swal2-popup { background: var(--auro-surface-card); border-color: var(--auro-border-default); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .auro-theme .swal2-title { color: var(--auro-text-heading); } .auro-theme .swal2-html-container { color: var(--auro-text-primary); } .auro-theme .swal2-confirm { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)) !important; box-shadow: 0 4px 15px var(--auro-glow); } .auro-theme .swal2-cancel { background: var(--auro-surface-hover) !important; color: var(--auro-text-primary) !important; } /* ============================================================================ DROPDOWN MENUS (Overlay) ============================================================================ */ .auro-theme .dropdown-menu { background: var(--auro-surface-card); border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .auro-theme .dropdown-item { color: var(--auro-text-primary); transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .dropdown-item:hover { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .dropdown-divider { border-color: var(--auro-border-light); } /* ============================================================================ TOOLTIP ============================================================================ */ .auro-theme .tooltip-inner { background: var(--auro-surface-tooltip, rgba(0, 0, 0, 0.9)); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } /* Layout Components (sidebar, navbar, header) */ /* ── inlined: ./components/_layout.css ── */ /** * ============================================================================ * AURO THEME - LAYOUT COMPONENTS (Visual Overrides Only) * ============================================================================ * Color, background, shadow, and glow overrides for sidebar, navbar, header. * No structural changes (width, height, padding, margin, display, flex, z-index). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ NAVBAR / HEADER ============================================================================ */ .auro-theme #kt_app_header { background: var(--auro-navbar-bg); backdrop-filter: blur(20px); border-bottom-color: var(--auro-navbar-border); box-shadow: var(--auro-navbar-shadow); transition: all 0.3s ease; } .auro-theme .app-navbar-item .btn { background: transparent; border-color: var(--auro-border-default); transition: all 0.3s ease; } .auro-theme .app-navbar-item .btn:hover { background: var(--auro-surface-hover); border-color: var(--auro-brand-primary); } /* ============================================================================ SIDEBAR ============================================================================ */ .auro-theme #kt_app_sidebar { background: var(--auro-sidebar-bg); border-right-color: var(--auro-sidebar-border); box-shadow: var(--auro-sidebar-shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [dir="rtl"] .auro-theme #kt_app_sidebar { border-right-color: transparent; border-left-color: var(--auro-sidebar-border); box-shadow: var(--auro-sidebar-shadow); } /* Mobile Sidebar Overlay */ @media (max-width: 991.98px) { .auro-theme .drawer-overlay { background-color: rgba(0, 0, 0, 0.7); transition: opacity 0.3s ease; } } /* Sidebar Toggle Button */ .auro-theme #kt_app_sidebar_toggle { background: var(--auro-surface-card); border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-sm); } .auro-theme #kt_app_sidebar_toggle:hover { background: var(--auro-brand-primary); border-color: var(--auro-brand-primary); } .auro-theme #kt_app_sidebar_toggle:hover i { color: white; } /* ============================================================================ SIDEBAR LOGO AREA ============================================================================ */ .auro-theme .app-sidebar-logo { background: linear-gradient(135deg, var(--auro-bg-gradient-1), transparent); border-bottom-color: var(--auro-border-light); } /* Top shimmer accent */ .auro-theme .app-sidebar-logo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--auro-brand-primary), var(--auro-brand-primary-light), var(--auro-brand-primary), transparent); animation: auroShimmer var(--auro-anim-shimmer) infinite; } /* Logo link hover */ .auro-theme .sidebar-logo-link:hover .sidebar-logo-img { filter: brightness(1.1); } /* Fallback Logo Icon */ .auro-theme .sidebar-logo-icon { background: linear-gradient(135deg, var(--auro-brand-primary), var(--auro-brand-primary-dark)); box-shadow: 0 4px 15px var(--auro-glow); transition: all 0.3s ease; color: white; } .auro-theme .sidebar-logo-link:hover .sidebar-logo-icon { box-shadow: 0 6px 20px var(--auro-glow); } /* Logo Text Gradient */ .auro-theme .sidebar-logo-text { background: linear-gradient(135deg, var(--auro-brand-primary-light), var(--auro-brand-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================ SIDEBAR MENU ITEMS ============================================================================ */ .auro-theme .app-sidebar-menu .menu-item .menu-link { color: var(--auro-text-secondary); transition: all 0.3s ease; } /* Hover state */ .auro-theme .app-sidebar-menu .menu-item .menu-link:hover { background: var(--auro-sidebar-item-hover); color: var(--auro-brand-primary); } /* Active state */ .auro-theme .app-sidebar-menu .menu-item .menu-link.active { background: var(--auro-sidebar-item-active); color: var(--auro-brand-primary); box-shadow: 0 2px 10px var(--auro-glow); } /* Menu Icon */ .auro-theme .app-sidebar-menu .menu-icon { color: var(--auro-text-light); transition: all 0.3s ease; } .auro-theme .app-sidebar-menu .menu-link:hover .menu-icon, .auro-theme .app-sidebar-menu .menu-link.active .menu-icon { color: var(--auro-brand-primary); } /* Sidebar Heading */ .auro-theme .menu-heading { color: var(--auro-text-light); } /* Hide scrollbars (visual UX preference) */ .auro-theme #kt_app_sidebar_menu_scroll { -ms-overflow-style: none; scrollbar-width: none; } .auro-theme #kt_app_sidebar_menu_scroll::-webkit-scrollbar { width: 0; height: 0; background: transparent; } /* ============================================================================ LANGUAGE DROPDOWN ============================================================================ */ .auro-theme .lang-dropdown-toggle { background: transparent; border-color: var(--auro-border-default); color: var(--auro-text-secondary); transition: all 0.3s ease; } .auro-theme .lang-dropdown-toggle:hover { background: var(--auro-surface-hover); border-color: var(--auro-brand-primary); color: var(--auro-brand-primary); } /* Language menu items */ .auro-theme .lang-menu-item .menu-link { color: var(--auro-text-secondary); transition: all 0.2s ease; } .auro-theme .lang-menu-item .menu-link:hover { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .lang-menu-item .menu-link.active { background: var(--auro-surface-active); color: var(--auro-brand-primary); } .auro-theme .lang-menu-item .lang-icon { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .lang-menu-item .menu-link.active .lang-icon { background: var(--auro-brand-primary); color: white; } /* ============================================================================ NAVBAR ICON BUTTONS ============================================================================ */ .auro-theme .navbar-icon-btn { color: var(--auro-brand-primary) !important; transition: all 0.3s ease; } .auro-theme .navbar-icon-btn:hover { color: var(--auro-brand-primary-light) !important; } /* ============================================================================ USER AVATAR IN NAVBAR ============================================================================ */ .auro-theme .navbar-user-avatar { border-color: var(--auro-border-default); transition: all 0.3s ease; } .auro-theme .navbar-user-avatar:hover { border-color: var(--auro-brand-primary); box-shadow: 0 0 15px var(--auro-glow); } /* Toolbar */ .auro-theme #kt_app_toolbar { background: transparent; } /* ============================================================================ ACTIVITY ITEMS ============================================================================ */ .auro-theme .activity-item { background: var(--auro-surface-card); border-color: var(--auro-border-light); transition: all 0.3s ease; } .auro-theme .activity-item:hover { background: var(--auro-surface-hover); border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-md); } .auro-theme .activity-icon { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .activity-time { color: var(--auro-text-muted); } /* ========================================================================== PLUGIN IMPORTS ========================================================================== */ /* Third-party Plugin Styling (SweetAlert2, Select2, Leaflet) */ /* ── inlined: ./plugins/_plugins.css ── */ /** * ============================================================================ * AURO THEME - PLUGIN INTEGRATIONS * ============================================================================ * * Third-party plugin styles scoped under .auro-theme * Includes: SweetAlert2, Select2, Leaflet * ============================================================================ */ /* ============================================================================ SELECT2 THEME ============================================================================ */ .auro-theme .select2-container--bootstrap5 .select2-selection { background: var(--auro-surface-input); border-color: var(--auro-border-default); color: var(--auro-text-primary); border-radius: var(--auro-radius-md); } .auro-theme .select2-container--bootstrap5.select2-container--focus .select2-selection, .auro-theme .select2-container--bootstrap5.select2-container--open .select2-selection { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 4px var(--auro-glow); } .auro-theme .select2-container--bootstrap5 .select2-dropdown { background: var(--auro-surface-card-solid); border-color: var(--auro-border-default); border-radius: var(--auro-radius-md); box-shadow: var(--auro-shadow-lg); } .auro-theme .select2-container--bootstrap5 .select2-results__option { color: var(--auro-text-primary); } .auro-theme .select2-container--bootstrap5 .select2-results__option--highlighted { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .select2-container--bootstrap5 .select2-results__option--selected { background: rgba(0, 210, 106, 0.15); color: var(--auro-brand-primary); } /* Select2 RTL checkmark fix */ [dir="rtl"] .auro-theme .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected::after { left: 1.25rem; right: auto; } [dir="ltr"] .auro-theme .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected::after { right: 1.25rem; left: auto; } /* ============================================================================ SWEETALERT2 THEME ============================================================================ */ /* Container/Backdrop */ .auro-theme .swal2-container, .swal2-container { background-color: rgba(0, 0, 0, 0.45); z-index: 10000; } /* Main Popup */ .auro-theme .swal2-popup, .swal2-popup { background: linear-gradient(145deg, rgba(20, 28, 44, 0.95), rgba(28, 36, 52, 0.92)); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: var(--auro-radius-2xl); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.15) inset; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); padding: 2rem; max-width: 450px; } [data-bs-theme="light"] .auro-theme .swal2-popup, [data-bs-theme="light"] .swal2-popup { background: linear-gradient(145deg, #FFFFFF, #F9FAFB); border: 1px solid rgba(0, 163, 82, 0.2); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 163, 82, 0.2) inset; } /* Title */ .auro-theme .swal2-title, .swal2-title { color: #F1F5F9; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.75rem; } [data-bs-theme="light"] .auro-theme .swal2-title, [data-bs-theme="light"] .swal2-title { color: #111827; } /* Content */ .auro-theme .swal2-html-container, .swal2-html-container { color: #CBD5E1; font-size: 0.95rem; line-height: 1.6; margin: 0.75rem 0; max-height: none; overflow: visible; overflow-y: visible; } [data-bs-theme="light"] .auro-theme .swal2-html-container, [data-bs-theme="light"] .swal2-html-container { color: #374151; } /* Icons */ .auro-theme .swal2-icon, .swal2-icon { margin: 1.25rem auto; border-width: 4px; width: 70px; height: 70px; } .auro-theme .swal2-icon.swal2-success, .swal2-icon.swal2-success { border-color: #10B981; } .auro-theme .swal2-icon.swal2-success [class^='swal2-success-line'], .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #10B981; } .auro-theme .swal2-icon.swal2-success .swal2-success-ring, .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16, 185, 129, 0.3); } .auro-theme .swal2-icon.swal2-error, .swal2-icon.swal2-error { border-color: var(--auro-danger); } .auro-theme .swal2-icon.swal2-error [class^='swal2-x-mark-line'], .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--auro-danger); } .auro-theme .swal2-icon.swal2-warning, .swal2-icon.swal2-warning { border-color: var(--auro-warning); color: var(--auro-warning); } .auro-theme .swal2-icon.swal2-info, .swal2-icon.swal2-info { border-color: var(--auro-info); color: var(--auro-info); } /* Buttons Container */ .auro-theme .swal2-actions, .swal2-actions { margin-top: 1.5rem; gap: 0.75rem; } /* Confirm Button */ .auro-theme .swal2-confirm, .swal2-confirm { background: linear-gradient(135deg, var(--auro-info), #2563EB); color: #FFFFFF; font-weight: 600; border: none; border-radius: var(--auro-radius-md); padding: 0.75rem 2rem; font-size: 0.95rem; transition: all var(--auro-transition-normal) var(--auro-ease-default); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .auro-theme .swal2-confirm:hover, .swal2-confirm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); } /* Cancel Button */ .auro-theme .swal2-cancel, .swal2-cancel { background: rgba(107, 114, 128, 0.2); color: #D1D5DB; border: 1px solid rgba(107, 114, 128, 0.3); border-radius: var(--auro-radius-md); padding: 0.75rem 2rem; font-weight: 600; font-size: 0.95rem; transition: all var(--auro-transition-normal) var(--auro-ease-default); } .auro-theme .swal2-cancel:hover, .swal2-cancel:hover { background: rgba(107, 114, 128, 0.3); transform: translateY(-2px); } [data-bs-theme="light"] .auro-theme .swal2-cancel, [data-bs-theme="light"] .swal2-cancel { background: rgba(239, 68, 68, 0.1); color: var(--auro-danger); border-color: rgba(239, 68, 68, 0.2); } /* Close Button */ .auro-theme .swal2-close, .swal2-close { color: #6B7280; transition: all var(--auro-transition-fast) var(--auro-ease-default); } .auro-theme .swal2-close:hover, .swal2-close:hover { color: #9CA3AF; } /* Input Fields */ .auro-theme .swal2-input, .auro-theme .swal2-textarea, .auro-theme .swal2-select, .swal2-input, .swal2-textarea, .swal2-select { background: var(--auro-surface-input); border: 1px solid var(--auro-border-default); color: var(--auro-text-primary); border-radius: var(--auro-radius-md); } .auro-theme .swal2-input:focus, .auro-theme .swal2-textarea:focus, .auro-theme .swal2-select:focus, .swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--auro-brand-primary); box-shadow: 0 0 0 4px var(--auro-glow); } /* Toast */ .auro-theme .swal2-toast, .swal2-toast { background: var(--auro-swal-bg); border: 1px solid var(--auro-swal-border); box-shadow: var(--auro-shadow-lg); } .auro-theme .swal2-toast .swal2-title, .swal2-toast .swal2-title { color: var(--auro-text-primary); } /* Animations */ .auro-theme .swal2-show, .swal2-show { animation: auroSwalShow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .auro-theme .swal2-hide, .swal2-hide { animation: auroSwalHide 0.15s ease-out forwards; } /* RTL Support */ [dir="rtl"] .auro-theme .swal2-popup, [dir="rtl"] .swal2-popup { text-align: right; direction: rtl; } [dir="rtl"] .auro-theme .swal2-title, [dir="rtl"] .swal2-title { text-align: center; } [dir="rtl"] .auro-theme .swal2-html-container, [dir="rtl"] .swal2-html-container { text-align: center; } /* ============================================================================ LEAFLET MAPS & ZONE MAPS - Color Overrides Only ============================================================================ Structural rules are in custom-base.css. Theme only overrides colors/shadows. ============================================================================ */ .auro-theme .leaflet-popup-content-wrapper { background: var(--auro-surface-card); border-color: var(--auro-border-default); color: var(--auro-text-primary); } .auro-theme .leaflet-popup-tip { background: var(--auro-surface-card); } .auro-theme .leaflet-popup-content { color: var(--auro-text-primary); } .auro-theme .leaflet-control-zoom a { background: var(--auro-surface-card); color: var(--auro-text-primary); border-color: var(--auro-border-default); } .auro-theme .leaflet-control-zoom a:hover { background: var(--auro-surface-hover); color: var(--auro-brand-primary); } .auro-theme .leaflet-draw-toolbar a { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .leaflet-draw-toolbar a:hover { background: var(--auro-surface-hover); } .auro-theme .map-instructions { background: rgba(0, 210, 106, 0.1); border-color: var(--auro-brand-primary); } .auro-theme .map-instructions h6 { color: var(--auro-brand-primary); } .auro-theme .zone-legend { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .existing-zone-legend { background: rgba(59, 130, 246, 0.1); border-color: var(--auro-info); } .auro-theme .coordinates-display { background: var(--auro-surface-card); border-color: var(--auro-border-default); color: var(--auro-text-primary); } /* ========================================================================== PAGE-SPECIFIC IMPORTS ========================================================================== */ /* Login Page */ /* ── inlined: ./pages/_login.css ── */ /** * AURO GREEN THEME - LOGIN PAGE (Visual Overrides Only) * Scoped under .auro-theme wrapper. * Primary: #00D26A | Dark: #00A352 | Light: #00FF7F | Glow: rgba(0,210,106,0.4) */ /* ======================================== Body Background ======================================== */ [data-bs-theme="dark"] .auro-theme#kt_body.app-blank { background: linear-gradient(135deg, #0A0F1C 0%, #0F172A 50%, #0A0F1C 100%); } [data-bs-theme="light"] .auro-theme#kt_body.app-blank { background: linear-gradient(135deg, #F0F8F4 0%, #E8F5EC 50%, #FFFFFF 100%); } /* ======================================== Flying Dots ======================================== */ [data-bs-theme="dark"] .auro-theme .login-dot { background: rgba(0, 210, 106, 0.4); } [data-bs-theme="light"] .auro-theme .login-dot { background: rgba(0, 210, 106, 0.2); } /* ======================================== Card ======================================== */ [data-bs-theme="dark"] .auro-theme .login-card-inner { background: rgba(10, 15, 28, 0.85); border-color: rgba(0, 210, 106, 0.12); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 210, 106, 0.08); } [data-bs-theme="light"] .auro-theme .login-card-inner { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 210, 106, 0.15); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.06), 0 0 40px rgba(0, 210, 106, 0.06); } /* ======================================== Brand Icon ======================================== */ .auro-theme .login-brand-icon { background: linear-gradient(135deg, #00D26A, #00A352); box-shadow: 0 8px 25px rgba(0, 210, 106, 0.4); } /* ======================================== Brand Title ======================================== */ [data-bs-theme="dark"] .auro-theme .login-brand-title { background: linear-gradient(135deg, #fff, #00D26A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-bs-theme="light"] .auro-theme .login-brand-title { background: linear-gradient(135deg, #1a1a2e, #00D26A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Brand Subtitle ======================================== */ [data-bs-theme="dark"] .auro-theme .login-brand-subtitle { color: rgba(0, 255, 127, 0.6); } [data-bs-theme="light"] .auro-theme .login-brand-subtitle { color: rgba(0, 163, 82, 0.7); } /* ======================================== Welcome Title & Subtitle ======================================== */ [data-bs-theme="dark"] .auro-theme .login-welcome-title { color: #fff; } [data-bs-theme="dark"] .auro-theme .login-welcome-subtitle { color: rgba(255, 255, 255, 0.5); } /* ======================================== Form Controls ======================================== */ [data-bs-theme="dark"] .auro-theme .login-input { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(0, 210, 106, 0.15) !important; color: #fff !important; } [data-bs-theme="light"] .auro-theme .login-input { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 210, 106, 0.2) !important; } .auro-theme .login-input:focus { border-color: #00D26A !important; box-shadow: 0 0 0 4px rgba(0, 210, 106, 0.15) !important; } /* ======================================== Input Icons ======================================== */ [data-bs-theme="dark"] .auro-theme .login-input-icon { color: rgba(0, 210, 106, 0.5); } [data-bs-theme="light"] .auro-theme .login-input-icon { color: rgba(0, 163, 82, 0.5); } /* ======================================== Checkbox ======================================== */ .auro-theme .login-checkbox:checked { background-color: #00D26A; border-color: #00D26A; } /* ======================================== Submit Button ======================================== */ .auro-theme .login-submit-btn { background: linear-gradient(135deg, #00D26A, #00A352) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 25px rgba(0, 210, 106, 0.35); } .auro-theme .login-submit-btn:hover { box-shadow: 0 12px 40px rgba(0, 210, 106, 0.5) !important; transform: translateY(-1px); } /* ======================================== Language Switcher ======================================== */ .auro-theme .login-lang-btn.active { border-color: rgba(0, 210, 106, 0.5) !important; } [data-bs-theme="dark"] .auro-theme .login-lang-btn.active { background: rgba(0, 210, 106, 0.08); } [data-bs-theme="light"] .auro-theme .login-lang-btn.active { background: rgba(0, 210, 106, 0.06); } /* ======================================== Field Labels ======================================== */ [data-bs-theme="dark"] .auro-theme .login-field-label { color: rgba(0, 255, 127, 0.7); } [data-bs-theme="light"] .auro-theme .login-field-label { color: rgba(0, 163, 82, 0.8); } /* Other Page-Specific Styles */ /* ── inlined: ./pages/_pages.css ── */ /** * ============================================================================ * AURO THEME - PAGE-SPECIFIC OVERRIDES (Visual Only) * ============================================================================ * Color, background, shadow, and glow overrides for specific admin pages. * No structural changes (padding, border-radius, width, height, display, flex). * Scoped under .auro-theme wrapper. * ============================================================================ */ /* ============================================================================ DASHBOARD PAGE ============================================================================ */ .auro-theme .dashboard-welcome { background: linear-gradient(135deg, rgba(0, 210, 106, 0.15), transparent); border-color: rgba(0, 210, 106, 0.3); } .auro-theme .dashboard-welcome h2 { color: var(--auro-text-heading); } .auro-theme .dashboard-welcome p { color: var(--auro-text-muted); } /* ============================================================================ ORDER DETAIL PAGE ============================================================================ */ .auro-theme .order-header { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .order-status-badge { box-shadow: 0 0 15px rgba(0, 210, 106, 0.3); } .auro-theme .order-timeline { border-left-color: var(--auro-border-default); } [dir="rtl"] .auro-theme .order-timeline { border-left-color: transparent; border-right-color: var(--auro-border-default); } .auro-theme .timeline-item::before { background: var(--auro-brand-primary); box-shadow: 0 0 10px var(--auro-glow); } .auro-theme .timeline-item.completed::before { background: var(--auro-brand-primary); } .auro-theme .timeline-item.active::before { background: var(--auro-warning); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); } /* ============================================================================ DRIVER / USER DETAIL PAGE ============================================================================ */ .auro-theme .profile-header { background: linear-gradient(135deg, rgba(0, 210, 106, 0.1), var(--auro-surface-card)); border-color: var(--auro-border-default); } .auro-theme .profile-avatar { border-color: var(--auro-brand-primary); box-shadow: 0 0 20px var(--auro-glow); } .auro-theme .profile-name { color: var(--auro-text-heading); } .auro-theme .profile-role { color: var(--auro-brand-primary); } /* ============================================================================ SETTINGS PAGE ============================================================================ */ .auro-theme .settings-section { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .settings-section-title { color: var(--auro-brand-primary); border-bottom-color: var(--auro-border-default); } .auro-theme .settings-item { border-bottom-color: var(--auro-border-light); transition: all 0.3s ease; } .auro-theme .settings-item:hover { background: var(--auro-surface-hover); } .auro-theme .settings-label { color: var(--auro-text-primary); } .auro-theme .settings-description { color: var(--auro-text-muted); } /* ============================================================================ MAP / ZONE PAGE ============================================================================ */ .auro-theme .map-container { border-color: var(--auro-border-default); box-shadow: var(--auro-shadow-md); } .auro-theme .zone-list-item { background: var(--auro-surface-card); border-color: var(--auro-border-default); transition: all 0.3s ease; } .auro-theme .zone-list-item:hover { background: var(--auro-surface-hover); border-color: var(--auro-brand-primary); } .auro-theme .zone-name { color: var(--auro-text-heading); } .auro-theme .zone-info { color: var(--auro-text-muted); } /* ============================================================================ DISCOUNT / PROMO PAGE ============================================================================ */ .auro-theme .discount-card { background: var(--auro-surface-card); border-color: var(--auro-border-default); transition: all 0.3s ease; } .auro-theme .discount-card:hover { box-shadow: 0 8px 25px rgba(0, 210, 106, 0.15); border-color: var(--auro-brand-primary); } .auro-theme .discount-code { background: rgba(0, 210, 106, 0.1); color: var(--auro-brand-primary); border-color: rgba(0, 210, 106, 0.3); } /* ============================================================================ NOTIFICATION PAGE ============================================================================ */ .auro-theme .notification-item { background: var(--auro-surface-card); border-color: var(--auro-border-default); transition: all 0.3s ease; } .auro-theme .notification-item:hover { background: var(--auro-surface-hover); } .auro-theme .notification-item.unread { border-left-color: var(--auro-brand-primary); } [dir="rtl"] .auro-theme .notification-item.unread { border-left-color: var(--auro-border-default); border-right-color: var(--auro-brand-primary); } .auro-theme .notification-title { color: var(--auro-text-heading); } .auro-theme .notification-time { color: var(--auro-text-muted); } /* ============================================================================ REPORTS / ANALYTICS PAGE ============================================================================ */ .auro-theme .report-card { background: var(--auro-surface-card); border-color: var(--auro-border-default); } .auro-theme .report-title { color: var(--auro-brand-primary); } .auro-theme .report-value { background: linear-gradient(135deg, var(--auro-brand-primary-light), var(--auro-brand-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================================ PAYOUT PAGE ============================================================================ */ .auro-theme .payout-summary { background: linear-gradient(135deg, rgba(0, 210, 106, 0.1), var(--auro-surface-card)); border-color: var(--auro-brand-primary); } .auro-theme .payout-amount { color: var(--auro-brand-primary); } /* ============================================================================ STEP WIZARD ============================================================================ */ .auro-theme .step-indicator.active { background: var(--auro-brand-primary); color: white; box-shadow: 0 0 15px var(--auro-glow); } .auro-theme .step-indicator.completed { background: var(--auro-brand-primary); color: white; } .auro-theme .step-connector.completed { background: var(--auro-brand-primary); } .auro-theme .step-connector { background: var(--auro-border-default); } .auro-theme .step-label { color: var(--auro-text-muted); } .auro-theme .step-label.active { color: var(--auro-brand-primary); } /* ============================================================================ CONTENT WRAPPER ============================================================================ */ .auro-theme #kt_app_content { color: var(--auro-text-primary); } .auro-theme .page-heading { color: var(--auro-text-heading); } /* ========================================================================== THEME ACTIVATION INDICATOR ========================================================================== */ /** * This selector confirms the theme is active. * Used for debugging and theme detection. */ .auro-theme { --auro-theme-active: 1; --auro-theme-version: '2.0.0'; } /* ========================================================================== PRINT STYLES ========================================================================== */ @media print { .auro-theme .animated-background, .auro-theme .floating-particles, .auro-theme .grid-lines { display: none !important; } .auro-theme .card { box-shadow: none !important; border: 1px solid #ddd !important; } .auro-theme body { background: white !important; } }