@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* --- LIGHT THEME (Default) --- */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --text: #111827;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --border-alt: #cbd5e1;
    
    /* Nav & Sidebar */
    --header-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --sidebar-item-hover: rgba(59, 130, 246, 0.08);
    --sidebar-item-active: rgba(59, 130, 246, 0.12);
    
    /* Email List */
    --email-row-hover: #f1f5f9;
    --email-row-unread: #ffffff;
    --email-row-border: #f1f5f9;
    
    /* Inputs & Forms */
    --input-bg: #f8fafc;
    --input-border: #e2e8f0;
    --input-text: #111827;
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(226, 232, 240, 0.8);
    
    /* Cyber Colors (Static) */
    --cyber-blue: #1e40af;
    --cyber-accent: #3b82f6;
    --cyber-green: #10b981;
    --cyber-red: #ef4444;
    --cyber-yellow: #f59e0b;
    
    /* Risk Gradients */
    --risk-safe: linear-gradient(135deg, #059669, #10b981);
    --risk-suspicious: linear-gradient(135deg, #d97706, #f59e0b);
    --risk-dangerous: linear-gradient(135deg, #dc2626, #ef4444);

    
    /* --- PREMIUM SAAS LIGHT THEME TOKENS --- */
    --sys-bg: #F8FAFC;
    --sys-card: #FFFFFF;
    --sys-border: #E5E7EB;
    --sys-primary: #2563EB;
    --sys-text: #111827;
    --sys-text-secondary: #6B7280;
    --sys-radius: 8px;
    --sys-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}



/* Global Reset & Transitions */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* --- TAILWIND OVERRIDES --- */
.bg-white { background-color: var(--surface) !important; }
.bg-slate-50 { background-color: var(--bg) !important; }
.bg-gray-50 { background-color: var(--surface-alt) !important; }
.bg-gray-100 { background-color: var(--surface-alt) !important; }

/* Status Backgrounds (Tinted) */
.bg-blue-50 { background-color: rgba(59, 130, 246, 0.08) !important; }
.bg-green-50 { background-color: rgba(16, 185, 129, 0.08) !important; }
.bg-yellow-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
.bg-red-50 { background-color: rgba(239, 68, 68, 0.08) !important; }


/* Chart Overrides */
.bg-blue-100 { background-color: var(--surface-alt) !important; }
.bg-red-100 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-green-100 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-yellow-100 { background-color: rgba(245, 158, 11, 0.1) !important; }

.text-gray-900 { color: var(--text) !important; }
.text-gray-800 { color: var(--text) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-500 { color: var(--text-secondary) !important; }
.text-gray-400 { color: var(--text-secondary) !important; }

.border-gray-100, .border-gray-200, .border-gray-700 { border-color: var(--border) !important; }

/* Base UI Components */
header {
    /* Generic header background and border removed to prevent unwanted boxes */
}

aside {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border);
}


aside, header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

main {
    background-color: var(--bg);
}

/* Glassmorphism */
.glass, .glass-light {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* Animations & Micro-Interactions */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-glow { 0%,100%{box-shadow: 0 0 20px rgba(59, 130, 246, 0.3)} 50%{box-shadow: 0 0 40px rgba(59, 130, 246, 0.6)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }

/* Interactive Gestures (Spring effect) */
a, button, .cursor-pointer {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}

button:active, a.cursor-pointer:active, .sidebar-item:active, .email-row:active {
    transform: scale(0.97) !important;
}

/* Enhanced Hover Cards */
.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* Risk Badges */
.risk-safe { background: var(--risk-safe); }
.risk-suspicious { background: var(--risk-suspicious); }
.risk-dangerous { background: var(--risk-dangerous); }

/* Sidebar Items */
.sidebar-item {
    transition: all 0.2s;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}

.sidebar-item:hover {
    background-color: var(--sidebar-item-hover);
    color: var(--cyber-accent);
}

.sidebar-item.active {
    background-color: var(--sidebar-item-active);
    color: #3b82f6;
    font-weight: 600;
}

/* Email List Styling */
.email-row {
    transition: all 0.15s;
    cursor: pointer;
    background-color: var(--surface);
    border-bottom: 1px solid var(--email-row-border);
}

.email-row:hover {
    background-color: var(--email-row-hover);
}

.email-row.unread {
    font-weight: 600;
    background-color: var(--email-row-unread) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Dark/Light Utility Classes */
.dark-mode { background-color: var(--bg); color: var(--text); }
.light-mode { background-color: var(--bg); color: var(--text); }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* --- Sidebar Collapse Animation --- */
#main-sidebar {
    width: 260px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    white-space: nowrap;
}

#main-sidebar.collapsed {
    width: 72px;
}

/* Ensure SVG icons NEVER shrink and are consistently 18px for optical balance */
#main-sidebar [data-lucide] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}

/* The magic morphing text */
#main-sidebar .sidebar-text {
    display: inline-block;
    max-width: 200px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#main-sidebar.collapsed .sidebar-text {
    max-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Base transitions for containers */
#main-sidebar .compose-btn,
#main-sidebar .sidebar-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 12px; /* Tailwind gap-3 */
}

/* Fix the scrollbar causing horizontal left-shifting */
#main-sidebar.collapsed nav {
    scrollbar-width: none;
}
#main-sidebar.collapsed nav::-webkit-scrollbar {
    display: none;
}

/* Expected Collapsed Layout (perfect optical centering) */
#main-sidebar.collapsed .compose-btn,
#main-sidebar.collapsed .sidebar-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
}

/* Center the divider line without squishing the nav container */
#main-sidebar.collapsed .border-t {
    border-top-color: transparent !important;
    position: relative;
}
#main-sidebar.collapsed .border-t::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8px; /* Centers a 24px line inside a 40px container */
    right: 8px;
    height: 1px;
    border-top: 1px solid #f3f4f6; /* border-gray-100 */
}

/* Prevent security widget from squishing and wrapping text */
#main-sidebar .security-widget {
    min-width: 228px;
    transition: opacity 0.2s ease;
    opacity: 1;
}

/* Cleanly remove bottom widget without leaving visual artifacts or empty space */
#main-sidebar.collapsed .security-widget {
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* App Logo Styling */
.app-logo {
    object-fit: contain;
}

.app-logo-sm {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.app-logo-md {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.app-logo-lg {
    height: 90px;
    width: auto;
    object-fit: contain;
}

.app-logo-xl {
    height: 120px;
    width: auto;
    object-fit: contain;
}

/* --- SYS COMPONENTS --- */
.sys-navbar {
    background-color: var(--sys-card);
    border-bottom: 1px solid var(--sys-border);
    height: 72px;
}
.sys-btn-primary {
    background-color: var(--sys-primary);
    color: #FFFFFF;
    border-radius: var(--sys-radius);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
    border: none;
    box-shadow: var(--sys-shadow);
}
.sys-btn-primary:hover {
    background-color: var(--sys-primary-hover);
}
.sys-input {
    background-color: var(--sys-bg);
    border: 1px solid var(--sys-border);
    color: var(--sys-text);
    border-radius: var(--sys-radius);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s;
    outline: none;
}
.sys-input:focus {
    border-color: var(--sys-primary);
}

.sys-card {
    background-color: var(--sys-card);
    border: 1px solid var(--sys-border);
    border-radius: var(--sys-radius);
    box-shadow: var(--sys-shadow);
}
.sys-sidebar {
    background-color: var(--sys-bg);
    border-right: 1px solid var(--sys-border);
}