/* REPLACE THE ENTIRE :root block with this */ :root { --bg: #0a0c10; --panel: #111318; --panel-2: #0d0f13; --surface: #161a22; --surface-2: #1c2130; --muted: #6b7280; --muted-2: #9ca3af; --text: #f1f5f9; --text-2: #cbd5e1; --brand: #3b82f6; --brand-hover: #2563eb; --brand-subtle: rgba(59, 130, 246, 0.08); --brand-border: rgba(59, 130, 246, 0.2); --ok: #10b981; --warn: #f59e0b; --danger: #ef4444; --chip: #0d1320; --chip-border: #1e2d45; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3); --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); --border: rgba(255, 255, 255, 0.06); } /* ============================================ LIGHT MODE — Applied when JS adds .light-mode to tag ============================================ */ /* ============================================ COMPLETE LIGHT MODE FIX ============================================ */ .light-mode { --bg: #f0f2f5; --panel: #ffffff; --panel-2: #f8f9fb; --surface: #ffffff; --surface-2: #f0f2f5; --muted: #6b7280; --muted-2: #9ca3af; --text: #111827; --text-2: #374151; --brand: #2563eb; --brand-hover: #1d4ed8; --brand-subtle: rgba(37, 99, 235, 0.08); --brand-border: rgba(37, 99, 235, 0.2); --ok: #059669; --warn: #d97706; --danger: #dc2626; --border: rgba(0, 0, 0, 0.09); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.07); --chip: #e5e7eb; --chip-border: #d1d5db; } /* KPI Card Text Fix for Light Mode */ .light-mode .metric-val { color: #1e40af !important; font-weight: 800; } .light-mode .metric-label { color: #6b7280 !important; } .light-mode .card-title { color: #6b7280 !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .light-mode .smart-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.09) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important; } .light-mode .smart-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; border-color: rgba(37, 99, 235, 0.2) !important; } /* Fix the top accent line on hover */ .light-mode .smart-card::before { background: linear-gradient(90deg, #2563eb, transparent) !important; } /* Sidebar Light Mode */ .light-mode .sidebar { background: #ffffff !important; border-right-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .brand { background: #2563eb !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important; } .light-mode .navbtn { background: transparent !important; border-color: transparent !important; color: #6b7280 !important; } .light-mode .navbtn:hover { background: #f3f4f6 !important; color: #111827 !important; border-color: transparent !important; } .light-mode .navbtn.active { background: rgba(37, 99, 235, 0.08) !important; color: #2563eb !important; border-color: rgba(37, 99, 235, 0.15) !important; } .light-mode .auth-status { border-top-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .plot { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* Toolbar Bar Light Mode */ .light-mode .bar { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.09) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; } .light-mode .label { color: #9ca3af !important; } /* Fix toolbar buttons */ .light-mode .btn { background: #f9fafb !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #374151 !important; } .light-mode .btn:hover { background: #f3f4f6 !important; color: #111827 !important; border-color: rgba(0, 0, 0, 0.18) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important; } .light-mode .btn.primary { background: #2563eb !important; color: #ffffff !important; border-color: transparent !important; } .light-mode .btn-primary { background: rgba(37, 99, 235, 0.08) !important; border-color: rgba(37, 99, 235, 0.25) !important; color: #2563eb !important; } .light-mode .btn-primary:hover { background: #2563eb !important; color: #ffffff !important; } /* Fix specific colored toolbar buttons */ .light-mode #btnHealth { border-color: rgba(5, 150, 105, 0.35) !important; color: #059669 !important; background: rgba(5, 150, 105, 0.05) !important; } .light-mode #btnClean { border-color: rgba(217, 119, 6, 0.35) !important; color: #d97706 !important; background: rgba(217, 119, 6, 0.05) !important; } .light-mode #btnForecast { border-color: rgba(109, 40, 217, 0.35) !important; color: #6d28d9 !important; background: rgba(109, 40, 217, 0.05) !important; } .light-mode #btn-set-alert { border-color: rgba(220, 38, 38, 0.35) !important; color: #dc2626 !important; } .light-mode #toggle-edit-btn { border-color: rgba(220, 38, 38, 0.35) !important; color: #dc2626 !important; } .light-mode .icon-btn { color: #9ca3af !important; border-color: transparent !important; background: transparent !important; } .light-mode .icon-btn:hover { background: #f3f4f6 !important; color: #374151 !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* Toolbar divider */ .light-mode .toolbar-divider { background: rgba(0, 0, 0, 0.09) !important; } /* Select dropdowns */ .light-mode .select { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #111827 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important; } .light-mode .select:focus, .light-mode .select:hover { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; background-color: #ffffff !important; } /* Chart containers in Light Mode */ .light-mode .plot { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .card.panel { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .panel .head { color: #111827 !important; } .light-mode .panel .head span { color: #111827 !important; font-weight: 600 !important; } /* Graph editor toolbar */ .light-mode .graph-editor-toolbar { background: #f8f9fb !important; border-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .graph-editor-toolbar label { color: #6b7280 !important; } .light-mode .graph-editor-toolbar .select { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #111827 !important; } /* Page Title Light Mode */ .light-mode .title { color: #111827 !important; } .light-mode .subtitle { color: #6b7280 !important; } .light-mode .page-header { border-bottom-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .page-title { color: #111827 !important; } .light-mode .page-badge { background: #f3f4f6 !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #6b7280 !important; } .light-mode .page-date { color: #9ca3af !important; } /* Modals Light Mode */ .light-mode .modal-overlay { background: rgba(0, 0, 0, 0.4) !important; } .light-mode .modal-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15) !important; } .light-mode .modal-title { color: #111827 !important; } .light-mode .modal-text { color: #6b7280 !important; } .light-mode .modal-content { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; } .light-mode .modal-header { background: #f8f9fb !important; border-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .modal-footer { background: #f8f9fb !important; border-color: rgba(0, 0, 0, 0.09) !important; } .light-mode .modal-header h3 { color: #111827 !important; } /* Card settings popup */ .light-mode .card-settings { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } /* Footer Light Mode */ .light-mode footer { border-top-color: rgba(0, 0, 0, 0.09) !important; color: #9ca3af !important; } .light-mode footer a { color: #9ca3af !important; } .light-mode footer a:hover { color: #6b7280 !important; } /* Fix chart toolbar in light mode */ .light-mode .graph-editor-toolbar { background: #f8fafc; border-color: rgba(0, 0, 0, 0.08); } .light-mode .graph-editor-toolbar .select { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); color: #111827; } /* Fix buttons */ .light-mode .btn { background: #f0f2f5; border-color: rgba(0, 0, 0, 0.1); color: #374151; } .light-mode .btn:hover { background: #e5e7eb; color: #111827; } .light-mode .btn.primary { background: #2563eb; color: #fff; border-color: transparent; } .light-mode .select { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); color: #111827; } /* Fix modals */ .light-mode .modal-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } .light-mode .modal-overlay { background: rgba(0, 0, 0, 0.4); } /* Fix the page title */ .light-mode .title { color: #111827; } .light-mode .subtitle { color: #6b7280; } /* Fix cards */ .light-mode .card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .light-mode .smart-card { background: #ffffff; } /* Fix footer */ .light-mode footer { border-color: rgba(0, 0, 0, 0.08); color: #9ca3af; } .light-mode footer a { color: #9ca3af !important; } .light-mode footer a:hover { color: #6b7280 !important; } /* === TYPOGRAPHY === */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; } /* === SCROLLBAR (Refined) === */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Apple Color Emoji, Segoe UI Emoji; } /* 1. Webkit Browsers (Chrome, Edge, Safari) */ ::-webkit-scrollbar { width: 8px; /* Thin width */ height: 8px; /* Thin height for horizontal scrolls */ } ::-webkit-scrollbar-track { background: #0f172a; /* Matches your modal background */ border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #334155; /* Matches your border lines */ border-radius: 4px; /* Rounded edges */ border: 2px solid #0f172a; /* Creates padding effect */ } ::-webkit-scrollbar-thumb:hover { background: #475569; /* Slightly lighter when you grab it */ } /* 2. Firefox Support */ /* * { scrollbar-width: thin; scrollbar-color: #334155 #0f172a; /* Thumb Color / Track Color */ /* } /* ===== Shell ===== */ .wrap { display: flex; min-height: 100dvh; } /* ===== Sidebar ===== */ .sidebar { position: sticky; top: 0; left: 0; height: 100vh; width: 70px; background: var(--panel-2); border-right: 1px solid #202533; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; transition: width 0.25s ease; overflow: hidden; z-index: 1000; } .sidebar.expanded { width: 220px; align-items: flex-start; } .brand { display: flex; align-items: center; justify-content: center; min-width: 44px; /* Changed from width */ height: 44px; /* width: 100px; */ border-radius: 12px; background: #0c1a33; border: 1px solid #1b2a44; color: var(--brand); font-weight: 700; margin-bottom: 20px; cursor: pointer; flex-shrink: 0; } .brand span { margin-left: 10px; font-size: 18px; font-weight: 700; white-space: nowrap; display: none; } .sidebar.expanded .brand span { display: inline; } .sidebar .spacer { flex-grow: 1; } /* When Sidebar is Expanded, Push Content Further */ /* body:has(.sidebar.expanded) .main { margin-left: 220px; width: calc(100% - 220px); } */ .nav { display: flex; flex-direction: column; gap: 12px; width: 100%; flex-shrink: 0; } .navbtn { width: 100%; height: 44px; border-radius: 12px; border: 1px solid #1e2534; background: #0e1422; color: #a9b3c3; display: flex; align-items: center; gap: 12px; padding: 0 12px; cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; /* For anchor tags */ } .navbtn:hover { background: #1c2637; color: #fff; } .navbtn span { display: none; white-space: nowrap; } .sidebar.expanded .navbtn span { display: inline; } /* --- NEW AUTH STYLES --- */ .auth-status { display: none; /* Hidden when sidebar is collapsed */ padding: 15px; margin-top: 15px; border-top: 1px solid #202533; } .sidebar.expanded .auth-status { display: block; } #userStatus { font-size: 13px; color: var(--muted); margin: 0 0 10px 0; white-space: nowrap; } #authLinks a { color: var(--brand); text-decoration: none; font-size: 14px; margin-right: 15px; font-weight: 500; } #authLinks a:hover { text-decoration: underline; } #mobile-toggle { position: fixed; top: 14px; left: 10px; z-index: 1001; display: none; /* Hidden by default */ } .main { flex: 1; padding: 24px; overflow-x: hidden; } /* --- NEW: Credit Display Box Styles --- */ .credit-display-box { position: absolute; top: 24px; right: 24px; z-index: 100; text-align: center; /* --- Default state (> 0 credits) --- */ /* Box is transparent and has no padding */ background: transparent; border: none; padding: 0; box-shadow: none; border-radius: 12px; /* --- Added transition for smoothness --- */ transition: all 0.3s ease; } /* --- "Show Box" state (<= 0 credits) --- */ /* This class is added by JavaScript when credits are <= 0 */ .credit-display-box.show-box { background: var(--panel); border: 1px solid #212735; padding: 12px 16px; box-shadow: var(--card-shadow); } /* --- "Credits Remaining" text --- */ .credit-display-box div:first-child { display: none; /* Hidden by default */ font-size: 13px; /* Made this smaller than the number */ color: var(--muted); margin-bottom: 4px; } /* Show the text ONLY when the full box is visible */ .credit-display-box.show-box div:first-child { display: block; } /* --- The credit number --- */ #credit-count { font-size: 18px; font-weight: 800; color: var(--brand); line-height: 1.1; /* --- This is the default "number only" style --- */ background: rgba(0, 0, 0, 0.2); padding: 8px 12px; border-radius: 10px; transition: all 0.3s ease; } /* --- Style for the number when the box appears --- */ .credit-display-box.show-box #credit-count { background: transparent; /* Remove the number's background */ padding: 0; font-size: 24px; /* Make it bigger inside the box */ } /* This class still controls the color (blue vs. red) */ #credit-count.no-credits { color: var(--danger); } /* --- "Buy Credits" link --- */ .buy-credits-link { display: none; /* Hidden by default */ font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600; /* margin-top: 8px; */ } /* Show the link ONLY when the full box is visible */ .credit-display-box.show-box .buy-credits-link { display: block; } .buy-credits-link:hover { text-decoration: underline; } /* --- Media queries remain the same --- */ @media (max-width: 640px) { .main { padding-top: 100px; /* Add padding to avoid overlap */ } .credit-display-box { /* top: 80px; */ /* Position it below the mobile toggle */ right: 18px; } /* We need to update the "show-box" for mobile */ .credit-display-box.show-box { padding: 8px 12px; /* Ensures padding is correct on mobile */ } /* And update the "number only" style for mobile */ .credit-display-box:not(.show-box) { /* When box is hidden, only show number */ top: 80px; left: auto; /* Reset left */ right: 18px; /* Stick to the right */ } .title { margin-top: 18px; /* Add margin to the title */ } } .title { text-align: center; margin: 0 0 6px 0; font-size: 40px; font-weight: 800; color: #cfe5ff; } .subtitle { text-align: center; color: var(--muted); margin: 0 0 24px 0 } /* ========================================= 📱 FLEXIBLE METRICS (Mobile First Fix) ========================================= */ /* 1. Container - Holds the cards */ .metrics { display: flex !important; /* Force Flexbox */ flex-wrap: wrap !important; /* Allow wrapping (Crucial) */ gap: 20px; /* Space between cards */ width: 100%; box-sizing: border-box; } /* 2. Card Item - The Metric Box */ .metrics .card { /* Internal Layout */ display: flex; flex-direction: column; justify-content: center; /* Styling */ background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid #212735; border-radius: var(--radius); padding: 18px 20px; box-sizing: border-box; /* Ensures padding doesn't break width */ /* 📱 MOBILE DEFAULT: Full Width (Stack Vertically) */ flex: 1 1 100% !important; /* Grow, Shrink, Basis */ max-width: 100% !important; } /* ========================================= TABLETS (iPad, Large Phones Landscape) Trigger at 600px+ ========================================= */ @media (min-width: 600px) { .metrics .card { /* 2 Columns: 50% minus the gap space */ flex: 1 1 calc(50% - 20px) !important; max-width: calc(50% - 10px) !important; } } /* ========================================= DESKTOPS (Laptops, Monitors) Trigger at 1200px+ ========================================= */ @media (min-width: 1200px) { .metrics .card { /* 4 Columns: 25% minus the gap space */ flex: 1 1 calc(25% - 20px) !important; max-width: calc(25% - 15px) !important; } } .card-controls { display: flex; gap: 10px; margin-bottom: 15px; } .card-controls .select { flex: 1; height: 30px; font-size: 12px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: var(--transition); position: relative; } .card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--card-shadow-hover); } .metric-label { color: #9fb1c7; font-size: 14px } .metric-val { font-size: 28px; font-weight: 800; color: #67b2ff; margin-top: 8px } .bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; box-shadow: var(--card-shadow); } .group { display: flex; align-items: center; gap: 8px; } .label { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .select, .btn { height: 36px; border-radius: 10px; border: 1px solid #263048; background: #12192b; color: #e6edf6; padding: 0 12px; font-size: 14px; } .select { height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 0 28px 0 10px; font-size: 13px; font-weight: 400; cursor: pointer; transition: var(--transition); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-position: calc(100% - 10px) center; background-repeat: no-repeat; background-size: 8px; } .select:focus, .select:hover { outline: none; border-color: var(--brand); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .btn { height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); padding: 0 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; letter-spacing: -0.01em; white-space: nowrap; } .btn:hover { background: var(--surface); border-color: rgba(255, 255, 255, 0.12); color: var(--text); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .btn.primary { background: var(--brand); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3); } .btn:active { transform: translateY(0); } .btn.primary:hover { background: var(--brand-hover); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .btn.success { background: var(--ok); border-color: transparent; color: #fff; font-weight: 600; } .btn.success:hover { background: #059669; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } input[type="file"] { display: none } .file-label { border: 1px dashed #2d3a54; background: #12192b; color: #cfe1ff; padding: 8px 12px; border-radius: 10px; cursor: pointer; height: 36px; display: inline-flex; align-items: center; gap: 8px; } .panel { position: relative; } .panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: var(--text); font-weight: 600; font-size: 14px; } .panel .head .controls { display: flex; gap: 8px; align-items: center; } .plot { width: 100%; height: 400px; border-radius: 12px; border: 1px solid #202a3a; background: linear-gradient(180deg, #101625, #0c121f); overflow: hidden; } .grid { display: grid; grid-template-columns: 1fr; /* Mobile: 1 column */ gap: 18px; margin-top: 18px; } .grid .plot { height: 340px; } /* --- RESPONSIVE BREAKPOINTS --- */ /* Tablets and up */ /* @media (min-width: 640px) { .metrics { grid-template-columns: repeat(2, 1fr); } } */ /* Desktops and up */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* Large desktops */ /* @media (min-width: 1280px) { .metrics { grid-template-columns: repeat(4, 1fr); } } */ @media print { .card, .panel, .plot, .grid, .metrics { break-inside: avoid; page-break-inside: avoid; } } /* Mobile specific sidebar */ @media (max-width: 768px) { #mobile-toggle { display: flex; } .wrap { display: block; } .sidebar { position: fixed; width: 220px; transform: translateX(-100%); transition: transform 0.3s ease-in-out; align-items: flex-start; } .sidebar.is-open { transform: translateX(0); } .sidebar.is-open .brand span, .sidebar.is-open .navbtn span { display: inline; } .sidebar.is-open .auth-status { display: block; } } .card-controls { display: flex; gap: 10px; margin-bottom: 15px; } .card-controls .select { flex: 1; height: 30px; font-size: 12px; } /* --- PROMO MODAL STYLES --- */ /* === MODALS === */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease; } .modal-card { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); width: 90%; max-width: 420px; padding: 28px; border-radius: var(--radius-lg); animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .modal-icon { font-size: 40px; margin-bottom: 15px; } .modal-title { color: var(--text); font-size: 18px; margin: 0 0 8px 0; font-weight: 700; letter-spacing: -0.02em; } .modal-text { color: var(--muted-2); font-size: 14px; line-height: 1.6; margin-bottom: 24px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* .modal-text strong { color: #00e676; } */ .modal-buttons { display: flex; gap: 15px; justify-content: center; } .icon-btn { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); transform: translateY(-1px); } /* --- 1. FILE UPLOAD (Cyan Glow) --- */ .file-label { background: transparent; border: 1px solid #00bcd4; /* Cyan */ color: #00bcd4; border-radius: 10px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; opacity: 0.8; } .file-label:hover { opacity: 1; background: rgba(0, 188, 212, 0.15); box-shadow: 0 0 12px rgba(0, 188, 212, 0.4); transform: translateY(-1px); } .upload-box { display: inline-flex; align-items: center; /* Brighter default border to grab attention */ border: 1px solid #00bcd4; /* Subtle pulsing background to say "Click Me" */ background: rgba(0, 188, 212, 0.08); border-radius: 10px; padding: 0 14px; height: 38px; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 0 10px rgba(0, 188, 212, 0.1); /* Soft glow */ } /* Hover: Becomes very bright */ .upload-box:hover { background: rgba(0, 188, 212, 0.15); box-shadow: 0 0 15px rgba(0, 188, 212, 0.3); transform: translateY(-1px); } /* The "Upload" Label */ .upload-box .box-label { font-size: 11px; text-transform: uppercase; color: #6c757d; font-weight: 700; margin-right: 12px; padding-right: 12px; border-right: 1px solid rgba(0, 188, 212, 0.3); height: 20px; display: flex; align-items: center; } /* The Action Text */ .upload-box .file-label-text { color: #00bcd4; /* Bright Cyan */ font-size: 14px; font-weight: 700; /* Bold text to stand out */ display: flex; align-items: center; gap: 8px; } /* --- 4. Label Text (e.g. "Upload", "Views") --- */ .group .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; /* Muted Grey */ margin-right: 8px; font-weight: 700; } /* Sheet Selector Modal Styles */ .sheet-btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; background: #1b1f2a; border: 1px solid #2d3a54; color: #cfe5ff; border-radius: 8px; cursor: pointer; text-align: left; transition: all 0.2s; } .sheet-btn:hover { background: #1E90FF; color: white; border-color: #1E90FF; } /* === AI TOOL BUTTONS === */ #btnHealth, #btnClean, #btnForecast { background: transparent; border-radius: var(--radius-sm); height: 34px; padding: 0 12px; font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; border-width: 1px; border-style: solid; letter-spacing: -0.01em; } #btnHealth { border-color: rgba(16, 185, 129, 0.35); color: var(--ok); } #btnClean { border-color: rgba(245, 158, 11, 0.35); color: var(--warn); } #btnForecast { border-color: rgba(139, 92, 246, 0.35); color: #8b5cf6; } #btnHealth:hover { background: rgba(16, 185, 129, 0.08); border-color: var(--ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); transform: translateY(-1px); } #btnClean:hover { background: rgba(245, 158, 11, 0.08); border-color: var(--warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08); transform: translateY(-1px); } #btnForecast:hover { background: rgba(139, 92, 246, 0.08); border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.08); transform: translateY(-1px); } #btnHealth:disabled, #btnClean:disabled, #btnForecast:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; } /* --- 5. Modal Clean Button (Solid) --- */ #modalBtnClean { background: #f59e0b; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: background 0.2s; } #modalBtnClean:hover { background: #d97706; /* Darker orange */ } /* --- 1. Base Styles for Download Button --- */ #btnDownload { background: transparent; border-radius: 10px; height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0.7; /* Starts slightly dimmed */ transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; border-width: 1px; border-style: solid; } /* --- 2. Shared Hover Animation --- */ #btnDownload:hover { opacity: 1; /* Fully bright on hover */ transform: translateY(-1px); /* Slight lift */ } /* --- 3. Specific Color & Glow (CYAN) --- */ #btnDownload { border-color: #00bcd4; color: #00bcd4; } #btnDownload:hover { background: rgba(0, 188, 212, 0.15); /* Cyan Tint */ box-shadow: 0 0 12px rgba(0, 188, 212, 0.4); /* Cyan Glow */ } /* --- 4. Disabled State (When Saving) --- */ #btnDownload:disabled { border-color: #444; color: #666; cursor: not-allowed; background: transparent; box-shadow: none; transform: none; opacity: 0.5; } /* ========================================= 🛠️ EDIT LAYOUT BUTTON STYLE ========================================= */ /* 1. Base Button Style (Matches AI Tools) */ #toggle-edit-btn { background: transparent; border-radius: 10px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0.8; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; /* Rose/Pink Theme */ border: 1px solid #ff4757; color: #ff4757; } /* 2. Hover Effect (Glow & Lift) */ #toggle-edit-btn:hover { opacity: 1; transform: translateY(-1px); background: rgba(255, 71, 87, 0.15); /* Pink Tint */ box-shadow: 0 0 12px rgba(255, 71, 87, 0.4); /* Pink Glow */ } /* 3. Active State (When "Done Editing" is active) */ /* Note: Your JS sets inline background to green, which overrides this, but we add a border tweak here just in case */ body.edit-mode #toggle-edit-btn { border-color: #00e676 !important; color: #0f172a !important; /* Dark text for contrast on green bg */ box-shadow: 0 0 15px rgba(0, 230, 118, 0.5); } /* 1. The Red Delete Button (Hidden by default) */ .delete-widget-btn { display: none; /* Hidden until edit mode is active */ position: absolute; top: -12px; right: -12px; background: var(--danger); color: white; border: 3px solid var(--bg); /* Matches background to look like a "cutout" */ border-radius: 50%; width: 32px; height: 32px; cursor: pointer; z-index: 50; /* Above the chart */ font-size: 14px; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .delete-widget-btn:hover { transform: scale(1.15); } /* 2. Edit Mode Active State (Triggered by JS) */ body.edit-mode .delete-widget-btn { display: flex; /* Show the buttons */ animation: popIn 0.3s ease-out; } body.edit-mode .card { border: 1px dashed var(--muted); /* Visual cue that items are editable */ position: relative; /* Necessary for absolute positioning of the button */ } /* Animation for the button appearing */ @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* 3. The Bottom "Add Widget" Panel */ .add-widget-panel { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid #293245; padding: 20px; border-radius: var(--radius); box-shadow: var(--card-shadow); z-index: 2000; /* Above everything */ width: 360px; max-width: 90vw; color: var(--text); animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translate(-50%, 100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .add-widget-panel h3, .add-widget-panel h4 { margin: 0 0 16px 0; font-size: 16px; font-weight: 700; color: var(--text); text-align: center; } .add-widget-panel hr { border: 0; border-top: 1px solid #293245; margin: 16px 0; } /* 4. Widget List Items (Hidden/Deleted Graphs) */ .widget-item { background: var(--bg); padding: 12px 16px; margin-bottom: 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; font-weight: 500; transition: all 0.2s; } .widget-item:hover { background: var(--panel-2); border-color: var(--brand); color: var(--text); transform: translateX(4px); } /* 5. "Create New" Button (Green) */ .widget-item.create-new-btn { background: var(--ok); color: #fff; border: none; justify-content: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .widget-item.create-new-btn:hover { background: #218838; color: #fff; box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4); transform: translateY(-2px); } /* 6. Close Button inside Panel */ .add-widget-panel button { width: 100%; margin-top: 8px; background: var(--panel-2); border: 1px solid #293245; color: var(--muted); padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.2s; } .add-widget-panel button:hover { background: var(--bg); color: var(--text); border-color: var(--muted); } /* ========================================= DYNAMIC GRAPHS CONTAINER STYLES ========================================= */ #dynamic-graphs-container { display: grid; grid-template-columns: 1fr; /* Default to 1 column (Mobile) */ gap: 18px; /* Match your existing .grid gap */ margin-top: 24px; /* Space ABOVE the new graphs */ margin-bottom: 50px; margin-left: 24px; margin-right: 24px; width: auto; } /* Desktop View: Switch to 2 columns to match other charts */ @media (min-width: 1024px) { #dynamic-graphs-container { grid-template-columns: repeat(2, 1fr); } } /* Optional: Ensure footer has breathing room */ footer { margin-top: 30px; padding: 20px 0; border-top: 1px solid #202533; text-align: center; color: var(--muted); font-size: 14px; } /* GRAPH EDITOR TOOLBAR */ /* The Toolbar Container (Hidden by default) */ .graph-editor-toolbar { display: none; /* Hidden */ background: var(--panel-2); border-bottom: 1px solid #293245; padding: 10px; gap: 10px; align-items: center; flex-wrap: wrap; animation: slideDown 0.2s ease-out; margin-bottom: 0; /* Sits tight against the header */ } /* When active, we show it */ .graph-editor-toolbar.active { display: flex; } /* Style for the Selectors inside the toolbar */ .graph-editor-toolbar .select { height: 32px; font-size: 13px; min-width: 120px; border: 1px solid #334155; background: var(--bg); } .graph-editor-toolbar label { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 4px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Update the Card Head to remove the old controls area */ .panel .head { border-bottom: none; /* Remove line if it existed */ padding-bottom: 0; } .modal-content { background: var(--panel); border: 1px solid #293245; width: 360px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); color: var(--text); animation: popIn 0.2s ease-out; } .modal-header { background: var(--panel-2); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #293245; border-radius: 12px 12px 0 0; } .modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); } .close-btn { background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; } .close-btn:hover { color: #fff; } .modal-body { padding: 20px; } .control-group { margin-bottom: 15px; } .control-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .control-group input[type="text"] { width: 100%; background: var(--bg); border: 1px solid #293245; color: var(--text); padding: 10px; border-radius: 8px; font-size: 14px; outline: none; } .control-group input[type="text"]:focus { border-color: var(--brand); } .checkbox-group { display: flex; align-items: center; gap: 10px; cursor: pointer; } .checkbox-group input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .checkbox-group label { margin: 0; cursor: pointer; color: var(--text); } .modal-footer { padding: 15px 20px; background: var(--panel-2); display: flex; justify-content: flex-end; gap: 10px; border-radius: 0 0 12px 12px; border-top: 1px solid #293245; } .btn-save { background: var(--brand); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; } .btn-save:hover { filter: brightness(1.1); } .btn-cancel { background: transparent; border: 1px solid #293245; color: var(--muted); padding: 8px 16px; border-radius: 6px; cursor: pointer; } .btn-cancel:hover { background: var(--bg); color: var(--text); } @keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Animations */ @keyframes popUp { to { transform: scale(1); } } /* Modern Choice Cards */ .clean-option-card { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .clean-option-card:hover { background: #2d3a54; border-color: #1E90FF; transform: translateY(-2px); } .clean-option-card h3 { color: #fff; margin: 10px 0 5px 0; font-size: 16px; } .clean-option-card p { color: #94a3b8; font-size: 12px; margin: 0; line-height: 1.4; } .icon-box { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 10px auto; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 🧱 GRID LAYOUT FOR TOOLS */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 10px 0; } .tool-tile { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tool-tile:hover { background: #2d3a54; border-color: #1E90FF; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .tool-tile i { font-size: 24px; margin-bottom: 5px; } .tool-tile span { font-size: 12px; color: #cbd5e1; font-weight: 500; } /* Section Dividers */ .grid-section-title { grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: bold; margin-top: 10px; border-bottom: 1px solid #334155; padding-bottom: 5px; } /* --- UNIVERSAL ALERT STYLING --- */ .alert-card { max-width: 400px; text-align: center; border: 1px solid #334155; background: #0f172a; /* Deep Blue Theme */ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); } .alert-icon { font-size: 50px; margin-bottom: 15px; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Alert Text Styling */ #u-alert-msg { color: #b9c7dd; font-size: 14px; line-height: 1.5; margin-bottom: 25px; } /* Animation for the Icon */ @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } .smart-card { position: relative; overflow: visible; /* Allow popup to overflow if needed */ } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .settings-btn { opacity: 0.5; transition: 0.3s; } .smart-card:hover .settings-btn { opacity: 1; } .card-settings { position: absolute; top: 100%; left: 0; width: 100%; background: #1b1f2a; border: 1px solid #334155; padding: 15px; z-index: 100; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .full-width { width: 100%; margin-bottom: 8px; } .modal-card h3 { color: #a55eea; /* Purple highlight */ margin-top: 0; font-size: 22px; border-bottom: 1px solid #334155; padding-bottom: 10px; margin-bottom: 15px; } .modal-card p { line-height: 1.6; color: #cbd5e1; font-size: 15px; margin-bottom: 12px; } .modal-actions { margin-top: 25px; padding: 15px; background: #0f172a; border-radius: 10px; border-left: 4px solid #a55eea; } .modal-close-btn { margin-top: 20px; width: 100%; padding: 12px; background: #a55eea; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 16px; transition: background 0.2s; } .modal-close-btn:hover { background: #8e44ad; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Dropdown Menu Container (Hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #1e293b; /* Dark Card Background */ min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5); /* Deep Shadow */ z-index: 1000; border: 1px solid #334155; border-radius: 8px; margin-top: 5px; overflow: hidden; /* Keeps border-radius clean */ } /* Links inside the dropdown */ .dropdown-content a { color: #e2e8f0; /* Light Text */ padding: 12px 16px; text-decoration: none; display: flex; align-items: center; gap: 10px; font-size: 14px; transition: background 0.2s; font-family: 'Helvetica', sans-serif; } /* Hover Effect */ .dropdown-content a:hover { background-color: #334155; /* Lighter Grey on Hover */ color: #ffffff; } /* Icons inside the links */ .dropdown-content a i { width: 20px; /* Aligns icons neatly */ color: #3b82f6; /* Blue Accent Color */ } /* The toggle class to show the menu */ .show-menu { display: block; animation: fadeIn 0.2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* --- DOWNLOAD / EXPORT BUTTON (Bright Blue) --- */ .btn-primary { background: var(--brand-subtle); border: 1px solid var(--brand-border); color: var(--brand); border-radius: var(--radius-sm); height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); white-space: nowrap; letter-spacing: -0.01em; } /* Hover Effect: Blue Glow */ .btn-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35); } .btn-primary:active { transform: translateY(0); } /* === FILE UPLOAD PANEL === */ .upload-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; transition: var(--transition); } .upload-panel:hover { border-color: rgba(255, 255, 255, 0.1); } /* Analyze button special state */ #btn-upload-files { background: var(--ok) !important; color: #fff !important; border: none !important; font-weight: 600 !important; letter-spacing: -0.01em !important; box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important; transition: var(--transition) !important; } #btn-upload-files:hover { background: #059669 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important; } /* Join type select */ #join-type-select { border-color: rgba(16, 185, 129, 0.3) !important; color: var(--ok) !important; } #join-type-select:focus { border-color: var(--ok) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important; } /* Active/Open State (When menu is open) */ .show-menu .btn-primary { background: rgba(59, 130, 246, 0.25); box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); } /* --- DROPDOWN MENU STYLING --- */ .dropdown-content { display: none; position: absolute; top: 100%; /* Pushes it directly below the button */ left: 0; margin-top: 8px; background-color: #1b1f2a; /* Matches your sheet-btn background */ min-width: 240px; box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5); border: 1px solid #2d3a54; /* Matches your sheet-btn border */ border-radius: 10px; /* Consistent rounding */ z-index: 1000; overflow: hidden; animation: fadeIn 0.2s ease-in-out; } /* Menu Items */ .dropdown-content a { color: #cfe5ff; /* Matches sheet-btn text */ padding: 12px 16px; text-decoration: none; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; transition: all 0.2s; border-bottom: 1px solid rgba(45, 58, 84, 0.5); } /* Last item has no border */ .dropdown-content a:last-child { border-bottom: none; } /* Hover on Menu Items */ .dropdown-content a:hover { background: #3b82f6; /* Solid Blue on Hover */ color: #ffffff; padding-left: 20px; /* Subtle "slide right" animation */ } /* Icons inside menu */ .dropdown-content a i { font-size: 14px; width: 20px; text-align: center; opacity: 0.8; } .dropdown-content a:hover i { opacity: 1; color: #fff; } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Utility to show menu */ .show-menu { display: block; } /* --- 1. DEFAULT STATE (Hidden) --- */ #tools-section { display: none !important; /* Forces it to be hidden initially */ } /* --- 2. ACTIVE STATE (Desktop) --- */ /* We will add this class via JavaScript when file is uploaded */ #tools-section.tools-active { display: flex !important; /* Desktop: Flex row */ } /* --- 3. ACTIVE STATE (Mobile) --- */ @media screen and (max-width: 768px) { #tools-section.tools-active { display: grid !important; /* Mobile: Grid layout */ grid-template-columns: 1fr 1fr; /* 2 Columns */ gap: 10px; height: auto; padding-bottom: 10px; } /* Hide the "Tools:" label on mobile */ #tools-section.tools-active .label { display: none; } /* Full width buttons */ #tools-section.tools-active .btn, #tools-section.tools-active .btn-primary { width: 100%; margin: 0; } /* Full width dropdown */ #tools-section.tools-active .dropdown { grid-column: 1 / -1; width: 100%; } } /* --- MOBILE CHART FIXES --- */ @media screen and (max-width: 768px) { /* 1. Force the Main Dashboard Grid to be 1 Column */ .dashboard-container, .main-content, .grid-row, .charts-row { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; /* Critical: allows flex items to shrink */ padding: 5px !important; box-sizing: border-box !important; } /* 2. Fix the Cards (Sales Trend, Profit Trend, etc.) */ .card, .panel, .smart-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* Fixes "overflow" issue */ margin: 0 0 15px 0 !important; /* Remove side margins, add bottom spacing */ box-sizing: border-box !important; } /* 3. Fix the Plotly Graph Container */ .plot, .plotly-graph-div { width: 100% !important; /* Remove fixed height on mobile if needed, or adjust it */ min-width: 0 !important; } /* 4. Fix Scatter & Overlay Specifics */ #sales-trend, #profit-trend, #overlay-plot, #scatter-plot { padding: 0 !important; /* Remove extra padding inside chart area */ } } /* --- AI OVERLAY BACKDROP --- */ .ai-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 17, 21, 0.85); /* Dark dim */ /* backdrop-filter: blur(8px); */ /* The "Glass" effect */ z-index: 2000; display: none; /* Hidden by default */ justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } /* Active State */ .ai-overlay.open { display: flex; opacity: 1; } /* --- THE COMMAND BOX --- */ .ai-command-box { width: 700px; /* Wide and spacious */ height: 80vh; /* Tall */ max-height: 800px; background: #151921; border: 1px solid #334155; border-radius: 16px; box-shadow: 0 0 50px rgba(165, 94, 234, 0.15); /* Purple ambient glow */ display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-overlay.open .ai-command-box { transform: scale(1); } /* --- HEADER --- */ .ai-cmd-header { padding: 20px 25px; border-bottom: 1px solid #2d3a54; display: flex; justify-content: space-between; align-items: center; background: #1b1f2a; } .ai-brand { display: flex; align-items: center; gap: 15px; } .ai-icon-glow { width: 40px; height: 40px; background: rgba(165, 94, 234, 0.2); color: #a55eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 15px rgba(165, 94, 234, 0.4); /* Glowing Brain */ } .ai-title { font-weight: 800; font-size: 14px; letter-spacing: 1px; color: #fff; } .ai-subtitle { font-size: 11px; color: #00e676; text-transform: uppercase; font-weight: 600; } .ai-close-btn { background: none; border: none; color: #64748b; font-size: 20px; cursor: pointer; transition: 0.2s; } .ai-close-btn:hover { color: #fff; transform: rotate(90deg); } /* --- BODY (CHAT) --- */ .ai-cmd-body { flex: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; background: #0f1115; /* Darker inner bg */ } /* Messages */ .ai-message { display: flex; gap: 15px; max-width: 85%; animation: fadeIn 0.3s; } .ai-message.user { align-self: flex-end; flex-direction: row-reverse; } .msg-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bot .msg-icon { background: #2d3a54; color: #a55eea; } .user .msg-icon { background: #a55eea; color: #fff; display: none; /* Hide user icon for cleaner look */ } .msg-content { background: #1e293b; padding: 12px 18px; border-radius: 12px; color: #e2e8f0; font-size: 15px; line-height: 1.6; border: 1px solid #334155; } .user .msg-content { background: #a55eea; color: #fff; border: none; border-radius: 12px 12px 0 12px; } /* Suggestion Chips */ .ai-suggestions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .ai-suggestions span { background: #151921; border: 1px solid #a55eea; color: #a55eea; padding: 8px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: all 0.2s; } .ai-suggestions span:hover { background: #a55eea; color: #fff; } /* --- FOOTER --- */ .ai-cmd-footer { padding: 20px; background: #1b1f2a; border-top: 1px solid #2d3a54; } .input-wrapper { position: relative; background: #0f1115; border: 1px solid #334155; border-radius: 12px; display: flex; align-items: center; padding: 5px; transition: border 0.2s; } .input-wrapper:focus-within { border-color: #a55eea; box-shadow: 0 0 10px rgba(165, 94, 234, 0.2); } .input-icon { margin-left: 15px; color: #a55eea; } #ai-user-input { flex: 1; background: transparent; border: none; color: #fff; padding: 15px; font-size: 16px; outline: none; } .cmd-send-btn { width: 40px; height: 40px; background: #334155; color: #94a3b8; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; } .input-wrapper:focus-within .cmd-send-btn { background: #a55eea; color: white; } .ai-disclaimer { text-align: center; color: #64748b; font-size: 11px; margin-top: 10px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* --- 🤖 ASK AI AGENT BUTTON (Hidden by Default) --- */ /* --- AI Agent Button (Hidden by default) --- */ #btnFullBrain { display: none; /* KEY FIX: Hidden until file upload */ } /* --- The Premium AI Button Styling --- */ .ai-glow-btn { display: flex; /* Will be applied when unhidden by JS */ align-items: center; justify-content: center; gap: 8px; /* Colors & Border */ background: rgba(165, 94, 234, 0.1); /* Very transparent purple background */ color: #a55eea; /* Crisp purple text */ border: 2px solid #a55eea; border-radius: 12px; padding: 8px 16px; /* Typography */ font-weight: 600; font-size: 14px; letter-spacing: 0.5px; /* Smooth animations */ cursor: pointer; transition: all 0.3s ease-in-out; /* The continuous subtle pulse */ animation: aiPulse 2.5s infinite; } /* --- Hover State (Fills with color and lifts up) --- */ .ai-glow-btn:hover { background: #a55eea; /* Solid purple fill */ color: #ffffff; /* Text turns white */ border-color: #a55eea; box-shadow: 0 4px 15px rgba(165, 94, 234, 0.5); /* Stronger neon glow */ transform: translateY(-2px); /* Lifts up slightly */ animation: none; /* Stop the pulse when hovering */ } /* --- The Pulse Animation Logic --- */ @keyframes aiPulse { 0% { box-shadow: 0 0 5px rgba(165, 94, 234, 0.2); } 50% { box-shadow: 0 0 15px rgba(165, 94, 234, 0.6); /* Glow expands */ } 100% { box-shadow: 0 0 5px rgba(165, 94, 234, 0.2); } } /* --- 🧠 CYBER PROMPT OVERLAY --- */ .cyber-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 13, 17, 0.85); /* Dark Dim */ /* backdrop-filter: blur(8px); */ /* Blur Effect */ z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .cyber-box { background: #151921; width: 450px; padding: 30px; border-radius: 16px; border: 1px solid #334155; box-shadow: 0 0 40px rgba(165, 94, 234, 0.15); /* Purple Glow */ transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; gap: 20px; } /* Active State for Animation */ .cyber-overlay.open { opacity: 1; } .cyber-overlay.open .cyber-box { transform: scale(1); } /* Header */ .cyber-header { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #2d3a54; padding-bottom: 15px; } .cyber-icon { width: 40px; height: 40px; background: rgba(165, 94, 234, 0.15); color: #a55eea; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .cyber-title { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; } .cyber-subtitle { color: #00e676; font-size: 11px; font-weight: 600; text-transform: uppercase; } /* Input Field */ .cyber-input { width: 100%; background: #0f1115; border: 1px solid #334155; color: #fff; padding: 14px; border-radius: 10px; font-size: 15px; outline: none; transition: border 0.2s, box-shadow 0.2s; box-sizing: border-box; /* Fixes padding issues */ } .cyber-input:focus { border-color: #a55eea; box-shadow: 0 0 10px rgba(165, 94, 234, 0.2); } /* Buttons */ .cyber-actions { display: flex; gap: 12px; margin-top: 5px; } .cyber-btn { flex: 1; padding: 12px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; } .cyber-btn.cancel { background: transparent; border: 1px solid #475569; color: #94a3b8; } .cyber-btn.cancel:hover { background: rgba(255, 255, 255, 0.05); color: white; } .cyber-btn.confirm { background: #a55eea; border: none; color: white; } .cyber-btn.confirm:hover { background: #9b4dca; box-shadow: 0 0 15px rgba(165, 94, 234, 0.4); } /* === KPI CARD UPGRADE === */ .smart-card { position: relative; overflow: visible; transition: var(--transition); } .smart-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); border-radius: var(--radius) var(--radius) 0 0; opacity: 0; transition: var(--transition); } .smart-card:hover::before { opacity: 1; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .metric-val { font-size: 30px; font-weight: 800; color: var(--text); margin: 0 0 6px 0; letter-spacing: -0.03em; line-height: 1.1; } .metric-label { font-size: 12px; color: var(--muted); font-weight: 400; } .settings-btn { opacity: 0; transition: var(--transition); color: var(--muted); } .smart-card:hover .settings-btn { opacity: 1; }