/* ============================================================ money-flow Google-product design system (v10.29) ------------------------------------------------------------ Light theme by default, dark via [data-theme="dark"] on . Inspired by Gmail / Drive / Photos: left navigation rail, single topbar with search, generous whitespace, soft surfaces, blue accent. Overrides every legacy token from style.css. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined'); /* ----- LIGHT (default) -------------------------------------- */ :root, [data-theme="light"] { /* Surfaces */ --bg: #f6f8fc; /* page bg — Gmail-ish */ --surface: #ffffff; /* cards, top bar */ --surface-low: #f0f4f9; /* hover surfaces */ --surface-rail: #f6f8fc; /* sidenav bg */ --surface-elev: #ffffff; /* elevated cards */ --border: #e5e9f2; --border-strong: #c8d0dd; /* Text */ --text: #1f1f1f; --text-strong: #0a0a0a; --muted: #5f6368; /* Google's standard secondary text */ --on-accent: #ffffff; /* Brand / accent — Google blue */ --accent: #1a73e8; --accent-hover: #1765cc; --accent-soft: #e8f0fe; /* selected nav row */ --accent-soft-text: #0b57d0; /* Semantic */ --pos: #137333; --pos-soft: #e6f4ea; --neg: #b3261e; --neg-soft: #fce8e6; --invest: #1a73e8; --invest-soft: #e8f0fe; --warn: #b06000; --warn-soft: #fef7e0; /* Legacy aliases used by style.css */ --panel: var(--surface); --panel2: var(--surface-low); /* Shape & elevation */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-full: 9999px; --elev-1: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.06); --elev-2: 0 1px 3px rgba(60,64,67,.12), 0 4px 8px 3px rgba(60,64,67,.08); --elev-3: 0 4px 8px 3px rgba(60,64,67,.12), 0 1px 3px rgba(60,64,67,.10); /* Layout */ --rail-w: 256px; --rail-w-collapsed: 80px; --topbar-h: 64px; } /* ----- DARK ------------------------------------------------- */ [data-theme="dark"] { --bg: #0f1115; --surface: #1b1d22; --surface-low: #25272e; --surface-rail: #14161b; --surface-elev: #20232a; --border: #2b2e36; --border-strong: #3d4049; --text: #e8eaed; --text-strong: #ffffff; --muted: #9aa0a6; --accent: #8ab4f8; --accent-hover: #aecbfa; --accent-soft: #1a2c50; --accent-soft-text: #aecbfa; --on-accent: #0b1320; --pos: #81c995; --pos-soft: #122b18; --neg: #f28b82; --neg-soft: #2c1413; --invest: #8ab4f8; --invest-soft: #1a2c50; --warn: #fdd663; --warn-soft: #2a210b; --panel: var(--surface); --panel2: var(--surface-low); --elev-1: 0 1px 2px rgba(0,0,0,.55), 0 1px 3px 1px rgba(0,0,0,.35); --elev-2: 0 1px 3px rgba(0,0,0,.55), 0 4px 8px 3px rgba(0,0,0,.40); --elev-3: 0 4px 8px 3px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.40); } /* ----- Reset / base ---------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: "Google Sans Text", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono, .num, code, pre { font-family: "Roboto Mono", "Google Sans Mono", ui-monospace, monospace; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--surface-low); color: var(--text); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; } h1 { font-family: "Google Sans Text", "Roboto", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 0; color: var(--text-strong); margin: 4px 0 16px; } h2 { font-family: "Google Sans Text", "Roboto", sans-serif; font-weight: 500; font-size: 16px; margin: 24px 0 10px; color: var(--text); } h3 { font-weight: 500; font-size: 14px; margin: 18px 0 8px; color: var(--text); } .muted { color: var(--muted); } /* ----- App shell layout ------------------------------------ */ body { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "rail topbar" "rail main"; min-height: 100vh; } /* Hide the legacy .topnav (we replace it with .gtopbar) */ .topnav { display: none !important; } /* ----- Top bar --------------------------------------------- */ .gtopbar { grid-area: topbar; position: sticky; top: 0; z-index: 50; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 0 24px; height: var(--topbar-h); border-bottom: 1px solid transparent; } .gtopbar.scrolled { background: var(--surface); border-bottom-color: var(--border); } .gtopbar-burger { display: none; /* shown on mobile */ width: 40px; height: 40px; border-radius: var(--r-full); background: transparent; border: 0; cursor: pointer; color: var(--text); align-items: center; justify-content: center; } .gtopbar-burger:hover { background: var(--surface-low); } .gtopbar-brand { display: none; /* logo lives in the rail */ } .gtopbar-search { flex: 1 1 auto; max-width: 720px; display: flex; align-items: center; position: relative; margin: 0 12px; } .gtopbar-search .gs-wrap { width: 100%; position: relative; display: flex; align-items: center; background: var(--surface-low); border-radius: var(--r-xl); transition: background .15s, box-shadow .15s; height: 48px; } .gtopbar-search .gs-wrap:focus-within { background: var(--surface); box-shadow: var(--elev-2); } .gtopbar-search .gs-icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; } .gtopbar-search input { width: 100%; height: 100%; background: transparent; border: 0; outline: 0; padding: 0 48px 0 44px; font: 400 16px "Google Sans Text", "Roboto", sans-serif; color: var(--text); } .gtopbar-search input::placeholder { color: var(--muted); } .gtopbar-search .gs-ai-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #8e6bff 0%, #1a73e8 100%); border: 0; cursor: pointer; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s, filter .15s; flex: 0 0 auto; } .gtopbar-search .gs-ai-btn:hover { transform: translateY(-50%) scale(1.06); filter: brightness(1.05); } .gtopbar-search .gs-ai-btn:active { transform: translateY(-50%) scale(.96); } .gtopbar-search .gs-ai-btn .material-symbols-outlined { font-size: 18px; } /* Ctrl+K hint badge removed (v10.33): it visually collided with the AI button gradient and is useless on touch devices anyway. The Ctrl+K global shortcut still works via the JS handler in base.html. */ .gtopbar-search .gs-kbd { display: none; } @media (max-width: 720px) { .gtopbar-search input { padding: 0 48px 0 40px; } .gtopbar-search .gs-icon { left: 12px; } } /* AI-search results banner on /search page */ .search-llm-banner { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; margin: 0 0 18px; background: linear-gradient(135deg, rgba(142,107,255,.10) 0%, rgba(26,115,232,.10) 100%); border: 1px solid rgba(142,107,255,.25); border-radius: var(--r-lg); } .search-llm-banner .slb-spark { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-full); background: linear-gradient(135deg, #8e6bff 0%, #1a73e8 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .search-llm-banner .slb-spark .material-symbols-outlined { font-size: 20px; } .search-llm-banner h3 { margin: 0 0 4px; font: 600 14px "Google Sans", "Roboto", sans-serif; color: var(--text); } .search-llm-banner p { margin: 0; color: var(--muted); font-size: 13px; } .search-llm-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .search-llm-pills .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .search-llm-pills .pill b { color: var(--accent); font-weight: 600; } .search-llm-banner .slb-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; } .search-llm-banner .slb-actions a { font-size: 12px; color: var(--accent); text-decoration: none; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); } .search-llm-banner .slb-actions a:hover { background: var(--surface-low); } /* Top bar trailing actions */ .gtopbar-actions { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .gtopbar-iconbtn { width: 40px; height: 40px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; } .gtopbar-iconbtn:hover { background: var(--surface-low); color: var(--text); } .gtopbar-iconbtn .material-symbols-outlined { font-size: 22px; } .gtopbar-avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; margin-left: 6px; } /* ----- Side rail (Gmail/Drive style) ----------------------- */ .grail { grid-area: rail; background: var(--surface-rail); height: 100vh; position: sticky; top: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 6px 8px 16px; } .grail-brand { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; font: 500 20px "Google Sans Text", "Roboto", sans-serif; color: var(--text-strong); letter-spacing: -.005em; } .grail-brand .logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: linear-gradient(135deg, #1a73e8, #4285f4); color: #fff; font-size: 20px; } .grail-section-label { padding: 12px 16px 6px; font: 500 11px "Google Sans Text", "Roboto", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .grail-link { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 36px; margin: 1px 0; border-radius: 0 var(--r-full) var(--r-full) 0; color: var(--text); font: 500 14px "Google Sans Text", "Roboto", sans-serif; transition: background .12s ease; position: relative; } .grail-link:hover { background: var(--surface-low); text-decoration: none; } .grail-link.active { background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 700; } .grail-link .material-symbols-outlined { font-size: 20px; color: inherit; opacity: .85; } .grail-link.active .material-symbols-outlined { opacity: 1; } .grail-link .glabel { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grail-link .gcount { font: 500 11px "Roboto Mono", monospace; color: var(--muted); } .grail-divider { height: 1px; background: var(--border); margin: 8px 12px; } /* ----- Main area ------------------------------------------- */ main { grid-area: main; padding: 24px 32px 64px; max-width: 1280px; width: 100%; } /* ----- Footer ---------------------------------------------- */ .footer { display: none; } /* the new shell hides it; a small line at bottom of main is enough */ /* ----- Cards & KPI ----------------------------------------- */ .kpi-row { display: grid; gap: 12px; margin: 8px 0 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; box-shadow: none; transition: box-shadow .15s, border-color .15s; } .kpi:hover { box-shadow: var(--elev-1); border-color: var(--border-strong); } .kpi-label { color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; } .kpi-value { font: 500 24px "Google Sans Text", "Roboto", sans-serif; letter-spacing: -.01em; margin-top: 4px; color: var(--text-strong); } .kpi-spend .kpi-value { color: var(--neg); } .kpi-income .kpi-value { color: var(--pos); } .kpi-invest .kpi-value { color: var(--invest); } /* ----- Data table ------------------------------------------ */ table.data-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: none; } .data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); } .data-table th { background: var(--surface); font: 500 12px "Google Sans Text", "Roboto", sans-serif; color: var(--muted); text-transform: none; letter-spacing: 0; } .data-table tr:hover { background: var(--surface-low); } .data-table tr:last-child td { border-bottom: 0; } /* ----- Buttons --------------------------------------------- */ button, .filter-bar button, .pwd-form button, .txn-grid form button, .chat-form button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-full); padding: 10px 22px; font: 500 14px "Google Sans Text", "Roboto", sans-serif; cursor: pointer; box-shadow: none; transition: background .15s, box-shadow .15s, transform .05s; } button:hover { background: var(--accent-hover); box-shadow: var(--elev-1); opacity: 1; } button:active { transform: translateY(1px); } .btn-tonal { background: var(--accent-soft); color: var(--accent-soft-text); } .btn-text { background: transparent; color: var(--accent); box-shadow: none; } .btn-text:hover { background: var(--surface-low); } /* ----- Inputs ---------------------------------------------- */ input, select, textarea, .filter-bar input, .filter-bar select, .pwd-form input, .login-card input, .txn-grid form input, .txn-grid form select, .txn-grid form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 14px; font: 400 14px "Google Sans Text", "Roboto", sans-serif; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,232,.18); } /* ----- Pills / chips --------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: var(--r-full); font: 500 11.5px "Google Sans Text", "Roboto", sans-serif; background: var(--surface-low); color: var(--muted); border: 1px solid var(--border); letter-spacing: 0; text-transform: none; } .pill-expense, .pill-fee, .pill-atm_withdrawal { background: var(--neg-soft); color: var(--neg); border-color: transparent; } .pill-income, .pill-refund { background: var(--pos-soft); color: var(--pos); border-color: transparent; } .pill-investment, .pill-savings { background: var(--invest-soft); color: var(--invest); border-color: transparent; } .pill-transfer, .pill-cc_payment, .pill-credit_card { background: var(--accent-soft); color: var(--accent-soft-text); border-color: transparent; } /* ----- Banners --------------------------------------------- */ .default-pwd-banner { background: var(--warn-soft); color: var(--warn); border: 1px solid transparent; border-radius: var(--r-md); } .ok { background: var(--pos-soft); color: var(--pos); border: 0; border-radius: var(--r-md); } .warn { background: var(--warn-soft); color: var(--warn); border: 0; border-radius: var(--r-md); } .err { background: var(--neg-soft); color: var(--neg); border: 0; border-radius: var(--r-md); } /* ----- Charts ---------------------------------------------- */ .chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; box-shadow: none; } /* ----- Login card ------------------------------------------ */ .login-body { display: grid; grid-template-columns: 1fr; place-items: center; background: var(--bg) !important; } body.login-body { display: grid; grid-template-areas: "main"; grid-template-columns: 1fr; } body.login-body .grail, body.login-body .gtopbar { display: none !important; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--elev-2); padding: 36px 40px; min-width: 360px; } /* ----- Chat bubbles ---------------------------------------- */ .chat-msg .chat-body { border-radius: var(--r-lg) !important; } .chat-user .chat-body { background: var(--accent-soft) !important; color: var(--accent-soft-text) !important; border: 0 !important; } .chat-assistant .chat-body { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } /* ----- Search typeahead dropdown --------------------------- */ .topnav-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--elev-3); max-height: 60vh; overflow-y: auto; padding: 6px 0; } .tns-section { padding: 6px 8px; } .tns-section h4 { margin: 4px 8px; font: 500 11px "Google Sans Text", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .tns-section a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; } .tns-section a:hover, .tns-section a.active { background: var(--surface-low); } .tns-section .tns-meta { color: var(--muted); margin-left: 6px; font-size: 12px; } .tns-summary { padding: 10px 14px; background: var(--accent-soft); color: var(--accent-soft-text); border-bottom: 1px solid var(--border); font-size: 13px; } .tns-empty { padding: 16px; color: var(--muted); text-align: center; } .tns-seeall { display: block; padding: 10px; text-align: center; font-weight: 500; color: var(--accent); border-top: 1px solid var(--border); } .tns-seeall:hover { background: var(--surface-low); } /* ----- Material icon helpers ------------------------------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none; } /* ----- Scrollbar (slim, themed) ---------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } /* ----- Search page overrides ------------------------------- */ .search-page .agg-card { background: var(--surface) !important; border: 1px solid var(--border); border-left-width: 4px !important; border-radius: var(--r-md) !important; color: var(--text) !important; box-shadow: none; } .search-page .agg-card:hover { box-shadow: var(--elev-1); } .search-page .agg-card .lbl { color: var(--muted) !important; } .search-page .agg-card.spend { border-left-color: var(--neg) !important; } .search-page .agg-card.income { border-left-color: var(--pos) !important; } .search-page .agg-card.invest { border-left-color: var(--invest) !important; } .search-page .agg-card.net { border-left-color: var(--accent) !important; } .search-page .agg-block table th { background: var(--surface) !important; color: var(--muted) !important; } .search-page .agg-block table td, .search-page .agg-block table th { border-bottom-color: var(--border) !important; color: var(--text); } .search-page .search-grid section { background: var(--surface); border-color: var(--border) !important; border-radius: var(--r-md) !important; } .search-page .txn-table th { background: var(--surface); color: var(--muted); } /* ----- Responsive ------------------------------------------ */ @media (max-width: 1024px) { body { grid-template-columns: var(--rail-w-collapsed) 1fr; } .grail .glabel { display: none; } .grail .gcount { display: none; } .grail-section-label { display: none; } .grail-brand { padding: 10px; justify-content: center; } .grail-brand .brand-text { display: none; } .grail-link { justify-content: center; padding: 0; height: 44px; border-radius: var(--r-md); margin: 2px 8px; } } @media (max-width: 720px) { :root { --topbar-h: 56px; } body { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .grail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); transform: translateX(-100%); transition: transform .25s ease; z-index: 100; box-shadow: var(--elev-3); padding: 8px 10px 16px; } .grail .glabel, .grail .gcount, .grail-section-label, .grail-brand .brand-text { display: initial; } .grail-link { justify-content: flex-start; padding: 0 16px; height: 40px; border-radius: 0 var(--r-full) var(--r-full) 0; margin: 1px 0; } body.nav-open .grail { transform: translateX(0); } body.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; backdrop-filter: blur(2px); } .gtopbar { padding: 0 12px; } .gtopbar-burger { display: inline-flex; } .gtopbar-search { margin: 0 4px; } .gtopbar-search input { font-size: 14px; padding-left: 44px; padding-right: 14px; } .gtopbar-search .gs-wrap { height: 44px; } .gtopbar-search .gs-kbd { display: none; } main { padding: 16px 14px 60px; } h1 { font-size: 20px; } .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; } .kpi { padding: 12px 14px; } .kpi-value { font-size: 20px; } table { font-size: 12.5px; } .data-table th, .data-table td { padding: 8px 10px; } } /* ----- Reduced motion -------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ----- Print ----------------------------------------------- */ @media print { .grail, .gtopbar, .topnav { display: none !important; } body { display: block; background: white; color: black; } main { padding: 0; max-width: none; } } /* ----- v10.29 patches: inline-style fixes for dashboard widgets ----- */ /* CC bills card items use inline rgba(0,0,0,.25) which becomes a heavy grey in light mode. Override on light theme; dark theme keeps the muted look. */ :root #ccBillsDueList > div { background: var(--surface-low) !important; border-color: var(--border) !important; } [data-theme="dark"] #ccBillsDueList > div { background: rgba(255,255,255,.03) !important; } #ccBillsDueCard { background: var(--surface) !important; border-color: var(--border) !important; border-left: 4px solid var(--danger) !important; } #ccBillsDueCard > div > div > div:first-child, #ccBillsDueList > div > div:nth-child(2) { color: var(--text) !important; } .funding-recon { background: var(--surface) !important; border-color: var(--border) !important; border-left: 4px solid var(--warning) !important; } .funding-recon .kpi { background: var(--surface-low) !important; } /* Allow grid items to shrink below their content's intrinsic width so long labels never force horizontal scroll on mobile. */ .kpi, .kpi-row > * { min-width: 0; } .kpi .kpi-label, .kpi .kpi-value, .kpi .kpi-sub { overflow-wrap: anywhere; word-break: break-word; } /* Phones: 1 column KPI grid, prevent any element forcing horizontal scroll. */ @media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr !important; } } html, body { overflow-x: hidden; max-width: 100vw; } main { overflow-x: hidden; } /* Light-mode override for any inline color:#fca5a5 (danger pinks) and #fcd34d (warning ambers) so dashboard headers read correctly. */ :root [style*="color:#fca5a5"], :root [style*="color: #fca5a5"] { color: var(--danger) !important; } :root [style*="color:#fcd34d"], :root [style*="color: #fcd34d"] { color: #b06000 !important; } :root [style*="color:#fbbf24"], :root [style*="color: #fbbf24"] { color: #b45309 !important; } :root [style*="color:#fecaca"], :root [style*="color: #fecaca"] { color: var(--danger) !important; } /* Override inline near-black backgrounds on light theme pills. */ :root [style*="background:#1a1010"], :root [style*="background: #1a1010"], :root [style*="background:#1f1a0a"], :root [style*="background: #1f1a0a"] { background: var(--surface-low) !important; } :root .pill { background: var(--surface-low) !important; color: var(--text) !important; } [data-theme="dark"] .pill { background: rgba(255,255,255,.06) !important; color: var(--text) !important; } /* Messages page (and others) use var(--card-bg) with #161821 dark fallback. */ :root { --card-bg: var(--surface); } [data-theme="dark"] { --card-bg: var(--surface); } /* Light-mode kind pills (defined in messages.html with hard-coded dark colors). */ :root .kind-txn_alert { background: #e6f4ea !important; color: #137333 !important; } :root .kind-statement { background: #eaddff !important; color: #5b3aa1 !important; } :root .kind-otp { background: #fce8e6 !important; color: #c5221f !important; } :root .kind-promo { background: #e8f0fe !important; color: #1967d2 !important; } :root .kind-personal { background: #f1f3f4 !important; color: #5f6368 !important; } :root .kind-operator { background: #f1f3f4 !important; color: #5f6368 !important; } :root .kind-other { background: #f1f3f4 !important; color: #5f6368 !important; } /* Inline opaque #0f1419 / #161821 backgrounds across templates. */ :root [style*="background:#0f1419"], :root [style*="background: #0f1419"], :root [style*="background:#161821"], :root [style*="background: #161821"], :root [style*="background-color:#161821"], :root [style*="background-color: #161821"] { background: var(--surface) !important; } /* ======================================================================= v10.29 MOBILE FIX — comprehensive responsive overrides Targets every multi-column layout and overflowing element across all templates. Appended after the rest of google.css so these rules win the cascade over style.css. ======================================================================= */ /* --- 1. Tables: make them horizontally scrollable instead of overflowing --- */ .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; /* keep the border-radius visible by using a wrapper-like approach */ border-radius: 8px; } /* thead/tbody must also be block for the table to scroll as a unit */ .data-table thead, .data-table tbody { display: table; width: 100%; } /* --- 2. two-col / txn-grid: collapse to single column on small screens --- */ @media (max-width: 800px) { .two-col, .txn-grid { grid-template-columns: 1fr !important; } } /* --- 3. chart-wrap: reduce height on mobile so charts stay visible --- */ @media (max-width: 720px) { .chart-wrap { height: 240px !important; padding: 10px; } .chart-wrap canvas { height: 200px !important; } } /* --- 4. filter-bar search: drop min-width on mobile so it doesn't force overflow --- */ @media (max-width: 720px) { .filter-bar input[type="search"], .filter-bar input[type="text"] { min-width: 0 !important; width: 100%; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar .inline { width: 100%; } } /* --- 5. range-bar: stack vertically, full-width inputs on mobile --- */ @media (max-width: 720px) { .range-bar { flex-direction: column; align-items: stretch; gap: 8px; } .range-bar label { width: 100%; justify-content: space-between; } .range-bar select, .range-bar input[type="date"], .range-bar input[type="text"] { flex: 1; min-width: 0; } .range-bar .range-label { margin-left: 0; margin-top: 4px; } .range-bar .range-or { display: none; } } /* --- 6. drill-bar-row: drop the label column on mobile --- */ @media (max-width: 720px) { .drill-bar-row { grid-template-columns: 1fr 80px !important; } .drill-bar-row .dbr-label { display: none; } } /* --- 7. flow diagram rows: force single col on very small screens --- */ @media (max-width: 600px) { .flow-row-2cols, .flow-row-6cols, .flow-arrows.two-cols, .flow-arrows.six-cols, .flow-arrows.cc-arrows { grid-template-columns: 1fr !important; } } /* --- 8. summary-row: wrap on mobile --- */ @media (max-width: 720px) { .summary-row { flex-wrap: wrap; gap: 8px; } } /* --- 9. fnode-amt: smaller on mobile so amounts don't wrap weirdly --- */ @media (max-width: 480px) { .fnode-amt { font-size: 18px !important; } } /* --- 10. pagination: stack on mobile --- */ @media (max-width: 480px) { .pagination { flex-wrap: wrap; gap: 8px; } } /* --- 11. Guard: absolutely prevent any child from forcing a horizontal scrollbar --- */ @media (max-width: 720px) { main > * { max-width: 100%; box-sizing: border-box; } main table { table-layout: auto; } } /* --- 12. inline-form: stack on mobile --- */ @media (max-width: 480px) { .inline-form { flex-direction: column; } .inline-form input, .inline-form select { width: 100%; } } /* end of v10.29 — appended below by v10.30 charts/fullscreen upgrade */