/* ===================================================== DataVault — Premium CSS Design System ===================================================== */ /* ---------- CSS Custom Properties ---------- */ :root { /* Brand Colors */ --brand-primary: #6366f1; --brand-secondary: #8b5cf6; --brand-accent: #06b6d4; --brand-success: #10b981; --brand-warning: #f59e0b; --brand-danger: #ef4444; --brand-info: #3b82f6; /* Gradients */ --grad-primary: linear-gradient(135deg, #6366f1, #8b5cf6); --grad-success: linear-gradient(135deg, #10b981, #059669); --grad-danger: linear-gradient(135deg, #ef4444, #dc2626); --grad-warning: linear-gradient(135deg, #f59e0b, #d97706); --grad-accent: linear-gradient(135deg, #06b6d4, #0284c7); --grad-dark: linear-gradient(160deg, #0f0f23 0%, #1a1a3e 50%, #0f172a 100%); /* ---- Dark theme (default) ---- */ --bg-base: #0a0a1a; --bg-surface: #111128; --bg-card: rgba(255,255,255,0.04); --bg-card-hover: rgba(255,255,255,0.07); --bg-glass: rgba(255,255,255,0.06); --bg-glass-hover: rgba(255,255,255,0.1); --bg-input: rgba(255,255,255,0.07); --bg-input-focus: rgba(255,255,255,0.1); --bg-sidebar: rgba(10,10,30,0.95); --bg-topbar: rgba(10,10,26,0.75); --bg-modal: rgba(17,17,40,0.98); --bg-login-card: rgba(17,17,40,0.85); --bg-overlay: rgba(0,0,0,0.7); --bg-thead: rgba(255,255,255,0.02); --bg-row-hover: rgba(255,255,255,0.025); --bg-skeleton-hi: rgba(255,255,255,0.07); --sheen: rgba(255,255,255,0.15); --inset-hilite: rgba(255,255,255,0.08); --badge-on-accent:rgba(255,255,255,0.25); --scrollbar-thumb: rgba(255,255,255,0.12); --scrollbar-thumb-hover: rgba(255,255,255,0.2); --orb-opacity: 0.25; --grid-line: rgba(99,102,241,0.04); /* Accent foregrounds for tinted chips, badges and icons */ --fg-indigo: #a5b4fc; --fg-emerald: #6ee7b7; --fg-cyan: #67e8f9; --fg-red: #fca5a5; --fg-amber: #fde68a; --fg-slate: #94a3b8; /* Text */ --text-primary: #f0f0ff; --text-secondary: #9898c8; --text-muted: #5a5a8a; --text-inverse: #0a0a1a; /* Borders */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.1); --border-strong: rgba(255,255,255,0.18); --border-focus: rgba(99,102,241,0.7); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 32px rgba(0,0,0,0.4); --shadow-lg: 0 20px 60px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(99,102,241,0.25); --shadow-card: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 var(--inset-hilite); /* Layout */ --sidebar-w: 260px; --topbar-h: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 9999px; /* Animation */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; } /* ---------- Light theme ---------- Set by theme.js on . Only colour tokens are overridden — radii, easing and brand hues stay shared with dark. */ :root[data-theme="light"] { --grad-dark: linear-gradient(160deg, #eef1fb 0%, #e9ecfa 50%, #f5f6fc 100%); --bg-base: #f3f4fb; --bg-surface: #ffffff; --bg-card: rgba(15,23,42,0.028); --bg-card-hover: rgba(15,23,42,0.055); --bg-glass: rgba(255,255,255,0.75); --bg-glass-hover: rgba(255,255,255,0.9); --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-sidebar: rgba(255,255,255,0.94); --bg-topbar: rgba(255,255,255,0.8); --bg-modal: #ffffff; --bg-login-card: rgba(255,255,255,0.92); --bg-overlay: rgba(15,23,42,0.4); --bg-thead: rgba(15,23,42,0.03); --bg-row-hover: rgba(99,102,241,0.05); --bg-skeleton-hi: rgba(15,23,42,0.06); --sheen: rgba(255,255,255,0.35); --inset-hilite: rgba(255,255,255,0.9); --badge-on-accent:rgba(255,255,255,0.35); --scrollbar-thumb: rgba(15,23,42,0.18); --scrollbar-thumb-hover: rgba(15,23,42,0.3); --orb-opacity: 0.16; --grid-line: rgba(99,102,241,0.07); --fg-indigo: #4338ca; --fg-emerald: #047857; --fg-cyan: #0e7490; --fg-red: #b91c1c; --fg-amber: #b45309; --fg-slate: #475569; --text-primary: #171a33; --text-secondary: #4c5075; --text-muted: #7b7fa3; --text-inverse: #ffffff; --border-subtle: rgba(15,23,42,0.08); --border-default: rgba(15,23,42,0.13); --border-strong: rgba(15,23,42,0.24); --shadow-sm: 0 1px 3px rgba(15,23,42,0.08); --shadow-md: 0 8px 28px rgba(15,23,42,0.12); --shadow-lg: 0 20px 50px rgba(15,23,42,0.16); --shadow-glow: 0 0 40px rgba(99,102,241,0.12); --shadow-card: 0 2px 12px rgba(15,23,42,0.07), inset 0 1px 0 var(--inset-hilite); } /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, select, textarea { font-family: inherit; } ul, ol { list-style: none; } /* ===================================================== BACKGROUND ANIMATION ===================================================== */ .bg-animation { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--grad-dark); } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--orb-opacity); animation: orbFloat 12s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; background: #6366f1; top: -200px; left: -200px; animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; background: #8b5cf6; bottom: -150px; right: -150px; animation-delay: -4s; } .orb-3 { width: 400px; height: 400px; background: #06b6d4; top: 40%; left: 60%; transform: translate(-50%,-50%); animation-delay: -8s; } @keyframes orbFloat { 0%, 100% { transform: translateY(0) scale(1); } 33% { transform: translateY(-30px) scale(1.05); } 66% { transform: translateY(20px) scale(0.97); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent); } /* ===================================================== LOGIN PAGE ===================================================== */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-container { position: relative; z-index: 10; width: 100%; max-width: 440px; padding: 1.5rem; } .login-card { background: var(--bg-login-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow-lg), var(--shadow-glow), inset 0 1px 0 var(--inset-hilite); animation: cardReveal 0.5s var(--ease-bounce); } @keyframes cardReveal { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-header { text-align: center; margin-bottom: 2rem; } .logo-wrap { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; } .logo-icon { width: 40px; height: 40px; flex-shrink: 0; } .logo-icon svg { width: 100%; height: 100%; } .logo-text { font-size: 1.5rem; font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .login-title { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.4rem; letter-spacing: -0.5px; } .login-subtitle { font-size: 0.9rem; color: var(--text-secondary); } /* Form */ .login-form { display: flex; flex-direction: column; gap: 1.1rem; } .form-group { display: flex; flex-direction: column; gap: 0.45rem; } .form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .input-wrap { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; z-index: 1; } .form-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.6rem; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.95rem; transition: border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base); outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { border-color: var(--border-focus); background: var(--bg-input-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 0 20px rgba(99,102,241,0.1); } .toggle-pw { position: absolute; right: 12px; color: var(--text-muted); padding: 4px; transition: color var(--duration-fast); z-index: 1; } .toggle-pw:hover { color: var(--text-secondary); } .eye-icon { width: 18px; height: 18px; } .form-error { display: none; padding: 0.65rem 0.9rem; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius-sm); color: #fca5a5; font-size: 0.85rem; font-weight: 500; } .form-error.visible { display: block; } .btn-login { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.85rem 1.5rem; background: var(--grad-primary); color: white; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-base); box-shadow: 0 4px 20px rgba(99,102,241,0.4); margin-top: 0.4rem; position: relative; overflow: hidden; } .btn-login::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--sheen), transparent); opacity: 0; transition: opacity var(--duration-fast); } .btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,0.5); } .btn-login:hover::before { opacity: 1; } .btn-login:active { transform: translateY(0); } .btn-icon { width: 16px; height: 16px; } /* ===================================================== THEME TOGGLE ===================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); } .theme-toggle:hover { background: var(--bg-card-hover); border-color: var(--border-default); color: var(--text-primary); transform: translateY(-1px); } .theme-toggle svg { width: 17px; height: 17px; } /* Floating variant used on the login page */ .theme-toggle-float { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 50; background: var(--bg-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--border-default); } /* ===================================================== AUTH — SPLIT BRAND / SIGN-IN LAYOUT ===================================================== */ .auth-page { min-height: 100vh; display: flex; } .auth-shell { position: relative; z-index: 10; flex: 1; display: grid; /* minmax(0,…) so a long-word/min-content child can never widen the track */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 3rem; width: 100%; max-width: 1240px; margin: 0 auto; padding: 3rem 2rem; } /* ---------- Brand panel ---------- */ .auth-brand { min-width: 0; } .auth-brand-inner { max-width: 520px; animation: authFadeUp 0.6s var(--ease-smooth) both; } @keyframes authFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Override the inline-flex default so the eyebrow starts a new line */ .auth-brand .logo-wrap { display: flex; margin-bottom: 2rem; } .auth-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-indigo); background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 1.1rem; } .auth-title { font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: var(--text-primary); margin-bottom: 1rem; } .auth-title-accent { background: linear-gradient(120deg, #818cf8, #c084fc 45%, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-lede { font-size: 1rem; color: var(--text-secondary); max-width: 46ch; margin-bottom: 2rem; } .auth-features { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.25rem; } .auth-feature { display: flex; align-items: flex-start; gap: 0.9rem; } .auth-feature-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .auth-feature-icon svg { width: 18px; height: 18px; } .feat-indigo { background: rgba(99,102,241,0.15); color: var(--fg-indigo); } .feat-emerald { background: rgba(16,185,129,0.15); color: var(--fg-emerald); } .feat-cyan { background: rgba(6,182,212,0.15); color: var(--fg-cyan); } .auth-feature strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; } .auth-feature span span, .auth-feature > span:last-child { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; } .auth-stats { display: flex; gap: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); } .auth-stat { display: flex; flex-direction: column; } .auth-stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* ---------- Sign-in panel ---------- */ .auth-panel { display: flex; flex-direction: column; align-items: center; min-width: 0; } .auth-panel .login-card { position: relative; width: 100%; max-width: 420px; overflow: hidden; animation: cardReveal 0.55s var(--ease-bounce) 0.1s both; } /* Gradient hairline along the top edge of the card */ .auth-panel .login-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.9), rgba(34,211,238,0.7), transparent); } /* Compact brand inside the card — only when the brand panel is hidden */ .auth-card-brand { display: none; } .auth-card-brand-text { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-panel .login-header { margin-bottom: 1.75rem; } .auth-footnote { margin-top: 1.25rem; font-size: 0.76rem; color: var(--text-muted); text-align: center; max-width: 420px; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .auth-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2rem 1.25rem; align-items: center; justify-items: center; } .auth-brand { display: none; } .auth-card-brand { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); } .auth-card-brand .logo-icon { width: 34px; height: 34px; } } @media (max-width: 480px) { .auth-shell { padding: 1.25rem 1rem; } .auth-panel .login-card { padding: 1.75rem 1.35rem; } } /* ===================================================== ANALYSIS TOOLS ===================================================== */ /* Double class so this beats the generic `.modal` sizing declared later */ .modal.tool-runner-modal { max-width: 1080px; width: 96vw; height: 88vh; max-height: 88vh; display: flex; flex-direction: column; } .modal.tool-runner-modal .tool-runner-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; } .tool-runner-frame { width: 100%; height: 100%; border: 0; background: #0f1020; border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); } /* Cards on the Data Analysis dashboard */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; } .tool-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.25rem; transition: transform var(--duration-base) var(--ease-smooth), border-color var(--duration-base), background var(--duration-base); } .tool-card:hover { transform: translateY(-3px); background: var(--bg-card-hover); border-color: var(--border-strong); } .tool-card-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: rgba(99,102,241,0.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 0.85rem; } .tool-card-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; } .tool-card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; flex: 1; margin-bottom: 1rem; } /* ===================================================== WORKSPACE CHOOSER (user landing) ===================================================== */ .workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 860px; } .workspace-card { position: relative; overflow: hidden; text-align: left; width: 100%; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 2rem 1.75rem; transition: transform var(--duration-base) var(--ease-smooth), border-color var(--duration-base), box-shadow var(--duration-base); } .workspace-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .workspace-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ws-accent, var(--grad-primary)); } .workspace-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--ws-accent, var(--grad-primary)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .workspace-icon svg { width: 26px; height: 26px; color: #fff; } .workspace-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.4px; color: var(--text-primary); margin-bottom: 0.4rem; } .workspace-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 1.1rem; } .workspace-meta { display: flex; gap: 1.25rem; padding-top: 0.9rem; border-top: 1px solid var(--border-subtle); } .workspace-meta-item { display: flex; flex-direction: column; } .workspace-meta-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .workspace-meta-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 600; } .workspace-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 1.1rem; font-size: 0.85rem; font-weight: 700; color: var(--fg-indigo); } .workspace-cta svg { width: 15px; height: 15px; transition: transform var(--duration-base); } .workspace-card:hover .workspace-cta svg { transform: translateX(3px); } /* ===================================================== DASHBOARD LAYOUT ===================================================== */ .dashboard-page { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-sidebar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; z-index: 100; transition: transform var(--duration-base) var(--ease-smooth); overflow-y: auto; overflow-x: hidden; } .sidebar-header { display: flex; align-items: center; gap: 10px; padding: 1.25rem 1.2rem; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .sidebar-header .logo-icon { width: 34px; height: 34px; } .sidebar-header .logo-text { font-size: 1.25rem; } .sidebar-role-badge { margin: 0.8rem 1.2rem; padding: 0.45rem 0.8rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; flex-shrink: 0; } .role-admin { background: rgba(99,102,241,0.15); color: var(--fg-indigo); border: 1px solid rgba(99,102,241,0.25); } .role-user { background: rgba(16,185,129,0.15); color: var(--fg-emerald); border: 1px solid rgba(16,185,129,0.25); } .sidebar-nav { flex: 1; padding: 0.5rem 0.8rem; overflow-y: auto; } .nav-section-title { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; padding: 0.8rem 0.6rem 0.4rem; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; transition: all var(--duration-fast); cursor: pointer; position: relative; overflow: hidden; margin-bottom: 2px; border: 1px solid transparent; } .nav-item::before { content: ''; position: absolute; inset: 0; background: var(--grad-primary); opacity: 0; transition: opacity var(--duration-fast); border-radius: var(--radius-sm); } .nav-item:hover { color: var(--text-primary); background: var(--bg-card-hover); } .nav-item.active { color: white; background: var(--grad-primary); border-color: rgba(99,102,241,0.3); box-shadow: 0 4px 16px rgba(99,102,241,0.3); } .nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; position: relative; z-index: 1; } .nav-item .nav-label { position: relative; z-index: 1; } .nav-item .nav-badge { margin-left: auto; background: var(--brand-primary); color: white; font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); position: relative; z-index: 1; min-width: 20px; text-align: center; } .nav-item.active .nav-badge { background: var(--badge-on-accent); } .sidebar-footer { padding: 1rem 0.8rem; border-top: 1px solid var(--border-subtle); flex-shrink: 0; } .user-card { display: flex; align-items: center; gap: 10px; padding: 0.65rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 0.7rem; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: white; flex-shrink: 0; } .user-info { flex: 1; overflow: hidden; } .user-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 0.75rem; color: var(--text-muted); } .btn-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0.6rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-sm); color: var(--fg-red); font-size: 0.85rem; font-weight: 600; transition: background var(--duration-fast), border-color var(--duration-fast); } .btn-logout:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.35); } .btn-logout svg { width: 16px; height: 16px; } /* Main Content */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; } /* Topbar */ .topbar { height: var(--topbar-h); background: var(--bg-topbar); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 50; flex-shrink: 0; } .topbar-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); flex: 1; } .topbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 0.4rem 0.9rem; min-width: 220px; } .topbar-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; } .topbar-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.88rem; width: 100%; } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .topbar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast); } .topbar-btn:hover { background: var(--bg-card-hover); border-color: var(--border-default); color: var(--text-primary); } .topbar-btn svg { width: 17px; height: 17px; } /* Page Content */ .page-content { padding: 1.5rem; flex: 1; } .page { display: none; } .page.active { display: block; animation: pageIn 0.25s var(--ease-smooth); } @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Page Header */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; } .page-subtitle { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.2rem; } /* ===================================================== STAT CARDS ===================================================== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; position: relative; overflow: hidden; transition: transform var(--duration-base), border-color var(--duration-base), box-shadow var(--duration-base); cursor: default; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent, var(--grad-primary)); } .stat-card:hover { transform: translateY(-2px); border-color: var(--border-default); box-shadow: var(--shadow-card); } .stat-card-header { display: flex; align-items: center; justify-content: space-between; } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .stat-icon svg { width: 20px; height: 20px; color: white; } .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -1px; } .stat-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; } /* ===================================================== GENERIC CARD ===================================================== */ .card { background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); gap: 0.8rem; flex-wrap: wrap; } .card-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .card-body { padding: 1.25rem; } /* ===================================================== BUTTONS ===================================================== */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 0.55rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; transition: all var(--duration-fast); white-space: nowrap; } .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .btn-primary { background: var(--grad-primary); color: white; box-shadow: 0 2px 12px rgba(99,102,241,0.35); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99,102,241,0.45); } .btn-success { background: var(--grad-success); color: white; box-shadow: 0 2px 12px rgba(16,185,129,0.3); } .btn-success:hover { opacity: 0.9; transform: translateY(-1px); } .btn-danger { background: var(--grad-danger); color: white; box-shadow: 0 2px 12px rgba(239,68,68,0.3); } .btn-danger:hover { opacity: 0.9; transform: translateY(-1px); } .btn-ghost { background: var(--bg-card); border: 1px solid var(--border-default); color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-strong); } .btn-icon-only { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .btn-icon-only svg { width: 15px; height: 15px; } .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; } .btn-sm.btn-icon-only { width: 28px; height: 28px; } /* ===================================================== TABLES ===================================================== */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 0.7rem 1rem; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; background: var(--bg-thead); } td { padding: 0.8rem 1rem; font-size: 0.875rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg-row-hover); color: var(--text-primary); } .td-actions { display: flex; align-items: center; gap: 4px; } /* ===================================================== FILE TYPE ICONS + BADGE ===================================================== */ .file-icon-wrap { display: flex; align-items: center; gap: 10px; } .file-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; position: relative; overflow: hidden; } .file-type-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .file-name-text { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } /* ---------- File Category Colors ---------- */ /* Documents */ .ftype-pdf { background: rgba(239,68,68,0.15); color: #fca5a5; } .ftype-word { background: rgba(37,99,235,0.15); color: #93c5fd; } .ftype-excel{ background: rgba(16,185,129,0.15); color: #6ee7b7; } .ftype-ppt { background: rgba(251,146,60,0.15); color: #fdba74; } .ftype-txt { background: rgba(148,163,184,0.15); color: #cbd5e1; } /* Images */ .ftype-image{ background: rgba(236,72,153,0.15); color: #f9a8d4; } /* Audio/Video */ .ftype-audio{ background: rgba(139,92,246,0.15); color: #c4b5fd; } .ftype-video{ background: rgba(6,182,212,0.15); color: #67e8f9; } /* Code */ .ftype-code { background: rgba(234,179,8,0.15); color: #fde047; } /* GIS */ .ftype-gis { background: rgba(34,197,94,0.15); color: #86efac; } /* Archive */ .ftype-archive{ background: rgba(168,85,247,0.15); color: #d8b4fe; } /* Other */ .ftype-other{ background: rgba(100,116,139,0.15); color: #94a3b8; } /* ===================================================== MODAL ===================================================== */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.open { display: flex; animation: fadeIn var(--duration-fast); } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .modal { background: var(--bg-modal); backdrop-filter: blur(20px); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; animation: modalIn 0.25s var(--ease-bounce); } @keyframes modalIn { from { opacity:0; transform: scale(0.95) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); } .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast); } .modal-close:hover { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); } .modal-close svg { width: 15px; height: 15px; } .modal-body { padding: 1.5rem; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.7rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; } /* Modal Form */ .modal .form-group { margin-bottom: 1rem; } .modal .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.4rem; } .modal .form-input, .modal .form-select, .modal .form-textarea { width: 100%; padding: 0.65rem 0.9rem; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.88rem; outline: none; transition: border-color var(--duration-base), box-shadow var(--duration-base); } .modal .form-input:focus, .modal .form-select:focus, .modal .form-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .modal .form-select { appearance: none; } .modal .form-textarea { resize: vertical; min-height: 80px; } /* ===================================================== FILE UPLOAD DROP ZONE ===================================================== */ .drop-zone { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: all var(--duration-base); background: var(--bg-card); position: relative; } .drop-zone:hover, .drop-zone.drag-over { border-color: var(--brand-primary); background: rgba(99,102,241,0.06); } .drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .drop-zone-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .drop-zone-text { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.3rem; } .drop-zone-hint { font-size: 0.78rem; color: var(--text-muted); } .drop-zone-accent { color: var(--brand-primary); font-weight: 600; } /* ===================================================== FILE GRID VIEW ===================================================== */ .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .file-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; cursor: pointer; transition: all var(--duration-base); position: relative; overflow: hidden; } .file-card::before { content: ''; position: absolute; inset: 0; background: var(--grad-primary); opacity: 0; transition: opacity var(--duration-fast); } .file-card:hover { border-color: var(--border-default); transform: translateY(-2px); box-shadow: var(--shadow-card); } .file-card-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; position: relative; z-index: 1; } .file-card-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 1; } .file-card-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; } .file-card-actions { display: flex; gap: 5px; position: relative; z-index: 1; } /* ===================================================== VIEW TOGGLE ===================================================== */ .view-toggle { display: flex; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px; gap: 2px; } .view-toggle-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--duration-fast); } .view-toggle-btn svg { width: 15px; height: 15px; } .view-toggle-btn.active { background: var(--brand-primary); color: white; } .view-toggle-btn:hover:not(.active) { background: var(--bg-card-hover); color: var(--text-secondary); } /* ===================================================== TAGS / CHIPS ===================================================== */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.73rem; font-weight: 600; } .tag-primary { background: rgba(99,102,241,0.15); color: var(--fg-indigo); border: 1px solid rgba(99,102,241,0.2); } .tag-success { background: rgba(16,185,129,0.15); color: var(--fg-emerald); border: 1px solid rgba(16,185,129,0.2); } .tag-danger { background: rgba(239,68,68,0.15); color: var(--fg-red); border: 1px solid rgba(239,68,68,0.2); } .tag-warning { background: rgba(245,158,11,0.15); color: var(--fg-amber); border: 1px solid rgba(245,158,11,0.2); } .tag-muted { background: rgba(100,116,139,0.15); color: var(--fg-slate); border: 1px solid rgba(100,116,139,0.2); } /* ===================================================== TOAST NOTIFICATIONS ===================================================== */ .toast-container { position: fixed; top: 80px; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 0.75rem 1rem; background: var(--bg-modal); backdrop-filter: blur(12px); border-radius: var(--radius-md); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); min-width: 260px; max-width: 360px; animation: toastIn 0.3s var(--ease-bounce); pointer-events: all; } @keyframes toastIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } } @keyframes toastOut { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(20px); } } .toast.hide { animation: toastOut 0.25s forwards; } .toast-icon { width: 20px; height: 20px; flex-shrink: 0; } .toast-msg { flex:1; font-size: 0.87rem; font-weight: 500; color: var(--text-primary); } .toast.success { border-left: 3px solid var(--brand-success); } .toast.error { border-left: 3px solid var(--brand-danger); } .toast.warning { border-left: 3px solid var(--brand-warning); } .toast.info { border-left: 3px solid var(--brand-info); } /* ===================================================== BADGES / STATUS ===================================================== */ .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-active { background: var(--brand-success); box-shadow: 0 0 6px rgba(16,185,129,0.5); } .status-inactive { background: var(--text-muted); } /* ===================================================== PROGRESS BAR ===================================================== */ .progress-bar { height: 5px; background: var(--bg-card-hover); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; background: var(--grad-primary); border-radius: var(--radius-full); transition: width 0.5s var(--ease-smooth); } /* ===================================================== EMPTY STATE ===================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center; gap: 1rem; } .empty-icon { font-size: 3rem; opacity: 0.5; } .empty-title { font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); } .empty-desc { font-size: 0.88rem; color: var(--text-muted); max-width: 300px; } /* ===================================================== CONFIRM DELETE MODAL ===================================================== */ .confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(239,68,68,0.15); border: 2px solid rgba(239,68,68,0.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .confirm-icon svg { width: 28px; height: 28px; color: #fca5a5; } /* ===================================================== SECTION GRIDS ===================================================== */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } /* ===================================================== FILTERS BAR ===================================================== */ .filters-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; } .filter-chip { padding: 0.3rem 0.85rem; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-subtle); font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); transition: all var(--duration-fast); cursor: pointer; } .filter-chip:hover { border-color: var(--border-default); color: var(--text-primary); } .filter-chip.active { background: var(--grad-primary); border-color: transparent; color: white; } /* ===================================================== SKELETON LOADER ===================================================== */ @keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-skeleton-hi) 50%, var(--bg-card) 75%); background-size: 800px 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* ===================================================== SCROLLBAR ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ===================================================== SELECTION ===================================================== */ ::selection { background: rgba(99,102,241,0.3); } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 900px) { :root { --sidebar-w: 220px; } .two-col { grid-template-columns: 1fr; } .three-col { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { :root { --sidebar-w: 0px; } .sidebar { transform: translateX(-260px); width: 260px; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .topbar-search { display: none; } .stats-grid { grid-template-columns: 1fr 1fr; } .three-col { grid-template-columns: 1fr; } .files-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }