/* Theme Name: Invoice AI App Theme Theme URI: https://example.com Author: Invoice AI Description: A dedicated single-purpose theme for the Invoice AI dashboard. All invoice data/OCR/export logic lives in the Invoice AI plugin — this theme only controls layout and visual design, presenting the dashboard as a full-height app instead of a scrolling page. Version: 1.6.2 Requires PHP: 7.4 Text Domain: invoice-ai-theme */ /* ============================================================ Base reset ============================================================ */ html, body { margin: 0; padding: 0; height: 100%; background: var(--iai-bg); overscroll-behavior: none; } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--iai-fg); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--iai-border-muted); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--iai-fg-subtle); } /* ============================================================ Light design tokens (default): white surfaces, soft gray borders, near-black text, indigo brand accent. Status colors (green/amber/blue/red for complete/review/processing/error) stay semantic and are NOT tied to the brand accent below. Toggled to dark via [data-theme="dark"] on — see below. ============================================================ */ :root { --iai-bg: #f4f4f5; /* zinc-100, page background */ --iai-surface: #ffffff; /* card surfaces */ --iai-surface-2: #f9fafb; /* inputs / chips / subtle fills */ --iai-border: #e5e7eb; /* gray-200 */ --iai-border-muted: #d1d5db;/* gray-300 */ --iai-fg: #111827; /* gray-900, primary text */ --iai-fg-muted: #6b7280; /* gray-500 */ --iai-fg-subtle: #9ca3af; /* gray-400 */ --iai-accent: #4f46e5; /* indigo-600, brand */ --iai-accent-hover: #4338ca;/* indigo-700 */ --iai-accent-fg: #ffffff; --iai-radius: 14px; --iai-radius-sm: 8px; } :root[data-theme="dark"] { --iai-bg: #09090b; /* zinc-950 */ --iai-surface: #18181b; /* zinc-900 */ --iai-surface-2: #27272a; /* zinc-800 */ --iai-border: #27272a; /* zinc-800 */ --iai-border-muted: #3f3f46;/* zinc-700 */ --iai-fg: #fafafa; /* zinc-50 */ --iai-fg-muted: #a1a1aa; /* zinc-400 */ --iai-fg-subtle: #71717a; /* zinc-500 */ --iai-accent: #6366f1; /* indigo-500, brighter for dark backgrounds */ --iai-accent-hover: #4f46e5;/* indigo-600 */ --iai-accent-fg: #ffffff; } /* Status badges, confidence text, and a few other spots use fixed pastel-on-white colors that need their own dark-mode variants (they aren't driven by the --iai-* tokens above). */ :root[data-theme="dark"] .iai-confidence-cell { color: #34d399 !important; } :root[data-theme="dark"] .iai-status-complete { background: rgba(16,185,129,0.18) !important; color: #6ee7b7 !important; } :root[data-theme="dark"] .iai-status-review { background: rgba(245,158,11,0.18) !important; color: #fcd34d !important; } :root[data-theme="dark"] .iai-status-processing { background: rgba(59,130,246,0.18) !important; color: #93c5fd !important; } :root[data-theme="dark"] .iai-status-error { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; } :root[data-theme="dark"] .iai-review-error { background: rgba(239,68,68,0.15); color: #fca5a5; } :root[data-theme="dark"] .iai-login-error { background: rgba(239,68,68,0.15); color: #fca5a5; } :root[data-theme="dark"] .iai-icon-btn:hover { background: rgba(239,68,68,0.15); color: #f87171; } :root[data-theme="dark"] .iai-file-icon { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); } :root[data-theme="dark"] .iai-confirm-modal { background: var(--iai-surface); color: var(--iai-fg); } :root[data-theme="dark"] .iai-confirm-message { color: var(--iai-fg-muted); } :root[data-theme="dark"] .iai-theme-toggle .material-symbols-outlined { font-variation-settings: 'FILL' 1; } /* .iai-btn-dark and .iai-chip.active use var(--iai-fg) as their own background so they're always "the opposite of body text" — in light mode that's near-black (correct), but in dark mode --iai-fg flips to near-white, which then paired with white text/icons became invisible. Flip them to a solid light pill with dark text instead. */ :root[data-theme="dark"] .iai-btn-dark { background: #fafafa; color: #09090b; } :root[data-theme="dark"] .iai-btn-dark:hover:not(:disabled) { background: #d4d4d8; } :root[data-theme="dark"] .iai-chip.active { background: #fafafa; color: #09090b; border-color: #fafafa; } /* ============================================================ App shell — single scrolling column; the review panel is a slide-in drawer instead of a permanent split, so the main content gets full width and only the drawer scrolls on its own. ============================================================ */ #iai-app.iai-root { /* Overrides the plugin's full-bleed hack: this theme owns the whole page, so the app just fills it edge to edge. */ width: 100% !important; max-width: 100% !important; margin: 0 !important; min-height: 100vh; display: flex; flex-direction: column; background: var(--iai-bg); border-radius: 0; box-shadow: none; } .iai-topbar { flex: 0 0 auto; background: var(--iai-surface); border-bottom: 1px solid var(--iai-border); padding: 14px 24px; position: sticky; top: 0; z-index: 30; } .iai-brand { font-size: 16px; font-weight: 700; color: var(--iai-fg); } .iai-beta { background: rgba(79,70,229,0.1); color: var(--iai-accent); } .iai-user-chip { color: var(--iai-fg-muted); } .iai-usage-badge { background: var(--iai-surface-2); border: 1px solid var(--iai-border); color: var(--iai-accent) !important; } .iai-workspace { flex: 1 1 auto; padding: 28px 24px; max-width: 1040px; width: 100%; margin: 0 auto; } .iai-canvas { width: 100%; background: var(--iai-surface); color: var(--iai-fg); border: 1px solid var(--iai-border); border-radius: var(--iai-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding: 24px; } /* ============================================================ Extraction review — a slide-in drawer over the content instead of a permanent side panel, so the intake/queue page gets full width and normal page scroll, while the drawer scrolls its own fields independently and closes when done. ============================================================ */ .iai-review-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; } .iai-review-backdrop.iai-visible { opacity: 1; pointer-events: auto; } .iai-review { position: fixed; top: 0; right: 0; width: 760px; max-width: 96vw; height: 100vh; background: var(--iai-surface); border: none; border-left: 1px solid var(--iai-border); border-radius: 0; box-shadow: -12px 0 32px rgba(17,24,39,0.12); padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; z-index: 50; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .iai-review.iai-drawer-open { transform: translateX(0); } .iai-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 4px; } .iai-review-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .iai-review-title { font-size: 18px; white-space: nowrap; } .iai-review-filename { display: block; margin-top: 4px; word-break: break-all; } .iai-review-fields { flex: 1 1 auto; max-height: none !important; overflow-y: auto; padding-right: 4px; /* Fields fill the wider drawer two-up where it makes sense. */ } .iai-review-empty { flex: 1 1 auto; } .iai-review-close { flex-shrink: 0; transition: transform 0.15s ease, background-color 0.15s ease; } .iai-review-close:hover { transform: rotate(90deg); } /* ============================================================ Section head + compact dropzone (click-to-upload style) ============================================================ */ .iai-section-head { align-items: center; } .iai-section-head h1 { color: var(--iai-fg); font-size: 20px; margin: 0; } .iai-section-sub { margin: 4px 0 0; font-size: 13px; color: var(--iai-fg-muted); } .iai-pill-ready { background: rgba(79,70,229,0.1); color: var(--iai-accent); } .iai-dropzone { background: var(--iai-surface-2); outline: 1.5px dashed var(--iai-border-muted); padding: 24px; } .iai-dropzone-icon { display: block; font-size: 28px; color: var(--iai-accent); background: none; width: auto; height: auto; margin: 0 auto 10px; } .iai-dropzone-text { font-size: 13px; color: var(--iai-fg-muted); margin: 0 0 16px; } .iai-dropzone-sub { font-size: 11px; color: var(--iai-fg-subtle); } .iai-browse { color: var(--iai-accent); font-weight: 600; } /* Per-file upload/processing progress cards, replacing the old chip list — one row per file with a live progress bar. */ .iai-upload-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .iai-upload-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--iai-border); border-radius: var(--iai-radius-sm); background: var(--iai-surface); } .iai-upload-card-icon { color: var(--iai-fg-subtle); flex-shrink: 0; } .iai-upload-card-body { flex: 1 1 auto; min-width: 0; } .iai-upload-card-name { font-size: 12px; font-weight: 600; color: var(--iai-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iai-upload-card-meta { font-size: 10px; color: var(--iai-fg-subtle); margin-top: 2px; } .iai-upload-card-progress-track { height: 6px; border-radius: 999px; background: var(--iai-border); overflow: hidden; margin-top: 6px; } .iai-upload-card-progress-fill { height: 100%; background: var(--iai-accent); border-radius: 999px; transition: width 0.3s ease; } .iai-upload-card.iai-upload-error .iai-upload-card-progress-fill { background: #dc2626; } .iai-upload-card-pct { font-size: 11px; font-weight: 700; color: var(--iai-fg-muted); flex-shrink: 0; width: 34px; text-align: right; } .iai-upload-card-remove { flex-shrink: 0; color: var(--iai-fg-subtle); cursor: pointer; background: none; border: none; } .iai-upload-card-remove:hover { color: #dc2626; } .iai-format-chips span { background: var(--iai-surface); color: var(--iai-fg-muted); border: 1px solid var(--iai-border); } .iai-btn { border-radius: var(--iai-radius-sm); } .iai-btn-dark { background: var(--iai-fg); color: #ffffff; } .iai-btn-dark:hover:not(:disabled) { background: #27272a; } .iai-btn-light { background: var(--iai-surface); color: var(--iai-fg); border: 1px solid var(--iai-border-muted); } .iai-btn-light:hover:not(:disabled) { background: var(--iai-surface-2); } .iai-btn-green { background: var(--iai-accent); color: var(--iai-accent-fg); } .iai-btn-green:hover:not(:disabled) { background: var(--iai-accent-hover); } .iai-queue-head h2 { color: var(--iai-fg); } .iai-count-pill { background: var(--iai-surface-2); color: var(--iai-fg-muted); border: 1px solid var(--iai-border); } .iai-chip { background: var(--iai-surface); border: 1px solid var(--iai-border-muted); color: var(--iai-fg-muted); } .iai-chip.active { background: var(--iai-fg); color: #ffffff; border-color: var(--iai-fg); } .iai-queue-head-right input { background: var(--iai-surface); border: 1px solid var(--iai-border-muted); color: var(--iai-fg); } .iai-queue-head-right input:focus, .iai-field input:focus { outline: 2px solid var(--iai-accent); outline-offset: 1px; } .iai-table-wrap { background: var(--iai-surface); border: 1px solid var(--iai-border); border-radius: var(--iai-radius-sm); } .iai-table thead tr { background: var(--iai-surface-2); color: var(--iai-fg-muted); border-bottom: 1px solid var(--iai-border); } .iai-table td { border-top: 1px solid var(--iai-border); color: var(--iai-fg); } .iai-table tbody tr:hover, .iai-table tbody tr:hover .iai-filename-main, .iai-table tbody tr:hover .iai-filename-sub { background: rgba(79,70,229,0.05); color: var(--iai-fg); } .iai-table tbody tr.iai-selected { background: rgba(79,70,229,0.08); } .iai-table tbody tr.iai-selected .iai-filename-main, .iai-table tbody tr.iai-selected .iai-filename-sub { color: var(--iai-fg); } .iai-filename-main { color: var(--iai-fg); } .iai-filename-sub { color: var(--iai-fg-subtle); } .iai-table-footer { color: var(--iai-fg-subtle); } /* Status badges + confidence text stay semantic (green=complete, amber=review, blue=processing, red=error) — dark text on soft pastel fills, matching a light-background table. */ .iai-confidence-cell { color: #059669 !important; } .iai-status-badge { font-weight: 700; } .iai-status-complete { background: #d1fae5 !important; color: #065f46 !important; } .iai-status-review { background: #fef3c7 !important; color: #92400e !important; } .iai-status-processing { background: #dbeafe !important; color: #1e40af !important; } .iai-status-error { background: #fee2e2 !important; color: #991b1b !important; } .iai-table tbody tr.iai-status-review { background: rgba(245,158,11,0.04); } .iai-table tbody tr.iai-status-processing { background: rgba(59,130,246,0.04); } .iai-save-status { color: var(--iai-fg-subtle); } .iai-review-title { color: var(--iai-fg); } .iai-review-filename { color: var(--iai-fg-subtle); } .iai-field { background: var(--iai-surface-2); border: 1px solid var(--iai-border); border-radius: var(--iai-radius-sm); } .iai-field label { color: var(--iai-fg-subtle); } .iai-field input { background: var(--iai-surface); border: 1px solid var(--iai-border-muted); color: var(--iai-fg); border-radius: 6px; } .iai-field-total { background: rgba(79,70,229,0.05); border-color: rgba(79,70,229,0.2); } .iai-field-total input { color: var(--iai-accent); } .iai-line-item-row { background: var(--iai-surface-2); color: var(--iai-fg); border-radius: 6px; border: 1px solid var(--iai-border); } .iai-li-empty { color: var(--iai-fg-subtle); } .iai-review-error { background: #fee2e2; color: #991b1b; } .iai-icon-btn { color: var(--iai-fg-subtle); } .iai-icon-btn:hover { background: #fee2e2; color: #dc2626; } @media (max-width: 900px) { .iai-workspace { padding: 16px; } .iai-review { width: 100vw; max-width: 100vw; } } /* ============================================================ Login screen ============================================================ */ .iai-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 15% 20%, rgba(79,70,229,0.12), transparent 45%), radial-gradient(circle at 85% 80%, rgba(16,185,129,0.1), transparent 45%), var(--iai-bg); } .iai-login-card { width: 100%; max-width: 380px; background: var(--iai-surface); border: 1px solid var(--iai-border); border-radius: 18px; padding: 36px 32px; box-shadow: 0 20px 50px rgba(17,24,39,0.08); text-align: center; animation: iai-row-in 0.35s ease both; } .iai-login-logo { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px; background: linear-gradient(135deg, var(--iai-accent), #7c3aed); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; box-shadow: 0 8px 20px rgba(79,70,229,0.3); } .iai-login-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--iai-fg); } .iai-login-sub { margin: 0 0 24px; font-size: 13px; color: var(--iai-fg-muted); line-height: 1.5; } .iai-login-error { background: #fee2e2; color: #991b1b; font-size: 12px; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; text-align: left; } #iai-loginform { text-align: left; } #iai-loginform p { margin: 0 0 16px; } #iai-loginform label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--iai-fg-subtle); margin-bottom: 6px; } #iai-loginform input[type="text"], #iai-loginform input[type="password"] { width: 100%; height: 42px; padding: 0 12px; background: var(--iai-surface-2); border: 1px solid var(--iai-border-muted); border-radius: 8px; font-size: 14px; color: var(--iai-fg); font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #iai-loginform input[type="text"]:focus, #iai-loginform input[type="password"]:focus { outline: none; border-color: var(--iai-accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } #iai-loginform p.login-remember { margin-bottom: 20px; } #iai-loginform p.login-remember label { display: flex; align-items: center; gap: 8px; text-transform: none; font-size: 13px; font-weight: 500; color: var(--iai-fg-muted); margin: 0; cursor: pointer; } #iai-loginform input#rememberme { width: 15px; height: 15px; accent-color: var(--iai-accent); margin: 0; } #iai-loginform p.login-submit { margin-bottom: 0; } #iai-loginform #wp-submit { width: 100%; height: 44px; border: none; border-radius: 8px; background: var(--iai-fg); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } #iai-loginform #wp-submit:hover { background: #27272a; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); } #iai-loginform #wp-submit:active { transform: translateY(0) scale(0.98); } .iai-login-forgot { display: block; margin-top: 18px; font-size: 12px; font-weight: 600; color: var(--iai-accent); text-decoration: none; } .iai-login-forgot:hover { text-decoration: underline; }