/* ── Auctus Ops canonical favicon (copy into every new page ) ──────── ───────────────────────────────────────────────────────────────────────── */ /* shared.css — Auctus Ops Dashboard common styles */ /* Auth overlay — shared across all dashboard pages */ #auth-overlay { display: flex; position: fixed; inset: 0; background: #000; z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 24px; } #auth-overlay .auth-brand { font-size: 18px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; } #auth-overlay .auth-brand span { color: #6DCCD1; } #auth-overlay-mount { min-width: 380px; } .auth-spinner { width: 28px; height: 28px; border: 2px solid rgba(109,204,209,0.25); border-top-color: #6DCCD1; border-radius: 50%; animation: auth-spin 0.75s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-status { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } /* ── Site header — shared across all dashboard pages ── */ .biq-hdr { position: sticky; top: 0; z-index: 200; background: rgba(8,8,14,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(109,204,209,.35); padding: 0 40px; height: 72px; display: flex; align-items: center; gap: 20px; box-shadow: 0 8px 32px rgba(0,0,0,.35); } .biq-hdr::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #6DCCD1 30%, #94D6DC 50%, #6DCCD1 70%, transparent); opacity: .7; } .biq-hdr-logo { display: flex; align-items: center; padding-right: 20px; border-right: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } .biq-hdr-logo svg { height: 34px; width: auto; display: block; } .biq-hdr-title { flex: 1; display: flex; flex-direction: column; gap: 2px; } .biq-hdr-name { font-size: 20px; line-height: 1; letter-spacing: .1em; color: #fff; font-weight: 900; text-transform: uppercase; } .biq-hdr-name .thin { font-weight: 300; opacity: .7; margin-right: 3px; color: #C4A24A; } .biq-hdr-rule { height: 1px; background: linear-gradient(90deg, #C4A24A, rgba(196,162,74,.3), transparent); opacity: .6; margin-top: 3px; } .biq-hdr-sub { font-size: 9px; letter-spacing: .22em; color: #6DCCD1; text-transform: uppercase; opacity: .8; } .header-user { font-size: 12px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } /* ── Content approval badges (content.html) ── */ .content-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .cb-ig-reel { background: rgba(109,40,217,0.12); color: #8b5cf6; } .cb-li-video { background: rgba(37,99,235,0.12); color: #3b82f6; } .cb-yt-long { background: rgba(220,38,38,0.12); color: #ef4444; } .cb-carousel { background: rgba(107,114,128,0.12); color: var(--text-secondary); } .cb-quote-card { background: rgba(217,119,6,0.12); color: #d97706; } .cb-caption { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-blog { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-ig { background: rgba(157,23,77,0.12); color: #db2777; } .cb-li { background: rgba(37,99,235,0.12); color: #3b82f6; } .cb-yt { background: rgba(220,38,38,0.12); color: #ef4444; } .cb-multi { background: rgba(107,114,128,0.12); color: var(--text-secondary); } .cb-web { background: rgba(22,163,74,0.12); color: #16a34a; } .cb-meme { background: rgba(217,119,6,0.12); color: #d97706; } .cb-fb { background: rgba(37,99,235,0.12); color: #3b82f6; } /* ── Ops sub-dashboard header mark (used on every sub-page) ── */ .ops-hdr-wrap{display:flex;align-items:center;gap:18px} .ops-hdr-mark{width:32px;height:auto;flex-shrink:0} .ops-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6DCCD1;margin-bottom:6px} .ops-back{color:#6DCCD1;text-decoration:none} .ops-back:hover{text-decoration:underline} /* ── Shared error / empty state utilities ── */ .ops-error { padding: 20px 24px; background: rgba(220,38,38,0.08); border-left: 3px solid #ef4444; border-radius: 4px; font-size: 13px; color: #ef4444; display: flex; align-items: center; gap: 10px; } .ops-error::before { content: '⚠'; font-size: 16px; flex-shrink: 0; } .ops-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 13px; } .ops-empty-icon { font-size: 28px; margin-bottom: 10px; opacity: 0.4; } .ops-empty-msg { font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; font-size: 14px; } .ops-empty-sub { font-size: 12px; opacity: 0.7; } /* ── Inter-dashboard quick nav ── */ .dash-nav { position: relative; flex-shrink: 0; font-family: 'Lato', sans-serif; } /* Trigger lives inside the always-dark header — hardcoded dark palette */ .dash-nav-trigger { background: transparent; border: 1px solid #444; color: #9f9f9f; padding: 5px 12px 5px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; font-family: 'Lato', sans-serif; border-radius: 3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .dash-nav-trigger:hover, .dash-nav.open .dash-nav-trigger { border-color: #6DCCD1; color: #6DCCD1; } .dash-nav-arrow { display: inline-block; transition: transform 0.2s; font-size: 8px; } .dash-nav.open .dash-nav-arrow { transform: rotate(180deg); } /* Dropdown opens into page content — theme-aware */ .dash-nav-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px; min-width: 210px; padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 1000; } .dash-nav.open .dash-nav-menu { display: block; } .dash-nav-menu a { display: block; padding: 8px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); text-decoration: none !important; white-space: nowrap; transition: background 0.1s, color 0.1s; } .dash-nav-menu a:hover { color: var(--text); background: var(--surface-alt); } .dash-nav-menu a.dash-current { color: var(--gold) !important; } .dash-nav-divider { height: 1px; background: var(--border-strong); margin: 4px 0; } /* ══════════════════════════════════════════════════════════════ THEME SYSTEM Dark is default. Light activates via html[data-theme="light"]. ══════════════════════════════════════════════════════════════ */ /* ── Semantic tokens (dark defaults) ── */ :root { --bg: #000000; --surface: #080808; --surface-alt: #111111; --surface-deep: #030808; --border: #1a1a1a; --border-mid: #2a2a2a; --border-strong: #333333; --text: #ffffff; --text-secondary: #9F9F9F; --text-muted: #555555; /* brand tokens stay the same in both modes */ --teal: #6DCCD1; --gold: #C4A24A; } /* ── Light mode token overrides ── */ [data-theme="light"] { --bg: #f9fafb; --surface: #FFFFFF; --surface-alt: #F8F8F6; --surface-deep: #F0F0ED; --border: #E0E0DC; --border-mid: #CCCCCA; --border-strong: #B8B8B4; --text: #111111; --text-secondary: #5C5C5A; --text-muted: #888886; } /* ── Theme toggle — matches Billing IQ pill pattern ── */ .biq-mode-toggle { display: flex; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 3px; gap: 1px; flex-shrink: 0; } .biq-mode-btn { padding: 5px 13px; border-radius: 100px; border: none; background: transparent; color: rgba(255,255,255,.35); font-family: 'Lato', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; cursor: pointer; transition: all .22s ease; white-space: nowrap; } .biq-mode-btn.active { background: #6DCCD1; color: #08080e; } .biq-mode-btn:not(.active):hover { color: rgba(255,255,255,.65); } /* Mobile */ @media (max-width:640px) { .biq-mode-btn { padding: 4px 7px; font-size: 9px; letter-spacing: .06em; } } /* ── Light mode — global ── */ /* Note: biq-hdr stays dark always (matches Billing IQ behaviour) */ [data-theme="light"] body { background: var(--bg); color: var(--text); } /* ── Light mode — .header (motherboard) ── */ /* Header stays dark always — same behaviour as biq-hdr and Billing IQ */ /* ── Light mode — status strip ── */ [data-theme="light"] .status-strip { background: var(--surface-alt) !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .status-label { color: var(--text-muted) !important; } [data-theme="light"] .status-val { color: var(--text-secondary) !important; } [data-theme="light"] .status-divider { background: var(--border) !important; } /* ── Light mode — page chrome ── */ [data-theme="light"] .page-label { color: var(--gold) !important; } [data-theme="light"] .page-title { color: var(--text) !important; } [data-theme="light"] .page-desc { color: var(--text-secondary) !important; } [data-theme="light"] .section-head, [data-theme="light"] .section-label { color: var(--gold) !important; } [data-theme="light"] .task-panel-label { color: var(--text-muted) !important; } /* ── Light mode — nav cards (index) ── */ [data-theme="light"] .nav-card { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .nav-card:hover { border-color: var(--teal) !important; background: var(--surface-alt) !important; } [data-theme="light"] .nav-card-eyebrow { color: var(--text-muted) !important; } [data-theme="light"] .nav-card-title { color: var(--text) !important; } [data-theme="light"] .nav-card-desc { color: var(--text-secondary) !important; } [data-theme="light"] .nav-card-cta { color: var(--teal) !important; } /* ── Light mode — task rows (donkey) ── */ [data-theme="light"] .task-row { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .task-title { color: var(--text) !important; } [data-theme="light"] .task-due { color: var(--text-muted) !important; } [data-theme="light"] .task-empty { color: var(--text-muted) !important; } /* ── Light mode — costs table (donkey) ── */ [data-theme="light"] .costs-table th { color: var(--text-muted) !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .costs-table td { border-bottom-color: var(--surface-deep) !important; } [data-theme="light"] .costs-table tr:hover td { background: var(--surface-alt) !important; } [data-theme="light"] .cost-name { color: var(--text) !important; } [data-theme="light"] .cost-vendor { color: var(--text-secondary) !important; } [data-theme="light"] .cost-notes { color: var(--text-muted) !important; } [data-theme="light"] .cat-badge { background: var(--surface-alt) !important; color: var(--text-muted) !important; border-color: var(--border) !important; } [data-theme="light"] .costs-total { border-top-color: var(--border) !important; } [data-theme="light"] .costs-total-item { color: var(--text-secondary) !important; } [data-theme="light"] .costs-total-item strong { color: var(--text) !important; } /* ── Light mode — AI group rows ── */ [data-theme="light"] .ai-group-hdr td { background: #EDF8F9 !important; border-top-color: rgba(109,204,209,0.25) !important; border-bottom-color: rgba(109,204,209,0.25) !important; } [data-theme="light"] .ai-group-hdr:hover td { background: #E3F4F6 !important; } [data-theme="light"] .ai-group-count { color: var(--text-muted) !important; } [data-theme="light"] .ai-tool-row td { background: #FAFFFE !important; } [data-theme="light"] .ai-tool-row:hover td { background: #EDF8F9 !important; } /* ── Light mode — back link ── */ [data-theme="light"] .back-link { border-color: rgba(109,204,209,0.4) !important; color: var(--teal) !important; } [data-theme="light"] .back-link:hover { background: rgba(109,204,209,0.08) !important; } /* ── Light mode — auth overlays ── */ [data-theme="light"] #auth-overlay { background: #fff !important; } [data-theme="light"] .auth-brand { color: #111 !important; } [data-theme="light"] #auth-email { background: #fff !important; border-color: rgba(0,0,0,0.2) !important; color: #111 !important; } [data-theme="light"] #auth-email::placeholder { color: rgba(0,0,0,0.4) !important; } [data-theme="light"] .lost-screen { background: var(--bg) !important; } [data-theme="light"] .lost-title { color: var(--text) !important; } [data-theme="light"] .lost-sub { color: var(--text-secondary) !important; } /* ── Light mode — tables (index + motherboard admin pages) ── */ [data-theme="light"] .table-wrap { border-color: var(--border) !important; } [data-theme="light"] thead th { background: var(--surface-alt) !important; color: var(--text-muted) !important; border-bottom-color: var(--border-mid) !important; } [data-theme="light"] tbody tr { border-bottom-color: var(--border) !important; } [data-theme="light"] tbody tr:hover { background: var(--surface-alt) !important; } [data-theme="light"] tbody td { color: var(--text) !important; } [data-theme="light"] .td-email { color: var(--text-secondary) !important; } [data-theme="light"] .td-time { color: var(--text-muted) !important; } /* ── Light mode — announcements row ── */ [data-theme="light"] .ann-row { border-color: var(--border) !important; } [data-theme="light"] .ann-row-input { color: var(--text) !important; } [data-theme="light"] .ann-active-msg { color: var(--text) !important; } /* ── Light mode — admin modals and forms ── */ [data-theme="light"] .modal { background: var(--surface) !important; border-color: var(--border-mid) !important; } [data-theme="light"] .modal-title { color: var(--text) !important; } [data-theme="light"] .form-label { color: var(--text-muted) !important; } [data-theme="light"] .form-input { background: var(--surface-alt) !important; border-color: var(--border-mid) !important; color: var(--text) !important; } [data-theme="light"] .checkbox-row { color: var(--text-secondary) !important; } /* ── Light mode — access chips ── */ [data-theme="light"] .chip-all { color: #1a7a7f !important; } [data-theme="light"] .chip-ops { color: #7a5a1a !important; } [data-theme="light"] .chip-idr { color: #2a5a8a !important; } [data-theme="light"] .chip-content { color: #7a2a6a !important; } /* ── Light mode — user action buttons ── */ [data-theme="light"] .btn-edit { border-color: var(--border-mid) !important; } [data-theme="light"] .btn-edit:hover { background: rgba(109,204,209,0.08) !important; } [data-theme="light"] .btn-remove { border-color: var(--border) !important; color: var(--text-muted) !important; } /* ── Light mode — monitoring card ── */ [data-theme="light"] .mon-card { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="light"] .mon-row { border-bottom-color: var(--border) !important; } [data-theme="light"] .mon-name { color: var(--text) !important; } [data-theme="light"] .mon-ts { color: var(--text-muted) !important; } /* ══════════════════════════════════════════════════════════════ BUTTON SYSTEM — BIQ-aligned pill shape (applies to all pages) ══════════════════════════════════════════════════════════════ */ /* All interactive buttons → full pill (mirrors BIQ .pf-btn border-radius) */ .btn-add, .btn-ann-publish, .btn-invite, .btn-edit, .btn-remove, .btn-ann-clear, .btn-cancel, .btn-back, .back-link { border-radius: 100px !important; } /* Primary CTAs → teal fill (BIQ .pf-btn-teal pattern; yellow fill = v1 mistake) */ .btn-add, .btn-ann-publish { background: #6DCCD1 !important; color: #08080e !important; } /* Ghost hover — replace hard #0d2a2b fill with subtle teal wash */ .btn-edit:hover, .btn-back:hover, .back-link:hover { background: rgba(109,204,209,0.08) !important; } /* Event badges → pill shape */ .event-signin, .event-signout, .event-invite, .ann-active-badge { border-radius: 100px !important; } /* ── Light mode — event badges (auth activity table) ── */ [data-theme="light"] .event-signin { background: rgba(109,204,209,0.12) !important; color: #1a7a7f !important; border-color: rgba(109,204,209,0.3) !important; } [data-theme="light"] .event-signout { background: var(--surface-alt) !important; color: var(--text-muted) !important; border-color: var(--border) !important; } [data-theme="light"] .event-invite { background: #eff6ff !important; color: #1d4ed8 !important; border-color: rgba(29,78,216,0.2) !important; } /* ── Light mode — active announcement badge ── */ [data-theme="light"] .ann-active-badge { background: rgba(76,175,114,0.12) !important; color: #2a7a4a !important; border-color: rgba(76,175,114,0.3) !important; } /* ── Light mode — donkey badges + priority pills ── */ [data-theme="light"] .badge-sub { background:#FFF8E6 !important; color:#9A7B2A !important; border-color:#E8D89A !important; } [data-theme="light"] .badge-payg { background:#EDF8F9 !important; color:#1a7a7f !important; border-color:rgba(109,204,209,.3) !important; } [data-theme="light"] .prio-urgent { background:#FEF2F2 !important; color:#dc2626 !important; border-color:#FCA5A5 !important; } [data-theme="light"] .prio-soon { background:#FEFCE8 !important; color:#a16207 !important; border-color:#FDE68A !important; } /* ── Light mode — donkey section panels ── */ [data-theme="light"] .stats-grid { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .stat-block { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .stat-label { color: var(--text-muted) !important; } [data-theme="light"] .stat-sub { color: var(--text-muted) !important; } [data-theme="light"] .activity-wrap { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .act-lbl { color: var(--text-muted) !important; } [data-theme="light"] .coverage-stat { color: var(--text-muted) !important; } [data-theme="light"] .coverage-stat strong { color: var(--text) !important; } [data-theme="light"] .cov-table { border-color: var(--border) !important; } [data-theme="light"] .cov-table th { color: #fff !important; border-bottom: 2px solid var(--teal) !important; background: #1e1e1e !important; } [data-theme="light"] .cov-tier-badge { background: var(--gold) !important; color: #fff !important; } [data-theme="light"] .cov-tier-hdr td { background: var(--surface-alt) !important; } [data-theme="light"] .cov-table td { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .cov-table tr:hover td { background: var(--surface-alt) !important; } [data-theme="light"] .cov-name { color: var(--text) !important; } [data-theme="light"] .cov-bar-wrap { background: var(--border-mid) !important; } [data-theme="light"] .cov-last { color: var(--text-muted) !important; } [data-theme="light"] .budget-summary { border-color: var(--border) !important; } [data-theme="light"] .bsum-mo { color: var(--text-muted) !important; } [data-theme="light"] .bsum-annual { color: var(--text-muted) !important; } [data-theme="light"] .bsum-annual strong { color: var(--text) !important; } [data-theme="light"] .bsum-split { color: var(--text-muted) !important; } [data-theme="light"] .bsum-split strong { color: var(--text) !important; } [data-theme="light"] .costs-toggle-btn { color: var(--text-muted) !important; } [data-theme="light"] .auto-wrap { border-color: var(--border) !important; } [data-theme="light"] .auto-group-hdr { background: var(--surface-alt) !important; border-color: var(--border) !important; } [data-theme="light"] .auto-row { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .auto-row:hover { background: var(--surface-alt) !important; } [data-theme="light"] .auto-name { color: var(--text) !important; } [data-theme="light"] .auto-desc { color: var(--text-muted) !important; } [data-theme="light"] .routines-wrap { border-color: var(--border) !important; } [data-theme="light"] .routine-row { border-color: var(--border) !important; background: var(--surface) !important; } [data-theme="light"] .routine-freq { color: var(--text-muted) !important; } [data-theme="light"] .routine-name { color: var(--text) !important; } [data-theme="light"] .routine-desc { color: var(--text-muted) !important; } [data-theme="light"] .section-note { color: var(--text-muted) !important; } [data-theme="light"] .sec-chevron { color: var(--text-muted) !important; } /* ── Data source strip ─────────────────────────────────────────────────────── */ .data-strip { margin-top: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 4px; padding: 7px 12px; display: flex; align-items: center; font-size: 11px; color: #555; flex-wrap: wrap; gap: 0; } .data-strip .ds-src + .ds-src::before, .data-strip .ds-cadence::before { content: '·'; margin: 0 7px; color: #333; } .data-strip .ds-src { color: #666; } .data-strip .ds-cadence { margin-left: auto; color: #444; font-size: 10px; white-space: nowrap; padding-left: 16px; } .ds-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 7px; flex-shrink: 0; } .ds-dot-live { background: #22c55e; } .ds-dot-cron { background: #C4A24A; } .ds-dot-static { background: #444; } [data-theme="light"] .data-strip { background: rgba(0,0,0,0.03); color: #aaa; } [data-theme="light"] .data-strip .ds-src { color: #999; } [data-theme="light"] .data-strip .ds-cadence { color: #bbb; } [data-theme="light"] .data-strip .ds-src + .ds-src::before, [data-theme="light"] .data-strip .ds-cadence::before { color: #ddd; } /* ── Shared layout components ─────────────────────────── */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .review-panel { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 8px; overflow: hidden; } .review-panel-hdr { padding: 12px 18px; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .review-panel-hdr:hover { background: var(--surface-alt); } .review-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); } .review-panel-sub { font-size: 11px; color: var(--text-secondary); flex: 1; } .review-panel-badge { font-size: 11px; font-weight: 700; background: var(--teal); color: #fff; border-radius: 10px; padding: 1px 8px; white-space: nowrap; } .review-panel-arrow { font-size: 10px; color: var(--text-secondary); transition: transform 0.2s; display: inline-block; } .review-panel.open .review-panel-arrow { transform: rotate(180deg); } .review-panel-body { display: none; border-top: 1px solid var(--border); } .review-panel.open .review-panel-body { display: block; }