/* ========================================================================= * data.emage — themes (light, dark, glass) * Theme is chosen via [data-theme="light|dark|glass"] on . * Sans-serif throughout; mono only for numbers and code-like values. * ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --radius: 12px; --radius-sm: 8px; --pad-page: 32px; --pad-card: 24px; --gap: 20px; } /* ---------- LIGHT ---------- */ :root[data-theme="light"] { --bg: #f7f7f4; --bg-elevated: #ffffff; --bg-soft: #f0eee8; --ink: #1a1f2e; --ink-soft: #555a6b; --ink-faint: #8e93a3; --border: #e2decf; --border-strong:#cfc7b3; --accent: #c2410c; --accent-soft: #fef0e6; --positive: #166534; --positive-soft:#dcfce7; --negative: #991b1b; --negative-soft:#fee2e2; --warning: #b45309; --warning-soft:#fef3c7; --shadow: 0 1px 0 rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.05); --backdrop-blur: 0; --card-bg: var(--bg-elevated); --header-bg: rgba(255,255,255,0.92); --body-bg: var(--bg); } /* ---------- DARK ---------- */ :root[data-theme="dark"] { --bg: #0a0d14; --bg-elevated: #131722; --bg-soft: #1b2030; --ink: #e6e8ee; --ink-soft: #a4a9bb; --ink-faint: #6f7588; --border: #242a3a; --border-strong:#2f3649; --accent: #fb923c; --accent-soft: rgba(251,146,60,0.12); --positive: #34d399; --positive-soft:rgba(52,211,153,0.12); --negative: #f87171; --negative-soft:rgba(248,113,113,0.12); --warning: #facc15; --warning-soft:rgba(250,204,21,0.12); --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.4); --backdrop-blur: 0; --card-bg: var(--bg-elevated); --header-bg: rgba(10,13,20,0.85); --body-bg: var(--bg); } /* ---------- GLASS ---------- */ :root[data-theme="glass"] { --bg: #0c1322; --ink: #f1f3f9; --ink-soft: #c5cad9; --ink-faint: #8d93a8; --border: rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18); --accent: #f97316; --accent-soft: rgba(249,115,22,0.18); --positive: #4ade80; --positive-soft:rgba(74,222,128,0.16); --negative: #fb7185; --negative-soft:rgba(251,113,133,0.16); --warning: #fbbf24; --warning-soft:rgba(251,191,36,0.16); --shadow: 0 8px 32px rgba(0,0,0,0.35); --backdrop-blur: 18px; --card-bg: rgba(255,255,255,0.06); --header-bg: rgba(12,19,34,0.55); --body-bg: #0c1322; } :root[data-theme="glass"] body { background: radial-gradient(900px 600px at 15% -10%, rgba(99, 102, 241, 0.30), transparent 60%), radial-gradient(900px 700px at 110% 10%, rgba(236, 72, 153, 0.22), transparent 60%), radial-gradient(1100px 800px at 50% 120%, rgba(34, 211, 238, 0.20), transparent 60%), var(--bg); background-attachment: fixed; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--font-sans); background: var(--body-bg); color: var(--ink); min-height: 100vh; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } a { color: inherit; text-decoration: none; } /* ---------- Header ---------- */ header.site { position: sticky; top: 0; z-index: 20; background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .header-inner { max-width: 1320px; margin: 0 auto; padding: 18px var(--pad-page); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 12px; font-weight: 600; letter-spacing: -0.02em; font-size: 22px; } .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; transform: translateY(-1px); } .brand .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; } nav.site { display: flex; gap: 6px; align-items: center; } nav.site a { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14px; font-weight: 500; } nav.site a:hover { background: var(--bg-soft, var(--accent-soft)); color: var(--ink); } nav.site a.active { color: var(--ink); background: var(--accent-soft); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--card-bg); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); } .theme-toggle button { font-family: var(--font-sans); border: none; background: transparent; color: var(--ink-soft); padding: 5px 12px; font-size: 12px; font-weight: 500; border-radius: 999px; cursor: pointer; letter-spacing: 0.02em; } .theme-toggle button.active { background: var(--accent); color: white; } /* ---------- Layout ---------- */ main { max-width: 1320px; margin: 0 auto; padding: 32px var(--pad-page) 64px; } .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; } .toolbar .group { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); } .toolbar label { font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-faint); } .toolbar input[type="date"], .toolbar select { background: transparent; color: var(--ink); border: none; font-family: var(--font-mono); font-size: 13px; padding: 4px 6px; outline: none; color-scheme: light dark; } .spacer { flex: 1; } button.btn, a.btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; background: var(--accent); color: white; border: none; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; letter-spacing: 0.01em; transition: filter 0.15s ease; } button.btn:hover, a.btn:hover { filter: brightness(1.08); } button.btn:disabled { opacity: 0.5; cursor: not-allowed; } button.btn.ghost, a.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); } button.btn.ghost:hover, a.btn.ghost:hover { background: var(--bg-soft, var(--accent-soft)); } button.btn.danger, a.btn.danger { background: var(--negative); color: white; } /* ---------- Cards / Grid ---------- */ .cards { display: grid; gap: var(--gap); } .cards.kpis { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--gap); } .cards.split-two { grid-template-columns: 1fr 1fr; margin-bottom: var(--gap); } @media (max-width: 920px) { .cards.split-two { grid-template-columns: 1fr; } } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad-card); box-shadow: var(--shadow); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); /* Leave room for the sticky site header when scrollIntoView targets a card */ scroll-margin-top: 90px; } .card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px; } .kpi .value { font-family: var(--font-sans); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .kpi .sub { margin-top: 4px; font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); } .kpi.income .value { color: var(--positive); } .kpi.expense .value { color: var(--negative); } .kpi.net .value.positive { color: var(--positive); } .kpi.net .value.negative { color: var(--negative); } .card.kpi.clickable, .card.kpi.clickable * { cursor: pointer; } .card.kpi.clickable { transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .card.kpi.clickable:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); } .kpi-arrow { font-size: 11px; color: var(--ink-faint); margin-left: 4px; opacity: 0.7; transition: transform 0.12s ease, opacity 0.12s ease; display: inline-block; } .card.kpi.clickable:hover .kpi-arrow { opacity: 1; color: var(--accent); transform: translateY(2px); } .card.chart-card { padding: 16px; } .card .chart-wrap { position: relative; height: 320px; } /* ---------- Tables ---------- */ table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th, table.tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); } table.tbl th { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); } table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } table.tbl tr:last-child td { border-bottom: none; } /* ---------- Anomalies ---------- */ .anomaly { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--ink-faint); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--card-bg); } .anomaly.severity-alert { border-left-color: var(--negative); background: var(--negative-soft); } .anomaly.severity-warning { border-left-color: var(--warning); background: var(--warning-soft); } .anomaly.severity-info { border-left-color: var(--accent); background: var(--accent-soft); } .anomaly .type { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-top: 2px; flex-shrink: 0; width: 110px; } .anomaly .descr { flex: 1; font-size: 13px; color: var(--ink); } .anomaly button { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-soft); font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: var(--font-sans); } .anomaly button:hover { color: var(--ink); } .anomaly.acknowledged { opacity: 0.55; border-left-color: var(--ink-faint) !important; background: var(--card-bg) !important; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; } .field .hint { font-size: 12px; color: var(--ink-faint); font-weight: 400; } .field input, .field select { font-family: var(--font-sans); font-size: 14px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-soft, var(--card-bg)); color: var(--ink); outline: none; } .field input:focus, .field select:focus { border-color: var(--accent); background: var(--card-bg); } .actions { display: flex; gap: 10px; margin-top: 16px; } /* ---------- Login layout ---------- */ .login-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px; } .login-card { width: 100%; max-width: 420px; } .login-card h1 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 4px; } .login-card .sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 24px; } /* ---------- Misc ---------- */ .section-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .section-header h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin-right: auto; line-height: 1.2; } .section-header .meta { line-height: 1.2; padding-top: 4px; } /* Collapsible card toggle — sized to align optically with the h2 text top */ .collapse-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; padding: 0; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .collapse-btn:hover { color: var(--ink); border-color: var(--accent); } .card.collapsed > *:not(.section-header) { display: none !important; } .card.collapsed { padding-bottom: var(--pad-card); } .section-header .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; } .badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 500; } .badge.ok { background: var(--positive-soft); color: var(--positive); } .badge.warning { background: var(--warning-soft); color: var(--warning); } .badge.bad { background: var(--negative-soft); color: var(--negative); } .badge.muted { background: transparent; color: var(--ink-faint); border: 1px solid var(--border); } .empty { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 24px; } .notice { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: var(--gap); } .notice.error { background: var(--negative-soft); border-color: var(--negative); color: var(--negative); } .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } hr.sep { border: none; border-top: 1px solid var(--border); margin: 24px 0; } /* ---------- Invoice tables ---------- */ .invoice-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .invoice-search { flex: 1; max-width: 360px; font-family: var(--font-sans); font-size: 13px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-soft, var(--card-bg)); color: var(--ink); outline: none; } .invoice-search:focus { border-color: var(--accent); background: var(--card-bg); } .invoice-table-wrap { max-height: 540px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); } .invoice-table-wrap table.tbl { font-size: 12.5px; } .invoice-table-wrap table.tbl thead { position: sticky; top: 0; background: var(--card-bg); z-index: 1; box-shadow: 0 1px 0 var(--border); backdrop-filter: blur(var(--backdrop-blur)); -webkit-backdrop-filter: blur(var(--backdrop-blur)); } .invoice-table-wrap table.tbl thead th { cursor: pointer; user-select: none; white-space: nowrap; } .invoice-table-wrap table.tbl thead th:hover { color: var(--ink); } .invoice-table-wrap table.tbl thead th.sorted-asc::after { content: " ↑"; color: var(--accent); } .invoice-table-wrap table.tbl thead th.sorted-desc::after { content: " ↓"; color: var(--accent); } .invoice-table-wrap td.cp-cell .name { color: var(--ink); } .invoice-table-wrap td.cp-cell .afm { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.02em; margin-top: 1px; } .invoice-table-wrap td.type-cell { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; } .invoice-table-wrap td.date-cell { font-family: var(--font-mono); white-space: nowrap; } /* ============================================================================ * Mobile / tablet adjustments * Breakpoints: 768px (tablet / landscape phone), 480px (portrait phone) * * Two important rules below: * 1. html/body get overflow-x:hidden so no rogue child can push the * document wider than the viewport (sticky header still works because * it lives inside the body, not as a fixed-position root). * 2. Form inputs are 16px+ on mobile, otherwise iOS Safari auto-zooms * the whole viewport on focus — really jarring. * ========================================================================== */ @media (max-width: 768px) { :root { --pad-page: 16px; --pad-card: 18px; --gap: 14px; } html, body { max-width: 100vw; overflow-x: hidden; } main, .header-inner, .card, .toolbar { max-width: 100%; } .card { overflow: hidden; } /* Body text on mobile — bumps base readability without bloating */ body { font-size: 15px; } /* Header — wraps cleanly, hides the AADE tag, tightens spacing */ .header-inner { padding: 12px var(--pad-page); flex-wrap: wrap; gap: 10px 14px; align-items: center; } .brand { font-size: 19px; } .brand .tag { display: none; } nav.site { order: 3; width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; } nav.site::-webkit-scrollbar { display: none; } nav.site a { padding: 8px 14px; font-size: 14px; white-space: nowrap; } #theme-toggle { order: 2; } .theme-toggle button { padding: 6px 12px; font-size: 12px; } main { padding: 16px var(--pad-page) 40px; } /* Toolbar — each control claims a half-row, buttons full-width */ .toolbar { gap: 8px; } .toolbar .group { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 8px 12px; } .toolbar label { font-size: 11px; } .toolbar .group input, .toolbar .group select { flex: 1; width: 100%; min-width: 0; font-size: 16px; /* prevents iOS Safari auto-zoom on focus */ } .toolbar button.btn, .toolbar a.btn { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 12px 16px; font-size: 15px; } .toolbar .spacer { display: none; } #sync-badge { flex-basis: 100%; text-align: center; font-size: 12px; } /* KPI cards — one per row, bigger numbers stay legible */ .cards.kpis { grid-template-columns: 1fr; gap: 12px; } .card.kpi h2 { font-size: 13px; } .kpi .value { font-size: 30px; } .kpi .sub { font-size: 13px; line-height: 1.45; } /* Section headers — shrink slightly and wrap */ .section-header { gap: 10px; flex-wrap: wrap; } .section-header h2 { font-size: 17px; line-height: 1.25; } .section-header .meta { font-size: 12px; width: 100%; padding-top: 2px; } /* Collapse button — bigger tap target on touch */ .collapse-btn { width: 32px; height: 32px; font-size: 16px; margin-top: 0; } /* Chart card — shorter so it doesn't dominate small screens */ .card.chart-card { padding: 12px; } .card .chart-wrap { height: 260px; } /* Invoice tables — horizontal scroll INSIDE the wrap; wrap fits parent */ .invoice-toolbar { flex-wrap: wrap; gap: 8px; } .invoice-search { max-width: 100%; flex: 1 1 100%; padding: 10px 12px; font-size: 16px; /* prevents iOS auto-zoom */ } .csv-btn { flex: 0 0 auto; padding: 10px 14px; font-size: 14px; } .invoice-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 460px; max-width: 100%; -webkit-overflow-scrolling: touch; } .invoice-table-wrap table.tbl { font-size: 13px; min-width: 560px; /* scrolls inside .invoice-table-wrap only */ } .invoice-table-wrap table.tbl th, .invoice-table-wrap table.tbl td { padding: 9px 10px; } /* Anomalies — better tap targets, allow wrap on very narrow */ .anomaly { gap: 8px; padding: 11px 12px; align-items: center; } .anomaly .type { width: 100px; font-size: 10px; } .anomaly .descr { font-size: 13.5px; } .anomaly button { padding: 7px 14px; font-size: 13px; min-width: 40px; min-height: 36px; } /* Forms (settings page) — single column, 16px inputs */ .form-grid { grid-template-columns: 1fr; gap: 12px; } .field input, .field select { font-size: 16px; padding: 11px 13px; } } @media (max-width: 480px) { :root { --pad-page: 12px; --pad-card: 16px; } body { font-size: 15px; } .header-inner { padding: 10px var(--pad-page); } .brand { font-size: 17px; } .brand .dot { width: 7px; height: 7px; } main { padding: 12px var(--pad-page) 32px; } /* Toolbar controls go full-width one per row */ .toolbar .group { flex-basis: 100%; } .toolbar button.btn, .toolbar a.btn { flex: 1 1 calc(50% - 4px); } /* KPI sizes */ .kpi .value { font-size: 28px; } .kpi .sub { font-size: 12.5px; } /* Section title slightly smaller but still readable */ .section-header h2 { font-size: 16.5px; } /* Anomalies stack the type/descr/ack column-wise */ .anomaly { flex-wrap: wrap; padding: 11px; } .anomaly .type { width: auto; flex: 1 1 auto; } .anomaly button { flex: 0 0 auto; margin-left: auto; } .anomaly .descr { flex-basis: 100%; margin-top: 4px; } /* Type-mix and top-counterparties tables stay readable */ .card .tbl th, .card .tbl td { padding: 8px 8px; font-size: 13px; } } /* Disable iOS Safari tap-highlight on the clickable KPI cards */ @media (hover: none) and (pointer: coarse) { .card.kpi.clickable { -webkit-tap-highlight-color: transparent; } .card.kpi.clickable:active { transform: translateY(0); background: var(--accent-soft); } }