/* ============================================================ StockVision – Dark Theme ============================================================ */ :root { --bg: #0f0f0f; --surface: #1a1a1a; --surface2: #222; --surface3: #2a2a2a; --border: #333; --border2: #3f3f3f; --text: #e0e0e0; --text-muted: #888; --text-dim: #aaa; --header-bg: #141414; --header-accent:#5b9bd5; --btn-primary: #2d5a8e; --btn-hover: #3a72b3; --btn-secondary:#3a3a3a; --btn-sec-hover:#4a4a4a; --th-bg: #252535; --th-text: #c8d8f0; --tr-even: #1c1c1c; --tr-odd: #161616; --tr-hover: #232333; --input-bg: #252525; --negative: #ef5350; --positive: #66bb6a; --accent: #5b9bd5; --summary-bg: #1a2a1a; --summary-border:#2d4a2d; } /* ============================================================ Light Theme (activated by data-theme="light" on ) ============================================================ */ [data-theme="light"] { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f7fa; --surface3: #eaecf0; --border: #d0d7de; --border2: #b9c0c9; --text: #1c2128; --text-muted: #656d76; --text-dim: #424a53; --header-bg: #ffffff; --header-accent: #0969da; --btn-primary: #0969da; --btn-hover: #0860ca; --btn-secondary: #ebecf0; --btn-sec-hover: #dfe1e6; --th-bg: #253552; --th-text: #cce0ff; --tr-even: #f6f8fa; --tr-odd: #ffffff; --tr-hover: #dbeafe; --input-bg: #ffffff; --negative: #cf222e; --positive: #1a7f37; --accent: #0969da; --summary-bg: #dafbe1; --summary-border:#aceebb; } /* Fix hardcoded dark hover color on table headers */ [data-theme="light"] th:hover { background: #1e2d47; } /* Theme toggle button */ .theme-toggle-btn { padding: 5px 12px; background: var(--btn-secondary); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-size: 12px; border-radius: 3px; line-height: 1; letter-spacing: 0.3px; transition: background 0.15s, color 0.15s; } .theme-toggle-btn:hover { background: var(--btn-hover); color: #fff; border-color: var(--btn-hover); } /* Flatpickr — reset to browser defaults in light mode */ [data-theme="light"] .flatpickr-calendar { background: #fff !important; border: 1px solid #e6e6e6 !important; box-shadow: 0 3px 13px rgba(0,0,0,0.08) !important; } [data-theme="light"] .flatpickr-day { color: #393939 !important; } [data-theme="light"] .flatpickr-day.flatpickr-disabled { color: #e6e6e6 !important; text-decoration: none; opacity: 0.3; } [data-theme="light"] .flatpickr-day.selected, [data-theme="light"] .flatpickr-day.selected:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } [data-theme="light"] .flatpickr-day:hover:not(.flatpickr-disabled) { background: #e6e6e6 !important; } [data-theme="light"] .flatpickr-months, [data-theme="light"] .flatpickr-weekdays { background: #eee !important; } [data-theme="light"] .flatpickr-current-month, [data-theme="light"] .flatpickr-monthDropdown-months, [data-theme="light"] .flatpickr-current-month .numInputWrapper span { color: #484848 !important; } [data-theme="light"] .flatpickr-weekday { color: #666 !important; } [data-theme="light"] .flatpickr-prev-month, [data-theme="light"] .flatpickr-next-month { color: #484848 !important; fill: #484848 !important; } [data-theme="light"] .flatpickr-prev-month:hover, [data-theme="light"] .flatpickr-next-month:hover { color: var(--accent) !important; fill: var(--accent) !important; } [data-theme="light"] .numInput { background: #fff !important; color: #333 !important; border: 1px solid #e6e6e6 !important; } [data-theme="light"] input.flatpickr-input { background: var(--input-bg) !important; color: var(--text) !important; border: 1px solid var(--border2) !important; } /* ============================================================ Light Theme (activated by data-theme="light" on ) ============================================================ */ [data-theme="light"] { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f7fa; --surface3: #eaecf0; --border: #d0d7de; --border2: #b9c0c9; --text: #1c2128; --text-muted: #656d76; --text-dim: #424a53; --header-bg: #ffffff; --header-accent: #0969da; --btn-primary: #0969da; --btn-hover: #0860ca; --btn-secondary: #ebecf0; --btn-sec-hover: #dfe1e6; --th-bg: #253552; --th-text: #cce0ff; --tr-even: #f6f8fa; --tr-odd: #ffffff; --tr-hover: #dbeafe; --input-bg: #ffffff; --negative: #cf222e; --positive: #1a7f37; --accent: #0969da; --summary-bg: #dafbe1; --summary-border:#aceebb; } /* Fix hardcoded dark hover color on table headers */ [data-theme="light"] th:hover { background: #1e2d47; } /* Theme toggle button */ .theme-toggle-btn { padding: 5px 12px; background: var(--btn-secondary); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-size: 12px; border-radius: 3px; line-height: 1; letter-spacing: 0.3px; transition: background 0.15s, color 0.15s; } .theme-toggle-btn:hover { background: var(--btn-hover); color: #fff; border-color: var(--btn-hover); } /* Flatpickr - reset to defaults in light mode */ [data-theme="light"] .flatpickr-calendar { background: #fff !important; border: 1px solid #e6e6e6 !important; box-shadow: 0 3px 13px rgba(0,0,0,0.08) !important; } [data-theme="light"] .flatpickr-day { color: #393939 !important; } [data-theme="light"] .flatpickr-day.flatpickr-disabled { color: #e6e6e6 !important; text-decoration: none; opacity: 0.3; } [data-theme="light"] .flatpickr-day.selected, [data-theme="light"] .flatpickr-day.selected:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } [data-theme="light"] .flatpickr-day:hover:not(.flatpickr-disabled) { background: #e6e6e6 !important; } [data-theme="light"] .flatpickr-months, [data-theme="light"] .flatpickr-weekdays { background: #eee !important; } [data-theme="light"] .flatpickr-current-month, [data-theme="light"] .flatpickr-monthDropdown-months, [data-theme="light"] .flatpickr-current-month .numInputWrapper span { color: #484848 !important; } [data-theme="light"] .flatpickr-weekday { color: #666 !important; } [data-theme="light"] .flatpickr-prev-month, [data-theme="light"] .flatpickr-next-month { color: #484848 !important; fill: #484848 !important; } [data-theme="light"] .flatpickr-prev-month:hover, [data-theme="light"] .flatpickr-next-month:hover { color: var(--accent) !important; fill: var(--accent) !important; } [data-theme="light"] .numInput { background: #fff !important; color: #333 !important; border: 1px solid #e6e6e6 !important; } [data-theme="light"] input.flatpickr-input { background: var(--input-bg) !important; color: var(--text) !important; border: 1px solid var(--border2) !important; } /* Base */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family:Arial,sans-serif; background:var(--bg); color:var(--text); padding:10px; } .container { max-width:100%; margin:0 auto; background:var(--surface); } /* Header */ .header { background:var(--header-bg); color:var(--text); padding:18px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--header-accent); } .header h1 { font-size:22px; font-weight:normal; letter-spacing:0.5px; } .header a,.logout-btn { padding:7px 16px; background:var(--btn-secondary); color:var(--text); text-decoration:none; font-size:13px; border:none; cursor:pointer; display:inline-block; border-radius:3px; } .header a:hover,.logout-btn:hover { background:var(--btn-hover); } /* User menu */ .user-menu { position:relative; } .user-menu-btn { padding:7px 16px; background:var(--btn-secondary); color:var(--text); border:none; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px; border-radius:3px; } .user-menu-btn:hover { background:var(--btn-hover); } .user-menu-dropdown { /* padding-top replaces margin-top so the pointer path stays inside the panel (margin is not hoverable — moving through the gap dropped :hover and hid the menu). */ display:none; position:absolute; right:0; top:100%; margin-top:0; padding-top:10px; background:var(--surface3); border:1px solid var(--border2); box-shadow:0 6px 20px rgba(0,0,0,0.5); min-width:170px; z-index:1000; border-radius:4px; } .user-menu:hover .user-menu-dropdown { display:block; } .user-menu-dropdown a,.user-menu-dropdown button { display:block; width:100%; padding:10px 16px; text-align:left; border:none; background:none; color:var(--text); font-size:14px; cursor:pointer; text-decoration:none; } .user-menu-dropdown a:hover,.user-menu-dropdown button:hover { background:var(--surface); color:var(--accent); } /* Stat cards */ .stats { display:flex; gap:0; background:var(--border); border:1px solid var(--border); } .stat-card { flex:1; background:var(--surface2); padding:14px; text-align:center; border-right:1px solid var(--border); } .stat-card:last-child { border-right:none; } .stat-card h3 { font-size:11px; color:var(--text-muted); font-weight:normal; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; } .stat-card .value { font-size:20px; font-weight:bold; color:var(--text); } /* Summary bar (valuation) */ .summary { padding:12px 20px; background:var(--summary-bg); border-bottom:1px solid var(--summary-border); font-size:14px; display:flex; gap:30px; align-items:center; } .summary strong { color:var(--text-dim); } /* Controls bar */ .controls { padding:12px 20px; background:var(--surface2); border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .controls label { font-size:13px; color:var(--text-muted); } .controls input,.controls select,.search-box input,.search-box select { padding:7px 11px; border:1px solid var(--border2); font-size:13px; background:var(--input-bg); color:var(--text); border-radius:3px; } .controls input:focus,.controls select:focus { outline:none; border-color:var(--accent); } .controls button,.search-box button { padding:7px 18px; background:var(--btn-primary); color:#fff; border:none; cursor:pointer; font-size:13px; border-radius:3px; } .controls button:hover,.search-box button:hover { background:var(--btn-hover); } .controls button.secondary,.search-box button.secondary { background:var(--btn-secondary); color:var(--text); } .controls button.secondary:hover,.search-box button.secondary:hover { background:var(--btn-sec-hover); } /* Search box (For Alex Team page) */ .search-box { display:flex; gap:10px; align-items:center; } /* Table */ .data-table { padding:16px 20px; } table { width:100%; border-collapse:collapse; border:1px solid var(--border); font-size:12px; } th { background:var(--th-bg); color:var(--th-text); padding:8px 6px; text-align:left; font-weight:bold; font-size:12px; border:1px solid var(--border2); white-space:nowrap; -webkit-print-color-adjust:exact; print-color-adjust:exact; } th.sortable::after { content:' ⇅'; opacity:0.3; font-size:10px; } th.sorted-asc::after { content:' ↑'; opacity:1; } th.sorted-desc::after { content:' ↓'; opacity:1; } th:hover { background:#2e2e3e; } td { padding:6px; border:1px solid var(--border); font-size:12px; color:var(--text); } tr:nth-child(odd) td { background:var(--tr-odd); } tr:nth-child(even) td { background:var(--tr-even); } tbody tr:hover td { background:var(--tr-hover); } .number { font-family:monospace; text-align:right; } .number.negative,.negative { color:var(--negative); } /* Pagination */ .pagination { display:flex; justify-content:center; gap:8px; margin-top:14px; align-items:center; } .pagination button { padding:5px 12px; border:1px solid var(--border2); background:var(--surface3); color:var(--text); cursor:pointer; border-radius:3px; } .pagination button:hover:not(:disabled) { background:var(--btn-primary); color:#fff; } .pagination button:disabled { opacity:0.3; cursor:not-allowed; } .pagination span { font-size:13px; color:var(--text-muted); } /* Loading / empty */ .loading { text-align:center; padding:40px; color:var(--text-muted); font-size:14px; } /* Flatpickr dark overrides */ .flatpickr-calendar { background:var(--surface3) !important; border:1px solid var(--border2) !important; box-shadow:0 8px 24px rgba(0,0,0,0.6) !important; } .flatpickr-day { color:var(--text) !important; } .flatpickr-day.flatpickr-disabled { color:var(--border2) !important; text-decoration:line-through; opacity:0.4; } .flatpickr-day.selected,.flatpickr-day.selected:hover { background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } .flatpickr-day:hover:not(.flatpickr-disabled) { background:var(--surface) !important; } .flatpickr-months,.flatpickr-weekdays { background:var(--th-bg) !important; } .flatpickr-current-month,.flatpickr-monthDropdown-months, .flatpickr-current-month .numInputWrapper span { color:var(--th-text) !important; } .flatpickr-weekday { color:var(--text-muted) !important; } .flatpickr-prev-month,.flatpickr-next-month { color:var(--text-muted) !important; fill:var(--text-muted) !important; } .flatpickr-prev-month:hover,.flatpickr-next-month:hover { color:var(--accent) !important; fill:var(--accent) !important; } .numInput { background:var(--input-bg) !important; color:var(--text) !important; border:1px solid var(--border2) !important; } input.flatpickr-input { background:var(--input-bg) !important; color:var(--text) !important; border:1px solid var(--border2) !important; border-radius:3px; padding:7px 11px; font-size:13px; width:140px; cursor:pointer; } input.flatpickr-input:focus { outline:none; border-color:var(--accent) !important; } /* Modal */ .um-modal-overlay { background:rgba(0,0,0,0.75) !important; } .um-modal { background:var(--surface3) !important; border:1px solid var(--border2) !important; color:var(--text) !important; } .um-modal h2 { color:var(--text) !important; } .um-modal .um-form-group label { color:var(--text-muted) !important; } .um-modal .um-form-group input,.um-modal .um-form-group select { background:var(--input-bg) !important; color:var(--text) !important; border:1px solid var(--border2) !important; } /* Print info bar */ #print-info { display:none; } /* ===== PRINT ===== */ @media print { @page { size:landscape; margin:10mm 8mm; } .header a,.header button,.header .user-menu, .controls,.pagination,.um-modal,#_export_overlay { display:none !important; } body { background:#fff !important; padding:0 !important; color:#000 !important; } .container { background:#fff !important; } .header { background:#222 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; padding:8px 12px !important; } .header h1 { font-size:14pt !important; color:#fff !important; } .stats { display:flex !important; } .stat-card { background:#fff !important; padding:4px 8px !important; } .stat-card h3 { color:#666 !important; font-size:7pt !important; } .stat-card .value { color:#000 !important; font-size:11pt !important; } .summary { background:#e8f4e8 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } #print-info { display:flex !important; justify-content:space-between; font-size:8pt; color:#555; padding:3px 0 5px 0; border-bottom:1px solid #bbb; margin-bottom:4px; } .data-table { padding:0 !important; } table { font-size:8pt !important; width:100% !important; table-layout:fixed; border-collapse:collapse !important; } th,td { padding:3px 4px !important; border:0.5pt solid #bbb !important; } th { background:#252535 !important; color:#c8d8f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } tr:nth-child(odd) td { background:#fff !important; } tr:nth-child(even) td { background:#f5f5f5 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } tbody tr { page-break-inside:avoid; } thead { display:table-header-group; } .number.negative { color:var(--negative) !important; } } /* Report category nav-group dropdowns */ .nav-group { position:relative; } .nav-group-btn { padding:7px 14px; background:var(--btn-secondary); color:var(--text); border:1px solid var(--border2); cursor:pointer; font-size:13px; border-radius:3px; display:flex; align-items:center; gap:4px; } .nav-group-btn:hover { background:var(--btn-hover); } .nav-group-dropdown { display:none; position:absolute; left:0; top:100%; margin-top:0; padding-top:10px; background:var(--surface3); border:1px solid var(--border2); box-shadow:0 6px 20px rgba(0,0,0,0.5); min-width:180px; z-index:1000; border-radius:4px; } .nav-group:hover .nav-group-dropdown { display:block; } .nav-group-dropdown a { display:block; padding:10px 16px; color:var(--text); font-size:14px; text-decoration:none; white-space:nowrap; } .nav-group-dropdown a:hover { background:var(--surface); color:var(--accent); } .nav-group-dropdown a.nav-active { color:var(--accent); font-weight:600; } .nav-group-btn.nav-active { background:var(--btn-hover); color:#fff; font-weight:600; } .nav-group-dropdown .nav-group-div { height:1px; background:var(--border); margin:2px 0; }