/* ============================================================ Heshbomail - Global Stylesheet SINGLE CSS file for entire application. NO other CSS files. ALL styling via shared classes and CSS variables. NO inline CSS anywhere in the project. ============================================================ */ /* ============================================================ CSS Custom Properties (Design Tokens) ============================================================ */ :root { /* Colors — Demo 9 sky-blue palette */ --color-primary: #0284c7; --color-primary-dark: #026aa2; --color-primary-light: rgba(2,132,199,0.08); --color-accent: #10b981; --color-accent-light: rgba(16,185,129,0.08); --color-success: #10b981; --color-error: #ef4444; --color-error-dark: #dc2626; --color-warning: #f59e0b; --color-info: #0ea5e9; --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-2: #ffffff; --color-surface-3: #f1f5f9; --color-text: #0f172a; --color-text-primary: var(--color-text); --color-text-secondary: #64748b; --color-text-tertiary: var(--color-text-secondary); --color-border: #e2e8f0; --pri: var(--color-primary); --danger: var(--color-error); /* Typography */ --font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", sans-serif; --font-family-hebrew: 'Inter', "Noto Sans Hebrew", "Heebo", sans-serif; --font-size-base: clamp(12px, 1.6vw, 16px); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --tap-target-size: clamp(40px, 5.5vw, 48px); --gap: clamp(14px, 2.5vw, 22px); --gap-sm: clamp(8px, 1.5vw, 14px); /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-card: 14px; --radius-btn: 10px; --radius-input: 10px; /* Scrollbars */ --scrollbar-size: 12px; --scrollbar-track: rgba(148,163,184,0.18); --scrollbar-thumb: rgba(100,116,139,0.52); --scrollbar-thumb-hover: rgba(2,132,199,0.54); --scrollbar-thumb-active: rgba(2,106,162,0.7); /* Transitions */ --transition-fast: 0.15s ease; --transition-theme: 0.3s ease; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); /* Border */ --border-color: var(--color-border); } /* ============================================================ Dark Theme Override Toggled by adding .dark class to element. ============================================================ */ html.dark { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #1e293b; --color-surface-3: #263448; --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-primary: #38bdf8; --color-primary-dark: #0ea5e9; --color-primary-light: rgba(56,189,248,0.1); --color-accent: #34d399; --color-accent-light: rgba(52,211,153,0.1); --color-success: #34d399; --color-error: #f87171; --color-error-dark: #ef4444; --color-warning: #fbbf24; --color-border: rgba(255,255,255,0.1); --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 4px 6px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px rgba(0,0,0,0.4); --scrollbar-track: rgba(148,163,184,0.14); --scrollbar-thumb: rgba(148,163,184,0.42); --scrollbar-thumb-hover: rgba(56,189,248,0.56); --scrollbar-thumb-active: rgba(14,165,233,0.72); } /* ============================================================ Reset & Base Styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size-base); color-scheme: light; scrollbar-gutter: auto; } html.dark { color-scheme: dark; } body { font-family: var(--font-family); font-weight: var(--font-weight-normal); font-size: var(--font-size-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background-color var(--transition-theme), color var(--transition-theme); } /* ============================================================ Global Scrollbars Keep all visible scrollbars aligned with the active theme. Component-specific hidden/minimal scrollbar rules can still override these. ============================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } *::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-thumb-active); } *::-webkit-scrollbar-corner { background: transparent; } [hidden] { display: none !important; } [dir="rtl"] body { font-family: var(--font-family-hebrew); direction: rtl; text-align: right; } /* ============================================================ Session-checking state — hide content to prevent flash Added by router.js while async session validation is in progress. The class is removed once the check is complete (success or failure). ============================================================ */ html.session-checking body, html.session-checking .page-content, html.session-checking main { visibility: hidden; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ============================================================ Navigation Header ============================================================ */ .nav-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; min-height: 56px; } [dir="rtl"] .nav-header { flex-direction: row-reverse; } .nav-logo { font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text); } .nav-actions { position: absolute; top: 56px; right: 0; background: var(--color-surface); flex-direction: column; padding: var(--space-4); border: 1px solid var(--color-border); display: none; z-index: 99; box-shadow: var(--shadow-md); align-items: center; gap: var(--space-2); } .nav-actions.open { display: flex; } [dir="rtl"] .nav-actions { right: auto; left: 0; } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 0.875rem; color: var(--color-text-secondary); min-height: var(--tap-target-size); min-width: var(--tap-target-size); } .lang-toggle:hover { background-color: var(--color-primary-light); color: var(--color-primary); } .hamburger-btn { display: flex; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text); min-height: 44px; min-width: 44px; padding: var(--space-2); align-items: center; justify-content: center; } [dir="rtl"] .hamburger-btn { order: -1; } .logout-btn { min-height: 44px; } /* ============================================================ Container — responsive centered wrapper ============================================================ */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } /* ============================================================ Page Title & Subtitle ============================================================ */ .page-title { font-size: 1.75rem; font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 var(--space-2) 0; } .page-subtitle { font-size: 1rem; color: var(--color-text-secondary); margin: 0 0 var(--space-6) 0; } [dir="rtl"] .page-title, [dir="rtl"] .page-subtitle { text-align: right; } /* ============================================================ Page Content Container ============================================================ */ .page-content { padding: var(--space-4); max-width: 1440px; margin-left: auto; margin-right: auto; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); font-size: 13px; font-weight: var(--font-weight-semibold); font-family: inherit; cursor: pointer; min-height: var(--tap-target-size); min-width: var(--tap-target-size); text-decoration: none; background: var(--color-surface); color: var(--color-text); transition: all 0.2s; white-space: nowrap; } .btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 16px rgba(2,132,199,0.25); color: #fff; } .btn-secondary { background-color: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-danger { background-color: transparent; border-color: var(--color-error); color: var(--color-error); } .btn-danger:hover { background-color: rgba(239,68,68,0.06); } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Button loading state — shows spinner, hides text */ .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } .btn-secondary.btn-loading::after { border-color: rgba(0, 0, 0, 0.15); border-top-color: var(--color-primary); } /* ============================================================ Form Controls ============================================================ */ .form-group { margin-bottom: var(--space-4); } [dir="rtl"] .form-group { text-align: right; } .form-label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); font-size: 0.875rem; color: var(--color-text); } .form-control { display: block; width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-input); min-height: var(--tap-target-size); transition: border-color 0.2s, box-shadow 0.2s, background-color var(--transition-theme); } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .form-control.is-error, .form-control[aria-invalid="true"] { border-color: var(--color-error); } .form-control.is-error:focus, .form-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); } .form-control:disabled { background-color: var(--color-bg); opacity: 0.6; cursor: not-allowed; } .form-error { margin-top: var(--space-1); font-size: 0.875rem; color: var(--color-error); line-height: 1.4; } .form-error:empty { display: none; } /* ============================================================ Form Input Component (.form-input — spec-required alias) Used interchangeably with .form-control across the application. ============================================================ */ .form-input { display: block; width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-input); min-height: var(--tap-target-size); transition: border-color 0.2s, box-shadow 0.2s, background-color var(--transition-theme); } .form-input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); } .form-input.error, .form-input[aria-invalid="true"] { border-color: var(--color-error); } .form-input.error:focus, .form-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); } .form-input:disabled { background-color: var(--color-bg); cursor: not-allowed; opacity: 0.6; } /* Select with custom dropdown arrow */ select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } [dir="rtl"] select.form-input { background-position: left var(--space-3) center; padding-right: var(--space-3); padding-left: var(--space-8); } /* Password toggle button — positioned inside password input wrapper */ .password-field { position: relative; } .password-field .form-input, .password-field .form-control { padding-right: var(--tap-target-size); } [dir="rtl"] .password-field .form-input, [dir="rtl"] .password-field .form-control { padding-right: var(--space-3); padding-left: var(--tap-target-size); } .password-toggle { position: absolute; right: 0; top: 0; height: 100%; width: var(--tap-target-size); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-base); padding: 0; line-height: 1; transition: color 0.15s ease; } .password-toggle:hover { color: var(--color-text); } .password-toggle:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); } [dir="rtl"] .password-toggle { right: auto; left: 0; } .form-grid { display: grid; gap: var(--space-4); } .form-grid.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ============================================================ Cards ============================================================ */ .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--gap); box-shadow: var(--shadow-sm); transition: background-color var(--transition-theme), border-color var(--transition-theme), box-shadow 0.15s ease; min-width: 0; } .card:hover { border-color: var(--color-primary); } [dir="rtl"] .card { text-align: right; } /* Card grid — responsive columns for provider cards and general card layouts */ .card-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } .card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: 1.5rem; } .card-title { font-weight: var(--font-weight-semibold); font-size: 1.0625rem; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text); } .card-value { font-size: 1.5rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); } /* Summary cards grid — dashboard 2x2 at desktop, stack at mobile */ .summary-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-6); } .summary-cards > .card { display: flex; flex-direction: column; } /* Chart container — constrains chart canvas for responsive sizing */ .chart-container { position: relative; width: 100%; min-height: 200px; max-height: 350px; } .chart-container canvas { max-width: 100%; } .dashboard-shell { display: flex; flex-direction: column; gap: var(--space-4); } .dashboard-header { display: flex; flex-direction: column; gap: var(--space-4); } .dashboard-title { margin: 0; font-size: 1.75rem; } .dashboard-card { display: flex; flex-direction: column; gap: var(--space-3); } .dashboard-card-title { margin: 0; font-size: 1rem; } .dashboard-card-value { font-size: 1.25rem; font-weight: var(--font-weight-semibold); } .dashboard-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .dashboard-list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .dashboard-muted { color: var(--color-text-secondary); } .dashboard-filter { min-width: 0; } .dashboard-date-input { min-width: 120px; cursor: pointer; } [dir="rtl"] .dashboard-date-input { padding-left: 50px; padding-right: 14px; } [dir="ltr"] .dashboard-date-input { padding-right: 50px; padding-left: 14px; } [dir="rtl"] .shared-filter-panel .dashboard-date-input.form-control, [dir="rtl"] .shared-filter-panel .dashboard-date-input.form-input { text-align: right !important; } [dir="ltr"] .shared-filter-panel .dashboard-date-input.form-control, [dir="ltr"] .shared-filter-panel .dashboard-date-input.form-input { text-align: left !important; } .shared-filter-panel .dashboard-date-input::placeholder { text-align: inherit; } .dashboard-date-field { position: relative; min-width: 0; } .dashboard-date-native { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .dashboard-date-picker-btn { position: absolute; top: 50%; transform: translateY(-50%); inline-size: 28px; block-size: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; border-radius: 8px; padding: 0; } [dir="rtl"] .dashboard-date-picker-btn { left: 12px; right: auto; } [dir="ltr"] .dashboard-date-picker-btn { right: 12px; left: auto; } .dashboard-date-picker-btn:hover, .dashboard-date-picker-btn:focus-visible { color: var(--color-text); background: rgba(255, 255, 255, 0.06); outline: none; } .dashboard-per-page { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); } .dashboard-select { width: auto; min-width: 88px; } .localized-date { direction: ltr; unicode-bidi: plaintext; } .dashboard-stack { display: flex; flex-direction: column; gap: var(--space-7); } .dashboard-header { display: flex; flex-direction: column; gap: var(--space-4); } .dashboard-header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .dashboard-header h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); } .dashboard-header .action-bar { margin-bottom: 0; } .dashboard-panel { display: flex; flex-direction: column; gap: var(--space-4); } .dashboard-copy { color: var(--color-text-secondary); font-size: 0.875rem; margin-top: var(--space-1); } .summary-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .summary-label { color: var(--color-text-secondary); font-size: 0.875rem; } .summary-amount { font-weight: var(--font-weight-semibold); font-size: 1rem; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .summary-amounts-stack { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); } [dir="rtl"] .summary-amounts-stack { align-items: flex-start; } .amounts-separator { color: var(--color-text-secondary); font-weight: var(--font-weight-normal); font-size: 0.875rem; } .summary-empty { color: var(--color-text-secondary); font-size: 0.9375rem; } .chart-empty { text-align: center; padding: var(--space-8) var(--space-4); } /* --- Top Vendors Card (ranked vendor list) --- */ .vendor-list { list-style: none; counter-reset: none; padding: 0; margin: 0; } .vendor-row { display: flex; align-items: center; gap: var(--space-3); } .vendor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--color-text); } [dir="rtl"] .vendor-name { text-align: right; } /* ── Vendor meta (amount + receipt count) ─────────────── */ .vendor-meta { display: flex; align-items: center; gap: var(--space-3); flex: 1; justify-content: flex-start; } .vendor-meta-content { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } [dir="rtl"] .vendor-meta-content { align-items: flex-start; } .vendor-rank { flex-shrink: 0; font-weight: var(--font-weight-semibold); font-size: 1.5rem; color: var(--color-text-secondary); } .vendor-meta-sub { display: flex; align-items: center; gap: var(--space-2); } /* ── Summary helper: receipt count + percentage labels ── */ .summary-count { font-size: 0.75rem; color: var(--color-text-secondary); white-space: nowrap; } .summary-pct { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; min-width: 3rem; text-align: right; } [dir="rtl"] .summary-pct { text-align: left; } /* ── Category breakdown grid ─────────────────────────── */ .category-breakdown-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 4px; row-gap: 0; } .category-breakdown-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } .category-breakdown-row:last-child { border-bottom: none; } .cb-col-amount { text-align: start; white-space: nowrap; } .cb-col-pct { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); white-space: nowrap; text-align: start; flex: 0 0 3rem; } .cb-col-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); white-space: nowrap; } .cb-col-end .category-indicator { display: flex; flex: 0 0 5.5rem; } .cb-count { font-size: 0.75rem; color: var(--color-text-secondary); flex: 0 0 3.5rem; text-align: start; } .cb-col-bar { grid-column: 1 / -1; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; margin-top: var(--space-1); } .category-pct-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; } /* ── Category breakdown: MOBILE layout ────────────────── On narrow screens the two-column grid overflows because the amounts column (multi-currency, e.g. "₪ 3,039 + $ 64.99 + € 0.78") plus the fixed-width end column don't fit. Fix: switch to a single-column stacked layout where row 1 = category name + count, row 2 = amounts + pct, row 3 = progress bar. Everything wraps naturally. ─────────────────────────────────────────────────────── */ @media (max-width: 959px) { /* -- List: kill the grid entirely, just stack rows -- */ .category-breakdown-list { display: flex !important; flex-direction: column; grid-template-columns: none; gap: 0; } /* -- Row: flex column instead of subgrid -- */ .category-breakdown-row { display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: none; grid-column: unset; gap: var(--space-1); padding: var(--space-3) 0; } /* -- Top line: category name + dot, count, pct — all in one row -- */ .cb-col-end { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); order: -1; /* move above amounts */ white-space: nowrap; } .cb-col-end .category-indicator { flex: 1 1 auto; /* override fixed 5.5rem width, let name breathe */ min-width: 0; } .cb-count { flex: 0 0 auto; text-align: end; } .cb-col-pct { flex: 0 0 auto; text-align: end; } /* -- Amounts row — allow wrapping for multi-currency -- */ .cb-col-amount { white-space: normal !important; /* override nowrap from desktop */ } .cb-col-amount .summary-amounts-stack { flex-wrap: wrap; gap: var(--space-1); } .cb-col-amount .summary-amount { font-size: 0.9375rem; } /* -- Bar: full width, no grid-column -- */ .cb-col-bar { grid-column: unset; width: 100%; } } /* ── Expand / collapse toggle ─────────────────────────── */ .breakdown-expand-container { list-style: none; padding: 0; margin: var(--space-2) 0 0; } .btn-expand-toggle { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; color: var(--color-primary); font-size: 0.8125rem; font-weight: var(--font-weight-medium); cursor: pointer; padding: var(--space-1) 0; transition: color var(--transition-fast); } .btn-expand-toggle:hover { color: var(--color-primary-dark); text-decoration: underline; } .breakdown-expand-list { margin-top: var(--space-2); padding: 0; } .total-spent-single { display: flex; align-items: center; justify-content: center; padding: var(--space-6) 0; } .total-spent-amount { font-size: 2.25rem; font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); line-height: 1.2; font-variant-numeric: tabular-nums; } .dashboard-table-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .dashboard-table-meta .card-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; font-size: 1.125rem; } /* Receipt table section — extra padding for readability */ .receipt-table-container { padding: var(--space-6); } .receipt-table-container .table-container { margin-top: var(--space-2); } .dashboard-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 0.875rem; font-weight: var(--font-weight-semibold); } .amount-cell { font-weight: var(--font-weight-semibold); text-align: right; font-variant-numeric: tabular-nums; } .recurring-amount-wrap { position: relative; display: inline-flex; align-items: center; direction: ltr; vertical-align: middle; white-space: nowrap; } .recurring-amount-marker { position: absolute; inset-inline-end: 0; top: 50%; width: 22px; height: 22px; flex: 0 0 22px; transform: translateY(-50%); border-radius: 50%; border: 2.1px solid rgba(52,211,153,0.9); box-shadow: inset 0 0 0 2px rgba(15,23,42,0.88), 0 0 0 1px rgba(52,211,153,0.14); } .recurring-amount-marker::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10h9.8' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M10.8 5.8L16 10l-5.2 4.2' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(56,189,248,0.22)); } .recurring-amount-marker-up::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 12V5.25' stroke='%23fb7185' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M5 7.75L8 4.25L11 7.75' stroke='%23fb7185' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(251,113,133,0.22)); } .recurring-amount-marker-down::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 4v6.75' stroke='%2334d399' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M11 8.25L8 11.75L5 8.25' stroke='%2334d399' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(52,211,153,0.22)); } .attachment-indicator { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; color: var(--color-primary-dark); font-size: 1rem; line-height: 1; } .attachment-indicator-empty { color: var(--color-text-secondary); } .attachment-actions { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: nowrap; width: 100%; min-width: 0; } .attachment-actions .btn { padding: var(--space-1) var(--space-1); min-width: unset; min-height: unset; font-size: 0.8125rem; } .attachment-actions .attachment-action { min-width: 32px; min-height: 32px; padding-inline: var(--space-1); } .attachment-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--radius-sm); transition: background-color 0.15s ease; } .attachment-btn:hover { background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05)); } .attachment-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .attachment-btn.is-loading { opacity: 0.5; cursor: wait; } .attachment-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--tap-target-size); min-height: var(--tap-target-size); padding-inline: var(--space-3); white-space: nowrap; } .attachment-action:disabled { opacity: 0.6; } .attachment-action-icon { font-size: 1rem; line-height: 1; } .attachment-action-text { font-size: 0.875rem; } html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: contain; } .table-muted { color: var(--color-text-secondary); } [dir="rtl"] .summary-row, [dir="rtl"] .dashboard-table-meta { flex-direction: row-reverse; } /* ============================================================ Table ============================================================ */ /* --- Data Table Component (.data-table / .table-container) --- */ .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .data-table { min-width: 960px; border-collapse: collapse; background: var(--color-surface); table-layout: fixed; font-size: 0.8125rem; } .data-table th { padding: var(--space-3) var(--space-4); background: var(--color-bg); font-weight: var(--font-weight-semibold); text-align: center !important; border-bottom: 2px solid var(--color-border); white-space: nowrap; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-text-secondary); } /* Pointer affordance only for sortable columns */ .data-table th.sortable, .receipt-table th.sortable { cursor: pointer; user-select: none; } .receipt-table th.sortable:hover { color: var(--color-primary); } .receipt-table th.sorted-asc::after { content: ' ▲'; font-size: 9px; } .receipt-table th.sorted-desc::after { content: ' ▼'; font-size: 9px; } .data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid #F1F5F9; vertical-align: middle; text-align: center; transition: background-color 0.15s ease; } /* Zebra striping — alternating row colors */ .data-table tbody tr:nth-child(even) td { background-color: #F8FAFC; } /* Row hover highlight */ .data-table tbody tr:hover td { background-color: #EFF6FF; } /* Clickable rows — pointer cursor (rows open detail modal) */ .data-table tbody tr { cursor: pointer; } .data-table tbody tr:focus-visible td { outline: 2px solid var(--color-primary); outline-offset: -2px; background-color: #DBEAFE; } /* Remove border on last row for cleaner look */ .data-table tbody tr:last-child td { border-bottom: none; } /* Column widths — date and amount narrow/fixed, vendor flexes */ .data-table .col-date { width: 8%; min-width: 8%; text-align: center; } .data-table .col-vendor { width: 12%; min-width: 12%; text-align: center; } .data-table .col-email-subject { width: auto; min-width: 20%; text-align: center; } .data-table .col-amount { width: 7%; min-width: 7%; text-align: center; } .data-table .col-currency { width: 5%; min-width: 5%; text-align: center; } .data-table .col-payment { width: 10%; min-width: 10%; text-align: center; } .data-table .col-confidence { width: 10%; min-width: 10%; text-align: center; } .data-table .col-category { width: 20%; min-width: 20%; text-align: center; overflow: hidden; } .data-table .col-attachment { width: 4%; min-width: 4%; overflow: hidden; } /* Amount cell — right-aligned with consistent formatting */ .data-table td.amount-cell { text-align: center; font-variant-numeric: tabular-nums; } .data-table th.sorted-asc::after { content: '\25B2'; margin-inline-start: var(--space-1); font-size: 0.75em; } .data-table th.sorted-desc::after { content: '\25BC'; margin-inline-start: var(--space-1); font-size: 0.75em; } /* RTL layout mirrors */ [dir="rtl"] .data-table th, [dir="rtl"] .data-table td { text-align: center; } [dir="rtl"] .data-table td.amount-cell, [dir="rtl"] .data-table th.col-amount { text-align: center; } /* Amount note — "See attachment" label for zero-amount receipts with attached invoices */ .amount-note { color: var(--color-primary, #0284c7); font-size: var(--font-size-sm, 0.875rem); font-style: italic; cursor: help; } /* Vendor and email subject cells — allow text to truncate gracefully with ellipsis */ .data-table td.vendor-cell, .data-table td.email-subject-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; /* needed with table-layout:fixed for ellipsis */ } /* Mobile-only elements: hidden on desktop */ .mobile-currency { display: none; } .date-short { display: none; } /* --- Legacy Table Component (.table / .table-wrapper) --- */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; } [dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; } .table th { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); background-color: var(--color-bg); } /* Pointer affordance only for sortable columns */ .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--color-primary); } .table tbody tr:hover td { background-color: var(--color-bg); } .table tbody tr:nth-child(even) td { background-color: #FAFBFC; } .table tbody tr:last-child td { border-bottom: none; } /* Sort indicator */ .sort-indicator { display: inline-block; margin-inline-start: var(--space-1); opacity: 0.4; } .sort-indicator.active { opacity: 1; color: var(--color-primary); } /* ============================================================ Pagination ============================================================ */ .pagination { display: flex; align-items: center; justify-content: center; padding: var(--space-4); border-top: 1px solid var(--color-border); flex-wrap: wrap; gap: var(--space-2); } /* Split pagination layout (info left, controls right) — dashboard override */ .pagination-split { justify-content: space-between; } .pagination-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .pagination-info { font-size: 0.875rem; color: var(--color-text-secondary); } .pagination-page-size { display: inline-flex; align-items: center; gap: var(--space-2); } .pagination-page-size-select { width: auto; min-width: 5.5rem; } .pagination-controls { display: flex; align-items: center; gap: var(--space-2); } .pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target-size); min-width: var(--tap-target-size); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; font-size: 0.875rem; color: var(--color-text); } .pagination-btn:hover:not(:disabled) { background-color: var(--color-primary-light); color: var(--color-primary); } .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .pagination-btn.active { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } [dir="rtl"] .pagination-summary, [dir="rtl"] .pagination-page-size { flex-direction: row-reverse; } @media (max-width: 640px) { .pagination-split { justify-content: center; } .pagination-summary { width: 100%; justify-content: space-between; } } /* ============================================================ Modal / Dialog ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); width: 680px; max-width: 90vw; max-height: 85dvh; overflow: auto; position: relative; box-shadow: var(--shadow-lg); } /* Legacy .modal alias for backward compatibility */ .modal { background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 600px; width: 100%; max-height: 85dvh; overflow-y: auto; padding: var(--space-4); margin: var(--space-4); position: relative; } .modal-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); } .modal-title { font-size: 1.125rem; font-weight: var(--font-weight-semibold); margin: 0; } .modal-close { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text-secondary); width: var(--tap-target-size); height: var(--tap-target-size); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .modal-close:hover { background-color: var(--color-bg); color: var(--color-text); } [dir="rtl"] .modal-close { right: auto; left: var(--space-3); } /* attachment-preview-* rules consolidated at end of file */ .receipt-detail-modal { position: relative; z-index: 1; max-width: min(960px, 92vw); width: min(960px, 92vw); padding: var(--space-5); } .receipt-detail-backdrop { position: absolute; top: var(--space-4); left: var(--space-4); width: 88px; height: 88px; border: 0; padding: 0; margin: 0; background: transparent; } [dir="rtl"] .receipt-detail-backdrop { left: auto; right: var(--space-4); } .receipt-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-right: calc(var(--tap-target-size) + var(--space-2)); } [dir="rtl"] .receipt-detail-header { padding-right: 0; padding-left: calc(var(--tap-target-size) + var(--space-2)); } .receipt-detail-header-copy { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .receipt-detail-subtitle { margin: 0; color: var(--color-text-secondary); word-break: break-word; } .receipt-detail-content { display: flex; flex-direction: column; gap: var(--space-5); } .receipt-detail-section { display: flex; flex-direction: column; gap: var(--space-3); } .receipt-detail-section-title { margin: 0; font-size: 1rem; font-weight: var(--font-weight-semibold); color: var(--color-text); } .receipt-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; } .receipt-detail-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; } .receipt-detail-label { font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); } .receipt-detail-value { margin: 0; color: var(--color-text); word-break: break-word; } [dir="rtl"] .receipt-detail-label, [dir="rtl"] .receipt-detail-value { text-align: right; } [dir="rtl"] .receipt-detail-section-title { text-align: right; } [dir="rtl"] .receipt-detail-body { direction: rtl; text-align: right; } .receipt-detail-confidence-stack { display: flex; flex-direction: column; gap: var(--space-2); } .receipt-detail-help { margin: 0; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.5; } .receipt-detail-body-section { display: flex; flex-direction: column; gap: var(--space-2); } .receipt-detail-body { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); max-height: min(40vh, 360px); overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: inherit; line-height: 1.5; } .receipt-detail-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); } [dir="rtl"] .receipt-detail-actions { justify-content: flex-start; } @media (max-width: 959px) { /* Modal: full-screen mobile layout */ .receipt-detail-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; padding: 0; border-radius: 0; margin: 0; box-sizing: border-box; background-color: var(--color-bg); display: flex; flex-direction: column; } /* Header: prominent top bar */ .receipt-detail-header { gap: var(--space-1); padding: var(--space-4); padding-right: calc(var(--tap-target-size) + var(--space-2)); background: var(--color-primary); color: #fff; border-radius: 0; margin: 0; flex-shrink: 0; } [dir="rtl"] .receipt-detail-header { padding-right: var(--space-4); padding-left: calc(var(--tap-target-size) + var(--space-2)); } .receipt-detail-header .modal-title { font-size: 1.125rem; color: #fff; } .receipt-detail-header .modal-close { color: rgba(255, 255, 255, 0.8); } .receipt-detail-subtitle { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); } /* Scrollable content area */ .receipt-detail-content { gap: var(--space-3); padding: var(--space-3); overflow-y: auto; flex: 1; min-height: 0; } /* Sections as bordered cards */ .receipt-detail-section { gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .receipt-detail-section-title { font-size: 0.75rem; padding: var(--space-2) var(--space-3); margin: 0; background: var(--color-primary-light); border-bottom: 1px solid var(--color-border); color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--font-weight-semibold); } /* 2-column grid for fields inside cards */ .receipt-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; } /* Each field: label on top, value below */ .receipt-detail-field { flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); margin: 0; } /* Confidence field spans full width (has long text) */ .receipt-detail-field:nth-child(4) { grid-column: 1 / -1; } .receipt-detail-field:last-child, .receipt-detail-field:nth-last-child(1) { border-bottom: 0; } /* Remove bottom border from second-to-last row if 2-col */ .receipt-detail-grid .receipt-detail-field:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .receipt-detail-label { font-size: 0.6875rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; } .receipt-detail-value { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: start; } .receipt-detail-confidence-stack { flex-direction: column; gap: var(--space-1); } .receipt-detail-help { font-size: 0.6875rem; line-height: 1.4; } /* Email section: subject/sender/date in single column */ .receipt-detail-section:last-of-type .receipt-detail-grid { grid-template-columns: minmax(0, 1fr); } /* Email body */ .receipt-detail-body-section { padding: var(--space-2) var(--space-3); gap: var(--space-2); border-top: 1px solid var(--color-border); } .receipt-detail-body-section .receipt-detail-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; } .receipt-detail-body { max-height: min(25vh, 200px); font-size: 0.75rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); } /* Sticky close button at bottom */ .receipt-detail-actions { margin: 0; padding: var(--space-3); gap: var(--space-2); border-top: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; } .receipt-detail-actions .btn { flex: 1; text-align: center; padding: var(--space-3); } } /* ============================================================ Toast Notifications ============================================================ */ .toast-container { position: fixed; top: var(--space-4); right: var(--space-4); left: var(--space-4); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-2); width: auto; max-width: none; } [dir="rtl"] .toast-container { right: var(--space-4); left: var(--space-4); } .toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-btn); color: white; font-weight: 500; font-size: 13px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-2); animation: toast-in 0.3s ease-out; } .toast-success { background-color: var(--color-success); } .toast-error { background-color: var(--color-error); } .toast-warning { background-color: var(--color-warning); color: var(--color-text); } .toast-info { background-color: var(--color-info); } .toast-exit { animation: toast-out 0.3s ease-in forwards; } @keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [dir="rtl"] .toast { animation-name: toast-in-rtl; } [dir="rtl"] .toast-exit { animation-name: toast-out-rtl; } @keyframes toast-in-rtl { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out-rtl { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } @keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* ============================================================ Loading Spinner ============================================================ */ .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } .spinner-lg { width: 48px; height: 48px; border-width: 4px; } .spinner-dark { border-color: var(--color-border); border-top-color: var(--color-primary); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================ Progress Bar ============================================================ */ .progress-container { width: 100%; background: var(--color-border); border-radius: var(--radius-md); height: 20px; overflow: hidden; } /* Legacy alias — keep for backward compatibility */ .progress-bar-wrapper { background-color: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; height: 8px; width: 100%; } .progress-bar { width: 0; height: 100%; background: var(--color-primary); border-radius: var(--radius-md); transition: width 0.3s ease; min-width: 0; } .progress-text { text-align: center; margin-top: var(--space-2); font-size: 0.875rem; color: var(--color-text-secondary); } /* ============================================================ Loading Overlay ============================================================ */ .loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); } /* Hide any child .spinner inside .btn-loading to prevent duplicate spinners. The canonical loading indicator is the ::after pseudo-element defined above. */ .btn-loading .spinner { display: none; } /* ============================================================ Badge / Category Dot ============================================================ */ .category-indicator { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; } .category-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: var(--space-2); flex-shrink: 0; vertical-align: middle; } .category-indicator .category-dot { margin-inline-end: 0; } .category-select-control { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; } .receipt-category-select { flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0; font-size: 0.8125rem; padding: var(--space-1) var(--space-2); } .category-name { font-size: 0.875rem; color: var(--color-text); line-height: 1.2; } .badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: var(--font-weight-semibold); } .badge-confidence { justify-content: center; min-width: 72px; padding: 4px 10px; border-radius: 999px; color: #FFFFFF; white-space: nowrap; } .badge-confidence-high { background-color: #22C55E; } .badge-confidence-medium { background-color: #EAB308; } .badge-confidence-low { background-color: #EF4444; } /* ============================================================ Provider Cards (Landing Page) ============================================================ */ .provider-grid { margin-top: var(--space-6); } .provider-card { display: flex; flex-direction: column; align-items: center; padding: var(--space-6) var(--space-4); background-color: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; text-align: center; min-height: 120px; gap: var(--space-3); } .provider-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .provider-card:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .provider-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .provider-card .card-icon { transition: transform 0.2s ease; } .provider-card:hover .card-icon { transform: scale(1.1); } .provider-icon { font-size: 2rem; line-height: 1; } .provider-name { font-weight: var(--font-weight-semibold); font-size: 0.9375rem; color: var(--color-text); } .card-description, .provider-desc { font-size: 0.8125rem; color: var(--color-text-secondary); } /* ============================================================ Login Page ============================================================ */ .login-container { max-width: 480px; margin: var(--space-8) auto; } .login-card { display: flex; flex-direction: column; gap: var(--space-4); } .login-form { display: flex; flex-direction: column; gap: var(--space-4); } .login-form .form-group { margin-bottom: 0; } .provider-info { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); } .provider-info .provider-icon { font-size: 2.5rem; } .provider-info .provider-name { font-size: 1.25rem; margin: 0; } .password-wrapper { position: relative; } .password-wrapper .form-input, .password-wrapper .form-control { padding-right: calc(var(--tap-target-size) + var(--space-3)); } [dir="rtl"] .password-wrapper .form-input, [dir="rtl"] .password-wrapper .form-control { padding-right: var(--space-3); padding-left: calc(var(--tap-target-size) + var(--space-3)); } .password-wrapper .password-toggle { position: absolute; right: var(--space-2); top: 50%; min-height: var(--tap-target-size); min-width: var(--tap-target-size); display: flex; align-items: center; justify-content: center; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-base); padding: var(--space-1); line-height: 1; } .password-wrapper .password-toggle:hover { color: var(--color-text); } .password-toggle-icon { pointer-events: none; line-height: 1; } [dir="rtl"] .password-wrapper .password-toggle { right: auto; left: var(--space-2); } .btn-full-width { width: 100%; } .back-link { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-text-secondary); font-size: 0.875rem; text-decoration: none; min-height: var(--tap-target-size); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .back-link:hover { color: var(--color-primary); text-decoration: underline; } .app-password-help { font-size: 0.875rem; background-color: var(--color-primary-light); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); line-height: 1.5; } .app-password-help:empty { display: none; } .app-password-help .app-password-info { margin: 0 0 var(--space-2) 0; color: var(--color-text); } .app-password-help .app-password-info:last-child { margin-bottom: 0; } .app-password-help a { display: inline-flex; align-items: center; color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-semibold); min-height: var(--tap-target-size); } .app-password-help a:hover { text-decoration: underline; } @media (max-width: 640px) { .form-grid.form-grid-2 { grid-template-columns: 1fr; } } /* ============================================================ Dropdown ============================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 160px; z-index: 200; overflow: hidden; } [dir="rtl"] .dropdown-menu { right: auto; left: 0; } .dropdown-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; font-size: 0.9375rem; color: var(--color-text); min-height: var(--tap-target-size); background: none; border: none; width: 100%; text-align: left; } [dir="rtl"] .dropdown-item { text-align: right; } .dropdown-item:hover { background-color: var(--color-bg); color: var(--color-primary); } /* ============================================================ Scan Page ============================================================ */ .scan-container { max-width: 480px; margin: var(--space-12) auto 0; } .scan-info-banner { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background-color: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-size: 0.9375rem; color: var(--color-primary-dark); } .scan-banner-text { line-height: 1.5; } .scan-banner-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .scan-error-banner { background-color: rgba(220, 38, 38, 0.1); border-color: var(--color-error); color: var(--color-error-dark); } .btn-sm { padding: var(--space-2) var(--space-3); font-size: 0.875rem; min-height: var(--tap-target-size); min-width: var(--tap-target-size); } /* ── Scan config card ── */ .scan-config-card { padding: var(--space-6) var(--space-6) var(--space-5); text-align: center; } .scan-config-header { margin-bottom: var(--space-5); } .scan-config-title { font-size: 1.25rem; font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1) 0; color: var(--color-text); } .scan-config-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; } .scan-config-body { margin-bottom: var(--space-5); } .period-selector { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: 0; } .period-btn { font-size: 0.875rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .period-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); color: var(--color-primary); } .period-btn.active { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .period-btn.active:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .scan-start-btn { width: 100%; padding: var(--space-3) var(--space-5); font-size: 1rem; } /* ============================================================ Empty State ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); color: var(--color-text-secondary); text-align: center; gap: var(--space-3); } .empty-state-icon { font-size: 3rem; opacity: 0.4; } .empty-state-text { font-size: var(--font-size-base); max-width: 320px; } /* ============================================================ Action Bar (Dashboard) ============================================================ */ .action-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); } .action-bar-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); flex: 1 1 auto; min-width: 0; } .action-bar-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; align-self: flex-end; } .dashboard-filter-form { /* inherits flex layout from .action-bar-filters */ } .dashboard-filter-form .dashboard-filter { flex: 0 1 auto; min-width: 100px; margin-bottom: 0; } .dashboard-filter-form .dashboard-filter .form-label { margin-bottom: var(--space-1); font-size: 0.8125rem; } .dashboard-filter-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; align-self: flex-end; } @media (max-width: 959px) { .action-bar { flex-direction: column; align-items: stretch; } .action-bar-filters { flex-wrap: wrap; } .action-bar-filters .dashboard-filter { flex: 1 1 calc(50% - var(--space-3)); min-width: 0; } .dashboard-filter-actions { justify-content: center; width: 100%; } .dashboard-filter-actions .btn, .action-bar-actions .btn { flex: 1 1 0; min-width: 0; } .action-bar-actions { justify-content: center; flex-wrap: wrap; width: 100%; } } /* ============================================================ Scan Info Bar ============================================================ */ .scan-info-bar { display: flex; align-items: center; justify-content: space-evenly; gap: var(--space-4); padding: var(--space-3) var(--space-5); background-color: var(--color-primary-light); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--color-text-secondary); flex-wrap: wrap; } .scan-info-item { display: flex; align-items: center; gap: var(--space-2); } /* ============================================================ Health Diagnostics ============================================================ */ .health-layout { display: grid; gap: var(--space-4); } .health-panel { display: flex; flex-direction: column; gap: var(--space-4); } .health-eyebrow { margin: 0; font-size: 0.75rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); } .health-title, .health-subtitle, .health-table-title { margin: 0; } .health-copy, .health-result-copy, .health-result-hint { margin: 0; color: var(--color-text-secondary); } .health-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } .health-stat { padding: var(--space-4); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .health-stat-label { display: block; margin-bottom: var(--space-2); font-size: 0.8125rem; color: var(--color-text-secondary); } .health-stat-value { font-size: var(--font-size-base); color: var(--color-text); } .health-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .health-table-list, .health-result { padding: var(--space-4); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .health-table-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .health-table-pill { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: 999px; background-color: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.8125rem; } .health-table-pill.is-good { border-color: rgba(22, 163, 74, 0.3); color: var(--color-success); } .health-table-pill.is-bad { border-color: rgba(220, 38, 38, 0.3); color: var(--color-error); } .health-detail-list { margin: var(--space-4) 0 0; } .health-detail-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } .health-detail-row:last-child { border-bottom: none; } .health-detail-label, .health-detail-value { margin: 0; } .health-detail-label { color: var(--color-text-secondary); } .health-detail-value { word-break: break-word; } /* ============================================================ Utility ============================================================ */ .hidden { display: none !important; } /* Mobile-first visibility utilities */ .hide-mobile { display: none; } .hide-desktop { display: block; } /* ============================================================ Scan Custom Date Range ============================================================ */ .scan-custom-range { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); align-items: flex-end; } .scan-custom-range .form-group { flex: 1; min-width: 140px; margin-bottom: 0; } /* ============================================================ Scan Progress ============================================================ */ .scan-progress-card { padding: var(--space-6) var(--space-6) var(--space-5); } .scan-progress-bar-area { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .progress-bar-lg { height: 16px; border-radius: var(--radius-md); flex: 1; } .progress-bar-lg .progress-bar { border-radius: var(--radius-md); } .scan-progress-pct { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text); min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; } .scan-progress-status { font-size: 0.9375rem; color: var(--color-text-secondary); margin-top: var(--space-3); text-align: center; } /* ── Scan stats grid (Demo 9 style: card grid) ── */ .scan-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); margin-top: var(--space-5); margin-bottom: var(--space-5); } .scan-stat-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); font-size: 0.875rem; } .scan-stat-row + .scan-stat-row { border-top: 1px solid var(--color-border); } .scan-stat-row-subtle { background-color: var(--color-bg-secondary, #f9fafb); } .scan-stat-label { color: var(--color-text-secondary); } .scan-stat-value { font-weight: var(--font-weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; } .scan-stat-total { color: var(--color-text-secondary); font-weight: var(--font-weight-normal); } .scan-stat-mono { font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; letter-spacing: 0.02em; } /* OLD counter classes — kept for backward compat */ .scan-progress-counters { display: none; } .scan-counter-label { font-weight: var(--font-weight-semibold); color: var(--color-text); } .scan-counter-phrase { font-weight: var(--font-weight-semibold); color: var(--color-text); } /* ============================================================ App Topbar — PC sticky navigation (>=960px) ============================================================ */ .app-topbar { display: none; /* shown at >=960px via media query */ grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 16px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; transition: background-color var(--transition-theme), border-color var(--transition-theme); } .app-topbar-logo { font-size: 15px; font-weight: 700; color: var(--color-text); } .app-topbar-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .app-topbar-pills { display: flex; gap: 4px; padding: 4px; background: var(--color-bg); border-radius: var(--radius-btn); border: 1px solid var(--color-border); } .app-pill { padding: 8px 18px; border-radius: 8px; border: none; background: transparent; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; text-decoration: none; } .app-pill:hover { color: var(--color-text); text-decoration: none; } .app-pill.active { background: var(--color-primary); color: #fff; } .app-topbar-actions { display: flex; align-items: center; gap: 8px; } /* ============================================================ Theme Toggle Button ============================================================ */ .theme-toggle { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--color-text); } .theme-toggle:hover { border-color: var(--color-primary); } /* ============================================================ App Mobile Header — visible on <960px ============================================================ */ .app-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .app-mobile-header-logo { font-size: 16px; font-weight: 700; color: var(--color-text); } .app-mobile-header-actions { display: flex; align-items: center; gap: 8px; } /* ============================================================ App Bottom Bar — mobile fixed navigation ============================================================ */ .app-bottombar { position: fixed; left: 9.5px; right: 9.5px; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0; min-height: 18px; padding: 0 8px 1px; background: linear-gradient(180deg, rgba(56,189,248,0.09), rgba(56,189,248,0.03)), linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 62%, var(--color-surface) 38%), color-mix(in srgb, var(--color-bg) 70%, var(--color-surface) 30%) ); border: 1px solid rgba(56,189,248,0.16); border-radius: 0 0 40px 40px; box-shadow: 0 22px 44px rgba(0,0,0,0.42), 0 0 0 1px rgba(56,189,248,0.16), inset 0 1px 0 rgba(255,255,255,0.05); z-index: 100; transition: background-color var(--transition-theme); overflow: visible; isolation: isolate; } .app-bottombar::before { display: none; content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 82px; height: 28px; background: linear-gradient(180deg, rgba(56,189,248,0.09), rgba(56,189,248,0.03)), linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 62%, var(--color-surface) 38%), color-mix(in srgb, var(--color-bg) 70%, var(--color-surface) 30%) ); border-radius: 999px 999px 0 0; pointer-events: none; z-index: -1; } .app-btab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; min-width: 0; min-height: 0; padding: 0 2px; border-radius: 0; border: none; background: transparent; color: var(--color-text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; text-decoration: none; position: relative; } .app-btab:hover { text-decoration: none; color: var(--color-text); } .app-btab.active { color: var(--color-primary); background: transparent; } .app-btab-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; color: currentColor; } .app-btab:not(.app-btab-add) .app-btab-icon { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); } .app-btab-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app-btab-label { display: block; max-width: 58px; line-height: 1; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; position: relative; z-index: 1; top: -15px; font-size: 13px; } .app-btab-add { top: -38px; gap: 1px; align-self: start; color: var(--color-primary); min-height: 52px; } .app-btab-add .app-btab-icon { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; border: none; box-shadow: 0 10px 20px rgba(2,132,199,0.22); } .app-btab-add .app-btab-icon svg { width: 28px; height: 28px; stroke-width: 2.3; } .app-btab-add .app-btab-label { color: var(--color-primary); max-width: 64px; top: 5px; } /* Mobile export action sheet */ .mobile-export-sheet { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; } .mobile-export-sheet-content { background: var(--color-surface); border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 4px; } .mobile-export-opt { padding: 14px; border: none; background: none; font-size: 16px; font-weight: 500; color: var(--color-primary); cursor: pointer; border-radius: 10px; text-align: center; } .mobile-export-opt:hover { background: var(--color-primary-light); } .mobile-export-cancel { padding: 14px; border: none; background: none; font-size: 16px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; border-radius: 10px; margin-top: 4px; border-top: 1px solid var(--color-border); text-align: center; } .app-btab-dot { position: absolute; top: 2px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-error); } /* ============================================================ App Layout Containers ============================================================ */ .app-body { padding: var(--gap); max-width: 1200px; margin: 0 auto; } .app-center { max-width: 620px; margin: 0 auto; } @media (max-width: 959px) { .app-body:has(+ .app-footer), .page-content:has(+ .app-footer) { padding-bottom: 18px; } body[data-app-page="results"] #main-content { padding-bottom: 18px; } body[data-app-page="scan"] #scan-history-card { margin-bottom: 0 !important; } } .app-footer { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap) calc(178px + env(safe-area-inset-bottom)); } .app-footer-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--color-border); padding-top: 8px; } .app-footer-link { color: var(--color-text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } .app-footer-link:hover { color: var(--color-text); text-decoration: underline; } /* PC-only and Mobile-only visibility helpers */ .pc-only { display: none; } .mobile-only { display: block; } /* ============================================================ Field Label (uppercase small text) ============================================================ */ .field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); margin-bottom: 6px; } /* ============================================================ Section Title ============================================================ */ .section-title { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); margin: 0 0 var(--gap-sm); } /* ============================================================ Period Selector Grid (Scan page) ============================================================ */ .period-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--gap); } .period-btn.active, .period-selector .period-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ============================================================ Scan Steps (progress page step indicators) ============================================================ */ .scan-steps { display: flex; gap: 0; margin-bottom: var(--gap); } .scan-step { flex: 1; text-align: center; padding: 10px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); border-bottom: 3px solid var(--color-border); transition: all 0.2s; } .scan-step.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .scan-step.done { color: var(--color-accent); border-bottom-color: var(--color-accent); opacity: 0.7; } /* ============================================================ Thin Progress Bar ============================================================ */ .progress-thin { height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden; margin: var(--gap-sm) 0; } .progress-thin-fill { height: 100%; border-radius: 2px; background: var(--color-primary); transition: width 0.3s; box-shadow: 0 0 8px rgba(2,132,199,0.3); } /* ============================================================ Scan Stat Cards (grid of stat boxes on progress page) ============================================================ */ .scan-stat-card { text-align: center; padding: 14px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); } .scan-stat-val { font-size: 18px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } .scan-stat-label-text { font-size: 11px; color: var(--color-text-secondary); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* ============================================================ KPI Strip (dashboard top metrics) ============================================================ */ .kpi-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .kpi-card { padding: 12px 10px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); transition: background-color var(--transition-theme), border-color var(--transition-theme), box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; } .kpi-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: var(--color-primary); } .kpi-val { font-size: 17px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; } .kpi-label { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; } /* Mobile KPI grid (3-col gradient cards) */ .kpi-grid-mobile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--gap); } .kpi-card-mobile { /* background: linear-gradient(135deg, rgba(2,132,199,0.15), rgba(16,185,129,0.1)); */ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 12px 8px; text-align: center; color: var(--color-text); } .kpi-card-mobile-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .kpi-card-mobile-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; margin-top: 3px; } .analytics-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .analytics-card { min-height: 100%; } .analytics-list, .analytics-bar-list { display: flex; flex-direction: column; gap: 12px; } .analytics-list-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; } .analytics-list-meta { color: var(--color-text-secondary); white-space: nowrap; } .analytics-list-main { min-width: 0; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .analytics-list-value { font-weight: 700; color: var(--color-text); white-space: nowrap; } .analytics-bar-row { display: flex; flex-direction: column; gap: 8px; } .analytics-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-text); } .analytics-bar-head strong { font-weight: 700; white-space: nowrap; } .analytics-bar-head-stacked { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 4px; } .analytics-bar-label, .analytics-bar-value-multiline { display: block; min-width: 0; } .analytics-bar-value-multiline { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.35; } .analytics-bar-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .analytics-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(99,102,241,0.88), rgba(52,211,153,0.92)); } .analytics-bar-fill-accent { background: linear-gradient(90deg, rgba(2,132,199,0.9), rgba(14,165,233,0.92)); } .analytics-empty-copy { font-size: 13px; color: var(--color-text-secondary); } .analytics-card-recurring { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; } .analytics-recurring-copy { margin-bottom: 0; } .analytics-recurring-list { display: flex; flex-direction: column; gap: 0; } .analytics-recurring-row { display: flex; flex-direction: column; gap: 5px; padding: 11px 0; border: 0; border-radius: 0; background: transparent; } .analytics-recurring-row + .analytics-recurring-row { border-top: 1px solid rgba(255,255,255,0.06); } .analytics-recurring-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .analytics-recurring-vendor { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .analytics-recurring-amount { flex: 0 0 auto; font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--color-text); white-space: nowrap; } .analytics-recurring-summaryline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .analytics-recurring-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .analytics-recurring-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 19px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; border: 1px solid transparent; } .analytics-recurring-badge-cadence { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.25); color: #93c5fd; } .analytics-recurring-badge-status-active { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: #6ee7b7; } .analytics-recurring-badge-status-uncertain { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: #fcd34d; } .analytics-recurring-badge-status-cancelled { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: #fca5a5; } .analytics-recurring-badge-status-paused { background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.22); color: #cbd5e1; } .analytics-recurring-badge-due { background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.24); color: #67e8f9; } .analytics-recurring-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 11px; line-height: 1.25; color: var(--color-text-secondary); } .analytics-recurring-meta-item { white-space: nowrap; } .analytics-recurring-meta-item + .analytics-recurring-meta-item::before { content: '2'; margin: 0 7px; color: rgba(255,255,255,0.16); } .analytics-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .analytics-insight-card { display: flex; flex-direction: column; gap: 10px; } .analytics-insight-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .analytics-insight-title { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--color-text); } .analytics-insight-copy { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); } @media (max-width: 959px) { .analytics-overview-grid, .analytics-insight-grid { grid-template-columns: 1fr; } .analytics-insight-title { font-size: 20px; } .analytics-card-recurring { gap: 8px; } .analytics-recurring-copy { font-size: 13px; line-height: 1.45; } .analytics-recurring-row { gap: 4px; padding: 9px 0; } .analytics-recurring-head { align-items: baseline; gap: 10px; } .analytics-recurring-vendor { font-size: 13px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: unset; } .analytics-recurring-amount { font-size: 12px; } .analytics-recurring-summaryline { gap: 3px 8px; } .analytics-recurring-badges { gap: 4px; } .analytics-recurring-badge { min-height: 17px; padding: 2px 6px; font-size: 9px; } .analytics-recurring-meta { font-size: 10px; line-height: 1.2; } .analytics-recurring-meta-item { white-space: normal; } .analytics-recurring-meta-item + .analytics-recurring-meta-item::before { margin: 0 6px; } } /* ============================================================ Executive Summary Text Block ============================================================ */ .executive-summary { padding: var(--gap); border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); font-size: 14px; line-height: 1.7; color: var(--color-text); margin-bottom: var(--gap); transition: background-color var(--transition-theme); } .executive-summary strong { color: var(--color-primary); } /* ============================================================ Heatmap (30-day spending grid) ============================================================ */ .heatmap-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 4px; } .heatmap-cell { width: 32px; height: 32px; border-radius: 6px; transition: transform 0.15s; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; cursor: pointer; } .heatmap-cell:hover { transform: scale(1.3); } .heatmap-cell.is-tooltip-active { outline: 2px solid rgba(46, 204, 255, 0.45); outline-offset: 2px; } .heatmap-tooltip { position: fixed; z-index: 12000; max-width: min(220px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 10px; background: rgba(7, 14, 28, 0.96); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 12px 24px rgba(0,0,0,0.35); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; } .heatmap-tooltip.is-visible { opacity: 1; transform: translateY(0); } .heatmap-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: rgba(7, 14, 28, 0.96); border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); transform: translateX(-50%) rotate(45deg); } .heatmap-tooltip.heatmap-tooltip-below::after { top: -6px; bottom: auto; border-right: none; border-bottom: none; border-left: 1px solid rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.08); } .heatmap-day-header { text-align: center; font-size: 11px; font-weight: 600; color: var(--color-text); padding: 4px 0; } /* ============================================================ Chart Row (side-by-side charts) ============================================================ */ .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .chart-wrap { position: relative; width: 100%; min-width: 0; min-height: 200px; max-height: 280px; overflow: hidden; } .chart-wrap canvas { display: block; max-width: 100%; } /* ============================================================ Category Stacked Bar ============================================================ */ .stacked-bar { display: flex; align-items: stretch; height: 24px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .stacked-seg { min-width: 2px; height: 24px; box-sizing: border-box; transition: opacity 0.15s; cursor: default; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); text-align: center; line-height: 24px; overflow: hidden; } .stacked-seg:hover { opacity: 0.75; } .stacked-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; } .stacked-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; } .stacked-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .stacked-legend-name { color: var(--color-text); font-weight: 500; } .stacked-legend-val { color: var(--color-text-secondary); font-size: 12px; } /* ============================================================ Category Bar Rows (horizontal bars) — legacy ============================================================ */ .cat-bar-row { display: flex; align-items: center; gap: var(--gap-sm); margin-bottom: 8px; font-size: 13px; } .cat-bar-label { min-width: 120px; color: var(--color-text); font-weight: 600; } .cat-bar-bg { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; } .cat-bar-fill { height: 100%; border-radius: 4px; background: var(--color-accent); transition: width 0.4s; } .cat-bar-val { min-width: 90px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); } /* ============================================================ Category Breakdown Rings (mobile SVG rings) ============================================================ */ .cat-rings { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; justify-content: center; } .cat-rings::-webkit-scrollbar { display: none; } /* 4-column grid layout for mobile category rings (2 rows of 4) */ .cat-rings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; justify-items: center; padding: 4px 0; } .cat-ring-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .cat-ring-label { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; max-width: 70px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ Search + Filter Row (dashboard) ============================================================ */ .filter-row { display: flex; gap: 8px; margin-bottom: var(--gap); flex-wrap: wrap; } .shared-filter-panel { margin-bottom: var(--gap); } .shared-filter-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--gap-sm); flex-wrap: wrap; } .shared-filter-panel .filter-row:last-child { margin-bottom: 0; } .shared-filter-panel .cat-dropdown { flex: 0 1 220px; } .shared-filter-panel .cat-filter-wrap { justify-content: flex-start; } .shared-filter-panel select, .shared-filter-panel select option { font-size: 11px; } .shared-filter-scope-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600; white-space: nowrap; appearance: none; font-family: inherit; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; } .shared-filter-scope-badge:hover { border-color: var(--color-primary); } .shared-filter-scope-badge:focus-visible { outline: 2px solid rgba(46, 204, 255, 0.35); outline-offset: 2px; } .shared-filter-scope-badge-arrow { font-size: 10px; opacity: 0.7; } /* Category multi-select chips */ .cat-filter-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 0; } .cat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; white-space: nowrap; } .cat-chip:hover { border-color: var(--color-primary); color: var(--color-text); } .cat-chip-active { background: var(--chip-color, var(--color-primary)); border-color: var(--chip-color, var(--color-primary)); color: #fff; } .cat-chip-active .cat-chip-dot { background: #fff !important; } .cat-chip-all.cat-chip-active { background: var(--color-primary); border-color: var(--color-primary); } .cat-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Mobile: equal-width pill chips for touch */ @media (max-width: 959px) { .shared-filter-panel-head { align-items: flex-start; } .shared-filter-panel .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .shared-filter-panel .filter-row-primary { margin-bottom: 12px !important; } .shared-filter-panel .filter-row-secondary { margin-bottom: 0 !important; } .shared-filter-panel .filter-row > * { min-width: 0; width: 100%; } .shared-filter-panel .filter-cell-search, .shared-filter-panel .filter-cell-category { grid-column: 1 / -1; } .shared-filter-panel .filter-row-primary .filter-cell-recurring { display: none; } .shared-filter-panel .filter-row-secondary .filter-cell-recurring-mobile { display: block; } .shared-filter-panel .cat-filter-wrap.mobile-only { grid-column: 1 / -1; } .shared-filter-panel .filter-cell-status, .shared-filter-panel .filter-cell-recurring, .shared-filter-panel .filter-cell-recurring-mobile, .shared-filter-panel .filter-cell-expense-type, .shared-filter-panel .filter-cell-date-from, .shared-filter-panel .filter-cell-date-to, .shared-filter-panel .filter-cell-currency, .shared-filter-panel .filter-cell-payment-method, .shared-filter-panel .filter-cell-clear { grid-column: span 1; } .shared-filter-panel .filter-clear-btn { justify-content: center; margin-top: 4px; } .shared-filter-panel .cat-dropdown { min-width: 0; width: 100%; flex: unset; } .shared-filter-panel .cat-dd-trigger, .shared-filter-panel .filter-dd-trigger, .shared-filter-panel .form-control, .shared-filter-panel .form-input, .shared-filter-panel .btn { width: 100%; min-width: 0; } .shared-filter-panel .cat-filter-wrap { justify-content: center; } .shared-filter-scope-badge { font-size: 11px; } .cat-chip { padding: 8px 14px; font-size: 13px; justify-content: center; } } /* PC: checkbox dropdown for category filter */ .cat-dropdown { position: relative; min-width: 180px; } .cat-dd-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: start; } .cat-dd-arrow { font-size: 10px; color: var(--color-text-secondary); margin-inline-start: 8px; } .cat-dd-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-btn); box-shadow: var(--shadow-md); max-height: 360px; overflow-y: auto; margin-top: 4px; padding: 4px 0; } [dir="rtl"] .cat-dd-menu { left: auto; right: 0; } .cat-dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background 0.1s; white-space: nowrap; } .cat-dd-item:hover { background: var(--color-primary-light); } .cat-dd-item-checkable { width: 100%; justify-content: space-between; } .cat-dd-item-checkable.is-selected { background: var(--color-primary-light); } .cat-dd-checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cat-dd-item-checkable .filter-dd-check { opacity: 0; color: var(--color-primary); font-size: 13px; line-height: 1; } .cat-dd-item-checkable.is-selected .filter-dd-check { opacity: 1; } .filter-dd-trigger-content, .filter-dd-item-content { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .filter-dd-trigger-content { flex: 1; } .filter-dd-trigger-label, .filter-dd-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-dd-item-button { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; justify-content: space-between; } .filter-dd-item-button .filter-dd-check { opacity: 0; color: var(--color-primary); font-size: 13px; line-height: 1; } .filter-dd-item-button.is-selected { background: var(--color-primary-light); } .filter-dd-item-button.is-selected .filter-dd-check { opacity: 1; } @media (min-width: 960px) { .shared-filter-panel { --shared-filter-grid-gap: 12px; } .shared-filter-panel .filter-row { display: grid; align-items: stretch; gap: var(--shared-filter-grid-gap); flex-wrap: unset; } .shared-filter-panel .filter-row-primary, .shared-filter-panel .filter-row-secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 0.9fr) minmax(0, 0.82fr); } .shared-filter-panel .filter-row-primary { margin-bottom: var(--shared-filter-grid-gap) !important; } .shared-filter-panel .filter-row-secondary { margin-bottom: 0 !important; } .shared-filter-panel .filter-row-primary .filter-cell-search { grid-column: span 1; } .shared-filter-panel .filter-row-primary .filter-cell-recurring { grid-column: span 1; display: block; } .shared-filter-panel .filter-row-secondary .filter-cell-recurring-mobile { display: none; } .shared-filter-panel .filter-row > * { min-width: 0; width: 100%; } .shared-filter-panel .search-wrap { min-width: 0; } .shared-filter-panel .cat-dropdown { min-width: 0; width: 100%; flex: unset; } .shared-filter-panel .cat-dd-trigger { width: 100%; } .shared-filter-panel .cat-dd-menu { width: 100%; min-width: 100%; box-sizing: border-box; } .shared-filter-panel .form-control, .shared-filter-panel .form-input, .shared-filter-panel .btn { min-width: 0; } .shared-filter-panel .filter-single-dropdown { min-width: 0; width: 100%; } .shared-filter-panel .filter-dd-trigger { width: 100%; } .shared-filter-panel .filter-clear-btn { justify-content: center; } } /* Compact scope picker modal */ .scope-picker-modal { display: flex; flex-direction: column; max-width: 620px; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; } .scope-picker-head { position: relative; padding: 14px 20px; background: var(--color-primary); color: #fff; } .scope-picker-head .modal-close-btn { top: 14px; right: 14px; border: none; background: rgba(255,255,255,0.2); color: #fff; } .scope-picker-title-wrap { display: flex; flex-direction: column; gap: 4px; padding-inline-end: 44px; } .scope-picker-title { font-size: 15px; font-weight: 700; color: #fff; } .scope-picker-subtitle, .scope-picker-current-summary { font-size: 12px; color: rgba(255,255,255,0.82); } .scope-picker-current-summary { margin-top: 6px; } .scope-picker-body { display: flex; flex-direction: column; min-height: 0; padding: 12px 14px 14px; } .scope-picker-loading, .scope-picker-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 16px; font-size: 13px; color: var(--color-text-secondary); } .scope-picker-list { max-height: min(60dvh, 520px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .scope-picker-list-inner { display: flex; flex-direction: column; gap: 8px; padding-inline-end: 18px; } .scope-picker-option { width: 100%; display: flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); color: var(--color-text); font-size: inherit; font-family: inherit; line-height: 1.2; text-align: start; cursor: pointer; overflow: hidden; min-height: 72px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .scope-picker-option:hover { border-color: var(--color-primary); } .scope-picker-option.is-active { border-color: var(--color-primary); background: rgba(46, 204, 255, 0.05); } .scope-picker-option-accent { flex: 0 0 4px; border-radius: 0; } .scope-picker-option-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 12px 14px 12px 12px; } .scope-picker-option-title { font-size: 14px; font-weight: 600; color: var(--color-text); } .scope-picker-option-meta { font-size: 12px; color: var(--color-text-secondary); white-space: normal; } .scope-picker-option-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 12px 14px 12px 0; } [dir="rtl"] .scope-picker-option-side { align-items: flex-start; padding: 12px 0 12px 14px; } .scope-picker-option-receipts { font-size: 13px; font-weight: 700; color: var(--color-text); white-space: nowrap; } .scope-picker-option-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 11px; font-weight: 700; white-space: nowrap; } .scope-picker-option > .scope-picker-option-mobile-card.receipt-card { display: none; } @media (max-width: 959px) { .scope-picker-modal { max-width: 100%; max-height: 84dvh; } .scope-picker-head { padding: 14px 20px; } .scope-picker-title-wrap { gap: 2px; } .scope-picker-title { font-size: 18px; margin-top: 2px; } .scope-picker-subtitle { margin-top: 2px; } .scope-picker-body { padding: 12px 12px 14px; } .scope-picker-list { flex: 1 1 auto; min-height: 0; max-height: none; } .scope-picker-list-inner { gap: 12px; padding-inline-end: 16px; } .scope-picker-option { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; } .scope-picker-option > .scope-picker-option-main, .scope-picker-option > .scope-picker-option-side, .scope-picker-option-accent { display: none; } .scope-picker-option > .scope-picker-option-mobile-card.receipt-card { display: flex; width: 100%; margin-bottom: 0; line-height: 1.5; text-align: initial; } .scope-picker-option-mobile-card .receipt-card-vendor, .scope-picker-option-mobile-card .receipt-card-sub, .scope-picker-option-mobile-card .receipt-card-amt, .scope-picker-option-mobile-card .receipt-card-date { display: block; } .scope-picker-option-mobile-card .receipt-card-info { text-align: start; } .scope-picker-option-mobile-card .receipt-card-right { display: flex; flex-direction: column; align-items: flex-end; text-align: end; } [dir="rtl"] .scope-picker-option-mobile-card .receipt-card-right { align-items: flex-end; } .scope-picker-option.is-active .scope-picker-option-mobile-card { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } } .cat-dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cat-dd-divider { height: 1px; background: var(--color-border); margin: 4px 0; } .cat-dd-all { font-weight: 600; } .search-wrap { flex: 1; min-width: 200px; position: relative; } .search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--color-text-secondary); pointer-events: none; } .search-input { width: 100%; padding: 10px 36px 10px 14px; } /* ============================================================ Receipt Table (PC dashboard) ============================================================ */ .receipt-table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--color-border); transition: border-color var(--transition-theme); } .receipt-table { width: 100%; border-collapse: collapse; font-size: 12px; } .receipt-table th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); background: var(--color-bg); border-bottom: 1px solid var(--color-border); white-space: nowrap; } @media (min-width: 960px) { body[data-app-page="results"] .receipt-table thead th { background: var(--color-surface-3); } body[data-app-page="results"] .receipt-table thead th + th { border-inline-start: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent); } body[data-app-page="results"] .receipt-table th[data-i18n="col_status"], body[data-app-page="results"] .receipt-table td.receipt-cell-status { width: 140px; min-width: 140px; text-align: center; white-space: nowrap; } body[data-app-page="results"] .receipt-table td.receipt-cell-status .receipt-card-status-badge + .receipt-card-status-badge { margin-inline-start: 4px; } } .receipt-table td { padding: 8px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; transition: background-color 0.1s; } .receipt-select-col { width: 52px; min-width: 52px; max-width: 52px; padding-inline: 14px !important; box-sizing: border-box; text-align: center; } .receipt-table th.receipt-select-col, .receipt-table td.receipt-select-col { text-align: center !important; } .receipt-table .receipt-select-col .receipt-select-toggle { margin-inline: auto; } .receipt-table tbody tr { cursor: pointer; } .receipt-table tbody tr.is-selected td { background: rgba(2,132,199,0.08); } .receipt-table tbody tr:hover td { background: var(--color-primary-light); } .receipt-table tbody tr.receipt-detail-row-live-new td { animation: receiptLiveRowFlash 2.8s ease; } .receipt-card.receipt-card-live-new { animation: receiptCardLiveFlash 2.8s ease; } @keyframes receiptLiveRowFlash { 0% { background: rgba(16,185,129,0.22); } 60% { background: rgba(16,185,129,0.08); } 100% { background: transparent; } } @keyframes receiptCardLiveFlash { 0% { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.42); box-shadow: 0 10px 24px rgba(16,185,129,0.12); } 60% { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.24); } 100% { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-sm); } } .receipt-row-border { width: 3px; min-width: 3px; max-width: 3px; padding: 0 !important; border-bottom: none !important; } .receipt-amt { font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; text-align: center; width: 124px; position: relative; } .receipt-cell-date { white-space: nowrap; color: var(--color-text-secondary); text-align: center; } .receipt-vendor-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .receipt-vendor-name { min-width: 0; font-weight: 600; color: var(--color-text); line-height: 1.2; } .receipt-table th.receipt-cell-vendor-header, .receipt-table td.receipt-cell-vendor { width: 36%; max-width: 0; } .receipt-temp-uid { font-size: 11px; line-height: 1.2; font-weight: 500; color: var(--color-text-secondary); opacity: 0.9; direction: ltr; unicode-bidi: plaintext; } .receipt-cell-subject { display: block; color: var(--color-text-secondary); max-width: 100%; font-weight: 400; font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .receipt-cell-subject-nested { opacity: 0.88; } .receipt-nested-indent { display: inline-flex; align-items: center; margin-inline-end: 6px; color: var(--color-text-secondary); } [dir="ltr"] .receipt-nested-indent { transform: scaleX(-1); transform-origin: center; } .receipt-cell-payment { color: var(--color-text-secondary); font-size: 12px; width: 168px; padding-inline-start: 28px !important; white-space: nowrap; } .receipt-table th.receipt-cell-payment-header { width: 168px; padding-inline-start: 28px; } .receipt-cell-category { font-size: 12px; color: var(--color-text-secondary); text-align: center; } .receipt-table th.receipt-cell-category-header { text-align: center; } .receipt-category-indicator { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; } .receipt-category-indicator .status-dot { flex: 0 0 8px; } .receipt-category-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .receipt-cell-attachment { text-align: center; } .receipt-select-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: transparent; font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.15s ease; } .receipt-select-toggle:hover { border-color: var(--color-primary); } .receipt-select-toggle.is-selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; } /* ============================================================ Confidence Badge ============================================================ */ .conf-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .conf-badge-high { background: rgba(16,185,129,0.12); color: var(--color-accent); } .conf-badge-medium { background: rgba(245,158,11,0.12); color: var(--color-warning); } .conf-badge-low { background: rgba(239,68,68,0.12); color: var(--color-error); } /* ============================================================ Expense Type Badge ============================================================ */ .badge-expense { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; } .badge-expense-personal { background: rgba(139,92,246,0.12); color: #a78bfa; } .badge-expense-business { background: rgba(6,182,212,0.12); color: #22d3ee; } /* ============================================================ Status Dot ============================================================ */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } /* ============================================================ Mobile Receipt Cards ============================================================ */ .receipt-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-bottom: 12px; cursor: pointer; transition: all 0.2s; } .receipt-card-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .receipt-card-group .receipt-card { margin-bottom: 0; } .receipt-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); } .receipt-card.is-selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .receipt-card-selection { display: flex; align-items: center; flex-shrink: 0; } .receipt-card-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; } .receipt-card-info { flex: 1; min-width: 0; } .receipt-card-vendor { font-size: 14px; font-weight: 600; color: var(--color-text); } .receipt-card-vendor-nested { font-size: 13px; } .receipt-card-sub { font-size: 11px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .receipt-card-sub-nested { opacity: 0.9; } .receipt-card-right { text-align: right; flex-shrink: 0; } .receipt-card-nested { border-style: dashed; } .receipt-card-amt { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); min-width: 124px; text-align: inherit; } .receipt-amt .recurring-amount-wrap { position: static; display: inline-grid; grid-template-columns: 22px auto 22px; align-items: center; justify-content: center; column-gap: 6px; width: auto; padding-inline-end: 0; vertical-align: middle; } .receipt-amt .recurring-amount-value { display: flex; align-items: center; justify-content: center; grid-column: 2; min-width: 64px; min-height: 22px; line-height: 1; text-align: center; } .receipt-amt .recurring-amount-marker { position: relative; display: inline-flex; align-items: center; justify-content: center; top: auto; left: auto; right: auto; inset-inline-start: auto; inset-inline-end: auto; transform: none; align-self: center; justify-self: center; grid-column: 3; } [dir="rtl"] .receipt-amt .recurring-amount-wrap { display: inline-grid; direction: ltr; grid-template-columns: 22px 64px 22px; grid-template-areas: "marker value spacer"; align-items: center; justify-content: center; justify-items: center; column-gap: 6px; width: auto; white-space: nowrap; } [dir="rtl"] .receipt-amt .recurring-amount-marker { position: relative; top: auto; left: auto; right: auto; inset-inline-start: auto; inset-inline-end: auto; transform: none; grid-area: marker; align-self: center; justify-self: center; } [dir="rtl"] .receipt-amt .recurring-amount-value { grid-area: value; direction: ltr; unicode-bidi: isolate; justify-content: center; min-width: 64px; } [dir="rtl"] .receipt-amt .recurring-amount-marker-stable::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17 10H7.2' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M9.2 14.2L4 10l5.2-4.2' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .receipt-card-amt .recurring-amount-wrap { display: inline-flex; width: auto; max-width: 100%; justify-content: flex-start; padding-inline-end: 31px; box-sizing: border-box; } .receipt-card-date { font-size: 11px; color: var(--color-text-secondary); } .receipt-card-border-personal { border-right: 3px solid #a78bfa; padding-right: 10px; } .receipt-card-border-business { border-right: 3px solid #22d3ee; padding-right: 10px; } .results-selection-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9800; display: flex; align-items: center; gap: 12px; width: auto; max-width: min(760px, calc(100vw - 40px)); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 16px; background: rgba(11, 18, 32, 0.96); box-shadow: 0 18px 40px rgba(0,0,0,0.3); } .results-selection-summary { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .results-selection-count { font-size: 13px; font-weight: 700; color: var(--color-text); white-space: nowrap; } .results-selection-total { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; } .results-selection-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; } .results-selection-actions .btn { min-height: 34px; padding: 7px 12px; font-size: 12px; line-height: 1.2; border-radius: 10px; } .results-live-scan-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9790; border-radius: 16px; background: rgba(11, 18, 32, 0.96); color: #e2e8f0; border: 1px solid rgba(56,189,248,0.2); box-shadow: 0 18px 40px rgba(0,0,0,0.3); overflow: hidden; transition: opacity var(--transition-fast), transform var(--transition-fast); cursor: pointer; } .results-live-scan-bar.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; } .results-live-scan-bar-progress { height: 4px; background: rgba(255,255,255,0.08); } .results-live-scan-bar-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width 0.25s ease; } .results-live-scan-bar-content { display: grid; grid-template-columns: minmax(0, 1.2fr) auto auto auto auto; gap: 14px; align-items: center; padding: 14px 16px; } .results-live-scan-main { min-width: 0; } .results-live-scan-title { font-size: 14px; font-weight: 700; color: #f8fafc; margin-bottom: 2px; } .results-live-scan-sub { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .results-live-scan-kpi { min-width: 88px; } .results-live-scan-kpi-value { font-size: 14px; font-weight: 700; color: #f8fafc; } .results-live-scan-kpi-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; } .results-live-scan-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .results-live-scan-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(56,189,248,0.14); color: #bae6fd; font-size: 12px; font-weight: 700; white-space: nowrap; } .results-live-scan-badge.is-finalizing { background: rgba(245,158,11,0.16); color: #fde68a; } .results-live-scan-cancel { min-height: 32px; padding: 0 12px; cursor: pointer; } @media (max-width: 959px) { .mobile-cards .receipt-card, .mobile-cards .receipt-card * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .mobile-cards .receipt-card { position: relative; touch-action: pan-y pinch-zoom; } .mobile-cards .receipt-card-right, .mobile-cards .receipt-card-amt { min-width: 0; } .mobile-cards .receipt-card-selection { position: absolute; top: 50%; inset-inline-start: 16px; width: 24px; height: 24px; transform: translateY(-50%); justify-content: center; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.15s ease; } .mobile-cards .receipt-card-selection .receipt-select-toggle { width: 100%; height: 100%; } .mobile-cards.mobile-selection-mode .receipt-card { padding-inline-start: 52px; } .mobile-cards.mobile-selection-mode .receipt-card-selection { opacity: 1; pointer-events: auto; } .mobile-cards.mobile-selection-mode .receipt-card-selection .receipt-select-toggle { pointer-events: auto; } .results-selection-bar { width: calc(100vw - 24px); bottom: calc(76px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 10px; flex-direction: column; align-items: stretch; } .results-selection-summary { gap: 8px; flex-wrap: wrap; } .results-selection-actions { justify-content: stretch; flex-wrap: wrap; } .results-selection-actions .btn { flex: 1 1 0; min-width: 0; min-height: 36px; } .results-live-scan-bar { left: 10px; right: 10px; bottom: calc(150px + env(safe-area-inset-bottom)); border-radius: 18px; } .results-live-scan-bar-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px 14px; } .results-live-scan-main { grid-column: 1 / -1; } .results-live-scan-title { font-size: 13px; margin-bottom: 4px; } .results-live-scan-sub { font-size: 11px; line-height: 1.4; white-space: normal; } .results-live-scan-kpi { min-width: 0; text-align: center; } .results-live-scan-kpi-value { font-size: 13px; } .results-live-scan-kpi-label { font-size: 9px; } .results-live-scan-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; } .results-live-scan-badge { min-width: 0; width: 100%; justify-content: center; text-align: center; padding: 0 10px; font-size: 11px; } .results-live-scan-cancel { min-height: 34px; padding: 0 14px; } } body.results-live-scan-active { padding-bottom: 96px; } /* Payment status card backgrounds (mobile) — disabled, keeping tags only */ .receipt-card-status-bill { /* background: rgba(59, 130, 246, 0.09); */ } .receipt-card-status-paid { /* background: rgba(16, 185, 129, 0.09); */ } .receipt-card-status-failed { /* background: rgba(245, 158, 11, 0.09); */ } .receipt-card-status-debt { /* background: rgba(239, 68, 68, 0.09); */ } .receipt-card-status-refund { /* background: rgba(37, 150, 190, 0.09); */ } .receipt-card-status-statement { /* background: rgba(139, 92, 246, 0.09); */ } /* Secondary status borders (full card outline) — disabled, keeping tags only */ .receipt-card-border-status-bill { /* border: 2px solid rgba(59, 130, 246, 0.35); */ } .receipt-card-border-status-paid { /* border: 2px solid rgba(16, 185, 129, 0.35); */ } .receipt-card-border-status-failed { /* border: 2px solid rgba(245, 158, 11, 0.35); */ } .receipt-card-border-status-debt { /* border: 2px solid rgba(239, 68, 68, 0.35); */ } .receipt-card-border-status-refund { /* border: 2px solid rgba(37, 150, 190, 0.35); */ } .receipt-card-border-status-statement { /* border: 2px solid rgba(139, 92, 246, 0.35); */ } /* Payment status mini badge */ .receipt-card-status-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-top: 2px; line-height: 1.45; } .badge-status-bill { background: rgba(59, 130, 246, 0.15); color: #2563eb; } .badge-status-paid { background: rgba(16, 185, 129, 0.15); color: #059669; } .badge-status-failed { background: rgba(245, 158, 11, 0.15); color: #d97706; } .badge-status-debt { background: rgba(239, 68, 68, 0.15); color: #dc2626; } .badge-status-refund { background: rgba(37, 150, 190, 0.15); color: #1a7a9a; } .badge-status-statement { background: rgba(139, 92, 246, 0.15); color: #7c3aed; } .badge-link-counted { background: rgba(100, 116, 139, 0.16); color: #475569; } .badge-link-supporting { background: rgba(245, 158, 11, 0.15); color: #b45309; } .badge-recurring { background: rgba(20, 184, 166, 0.16); color: #0f766e; border: 1px solid rgba(13, 148, 136, 0.22); } /* ============================================================ Upload Card (Add Receipt page) ============================================================ */ .upload-card { border: 2px dashed var(--color-border); border-radius: var(--radius-card); padding: 28px 16px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--color-surface); } .upload-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .manual-add-page-shell { max-width: 680px; } .manual-add-heading { margin-bottom: var(--gap); text-align: center; } .manual-add-title { margin: 0 0 4px; color: var(--color-text); font-size: 24px; font-weight: 800; line-height: 1.18; } .manual-add-subtitle { max-width: 520px; margin: 0 auto; color: var(--color-text-secondary); font-size: 13px; line-height: 1.45; } .manual-add-file-input { display: none; } .manual-add-upload-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-sm); margin-bottom: var(--gap-sm); } .manual-add-upload-grid.has-camera-control { grid-template-columns: repeat(2, minmax(0, 1fr)); } .manual-upload-card { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .manual-upload-card:disabled { opacity: 0.65; cursor: not-allowed; } .manual-upload-card.is-drag-over { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); } .manual-camera-control[hidden], .heshbo-native-mobile-only[hidden] { display: none !important; } .manual-add-upload-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-primary); font-size: 12px; font-weight: 800; line-height: 1; } .manual-add-upload-title { color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1.25; } .manual-add-upload-desc, .manual-add-upload-drag { max-width: 210px; color: var(--color-text-secondary); font-size: 11px; line-height: 1.35; } .manual-add-status { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--gap-sm); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-text-secondary); } .manual-add-status.is-uploading, .manual-add-status.is-extracting, .manual-add-status.is-saving { border-color: rgba(37, 99, 235, 0.32); background: rgba(37, 99, 235, 0.08); color: var(--color-primary); } .manual-add-status.is-auto-filled, .manual-add-status.is-saved { border-color: rgba(5, 150, 105, 0.28); background: rgba(5, 150, 105, 0.08); color: #047857; } .manual-add-status.is-failed { border-color: rgba(220, 38, 38, 0.28); background: rgba(220, 38, 38, 0.08); color: var(--color-error); } .manual-add-status-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; } .manual-add-status-detail { min-width: 0; overflow: hidden; color: inherit; font-size: 12px; text-align: end; text-overflow: ellipsis; white-space: nowrap; } .manual-add-document-preview { display: grid; grid-template-columns: minmax(128px, 210px) minmax(0, 1fr); gap: var(--gap-sm); align-items: stretch; margin-bottom: var(--gap-sm); border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-text-secondary); overflow: hidden; } .manual-add-document-preview[hidden] { display: none !important; } .manual-add-document-preview.is-clickable { cursor: zoom-in; } .manual-add-document-preview.is-clickable:hover, .manual-add-document-preview.is-clickable:focus-visible { border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); outline: none; } .manual-add-document-media { min-height: 154px; background: var(--color-bg); border-inline-end: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .manual-add-document-media.is-pdf { min-height: 190px; } .manual-add-document-image { width: 100%; height: 100%; max-height: 240px; object-fit: contain; background: var(--color-bg); } .manual-add-document-frame { width: 100%; height: 220px; border: 0; background: #fff; } .manual-add-document-preview.is-clickable .manual-add-document-frame { pointer-events: none; } .manual-add-document-icon { width: 58px; height: 58px; border: 1px solid var(--color-border); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 13px; font-weight: 800; background: var(--color-surface); } .manual-add-document-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px; } .manual-add-document-name { min-width: 0; overflow: hidden; color: var(--color-text); font-size: 14px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .manual-add-document-meta, .manual-add-document-status, .manual-add-document-warning { min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .manual-add-document-status { color: var(--color-primary); font-weight: 700; } .manual-add-document-warning { color: var(--color-error); } .manual-upload-preview-modal.modal-container { width: min(1120px, calc(100vw - 32px)); max-width: 1120px; max-height: calc(100dvh - 32px); overflow: hidden; display: flex; flex-direction: column; } .manual-upload-preview-header { flex: 0 0 auto; } .manual-upload-preview-modal-body { flex: 1 1 auto; min-height: 0; height: min(76dvh, 840px); padding: 12px; background: var(--color-bg); overflow: auto; } .manual-upload-preview-modal-image { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #fff; } .manual-upload-preview-modal-frame { display: block; width: 100%; height: 100%; min-height: 640px; border: 0; background: #fff; } .manual-add-form-card { margin-top: var(--gap-sm); } .manual-add-section-title { margin-bottom: var(--gap-sm); color: var(--color-text); font-size: 13px; font-weight: 800; } .manual-add-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); } .manual-add-field { min-width: 0; } .required-mark { color: var(--color-error); } .manual-add-notes-field { margin-top: var(--gap-sm); } .manual-add-notes { min-height: 76px; resize: vertical; } .manual-add-actions { display: flex; gap: 8px; margin-top: var(--gap); } .manual-add-actions .btn { flex: 1 1 0; } @media (max-width: 640px) { .manual-add-page-shell { max-width: none; } .manual-add-title { font-size: 21px; } .manual-add-upload-grid, .manual-add-upload-grid.has-camera-control, .manual-add-form-grid { grid-template-columns: 1fr; } .manual-upload-card { min-height: 104px; } .manual-add-status { align-items: flex-start; flex-direction: column; gap: 4px; } .manual-add-status-detail { width: 100%; text-align: start; } .manual-add-document-preview { grid-template-columns: 1fr; } .manual-add-document-media { min-height: 180px; border-inline-end: 0; border-bottom: 1px solid var(--color-border); } .manual-add-document-frame { height: 220px; } .manual-upload-preview-modal.modal-container { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .manual-upload-preview-modal-body { height: 76dvh; padding: 8px; } .manual-upload-preview-modal-frame { min-height: 560px; } } /* ============================================================ Toggle Group (segmented control) ============================================================ */ .toggle-group { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden; min-height: 44px; } .toggle-opt { flex: 1; padding: 10px; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: var(--color-surface); color: var(--color-text-secondary); font-family: inherit; transition: all 0.2s; } .toggle-opt.active { background: var(--color-primary); color: #fff; } /* ============================================================ Pagination (Demo 9 style) ============================================================ */ .page-btn { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; } .page-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } .page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .page-btn:disabled { opacity: 0.35; cursor: not-allowed; } .page-ellipsis { width: 28px; text-align: center; color: var(--color-text-secondary); font-size: 12px; } .dashboard-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; } .dashboard-pagination-controls, .dashboard-pagination-summary { display: flex; align-items: center; } .dashboard-pagination-controls { justify-content: center; gap: 6px; flex: 0 0 auto; } .dashboard-pagination-summary { justify-content: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--color-text-secondary); } .dashboard-pagination-page-label, .dashboard-pagination-summary [data-i18n="rows_per_page"] { white-space: nowrap; } .dashboard-pagination-page-label { margin-inline-start: 6px; font-size: 12px; color: var(--color-text-secondary); } .dashboard-pagination-page-size { width: auto; min-width: 56px; padding: 6px 8px; font-size: 12px; } @media (max-width: 959px) { .dashboard-pagination-mobile { display: grid; grid-template-areas: "controls" "summary"; justify-content: center; justify-items: center; row-gap: 14px; } .dashboard-pagination-mobile .dashboard-pagination-controls { grid-area: controls; width: 100%; flex-wrap: wrap; } .dashboard-pagination-mobile .dashboard-pagination-summary { grid-area: summary; width: 100%; flex-wrap: nowrap; } } /* ============================================================ App Footer ============================================================ */ .app-footer { margin-top: 0; padding-top: 0; border-top: 0; font-size: 11px; color: var(--color-text-secondary); transition: border-color var(--transition-theme); } body:has(.app-footer) .app-footer { width: 100%; margin-top: auto; margin-left: auto; margin-right: auto; } @media (max-width: 959px) { .app-footer { padding-bottom: calc(118px + env(safe-area-inset-bottom)); } .app-footer-links { width: 100%; max-width: 620px; justify-content: space-between; gap: 76px; padding-left: 20px; padding-right: 20px; } body:has(#main-content > .empty-state) .app-footer { position: fixed; left: 0; right: 0; bottom: calc(126px + env(safe-area-inset-bottom)); z-index: 90; padding-bottom: 0; } } /* ============================================================ Floating Action Button (mobile) ============================================================ */ .fab { display: none; position: fixed; bottom: calc(70px + env(safe-area-inset-bottom)); right: 20px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(2,132,199,0.35); align-items: center; justify-content: center; z-index: 51; transition: transform 0.2s; } .fab:hover { transform: scale(1.1); } /* ============================================================ Focus-visible for keyboard navigation ============================================================ */ button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; } /* ============================================================ Alert Banners ============================================================ */ .alert { padding: 10px 16px; border-radius: 0 var(--radius-btn) var(--radius-btn) 0; font-size: 12px; margin-bottom: 8px; border-left: 3px solid; transition: background-color var(--transition-theme); } .alert-accent { border-left-color: var(--color-accent); background: var(--color-accent-light); color: var(--color-accent); } .alert-warning { border-left-color: var(--color-warning); background: rgba(245,158,11,0.08); color: var(--color-warning); } /* ============================================================ Dashboard Header (title + action buttons row) ============================================================ */ .dash-header { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-target-size); margin-bottom: var(--gap); } .dash-title { font-size: 18px; font-weight: 700; color: var(--color-text); } .dashboard-unified-header { margin-bottom: var(--gap); } .dashboard-unified-head { align-items: center; gap: var(--gap); flex-wrap: wrap; justify-content: flex-start; } .dashboard-unified-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; width: 100%; flex: 1 1 100%; align-items: stretch; } .dashboard-unified-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap; width: 100%; } [dir="rtl"] .dashboard-unified-title-row { direction: rtl; } [dir="rtl"] .dashboard-unified-head { justify-content: flex-start; } .dashboard-view-count { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 700; } .dashboard-view-tabs-row { display: flex; align-items: center; min-width: 0; } .dashboard-view-tabs-row-mobile { margin-bottom: 0; } .dashboard-content-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: var(--gap); flex-wrap: wrap; } .dashboard-view-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); } .dashboard-view-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; width: 112px; flex: 0 0 112px; padding: 0 18px; border: none; border-radius: 10px; background: transparent; color: var(--color-text-secondary); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .dashboard-view-tab:hover { color: var(--color-text); background: var(--color-bg); } .dashboard-view-tab.is-active { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(2,132,199,0.18); } .dashboard-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-inline-start: auto; } .dashboard-content-toolbar .dashboard-toolbar-actions { margin-inline-start: auto; flex: 0 0 auto; } .dashboard-toolbar-search { flex: 1 1 0; min-width: 220px; } .dashboard-toolbar-search .search-input { min-height: 42px; border-radius: 12px; } .dashboard-toolbar-actions .shared-filter-scope-badge, .dashboard-toolbar-actions .dashboard-filter-launch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 132px; flex: 0 0 132px; } .dashboard-toolbar-actions .shared-filter-scope-badge, .dashboard-toolbar-actions .dashboard-filter-launch, .dashboard-toolbar-actions .dashboard-add-receipt-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; font-size: 13px; font-weight: 700; } .dashboard-toolbar-actions .shared-filter-scope-badge { gap: 8px; padding-inline: 16px; } .dashboard-filter-launch.has-active-filters { display: grid; grid-template-columns: auto 1fr auto; align-items: center; } .dashboard-filter-launch-label { justify-self: center; text-align: center; } .dashboard-filter-launch-icon { width: 14px; height: 14px; display: inline-block; flex: 0 0 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.333 3.083h9.334L8.333 7.25v3.167l-2.666.917V7.25L2.333 3.083z' stroke='%23F8FAFC' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .dashboard-filter-launch-icon.is-clear { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.25 3.25L10.75 10.75' stroke='%23F8FAFC' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10.75 3.25L3.25 10.75' stroke='%23F8FAFC' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-filter-launch-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; } .dashboard-add-receipt-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .dashboard-add-receipt-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 12px; font-size: 16px; line-height: 1; font-weight: 700; } /* ============================================================ Progress Percentage Text (scan page) ============================================================ */ .progress-pct { text-align: right; font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: var(--gap); } /* ============================================================ Scan Status Text (scan page) ============================================================ */ .scan-status-text { text-align: center; font-size: 13px; color: var(--color-text-secondary); margin: var(--gap-sm) 0; } /* ============================================================ Connected Account Card (scan page) ============================================================ */ .scan-section-title { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); margin: 0 0 var(--gap-sm); } .account-row { display: flex; align-items: center; gap: 10px; } .account-icon { font-size: 20px; } .account-info { flex: 1; } .account-email { font-weight: 600; } .account-provider { font-size: 11px; color: var(--color-text-secondary); } .status-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--color-accent-light); color: var(--color-accent); } /* ============================================================ Settings Page ============================================================ */ .settings-shell { display: flex; flex-direction: column; gap: var(--gap); } .settings-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .settings-page-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-secondary); } .settings-page-title { margin: 10px 0 8px; font-size: 28px; line-height: 1.1; color: var(--color-text); } .settings-page-subtitle, .settings-section-copy { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); } .settings-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: min(360px, 100%); margin-bottom: 0; } .settings-kpi-card { margin-bottom: 0; } .settings-grid { display: grid; gap: var(--gap); } .settings-grid-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-section { display: flex; flex-direction: column; gap: 18px; } .settings-section-span-2 { grid-column: span 2; } .settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .settings-account-list, .settings-rule-list, .settings-danger-list { display: flex; flex-direction: column; gap: 12px; } .settings-account-card, .settings-danger-row, .settings-rule-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 16px; background: rgba(255,255,255,0.02); } .settings-account-card-demo { opacity: 0.9; } .settings-account-main, .settings-danger-copy, .settings-rule-domain { min-width: 0; flex: 1; } .settings-account-title, .settings-policy-title, .settings-shortcuts-callout-title { font-size: 18px; font-weight: 700; color: var(--color-text); } .settings-account-meta, .settings-policy-copy, .settings-danger-copy span, .settings-shortcut-label, .settings-shortcuts-callout p { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); } .settings-account-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-start; width: 100%; } .settings-account-actions .settings-status-pill, .settings-account-actions .btn { width: 96px; flex: 0 0 96px; justify-content: center; text-align: center; padding-inline: 10px; } .settings-account-actions .settings-status-pill { margin-left: auto; } .settings-child-account-list { display: flex; flex-direction: column; gap: 6px; grid-area: child; margin-top: 2px; margin-inline-start: 0; padding-top: 10px; border-top: 1px solid rgba(148,163,184,0.16); } .settings-child-account-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.018); } .settings-child-account-icon { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, rgba(2,132,199,0.65), rgba(16,185,129,0.65)); } .settings-child-account-main { min-width: 0; } .settings-child-account-title { overflow: hidden; color: var(--color-text); font-size: 13px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .settings-child-account-switch { justify-content: center; width: 96px; min-width: 96px; text-align: center; } .settings-account-card-has-devices { align-items: flex-start; } .settings-account-devices { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); } .settings-device-list-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .settings-device-list { display: flex; flex-direction: column; gap: 10px; padding-inline-start: 18px; border-inline-start: 2px solid rgba(148,163,184,0.18); } .settings-device-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 14px; background: rgba(255,255,255,0.015); } .settings-device-main { min-width: 0; flex: 1; } .settings-device-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .settings-device-name { font-size: 15px; font-weight: 700; color: var(--color-text); } .settings-device-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .settings-status-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .settings-status-pill-active { background: rgba(16,185,129,0.14); color: #10b981; } .settings-status-pill-demo { background: rgba(245,158,11,0.16); color: #f59e0b; } .settings-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .settings-policy-card { padding: 18px; border: 1px solid var(--color-border); border-radius: 18px; background: rgba(255,255,255,0.02); } .settings-automation-card-head { display: flex; align-items: center; gap: 10px; } .settings-automation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .settings-automation-card { display: flex; flex-direction: column; gap: 12px; } .settings-automation-card-head { justify-content: space-between; align-items: flex-start; } .settings-automation-switch { margin-top: 2px; } .settings-automation-meta { width: fit-content; max-width: 100%; padding: 5px 10px; border: 1px solid rgba(148, 163, 184, 0.30); border-radius: 999px; background: rgba(148, 163, 184, 0.10); color: var(--color-text); font-size: 12px; font-weight: 700; line-height: 1.25; } .settings-policy-kicker, .settings-shortcuts-col-title { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .settings-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex-shrink: 0; } .settings-switch input { position: absolute; inset: 0; opacity: 0; } .settings-switch-track { width: 100%; height: 100%; border-radius: 999px; position: relative; border: 1px solid rgba(148, 163, 184, 0.55); background: rgba(148, 163, 184, 0.18); transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .settings-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24); transition: transform 0.16s ease; } .settings-switch input:checked + .settings-switch-track { border-color: rgba(16, 185, 129, 0.78); background: rgba(16, 185, 129, 0.30); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); } .settings-switch input:checked + .settings-switch-track::after { transform: translateX(18px); } .settings-switch-wrap { display: inline-flex; align-items: center; gap: 10px; } .settings-switch-state { min-width: 72px; padding: 4px 8px; border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 999px; background: rgba(148, 163, 184, 0.10); color: var(--color-text-secondary); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; } .settings-ai-switch-wrap.is-enabled .settings-switch-state { border-color: rgba(16, 185, 129, 0.36); background: rgba(16, 185, 129, 0.12); color: #047857; } .settings-ai-switch-wrap.is-unavailable { opacity: 0.64; } .settings-ai-unavailable { color: var(--color-error); } .settings-ai-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .settings-ai-card { display: flex; flex-direction: column; gap: 12px; } .settings-ai-card.is-unavailable { opacity: 0.72; } .settings-ai-unavailable-meta { color: var(--color-error); border-color: rgba(239, 68, 68, 0.28); background: rgba(239, 68, 68, 0.08); } .badge-ai-review, .badge-ai-needs-review { background: rgba(245, 158, 11, 0.14); color: #b45309; } .badge-ai-verified { background: rgba(16, 185, 129, 0.14); color: #047857; } .badge-ai-rejected { background: rgba(239, 68, 68, 0.14); color: #dc2626; } .badge-ai-unchecked { background: rgba(148, 163, 184, 0.14); color: var(--color-text-secondary); } .ai-review-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px; background: rgba(245, 158, 11, 0.10); } .ai-review-banner-text { font-size: 14px; font-weight: 600; color: var(--color-text); } .modal-ai-verification-field .receipt-card-status-badge { display: inline-flex; } .modal-ai-verify-btn, .modal-ai-restore-btn { margin-inline-start: auto; } .settings-rule-index, .settings-rule-arrow { color: var(--color-text-secondary); font-size: 13px; font-weight: 600; flex-shrink: 0; } .settings-rule-category { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 700; flex-shrink: 0; } .settings-rule-domain { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; color: var(--color-text); } .settings-status-pill-muted { background: rgba(148,163,184,0.14); color: var(--color-text-secondary); } .settings-autocat-section-head { align-items: center; } .settings-autocat-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .settings-autocat-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; } .settings-autocat-notice { padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); } .settings-autocat-notice-kicker { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .settings-autocat-notice-title, .settings-autocat-pane-title, .settings-autocat-empty-title, .settings-autocat-preview-title { font-size: 17px; font-weight: 700; color: var(--color-text); } .settings-autocat-notice-copy, .settings-autocat-empty-copy, .settings-autocat-inline-note, .settings-autocat-toggle-copy { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); } .settings-autocat-toolbar { display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(0, 1.6fr) auto; gap: 14px; align-items: end; padding: 0; border: 0; border-radius: 0; background: transparent; } .settings-autocat-search { min-width: 0; } .settings-autocat-toolbar-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .settings-autocat-toolbar-field { margin-bottom: 0; } .settings-autocat-toolbar-field-small { max-width: 120px; } .settings-autocat-toolbar-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .settings-autocat-toolbar .cat-dropdown, .settings-autocat-toolbar .cat-dd-trigger, .settings-autocat-toolbar .filter-dd-menu { width: 100%; min-width: 0; } .settings-autocat-pane, .settings-autocat-composer-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } .settings-autocat-composer-card { display: flex; flex-direction: column; gap: 14px; } .settings-autocat-composer-card > .form-group { display: block; margin-bottom: 0; } .settings-autocat-composer-card > .form-grid, .settings-autocat-composer-card > .settings-autocat-advanced, .settings-autocat-composer-card > .settings-autocat-composer-actions, .settings-autocat-composer-card > .settings-autocat-editor-note { margin: 0; } .settings-autocat-pane-list { display: flex; flex-direction: column; gap: 16px; } .settings-autocat-rule-list { display: flex; flex-direction: column; gap: 12px; } .settings-autocat-rule-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 16px; background: rgba(255,255,255,0.02); } .settings-autocat-rule-card.is-editing { border-color: rgba(2,132,199,0.35); background: rgba(2,132,199,0.08); box-shadow: 0 8px 24px rgba(2,132,199,0.08); } .settings-autocat-rule-main { min-width: 0; flex: 1; } .settings-autocat-rule-condition { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .settings-autocat-rule-verb { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); } .settings-autocat-rule-pattern { display: inline-flex; align-items: center; max-width: 100%; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); font-size: 13px; line-height: 1.45; color: var(--color-text); overflow-wrap: anywhere; } .settings-autocat-rule-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .settings-autocat-rule-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .settings-autocat-rule-actions .btn { min-width: 88px; } .settings-autocat-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .settings-autocat-composer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .settings-autocat-editor-note { margin-top: 0; } .settings-autocat-field-help { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); } .settings-autocat-advanced { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); } .settings-autocat-advanced-summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--color-text); } .settings-autocat-advanced[open] .settings-autocat-advanced-summary { margin-bottom: 12px; } .settings-autocat-advanced-body { display: flex; flex-direction: column; gap: 10px; } .settings-autocat-guide { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); } .settings-autocat-guide-title { font-size: 13px; font-weight: 700; color: var(--color-text); } .settings-autocat-guide-copy, .settings-autocat-guide-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--color-text-secondary); } .settings-autocat-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .settings-autocat-example-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .settings-autocat-example-btn:hover { border-color: rgba(2,132,199,0.35); background: rgba(2,132,199,0.08); transform: translateY(-1px); } .settings-autocat-example-btn code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; color: var(--color-text); white-space: normal; overflow-wrap: anywhere; } .settings-autocat-example-btn span { font-size: 11px; line-height: 1.45; color: var(--color-text-secondary); } .settings-autocat-type-pill, .settings-autocat-meta-pill, .settings-autocat-category-pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .settings-autocat-type-pill { background: var(--color-primary-light); color: var(--color-primary); } .settings-autocat-meta-pill { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); } .settings-autocat-meta-pill.is-internal { background: var(--color-bg); border-color: rgba(245,158,11,0.35); color: var(--color-warning); } .settings-autocat-category-pill { background: var(--color-primary-light); color: var(--color-primary); } .settings-autocat-pattern-block, .settings-autocat-pattern-input, .settings-autocat-table-pattern, .settings-autocat-modal-pattern { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .settings-autocat-pattern-block { word-break: break-word; font-size: 15px; line-height: 1.55; color: var(--color-text); } .settings-autocat-pattern-block { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); } .settings-autocat-pagination-copy { font-size: 13px; color: var(--color-text-secondary); } .settings-autocat-empty { padding: 18px; border-radius: var(--radius-card); border: 1px dashed var(--color-border); background: var(--color-bg); } .settings-autocat-pagination { margin-top: 4px; } .settings-autocat-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .settings-autocat-detail-item { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--color-border); background: var(--color-bg); } .settings-autocat-detail-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .settings-autocat-detail-value { display: block; font-size: 14px; line-height: 1.45; color: var(--color-text); word-break: break-word; } .settings-autocat-preview-card { padding: 14px; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-bg); } .settings-autocat-toggle-field { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; } .settings-autocat-table .col-type { width: 18%; } .settings-autocat-table .col-pattern { width: 40%; } .settings-autocat-table .col-category { width: 22%; } .settings-autocat-table .col-mode { width: 14%; } .settings-autocat-table .col-priority { width: 8%; } .settings-autocat-table th { padding: 11px 14px; background: var(--color-bg); color: var(--color-text); } .settings-autocat-table td { padding: 10px 14px; } .settings-autocat-table tbody tr { cursor: pointer; } .settings-autocat-table tbody tr.is-selected td { background-color: var(--color-primary-light); } .settings-autocat-table tbody tr:focus-visible td { outline: 2px solid var(--color-primary); outline-offset: -2px; background-color: var(--color-primary-light); } .settings-autocat-table-wrap { border-radius: var(--radius-card); } .settings-autocat-row-border { width: 3px; padding: 0 !important; border-bottom: none !important; } .settings-autocat-table .col-priority { text-align: center; } .settings-autocat-table-cell-type, .settings-autocat-table-cell-category, .settings-autocat-table-cell-mode { font-size: 12px; color: var(--color-text-secondary); } .settings-autocat-table-type { display: inline-block; color: var(--color-text); font-weight: 600; } .settings-autocat-table-mode { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .settings-autocat-table-cell-category .status-dot { margin-inline-end: 6px; vertical-align: middle; } .settings-autocat-table-category { vertical-align: middle; } .settings-autocat-table-cell-pattern { font-size: 12px; color: var(--color-text-secondary); } .settings-autocat-table-pattern { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-autocat-table-cell-priority { font-weight: 700; color: var(--color-text); white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; } .settings-autocat-modal-overlay { z-index: 11000; padding: 20px; } .settings-autocat-modal { max-width: 840px; max-height: 92dvh; padding: 0; overflow: hidden auto; } .settings-autocat-modal-header { background: var(--color-primary); } .settings-autocat-modal-body { padding: 24px 24px 8px; } .settings-autocat-modal-pattern { display: block; padding: 10px 12px; border-radius: var(--radius-input); background: var(--color-bg); border: 1px solid var(--color-border); word-break: break-word; white-space: pre-wrap; } .settings-autocat-modal-note { margin-top: 16px; } .settings-security-score-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--color-text); } .settings-security-score-top span:first-child { font-size: 30px; } .settings-security-meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .settings-security-meter-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b 0%, #22c55e 100%); } .settings-security-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); } .settings-danger-row { align-items: flex-start; } .settings-danger-copy { display: flex; flex-direction: column; gap: 4px; } .settings-shortcuts-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 16px; } .settings-shortcuts-col { display: flex; flex-direction: column; gap: 10px; } .settings-shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: rgba(255,255,255,0.02); } .settings-shortcut-keys { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 12px; font-weight: 700; color: var(--color-text); white-space: nowrap; } .settings-shortcuts-callout { height: 100%; padding: 18px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); } @media (max-width: 959px) { .settings-hero { flex-direction: column; } .settings-hero-stats, .settings-autocat-metrics, .settings-grid-main, .settings-policy-grid, .settings-shortcuts-grid, .settings-autocat-detail-grid, .settings-autocat-example-grid { grid-template-columns: 1fr; } .settings-section-span-2 { grid-column: span 1; } .settings-section-head, .settings-account-card, .settings-device-row, .settings-danger-row, .settings-rule-row, .settings-autocat-rule-card, .settings-shortcut-row, .settings-autocat-pane-head, .settings-autocat-toolbar, .settings-autocat-head-actions { flex-direction: column; align-items: stretch; } .settings-account-actions, .settings-device-actions, .settings-autocat-head-actions, .settings-autocat-toolbar-actions, .settings-autocat-rule-actions { justify-content: flex-start; } .settings-rule-category, .settings-rule-index, .settings-rule-arrow, .settings-autocat-toolbar-field-small { align-self: flex-start; } .settings-autocat-toolbar-controls { grid-template-columns: 1fr; } .settings-autocat-toolbar { grid-template-columns: 1fr; } .settings-autocat-toolbar-field-small { max-width: none; } .settings-autocat-pagination { justify-content: flex-start; } .settings-autocat-modal { max-width: none; } } /* ============================================================ Scan History List (scan page) ============================================================ */ .scan-history-table tbody tr { cursor: pointer; } .scan-history-table td { padding-top: 9px; padding-bottom: 9px; } .scan-history-table-date { color: var(--color-text-secondary); white-space: nowrap; text-align: center; } .scan-history-table-count { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } .scan-history-table-actions-cell { text-align: center; white-space: nowrap; } .receipt-table th.scan-history-table-actions-head { width: 190px; text-align: center; } .scan-history-table-actions { display: inline-flex; align-items: flex-start; justify-content: center; gap: 6px; white-space: nowrap; } .scan-history-ai-control { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; justify-content: center; min-width: 92px; } .scan-history-ai-status { max-width: 112px; overflow: hidden; color: var(--color-text-secondary); font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .scan-history-table tbody tr:hover td { background: var(--color-primary-light); } .scan-history-table tbody tr:focus-visible td { outline: 2px solid var(--color-primary); outline-offset: -2px; background: var(--color-primary-light); } @media (min-width: 960px) { .scan-history-table tbody tr { height: 60px; } } .scan-history-mobile-list { display: flex; flex-direction: column; gap: 8px; } .scan-history-mobile-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); transition: all 0.2s; cursor: pointer; } .scan-history-mobile-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); } .scan-history-mobile-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .scan-history-mobile-card-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; } .scan-history-mobile-card-info { flex: 1; min-width: 0; } .scan-history-mobile-card-title { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; } .scan-history-mobile-card-sub { font-size: 11px; color: var(--color-text-secondary); } .scan-history-mobile-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .scan-history-mobile-card-actions { display: flex; align-items: flex-start; gap: 6px; } .scan-history-pagination { padding-inline: 0; } .scan-history-pagination.pagination-split { justify-content: space-between; flex-wrap: nowrap; gap: var(--space-3); overflow-x: auto; -webkit-overflow-scrolling: touch; } .scan-history-pagination .pagination-summary { flex-wrap: nowrap; width: auto; min-width: 0; justify-content: flex-start; gap: var(--space-2); } .scan-history-pagination .pagination-page-size { flex-wrap: nowrap; } .scan-history-pagination .pagination-info { white-space: nowrap; } .scan-history-pagination .pagination-controls { flex-shrink: 0; gap: 6px; } .scan-history-pagination::-webkit-scrollbar { height: 6px; } .scan-status-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; } .scan-status-complete { background: var(--color-accent-light); color: var(--color-accent); } .scan-status-failed { background: rgba(239,68,68,0.08); color: var(--color-error); } .scan-status-warning { background: rgba(245,158,11,0.08); color: var(--color-warning); } .scan-history-view-btn { padding: 3px 12px; min-height: 28px; font-size: 11px; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-text); text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .scan-history-view-btn:hover { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-accent); } .scan-history-ai-btn { padding: 3px 10px; min-height: 28px; min-width: 76px; font-size: 11px; font-weight: 700; border: 1px solid rgba(14,165,233,0.35); border-radius: var(--radius-btn); background: rgba(14,165,233,0.09); color: var(--color-accent); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .scan-history-ai-btn:hover { background: rgba(14,165,233,0.16); border-color: var(--color-accent); } .scan-history-ai-btn-verified { border-color: rgba(16,185,129,0.42); background: rgba(16,185,129,0.14); color: #047857; opacity: 1; } .scan-history-ai-btn-verified:hover { background: rgba(16,185,129,0.18); border-color: #10b981; color: #047857; } .scan-history-ai-btn:disabled { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.75; } .scan-history-ai-btn-verified:disabled { border-color: rgba(16,185,129,0.42); background: rgba(16,185,129,0.14); color: #047857; cursor: default; opacity: 1; } .scan-history-delete-btn { padding: 3px 10px; min-height: 28px; min-width: 76px; font-size: 11px; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-error); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .scan-history-delete-btn:hover { background: rgba(239,68,68,0.08); border-color: var(--color-error); } .scan-history-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; } .scan-history-action-btn-compact { padding: 5px 14px; min-height: 30px; min-width: 76px; font-size: 11px; } /* ============================================================ Confirm Dialog (small modal) ============================================================ */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 11100; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .confirm-overlay.active { opacity: 1; visibility: visible; } .confirm-box { background: var(--color-surface); border-radius: var(--radius-card); padding: 24px; width: 360px; max-width: 88vw; box-shadow: 0 12px 40px rgba(0,0,0,0.18); transform: scale(0.95); transition: transform 0.2s; } .confirm-overlay.active .confirm-box { transform: scale(1); } .confirm-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; } .confirm-message { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 20px; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .confirm-cancel-btn { padding: 8px 18px; font-size: 13px; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: background 0.15s; } .confirm-cancel-btn:hover { background: var(--color-bg); } .confirm-danger-btn { padding: 8px 18px; font-size: 13px; font-weight: 600; border: none; border-radius: var(--radius-btn); background: var(--color-error); color: #fff; cursor: pointer; transition: opacity 0.15s; } .confirm-danger-btn:hover { opacity: 0.85; } /* Mobile: dedicated history cards */ @media (max-width: 959px) { .scan-history-pagination.pagination-split { justify-content: flex-start; } .scan-history-mobile-card { padding: 12px 14px; gap: 12px; } .scan-history-mobile-card-title { white-space: normal; line-height: 1.35; } .scan-history-mobile-card-actions { align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; } .scan-history-ai-control { min-width: 76px; } } /* ============================================================ Receipt Detail Modal (Demo 9 style) ============================================================ */ .modal-container { background: var(--color-surface); border-radius: var(--radius-card); max-width: 960px; width: 100%; max-height: 90dvh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.15); font-family: inherit; color: var(--color-text); } html.dark .modal-container { box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .modal-header-colored { background: var(--color-primary); padding: 14px 20px; position: relative; color: #fff; } .modal-close-btn { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: none; background: rgba(255,255,255,0.2); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; } .modal-header-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; font-weight: 600; } .modal-header-vendor { font-size: 18px; font-weight: 700; margin-top: 2px; } .modal-header-meta { font-size: 12px; opacity: 0.8; margin-top: 2px; } .dashboard-filter-modal { max-width: min(980px, 92vw); padding: 0; overflow: hidden; } .dashboard-filter-modal-header { position: relative; padding: 28px 32px 20px; border-bottom: 1px solid var(--color-border); text-align: center; } .dashboard-filter-modal .modal-close-btn { top: 24px; right: 24px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); } [dir="rtl"] .dashboard-filter-modal .modal-close-btn { right: auto; left: 24px; } .dashboard-filter-modal-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); } .dashboard-filter-modal-title { margin-top: 10px; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--color-text); } .dashboard-filter-modal-subtitle { margin-top: 8px; font-size: 14px; color: var(--color-text-secondary); } .dashboard-filter-modal-body { padding: 24px 32px 18px; } .dashboard-filter-modal-body-desktop { padding: 28px 32px 10px; } .dashboard-filter-modal-tools { display: flex; justify-content: flex-end; margin-bottom: 16px; } .dashboard-filter-modal-panel { margin-bottom: 0; } .dashboard-filter-modal-panel-desktop { --shared-filter-grid-gap: 14px; } .dashboard-filter-modal-group { margin: 0 0 18px; padding: 18px 18px 16px; border: 1px solid rgba(148,163,184,0.18); border-radius: 18px; background: rgba(15,23,42,0.18); } .dashboard-filter-modal-group:last-child { margin-bottom: 0; } .dashboard-filter-modal-group-title { padding: 0 10px; margin-inline-start: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .dashboard-filter-modal-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .dashboard-filter-modal-group.is-single .dashboard-filter-modal-group-grid { grid-template-columns: minmax(0, 1fr); } .dashboard-filter-modal-field { min-width: 0; } .dashboard-filter-modal-field.is-wide { grid-column: 1 / -1; } .dashboard-filter-modal-field-label { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); } .dashboard-filter-modal-field .search-wrap, .dashboard-filter-modal-field .dashboard-date-field, .dashboard-filter-modal-field .cat-dropdown, .dashboard-filter-modal-field .filter-single-dropdown { width: 100%; min-width: 0; } .dashboard-filter-modal-field .cat-dd-trigger, .dashboard-filter-modal-field .filter-dd-trigger, .dashboard-filter-modal-field .form-control, .dashboard-filter-modal-field .form-input, .dashboard-filter-modal-field .btn, .dashboard-filter-modal-field .dashboard-date-input { width: 100%; min-width: 0; } .dashboard-filter-modal-field .cat-dd-menu, .dashboard-filter-modal-field .filter-dd-menu { width: 100%; min-width: 100%; box-sizing: border-box; } .dashboard-filter-modal-search { min-width: 0; } .dashboard-filter-modal-scope-badge { min-height: 44px; justify-content: center; border-radius: 14px; padding-inline: 18px; } .dashboard-filter-modal-actions { justify-content: flex-end; gap: 10px; padding: 0 32px 28px; } .dashboard-filter-modal-actions .btn { min-width: 120px; } .dashboard-filter-modal-actions-desktop { justify-content: center; gap: 14px; padding: 12px 32px 30px; } .dashboard-filter-modal-actions-desktop .btn { min-width: 150px; } /* ============================================================ Export Modal ============================================================ */ .export-modal-overlay { z-index: 11000; padding: 20px; } .export-modal { max-width: 860px; max-height: 92dvh; padding: 0; overflow-x: hidden; overflow-y: auto; } .export-modal-header { position: relative; padding: 28px 32px 24px; border-bottom: 1px solid var(--color-border); } .export-modal-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-secondary); padding-inline-start: 48px; } .export-modal-title { margin: 10px 0 6px; font-size: 32px; line-height: 1.15; color: var(--color-text); } .export-modal-subtitle { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); } .export-modal-body { padding: 24px 32px 12px; } .export-modal-section + .export-modal-section { margin-top: 28px; } .export-modal-section-title { margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); } .export-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .export-format-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-height: 132px; padding: 18px 18px 16px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); text-align: start; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .export-format-card:hover { transform: translateY(-1px); border-color: var(--color-primary); } .export-format-card.is-selected { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); } .export-format-card.is-disabled { background: var(--color-primary-light); color: var(--color-text-secondary); } .export-format-name { display: block; font-size: 26px; font-weight: 700; line-height: 1; } .export-format-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); } .export-fields-grid { display: flex; flex-wrap: wrap; gap: 10px; } .export-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; } .export-readiness-item { min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); } .export-readiness-value, .export-readiness-label { display: block; } .export-readiness-value { font-size: 16px; font-weight: 800; color: var(--color-text); } .export-readiness-label { margin-top: 2px; font-size: 11px; line-height: 1.25; color: var(--color-text-secondary); } .export-field-chip { min-height: 38px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .export-field-chip:hover { border-color: var(--color-primary); color: var(--color-text); } .export-field-chip.is-active { border-color: var(--color-text); background: var(--color-text); color: var(--color-surface); } .export-email-row { display: flex; align-items: center; gap: 12px; } .export-email-input { flex: 1; } .export-email-button { white-space: nowrap; } .export-modal-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-secondary); } .export-progress-status { margin-top: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); } .export-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; color: var(--color-text); } .export-progress-percent { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .export-progress-bar { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: var(--color-border); } .export-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 0.2s ease; } .export-progress-meta { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--color-text-secondary); } .modal-actions.export-modal-actions { gap: 12px; } .modal-actions.export-modal-actions .btn { min-width: 160px; } @media (max-width: 959px) { .export-modal-overlay { align-items: center; padding: 16px; } .export-modal { max-width: 100%; max-height: 92dvh; border-radius: var(--radius-card); display: flex; flex-direction: column; overflow: hidden; } .export-modal-header { flex: 0 0 auto; padding: 13px 48px 11px 16px; background: var(--color-surface); } .export-modal-kicker { padding-inline-start: 0; font-size: 10px; line-height: 1.2; letter-spacing: 0; } .export-modal-title { margin: 4px 0 2px; font-size: 19px; line-height: 1.2; letter-spacing: 0; } .export-modal-subtitle { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .export-modal-body { flex: 1 1 auto; min-height: 0; padding: 12px 0 10px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--color-bg); } .export-modal-header .modal-close-btn { top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); } [dir="rtl"] .export-modal-header .modal-close-btn { right: auto; left: 10px; } [dir="rtl"] .export-modal-header { padding-right: 16px; padding-left: 48px; } .export-modal-section { padding: 0 16px; } .export-modal-section + .export-modal-section { margin-top: 0; } .export-profile-section, .export-format-section { padding-inline: 0; } .export-profile-section .export-modal-section-title, .export-format-section .export-modal-section-title { padding-inline: 16px; } .export-modal-section-title { margin-bottom: 7px; font-size: 10px; line-height: 1.2; letter-spacing: 0; } .export-format-grid { gap: 8px; } .export-profile-grid, .export-filetype-grid { display: grid; width: 100%; overflow: visible; padding: 0 16px 2px; } .export-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .export-filetype-grid { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); } .export-format-card { min-width: 0; max-width: 100%; border-radius: 8px; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .export-format-card:hover { transform: none; } .export-profile-card { width: 100%; min-height: 56px; padding: 8px 9px; gap: 4px; } .export-filetype-card { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; align-items: center; text-align: center; } .export-format-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); } .export-format-card.is-disabled { opacity: 0.66; } .export-format-name { font-size: 14px; line-height: 1.22; letter-spacing: 0; } .export-profile-card .export-format-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .export-filetype-card .export-format-name { font-size: 13px; line-height: 1.15; text-align: center; } .export-format-desc { font-size: 11px; line-height: 1.3; } .export-profile-card .export-format-desc { display: none; } .export-filetype-card .export-format-desc { display: none; } .export-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .export-accounting-section .export-fields-grid { grid-template-columns: 1fr; } .export-field-chip { width: 100%; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 9px; border-radius: 8px; border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03); } .export-field-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .export-field-chip.is-active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .export-readiness-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; } .export-readiness-item { padding: 7px 5px; border-radius: 8px; text-align: center; } .export-readiness-value { font-size: 14px; line-height: 1.1; } .export-readiness-label { margin-top: 3px; font-size: 9.5px; line-height: 1.15; overflow-wrap: anywhere; } .export-modal-note { margin-top: 6px; font-size: 11px; line-height: 1.35; } .export-email-row { display: grid; grid-template-columns: 1fr; gap: 8px; } .export-email-input { min-width: 0; height: 40px; } .export-email-button { width: 100%; min-width: 0; min-height: 40px; } .modal-actions.export-modal-actions { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: 8px; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border); } .modal-actions.export-modal-actions .btn { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 13px; line-height: 1.15; white-space: normal; } } @media (max-width: 360px) { .export-readiness-grid, .export-fields-grid { grid-template-columns: 1fr; } .modal-actions.export-modal-actions { grid-template-columns: 1fr; } .export-download-button { order: -1; } } /* Modal hero strip — amount, payment, confidence */ .modal-hero-strip { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); } .modal-hero-cell { flex: 1; padding: 10px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; } .modal-hero-cell + .modal-hero-cell { border-inline-start: 1px solid var(--color-border); } .modal-hero-val { font-size: 20px; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; line-height: 1.2; } .modal-hero-val-neutral { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.2; } .modal-hero-label { font-size: 11px; color: var(--color-text-secondary); } /* Modal field grid — 2-col layout for all detail fields */ .modal-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 20px; } .modal-field-grid > div { min-width: 0; width: 100%; text-align: center; } .modal-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: 3px; } .modal-field-value { font-size: 13px; font-weight: 500; color: var(--color-text); } .modal-field-full { grid-column: 1 / -1; } @media (min-width: 960px) { #receipt-modal-overlay .receipt-modal-fields-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; min-width: 0; } #receipt-modal-overlay .receipt-modal-fields-grid > div { min-width: 0; width: 100%; text-align: center; } #receipt-modal-overlay .receipt-modal-fields-grid .modal-field-full { grid-column: 1 / -1; } } /* Edit-modal form controls: always center text, ignore RTL/LTR direction */ [data-modal-field] > input, [data-modal-field] > select, [data-modal-field] > textarea { text-align: center; } .modal-payment-breakdown { border-top: 1px solid var(--color-border); padding-top: 10px; } .modal-payment-breakdown-list { display: flex; flex-direction: column; gap: 8px; } .modal-payment-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(255, 255, 255, 0.02); } .modal-payment-breakdown-method { font-size: 13px; font-weight: 500; color: var(--color-text); } .modal-payment-breakdown-amount { font-size: 13px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } /* Modal notes field */ .modal-field-notes { font-size: 13px; color: var(--color-text-secondary); font-style: italic; white-space: pre-wrap; } /* Modal email body */ .modal-email-body { margin: 0; padding: 10px 0; font-family: inherit; white-space: pre-wrap; font-size: 13px; max-height: 100px; overflow-y: auto; line-height: 1.5; border-top: 1px solid var(--color-border); } /* Modal audit trail */ .modal-audit { font-size: 11px; color: var(--color-text-secondary); } /* Detection signals section */ .modal-signals { border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 4px; } .modal-signals .modal-field-label { margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); } .signal-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; } .signal-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .signal-tag-green { background: rgba(16,185,129,0.12); color: #059669; } .signal-tag-amber { background: rgba(245,158,11,0.12); color: #d97706; } .signal-tag-red { background: rgba(239,68,68,0.12); color: #dc2626; } .signal-tag-blue { background: rgba(59,130,246,0.10); color: #2563eb; } .signal-tag-purple { background: rgba(139,92,246,0.10); color: #7c3aed; } .signal-tag-gray { background: rgba(107,114,128,0.10); color: #4b5563; } .signal-breakdown { margin-top: 6px; font-size: 11px; color: var(--color-text-secondary); } /* Email preview iframe */ .email-preview-wrap { position: relative; min-height: 80px; } .email-preview-loading { display: flex; align-items: center; gap: 8px; padding: 16px 0; font-size: 13px; color: var(--color-text-secondary); } .spinner-sm { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .email-preview-iframe { width: 100%; height: 380px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; } /* Modal action bar (edit/close buttons) */ .modal-actions { padding: 10px 20px 12px; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; } .modal-edit-wrap { /* Same as modal-actions — combined class */ } .modal-edit-btn { padding: 8px 16px; border-radius: var(--radius-btn); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; } .modal-edit-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .modal-edit-active .modal-edit-btn { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Modal overlay — full screen backdrop */ .modal-backdrop { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.25); opacity: 0; overflow: hidden; overscroll-behavior: contain; transition: opacity 0.2s ease-out; } html.dark .modal-backdrop { background: rgba(0,0,0,0.6); } .modal-backdrop.modal-visible { opacity: 1; } .modal-backdrop > div { transform: translateY(8px); transition: transform 0.2s ease-out; } .modal-backdrop.modal-visible > div { transform: translateY(0); } /* ============================================================ Responsive - Mobile First Base: 375px, Tablet: 960px, Desktop: 1200px ============================================================ */ @media (min-width: 960px) { html { zoom: 1.1; } /* Container: increased horizontal padding at tablet */ .container { padding: 0 var(--space-8); } /* Page content: increased padding at tablet */ .page-content { padding: var(--space-6); } /* Navigation: inline actions, hide hamburger */ .hamburger-btn { display: none; } .nav-actions { display: flex; position: static; flex-direction: row; padding: 0; border: none; box-shadow: none; background: transparent; align-items: center; gap: var(--space-2); } [dir="rtl"] .nav-actions { right: auto; left: auto; } /* Card grid: 2-column at tablet */ .card-grid { grid-template-columns: repeat(2, 1fr); } /* Summary cards: 2-column at tablet */ .summary-cards { grid-template-columns: repeat(2, 1fr); } /* Action bar: already flex-wrap row, no changes needed at tablet */ /* Modal: larger padding at tablet */ .modal-content { padding: var(--space-6); max-width: 90vw; max-height: 85dvh; } .modal { padding: var(--space-6); margin: 0; max-height: 85dvh; } .receipt-detail-modal { padding: var(--space-6); } .attachment-preview-loading { min-height: min(60vh, 500px); } /* Toast: constrained width at tablet */ .toast-container { left: auto; max-width: 400px; width: calc(100% - 32px); } [dir="rtl"] .toast-container { right: auto; left: var(--space-4); } /* Visibility utilities */ .hide-mobile { display: block; } .hide-desktop { display: none; } /* Demo 9 layout: PC mode at >=960px */ .app-topbar { display: grid; } .app-mobile-header { display: none; } .app-bottombar { display: none; } .pc-only { display: block; } .mobile-only { display: none; } .app-body { padding: 24px 32px; } .app-footer { padding: 0 32px 56px; } .fab { display: none !important; } /* Health layout: 2-column */ .health-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } /* Health detail rows: 2-column */ .health-detail-row { grid-template-columns: minmax(120px, 160px) 1fr; } } @media (min-width: 1200px) { /* Page content: larger padding at desktop */ .page-content { padding: var(--space-8) var(--space-10); } /* Card grid: 3-column at desktop for providers */ .card-grid { grid-template-columns: repeat(3, 1fr); } /* Summary cards: 2x2 grid at desktop */ .summary-cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } /* Cards get more padding at desktop */ .card { padding: var(--space-6); } /* Receipt table gets more room at desktop */ .receipt-table-container { padding: var(--space-7); } } /* --- Mobile: simplify receipt table for narrow screens --- */ @media (max-width: 959px) { html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; overflow-y: auto; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .data-table { min-width: 0; table-layout: fixed; } /* Hide columns that are available in the detail modal */ .data-table .col-email-subject, .data-table .col-currency, .data-table .col-payment, .data-table .col-confidence, .data-table td.email-subject-cell, .data-table td:nth-child(5), .data-table td:nth-child(6), .data-table td:nth-child(7) { display: none; } .data-table th, .data-table td { padding: var(--space-1); font-size: 0.75rem; } .data-table .col-date { width: 15% !important; min-width: 0 !important; } .data-table .col-vendor { width: auto !important; min-width: 0 !important; } .data-table .col-amount { width: 15% !important; min-width: 0 !important; } .data-table .col-category { width: 25% !important; min-width: 0 !important; } .data-table .col-attachment { width: 2% !important; min-width: 0 !important; max-width: 2% !important; text-align: center; padding: 0; } .data-table td.vendor-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Show currency inline with amount on mobile */ .mobile-currency { display: inline; font-size: 0.625rem; color: var(--color-text-secondary); margin-inline-start: 0.25em; } /* Short date on mobile */ .date-full { display: none; } .date-short { display: inline; } /* Compact category select on mobile */ .data-table .category-select-control { gap: 2px; } .data-table .category-dot { display: none; } .data-table .receipt-category-select { font-size: 0.625rem; padding: 1px 2px; max-width: 100%; } .receipt-card-amt .recurring-amount-marker { transform: translateY(calc(-50% - 2px)); } [dir="rtl"] .receipt-card-amt .recurring-amount-wrap { padding-inline-start: 31px; padding-inline-end: 0; } [dir="rtl"] .receipt-card-amt .recurring-amount-marker { inset-inline-start: 0; inset-inline-end: auto; } [dir="rtl"] .receipt-card-amt .recurring-amount-marker-stable::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17 10H7.2' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M9.2 14.2L4 10l5.2-4.2' stroke='%2338bdf8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Modal: fix overflow on narrow screens */ .receipt-detail-modal { word-break: break-word; overflow-wrap: break-word; } .receipt-detail-body-text { word-break: break-all; overflow-wrap: break-word; } } /* ============================================================ RTL overrides for Demo 9 components ============================================================ */ /* Grid handles RTL automatically — no row-reverse needed */ [dir="rtl"] .app-topbar-actions { direction: rtl; } [dir="rtl"] .app-mobile-header { direction: rtl; flex-direction: row; } [dir="rtl"] .app-mobile-header-actions { direction: rtl; flex-direction: row; } [dir="rtl"] .app-bottombar { direction: rtl; } [dir="rtl"] .search-icon { left: 12px; right: auto; } [dir="rtl"] .search-input { padding-left: 36px; padding-right: 14px; } [dir="rtl"] .receipt-table th { text-align: right; } [dir="rtl"] .receipt-table th.receipt-cell-category-header { text-align: center !important; } [dir="rtl"] .receipt-table th.scan-history-table-actions-head { text-align: center; } [dir="rtl"] .receipt-vendor-name, [dir="rtl"] .receipt-cell-subject { unicode-bidi: plaintext; } /* receipt-amt always centered — no RTL override needed */ [dir="rtl"] .receipt-card-right { text-align: left; } [dir="rtl"] .receipt-card-border-personal { border-right: none; border-left: 3px solid #a78bfa; padding-right: 0; padding-left: 10px; } [dir="rtl"] .receipt-card-border-business { border-right: none; border-left: 3px solid #22d3ee; padding-right: 0; padding-left: 10px; } [dir="rtl"] .receipt-row-border { /* Flip the colored border to right side in RTL */ } [dir="rtl"] .cat-bar-val { text-align: left; } [dir="rtl"] .cat-bar-label { text-align: right; } [dir="rtl"] .dash-header { flex-direction: row-reverse; } [dir="rtl"] .filter-row { flex-direction: row-reverse; } [dir="rtl"] .modal-close-btn { right: auto; left: 14px; } [dir="rtl"] .modal-field-grid { direction: rtl; } [dir="rtl"] select.form-input, [dir="rtl"] select.form-control { background-position: left 12px center; padding-left: 32px; padding-right: 14px; } /* ============================================================ Mobile overrides for Demo 9 components (<960px) ============================================================ */ @media (max-width: 959px) { :root { --font-size-base: clamp(13px, 1.6vw, 16px); } html { zoom: 1.1; } .app-body { padding: 16px; padding-bottom: calc(112px + env(safe-area-inset-bottom)); } body[data-app-page="results"] #main-content > .dashboard-unified-header, body[data-app-page="results"] #main-content > .mobile-only { width: 100%; max-width: 620px; margin-inline: auto; } body[data-app-page="settings"] #main-content > .settings-shell { width: 100%; max-width: 620px; margin-inline: auto; } .dashboard-unified-head { gap: 12px; } .dashboard-unified-copy, .dashboard-toolbar-actions { width: 100%; } .dashboard-content-toolbar-mobile { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-bottom: var(--gap); padding-bottom: 2px; min-height: 42px; position: relative; scrollbar-width: none; } .dashboard-content-toolbar-mobile::-webkit-scrollbar { display: none; } .dashboard-content-toolbar-mobile .dashboard-view-tabs-row { flex: 0 0 auto; } .dashboard-content-toolbar-mobile .dashboard-view-tabs { width: auto; display: inline-flex; grid-template-columns: none; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 12px; } .dashboard-content-toolbar-mobile .dashboard-view-tab { width: 42px; min-width: 42px; flex: 0 0 42px; min-height: 34px; padding: 0; font-size: 0; } .dashboard-content-toolbar-mobile .dashboard-view-tab::before { content: ""; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; } .dashboard-content-toolbar-mobile .dashboard-view-tab[data-dashboard-view-tab="overview"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 12.5V8.5' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 12.5V4.5' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M13.5 12.5V6.5' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-view-tab[data-dashboard-view-tab="results"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.5' y='3' width='11' height='10' rx='2' stroke='%2394A3B8' stroke-width='1.4'/%3E%3Cpath d='M5 6h6' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M5 8.5h6' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M5 11h3.5' stroke='%2394A3B8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-view-tab.is-active[data-dashboard-view-tab="overview"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 12.5V8.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 12.5V4.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M13.5 12.5V6.5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-view-tab.is-active[data-dashboard-view-tab="results"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.5' y='3' width='11' height='10' rx='2' stroke='%23FFFFFF' stroke-width='1.4'/%3E%3Cpath d='M5 6h6' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M5 8.5h6' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M5 11h3.5' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-toolbar-search { flex: 1 0 90px; min-width: 90px; width: auto; transition: none; } .dashboard-content-toolbar-mobile .dashboard-toolbar-search .search-input { min-height: 40px; border-radius: 12px; width: 100%; } .dashboard-content-toolbar-mobile .dashboard-toolbar-search-mobile:focus-within { position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 3; min-width: 0; width: 100%; flex: 0 0 auto; } .dashboard-content-toolbar-mobile .dashboard-toolbar-search-mobile:focus-within .search-input { width: 100%; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions { width: auto; flex: 0 0 auto; margin-inline-start: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .shared-filter-scope-badge, .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch { flex: 0 0 auto; width: 42px; min-width: 42px; padding: 0; justify-content: center; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .shared-filter-scope-badge { position: relative; gap: 0; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .shared-filter-scope-badge > span { display: none; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .shared-filter-scope-badge::before { content: ""; display: inline-block; width: 16px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.75' y='3.25' width='10.5' height='3.5' rx='1.2' stroke='%230284C7' stroke-width='1.4'/%3E%3Crect x='2.75' y='9.25' width='10.5' height='3.5' rx='1.2' stroke='%230284C7' stroke-width='1.4'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch { position: relative; gap: 0; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch-label { display: none; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch-icon { width: 16px; height: 16px; flex: 0 0 16px; } html:not(.dark) .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.333 3.083h9.334L8.333 7.25v3.167l-2.666.917V7.25L2.333 3.083z' stroke='%230284C7' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E"); } html:not(.dark) .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch-icon.is-clear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.25 3.25L10.75 10.75' stroke='%230284C7' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M10.75 3.25L3.25 10.75' stroke='%230284C7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-filter-launch-count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; line-height: 1; } .dashboard-content-toolbar-mobile .dashboard-toolbar-actions .dashboard-add-receipt-btn { display: none; } [dir="rtl"] .dashboard-content-toolbar-mobile { direction: rtl; flex-direction: row; } [dir="rtl"] .dashboard-content-toolbar-mobile .dashboard-toolbar-actions { flex-direction: row; } .dashboard-filter-modal { display: flex; flex-direction: column; width: calc(100vw - 24px); max-width: 720px; height: auto; max-height: 84dvh; border-radius: var(--radius-card); overflow: hidden; } .dashboard-filter-modal-header { padding: 14px 20px; background: var(--color-primary); color: #fff; text-align: start; } .dashboard-filter-modal .modal-close-btn { top: 14px; right: 14px; border: none; background: rgba(255,255,255,0.2); color: #fff; } [dir="rtl"] .dashboard-filter-modal .modal-close-btn { right: auto; left: 14px; } .dashboard-filter-modal-kicker { display: none; } .dashboard-filter-modal-title { margin-top: 2px; font-size: 18px; line-height: 1.5; color: #fff; } .dashboard-filter-modal-subtitle { margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.82); } .dashboard-filter-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 18px; } .dashboard-filter-modal-actions { padding: 0 18px 18px; } .dashboard-filter-modal-actions .btn { width: 100%; min-width: 0; } .dashboard-filter-modal-sort .dashboard-filter-modal-group-grid { display: block; } .kpi-strip { grid-template-columns: repeat(2, 1fr); } .chart-row { grid-template-columns: 1fr; } .period-grid { grid-template-columns: repeat(2, 1fr); } .scan-stats-grid { grid-template-columns: repeat(2, 1fr); } .fab.fab-visible { display: flex; } .modal-container { max-width: 88vw; max-height: 90dvh; } #receipt-modal-overlay > .modal-container, .scope-picker-modal.modal-container, .export-modal.modal-container { max-height: 84dvh; } #receipt-modal-overlay > .modal-container { display: flex; flex-direction: column; height: 84dvh; overflow: hidden; } #receipt-modal-overlay .modal-header-colored, #receipt-modal-overlay .modal-hero-strip, #receipt-modal-overlay .modal-actions { flex: 0 0 auto; } #receipt-modal-overlay .modal-field-grid { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; min-height: 0; overflow: hidden; } #receipt-modal-overlay .receipt-modal-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; flex: 0 0 auto; min-height: 0; } #receipt-modal-overlay .receipt-modal-fields-grid > div { min-width: 0; width: 100%; text-align: center; } #receipt-modal-overlay .modal-email-preview-field { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #receipt-modal-overlay .modal-email-preview-field > .modal-field-label { flex: 0 0 auto; } #receipt-modal-overlay .email-preview-wrap { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } #receipt-modal-overlay #email-preview-iframe-host { display: flex; flex: 1 1 auto; min-height: 0; } #receipt-modal-overlay .email-preview-iframe { flex: 1 1 auto; height: auto; min-height: 0; } #receipt-modal-overlay .modal-email-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } #receipt-modal-overlay [data-att-imap], #receipt-modal-overlay .modal-external-links { flex: 0 0 auto; } /* 2-col grids collapse to 1-col on narrow mobile */ .g2, .modal-fields-grid { grid-template-columns: 1fr !important; } } /* ============================================================ Settings Page - Results-aligned layout Scoped to settings only so scan/results/landing stay untouched. ============================================================ */ body[data-app-page="settings"] .settings-shell-results-like { gap: var(--gap); } body[data-app-page="settings"] .settings-page-head { display: flex; flex-direction: column; gap: var(--gap); margin-bottom: 0; } body[data-app-page="settings"] .settings-hero-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } body[data-app-page="settings"] .settings-page-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } body[data-app-page="settings"] .settings-page-title { margin: 0; font-size: 20px; line-height: 1.2; } body[data-app-page="settings"] .settings-page-subtitle, body[data-app-page="settings"] .settings-section-copy { font-size: 13px; line-height: 1.5; } body[data-app-page="settings"] .settings-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin-bottom: 0; } body[data-app-page="settings"] .settings-kpi-card { padding: 12px 10px; border-radius: var(--radius-card); } body[data-app-page="settings"] .settings-kpi-card .kpi-label { white-space: normal; line-height: 1.25; } body[data-app-page="settings"] .settings-grid-main { grid-template-columns: minmax(0, 1fr); } body[data-app-page="settings"] .settings-section-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; } body[data-app-page="settings"] .settings-section-head { align-items: flex-start; margin-bottom: 0; } body[data-app-page="settings"] .settings-account-card, body[data-app-page="settings"] .settings-device-row, body[data-app-page="settings"] .settings-policy-card, body[data-app-page="settings"] .settings-autocat-pane, body[data-app-page="settings"] .settings-autocat-composer-card, body[data-app-page="settings"] .settings-autocat-rule-card { padding: 14px 16px; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); } body[data-app-page="settings"] .settings-account-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "icon main" "actions actions"; align-items: center; gap: 12px 14px; } body[data-app-page="settings"] .settings-account-icon { grid-area: icon; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); box-shadow: 0 8px 18px rgba(2,132,199,0.16); } body[data-app-page="settings"] .settings-account-main { grid-area: main; } body[data-app-page="settings"] .settings-account-actions { grid-area: actions; justify-content: flex-start; } body[data-app-page="settings"] .settings-account-card-demo { grid-template-areas: "icon main" "actions actions" "child child"; } body[data-app-page="settings"] .settings-account-title, body[data-app-page="settings"] .settings-policy-title { font-size: 15px; line-height: 1.3; } body[data-app-page="settings"] .settings-account-meta, body[data-app-page="settings"] .settings-policy-copy { font-size: 12px; line-height: 1.45; } body[data-app-page="settings"] .settings-child-account-list { margin-inline-start: 0; } body[data-app-page="settings"] .settings-child-account-row { grid-template-columns: 24px minmax(0, 1fr) 84px; padding: 9px 10px; } body[data-app-page="settings"] .settings-child-account-switch { width: 84px; min-width: 84px; } body[data-app-page="settings"] .settings-account-devices { margin-top: 0; padding-top: 0; border-top: 0; } body[data-app-page="settings"] .settings-device-list { gap: 12px; padding-inline-start: 0; border-inline-start: 0; } body[data-app-page="settings"] .settings-device-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-app-page="settings"] .settings-device-actions, body[data-app-page="settings"] .settings-autocat-rule-actions, body[data-app-page="settings"] .settings-autocat-composer-actions, body[data-app-page="settings"] .settings-autocat-head-actions { justify-content: flex-start; } body[data-app-page="settings"] .settings-status-pill, body[data-app-page="settings"] .settings-autocat-type-pill, body[data-app-page="settings"] .settings-autocat-meta-pill, body[data-app-page="settings"] .settings-autocat-category-pill { min-height: 24px; padding: 4px 10px; } body[data-app-page="settings"] .settings-policy-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-app-page="settings"] .settings-automation-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-app-page="settings"] .settings-ai-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-app-page="settings"] .settings-autocat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } body[data-app-page="settings"] .settings-autocat-pane, body[data-app-page="settings"] .settings-autocat-composer-card { gap: 12px; } body[data-app-page="settings"] .settings-autocat-rule-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } body[data-app-page="settings"] .settings-autocat-rule-pattern { border-radius: 10px; background: var(--color-bg); } body[data-app-page="settings"] .settings-autocat-modal { width: min(960px, 92vw); max-width: min(960px, 92vw); max-height: 90dvh; padding: 0; border-radius: var(--radius-card); overflow: hidden auto; } body[data-app-page="settings"] .settings-autocat-modal-header { border-radius: var(--radius-card) var(--radius-card) 0 0; } body[data-app-page="settings"] .settings-autocat-modal-body { padding: 24px; } body[data-app-page="settings"] .settings-native-gallery-section { scroll-margin-top: 84px; } body[data-app-page="settings"] .settings-native-gallery-section .settings-section-head { align-items: flex-start; } body[data-app-page="settings"] .settings-native-gallery-progress { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%); } body[data-app-page="settings"] .settings-native-gallery-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-text); font-size: 12px; font-weight: 800; } body[data-app-page="settings"] .settings-native-gallery-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.18); } body[data-app-page="settings"] .settings-native-gallery-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width 0.24s ease; } body[data-app-page="settings"] .settings-native-gallery-metrics { display: flex; flex-wrap: wrap; gap: 6px; } body[data-app-page="settings"] .settings-native-gallery-metrics span { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-secondary); font-size: 11px; font-weight: 800; } body[data-app-page="settings"] .settings-native-gallery-status { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 12px; border: 1px solid rgba(148, 163, 184, 0.30); border-radius: 999px; background: rgba(148, 163, 184, 0.10); color: var(--color-text-secondary); font-size: 12px; font-weight: 700; white-space: nowrap; } body[data-app-page="settings"] .settings-native-gallery-status.is-active { border-color: rgba(2, 132, 199, 0.30); background: rgba(2, 132, 199, 0.10); color: var(--color-primary); } body[data-app-page="settings"] .settings-native-gallery-status.is-success { border-color: rgba(16, 185, 129, 0.34); background: rgba(16, 185, 129, 0.12); color: var(--color-success); } body[data-app-page="settings"] .settings-native-gallery-status.is-error { border-color: rgba(239, 68, 68, 0.34); background: rgba(239, 68, 68, 0.10); color: var(--color-error); } body[data-app-page="settings"] .settings-native-gallery-actions, body[data-app-page="settings"] .settings-native-gallery-toolbar, body[data-app-page="settings"] .settings-native-gallery-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body[data-app-page="settings"] .settings-native-gallery-toolbar { justify-content: space-between; padding-top: 4px; } body[data-app-page="settings"] .settings-native-gallery-count { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; } body[data-app-page="settings"] .settings-native-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } body[data-app-page="settings"] .settings-native-gallery-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb main" "thumb foot" "progress progress"; gap: 8px 10px; align-items: center; min-height: 76px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: start; } body[data-app-page="settings"] .settings-native-gallery-item:hover, body[data-app-page="settings"] .settings-native-gallery-item:focus-visible { border-color: rgba(2, 132, 199, 0.42); box-shadow: 0 8px 20px rgba(2, 132, 199, 0.10); outline: none; } body[data-app-page="settings"] .settings-native-gallery-item.is-selected { border-color: var(--color-primary); background: var(--color-primary-light); } body[data-app-page="settings"] .settings-native-gallery-item.is-processing { cursor: progress; opacity: 0.88; } body[data-app-page="settings"] .settings-native-gallery-thumb { grid-area: thumb; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--color-bg); } body[data-app-page="settings"] .settings-native-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } body[data-app-page="settings"] .settings-native-gallery-thumb-empty { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; } body[data-app-page="settings"] .settings-native-gallery-item-main { grid-area: main; min-width: 0; } body[data-app-page="settings"] .settings-native-gallery-name { display: block; overflow: hidden; color: var(--color-text); font-size: 13px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body[data-app-page="settings"] .settings-native-gallery-meta { display: block; overflow: hidden; color: var(--color-text-secondary); font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } body[data-app-page="settings"] .settings-native-gallery-item-foot { grid-area: foot; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } body[data-app-page="settings"] .settings-native-gallery-candidate, body[data-app-page="settings"] .settings-native-gallery-item-state { width: fit-content; max-width: 100%; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; } body[data-app-page="settings"] .settings-native-gallery-candidate { background: rgba(16, 185, 129, 0.12); color: var(--color-success); } body[data-app-page="settings"] .settings-native-gallery-item-state { background: rgba(2, 132, 199, 0.12); color: var(--color-primary); } body[data-app-page="settings"] .settings-native-gallery-item-progress { grid-area: progress; display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.18); } body[data-app-page="settings"] .settings-native-gallery-item-progress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: settingsGalleryProgress 1.1s ease-in-out infinite; } @keyframes settingsGalleryProgress { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } } body[data-app-page="settings"] .settings-native-gallery-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } body[data-app-page="settings"] .settings-native-gallery-result-card { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } body[data-app-page="settings"] .settings-native-gallery-result-card.is-error { border-color: rgba(239, 68, 68, 0.36); } body[data-app-page="settings"] .settings-native-gallery-result-card.is-saved { border-color: rgba(16, 185, 129, 0.36); background: color-mix(in srgb, var(--color-surface) 88%, rgba(16, 185, 129, 0.12) 12%); } body[data-app-page="settings"] .settings-native-gallery-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } body[data-app-page="settings"] .settings-native-gallery-result-title { color: var(--color-text); font-size: 14px; font-weight: 700; line-height: 1.3; } body[data-app-page="settings"] .settings-native-gallery-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body[data-app-page="settings"] .settings-native-gallery-field { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--color-bg); } body[data-app-page="settings"] .settings-native-gallery-field span, body[data-app-page="settings"] .settings-native-gallery-field strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-app-page="settings"] .settings-native-gallery-field span { color: var(--color-text-secondary); font-size: 11px; font-weight: 700; } body[data-app-page="settings"] .settings-native-gallery-field strong { margin-top: 2px; color: var(--color-text); font-size: 12px; font-weight: 700; } body[data-app-page="settings"] .settings-native-gallery-result-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body[data-app-page="settings"] .settings-native-gallery-save-note { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; } @media (min-width: 960px) { body[data-app-page="settings"] .settings-page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); align-items: end; gap: 24px; } body[data-app-page="settings"] .settings-page-title { font-size: 24px; } body[data-app-page="settings"] .settings-policy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body[data-app-page="settings"] .settings-automation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-app-page="settings"] .settings-account-card { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon main" "actions actions"; } body[data-app-page="settings"] .settings-account-card-demo { grid-template-areas: "icon main" "actions actions" "child child"; } body[data-app-page="settings"] .settings-account-icon { width: 40px; height: 40px; } body[data-app-page="settings"] .settings-device-actions, body[data-app-page="settings"] .settings-autocat-rule-actions { justify-content: flex-end; } body[data-app-page="settings"] .settings-device-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } body[data-app-page="settings"] .settings-autocat-layout { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); align-items: start; } body[data-app-page="settings"] .settings-autocat-rule-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } @media (max-width: 959px) { body[data-app-page="settings"] .settings-section-head, body[data-app-page="settings"] .settings-autocat-pane-head { gap: 8px; } body[data-app-page="settings"] .settings-account-actions .btn, body[data-app-page="settings"] .settings-device-actions .btn, body[data-app-page="settings"] .settings-autocat-rule-actions .btn, body[data-app-page="settings"] .settings-autocat-composer-actions .btn, body[data-app-page="settings"] .settings-autocat-head-actions .btn { min-height: 38px; } body[data-app-page="settings"] .settings-autocat-modal-overlay { padding: 14px; } body[data-app-page="settings"] .settings-autocat-modal { width: 100%; max-width: 620px; } body[data-app-page="settings"] .settings-autocat-modal-body { padding: 18px; } } /* Attachment preview modal — single source of truth. Width/max-width inherit from the canonical .modal-container rules (max-width: 960px desktop, max-width: 88vw at ≤959px). Only the inner layout (flex column, fixed height for the iframe, overflow hidden) is added here. The PDF iframe owns its own scroll/zoom; the modal itself never scrolls so the bottom action row always stays visible. */ .attachment-preview-overlay { z-index: 10001; padding: 16px; box-sizing: border-box; } .attachment-preview-modal.modal-container { display: flex; flex-direction: column; width: min(620px, 100%); max-width: 620px; max-height: 84dvh; height: auto; padding: 0; overflow: hidden; } .attachment-preview-header { flex: 0 0 auto; border-radius: var(--radius-card) var(--radius-card) 0 0; } .attachment-preview-header-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .attachment-preview-filename { margin: 0; opacity: 0.85; word-break: break-word; } .attachment-preview-body { flex: 0 1 auto; position: relative; min-height: 0; height: min(58dvh, 430px); display: flex; flex-direction: column; padding: 0; overflow: hidden; } .attachment-preview-status { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); color: var(--color-text-secondary); text-align: center; } .attachment-preview-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #525659; display: block; } .attachment-preview-media { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4); overflow: auto; } .attachment-preview-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: var(--color-surface); } .attachment-preview-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); } /* Mobile sizing follows compact app modals such as the scope picker: capped width, consistent side gutters, and no forced full-height shell. */ @media (max-width: 959px) { .attachment-preview-modal.modal-container { width: min(620px, 100%); max-width: 620px; max-height: 84dvh; height: auto; } .attachment-preview-body { height: min(55dvh, 480px); } }