/* ===================================================== AMZ Vault - Shared Styles ===================================================== Theme Toggle: Add 'dark-theme' class to for night mode ===================================================== */ /* ===================================================== CSS Variables - Light Theme (Default) ===================================================== */ :root { /* Primary Colors */ --primary-color: #007bff; --primary-hover: #0056b3; --primary-light: rgba(0, 123, 255, 0.1); /* Status Colors */ --success-color: #28a745; --success-hover: #218838; --success-light: rgba(40, 167, 69, 0.1); --danger-color: #dc3545; --danger-hover: #c82333; --danger-light: rgba(220, 53, 69, 0.1); --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: rgba(255, 193, 7, 0.1); --info-color: #17a2b8; --info-light: rgba(23, 162, 184, 0.1); /* Neutral Colors */ --text-color: #212529; --text-muted: #6c757d; --text-light: #495057; --border-color: #dee2e6; --bg-light: #f8f9fa; --bg-white: #ffffff; /* Transparency & Effects */ --glass-bg: rgba(255, 255, 255, 0.92); --glass-bg-light: rgba(248, 249, 250, 0.85); --glass-border: rgba(255, 255, 255, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); --blur-amount: 12px; /* Sizing */ --header-height: 80px; --container-padding: 2rem; --border-radius: 0.5rem; --border-radius-lg: 0.75rem; --border-radius-pill: 9999px; /* Typography */ --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-size-base: 14px; --font-size-sm: 0.875rem; --font-size-xs: 0.75rem; --font-size-lg: 1.1rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; } /* ===================================================== CSS Variables - Dark Theme ===================================================== */ html.dark-theme { /* Primary Colors */ --primary-color: #4dabf7; --primary-hover: #74c0fc; --primary-light: rgba(77, 171, 247, 0.15); /* Status Colors */ --success-color: #51cf66; --success-hover: #69db7c; --success-light: rgba(81, 207, 102, 0.15); --danger-color: #ff6b6b; --danger-hover: #fa8072; --danger-light: rgba(255, 107, 107, 0.15); --warning-color: #fcc419; --warning-hover: #ffd43b; --warning-light: rgba(252, 196, 25, 0.15); --info-color: #22b8cf; --info-light: rgba(34, 184, 207, 0.15); /* Neutral Colors */ --text-color: #e9ecef; --text-muted: #adb5bd; --text-light: #ced4da; --border-color: rgba(255, 255, 255, 0.12); --bg-light: #2d3436; --bg-white: #1e2122; /* Transparency & Effects */ --glass-bg: rgba(30, 33, 34, 0.88); --glass-bg-light: rgba(45, 52, 54, 0.85); --glass-border: rgba(255, 255, 255, 0.08); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); } /* ===================================================== Base Styles ===================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--text-color); margin: 0; min-height: 100vh; background-image: url('/static/page_bg.jpg'); background-attachment: fixed; background-size: cover; background-position: center center; background-repeat: no-repeat; line-height: 1.5; } /* Dark theme background overlay */ html.dark-theme body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); z-index: -1; pointer-events: none; } a { color: var(--primary-color); text-decoration: none; } a:hover { color: var(--primary-hover); } /* ===================================================== Typography ===================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } .text-muted { color: var(--text-muted); } .text-success { color: var(--success-color); } .text-danger { color: var(--danger-color); } .text-warning { color: var(--warning-color); } .text-info { color: var(--info-color); } .mono { font-family: var(--font-mono); } /* ===================================================== Header ===================================================== */ .header { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 2rem; background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border-bottom: 1px solid var(--border-color); min-height: var(--header-height); } .header-left { display: flex; align-items: center; gap: 1.25rem; } .header-logo img { height: 60px; width: auto; display: block; } .header h1 { margin: 0; font-size: var(--font-size-2xl); font-weight: 600; color: var(--text-color); } .nav-links { display: flex; align-items: center; gap: 0.75rem; } /* ===================================================== Buttons ===================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: var(--font-size-base); font-weight: 500; text-decoration: none; border: 1px solid transparent; border-radius: var(--border-radius); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Primary Button */ .btn-primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); } /* Secondary/Outline Button */ .btn-secondary { background: var(--glass-bg); color: var(--text-color); border-color: var(--border-color); } .btn-secondary:hover:not(:disabled) { background: var(--bg-light); border-color: var(--text-muted); } /* Ghost Button (for nav) */ .btn-ghost { background: transparent; color: var(--text-color); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--primary-light); color: var(--primary-color); } .btn-ghost.active { background: var(--primary-light); color: var(--primary-color); } /* Success Button */ .btn-success { background: var(--success-color); color: #fff; border-color: var(--success-color); } .btn-success:hover:not(:disabled) { background: var(--success-hover); border-color: var(--success-hover); } /* Danger Button */ .btn-danger { background: var(--danger-color); color: #fff; border-color: var(--danger-color); } .btn-danger:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); } /* Small Button */ .btn-sm { padding: 0.35rem 0.75rem; font-size: var(--font-size-sm); } /* Icon Button */ .btn-icon { padding: 0.5rem; border-radius: 50%; } /* ===================================================== Dropdown ===================================================== */ .dropdown { position: relative; display: inline-block; } .dropdown-toggle { cursor: pointer; } .dropdown-toggle::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 0.5rem; vertical-align: middle; border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 1000; } .dropdown-menu.show { display: block; } .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: var(--border-radius); color: var(--text-color); text-decoration: none; font-weight: 500; transition: background 0.15s ease; } .dropdown-item:hover { background: var(--primary-light); color: var(--primary-color); } .dropdown-divider { height: 1px; margin: 0.5rem 0; background: var(--border-color); } /* User Icon */ .user-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary-color); font-size: 1rem; } .user-icon svg { width: 20px; height: 20px; } /* ===================================================== Container ===================================================== */ .container { width: 100%; padding: var(--container-padding); margin: 0 auto; } .container-narrow { max-width: 800px; } .container-medium { max-width: 1200px; } /* ===================================================== Cards ===================================================== */ .card { background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); margin-bottom: 1.5rem; overflow: hidden; } .card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem; background: var(--glass-bg-light); border-bottom: 1px solid var(--border-color); } .card-header h2 { margin: 0; font-size: var(--font-size-lg); } .card-header .subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-left: 0.5rem; } .card-body { padding: 1.5rem; } .card-footer { padding: 1rem 1.5rem; background: var(--glass-bg-light); border-top: 1px solid var(--border-color); } /* ===================================================== Forms ===================================================== */ label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: 0.35rem; color: var(--text-color); } input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="file"], textarea, select { width: 100%; padding: 0.5rem 0.75rem; font-size: var(--font-size-base); font-family: inherit; color: var(--text-color); background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); } input:disabled, textarea:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-light); } /* Form inline layout */ .form-inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .form-group { margin-bottom: 1rem; } /* ===================================================== Filter Bar ===================================================== */ .filter-bar { background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 1rem 1.5rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .filter-bar h2 { margin: 0; font-size: var(--font-size-lg); } .filter-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ===================================================== Tables ===================================================== */ .table-wrapper { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--bg-white); } table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } th { background: var(--bg-light); font-weight: 600; white-space: nowrap; color: var(--text-color); } tr:last-child td { border-bottom: none; } tr:hover { background: var(--primary-light); } .numeric { text-align: right; white-space: nowrap; } /* ===================================================== Badges & Pills ===================================================== */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; border-radius: var(--border-radius); letter-spacing: 0.025em; } .badge-primary { background: var(--primary-light); color: var(--primary-color); } .badge-success { background: var(--success-light); color: var(--success-color); } .badge-danger { background: var(--danger-light); color: var(--danger-color); } .badge-warning { background: var(--warning-light); color: #856404; } html.dark-theme .badge-warning { color: var(--warning-color); } .badge-info { background: var(--info-light); color: var(--info-color); } .pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--border-radius-pill); border: 1px solid var(--border-color); background: var(--bg-white); color: var(--text-color); } .pill-success { border-color: var(--success-color); background: var(--success-light); color: var(--success-color); } .pill-muted { color: var(--text-muted); } /* ===================================================== KPI Cards ===================================================== */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; } .kpi-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .kpi-card h3 { margin: 0; font-size: var(--font-size-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.025em; } .kpi-card p { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--text-color); line-height: 1.2; } .kpi-trend { font-size: 0.78rem; font-weight: 600; } .kpi-trend-good { color: #28a745; } .kpi-trend-bad { color: #dc3545; } .kpi-trend-neutral { color: var(--text-muted); } /* ===================================================== Tabs ===================================================== */ .tab-container { background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; } .tab-nav { display: flex; border-bottom: 2px solid var(--border-color); background: var(--glass-bg-light); overflow-x: auto; } .tab-nav button { flex: 1; min-width: fit-content; padding: 1rem 1.5rem; border: none; background: transparent; cursor: pointer; font-size: var(--font-size-base); font-weight: 500; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s ease; white-space: nowrap; } .tab-nav button:hover { background: var(--primary-light); color: var(--primary-color); } .tab-nav button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: var(--primary-light); } .tab-content { display: none; padding: 1.5rem; } .tab-content.active { display: block; } /* Sub-tabs */ .sub-tab-nav { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .sub-tab-nav button { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: var(--bg-white); cursor: pointer; border-radius: var(--border-radius); font-size: var(--font-size-base); font-weight: 500; color: var(--text-color); transition: all 0.2s ease; } .sub-tab-nav button.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } .sub-tab-content { display: none; } .sub-tab-content.active { display: block; } /* ===================================================== Toggle Switch ===================================================== */ .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-muted); transition: 0.3s; border-radius: 26px; } .toggle-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: var(--success-color); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); } .toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; } /* ===================================================== Flash Messages ===================================================== */ .flash-messages { list-style: none; padding: 0; margin: 0 0 1.5rem; } .flash-messages li { padding: 0.875rem 1.25rem; margin-bottom: 0.75rem; border-radius: var(--border-radius); font-weight: 500; } .flash-success { background: var(--success-light); color: var(--success-color); border: 1px solid var(--success-color); } .flash-error { background: var(--danger-light); color: var(--danger-color); border: 1px solid var(--danger-color); } .flash-warning { background: var(--warning-light); color: #856404; border: 1px solid var(--warning-color); } html.dark-theme .flash-warning { color: var(--warning-color); } .flash-info { background: var(--info-light); color: var(--info-color); border: 1px solid var(--info-color); } /* ===================================================== Empty State ===================================================== */ .empty-state { text-align: center; padding: 3rem; color: var(--text-muted); } .empty-state h4 { margin: 0 0 0.5rem; color: var(--text-muted); } /* ===================================================== Charts ===================================================== */ .chart-container { position: relative; height: 350px; width: 100%; } .module .chart-container { height: 300px; } /* ===================================================== Module Grid ===================================================== */ .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } /* ===================================================== Legend Toggle ===================================================== */ .legend-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; padding-top: 1rem; } .legend-item { display: flex; align-items: center; cursor: pointer; font-size: var(--font-size-sm); padding: 0.25rem 0.5rem; border-radius: var(--border-radius); transition: background 0.15s ease; } .legend-item:hover { background: var(--bg-light); } .legend-item.hidden, .legend-item.inactive { opacity: 0.35; } .legend-color { width: 12px; height: 12px; border-radius: 2px; margin-right: 0.5rem; flex-shrink: 0; } /* ===================================================== Profile Selector (Header) ===================================================== */ .profile-selector { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--glass-bg-light); border: 1px solid var(--border-color); border-radius: var(--border-radius); position: relative; } .profile-selector label { margin: 0; font-size: var(--font-size-sm); white-space: nowrap; } .profile-selector select { width: auto; min-width: 150px; padding: 0.35rem 0.5rem; font-size: var(--font-size-sm); } /* --- Searchable Profile Dropdown --- */ .ps-dropdown { position: relative; } .ps-selected { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-primary); font-size: var(--font-size-sm); cursor: pointer; padding: 2px 0; white-space: nowrap; } .ps-selected:hover { opacity: 0.85; } .ps-name { font-weight: 600; } .ps-country { opacity: 0.6; font-size: 0.85em; } .ps-chevron { opacity: 0.5; transition: transform 0.15s; flex-shrink: 0; } .ps-dropdown.open .ps-chevron { transform: rotate(180deg); } .ps-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 280px; max-width: 380px; background: var(--card-bg, #1e2128); border: 1px solid var(--border-color, #2d3139); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); z-index: 1000; overflow: hidden; } .ps-dropdown.open .ps-panel { display: block; } .ps-search { width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--border-color, #2d3139); background: transparent; color: var(--text-primary, #f3f4f6); font-size: 13px; outline: none; box-sizing: border-box; } .ps-search::placeholder { color: var(--text-muted, #6b7280); } .ps-options { max-height: 260px; overflow-y: auto; padding: 4px 0; } .ps-option { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; transition: background 0.1s; font-size: 13px; color: var(--text-secondary, #d1d5db); } .ps-option:hover { background: rgba(255, 255, 255, 0.05); } .ps-option-active { background: rgba(59, 130, 246, 0.1); color: var(--accent-color, #3b82f6); } .ps-option-name { font-weight: 500; } .ps-option-country { font-size: 11px; opacity: 0.6; margin-left: 8px; flex-shrink: 0; } .ps-option.ps-hidden { display: none; } .ps-no-results { padding: 16px 12px; text-align: center; color: var(--text-muted, #6b7280); font-size: 13px; } /* ===================================================== Widget Tables ===================================================== */ .widget-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .widget-table th, .widget-table td { border-bottom: 1px solid var(--border-color); padding: 0.6rem 1rem; text-align: left; font-size: var(--font-size-sm); } .widget-table th { background: var(--glass-bg-light); font-weight: 600; white-space: nowrap; } .widget-table td.campaign-name { width: 50%; white-space: normal; } .widget-table td.numeric { text-align: right; white-space: nowrap; width: 15%; } .widget-table th:not(:first-child), .widget-table td:not(:first-child) { text-align: right; } .no-data { color: var(--text-muted); font-style: italic; text-align: center; padding: 1rem; } /* ===================================================== Sortable Table Headers ===================================================== */ th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 1.5rem; } th.sortable:hover { background: var(--primary-light); } th.sortable::after { content: '\21C5'; position: absolute; right: 0.5rem; opacity: 0.3; font-size: var(--font-size-xs); } th.sortable.asc::after { content: '\25B2'; opacity: 1; } th.sortable.desc::after { content: '\25BC'; opacity: 1; } /* ===================================================== Metric Colors ===================================================== */ .positive { color: var(--success-color); } .negative { color: var(--danger-color); } .warning { color: var(--warning-color); } .metric-value { font-weight: 600; } /* ===================================================== Modal / Dialog ===================================================== */ dialog { border: none; padding: 0; border-radius: var(--border-radius-lg); width: min(900px, 94vw); max-height: 90vh; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); } dialog::backdrop { background: rgba(0, 0, 0, 0.5); } html.dark-theme dialog::backdrop { background: rgba(0, 0, 0, 0.7); } .modal { padding: 1.5rem; background: var(--glass-bg); } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem; } .modal-title { font-size: var(--font-size-xl); font-weight: 700; margin: 0; } .modal-subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 0.25rem; } .modal-body { max-height: 60vh; overflow-y: auto; } .modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--border-color); } /* ===================================================== Auto-Sync Control ===================================================== */ .auto-sync-control { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--glass-bg-light); border-radius: var(--border-radius); border: 1px solid var(--border-color); } .auto-sync-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-light); } .auto-sync-status { font-size: var(--font-size-xs); color: var(--text-muted); margin-left: 0.5rem; } .auto-sync-status.syncing { color: var(--primary-color); font-weight: 500; } .auto-sync-status.enabled { color: var(--success-color); font-weight: 500; } /* ===================================================== Multi-Select ===================================================== */ .multi-select { position: relative; display: inline-block; min-width: 200px; } .multi-select-button { width: 100%; padding: 0.5rem 1rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); font-size: var(--font-size-base); cursor: pointer; background: var(--bg-white); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; color: var(--text-color); } .multi-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--glass-bg); backdrop-filter: blur(var(--blur-amount)); -webkit-backdrop-filter: blur(var(--blur-amount)); border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-top: 0.25rem; box-shadow: var(--shadow-md); z-index: 1000; display: none; } .multi-select-dropdown.active { display: block; } .multi-select-option { padding: 0.5rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: background 0.15s ease; } .multi-select-option:hover { background: var(--primary-light); } .multi-select-option input[type="checkbox"] { cursor: pointer; accent-color: var(--primary-color); } /* ===================================================== Chart Mode Toggle ===================================================== */ .chart-mode-toggle { display: flex; align-items: center; gap: 0.25rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0.25rem; } .chart-mode-button { padding: 0.4rem 0.8rem; border: none; background: transparent; cursor: pointer; border-radius: calc(var(--border-radius) - 2px); font-size: var(--font-size-sm); font-weight: 500; color: var(--text-muted); transition: all 0.2s ease; } .chart-mode-button.active { background: var(--primary-color); color: #fff; } .chart-mode-button:hover:not(.active) { background: var(--bg-light); } /* ===================================================== Campaign Filter Group ===================================================== */ .campaign-filter-group { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; background: var(--glass-bg-light); border-radius: var(--border-radius); border: 1px solid var(--border-color); } .campaign-filter-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-light); white-space: nowrap; } /* ===================================================== Metric Selector ===================================================== */ .metric-selector { display: flex; align-items: center; gap: 0.5rem; } .metric-selector label { font-weight: 500; font-size: var(--font-size-sm); margin: 0; } .metric-selector select { width: auto; padding: 0.35rem 0.5rem; font-size: var(--font-size-sm); } /* ===================================================== Section Header ===================================================== */ .section-header { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); } .section-header h3 { margin: 0; font-size: var(--font-size-xl); color: var(--text-color); } .section-header p { margin: 0.5rem 0 0; color: var(--text-muted); font-size: var(--font-size-sm); } /* ===================================================== Expand/Collapse ===================================================== */ .expand-icon { display: inline-block; font-size: var(--font-size-xs); transition: transform 0.2s ease; user-select: none; } .expand-icon.expanded { transform: rotate(90deg); } /* ===================================================== Utilities ===================================================== */ .hidden { display: none !important; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .text-center { text-align: center; } .text-right { text-align: right; } .w-full { width: 100%; } /* ===================================================== Responsive ===================================================== */ @media (max-width: 768px) { :root { --container-padding: 1rem; } .header { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.75rem; } .header-logo img { height: 45px; } .header h1 { font-size: var(--font-size-lg); } .nav-links { gap: 0.5rem; } .tab-nav { flex-direction: column; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-controls { flex-direction: column; align-items: stretch; } .module-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .btn { padding: 0.6rem 1rem; } } /* ===================================================== Print Styles ===================================================== */ @media print { body { background: white !important; } body::before { display: none !important; } .header, .filter-bar, .btn, .dropdown { display: none !important; } .card { background: white; box-shadow: none; border: 1px solid #ddd; } }