/* ══════════════════════════════════════════════ basic.css — shared design system All standard elements are defined here. Import this in every company-specific main.html ══════════════════════════════════════════════ */ /* ── Google Fonts ────────────────────────────── Include in your HTML : ─────────────────────────────────────────────*/ /* ── Design Tokens ──────────────────────────── */ :root { /* Typeface tokens (system sans, like basic-flat) */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Hubot Sans', 'Syne', 'Inter', sans-serif; --font-data: var(--font-ui); /* Backgrounds */ --bg-base: #06061a; --bg-surface: rgba(255, 255, 255, 0.035); --bg-surface-hover: rgba(255, 255, 255, 0.065); --bg-glass: rgba(12, 11, 38, 0.72); /* Brand colours */ --blue: #1877F2; --blue-light: #4a9eff; --blue-glow: rgba(24, 119, 242, 0.3); --accent: #00d4ff; --danger: #ff4d6d; --success: #00e5a0; /* Text */ --text-primary: #eef2ff; --text-secondary: rgba(238, 242, 255, 0.55); --text-muted: rgba(238, 242, 255, 0.28); /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-lit: rgba(24, 119, 242, 0.4); /* Input wells (text inputs, selects, search) */ --input-bg: rgba(255, 255, 255, 0.05); --input-bg-hover: rgba(255, 255, 255, 0.08); --input-border: rgba(255, 255, 255, 0.15); --input-border-hover:rgba(255, 255, 255, 0.22); /* Dropdown panel (the floating list opened from selects) */ --dropdown-bg: #0e0e2a; --dropdown-border: rgba(24, 119, 242, 0.25); --dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); --dropdown-sep: rgba(255, 255, 255, 0.03); /* Toggle switch (off state) thumb colour */ --toggle-thumb-bg: rgba(255, 255, 255, 0.4); /* Elevated panel surfaces (URL preview, table header strip) — appear "deeper" than the page in dark mode, "lifted" in light mode. */ --panel-bg: rgba(0, 0, 0, 0.3); --panel-row-sep: rgba(255, 255, 255, 0.18); --panel-row-hover: rgba(255, 255, 255, 0.06); /* Theme switcher pill — blends with the active theme background */ --theme-switch-pill: #1e293b; --theme-switch-active: var(--blue-light); /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; /* Shadows */ --shadow-card: 0 2px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05); /* Layout */ --sidebar-w: 210px; } /* ── Light theme ────────────────────────────── */ [data-theme="light"] { --bg-base: #f5f5f7; --bg-surface: rgba(15, 23, 42, 0.04); --bg-surface-hover: rgba(15, 23, 42, 0.07); --bg-glass: rgba(255, 255, 255, 0.78); /* Brand stays the same — accent shifts slightly cooler for contrast on white */ --blue: #1877F2; --blue-light: #1e5fcf; --blue-glow: rgba(24, 119, 242, 0.22); --accent: #0891b2; --danger: #e11d48; --success: #059669; /* Text — deep slate, mirroring the dark-mode scale */ --text-primary: #0f172a; --text-secondary: rgba(15, 23, 42, 0.62); --text-muted: rgba(15, 23, 42, 0.42); /* Borders */ --border: rgba(15, 23, 42, 0.10); --border-lit: rgba(24, 119, 242, 0.45); /* Input wells — visible borders on a light background */ --input-bg: rgba(255, 255, 255, 0.85); --input-bg-hover: rgba(255, 255, 255, 1); --input-border: rgba(15, 23, 42, 0.26); --input-border-hover:rgba(15, 23, 42, 0.42); /* Dropdown panel */ --dropdown-bg: #ffffff; --dropdown-border: rgba(15, 23, 42, 0.14); --dropdown-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); --dropdown-sep: rgba(15, 23, 42, 0.06); /* Toggle switch (off state) thumb colour — visible on light track */ --toggle-thumb-bg: rgba(15, 23, 42, 0.42); /* Elevated panel surfaces — light blue-tinted on white */ --panel-bg: rgba(24, 119, 242, 0.06); --panel-row-sep: rgba(15, 23, 42, 0.22); --panel-row-hover: rgba(24, 119, 242, 0.06); /* Theme switcher pill — pale chip that sits on the light page */ --theme-switch-pill: #f2f5fa; --theme-switch-active: var(--blue); /* Shadows */ --shadow-card: 0 2px 24px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04); } [data-theme="light"] .bg-canvas::before { background: /* Top-left glow — slightly stronger than neutral */ radial-gradient(ellipse 80% 60% at 0% 0%, rgba(24, 119, 242, 0.12) 0%, transparent 55%), /* Bottom-right cyan accent */ radial-gradient(ellipse 65% 50% at 100% 100%, rgba(8, 145, 178, 0.08) 0%, transparent 55%), /* Bottom-left subtle balance */ radial-gradient(ellipse 50% 40% at 5% 100%, rgba(24, 119, 242, 0.06) 0%, transparent 60%); } [data-theme="light"] .bg-canvas::after { /* Hide the starfield in light mode — bright dots on white look like dust */ display: none; } /* ── Reset ──────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Base ───────────────────────────────────── */ html { scrollbar-gutter: stable; } body { font-family: var(--font-ui); background: var(--bg-base); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } /* ── Background canvas (starfield + glows) ──── */ .bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-canvas::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 5% 0%, rgba(24, 119, 242, 0.2) 0%, transparent 55%), radial-gradient(ellipse 50% 45% at 95% 100%, rgba(0, 212, 255, 0.1) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(24, 119, 242, 0.04) 0%, transparent 65%); } .bg-canvas::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 8% 12%, rgba(255, 255, 255, 0.70) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 22% 38%, rgba(255, 255, 255, 0.45) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 37% 7%, rgba(180, 210, 255, 0.60) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 52% 68%, rgba(255, 255, 255, 0.35) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 67% 22%, rgba(255, 255, 255, 0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 82% 52%, rgba(180, 210, 255, 0.45) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 91% 8%, rgba(255, 255, 255, 0.65) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 4% 78%, rgba(255, 255, 255, 0.30) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 58% 88%, rgba(255, 255, 255, 0.40) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 28% 93%, rgba(255, 255, 255, 0.32) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 76% 77%, rgba(180, 210, 255, 0.38) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 14% 55%, rgba(255, 255, 255, 0.30) 0%, transparent 100%), radial-gradient(1.0px 1.0px at 88% 33%, rgba(180, 210, 255, 0.40) 0%, transparent 100%); } /* ── Layout ─────────────────────────────────── */ .app-layout { position: relative; z-index: 1; display: flex; min-height: 100vh; } /* ── Sidebar ────────────────────────────────── */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; padding: 28px 16px 12px; background: var(--bg-glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right: 1px solid var(--panel-row-sep); position: fixed; top: 0; left: 0; height: 100vh; overflow-y: hidden; z-index: 10; } /* Stronger vertical edge between sidebar and content in light mode — the default --border is too pale against the white-ish frosted sidebar. Sidebar gets a slight lift in luminance vs the page so it reads as a distinct surface without being a stark white panel. */ [data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.4); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--panel-row-sep); } /* Logo */ .logo-mark { display: flex; align-items: center; gap: 12px; padding: 0 8px; margin-bottom: 32px; } .logo-svg-wrap { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; filter: drop-shadow(0 0 12px rgba(24, 119, 242, 0.6)); flex-shrink: 0; } .logo-svg-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .logo-text-block { display: flex; flex-direction: column; } .logo-name { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; color: var(--text-primary); white-space: nowrap; font-family: var(--font-display); } .logo-name span { color: var(--blue); } .logo-sub { font-size: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); font-family: var(--font-data); margin-top: 3px; } /* Sidebar nav */ .tab-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .tab { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary); background: transparent; border: 1px solid transparent; box-shadow: none; transition: background 0.18s, color 0.18s, box-shadow 0.18s; user-select: none; white-space: nowrap; width: 100%; } .tab:hover { color: var(--text-primary); background: var(--bg-surface-hover); } .tab.active { background: var(--input-bg); color: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,0.10); border-color: var(--border); } /* Tab icon slot */ .tab-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 1; color: var(--text-primary); transition: opacity 0.18s, color 0.18s; } .tab.active .tab-icon, .tab:hover .tab-icon { opacity: 1; } .tab.active .tab-icon { color: var(--blue); } /* Active indicator bar */ .tab.active::before { content: ''; display: block; width: 3px; height: 18px; background: var(--blue); border-radius: 2px; margin-right: -2px; margin-left: -6px; flex-shrink: 0; box-shadow: 0 0 8px var(--blue-glow); } /* ── Main content area ──────────────────────── */ .app-main { flex: 1; padding: 40px 40px 80px; min-width: 0; margin-left: var(--sidebar-w); } /* ── Tab content panels ─────────────────────── */ .tab-content { display: none; } .tab-content.active { display: block; opacity: 1; animation: tabFadeIn 0.22s ease; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Card ───────────────────────────────────── */ .card { background: transparent; border: none; border-radius: 0; padding: 27px 0; box-shadow: none; margin-bottom: 0; position: relative; overflow: visible; isolation: auto; } /* Remove glass layer */ .card::after { display: none; } /* Remove top highlight */ .card::before { display: none; } .card-title { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); } .card-title::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 25%, transparent 100%); border-radius: 1px; } /* Light mode: slightly thicker line so it reads with the same presence the 2px line has against the dark theme's near-black background. */ [data-theme="light"] .card-title::after { height: 3px; border-radius: 1.5px; } /* ── Buttons ────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.4px; cursor: pointer; transition: all 0.2s; border: none; white-space: nowrap; } .btn:disabled { opacity: 0.6; } .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 20px var(--blue-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(24, 119, 242, 0.5); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { background: transparent; color: var(--blue-light); border: 1px solid rgba(24, 119, 242, 0.5); } .btn-secondary:hover { background: rgba(24, 119, 242, 0.12); border-color: rgba(24, 119, 242, 0.55); color: var(--blue); } .btn-warning { background: #f97316 !important; color: #fff !important; border: none !important; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.45); } .btn-warning:hover { transform: translateY(-1px); background: #fb923c !important; box-shadow: 0 8px 30px rgba(249, 115, 22, 0.6); } .btn-warning:active { transform: translateY(0); } /* ── Action buttons (copy, edit, delete) ────── */ .btn-action { width: 32px; height: 32px; min-width: 32px; flex-shrink: 0; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.18s; border: 1px solid transparent; background: transparent; } .btn-action.copy { background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); color: var(--accent); } .btn-action.copy:hover { background: rgba(0, 212, 255, 0.2); border-color: var(--accent); box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); } .btn-action.reset { background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.3); color: var(--accent); } .btn-action.reset:hover { background: rgba(0, 212, 255, 0.2); border-color: var(--accent); box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); } .btn-action.edit { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.35); color: #f97316; } .btn-action.edit:hover { background: rgba(249, 115, 22, 0.25); border-color: #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.2); } .btn-action.del { background: rgba(255, 77, 109, 0.12); border-color: rgba(255, 77, 109, 0.35); color: var(--danger); } .btn-action.del:hover { background: rgba(255, 77, 109, 0.25); border-color: var(--danger); box-shadow: 0 0 10px rgba(255, 77, 109, 0.2); } /* Light mode: tinted backgrounds need higher alpha + deeper text colour to avoid looking washed-out against a white page. */ [data-theme="light"] .btn-action.copy, [data-theme="light"] .btn-action.reset { background: rgba(8, 145, 178, 0.14); border-color: rgba(8, 145, 178, 0.45); color: #0e7490; } [data-theme="light"] .btn-action.copy:hover, [data-theme="light"] .btn-action.reset:hover { background: rgba(8, 145, 178, 0.25); border-color: #0891b2; box-shadow: 0 0 10px rgba(8, 145, 178, 0.22); } [data-theme="light"] .btn-action.edit { background: rgba(249, 115, 22, 0.2); border-color: rgba(249, 115, 22, 0.65); color: #9a3412; } [data-theme="light"] .btn-action.edit:hover { background: rgba(249, 115, 22, 0.32); border-color: #c2410c; box-shadow: 0 0 12px rgba(249, 115, 22, 0.3); } [data-theme="light"] .btn-action.del { background: rgba(225, 29, 72, 0.14); border-color: rgba(225, 29, 72, 0.5); color: #be123c; } [data-theme="light"] .btn-action.del:hover { background: rgba(225, 29, 72, 0.26); border-color: #e11d48; box-shadow: 0 0 10px rgba(225, 29, 72, 0.22); } /* ── Role pills (admin / team_lead / user) ──── */ .role-pill { display: inline-block; font-size: 11px; font-family: var(--font-data); font-weight: 500; border-radius: 20px; padding: 2px 10px; border: 1px solid transparent; white-space: nowrap; } .role-pill.admin { background: rgba(24, 119, 242, 0.14); color: var(--blue-light); border-color: rgba(24, 119, 242, 0.3); } .role-pill.team-lead { background: rgba(139, 92, 246, 0.14); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); } .role-pill.user { background: rgba(234, 179, 8, 0.14); color: #facc15; border-color: rgba(234, 179, 8, 0.3); } /* Light mode: bump saturation so pills don't look washed out on white */ [data-theme="light"] .role-pill.admin { background: rgba(24, 119, 242, 0.14); color: #1e5fcf; border-color: rgba(24, 119, 242, 0.45); } [data-theme="light"] .role-pill.team-lead { background: rgba(139, 92, 246, 0.14); color: #7c3aed; border-color: rgba(139, 92, 246, 0.45); } [data-theme="light"] .role-pill.user { background: rgba(234, 179, 8, 0.16); color: #a16207; border-color: rgba(234, 179, 8, 0.5); } /* ── Form elements ──────────────────────────── */ .form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; } /* Cards that end with a .form-row were rendering ~18px of dead space below the last row, making gaps between Basic Setup sections look uneven. Strip the margin when the row has nothing after it. */ .form-row:last-child { margin-bottom: 0; } .form-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 130px; } .form-field.narrow { flex: 0 0 auto; } .field-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); } .field-desc { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-data); margin-top: 8px; line-height: 1.6; background: rgba(24, 119, 242, 0.06); border-left: 3px solid var(--blue); border-radius: 0; padding: 12px 14px; transition: color 0.2s; } /* Light-mode info panels need more presence — the dark-mode subtle blue tint on near-black reads as a glow, but on light page becomes invisible. Bump the alpha so the panel reads as a clear callout, but keep the exact same shape as dark mode (no extra borders, no full radius). */ [data-theme="light"] .field-desc { background: rgba(24, 119, 242, 0.10); color: rgba(15, 23, 42, 0.78); } /* Light-mode-only: subtle 1px shadow on form wells so they read as physical elements sitting on the page rather than flat shapes cut out of it. Dark mode already has enough luminance contrast between wells and page bg. */ [data-theme="light"] .f-input, [data-theme="light"] .f-select-trigger, [data-theme="light"] .stepper-wrap, [data-theme="light"] .input-prefix-wrap, [data-theme="light"] .checkbox-card, [data-theme="light"] .sched-day { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Input with prefix */ .input-prefix-wrap { display: flex; align-items: center; width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; overflow: hidden; } .input-prefix-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18); } .input-prefix { padding: 11px 12px 11px 14px; font-family: var(--font-data); font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; user-select: none; border-right: 1px solid var(--input-border); } .f-input-prefixed { flex: 1; min-width: 0; background: transparent; border: none; box-shadow: none !important; border-radius: 0; outline: none; padding: 11px 14px 11px 12px; color: var(--text-primary); font-family: var(--font-ui); font-size: 14px; font-weight: 500; width: 100%; -webkit-appearance: none; appearance: none; } .f-input-prefixed::placeholder { color: var(--text-muted); } .f-input-prefixed:focus { background: transparent; border: none; box-shadow: none !important; } /* Input */ .f-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 11px 14px; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; -webkit-appearance: none; appearance: none; } .f-input::placeholder { color: var(--text-muted); } .f-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18); } /* Override browser autofill white background */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 999px var(--input-bg) inset !important; box-shadow: 0 0 0 999px var(--input-bg) inset !important; -webkit-text-fill-color: var(--text-primary) !important; caret-color: var(--text-primary); transition: background-color 99999s ease-in-out 0s; } /* Textarea */ .text-row .text-geo .f-select-trigger { height: 44px; box-sizing: border-box; } .text-row input.f-input { height: 44px; box-sizing: border-box; } textarea.f-input { display: flex; align-items: center; box-sizing: border-box; vertical-align: top; line-height: 1.43; min-height: 44px; overflow: hidden; resize: none; padding-top: 13px; } /* ── Custom Dropdown ────────────────────────── */ .f-select { position: relative; user-select: none; width: 100%; } .f-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .f-select-trigger:hover { background: var(--input-bg-hover); border-color: var(--input-border-hover); } .f-select.open .f-select-trigger { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18); } .f-select-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s, color 0.2s; } .f-select.open .f-select-chevron { transform: rotate(180deg); color: var(--blue-light); } .f-select-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: var(--radius-md); box-shadow: var(--dropdown-shadow); z-index: 999; overflow: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } /* When the trigger doesn't have room below, open upward instead. */ .f-select.flip-up .f-select-dropdown { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); } .f-select-dropdown-inner { max-height: 280px; overflow-y: auto; } .f-select.open .f-select-dropdown, .f-select-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: all; } .f-select-option { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; border-bottom: 1px solid var(--dropdown-sep); } .f-select-option:last-child { border-bottom: none; } .f-select-option:hover { background: rgba(24, 119, 242, 0.12); color: var(--text-primary); } .f-select-option.selected { color: var(--blue-light); background: rgba(24, 119, 242, 0.08); } .f-select-option.selected::after { content: ''; width: 6px; height: 11px; border-right: 2px solid var(--blue-light); border-bottom: 2px solid var(--blue-light); transform: rotate(45deg) translateY(-2px); display: block; flex-shrink: 0; } /* Hidden native select kept for form compatibility */ .f-select select { display: none; } /* Number stepper */ .stepper-wrap { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .stepper-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.18); } .stepper-btn { width: 38px; height: 42px; background: transparent; border: none; color: var(--text-muted); font-size: 18px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; user-select: none; font-family: var(--font-data); } .stepper-btn:hover { color: #fff; background: rgba(24, 119, 242, 0.16); } .stepper-btn:active { background: rgba(24, 119, 242, 0.28); } .stepper-divider { width: 1px; height: 22px; background: var(--input-border); flex-shrink: 0; } .stepper-input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-data); font-size: 15px; font-weight: 500; text-align: center; outline: none; padding: 0 2px; min-width: 44px; -webkit-appearance: textfield; appearance: textfield; } .stepper-input::-webkit-inner-spin-button, .stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; } /* Toggle switch */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; inset: 0; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 24px; transition: 0.28s; } .toggle-thumb { position: absolute; height: 16px; width: 16px; left: 4px; top: 50%; transform: translateY(-50%); background: var(--toggle-thumb-bg); border-radius: 50%; transition: left 0.28s, background 0.28s; } .toggle-switch input:checked ~ .toggle-track { background: var(--blue); border-color: transparent; box-shadow: 0 0 14px var(--blue-glow); } .toggle-switch input:checked ~ .toggle-thumb { left: calc(100% - 20px); background: #fff; } .text-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; } .text-row-wrap + .text-row-wrap { margin-top: 8px; } .os-btn { color: var(--text-secondary); } .os-btn svg { color: inherit; } .os-btn:hover { border-color: var(--blue); color: var(--blue-light); background: rgba(24,119,242,0.07) !important; } .os-btn.active { border-color: var(--blue); color: var(--blue-light); background: rgba(24,119,242,0.12) !important; box-shadow: 0 0 0 1px var(--blue); } /* Macro highlighting */ .macro-editable { min-height: 44px; cursor: text; white-space: nowrap; overflow: hidden; outline: none; line-height: 1.4; } .macro-editable:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; } .macro-token { color: var(--accent); font-weight: inherit; font-family: inherit; font-size: inherit; } .text-row .text-field { flex: 1; position: relative; } .text-badge { display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-family: var(--font-data); } /* ── Creative grid ──────────────────────────── */ .creative-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .creative-grid:empty { margin-top: 0; } .creative-thumb { position: relative; width: 180px; height: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #111; flex-shrink: 0; transition: border-color 0.2s; } .creative-thumb:hover { border-color: var(--blue); } .creative-thumb video, .creative-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Loading placeholder */ .loading-thumb { border-color: var(--border); } .thumb-loading-anim { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .thumb-loading-anim::after { content: ''; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--blue); animation: spin 0.8s linear infinite; } .creative-thumb .thumb-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; border: none; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .creative-thumb .thumb-remove:hover { background: var(--danger); } .creative-thumb .thumb-name { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.85); font-size: 10px; font-family: var(--font-data); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .checkbox-card { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); cursor: pointer; transition: all 0.2s; user-select: none; } .checkbox-card:hover { border-color: rgba(24, 119, 242, 0.35); background: var(--input-bg-hover); } .checkbox-card input[type="checkbox"] { display: none; } .cb-box { width: 17px; height: 17px; border: 1.5px solid var(--input-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .checkbox-card:has(input:checked) .cb-box { background: var(--blue); border-color: transparent; box-shadow: 0 0 10px var(--blue-glow); } .checkbox-card:has(input:checked) .cb-box::after { content: ''; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-1px); display: block; } .checkbox-card:has(input:checked) { border-color: rgba(24, 119, 242, 0.35); background: rgba(24, 119, 242, 0.07); } .cb-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .checkbox-card:has(input:checked) .cb-label { color: var(--text-primary); } .cb-icon { font-size: 16px; width: 20px; height: 20px; flex-shrink: 0; } .file-upload-zone { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px dashed rgba(24, 119, 242, 0.5); border-radius: var(--radius-md); background: rgba(24, 119, 242, 0.04); cursor: pointer; transition: all 0.22s; width: 100%; } .file-upload-zone:hover, .file-upload-zone.drag-over { border-color: var(--blue); background: rgba(24, 119, 242, 0.07); box-shadow: 0 0 20px rgba(24, 119, 242, 0.1); } .file-upload-zone input[type="file"] { display: none; } .file-upload-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1; margin-bottom: 5px; } .file-upload-browse { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; } .file-upload-hint { font-size: 11px; color: var(--text-muted); font-family: var(--font-data); letter-spacing: 0.3px; } .file-upload-name { margin-left: auto; font-size: 12px; font-family: var(--font-data); color: var(--blue-light); background: rgba(24, 119, 242, 0.1); border: 1px solid rgba(24, 119, 242, 0.2); border-radius: var(--radius-sm); padding: 4px 10px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Section helpers ────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); } .empty-state { padding: 40px 24px; text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-data); } /* ── Params (query parameter rows) ─────────── */ #paramsList { display: flex; flex-direction: column; } .param-row-wrap + .param-row-wrap { margin-top: 8px; } .param-row { display: flex; align-items: center; gap: 8px; width: 100%; } .param-row .param-key, .param-row .param-val { flex: 1; position: relative; min-width: 0; } .param-equals { font-size: 16px; color: var(--text-muted); font-family: var(--font-data); flex-shrink: 0; user-select: none; } .param-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-family: var(--font-data); } /* ── URL preview ────────────────────────────── */ .url-preview-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); margin-bottom: 8px; margin-top: 16px; } .url-preview { background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-data); font-size: 14px; color: var(--text-secondary); word-break: break-all; line-height: 1.6; } .url-preview .url-base { color: var(--text-primary); } .url-preview .url-sep { color: var(--text-secondary); } .url-preview .url-key { color: var(--blue-light); } .url-preview .url-val { color: var(--accent); } /* ── Table ──────────────────────────────────── */ .table-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--panel-row-sep); } table.data-table { border-collapse: collapse; width: 100%; table-layout: fixed; } table.data-table thead tr { background: var(--panel-bg); } table.data-table th { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); padding: 12px 16px; border-bottom: 1px solid var(--panel-row-sep); text-align: left; white-space: nowrap; } table.data-table td { padding: 13px 16px; font-size: 13px; font-family: var(--font-data); color: var(--text-primary); border-bottom: 1px solid var(--panel-row-sep); vertical-align: middle; max-width: 0; } table.data-table td:first-child { width: 100%; max-width: 0; word-break: break-all; white-space: normal; } table.data-table tr:last-child td { border-bottom: none; } table.data-table tbody tr { transition: background 0.15s; } table.data-table tbody tr:hover td { background: var(--panel-row-hover); color: var(--text-primary); } table.data-table td:last-child, table.data-table th:last-child { white-space: nowrap; width: 140px; text-align: right; padding-right: 28px; } .row-actions { display: flex; gap: 10px; justify-content: flex-end; margin-left: 16px; } /* ── Scrollbar ──────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(24, 119, 242, 0.25); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(24, 119, 242, 0.45); } /* ── Status messages (validation, save success/failure) ──── */ .status-msg { font-size: 13px; font-family: var(--font-data); font-weight: 400; color: var(--text-muted); letter-spacing: 0.3px; min-height: 18px; transition: color 0.2s; } .status-msg .status-glyph { font-size: 18px; margin-right: 6px; vertical-align: -2px; } .status-msg.ok { color: var(--success); } .status-msg.err { color: var(--danger); } #rpStatus { color: var(--text-primary); } /* ── Reports: metric cards ───────────────────── */ .metric-card { padding: 20px 24px; background: var(--bg-surface); border: 1px solid var(--panel-row-sep); border-radius: var(--radius-md); } .metric-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); font-family: var(--font-data); margin-bottom: 10px; } .metric-value { font-size: 26px; font-weight: 700; color: var(--text-primary); } /* ── Reports row presets ─────────────────────── */ .rp-preset { font-size: 12px; font-family: var(--font-data); padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); cursor: pointer; transition: all 0.15s; } .rp-preset:hover { border-color: var(--blue); color: var(--blue-light); } .rp-preset.active { border-color: var(--blue); color: var(--blue-light); background: rgba(24,119,242,0.12); } .rp-cal-dow { font-size: 10px; color: var(--text-muted); font-family: var(--font-data); padding: 4px 0; text-align: center; } .rp-cal-day { font-size: 12px; font-family: var(--font-data); padding: 6px 0; border-radius: 6px; cursor: pointer; color: var(--text-secondary); text-align: center; transition: background 0.12s, color 0.12s; } .rp-cal-day:hover { background: var(--bg-surface-hover); color: var(--text-primary); } .rp-cal-day.rp-in-range { background: rgba(24,119,242,0.15); color: var(--blue-light); } .rp-cal-day.rp-edge { background: var(--blue); color: #fff; font-weight: 700; } .rp-cal-day.rp-other { color: var(--text-muted); } /* ── Sidebar profile active state ────────────── */ #sidebarProfile.active { background: rgba(24, 119, 242, 0.12); border-color: var(--blue) !important; color: var(--blue-light); } #sidebarProfile.active #profileBuyerId { color: var(--blue-light); } /* ── Theme switcher ──────────────────────────── */ .theme-switcher { display: flex; align-items: stretch; width: 100%; padding: 3px; margin: 0 auto 12px; background: var(--bg-surface); border: 1px solid var(--panel-row-sep); border-radius: 999px; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; } .theme-switcher-pill { position: absolute; top: 3px; bottom: 3px; width: calc(50% - 3px); left: 3px; border-radius: 999px; background: var(--theme-switch-pill); transition: left 0.22s ease; } [data-theme="light"] .theme-switcher-pill { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10); } .theme-switcher-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; z-index: 1; color: var(--text-primary); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; transition: color 0.22s; } .theme-switcher-opt.active { color: var(--theme-switch-active); } /* ── Sign out button ─────────────────────────── */ .btn-signout { background: transparent; border: none; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); transition: color 0.2s, background 0.2s; } .btn-signout:hover { color: var(--danger); background: rgba(225, 29, 72, 0.1); } /* ── Ad Scheduling ───────────────────────────── */ .sched-day { font-size: 12px; line-height: 1.43; /* gives same total height as 14px text @ default line-height */ font-family: var(--font-ui); font-weight: 500; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); cursor: pointer; transition: all 0.15s; } .sched-day:hover { border-color: var(--blue); color: var(--blue-light); } .sched-day.active { border-color: var(--blue); color: var(--blue-light); background: rgba(24,119,242,0.12); } /* Geo selector placeholder muted color */ #geoSelect:not(.selected) .f-select-trigger, .text-geo-select:not(.selected) .f-select-trigger { color: var(--text-muted); } /* Role and Team Lead selectors placeholder muted color */ #newUserRoleSelect:not(.selected) .f-select-trigger, #newUserTeamLeadSelect:not(.selected) .f-select-trigger { color: var(--text-muted); } /* ── Reports: Group By & Filter ──────────────── */ /* Controls row (Group By / Filter label + chain + action btn) */ .rp-controls-row { display: flex; align-items: center; gap: 10px; overflow: visible; } .rp-controls-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-primary); font-family: var(--font-data); flex-shrink: 0; min-width: 52px; } /* Calendar trigger — uses same shape as inputs */ .rp-cal-trigger { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); cursor: pointer; font-size: 13px; font-family: var(--font-data); color: var(--text-primary); transition: border-color 0.2s, background 0.2s; } .rp-cal-trigger:hover { border-color: var(--input-border-hover); background: var(--input-bg-hover); } /* Chain scroll wrapper — scrolls horizontally, never clips shadow */ .rp-chain { flex: 1; min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; display: flex; align-items: center; padding: 4px 2px; /* room for box-shadow to breathe */ margin: -4px -2px; } .rp-chain::-webkit-scrollbar { display: none; } /* Inner flex row — overflow visible so dropdowns escape clip */ .rp-chain-inner { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: visible; min-width: 100%; } /* Group-by selectors: auto width, never stretch */ .rp-chain .f-select, .rp-chain-inner .f-select { width: auto; flex-shrink: 0; overflow: visible; } .rp-chain .f-select-trigger, .rp-chain-inner .f-select-trigger { width: auto; white-space: nowrap; padding-right: 0; } .rp-chain-inner .f-select-dropdown { min-width: 160px; right: auto; } /* Arrow between group-by levels */ .rp-chain-arrow { font-size: 12px; color: var(--text-muted); font-family: var(--font-data); user-select: none; flex-shrink: 0; } /* Add-level circle button */ .rp-add-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--input-border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 20px; font-weight: 300; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; line-height: 0; padding: 0; padding-bottom: 1px; font-family: var(--font-data); } .rp-add-btn:hover { border-color: var(--blue); color: var(--blue-light); } /* Filter icon-only button */ .rp-filter-icon-btn { display: flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; } .rp-filter-icon-btn:hover { border-color: var(--blue); color: var(--blue-light); background: rgba(24, 119, 242, 0.08); } .rp-filter-icon-btn.active { border-color: var(--blue); color: var(--blue-light); background: rgba(24, 119, 242, 0.1); } /* Group-by remove button sits inside the f-select-trigger */ .rp-group-remove { background: transparent; border: none; border-left: 1px solid var(--input-border); color: var(--text-muted); cursor: pointer; padding: 0 9px; font-size: 15px; display: flex; align-items: center; align-self: stretch; transition: color 0.15s, background 0.15s; margin-left: 4px; } .rp-group-remove:hover { color: var(--danger); background: rgba(255, 77, 109, 0.08); } /* Make f-select trigger in group-by chain show remove btn inline */ .rp-group-select-wrap .f-select-trigger { display: flex; align-items: center; padding-right: 0; } /* Filter chips */ .rp-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 11px; border-radius: 20px; background: rgba(24, 119, 242, 0.1); border: 1px solid rgba(24, 119, 242, 0.28); font-size: 11px; font-family: var(--font-data); color: var(--blue-light); white-space: nowrap; } .rp-filter-chip-remove { background: none; border: none; cursor: pointer; color: var(--blue-light); font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.6; transition: opacity 0.15s; } .rp-filter-chip-remove:hover { opacity: 1; } /* Filter panel field buttons — reuse sched-day style */ .rp-filter-field-btn { padding: 6px 13px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-secondary); font-size: 11px; font-family: var(--font-data); cursor: pointer; transition: all 0.15s; } .rp-filter-field-btn:hover { border-color: var(--blue); color: var(--blue-light); } .rp-filter-field-btn.active { border-color: var(--blue); color: var(--blue-light); background: rgba(24, 119, 242, 0.1); } /* Filter value multi-select items */ .rp-filter-values { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; } .rp-filter-val-item { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); cursor: pointer; font-size: 12px; font-family: var(--font-data); color: var(--text-secondary); transition: all 0.15s; user-select: none; } .rp-filter-val-item:hover { border-color: rgba(24,119,242,0.35); color: var(--text-primary); } .rp-filter-val-item.checked { border-color: var(--blue); color: var(--blue-light); background: rgba(24, 119, 242, 0.1); } .rp-filter-val-item.checked::before { content: ''; width: 5px; height: 9px; border-right: 2px solid var(--blue-light); border-bottom: 2px solid var(--blue-light); transform: rotate(45deg) translateY(-1px); display: block; flex-shrink: 0; } /* Light mode adjustments */ [data-theme="light"] .rp-filter-val-item.checked, [data-theme="light"] .rp-filter-field-btn.active, [data-theme="light"] .rp-group-select:focus-within, [data-theme="light"] .rp-group-select:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Sortable th */ #rpTable thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #rpTable thead th.sortable:hover { color: var(--blue-light); } #rpTable thead th .sort-arrow { margin-left: 5px; opacity: 0.35; font-size: 9px; } #rpTable thead th.sort-asc .sort-arrow, #rpTable thead th.sort-desc .sort-arrow { opacity: 1; color: var(--blue-light); } /* Total row */ #rpTable tbody tr.rp-total-row td { border-top: 2px solid var(--panel-row-sep); background: var(--panel-bg); } /* ── Users table: same design as Reports ── */ #usersTable { font-variant-numeric: tabular-nums; line-height: 1.4; } #usersTable td { max-width: none; width: auto; word-break: normal; white-space: nowrap; font-weight: 400; } #usersTable td:first-child { max-width: none; width: auto; word-break: normal; white-space: nowrap; } #usersTable th:last-child, #usersTable td:last-child { width: auto; text-align: right; } /* ── Reports table: scroll + nowrap ─────────── */ .rp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #rpTable { min-width: max-content; } #rpTable td, #rpTable th { white-space: nowrap; } #rpTable td { max-width: none; width: auto; word-break: normal; } #rpTable td:first-child { width: auto; max-width: none; word-break: normal; white-space: nowrap; } /* ── Reports table: typography ───────────────── */ :root { --font-table: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } #rpTable { font-family: var(--font-table); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; } #rpTable th { font-family: var(--font-table); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; } #rpTable td { font-family: var(--font-table); font-size: 13px; font-weight: 400; } #rpTable th, #rpTable td { text-align: center; } #rpTable th:first-child, #rpTable td:first-child { text-align: left; } #rpTable tbody tr.rp-total-row td { font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ COMPOSITION LAYER (migrated from inline styles) Everything below was previously hand-written as style="…" in main.html / root.html. Moved here so markup carries class names only. Order matters: component classes first, single-purpose utilities last, so a utility (e.g. .c-blue) always wins when both sit on one element. ═══════════════════════════════════════════════════════════════════ */ /* ── Sidebar bits ─────────────────────────────── */ .nav-divider { height: 1px; background: var(--panel-row-sep); margin-bottom: 12px; } .sidebar-profile-wrap { margin-top: auto; border-top: 1px solid var(--panel-row-sep); padding-top: 12px; } .sidebar-profile { border-radius: var(--radius-md); padding: 12px 14px; gap: 12px; } .profile-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 3px var(--blue-glow); } .profile-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .profile-role-mini { font-size: 10px; font-family: var(--font-data); letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.6; } /* ── Info callouts (the blue .field-desc blocks) ─ */ .field-desc--col { flex-direction: column; align-items: flex-start; gap: 10px; } .callout-icon { color: var(--blue-light); flex-shrink: 0; } .callout-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-data); font-weight: 500; color: var(--blue-light); } .callout-text { font-size: 12px; color: var(--text-secondary); line-height: 1.6; } .callout-mono { font-family: var(--font-ui); font-size: 12px; line-height: 1.8; color: var(--text-secondary); } .callout-mono-sm { font-size: 12px; line-height: 1.6; font-family: var(--font-ui); color: var(--text-secondary); } /* ── Toggle rows / conditional fields ─────────── */ .toggle-status { font-size: 11px; font-family: var(--font-data); font-weight: 700; color: var(--text-muted); } /* ── Search field (Templates → User Link) ─────── */ .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-md); z-index: 20; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ── OS picker (Android / iOS / Both) ─────────── */ /* base box was triplicated inline; folded into the existing .os-btn */ .os-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px; flex: 1; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface); cursor: pointer; transition: all 0.2s; } .os-btn-label { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } /* ── Creative / thumbnail upload zones ────────── */ .file-upload-zone--center { flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; gap: 10px; } .thumb-cols { display: flex; gap: 24px; align-items: flex-start; } .thumb-upload-zone { width: 160px; height: 300px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 20px; gap: 12px; } .thumb-del-btn { position: absolute; top: 8px; right: 8px; z-index: 2; } .thumb-preview { height: 300px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); line-height: 0; display: flex; align-items: center; justify-content: center; } /* ── Schedule grid ────────────────────────────── */ .sched-grid { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; } /* ── Reports: toolbar / calendar / presets ────── */ .rp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rp-cal-drop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100; background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; width: 300px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); } .rp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .rp-cal-navbtn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; line-height: 1; } .rp-cal-title { font-size: 13px; font-weight: 600; font-family: var(--font-ui); color: var(--text-primary); } .rp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .rp-cal-hint { margin-top: 12px; font-size: 11px; color: var(--text-muted); font-family: var(--font-data); text-align: center; } .rp-presets { display: flex; gap: 6px; flex-wrap: wrap; } /* ── Reports: metric grid ─────────────────────── */ .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; } /* ── Generic table message cell (empty / loading) ─ */ .table-msg { text-align: center; color: var(--text-muted); font-family: var(--font-data); font-size: 12px; } /* ── Profile page ─────────────────────────────── */ .profile-page { max-width: 640px; position: relative; } .profile-glow { position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(24,119,242,0.08) 0%, transparent 70%); pointer-events: none; } .profile-header { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--panel-row-sep); margin-bottom: 24px; } .avatar-gradient { background: linear-gradient(135deg, #1877F2, #00d4ff); } .profile-avatar-lg { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 20px rgba(24,119,242,0.35); } .profile-name { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; line-height: 1.2; } .profile-buyerid { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-buyerid-sub { font-size: 12px; font-family: var(--font-data); color: var(--text-primary); } .profile-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .profile-info-cell { padding: 14px 16px; background: var(--bg-surface); border-radius: var(--radius-sm); border: 1px solid var(--panel-row-sep); } .profile-info-label { font-size: 10px; font-family: var(--font-data); color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .profile-info-value { font-size: 14px; font-weight: 600; color: var(--text-primary); } /* ── Extension card (inside profile) ──────────── */ .ext-card { padding: 20px; background: rgba(24,119,242,0.06); border-radius: var(--radius-sm); border: 1px solid rgba(24,119,242,0.35); margin-bottom: 28px; } .ext-card-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .ext-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(24,119,242,0.35); } .ext-title { font-size: 14px; font-weight: 700; color: var(--text-primary); } .ext-platform { font-size: 10px; font-family: var(--font-data); color: var(--text-primary); } .ext-version { font-size: 11px; font-weight: 700; font-family: var(--font-data); background: rgba(24,119,242,0.15); color: var(--blue-light); border: 1px solid rgba(24,119,242,0.3); border-radius: 20px; padding: 1px 8px; } .ext-download { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ext-download.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ── Modals ───────────────────────────────────── */ .modal-overlay { display: none; /* default state; JS flips to flex */ position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; animation: modalOverlayIn 0.2s ease; } .modal-box { animation: modalBoxIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalBoxIn { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-overlay--top { z-index: 1001; } .modal-box { background: var(--dropdown-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px; max-width: 420px; width: 90%; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5); } .modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .modal-sub { font-size: 12px; color: var(--text-primary); font-family: var(--font-data); margin-bottom: 20px; } .modal-actions { display: flex; gap: 12px; } /* Password-reveal modal */ .pw-value { font-family: var(--font-data); font-size: 15px; font-weight: 600; color: var(--accent); background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.2); border-radius: var(--radius-sm); padding: 14px 44px 14px 16px; white-space: nowrap; overflow-x: auto; user-select: none; scrollbar-width: none; -ms-overflow-style: none; } .pw-value::-webkit-scrollbar { display: none; } .pw-copy-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .pw-copied { font-size: 11px; color: var(--success); font-family: var(--font-data); text-align: center; margin-top: 10px; margin-bottom: 10px; height: 16px; } /* Confirmation modal */ .confirm-title { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .confirm-body { font-size: 13px; color: var(--text-primary); line-height: 1.6; margin-bottom: 28px; } /* Destructive button — uses the danger token instead of a hard-coded red */ .btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 16px rgba(225, 29, 72, 0.35); } .btn-danger:hover { transform: translateY(-1px); } .btn-danger:active { transform: translateY(0); } /* ── Card modifiers (replacing inline padding overrides) ─ */ .card--pt20 { padding-top: 20px; margin-top: 30px; } .card--pb0 { padding-bottom: 0; } /* Placements card collapse — animated, driven by JS (max-height/opacity) */ .placements-card { opacity: 0; padding: 0; } /* ═══════════════════════════════════════════════ UTILITY LAYER (single-purpose, declared last so they win) ═══════════════════════════════════════════════ */ /* Flex rows */ .flex-center-6 { display: flex; align-items: center; gap: 6px; } .flex-center-8 { display: flex; align-items: center; gap: 8px; } .flex-center-12 { display: flex; align-items: center; gap: 12px; } .flex-center-14 { display: flex; align-items: center; gap: 14px; } .flex-gap-10 { display: flex; gap: 10px; } .flex-wrap-8 { display: flex; gap: 8px; flex-wrap: wrap; } .col-gap-8 { display: flex; flex-direction: column; gap: 8px; } .save-row { display: flex; align-items: center; gap: 16px; padding: 0 0 27px; } .wrap { flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } .items-end{ align-items: flex-end; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .flex-1 { flex: 1; } .f-none { flex: 0 0 auto; } .shrink-0 { flex-shrink: 0; } /* Positioning / misc */ .pos-rel { position: relative; } .cursor-pointer { cursor: pointer; } .ml-auto { margin-left: auto; } .m-0 { margin: 0; } /* Spacing — margin top */ .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-14 { margin-top: 14px; } .mt-18 { margin-top: 18px; } .mt-20 { margin-top: 20px; } .mt-27 { margin-top: 27px; } /* margin bottom */ .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } /* padding */ .pt-18 { padding-top: 18px; } .pr-36 { padding-right: 36px; } /* Field-label as a block with bottom gap */ .label-block { display: block; margin-bottom: 10px; } /* Widths */ .w-full { width: 100%; } .w-90 { width: 90px; } .w-120 { width: 120px; } .w-128 { width: 128px; } .w-130 { width: 130px; } .w-135 { width: 135px; } .w-155 { width: 155px; } .w-160 { width: 160px; } .w-400 { width: 400px; } .w-160-fixed { min-width: 160px; max-width: 160px; } .w-178 { width: 178px; } .w-215 { width: 215px; } .field-flex-140 { flex: 1; min-width: 140px; } .table-auto { table-layout: auto; } /* Table message paddings */ .pad-32 { padding: 32px; } .pad-40 { padding: 40px; } /* Fade transition for show/hide fields (JS toggles display+opacity) */ .fade-field { transition: opacity 0.3s ease; } /* Type / colour helpers */ .mono { font-family: var(--font-data); } .c-blue { color: var(--blue-light); } .c-accent { color: var(--accent); } .c-muted-11 { font-size: 11px; color: var(--text-muted); } .mono-blue { color: var(--accent); font-family: var(--font-data); } .emoji-lg { font-size: 28px; } /* ═══════════════════════════════════════════════ LOGIN PAGE (migrated out of root.html's