/* ============================================================ Vestinit Ventures — Portal Shared Stylesheet Dual-theme: dark (navy+green) / light (OurCrowd-inspired) Theme set via [data-theme="dark"|"light"] on Default: auto (prefers-color-scheme) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap'); /* ── Dark Theme Variables ── */ [data-theme="dark"] { --bg-base: #060E1C; --bg-surface: #091525; --bg-raised: #0D1E35; --bg-elevated: #122645; --bg-overlay: #1A3358; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text-primary: #FFFFFF; --text-secondary: #8B9AB0; --text-tertiary: #4A5568; --text-inverse: #060E1C; --accent: #4CAF50; --accent-hover: #3A9F3E; --accent-light: #5DC462; --accent-bg: rgba(76,175,80,0.10); --accent-border: rgba(76,175,80,0.25); --gold: #C9A84C; --gold-bg: rgba(201,168,76,0.10); --red: #E53E3E; --red-bg: rgba(229,62,62,0.10); --blue: #63B3ED; --blue-bg: rgba(66,153,225,0.10); --sidebar-width: 260px; --shadow: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 8px 32px rgba(0,0,0,0.55); --input-bg: #0D1E35; } /* ── Light Theme Variables (OurCrowd-inspired) ── */ [data-theme="light"] { --bg-base: #F4F6F9; --bg-surface: #FFFFFF; --bg-raised: #F8FAFC; --bg-elevated: #EEF2F8; --bg-overlay: #E2EAF4; --border-subtle: #E8EDF4; --border-default: #D1DCE8; --border-strong: #B0C0D4; --text-primary: #1A202C; --text-secondary: #4A5568; --text-tertiary: #94A3B8; --text-inverse: #FFFFFF; --accent: #0AAFBE; --accent-hover: #0897A5; --accent-light: #22C7D5; --accent-bg: rgba(10,175,190,0.08); --accent-border: rgba(10,175,190,0.25); --gold: #B7860E; --gold-bg: rgba(183,134,14,0.08); --red: #C53030; --red-bg: rgba(197,48,48,0.08); --blue: #2B6CB0; --blue-bg: rgba(43,108,176,0.08); --sidebar-width: 240px; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --input-bg: #FFFFFF; } /* ── Auto (OS Preference) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-base: #060E1C; --bg-surface: #091525; --bg-raised: #0D1E35; --bg-elevated: #122645; --bg-overlay: #1A3358; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text-primary: #FFFFFF; --text-secondary: #8B9AB0; --text-tertiary: #4A5568; --text-inverse: #060E1C; --accent: #4CAF50; --accent-hover: #3A9F3E; --accent-light: #5DC462; --accent-bg: rgba(76,175,80,0.10); --accent-border: rgba(76,175,80,0.25); --gold: #C9A84C; --gold-bg: rgba(201,168,76,0.10); --red: #E53E3E; --red-bg: rgba(229,62,62,0.10); --blue: #63B3ED; --blue-bg: rgba(66,153,225,0.10); --sidebar-width: 260px; --shadow: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 8px 32px rgba(0,0,0,0.55); --input-bg: #0D1E35; } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-base: #F4F6F9; --bg-surface: #FFFFFF; --bg-raised: #F8FAFC; --bg-elevated: #EEF2F8; --bg-overlay: #E2EAF4; --border-subtle: #E8EDF4; --border-default: #D1DCE8; --border-strong: #B0C0D4; --text-primary: #1A202C; --text-secondary: #4A5568; --text-tertiary: #94A3B8; --text-inverse: #FFFFFF; --accent: #0AAFBE; --accent-hover: #0897A5; --accent-light: #22C7D5; --accent-bg: rgba(10,175,190,0.08); --accent-border: rgba(10,175,190,0.25); --gold: #B7860E; --gold-bg: rgba(183,134,14,0.08); --red: #C53030; --red-bg: rgba(197,48,48,0.08); --blue: #2B6CB0; --blue-bg: rgba(43,108,176,0.08); --sidebar-width: 240px; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --input-bg: #FFFFFF; } } /* ── Static Variables (unchanged across themes) ── */ :root { --font-body: 'Inter', sans-serif; --font-display: 'Playfair Display', serif; --header-height: 60px; --radius: 8px; --radius-lg: 12px; --transition: 0.18s ease; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; color-scheme: light dark; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-primary); min-height: 100vh; transition: background 0.25s, color 0.25s; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { cursor: pointer; font-family: var(--font-body); } input, select, textarea { font-family: var(--font-body); } ul, ol { list-style: none; } /* ── Typography ── */ h1, h2, h3, h4, h5 { line-height: 1.2; color: var(--text-primary); } h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; } h2 { font-size: 1.25rem; font-weight: 600; } h3 { font-size: 1.0625rem; font-weight: 600; } h4 { font-size: 0.9375rem; font-weight: 600; } p { line-height: 1.6; color: var(--text-secondary); } /* ── Portal Layout ── */ .portal-layout { display: flex; min-height: 100vh; } /* ── Sidebar ── */ .sidebar { width: var(--sidebar-width); background: var(--bg-surface); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; transition: background 0.25s, border-color 0.25s; box-shadow: var(--shadow); } .sidebar-logo { padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; } .sidebar-logo .logo-text { font-size: 1.295rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .sidebar-logo .logo-sub { font-size: 0.654rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); display: block; margin-top: 1px; } .sidebar-section { padding: 16px 0 6px; } .sidebar-section-label { font-size: 0.6563rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 20px 6px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 0.8438rem; font-weight: 500; color: var(--text-secondary); border-left: 3px solid transparent; transition: all var(--transition); } .sidebar-nav a:hover { color: var(--text-primary); background: var(--bg-raised); } .sidebar-nav a.active { color: var(--accent) !important; border-left-color: var(--accent); background: rgba(76,175,80,0.12); font-weight: 600; padding-left: 17px; /* compensate for 3px border so text doesn't shift */ } [data-theme="light"] .sidebar-nav a.active { background: rgba(10,175,190,0.10); } .sidebar-nav a svg { opacity: 0.65; flex-shrink: 0; width: 15px; height: 15px; } .sidebar-nav a.active svg { opacity: 1; color: var(--accent); } .sidebar-badge { margin-left: auto; background: var(--accent); color: var(--text-inverse); font-size: 0.625rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; } .sidebar-footer { margin-top: auto; border-top: 1px solid var(--border-subtle); } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 20px; } .sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.6563rem; color: var(--text-secondary); } .sidebar-logout { background: none; border: none; color: var(--text-secondary); padding: 4px; border-radius: 4px; transition: color var(--transition); } .sidebar-logout:hover { color: var(--red); } /* Profile dropdown menu */ .profile-menu { background: var(--bg-raised); border-top: 1px solid var(--border-subtle); overflow: hidden; } .profile-menu-item { display: block; padding: 10px 20px; font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; transition: background var(--transition); } .profile-menu-item:hover { background: var(--bg-elevated); color: var(--text-primary); } .profile-menu-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; } .profile-menu-signout { color: var(--red); } .profile-menu-signout:hover { color: var(--red); background: var(--red-bg); } #sidebar-user-area { cursor: pointer; } #sidebar-user-area:hover { background: var(--bg-raised); } #sidebar-user-area svg { transition: transform 0.2s ease; margin-left: auto; opacity: 0.5; flex-shrink: 0; } /* ── Public Topbar Nav Active State ── */ .topbar-nav a.active { color: var(--accent); font-weight: 600; position: relative; } .topbar-nav a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 1px; } /* ── Main Content ── */ .portal-main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ── Top Header ── */ .portal-header { height: var(--header-height); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; padding: 0 28px; gap: 12px; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); transition: background 0.25s, border-color 0.25s; } .portal-header h2 { flex: 1; font-size: 0.9375rem; font-weight: 600; } .header-search { display: flex; align-items: center; gap: 8px; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: 6px; padding: 6px 12px; width: 220px; transition: background 0.25s, border-color 0.25s; } .header-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.8125rem; width: 100%; } .header-search input::placeholder { color: var(--text-tertiary); } .header-search svg { color: var(--text-tertiary); flex-shrink: 0; } .header-search:focus-within { border-color: var(--accent); } .header-actions { display: flex; align-items: center; gap: 6px; } .header-icon-btn { background: none; border: none; color: var(--text-secondary); padding: 6px; border-radius: 6px; position: relative; transition: all var(--transition); } .header-icon-btn:hover { background: var(--bg-raised); color: var(--text-primary); } .notif-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg-surface); } /* ── Theme Toggle ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--bg-raised); border: 1px solid var(--border-default); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); } .theme-toggle:hover { background: var(--bg-elevated); color: var(--accent); border-color: var(--accent-border); } /* ── Page Content ── */ .portal-content { padding: 28px; flex: 1; } .page-header { margin-bottom: 24px; } .page-header h1 { font-size: 1.5rem; margin-bottom: 4px; } .page-header p { font-size: 0.875rem; } /* ── Cards ── */ .card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); transition: background 0.25s, border-color 0.25s; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .card-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); } .card-action { font-size: 0.8125rem; color: var(--accent); font-weight: 500; transition: color var(--transition); } .card-action:hover { color: var(--accent-hover); } /* ── Stats Grid ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow); transition: background 0.25s, border-color 0.25s; } .stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; } .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .stat-sub { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 4px; } .stat-change { font-size: 0.6875rem; font-weight: 600; margin-top: 5px; } .stat-change.up { color: var(--accent); } .stat-change.down { color: var(--red); } /* ── Grid Helpers ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 18px; } /* ── Deal Cards ── */ .deal-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: var(--shadow); } .deal-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md); } .deal-card-header { padding: 18px 18px 0; display: flex; align-items: flex-start; gap: 12px; } .deal-logo { width: 46px; height: 46px; border-radius: 8px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; color: var(--text-inverse); } .deal-meta { flex: 1; min-width: 0; } .deal-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); } .deal-sector { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 2px; } .deal-status { font-size: 0.625rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; } .deal-status.open { background: var(--accent-bg); color: var(--accent); } .deal-status.closing { background: var(--gold-bg); color: var(--gold); } .deal-status.closed { background: var(--bg-elevated); color: var(--text-secondary); } .deal-card-body { padding: 14px 18px 18px; } .deal-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px; } .deal-progress { margin-bottom: 12px; } .deal-progress-label { display: flex; justify-content: space-between; font-size: 0.6875rem; margin-bottom: 5px; } .deal-progress-label span:first-child { color: var(--text-secondary); } .deal-progress-label span:last-child { font-weight: 600; color: var(--text-primary); } .progress-bar { height: 4px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 1s ease; } .deal-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); } .deal-fig-label { font-size: 0.625rem; color: var(--text-secondary); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.05em; } .deal-fig-value { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.8438rem; font-weight: 600; border-radius: 6px; border: none; transition: all var(--transition); cursor: pointer; } .btn-primary { background: var(--accent); color: var(--text-inverse); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-default); } .btn-secondary:hover { background: var(--bg-elevated); } .btn-outline { background: none; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent-bg); } .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid rgba(197,48,48,0.25); } .btn-danger:hover { opacity: 0.85; } .btn-sm { padding: 5px 12px; font-size: 0.8125rem; } .btn-lg { padding: 11px 24px; font-size: 0.9375rem; } .btn-full { width: 100%; justify-content: center; } /* ── Form Elements ── */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); margin-bottom: 5px; } .form-label .req { color: var(--red); margin-left: 2px; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border-default); border-radius: 6px; padding: 9px 13px; color: var(--text-primary); font-size: 0.8438rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); } .form-select { appearance: none; cursor: pointer; } .form-select option { background: var(--bg-surface); color: var(--text-primary); } .form-textarea { resize: vertical; min-height: 96px; } .form-hint { font-size: 0.6875rem; color: var(--text-secondary); margin-top: 4px; } .form-error { font-size: 0.6875rem; color: var(--red); margin-top: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-divider { text-align: center; position: relative; margin: 18px 0; color: var(--text-secondary); font-size: 0.8125rem; } .form-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-subtle); } .form-divider span { position: relative; background: var(--bg-surface); padding: 0 12px; } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; } .badge-green { background: var(--accent-bg); color: var(--accent); } .badge-gold { background: var(--gold-bg); color: var(--gold); } .badge-gray { background: var(--bg-elevated); color: var(--text-secondary); } .badge-red { background: var(--red-bg); color: var(--red); } .badge-blue { background: var(--blue-bg); color: var(--blue); } /* ── Tables ── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.8438rem; } thead th { text-align: left; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 9px 14px; border-bottom: 1px solid var(--border-subtle); } tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--bg-raised); } /* ── Alerts ── */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 0.8438rem; line-height: 1.5; margin-bottom: 18px; } .alert-info { background: var(--blue-bg); border: 1px solid rgba(66,153,225,0.2); color: var(--blue); } .alert-success { background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent); } .alert-warning { background: var(--gold-bg); border: 1px solid rgba(201,168,76,0.2); color: var(--gold); } .alert-error { background: var(--red-bg); border: 1px solid rgba(229,62,62,0.2); color: var(--red); } /* ── Tabs ── */ .tabs { display: flex; border-bottom: 1px solid var(--border-subtle); margin-bottom: 22px; gap: 0; } .tab-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.8438rem; font-weight: 500; padding: 9px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--transition); cursor: pointer; } .tab-btn:hover { color: var(--text-primary); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Utility ── */ .text-accent { color: var(--accent); } .text-green { color: var(--accent); } .text-gold { color: var(--gold); } .text-gray { color: var(--text-secondary); } .text-red { color: var(--red); } .text-primary { color: var(--text-primary); } .text-sm { font-size: 0.8125rem; } .text-xs { font-size: 0.6875rem; } .font-mono { font-family: 'Courier New', monospace; } .font-bold { font-weight: 700; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .w-full { width: 100%; } .separator { height: 1px; background: var(--border-subtle); margin: 18px 0; } /* ── Welcome Banner ── */ .welcome-banner { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); border-radius: var(--radius-lg); padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; color: white; } .welcome-banner p, .welcome-banner h1, .welcome-banner h2, .welcome-banner h3 { color: white; } .welcome-banner .btn-outline { color: white; border-color: rgba(255,255,255,0.5); } .welcome-banner .btn-outline:hover { background: rgba(255,255,255,0.15); } /* Light-mode override: dark text so it's readable on the teal/light gradient */ [data-theme="light"] .welcome-banner { color: #0B1F3A; } [data-theme="light"] .welcome-banner p, [data-theme="light"] .welcome-banner h1, [data-theme="light"] .welcome-banner h2, [data-theme="light"] .welcome-banner h3, [data-theme="light"] .welcome-banner div { color: #0B1F3A; } [data-theme="light"] .welcome-banner .btn-outline { color: #0B1F3A; border-color: rgba(11,31,58,0.4); } [data-theme="light"] .welcome-banner .btn-outline:hover { background: rgba(11,31,58,0.08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .welcome-banner { color: #0B1F3A; } :root:not([data-theme]) .welcome-banner p, :root:not([data-theme]) .welcome-banner h1, :root:not([data-theme]) .welcome-banner h2, :root:not([data-theme]) .welcome-banner h3, :root:not([data-theme]) .welcome-banner div { color: #0B1F3A; } :root:not([data-theme]) .welcome-banner .btn-outline { color: #0B1F3A; border-color: rgba(11,31,58,0.4); } :root:not([data-theme]) .welcome-banner .btn-outline:hover { background: rgba(11,31,58,0.08); } } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ── Responsive ── */ @media (max-width: 1024px) { :root, [data-theme] { --sidebar-width: 220px; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar.open { transform: translateX(0); } .portal-main { margin-left: 0; } .portal-content { padding: 18px 14px; } .form-row { grid-template-columns: 1fr; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .header-search { display: none; } }