/* ═══════════════════════════════════════════════════════════ KONTAB.AI — Design System v2.0 Verde Smarald · Professional Accounting ERP ═══════════════════════════════════════════════════════════ */ /* ── RESET ── */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* ── SCROLLBAR (modern thin) ── */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)} *{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent} /* ── TEXT SELECTION ── */ ::selection{background:var(--primary-dim);color:var(--primary-strong)} /* ── DESIGN TOKENS ── */ :root{ /* ── Colors: Primary (Verde Smarald) ── */ --primary: #059669; --primary-hover: #047857; --primary-dim: rgba(5, 150, 105, 0.08); --primary-ring: rgba(5, 150, 105, 0.2); --primary-strong: #065F46; /* ── Colors: Neutrals ── */ --bg: #F8F9FB; --surface: #FFFFFF; --surface-hover: #F3F4F6; --surface-muted: #F1F2F5; --border: #E5E7EB; --border-strong: #D1D5DB; --text: #111827; --text-secondary: #6B7280; --text-tertiary: #9CA3AF; --text-placeholder: #D1D5DB; /* ── Colors: Status ── */ --success: #059669; --success-dim: rgba(5, 150, 105, 0.08); --warning: #D97706; --warning-dim: rgba(217, 119, 6, 0.08); --danger: #DC2626; --danger-dim: rgba(220, 38, 38, 0.08); --info: #2563EB; --info-dim: rgba(37, 99, 235, 0.08); --purple: #7C3AED; --purple-dim: rgba(124, 58, 237, 0.08); /* ── Missing Variables (used in JS but not defined) ── */ --bg-secondary: #F1F2F5; --bg-alt: #F8F9FB; --surface-secondary: #F3F4F6; --brand: #059669; --text-muted: #6B7280; --border-primary: #E5E7EB; --border-secondary: #D1D5DB; /* ── Backward Compatibility Aliases ── */ --accent: var(--primary); --accent-dim: var(--primary-dim); --accent-hover: var(--primary-hover); --surface2: var(--surface-hover); --fg: var(--text); --muted: var(--text-secondary); --dim: var(--text-tertiary); --green: var(--success); --green-dim: var(--success-dim); --warn: var(--warning); --warn-dim: var(--warning-dim); --blue: var(--info); --blue-dim: var(--info-dim); --border2: var(--border-strong); /* ── Typography Scale (Plus Jakarta Sans — QuickBooks-inspired) ── */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 28px; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.25; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ── Spacing (8px grid) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Border Radius ── */ --radius-sm: 4px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── Shadows (subtle, professional) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03); --shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); --shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04); --shadow-xl: 0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); /* ── Layout ── */ --sb-w: 240px; --page-padding: var(--sp-8); /* ── Transitions ── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-normal: 200ms; --dur-slow: 300ms; } /* ── BASE ── */ body{ font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--font-normal); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{color:var(--primary);text-decoration:none;transition:color var(--dur-fast)} a:hover{color:var(--primary-hover)} .mono{font-feature-settings:'tnum';font-variant-numeric:tabular-nums} .hidden{display:none!important} /* ── Typography Utilities ── */ .text-muted{color:var(--text-secondary)} .text-dim{color:var(--text-tertiary)} .text-2xs{font-size:var(--text-2xs)} .text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)} .text-base{font-size:var(--text-base)} .text-md{font-size:var(--text-md)} .text-lg{font-size:var(--text-lg)} .text-xl{font-size:var(--text-xl)} .text-right{text-align:right} .fw-400{font-weight:var(--font-normal)} .fw-500{font-weight:var(--font-medium)} .fw-600{font-weight:var(--font-semibold)} .fw-700{font-weight:var(--font-bold)} .fw-800{font-weight:var(--font-extrabold)} /* ── Heading Hierarchy (consistent scale) ── */ .h1,.page-title{font-size:var(--text-2xl);font-weight:var(--font-bold);letter-spacing:-0.025em;line-height:var(--leading-tight);color:var(--text)} .h2,.section-title{font-size:var(--text-lg);font-weight:var(--font-semibold);letter-spacing:-0.015em;line-height:var(--leading-snug);color:var(--text)} .h3,.subsection-title{font-size:var(--text-md);font-weight:var(--font-semibold);letter-spacing:-0.01em;line-height:var(--leading-snug);color:var(--text)} .h4{font-size:var(--text-base);font-weight:var(--font-semibold);line-height:var(--leading-snug);color:var(--text)} .overline{font-size:var(--text-2xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary)} .caption{font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal)} .body-sm{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text)} .body-lg{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text)} /* ── Selection & Scrollbar ── */ ::selection{background:var(--primary);color:#fff} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)} ::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)} /* ── Focus (Accessibility) ── */ *:focus-visible{outline:2px solid var(--primary);outline-offset:2px} *:focus:not(:focus-visible){outline:none} /* ── Transitions on interactive elements ── */ a, button, .btn, .sb-item, input, select, textarea{ transition: all var(--dur-fast) var(--ease); } /* ═══════════════════════════════════════════════════════════ LOGIN ═══════════════════════════════════════════════════════════ */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#F8FAF9 0%,var(--bg) 100%)} .login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:48px;max-width:420px;width:100%;box-shadow:var(--shadow-lg)} .login-brand{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--primary);letter-spacing:-0.8px;text-align:center} .login-sub{font-size:var(--text-base);color:var(--text-secondary);text-align:center;margin-top:6px;margin-bottom:32px} .login-error{color:var(--danger);font-size:var(--text-base);text-align:center;margin-top:14px} .login-link{font-size:var(--text-sm);color:var(--primary);text-decoration:none;transition:color var(--dur-fast)} .login-link:hover{text-decoration:underline;color:var(--primary-hover)} .login-box .btn{width:100%;margin-top:var(--sp-2)} /* ═══════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════ */ .form-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-secondary);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px} .form-input{width:100%;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--text-base);outline:none;font-family:inherit;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)} .form-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-ring)} .form-input::placeholder{color:var(--text-placeholder)} .form-input-sm{width:100%;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-sm);outline:none;font-family:inherit;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);box-sizing:border-box} .form-input-sm:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-ring)} .form-textarea{resize:vertical} .form-input-readonly{background:var(--surface-muted);color:var(--text-secondary);font-variant-numeric:tabular-nums} .form-input-mono{font-variant-numeric:tabular-nums} .form-group{margin-bottom:var(--sp-5)} /* ═══════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); padding:8px 16px;border:1px solid transparent;border-radius:var(--radius); font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer; font-family:inherit;line-height:1.4;white-space:nowrap; transition:all var(--dur-fast) var(--ease); } .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .btn-accent,.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)} .btn-accent:hover:not(:disabled),.btn-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:var(--shadow-sm)} .btn-ghost,.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)} .btn-ghost:hover:not(:disabled),.btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)} .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-danger:hover:not(:disabled){background:#B91C1C;box-shadow:var(--shadow-sm)} .btn-outline-primary{background:transparent;color:var(--primary);border:1px solid var(--primary)} .btn-outline-primary:hover:not(:disabled){background:var(--primary-dim)} .btn-outline-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)} .btn-outline-danger:hover:not(:disabled){background:var(--danger-dim)} .btn-outline-warning{background:var(--warn-dim,rgba(245,158,11,.1));color:var(--warning);border:1px solid var(--warning)} .btn-outline-warning:hover:not(:disabled){background:rgba(245,158,11,.15)} .btn-sm{padding:6px 12px;font-size:var(--text-xs);border-radius:var(--radius-sm);width:auto} .btn-md{padding:10px 20px;font-size:var(--text-base);border-radius:var(--radius);width:auto} .btn-xs{padding:4px 8px;font-size:var(--text-2xs);border-radius:var(--radius-sm);width:auto} .btn-lg{padding:12px 24px;font-size:var(--text-base)} .btn-block{width:100%} .btn-icon{padding:5px 8px;width:auto;min-width:28px} .btn-row{display:flex;gap:12px;justify-content:flex-end} /* ═══════════════════════════════════════════════════════════ APP LAYOUT ═══════════════════════════════════════════════════════════ */ .app{display:flex;min-height:100vh} /* ── Sidebar ── */ .sb{ width:var(--sb-w);background:var(--surface); border-right:1px solid var(--border); display:flex;flex-direction:column; position:fixed;top:0;bottom:0;z-index:100; transition:transform .25s; } .sb-brand{padding:20px 20px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(5,150,105,.04) 0%,transparent 100%)} .sb-brand-name{font-size:22px;font-weight:var(--font-bold);color:var(--primary);letter-spacing:-0.8px;display:flex;align-items:center;gap:8px} .sb-brand-name::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;box-shadow:0 0 0 3px var(--primary-dim)} .sb-brand-sub{font-size:10px;color:var(--text-tertiary);margin-top:3px;letter-spacing:.5px;text-transform:uppercase;font-weight:var(--font-medium);padding-left:16px} .sb-nav{flex:1;padding:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent} .sb-nav::-webkit-scrollbar{width:4px} .sb-nav::-webkit-scrollbar-track{background:transparent} .sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .sb-nav::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)} .sb-section{ font-size:11px;font-weight:var(--font-bold);color:var(--text-secondary); text-transform:uppercase;letter-spacing:.6px; padding:16px 12px 8px;margin-top:4px; cursor:pointer;display:flex;align-items:center;justify-content:space-between; user-select:none;transition:color .15s ease; border-radius:var(--radius); border-bottom:1px solid var(--border); } .sb-section:hover{color:var(--text);background:rgba(0,0,0,.02)} .sb-section:first-child{padding-top:8px;margin-top:0} .sb-section .sb-chevron{ width:16px;height:16px;opacity:.5;transition:transform .2s ease,opacity .15s ease;flex-shrink:0; transform:rotate(90deg); } .sb-section:hover .sb-chevron{opacity:.8} .sb-section.collapsed .sb-chevron{transform:rotate(0deg)} .sb-group{ overflow:hidden; max-height:600px; transition:max-height .25s ease,opacity .2s ease; opacity:1; } .sb-group.collapsed{max-height:0;opacity:0;pointer-events:none} .sb-item{ display:flex;align-items:center;gap:10px; padding:7px 12px;border-radius:var(--radius); cursor:pointer;font-size:13px; color:var(--text-secondary); transition:all .15s ease; margin-bottom:0;position:relative;font-weight:var(--font-medium); } .sb-item:hover{background:var(--surface-hover);color:var(--text);padding-left:14px} .sb-item.active{background:var(--primary-dim);color:var(--primary);font-weight:var(--font-semibold)} .sb-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--primary);border-radius:0 3px 3px 0} .sb-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7} .sb-item:hover .sb-icon{opacity:.9} .sb-item.active .sb-icon{opacity:1} .sb-badge{margin-left:auto;font-size:10px;font-weight:var(--font-bold);padding:1px 6px;border-radius:var(--radius-full);background:var(--primary);color:#fff;min-width:18px;text-align:center;line-height:16px} .sb-footer{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-muted);display:flex;align-items:center;gap:10px} .sb-avatar{ width:32px;height:32px;border-radius:50%; background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:var(--font-bold); flex-shrink:0;letter-spacing:-.3px; } .sb-footer-info{flex:1;min-width:0} .sb-user{font-size:13px;color:var(--text);font-weight:var(--font-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-email{font-size:11px;color:var(--text-tertiary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-logout{ width:28px;height:28px;border-radius:var(--radius); display:flex;align-items:center;justify-content:center; color:var(--text-tertiary);cursor:pointer; transition:all .15s ease;flex-shrink:0; } .sb-logout:hover{background:rgba(239,68,68,.08);color:var(--danger)} /* ── Main content ── */ .main{margin-left:var(--sb-w);flex:1;min-height:100vh;overflow-x:hidden;max-width:calc(100vw - var(--sb-w))} .page{padding:var(--sp-8) var(--sp-10)} /* ═══════════════════════════════════════════════════════════ TABLES (unified) ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ TABLE STANDARD — Column width classes for consistent alignment Usage: Data 25.03.2026 ═══════════════════════════════════════════════════════════ */ .inv-tbl,.pt-tbl,.rp-tbl,.d-tbl,.bsp-table,.ma-table,.bi-tbl{ width:100%;border-collapse:collapse;font-size:var(--text-sm); background:var(--surface);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border); table-layout:fixed; } .inv-tbl th,.pt-tbl th,.rp-tbl th,.d-tbl th,.bsp-th,.bi-tbl th{ text-align:left;padding:10px 12px;color:var(--text-secondary); font-weight:var(--font-bold);border-bottom:2px solid var(--border); font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px; background:var(--bg);position:sticky;top:0;z-index:2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .inv-tbl td,.pt-tbl td,.rp-tbl td,.d-tbl td,.bi-tbl td{ padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle; overflow:hidden;text-overflow:ellipsis; } /* Standard column widths — use on both th AND td */ .col-check{width:36px;text-align:center} .col-type{width:100px} .col-nr{width:130px} .col-date{width:100px} .col-partner{width:auto;min-width:120px} /* stretches to fill */ .col-amount{width:110px;text-align:right} .col-status{width:90px;text-align:center} .col-actions{width:140px;text-align:center;white-space:nowrap} .col-actions-sm{width:90px;text-align:center;white-space:nowrap} .col-actions-lg{width:200px;text-align:center;white-space:nowrap} .col-badge{width:80px;text-align:center} .col-qty{width:80px;text-align:right} .col-um{width:60px;text-align:center} .col-pct{width:70px;text-align:right} .col-icon{width:40px;text-align:center} .col-id{width:90px} .col-desc{width:auto;min-width:150px} /* stretches */ .col-center{text-align:center} .col-right{text-align:right} .col-w50{width:50px} .col-w80{width:80px} .col-w100{width:100px} .col-w120{width:120px} .col-w150{width:150px} .inv-tbl tbody tr:hover,.pt-tbl tbody tr:hover,.rp-tbl tbody tr:hover,.bi-tbl tbody tr:hover,.d-tbl tbody tr:hover{background:var(--surface-hover)} .inv-tbl tr:last-child td,.pt-tbl tr:last-child td,.rp-tbl tr:last-child td,.d-tbl tr:last-child td,.bi-tbl tr:last-child td{border-bottom:none} .inv-tbl tbody tr:nth-child(even),.pt-tbl tbody tr:nth-child(even),.rp-tbl tbody tr:nth-child(even),.bi-tbl tbody tr:nth-child(even){background:rgba(0,0,0,.01)} /* Hover-reveal action buttons (Linear/Stripe UX pattern) */ tr.tbl-row-actions .tbl-actions-col .btn-icon{opacity:0;transition:opacity var(--dur-fast)} tr.tbl-row-actions:hover .tbl-actions-col .btn-icon{opacity:1} .rp-tbl tr.rp-total{background:var(--surface-muted);font-weight:var(--font-semibold)} /* D-table (dashboard) keeps compact sizing */ .d-tbl th{padding:8px 14px;font-size:var(--text-xs);letter-spacing:.3px} .d-tbl td{padding:8px 14px} .d-tbl .r{text-align:right} /* BSP table specifics */ .bsp-table{border-radius:0;box-shadow:none;border:none} .bsp-row{transition:background var(--dur-fast)} .bsp-row:hover{background:var(--primary-dim)} .bsp-row:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)} .bsp-cell{font-size:var(--text-sm);padding:10px 16px;color:var(--text)} .bsp-txn-count{background:var(--primary-dim);color:var(--primary);font-weight:var(--font-semibold);font-size:var(--text-xs);padding:2px 8px;border-radius:var(--radius-full)} .bsp-date{font-size:var(--text-xs);color:var(--text-secondary)} /* MA table specifics */ .ma-table thead{position:sticky;top:0;background:var(--surface);z-index:1} .ma-table th{padding:10px 12px;text-align:left;font-weight:var(--font-semibold);font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;border-bottom:2px solid var(--border)} .ma-table td{padding:10px 12px;border-bottom:1px solid var(--border)} .ma-table tbody tr{cursor:pointer;transition:background var(--dur-fast)} .ma-table tbody tr:hover{background:var(--surface-hover)} .ma-table tbody tr.ma-selected{background:var(--primary-dim);outline:1px solid var(--primary)} /* ═══════════════════════════════════════════════════════════ PILLS / BADGES ═══════════════════════════════════════════════════════════ */ .pill{font-size:var(--text-2xs);font-weight:var(--font-semibold);padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;line-height:1.3;border:1px solid transparent} .pill::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0} .pill-RECEIVED{background:var(--info-dim);color:var(--info);border-color:rgba(37,99,235,.15)}.pill-RECEIVED::before{background:var(--info)} .pill-NEEDS_REVIEW{background:var(--warning-dim);color:var(--warning);border-color:rgba(217,119,6,.15)}.pill-NEEDS_REVIEW::before{background:var(--warning)} .pill-APPROVED{background:var(--primary-dim);color:var(--primary);border-color:rgba(5,150,105,.15)}.pill-APPROVED::before{background:var(--primary)} .pill-POSTED{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-POSTED::before{background:var(--success)} .pill-REVERSED{background:var(--danger-dim);color:var(--danger);border-color:rgba(220,38,38,.15)}.pill-REVERSED::before{background:var(--danger)} .pill-DRAFT{background:var(--surface-hover);color:var(--text-secondary);border-color:var(--border)}.pill-DRAFT::before{background:var(--text-tertiary)} .pill-PAID{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-PAID::before{background:var(--success)} .pill-FINALIZED{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-FINALIZED::before{background:var(--success)} .pill-PARTIAL{background:var(--warning-dim);color:var(--warning);border-color:rgba(217,119,6,.15)}.pill-PARTIAL::before{background:var(--warning)} .pill-STORNATA{background:var(--danger-dim);color:var(--danger);border-color:rgba(220,38,38,.15)}.pill-STORNATA::before{background:var(--danger)} .pill-CANCELLED{background:var(--danger-dim);color:var(--danger);border-color:rgba(220,38,38,.15)}.pill-CANCELLED::before{background:var(--danger)} .pill-REJECTED{background:var(--danger-dim);color:var(--danger);border-color:rgba(220,38,38,.15)}.pill-REJECTED::before{background:var(--danger)} .pill-ACTIVE{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-ACTIVE::before{background:var(--success)} .pill-INACTIVE{background:var(--surface-hover);color:var(--text-secondary);border-color:var(--border)}.pill-INACTIVE::before{background:var(--text-tertiary)} .pill-SUBMITTED{background:var(--purple-dim);color:var(--purple);border-color:rgba(124,58,237,.15)}.pill-SUBMITTED::before{background:var(--purple)} .pill-UNMATCHED{background:var(--warning-dim);color:var(--warning);border-color:rgba(217,119,6,.15)}.pill-UNMATCHED::before{background:var(--warning)} .pill-SUGGESTED{background:var(--info-dim);color:var(--info);border-color:rgba(37,99,235,.15)}.pill-SUGGESTED::before{background:var(--info)} .pill-MATCHED{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-MATCHED::before{background:var(--success)} .pill-VENDOR{background:var(--warning-dim);color:var(--warning);border-color:rgba(217,119,6,.15)}.pill-VENDOR::before{background:var(--warning)} .pill-CUSTOMER{background:var(--info-dim);color:var(--info);border-color:rgba(37,99,235,.15)}.pill-CUSTOMER::before{background:var(--info)} .pill-BOTH{background:var(--purple-dim);color:var(--purple);border-color:rgba(124,58,237,.15)}.pill-BOTH::before{background:var(--purple)} .pill-blue{background:var(--info-dim);color:var(--info);border-color:rgba(37,99,235,.15)}.pill-blue::before{background:var(--info)} .pill-purple{background:var(--purple-dim);color:var(--purple);border-color:rgba(124,58,237,.15)}.pill-purple::before{background:var(--purple)} .pill-red{background:var(--danger-dim);color:var(--danger);border-color:rgba(220,38,38,.15)}.pill-red::before{background:var(--danger)} .pill-green{background:var(--success-dim);color:var(--success);border-color:rgba(5,150,105,.15)}.pill-green::before{background:var(--success)} .pill-gray{background:var(--surface-hover);color:var(--text-secondary);border-color:var(--border)}.pill-gray::before{background:var(--text-tertiary)} .pill-yellow{background:var(--warning-dim);color:var(--warning);border-color:rgba(217,119,6,.15)}.pill-yellow::before{background:var(--warning)} /* ═══════════════════════════════════════════════════════════ FILTER PILLS (unified across all pages) ═══════════════════════════════════════════════════════════ */ .inv-fbtn,.rc-filter-btn,.rp-tab{ padding:7px 16px;border:1px solid var(--border);border-radius:var(--radius-full); background:var(--surface);color:var(--text-secondary);font-size:var(--text-sm); cursor:pointer;font-family:inherit;transition:all var(--dur-normal) var(--ease);font-weight:var(--font-medium); display:inline-flex;align-items:center;gap:6px; } .inv-fbtn:hover,.rc-filter-btn:hover,.rp-tab:hover{ border-color:var(--border-strong);color:var(--text);background:var(--surface-hover); } .inv-fbtn.active,.rc-filter-btn.active,.rp-tab.active{ border-color:var(--primary);color:var(--primary);background:var(--primary-dim); font-weight:var(--font-semibold);box-shadow:0 1px 3px rgba(5,150,105,.12); } /* Recon filter overrides for specific statuses */ .rc-filter-btn.active[data-s="SUGGESTED"]{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)} .rc-filter-btn.active[data-s="UNMATCHED"]{border-color:var(--warning);color:var(--warning);background:var(--warning-dim)} .rc-filter-btn.active[data-s="MATCHED_ALL"]{border-color:var(--primary);color:var(--primary);background:var(--primary-dim)} /* ═══════════════════════════════════════════════════════════ MODALS ═══════════════════════════════════════════════════════════ */ @keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes modalOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}} .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:999;display:flex;align-items:center;justify-content:center} .modal-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--sp-6);min-width:400px;max-width:580px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:modalIn var(--dur-slow) var(--ease)} .modal-box h3{margin-bottom:14px;font-size:var(--text-md);color:var(--text);font-weight:var(--font-semibold)} .confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center} .confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--sp-7);max-width:420px;text-align:center;box-shadow:var(--shadow-xl);animation:modalIn var(--dur-slow) var(--ease)} .confirm-box p{margin-bottom:22px;font-size:var(--text-md);color:var(--text);line-height:1.6} .confirm-btns{display:flex;gap:12px;justify-content:center} /* ═══════════════════════════════════════════════════════════ SLIDE-OVER PANELS (Linear/Stripe style) ═══════════════════════════════════════════════════════════ */ @keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} @keyframes slideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} @keyframes overlayFadeIn{from{opacity:0}to{opacity:1}} .slide-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999;animation:overlayFadeIn var(--dur-fast) var(--ease)} .slide-panel{position:fixed;top:0;right:0;bottom:0;width:580px;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 30px rgba(0,0,0,.08),0 0 60px rgba(0,0,0,.05);z-index:1000;display:flex;flex-direction:column;animation:slideIn var(--dur-slow) var(--ease)} .slide-panel[data-size="sm"]{width:480px} .slide-panel[data-size="md"]{width:580px} .slide-panel[data-size="lg"]{width:720px} .slide-panel[data-size="xl"]{width:900px} .slide-panel[data-size="full"]{width:min(1100px,85vw)} .slide-panel-header{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--surface)} .slide-panel-header h2{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text);letter-spacing:-0.3px;margin:0} .slide-panel-body{padding:var(--sp-6);overflow-y:auto;flex:1} .slide-panel-footer{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--surface)} .btn-icon{background:none;border:none;color:var(--text-secondary);cursor:pointer;width:32px;height:32px;border-radius:50%;transition:all var(--dur-fast) var(--ease);display:inline-flex;align-items:center;justify-content:center} .btn-icon:hover{background:var(--surface-hover);color:var(--text)} .btn-icon:active{transform:scale(.92)} /* Form section dividers inside slide panels */ .form-section-title{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border);margin-top:var(--sp-5)} .form-section-title:first-child{margin-top:0} /* Form layout utilities */ .form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} .form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)} .form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--sp-3)} .form-grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-3)} .form-grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-3)} .form-grid-2-1-1{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-3)} .form-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-4)} .form-group{margin-bottom:var(--sp-4)} /* Responsive: panels go full-width on mobile */ @media(max-width:640px){.slide-panel,.slide-panel[data-size="sm"],.slide-panel[data-size="md"],.slide-panel[data-size="lg"],.slide-panel[data-size="xl"],.slide-panel[data-size="full"]{width:100vw}} /* ═══════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════ */ #toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{pointer-events:auto;padding:14px 22px;border-radius:var(--radius-lg);font-size:var(--text-base);font-family:inherit;color:var(--text);animation:toastIn .3s ease;max-width:420px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);background:var(--surface)} .toast-success{border-left:4px solid var(--success)} .toast-error{border-left:4px solid var(--danger)} .toast-warn{border-left:4px solid var(--warning)} .toast-info{border-left:4px solid var(--info)} @keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}} /* ═══════════════════════════════════════════════════════════ DASHBOARD ═══════════════════════════════════════════════════════════ */ .d-top{display:flex;gap:20px;margin-bottom:24px} .d-ring-card{flex:2;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 28px;display:flex;align-items:center;gap:28px;box-shadow:var(--shadow-sm)} .d-ring-right{flex:1} .d-ring-title{font-size:var(--text-lg);font-weight:var(--font-semibold);margin-bottom:14px;color:var(--text)} .d-stats{flex:1;display:flex;flex-direction:column;gap:10px} .d-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-xs);border-top:3px solid var(--border-strong);transition:all var(--dur-normal) var(--ease);cursor:default} .d-stat:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)} .d-stat[data-color="green"]{border-top-color:var(--success)} .d-stat[data-color="blue"]{border-top-color:var(--info)} .d-stat[data-color="red"]{border-top-color:var(--danger)} .d-stat[data-color="warning"]{border-top-color:var(--warning)} .d-stat[data-color="purple"]{border-top-color:var(--purple)} .d-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-tertiary);font-weight:var(--font-semibold)} .d-stat-val{font-size:var(--text-2xl);font-weight:var(--font-bold);margin:6px 0 4px;letter-spacing:-0.5px} .d-stat-sub{font-size:var(--text-sm);color:var(--text-secondary)} .d-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .d-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-normal) var(--ease)} .d-panel:hover{box-shadow:var(--shadow-sm)} .d-panel-head{padding:16px 20px;border-bottom:1px solid var(--border);font-size:var(--text-base);font-weight:var(--font-semibold);display:flex;align-items:center;gap:8px} .d-prio{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--dur-fast)} .d-prio:hover{background:var(--surface-hover)} .d-prio-icon{width:20px;text-align:center} .d-prio-label{flex:1;font-size:var(--text-base)} .d-prio-badge{font-size:var(--text-sm);font-weight:var(--font-semibold);padding:2px 10px;border-radius:var(--radius)} .d-act{display:flex;gap:10px;padding:10px 18px;border-bottom:1px solid var(--border);align-items:flex-start} .d-act-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);margin-top:5px;flex-shrink:0} .d-act-text{font-size:var(--text-base)} .d-act-time{font-size:10px;color:var(--text-tertiary);margin-top:2px} .d-empty{padding:20px;text-align:center;color:var(--text-tertiary);font-size:var(--text-base)} .prog-item{margin-bottom:10px} .prog-head{display:flex;justify-content:space-between;margin-bottom:5px} .prog-label{font-size:var(--text-base)} .prog-detail{font-size:var(--text-sm);color:var(--text-secondary)} .prog-track{height:6px;background:var(--border);border-radius:3px} .prog-fill{height:100%;border-radius:3px;transition:width 1s ease} .d-footer{text-align:center;padding:var(--sp-7);font-size:var(--text-sm);color:var(--text-tertiary);margin-top:24px} /* ═══════════════════════════════════════════════════════════ BANK IMPORT ═══════════════════════════════════════════════════════════ */ .bi-wrap{max-width:960px;margin:0 auto} .bs-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:20px} .bs-tab{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-base);color:var(--text);transition:all var(--dur-normal);text-align:left;box-shadow:var(--shadow-xs)} .bs-tab:hover{border-color:var(--primary);background:var(--primary-dim)} .bs-tab-active{border-color:var(--primary);background:var(--primary-dim);box-shadow:0 0 0 1px var(--primary)} .bs-tab-all{grid-column:1/-1} .bs-tab-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .bs-tab-bank{font-weight:var(--font-semibold);font-size:var(--text-base)} .bs-tab-iban{font-size:var(--text-xs);color:var(--text-secondary);word-break:break-all} .bs-tab-badge{background:var(--primary);color:#fff;font-size:10px;padding:1px 7px;border-radius:var(--radius-full);font-weight:var(--font-semibold);flex-shrink:0} .bs-tab-stats{display:flex;gap:12px;font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px} .bs-tab-stats .amt-pos{color:var(--success);font-weight:var(--font-medium)} .bs-tab-stats .amt-neg{color:var(--danger);font-weight:var(--font-medium)} /* Bank statement panels */ .bsp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow-xs)} .bsp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--bg) 0%,var(--surface) 100%)} .bsp-header-left{display:flex;align-items:center;gap:12px} .bsp-bank-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border)} .bsp-bank-info{display:flex;flex-direction:column;gap:2px} .bsp-bank-name{font-weight:var(--font-bold);font-size:var(--text-md);color:var(--text)} .bsp-iban{font-size:var(--text-xs);color:var(--text-secondary);letter-spacing:0.3px} .bsp-delete-btn{background:none;border:1px solid transparent;border-radius:var(--radius);padding:6px 8px;cursor:pointer;font-size:14px;opacity:0.3;transition:all var(--dur-normal)} .bsp-delete-btn:hover{opacity:1;background:var(--danger-dim);border-color:rgba(220,38,38,.3)} .bsp-summary{display:flex;align-items:center;gap:0;padding:12px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap} .bsp-summary-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 16px;min-width:80px} .bsp-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary);font-weight:var(--font-medium)} .bsp-summary-val{font-size:var(--text-base);font-weight:var(--font-semibold)} .bsp-summary-sep{width:1px;height:28px;background:var(--border);flex-shrink:0} /* Bank import steps */ .bi-steps{display:flex;gap:6px;margin-bottom:32px} .bi-step{flex:1;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;font-size:var(--text-base);color:var(--text-secondary);transition:all var(--dur-normal);box-shadow:var(--shadow-xs)} .bi-step.active{border-color:var(--primary);color:var(--primary);background:var(--primary-dim)} .bi-step.done{border-color:var(--success);color:var(--success);opacity:.7} .bi-step-num{font-weight:var(--font-semibold);font-size:var(--text-lg);display:block;margin-bottom:2px} .bi-drop{border:2px dashed var(--border-strong);border-radius:var(--radius-xl);padding:56px;text-align:center;cursor:pointer;transition:all var(--dur-normal);margin-bottom:28px} .bi-drop:hover,.bi-drop.dragover{border-color:var(--primary);background:var(--primary-dim)} .bi-drop-icon{font-size:40px;margin-bottom:10px;opacity:.6} .bi-drop-text{font-size:var(--text-md);margin-bottom:6px;font-weight:var(--font-medium)} .bi-drop-sub{font-size:var(--text-base);color:var(--text-secondary)} .bi-config{display:flex;gap:16px;margin-bottom:28px} .bi-config-item{flex:1;min-width:200px} .bi-select{width:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--text-base);outline:none;font-family:inherit} .bi-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .bi-paste{width:100%;height:120px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;color:var(--text);font-family:ui-monospace,SFMono-Regular,monospace;font-size:var(--text-base);resize:vertical;outline:none;margin-bottom:28px} .bi-paste:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .bi-preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px;box-shadow:var(--shadow-xs)} .bi-preview-head{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-base);font-weight:var(--font-semibold)} .bi-preview-count{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--font-normal)} .bi-result{background:var(--surface);border:1px solid var(--success);border-radius:var(--radius-lg);padding:36px;text-align:center;margin-bottom:28px;box-shadow:var(--shadow-xs)} .bi-result-icon{font-size:44px;margin-bottom:10px} .bi-result-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--success);margin-bottom:6px} .bi-result-sub{font-size:var(--text-base);color:var(--text-secondary)} .bi-result-stats{display:flex;gap:36px;justify-content:center;margin-top:24px} .bi-result-stat{text-align:center} .bi-result-stat-val{font-size:var(--text-2xl);font-weight:var(--font-semibold)} .bi-result-stat-lbl{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;font-weight:var(--font-medium)} .amt-pos{color:var(--success)} .amt-neg{color:var(--danger)} .error-card{background:var(--danger-dim);border:1px solid var(--danger);border-radius:var(--radius-lg);padding:20px;margin-bottom:24px} .error-card h4{color:var(--danger);margin-bottom:8px} /* ═══════════════════════════════════════════════════════════ INVOICES ═══════════════════════════════════════════════════════════ */ /* inv-head removed — unified to .je-header (styles.css:686) */ .inv-filters{display:flex;gap:8px;margin-bottom:var(--sp-6);flex-wrap:wrap;align-items:center} /* ═══════════════════════════════════════════════════════════ RECONCILIATION ═══════════════════════════════════════════════════════════ */ .rc-summary{display:flex;gap:16px;margin-bottom:28px} .rc-scard{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px;text-align:center;box-shadow:var(--shadow-xs);border-top:3px solid var(--border-strong);transition:all var(--dur-normal) var(--ease);cursor:default} .rc-scard:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)} .rc-scard[data-color="green"]{border-top-color:var(--success)} .rc-scard[data-color="blue"]{border-top-color:var(--info)} .rc-scard[data-color="red"]{border-top-color:var(--danger)} .rc-scard[data-color="warning"]{border-top-color:var(--warning)} .rc-scard-val{font-size:var(--text-xl);font-weight:var(--font-bold);margin:6px 0 4px;letter-spacing:-0.3px} .rc-scard-lbl{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-tertiary);font-weight:var(--font-semibold)} .rc-filters{display:flex;gap:8px;margin-bottom:24px;align-items:center} /* Recon table layout */ .rc-table-header{display:grid;grid-template-columns:1fr 130px 1fr 90px;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:12px 0;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-weight:var(--font-semibold)} .rc-table-header>div{padding:0 16px;display:flex;align-items:center} .rc-table-header>div:nth-child(2){justify-content:center;border-left:1px solid var(--border);border-right:1px solid var(--border)} .rc-table-header>div:nth-child(4){justify-content:center} .rc-col-header-icon{margin-right:6px;font-size:14px} .rc-rows{display:flex;flex-direction:column} .rc-row{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr) 90px;gap:0;background:var(--surface);border:1px solid var(--border);border-top:none;transition:all var(--dur-normal);cursor:pointer;overflow:hidden} .rc-row:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)} .rc-row:hover{background:var(--surface-hover);z-index:1} .rc-row.rc-row-active{border-color:var(--primary);background:var(--primary-dim);z-index:2} .rc-row.rc-row-matched{opacity:.55} .rc-row.rc-row-matched:hover{opacity:1} /* Shared cell layout */ .rc-cell{padding:6px 12px;display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm);overflow:hidden;min-width:0} .rc-cell-row{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden} .rc-cell-lbl{color:var(--text-tertiary);font-size:10px;min-width:52px;flex-shrink:0;text-transform:uppercase;letter-spacing:.3px;font-weight:var(--font-medium)} .rc-cell-val{color:var(--text);font-weight:var(--font-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;cursor:default} .rc-cell-val.mono{font-feature-settings:'tnum';font-variant-numeric:tabular-nums} .rc-cell-val.accent{color:var(--primary);font-weight:var(--font-semibold)} .rc-cell-val.dim{color:var(--text-tertiary);font-weight:var(--font-normal);font-size:var(--text-xs)} .rc-cell-val.small{font-size:var(--text-xs)} .rc-cell-desc{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:2px;cursor:default;max-width:100%} .rc-cell-empty{color:var(--text-tertiary);font-size:var(--text-sm);font-style:italic;padding:8px 0} .rc-revert-btn{background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 7px;font-size:10px;color:var(--text-secondary);cursor:pointer;opacity:0.7;transition:all var(--dur-normal);margin-left:auto;flex-shrink:0;white-space:nowrap} .rc-revert-btn:hover{opacity:1;color:var(--danger);border-color:var(--danger);background:var(--danger-dim)} /* Center amounts column */ .rc-cell-amounts{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--border);border-right:1px solid var(--border);padding:6px 10px;gap:2px;min-width:130px} .rc-amt-row{display:flex;align-items:center;gap:6px;width:100%} .rc-amt-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-tertiary);width:30px;text-align:right;font-weight:var(--font-medium)} .rc-amt-value{font-feature-settings:'tnum';font-variant-numeric:tabular-nums;font-size:var(--text-base);font-weight:var(--font-medium);flex:1;text-align:right} .rc-amt-divider{width:100%;border-top:1px dashed var(--border-strong);margin:2px 0} .rc-amt-diff{font-size:var(--text-xs);text-align:center;font-weight:var(--font-semibold)} .rc-amt-match-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--font-semibold);margin:0 auto} /* Actions column */ .rc-cell-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 8px;gap:5px} .rc-act-btn{padding:4px 10px;border:none;border-radius:6px;font-size:10px;font-weight:var(--font-semibold);cursor:pointer;font-family:inherit;transition:all var(--dur-fast)} .rc-act-confirm{background:var(--primary);color:#fff} .rc-act-confirm:hover{background:var(--primary-hover);transform:scale(1.03)} .rc-act-view{background:var(--surface-hover);color:var(--text);border:1px solid var(--border)} .rc-act-view:hover{border-color:var(--primary);color:var(--primary)} .rc-act-done{color:var(--success);font-size:var(--text-sm);font-weight:var(--font-semibold)} .rc-act-manual{background:var(--info);color:#fff;margin-top:4px} .rc-act-manual:hover{filter:brightness(1.1);transform:scale(1.03)} /* Manual allocation modal */ .ma-modal .modal-box{min-width:520px;max-width:720px} .ma-header{background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px} .ma-header-left{display:flex;flex-direction:column;gap:2px} .ma-header-amt{font-feature-settings:'tnum';font-variant-numeric:tabular-nums;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--primary)} .ma-header-sub{font-size:var(--text-sm);color:var(--text-tertiary)} .ma-search-row{display:flex;gap:8px;margin-bottom:12px} .ma-search-row .search-input{flex:1} .ma-filters{display:flex;gap:14px;margin-bottom:14px;font-size:var(--text-sm);color:var(--text-tertiary)} .ma-filters label{display:flex;align-items:center;gap:5px;cursor:pointer} .ma-results{max-height:380px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius)} .ma-row-exact{background:rgba(5,150,105,.05)} .ma-row-exact td:nth-child(4){color:var(--success)} .ma-empty{text-align:center;color:var(--text-tertiary);padding:36px 20px;font-size:var(--text-base)} .ma-footer{display:flex;gap:8px;margin-top:16px;justify-content:flex-end} .ma-tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:0} .ma-tab{padding:10px 18px;border:none;background:none;color:var(--text-tertiary);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all var(--dur-normal)} .ma-tab:hover{color:var(--text)} .ma-tab.active{color:var(--primary);border-bottom-color:var(--primary)} .ma-auto-suggest{margin-bottom:14px;display:flex;flex-direction:column;gap:8px} .ma-auto-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--dur-normal)} .ma-auto-card:hover{border-color:var(--primary);background:var(--primary-dim)} .ma-auto-card.ma-auto-selected{border-color:var(--primary);background:var(--primary-dim);outline:2px solid var(--primary)} .ma-auto-icon{font-size:20px;flex-shrink:0} .ma-auto-info{flex:1;min-width:0} .ma-auto-label{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text)} .ma-auto-detail{font-size:var(--text-sm);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;color:var(--primary);margin-top:2px} .ma-auto-reason{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:2px} .ma-auto-conf{font-size:var(--text-md);font-weight:var(--font-semibold);flex-shrink:0} /* AI Verification badges */ .rc-ai-badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:var(--radius-full);margin-top:4px;font-weight:var(--font-medium)} .rc-ai-confirmed{background:var(--success-dim);color:var(--primary-strong)} .rc-ai-overridden{background:var(--warning-dim);color:#92400E} .rc-tier-badge{display:inline-block;font-size:9px;padding:1px 6px;border-radius:var(--radius);font-weight:var(--font-semibold);letter-spacing:.3px} .rc-tier-high{background:var(--success-dim);color:var(--primary-strong)} .rc-tier-ai{background:var(--purple-dim);color:#5B21B6} .rc-tier-med{background:var(--warning-dim);color:#92400E} /* Expanded detail panel */ .rc-detail{grid-column:1/-1;display:none;border-top:1px solid var(--border)} .rc-row.rc-row-active .rc-detail{display:block} .rc-detail-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface-hover)} .rc-detail-side{padding:18px 22px} .rc-detail-side:first-child{border-right:1px solid var(--border)} .rc-detail-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);font-weight:var(--font-semibold);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)} .rc-detail-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--text-base)} .rc-detail-lbl{color:var(--text-secondary)} .rc-detail-val{color:var(--text);font-weight:var(--font-medium)} .rc-detail-val.mono{font-feature-settings:'tnum';font-variant-numeric:tabular-nums} .rc-detail-amt-big{font-size:var(--text-xl);font-weight:var(--font-medium);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)} .rc-detail-diff{display:flex;align-items:center;gap:8px;padding:12px 22px;background:var(--surface);border-top:1px solid var(--border);font-size:var(--text-base)} .rc-detail-diff-badge{padding:4px 12px;border-radius:var(--radius);font-weight:var(--font-semibold);font-size:var(--text-sm)} .rc-no-match{padding:18px;text-align:center;color:var(--text-tertiary);font-size:var(--text-base);background:var(--surface-hover);border-radius:var(--radius-md);border:1px dashed var(--border-strong)} .rc-match-loading{padding:14px;text-align:center;color:var(--text-secondary);font-size:var(--text-base)} /* Category dashboard */ .rc-dash-stats{display:flex;align-items:stretch;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs);overflow:hidden} .rc-dash-stats-half{flex:1;padding:16px 20px} .rc-dash-stats-half+.rc-dash-stats-half{border-left:1px solid var(--border)} .rc-dash-stats-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text);margin-bottom:6px} .rc-dash-stats-amt{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:8px;font-feature-settings:'tnum'} .rc-dash-stats-row{display:flex;gap:16px;font-size:var(--text-xs);color:var(--text-secondary)} .rc-dash-stats-metric{display:flex;flex-direction:column;gap:1px} .rc-dash-stats-metric-val{font-size:var(--text-md);font-weight:var(--font-semibold);letter-spacing:-0.3px;font-feature-settings:'tnum'} .rc-dash-stats-metric-lbl{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary)} .rc-dash-stats-sections{display:flex;align-items:stretch;gap:0} .rc-dash-section{flex:1} .rc-dash-section-hdr{display:flex;align-items:baseline;gap:6px;margin-bottom:4px} .rc-dash-section-pct{font-size:var(--text-lg);font-weight:var(--font-bold);letter-spacing:-0.3px;font-feature-settings:'tnum'} .rc-dash-section-lbl{font-size:9px;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-secondary);font-weight:var(--font-semibold)} .rc-dash-section-detail{display:flex;gap:8px;font-size:var(--text-xs);color:var(--text-secondary);font-feature-settings:'tnum'} .rc-dash-section-detail span{white-space:nowrap} .rc-dash-sep{color:var(--border);font-weight:300} .rc-dash-divider{width:1px;background:var(--border);margin:0 12px;align-self:stretch} .rc-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .rc-dash-col{display:flex;flex-direction:column;gap:6px} .rc-dash-col-title{font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:0.8px;color:var(--text-secondary);padding:0 2px;margin-bottom:2px} .rc-cat-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--dur-normal);user-select:none} .rc-cat-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(5,150,105,.08)} .rc-cat-card.dimmed{opacity:.3;cursor:default} .rc-cat-card.dimmed:hover{border-color:var(--border);box-shadow:none} .rc-cat-card-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center} .rc-cat-card-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .rc-cat-card-label{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rc-cat-card-sub{font-size:var(--text-xs);color:var(--text-secondary);display:flex;gap:8px;font-feature-settings:'tnum'} .rc-cat-bar{height:3px;background:var(--border);border-radius:2px;margin-top:3px;overflow:hidden} .rc-cat-bar-fill{height:100%;background:var(--primary);border-radius:2px;transition:width .3s} .rc-cat-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0} .rc-cat-card-amount{font-size:var(--text-base);font-weight:var(--font-semibold);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;letter-spacing:-0.3px} .rc-cat-card-pct{font-size:10px;color:var(--text-secondary);font-weight:var(--font-medium)} .rc-cat-card-arrow{color:var(--text-tertiary);font-size:var(--text-base);transition:transform var(--dur-normal)} .rc-cat-card:hover .rc-cat-card-arrow{color:var(--primary);transform:translateX(3px)} .rc-action-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px} .rc-action-group{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1} .rc-action-group-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:var(--font-semibold)} .rc-action-filters{display:flex;gap:4px;flex-wrap:wrap;justify-content:center} /* Category list header */ .rc-cat-header{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-bottom:0;box-shadow:var(--shadow-xs)} .rc-cat-back{padding:7px 16px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-secondary);font-size:var(--text-base);cursor:pointer;transition:all var(--dur-fast);font-family:inherit;white-space:nowrap;font-weight:var(--font-medium)} .rc-cat-back:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-dim)} .rc-cat-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text);flex:1;display:flex;align-items:center;gap:10px} .rc-cat-stats{font-size:var(--text-base);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;color:var(--text-secondary);display:flex;gap:18px} .rc-cat-selall{display:flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;user-select:none;font-weight:var(--font-medium)} .rc-cat-selall input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer} /* Pagination */ .rc-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);font-size:var(--text-base);color:var(--text-secondary)} .rc-pgn-btn{padding:7px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-secondary);font-size:var(--text-base);cursor:pointer;transition:all var(--dur-fast);font-family:inherit;font-weight:var(--font-medium)} .rc-pgn-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--primary-dim)} .rc-pgn-btn:disabled{opacity:.35;cursor:not-allowed} /* Batch selection */ .rc-row.selectable{position:relative;padding-left:40px} .rc-row-cb{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;cursor:pointer;accent-color:var(--primary);z-index:2} .rc-row.batch-sel{background:var(--primary-dim) !important;border-left:3px solid var(--primary)} .batch-bar{position:sticky;bottom:0;left:0;right:0;background:var(--surface);border-top:2px solid var(--primary);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:40;transform:translateY(100%);opacity:0;transition:transform .25s ease-out,opacity .25s ease-out;pointer-events:none;box-shadow:0 -4px 12px rgba(0,0,0,.06)} .batch-bar.active{transform:translateY(0);opacity:1;pointer-events:all} .batch-bar-summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1} .batch-badge{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text)} .batch-badge-n{font-weight:var(--font-semibold);color:var(--primary);min-width:16px;text-align:center} .batch-bar-actions{display:flex;gap:8px;flex-shrink:0} /* ═══════════════════════════════════════════════════════════ PARTNERS ═══════════════════════════════════════════════════════════ */ .pt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-6)} .pt-head h2{font-size:var(--text-2xl);font-weight:var(--font-bold);letter-spacing:-0.5px;color:var(--text)} /* ═══════════════════════════════════════════════════════════ REPORTS ═══════════════════════════════════════════════════════════ */ .rp-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap} .rp-summary{display:flex;gap:18px;margin-bottom:28px} .rp-scard{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;text-align:center;box-shadow:var(--shadow-xs);border-top:3px solid var(--border-strong);transition:all var(--dur-normal) var(--ease);cursor:default} .rp-scard:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)} .rp-scard[data-color="green"]{border-top-color:var(--success)} .rp-scard[data-color="blue"]{border-top-color:var(--info)} .rp-scard[data-color="red"]{border-top-color:var(--danger)} .rp-scard[data-color="warning"]{border-top-color:var(--warning)} .rp-scard-val{font-size:var(--text-xl);font-weight:var(--font-bold);margin:6px 0 4px;letter-spacing:-0.2px} .rp-scard-lbl{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.6px;color:var(--text-tertiary);font-weight:var(--font-semibold)} /* ═══════════════════════════════════════════════════════════ SEARCH BAR ═══════════════════════════════════════════════════════════ */ .search-bar{display:flex;gap:10px;margin-bottom:20px;align-items:center} .search-input{flex:1;padding:10px 14px 10px 38px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:var(--text-base);transition:all var(--dur-normal) var(--ease)} .search-input::placeholder{color:var(--text-placeholder)} .search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-ring)} .search-wrap{position:relative;flex:1} .search-wrap::before{content:'';position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;opacity:.4;pointer-events:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat} .search-wrap .search-input{width:100%} /* ═══════════════════════════════════════════════════════════ JOURNAL ENTRIES ═══════════════════════════════════════════════════════════ */ .je-page{padding:var(--sp-6) var(--sp-8)} .je-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-6)} .je-title,.je-header h2{font-size:var(--text-2xl);font-weight:var(--font-bold);letter-spacing:-0.5px;color:var(--text)} .je-count{font-size:var(--text-sm);color:var(--text-tertiary);font-weight:var(--font-medium)} .je-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .je-summary-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px;text-align:center;box-shadow:var(--shadow-xs);border-top:3px solid var(--border-strong);transition:all var(--dur-normal) var(--ease);cursor:default} .je-summary-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)} .je-summary-card[data-color="green"]{border-top-color:var(--success)} .je-summary-card[data-color="blue"]{border-top-color:var(--info)} .je-summary-card[data-color="red"]{border-top-color:var(--danger)} .je-summary-card[data-color="warning"]{border-top-color:var(--warning)} .je-summary-val{font-size:var(--text-xl);font-weight:var(--font-bold);letter-spacing:-0.3px;font-feature-settings:'tnum';font-variant-numeric:tabular-nums;margin:6px 0 4px} .je-summary-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-tertiary);font-weight:var(--font-semibold)} .je-list{display:flex;flex-direction:column;gap:10px} .je-entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);cursor:pointer;transition:all var(--dur-normal)} .je-entry:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)} .je-row:hover{background:var(--surface-hover)} .je-entry-top{display:flex;align-items:center;gap:12px;padding:12px 16px} .je-entry-date{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--font-medium);min-width:78px;font-feature-settings:'tnum';font-variant-numeric:tabular-nums} .je-entry-memo{flex:1;font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .je-entry-amount{font-size:var(--text-base);font-weight:var(--font-medium);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;min-width:90px;text-align:right} .je-entry-meta{display:flex;gap:8px;align-items:center;margin-left:auto;flex-shrink:0} .je-source-pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:var(--font-semibold)} .je-entry-lines{border-top:1px solid var(--border);padding:8px 16px;background:var(--surface-muted)} .je-line{display:flex;align-items:center;gap:10px;padding:3px 0;font-size:var(--text-sm)} .je-line-formula{display:flex;align-items:center;gap:5px;flex:1} .je-line-account{font-weight:var(--font-medium);font-size:var(--text-sm);padding:2px 7px;border-radius:var(--radius-sm);font-feature-settings:'tnum';font-variant-numeric:tabular-nums} .je-line-db{color:var(--primary);background:var(--primary-dim)} .je-line-cr{color:var(--warning);background:var(--warning-dim)} .je-line-eq{color:var(--text-tertiary);font-weight:var(--font-normal);font-size:var(--text-xs)} .je-line-amount{font-weight:var(--font-medium);font-feature-settings:'tnum';font-variant-numeric:tabular-nums;text-align:right;min-width:80px;font-size:var(--text-sm)} .je-line-partner{color:var(--text-secondary);font-size:var(--text-xs);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .je-entry-footer{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-secondary)} .je-entry-footer-item{display:flex;align-items:center;gap:4px} .je-line-neg{color:var(--danger) !important} /* ═══════════════════════════════════════════════════════════ BANK ACCOUNTS ═══════════════════════════════════════════════════════════ */ .ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:20px} .ba-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:all var(--dur-normal);position:relative} .ba-card:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(5,150,105,.08);transform:translateY(-1px)} .ba-card-inactive{opacity:.55} .ba-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px} .ba-card-bank{display:flex;align-items:center;gap:12px} .ba-card-icon{font-size:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-radius:var(--radius)} .ba-card-bank-name{font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--text)} .ba-card-currency{font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--font-medium);margin-top:2px} .ba-card-actions{display:flex;align-items:center;gap:6px} .ba-card-status{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--success);background:var(--success-dim);padding:3px 8px;border-radius:var(--radius-sm)} .ba-card-inactive .ba-card-status{color:var(--text-secondary);background:var(--bg)} .ba-card-iban{font-family:ui-monospace,SFMono-Regular,monospace;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text);letter-spacing:.5px;padding:10px 14px;background:var(--bg);border-radius:var(--radius);margin-bottom:12px} .ba-card-gl{display:flex;align-items:center;gap:8px} .ba-card-gl-label{font-size:10px;color:var(--text-secondary);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.5px} .ba-card-gl-val{font-family:ui-monospace,SFMono-Regular,monospace;font-size:var(--text-xs);color:var(--primary);font-weight:var(--font-medium)} /* ═══════════════════════════════════════════════════════════ BANK CARDS ═══════════════════════════════════════════════════════════ */ .bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-bottom:20px} .bc-card{background:linear-gradient(135deg,#1a1f3a 0%,#2d3561 50%,#1a2744 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px 22px 18px;cursor:pointer;transition:all var(--dur-normal);position:relative;color:#fff;min-height:180px;overflow:hidden} .bc-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)} .bc-card-inactive{opacity:.55;background:linear-gradient(135deg,#2a2a2a 0%,#3a3a3a 100%)} .bc-card-chip{width:36px;height:28px;background:linear-gradient(135deg,#d4a853,#c4963e);border-radius:5px;margin-bottom:16px;position:relative} .bc-card-chip::after{content:'';position:absolute;top:6px;left:4px;right:4px;bottom:6px;border:1px solid rgba(0,0,0,.15);border-radius:2px} .bc-card-number{display:flex;align-items:center;gap:10px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:18px;letter-spacing:2px;margin-bottom:16px;font-weight:var(--font-semibold)} .bc-card-digits{color:#fff} .bc-card-dots{color:rgba(255,255,255,.4);font-size:14px;letter-spacing:4px} .bc-card-info{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px} .bc-card-holder-label{font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-bottom:2px} .bc-card-holder-name{font-size:14px;font-weight:var(--font-semibold);letter-spacing:.5px;text-transform:uppercase} .bc-card-actions{display:flex;align-items:center;gap:4px} .bc-card-status{font-size:10px;font-weight:var(--font-medium);color:#8bf;background:rgba(100,160,255,.15);padding:2px 8px;border-radius:var(--radius-sm)} .bc-card-inactive .bc-card-status{color:#999;background:rgba(255,255,255,.08)} .bc-card-account{font-size:var(--text-xs);color:rgba(255,255,255,.5);margin-top:8px;display:flex;gap:6px;align-items:center} .bc-card-acc-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.3)} .bc-card-acc-val{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;color:rgba(255,255,255,.6)} .bc-card-txns{margin-top:6px} .bc-card-txn-badge{font-size:10px;background:rgba(59,130,246,.2);color:#8bf;padding:2px 8px;border-radius:var(--radius-sm)} .bc-card-notes{font-size:10px;color:rgba(255,255,255,.35);margin-top:6px;font-style:italic} /* ═══════════════════════════════════════════════════════════ VENDOR PROFILES ═══════════════════════════════════════════════════════════ */ .vp-tab{background:none;border:none;padding:10px 20px;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit;transition:all var(--dur-fast)} .vp-tab:hover{color:var(--text);background:var(--surface-hover)} .vp-tab-active{color:var(--primary);border-bottom-color:var(--primary)} .vp-lbl{font-size:var(--text-xs);color:var(--text-secondary);display:block;margin-bottom:4px;font-weight:var(--font-medium)} .vp-inp{width:100%;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:var(--text-sm);box-sizing:border-box} .vp-inp:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ring)} .vp-row{display:flex;gap:12px;flex-wrap:wrap} .vp-ta{width:100%;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:var(--text-sm);min-height:60px;resize:vertical;box-sizing:border-box} .vp-ta:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-ring)} /* ═══════════════════════════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════════════════════════ */ .empty-state{text-align:center;padding:60px 20px;color:var(--text-tertiary)} .empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.4} .empty-state-title{font-size:var(--text-md);margin-bottom:8px;color:var(--text-secondary)} .empty-state-desc{font-size:var(--text-sm);margin-bottom:20px;color:var(--text-tertiary)} /* ═══════════════════════════════════════════════════════════ PAGE HEADER (unified) ═══════════════════════════════════════════════════════════ */ /* page-header/page-title removed — unified to .je-header/.je-title (styles.css:686-687) */ /* ═══════════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════════ */ .pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 0;font-size:var(--text-sm)} .pagination .btn{min-width:auto} .pagination-info{color:var(--text-tertiary);font-size:var(--text-xs)} /* ═══════════════════════════════════════════════════════════ COMING SOON ═══════════════════════════════════════════════════════════ */ .coming{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-tertiary)} .coming-icon{font-size:56px;margin-bottom:18px;opacity:.4} .coming h2{font-size:var(--text-2xl);color:var(--text-secondary);margin-bottom:10px;font-weight:var(--font-semibold)} .coming p{font-size:var(--text-md);max-width:420px;line-height:1.6} /* ═══════════════════════════════════════════════════════════ LOADING STATE ═══════════════════════════════════════════════════════════ */ @keyframes spin{to{transform:rotate(360deg)}} .page-loading{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--text-secondary);font-size:var(--text-base)} .spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--sp-3)} /* ═══════════════════════════════════════════════════════════ MICRO-INTERACTIONS & POLISH ═══════════════════════════════════════════════════════════ */ /* Checkboxes & radios */ input[type="checkbox"],input[type="radio"]{accent-color:var(--primary);cursor:pointer} /* Focus-visible for keyboard navigation (accessibility) */ :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)} .btn:focus-visible,.btn-icon:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .form-input:focus-visible,.form-input-sm:focus-visible{outline:none} /* already has box-shadow focus */ /* Card hover lift (generic for stat/summary cards) */ .d-stat,.rc-scard,.rp-scard,.je-summary-card,.ba-card{transition:all var(--dur-normal) var(--ease)} .d-stat:hover,.rc-scard:hover,.rp-scard:hover,.je-summary-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} /* Table row alternating stripe + hover (very subtle) */ .inv-tbl tbody tr:nth-child(even),.pt-tbl tbody tr:nth-child(even),.rp-tbl tbody tr:nth-child(even),.bi-tbl tbody tr:nth-child(even){background:rgba(0,0,0,.008)} .inv-tbl tbody tr,.pt-tbl tbody tr,.rp-tbl tbody tr,.bi-tbl tbody tr{transition:background var(--dur-fast)} .inv-tbl tbody tr:hover,.pt-tbl tbody tr:hover,.rp-tbl tbody tr:hover,.bi-tbl tbody tr:hover{background:var(--surface-hover)} /* Smooth page transitions */ .page{animation:pageIn var(--dur-normal) var(--ease)} @keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* Wizard Step 4 — Invoice personalization */ .wiz-tpl-thumb:hover,.wiz-font-card:hover{border-color:var(--primary)!important;background:var(--surface-muted)} .wiz-preview-tab{background:transparent;border:1px solid var(--border);color:var(--text-secondary)} .wiz-preview-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)} /* ═══════════════════════════════════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media(max-width:768px){ .sb{position:fixed;left:-260px;z-index:1000;transition:left .3s ease;width:260px;height:100vh} .sb.open{left:0} .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999} .sb-overlay.show{display:block} .main{margin-left:0!important;padding:0!important} .je-page{padding:12px!important} .je-header{flex-direction:column;gap:8px;align-items:flex-start!important} .d-flex-center{flex-wrap:wrap;gap:6px} .inv-tbl{font-size:11px} .inv-tbl th,.inv-tbl td{padding:4px 6px} .rp-tabs{gap:4px} .rp-tab{font-size:11px;padding:4px 8px} .d-stats{grid-template-columns:1fr 1fr!important} .rp-summary{flex-wrap:wrap} .rp-scard{min-width:120px} .card{padding:10px!important} .form-input{font-size:14px} .slide-panel{width:100vw!important;max-width:100vw!important} #mob-menu{display:block!important} } @media(min-width:769px){ #mob-menu{display:none!important} } /* ═══════════════════════════════════════════════════════════ DASHBOARD POLISH ═══════════════════════════════════════════════════════════ */ .dash-actions{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} .d-stat{border-left:3px solid var(--border-strong);padding-left:12px;transition:border-color .2s} .d-stat[data-color="green"]{border-left-color:var(--success)} .d-stat[data-color="blue"]{border-left-color:var(--info)} .d-stat[data-color="red"]{border-left-color:var(--danger)} .d-stat[data-color="purple"]{border-left-color:var(--purple)} .d-stat[data-color="orange"]{border-left-color:var(--warning)} .d-stat-val{font-size:var(--text-3xl);font-weight:var(--font-bold);line-height:1.2;margin:4px 0} .d-stat-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-weight:var(--font-semibold)} .d-stat-sub{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:2px} .d-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)} .d-panel-head{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--text)} .d-empty{color:var(--text-tertiary);font-size:var(--text-sm);padding:16px;text-align:center} /* Favorites star visibility */ .sb-item:hover .sb-fav-star{opacity:1!important} /* ═══════════════════════════════════════════════════════════ DARK MODE ═══════════════════════════════════════════════════════════ */ [data-theme="dark"]{ --bg: #0F172A; --surface: #1E293B; --surface-hover: #334155; --surface-muted: #1E293B; --border: #334155; --border-strong: #475569; --text: #E2E8F0; --text-secondary: #94A3B8; --text-tertiary: #64748B; --text-placeholder: #475569; --primary-dim: rgba(5, 150, 105, 0.15); --primary-ring: rgba(5, 150, 105, 0.3); --success-dim: rgba(5, 150, 105, 0.15); --warning-dim: rgba(217, 119, 6, 0.15); --danger-dim: rgba(220, 38, 38, 0.15); --info-dim: rgba(37, 99, 235, 0.15); --purple-dim: rgba(124, 58, 237, 0.15); --bg-secondary: #162032; --bg-alt: #0F172A; --surface-secondary: #334155; --text-muted: #94A3B8; --border-primary: #334155; --border-secondary: #475569; } [data-theme="dark"] .sb{background:#0B1222;border-right-color:#1E293B} [data-theme="dark"] .sb-item:hover{background:#1E293B} [data-theme="dark"] .sb-item.active{background:#1E293B;color:var(--primary)} [data-theme="dark"] .inv-tbl th{background:#1E293B;color:#94A3B8;border-color:#334155} [data-theme="dark"] .inv-tbl td{border-color:#334155} [data-theme="dark"] .inv-tbl tr:nth-child(even){background:#162032} [data-theme="dark"] .form-input{background:#1E293B;border-color:#334155;color:#E2E8F0} [data-theme="dark"] .card{background:#1E293B;border-color:#334155} [data-theme="dark"] .slide-panel{background:#1E293B;color:#E2E8F0} [data-theme="dark"] .slide-panel-header{border-color:#334155} [data-theme="dark"] .slide-panel-footer{border-color:#334155;background:#162032} [data-theme="dark"] .toast{background:#1E293B;color:#E2E8F0;border-color:#334155} /* Print styles */ @media print{ .sb,.sb-footer,.slide-panel-overlay,.d-quick-actions,.rp-tabs button:not(.active), button:not(.no-hide-print),.btn,.toast-container,.sb-toggle, .inv-filters,.je-summary-card{display:none!important} .main{margin-left:0!important;padding:0!important} .page,.je-page{padding:0!important} body{background:#fff!important;color:#000!important;font-size:11pt} .inv-tbl{border:1px solid #333!important;font-size:9pt} .inv-tbl th,.inv-tbl td{border:1px solid #ccc!important;padding:4px 6px!important;color:#000!important} .inv-tbl th{background:#eee!important;color:#000!important} .pill{border:1px solid #999!important;color:#000!important;background:#f5f5f5!important} .je-header h2{font-size:14pt!important;color:#000!important} .rp-summary{gap:8px!important} .rp-scard{border:1px solid #ccc!important;background:#f9f9f9!important} .rp-scard-val{color:#000!important} .mono{color:#000!important} a{color:#000!important;text-decoration:none!important} *{box-shadow:none!important} } /* ═══════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════ */ .text-center{text-align:center} .text-left{text-align:left} .text-primary{color:var(--primary)} .text-success{color:var(--success)} .text-warning{color:var(--warning)} .text-danger{color:var(--danger)} .font-medium{font-weight:var(--font-medium)} .font-semibold{font-weight:var(--font-semibold)} .font-bold{font-weight:var(--font-bold)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)} .text-accent{color:var(--accent)} .text-accent-bold{color:var(--accent);font-weight:600} .text-sm{font-size:var(--text-sm)} .text-xs{font-size:var(--text-xs)} /* Common compound patterns */ .caption{font-size:11px;color:var(--muted)} .field-hint{font-size:12px;color:var(--muted);display:block;margin-bottom:4px} .overline{color:var(--text-tertiary);font-size:11px;text-transform:uppercase;letter-spacing:0.5px} .overline-sm{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .section-label{font-size:14px;font-weight:600;margin:16px 0 8px;color:var(--text-primary)} .detail-label{padding:10px 8px;font-size:13px;color:var(--muted);font-weight:600} .detail-sub{color:var(--muted);font-size:13px;font-weight:500} .d-flex-center{display:flex;gap:10px;align-items:center} .d-flex-end{display:flex;gap:8px;justify-content:flex-end} /* Spacing utilities */ .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mb-1{margin-bottom:4px} .mb-2{margin-bottom:6px} /* Layout utilities */ .w-full{width:100%} .flex-1{flex:1} .nowrap{white-space:nowrap} .overflow-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .text-base{font-size:13px} .border-b{border-bottom:1px solid var(--border)} .tag-sm{font-size:11px;padding:1px 5px} .table-responsive{overflow-x:auto} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4)} .card-body{padding:var(--sp-4)} .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .flex-col{display:flex;flex-direction:column} .d-flex-between{display:flex;justify-content:space-between} .check-label{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);cursor:pointer} .mb-0{margin-bottom:0} .mb-5{margin-bottom:20px} /* ═══════════════════════════════════════════════════════════ STICKY FORM FOOTER (for long forms like Create Invoice) ═══════════════════════════════════════════════════════════ */ .form-footer-sticky{ position:sticky;bottom:0;z-index:10; display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap; padding:16px 0;margin-top:var(--sp-6); background:linear-gradient(to top,var(--bg) 60%,transparent); border-top:1px solid var(--border); } /* ═══════════════════════════════════════════════════════════ FAQ ACCORDION (VAT rates, etc.) ═══════════════════════════════════════════════════════════ */ .vat-faq{display:flex;flex-direction:column;gap:2px} .vat-faq-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .vat-faq-item summary{padding:12px 16px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;transition:background var(--dur-fast)} .vat-faq-item summary:hover{background:var(--surface-hover)} .vat-faq-item summary::after{content:'›';font-size:18px;color:var(--text-tertiary);transition:transform .2s ease;flex-shrink:0;margin-left:12px} .vat-faq-item[open] summary::after{transform:rotate(90deg);color:var(--primary)} .vat-faq-item[open] summary{background:var(--primary-dim);border-bottom:1px solid var(--border)} .vat-faq-item p{padding:12px 16px;margin:0;color:var(--text-secondary);line-height:var(--leading-relaxed)} /* ═══════════════════════════════════════════════════════════ BREADCRUMB ═══════════════════════════════════════════════════════════ */ .breadcrumb{ display:flex;align-items:center;gap:6px; font-size:var(--text-xs);color:var(--text-tertiary); margin-bottom:var(--sp-2);margin-top:-2px; } .breadcrumb a,.breadcrumb-link{ color:var(--text-secondary);text-decoration:none;cursor:pointer; transition:color var(--dur-fast);font-weight:var(--font-medium); } .breadcrumb a:hover,.breadcrumb-link:hover{color:var(--primary)} .breadcrumb-sep{color:var(--border-strong);font-size:10px} .breadcrumb-current{color:var(--text-secondary);font-weight:var(--font-medium)} /* ═══════════════════════════════════════════════════════════ COLLAPSIBLE SECTION (for secondary form sections) ═══════════════════════════════════════════════════════════ */ .collapsible{border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:var(--sp-4);overflow:hidden} .collapsible-trigger{ display:flex;align-items:center;gap:8px;width:100%; padding:12px 16px;background:var(--surface-muted); border:none;cursor:pointer;font-family:inherit; font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text); transition:background var(--dur-fast); } .collapsible-trigger:hover{background:var(--surface-hover)} .collapsible-trigger svg{transition:transform var(--dur-normal);flex-shrink:0} .collapsible-trigger[aria-expanded="true"] svg{transform:rotate(90deg)} .collapsible-body{padding:16px;display:none;border-top:1px solid var(--border)} .collapsible-body.open{display:block} /* ═══════════════════════════════════════════════════════════ DATA TABLE UTILITIES (for consistent th styling) ═══════════════════════════════════════════════════════════ */ /* Override th alignment (higher specificity than .inv-tbl th) */ th.col-right,td.col-right,.col-right,th.text-right{text-align:right!important} th.col-center,td.col-center,.col-center,th.text-center{text-align:center!important} .col-w30{width:30px}.col-w32{width:32px} .col-w50{width:50px}.col-w60{width:60px}.col-w70{width:70px} .col-w80{width:80px}.col-w100{width:100px}.col-w120{width:120px} .col-w140{width:140px}.col-w200{width:200px}.col-w250{width:250px} .col-w40{width:40px}.col-w85{width:85px}.col-w90{width:90px}.col-w110{width:110px}.col-w180{width:180px} .col-minw100{min-width:100px}.col-minw140{min-width:140px}.col-minw150{min-width:150px} /* je-table (settings/config tables) — same styling as inv-tbl */ .je-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--surface)} .je-table th{text-align:left;padding:11px 16px;color:var(--text-secondary);font-weight:var(--font-bold);border-bottom:2px solid var(--border);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px;background:var(--bg)} .je-table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .je-table tbody tr:hover{background:var(--surface-hover)} .je-table tbody tr:nth-child(even){background:rgba(0,0,0,.008)} .je-table tr:last-child td{border-bottom:none} /* Action button group (inline icon buttons in table cells) */ .tbl-actions{display:flex;gap:4px;align-items:center;justify-content:flex-start} .tbl-action{background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;width:30px;height:30px;border-radius:var(--radius);transition:all var(--dur-fast);display:inline-flex;align-items:center;justify-content:center;padding:0} .tbl-action:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)} .tbl-action.danger{color:var(--text-tertiary)} .tbl-action.danger:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-dim)} /* Table filter row headers (compact) */ .th-filter{padding:2px 3px} .th-compact{padding:6px 8px;font-size:10px} /* Invoice line items table — compact professional layout */ #invLinesTable{table-layout:fixed;width:100%;border-collapse:collapse} #invLinesTable th{padding:6px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;color:var(--text-tertiary);border-bottom:2px solid var(--border)} #invLinesTable td{padding:4px 3px;vertical-align:middle;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)} #invLinesTable tbody tr:hover{background:color-mix(in srgb,var(--primary) 4%,transparent)} #invLinesTable .inv-input{padding:4px 6px;font-size:13px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);box-sizing:border-box;transition:border-color .15s} #invLinesTable .inv-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent)} #invLinesTable select.inv-input{padding:4px 2px;cursor:pointer} #invLinesTable .inv-line-num{text-align:center;font-size:11px;font-weight:500;color:var(--text-tertiary);width:24px} #invLinesTable .inv-val{font-size:13px;font-family:'SF Mono',Consolas,'Liberation Mono',monospace;white-space:nowrap;text-align:right;padding-right:6px;font-weight:500} #invLinesTable .inv-disc-wrap{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;height:30px;background:var(--surface)} #invLinesTable .inv-disc-wrap input{border:none;outline:none;padding:4px 2px 4px 6px;font-size:13px;width:100%;background:transparent;text-align:right;height:100%} #invLinesTable .inv-disc-wrap input:focus{box-shadow:none} #invLinesTable .inv-disc-wrap .disc-suffix{font-size:11px;color:var(--text-tertiary);padding:0 5px 0 1px;cursor:pointer;user-select:none;font-weight:600;white-space:nowrap;border-left:1px solid var(--border);display:flex;align-items:center;height:100%;background:var(--bg-alt)} #invLinesTable .inv-disc-wrap .disc-suffix:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)} /* Column widths */ #invLinesTable .col-num{width:24px} #invLinesTable .col-prod{width:auto} #invLinesTable .col-um{width:58px} #invLinesTable .col-qty{width:62px} #invLinesTable .col-price{width:92px} #invLinesTable .col-disc{width:68px} #invLinesTable .col-vat-rate{width:75px} #invLinesTable .col-val{width:90px} #invLinesTable .col-vat-amt{width:80px} #invLinesTable .col-act{width:30px} #invLinesTable .btn-del{border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s} #invLinesTable .btn-del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)} #invLinesTable .btn-details{border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm);font-size:10px;transition:color .15s} #invLinesTable .btn-details:hover{color:var(--primary)} /* ═══════════════════════════════════════════════════════════ SETTINGS TABS — Sidebar + Content layout ═══════════════════════════════════════════════════════════ */ .cs-settings-sidebar{ width:210px;min-width:210px;background:var(--surface); border-right:1px solid var(--border);padding:8px; display:flex;flex-direction:column;gap:2px; position:sticky;top:0;height:fit-content; border-radius:var(--radius-lg) 0 0 var(--radius-lg); } .cs-tab-btn{ display:flex;align-items:center;gap:8px;padding:8px 12px; border:none;background:transparent;border-radius:var(--radius-md); font-size:13px;color:var(--text-secondary);cursor:pointer; text-align:left;width:100%;transition:all .15s; } .cs-tab-btn:hover{background:var(--surface-hover);color:var(--text)} .cs-tab-btn.active{ background:var(--accent-light,rgba(5,150,105,.1)); color:var(--accent);font-weight:600; } .cs-tab-btn svg{flex-shrink:0;opacity:.6} .cs-tab-btn.active svg{opacity:1} .cs-settings-content{ flex:1;padding:24px;min-width:0; } /* Settings card (reusable for all tabs) */ .cs-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:24px; box-shadow:var(--shadow-xs);margin-bottom:20px; } .cs-card h3{margin-bottom:4px;font-size:15px} .cs-card-desc{color:var(--text-secondary);font-size:12px;margin-bottom:16px} /* Preference checkbox rows */ .cs-pref-row{ display:flex;align-items:center;gap:10px; padding:8px 0;font-size:13px;border-bottom:1px solid var(--border-subtle,#f0f0f0); } .cs-pref-row:last-child{border-bottom:none} .cs-pref-row input[type="checkbox"]{accent-color:var(--accent)} .cs-pref-row label{cursor:pointer;flex:1} .cs-pref-row .cs-pref-help{font-size:11px;color:var(--text-tertiary)} /* Settings tables (bank accounts, series, VAT rates, etc.) */ .cs-card table{width:100%;border-collapse:collapse;font-size:13px} .cs-card table th{ text-align:left;padding:8px 12px;color:var(--text-secondary); font-weight:var(--font-semibold);font-size:11px;text-transform:uppercase; letter-spacing:.4px;border-bottom:2px solid var(--border);background:var(--bg); } .cs-card table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle} .cs-card table tbody tr:last-child td{border-bottom:none} .cs-card table tbody tr:hover{background:var(--surface-hover)} .cs-card table tbody tr:nth-child(even){background:rgba(0,0,0,.01)} /* GL Picker dropdown */ .gl-picker-dropdown{position:absolute;top:100%;left:0;right:0;max-height:240px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:1001} .gl-picker-dropdown .gl-pick-item{padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px} .gl-picker-dropdown .gl-pick-item:hover{background:var(--surface-hover)} .gl-picker-dropdown .gl-pick-item.disabled{opacity:.5;cursor:not-allowed} .gl-picker-dropdown .gl-pick-item .mono{font-family:var(--font-mono);font-weight:600;color:var(--accent)} .gl-picker-dropdown .gl-pick-empty{padding:12px;color:var(--muted);text-align:center;font-size:13px}