/* ========================================================= Media Buyer Portal — Dual Theme (Dark default + Light) --------------------------------------------------------- How to force light theme: How to force dark theme: If no data-theme is set, OS preference applies. ========================================================= */ /* ---------- CSS Variables (Dark is default) ---------- */ :root { /* surface & text */ --bg: #0b1220; --card: #121a2b; --text: #e5e7eb; --text-muted: #cbd5e1; --border: #1f2937; --input-bg: #0f172a; /* brand & state */ --primary: #3b82f6; --primary-contrast: #ffffff; --danger: #ef4444; --danger-contrast: #ffffff; --success: #10b981; --warning: #f59e0b; /* shadows */ --shadow-1: 0 10px 30px rgba(0,0,0,.25); --shadow-2: 0 16px 40px rgba(0,0,0,.35); /* misc */ --radius-lg: 16px; --radius-md: 12px; --radius-pill: 999px; --focus-ring: 0 0 0 3px rgba(59,130,246,.35); --transition-fast: .15s ease; --transition-med: .2s ease; } /* ---------- Light Theme Overrides ---------- */ html[data-theme="light"] { --bg: #f7f8fb; --card: #ffffff; --text: #0b1220; --text-muted: #516079; --border: #e6e9f0; --input-bg: #ffffff; --primary: #2563eb; --primary-contrast: #ffffff; --danger: #dc2626; --danger-contrast: #ffffff; --success: #059669; --warning: #d97706; --shadow-1: 0 10px 28px rgba(15, 23, 42, .08); --shadow-2: 0 18px 46px rgba(15, 23, 42, .12); --focus-ring: 0 0 0 3px rgba(37,99,235,.25); } /* Respect OS preference if no explicit data-theme is set */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f7f8fb; --card: #ffffff; --text: #0b1220; --text-muted: #516079; --border: #e6e9f0; --input-bg: #ffffff; --primary: #2563eb; --primary-contrast: #ffffff; --danger: #dc2626; --danger-contrast: #ffffff; --success: #059669; --warning: #d97706; --shadow-1: 0 10px 28px rgba(15, 23, 42, .08); --shadow-2: 0 18px 46px rgba(15, 23, 42, .12); --focus-ring: 0 0 0 3px rgba(37,99,235,.25); } } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ---------- Layout ---------- */ .container { max-width: 90%; margin: 40px auto; padding: 0 20px; } .nav { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .badge { display: inline-block; padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--card), var(--bg) 30%); border: 1px solid var(--border); color: var(--text); transition: background var(--transition-fast), transform var(--transition-fast); } .badge:hover { transform: translateY(-1px); } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1); transition: transform var(--transition-med), box-shadow var(--transition-med); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* ---------- Typography ---------- */ .h1 { font-size: 28px; margin: 0 0 16px; } .muted { color: var(--text-muted); } /* ---------- Form & Fields ---------- */ .form { display: flex; flex-direction: column; gap: 8px; } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .field label { font-weight: 600; color: var(--text); } .input, .select, .textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); outline: none; transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .input:focus, .select:focus, .textarea:focus { box-shadow: var(--focus-ring); border-color: color-mix(in oklab, var(--primary), #ffffff 25%); } .textarea { resize: vertical; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--border), var(--text) 12%); background: linear-gradient(180deg, color-mix(in oklab, var(--card), #000 8%), color-mix(in oklab, var(--card), #000 14%)); color: var(--text); cursor: pointer; transition: transform var(--transition-fast), opacity var(--transition-med), box-shadow var(--transition-fast); } .btn:hover { transform: translateY(-1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn[disabled] { opacity: .6; cursor: not-allowed; } .btn-primary { background: linear-gradient(180deg, color-mix(in oklab, var(--primary), #000 2%), color-mix(in oklab, var(--primary), #000 10%)); border-color: color-mix(in oklab, var(--primary), #000 15%); color: var(--primary-contrast); } .btn-danger { background: linear-gradient(180deg, color-mix(in oklab, var(--danger), #000 2%), color-mix(in oklab, var(--danger), #000 10%)); border-color: color-mix(in oklab, var(--danger), #000 15%); color: var(--danger-contrast); } /* ---------- Validation & Helpers ---------- */ .err { color: var(--danger); font-size: 12px; opacity: .95; animation: fadeIn .25s ease; } .success { color: var(--success); } .fade-in { animation: fadeIn .35s ease; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } /* ---------- Toasts ---------- */ #toast { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; } .toast { min-width: 260px; background: var(--card); border: 1px solid var(--border); border-left: 6px solid var(--primary); padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-1); opacity: 0; transform: translateY(-8px); animation: slideIn .25s ease forwards; color: var(--text); } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.warn { border-left-color: var(--warning); } @keyframes slideIn { to { opacity: 1; transform: translateY(0) } } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size:14px;} .table thead th { text-align: left; padding: 10px 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; } .table tbody td { background: var(--input-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 12px; vertical-align: top; } .table tbody tr:first-child td { border-top-left-radius: 10px; border-top-right-radius: 10px; } .table tbody tr:last-child td { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .child-row td { background: color-mix(in oklab, var(--bg), var(--card) 60%); } /* “Compact” table option (optional) */ .table.compact thead th, .table.compact tbody td { padding: 8px 10px; } /* ---------- File Chips (uploads) ---------- */ .file-chip { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 6px 10px; margin: 4px 8px 4px 0; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: none; } .file-chip a { color: var(--text); text-decoration: none; } .file-chip a:hover { text-decoration: underline; } .file-chip .file-del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 16px; border: 1px solid color-mix(in oklab, var(--border), var(--text) 10%); border-radius: 50%; background: color-mix(in oklab, var(--card), var(--bg) 25%); color: var(--text); cursor: pointer; font-weight: 700; transform: scale(1); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .file-chip .file-del:hover { transform: scale(1.05); } .file-chip .file-del:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ---------- Modal (used by admin) ---------- */ .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 9998; } .modal.show { display: flex; } .modal .dialog { width: 640px; max-width: 95vw; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-2); } .modal .title { font-size: 20px; font-weight: 700; margin: 0 0 10px; } .modal .body { margin-bottom: 12px; } /* ---------- View switch (cards vs table) ---------- */ .view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; } .view-switch .btn { border: none; border-radius: 0; background: transparent; padding: 8px 12px; } .view-switch .btn.active { background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--border); } /* ---------- Utilities ---------- */ .grid { display: grid; gap: 12px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hr { height: 1px; background: var(--border); margin: 10px 0; } /* ---------- Small screens ---------- */ @media (max-width: 720px) { .container { margin: 24px auto; } .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .table { border-spacing: 0 6px; } } /* ---------- Print tweaks ---------- */ @media print { #toast, .nav, .actions, .btn { display: none !important; } .card { box-shadow: none; border-color: #ddd; } } .is-hidden { display: none; } .ta-right { text-align: right; } .toggle { border: 1px solid #374151; background: #111827; color: #e5e7eb; font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; margin-right: 6px; } .toggle:hover { filter: brightness(1.1); } /* alignment helper used above */ .ta-right { text-align: right; } /* Make the tint apply to the row’s cells only (your table uses spaced rows) */ .table tbody tr.row-negative > td, .table tbody tr.row-good > td, .table tbody tr.row-great > td, .table tbody tr.row-excellent > td { background-color: inherit; } /* Totals band */ .totals-row > th, .totals-row > td { background: rgba(255,255,255,.04); /* subtle for dark; light mode will be faint */ border-top: 1px solid #334155; } html.light .totals-row > th, html.light .totals-row > td { background: rgba(0,0,0,.035); border-top: 1px solid #e5e7eb; } body #rtResult tr th:not(:first-child), body #repOut tr th:not(:first-child) { text-align: right; } .table tfoot th{padding:10px;}