:root{--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--gold-primary: #e7b008;--gold-hover: #f7cb3c;--gold-dark: #b8860b;--gold-glow: rgba(231, 176, 8, .35);--gold-light: rgba(231, 176, 8, .14);--gold-subtle: rgba(231, 176, 8, .08);--bg-primary: #0a0b0e;--bg-secondary: #111319;--bg-tertiary: #161922;--bg-elevated: #161820;--bg-surface: #111319;--bg-surface-elevated: #161922;--border-subtle: #1f222d;--border-default: #2a2e3b;--border-strong: #e7b008;--border-focus: #e7b008;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #9da7b8;--text-inverse: #07080b;--primary: #e7b008;--primary-hover: #f7cb3c;--primary-glow: rgba(231, 176, 8, .35);--primary-light: rgba(231, 176, 8, .14);--primary-subtle: rgba(231, 176, 8, .22);--primary-border: #e7b008;--accent: #e7b008;--accent-light: rgba(231, 176, 8, .14);--success: #10b981;--success-glow: rgba(16, 185, 129, .2);--success-light: rgba(16, 185, 129, .12);--warning: #f59e0b;--warning-glow: rgba(245, 158, 11, .2);--warning-light: rgba(245, 158, 11, .12);--danger: #ef4444;--danger-glow: rgba(239, 68, 68, .2);--danger-light: rgba(239, 68, 68, .12);--info: #38bdf8;--info-light: rgba(56, 189, 248, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-full: 9999px;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .35);--shadow-md: 0 4px 10px -1px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, .55), 0 4px 8px -4px rgba(0, 0, 0, .35);--sidebar-collapsed-width: 74px;--sidebar-width: 290px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#242836;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.app-container{display:flex;min-height:100vh;width:100%}.sidebar{width:var(--sidebar-collapsed-width);background-color:#07080b;border-right:1px solid rgba(231,176,8,.2);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:50;box-shadow:2px 0 16px #0000008c;transition:width .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;overflow-x:hidden;overflow-y:auto;flex-shrink:0}.sidebar.is-hovered,.sidebar:hover{width:var(--sidebar-width);box-shadow:6px 0 28px #000000bf,2px 0 12px #e7b00826}.main-wrapper{flex:1;min-width:0;width:auto;margin-left:0!important;min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-primary);transition:all .3s cubic-bezier(.16,1,.3,1)}.main-content{flex:1;min-width:0;width:100%;padding:24px 32px 48px;box-sizing:border-box;display:flex;flex-direction:column}.top-bar{height:64px;background-color:#0c0d12;border-bottom:1px solid rgba(231,176,8,.2);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:40;box-shadow:0 2px 10px #00000059}.content-area,.page-body{padding:28px 32px;max-width:1440px;width:100%;margin:0 auto;flex:1}.sidebar-header{padding:10px 15px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(231,176,8,.18);background:#090a0f;height:64px;box-sizing:border-box;overflow:hidden;flex-shrink:0}.brand-badge{background:linear-gradient(135deg,#e7b008,gold,#b8860b);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#07080b;font-weight:900;font-size:15px;box-shadow:0 4px 14px #e7b00873;flex-shrink:0;margin:0 auto}.sidebar.is-hovered .brand-badge{margin:0}.brand-info{display:flex;flex-direction:column;white-space:nowrap}.brand-title{font-size:17px;font-weight:800;letter-spacing:-.4px;color:#fff}.brand-sub{font-size:11px;color:#e7b008;font-weight:700;text-transform:uppercase;letter-spacing:.6px}.nav-menu{flex:1;padding:14px 15px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;align-items:center}.sidebar.is-hovered .nav-menu,.sidebar:hover .nav-menu{align-items:stretch;padding:14px 10px}.nav-icon-box{width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:all .2s ease;color:#cbd5e1;flex-shrink:0}.nav-item{width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:12px;color:#cbd5e1;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .2s ease;background:transparent;border:1px solid transparent;outline:none;font-family:inherit;white-space:nowrap;overflow:hidden;box-sizing:border-box}.nav-item:hover{background-color:#e7b0081f;color:#e7b008}.nav-item.active{background:linear-gradient(135deg,#e7b008,#d49e05)!important;color:#07080b!important;box-shadow:0 2px 10px #e7b00866,0 0 3px #e7b00840}.nav-item.active svg{color:#07080b!important;stroke:#07080b!important}.nav-group{display:flex;flex-direction:column;width:100%;align-items:center}.sidebar.is-hovered .nav-group,.sidebar:hover .nav-group{align-items:stretch}.nav-group-header{width:44px;height:44px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:12px;color:#cbd5e1;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;background:transparent;border:1px solid transparent;outline:none;font-family:inherit;white-space:nowrap;overflow:hidden;box-sizing:border-box}.nav-group-header:hover{background-color:#e7b0081f;color:#e7b008}.nav-group-header.has-active{background:linear-gradient(135deg,#e7b008,#d49e05)!important;color:#07080b!important;box-shadow:0 2px 10px #e7b00866,0 0 3px #e7b00840}.nav-group-header.has-active svg{color:#07080b!important;stroke:#07080b!important}.nav-group-title{display:flex;align-items:center;justify-content:center;min-width:0}.sidebar.is-hovered .nav-item,.sidebar:hover .nav-item{width:100%;height:44px;padding:0 8px;justify-content:flex-start;gap:8px;border-radius:12px}.sidebar.is-hovered .nav-item .nav-icon-box,.sidebar:hover .nav-item .nav-icon-box{width:24px;height:24px;min-width:24px;background:transparent!important;box-shadow:none!important}.sidebar.is-hovered .nav-item.active,.sidebar:hover .nav-item.active{background:linear-gradient(135deg,#e7b008,#d49e05)!important;color:#07080b!important;font-weight:700;box-shadow:0 4px 16px #e7b00859}.sidebar.is-hovered .nav-item.active .nav-text,.sidebar:hover .nav-item.active .nav-text{color:#07080b!important;font-weight:700}.sidebar.is-hovered .nav-item.active svg,.sidebar:hover .nav-item.active svg{color:#07080b!important;stroke:#07080b!important}.sidebar.is-hovered .nav-group-header,.sidebar:hover .nav-group-header{width:100%;height:44px;padding:0 8px;justify-content:space-between;align-items:center;gap:6px;border-radius:12px;box-sizing:border-box}.sidebar.is-hovered .nav-group-header .nav-icon-box,.sidebar:hover .nav-group-header .nav-icon-box{width:24px;height:24px;min-width:24px;background:transparent!important;box-shadow:none!important;flex-shrink:0}.sidebar.is-hovered .nav-group-title,.sidebar:hover .nav-group-title{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;flex:1;overflow:hidden}.nav-group-label{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.2}.nav-group-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}.sidebar.is-hovered .nav-group-header.has-active,.sidebar:hover .nav-group-header.has-active{background:#e7b00824!important;border:1px solid rgba(231,176,8,.35)!important;color:#e7b008!important;font-weight:700;box-shadow:none!important}.sidebar.is-hovered .nav-group-header.has-active svg,.sidebar:hover .nav-group-header.has-active svg{color:#e7b008!important;stroke:#e7b008!important}.sidebar.is-hovered .nav-group-header.has-active .nav-group-label,.sidebar:hover .nav-group-header.has-active .nav-group-label{color:#e7b008!important;font-weight:700}.sidebar.is-hovered .nav-group-header.has-active .nav-group-chevron,.sidebar:hover .nav-group-header.has-active .nav-group-chevron{color:#e7b008!important}.nav-group-count{font-size:11px;font-weight:700;padding:1px 7px;border-radius:9999px;background:#e7b0082e;color:#e7b008;flex-shrink:0}.nav-group-chevron{display:flex;align-items:center;justify-content:center;color:#94a3b8;flex-shrink:0;transition:transform .2s ease,color .15s ease}.nav-sub-menu{display:flex;flex-direction:column;gap:2px;margin-top:3px;margin-bottom:6px;padding-left:10px;border-left:2px solid rgba(231,176,8,.22);margin-left:18px;transition:all .2s ease}.nav-sub-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--radius-md);color:#cbd5e1;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;background:transparent;border:1px solid transparent;outline:none;width:100%;text-align:left;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;min-width:0}.nav-sub-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.nav-sub-item:hover{background-color:#e7b00814;color:#fff}.nav-sub-item.active{background-color:#e7b00824!important;color:#e7b008!important;font-weight:600}.nav-sub-item svg{width:16px;height:16px;min-width:16px;flex-shrink:0;color:#94a3b8;stroke:currentColor}.nav-sub-item.active svg,.nav-sub-item:hover svg{color:#e7b008!important}.nav-section-label{font-size:10.5px;font-weight:700;color:#e7b008;text-transform:uppercase;letter-spacing:.8px;padding:10px 8px 4px;white-space:nowrap;width:100%}.view-container{width:100%}.view-header,.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;gap:16px;flex-wrap:wrap}.view-title,.page-title{font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--text-primary)}.view-description,.page-desc{font-size:13.5px;color:var(--text-muted);margin-top:4px;max-width:820px;line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all .18s ease;font-family:inherit;text-decoration:none;line-height:1.2}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#e7b008,#d49e05)!important;color:#07080b!important;font-weight:700!important;border:1px solid #e7b008!important;box-shadow:0 2px 10px #e7b00859!important}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#f7cb3c,#e7b008)!important;box-shadow:0 4px 18px #e7b0088c!important;color:#000!important;transform:translateY(-1px)}.btn-secondary{background-color:#151821;color:#cbd5e1;border:1px solid #2a2e3b;box-shadow:var(--shadow-sm)}.btn-secondary:hover:not(:disabled){background-color:#1e222e;color:#e7b008;border-color:#e7b008}.btn-success{background-color:var(--success);color:#fff;box-shadow:0 1px 3px #0596694d}.btn-success:hover:not(:disabled){background-color:#047857}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#b91c1c}.btn-outline-danger{background:#fff;color:var(--danger);border:1px solid #fca5a5}.btn-outline-danger:hover:not(:disabled){background:var(--danger-light);border-color:var(--danger)}.btn-outline-success{background:#fff;color:var(--success);border:1px solid #86efac}.btn-outline-success:hover:not(:disabled){background:var(--success-light);border-color:var(--success)}.btn-sm{padding:5px 10px;font-size:12px;gap:6px}.btn-close{background:transparent;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);line-height:1}.btn-close:hover{color:var(--text-primary);background:var(--bg-tertiary)}.card{min-width:0;box-sizing:border-box;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.card-title{font-size:16px;font-weight:700;color:var(--text-primary)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:26px}.kpi-card,.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 22px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.kpi-card:hover,.stat-card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}.kpi-label,.stat-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;justify-content:space-between}.kpi-value,.stat-value{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-top:8px;color:var(--primary);font-family:var(--font-sans)}.kpi-sub,.stat-sub{font-size:12px;color:var(--text-secondary);margin-top:6px;display:flex;align-items:center;gap:6px}.table-container{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);width:100%;overflow:visible;position:relative}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.card.table-responsive,.table-responsive.table-standalone{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow-x:auto}.table,.data-table{width:100%;min-width:980px;border-collapse:collapse;text-align:left}.table th,.data-table th{background-color:var(--bg-primary);padding:13px 20px;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}.table td,.data-table td{padding:14px 20px;font-size:13.5px;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);vertical-align:middle}.table tbody tr:hover,.data-table tbody tr:hover{background-color:var(--bg-tertiary)}.table th.col-actions,.data-table th.col-actions,.table td.col-actions,.data-table td.col-actions{width:1%!important;white-space:nowrap!important;text-align:right!important}.actions-cell-end{display:inline-flex;justify-content:flex-end;align-items:center;gap:6px;white-space:nowrap}.btn-icon-more{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.btn-icon-more:hover,.btn-icon-more.active{background:var(--bg-tertiary);border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}.actions-dropdown-menu{background:var(--bg-surface);border:1px solid rgba(231,176,8,.3);border-radius:var(--radius-md);box-shadow:0 14px 34px -4px #000000a6,0 8px 16px -4px #e7b00826;min-width:220px;max-height:min(520px,calc(100vh - 24px));overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:6px;display:flex;flex-direction:column;gap:2px;animation:dropdownFadeIn .15s ease-out;z-index:10000}.actions-dropdown-menu::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-primary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;width:100%;transition:all .15s ease}.dropdown-item:hover{background-color:var(--bg-secondary);color:var(--primary)}.dropdown-item.dropdown-item-danger:hover{background-color:#ef444426;color:var(--danger)}.dropdown-divider{height:1px;background-color:var(--border-subtle);margin:4px 0}.table-agreements{min-width:1020px!important}.table-invoices{min-width:1280px!important}.table-payments{min-width:1080px!important}.table-plans{min-width:1140px!important}.table-addons{min-width:980px!important}.table-features{min-width:1020px!important}.table-clients{min-width:1140px!important}.table-databases{min-width:1060px!important}.table-domains{min-width:1000px!important}.table-audit{min-width:1040px!important}.table-renewals{width:100%!important;min-width:0!important;table-layout:auto}.table-renewals th,.table-renewals td{padding:10px 12px!important;font-size:12.5px}.modal-table,.modal-body .table,.modal-body .data-table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto}.cell-nowrap,.nowrap{white-space:nowrap!important}.mono-identifier{font-family:var(--font-mono);font-weight:700;color:var(--primary);white-space:nowrap!important;display:inline-block}.data-table td .badge,.table td .badge{white-space:nowrap!important;flex-shrink:0}.filter-bar,.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--border-subtle);background-color:var(--bg-surface);position:relative;z-index:20;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-wrapper .search-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none}.search-input-wrapper input{padding-left:36px}.input,.form-input,.select-input,.form-select,textarea{width:100%;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 12px;color:var(--text-primary);font-size:13.5px;font-family:inherit;outline:none;transition:all .15s ease;box-shadow:var(--shadow-sm)}.input:focus,.form-input:focus,.select-input:focus,.form-select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:var(--bg-secondary)}.select-input,.form-select{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px!important;white-space:nowrap}.product-filter-select{min-width:320px!important;max-width:480px!important;width:auto!important;font-weight:500}.form-group{margin-bottom:16px}.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;line-height:1.2;white-space:nowrap!important;flex-shrink:0}.badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background-color:currentColor;box-shadow:0 0 6px currentColor;flex-shrink:0}.badge-active,.badge-paid,.badge-success{background-color:#10b98129!important;color:#34d399!important;border:1px solid rgba(52,211,153,.45)!important;box-shadow:0 0 8px #10b98126}.badge-warning,.badge-grace,.badge-partially_paid{background-color:#e7b00829!important;color:#fbbf24!important;border:1px solid rgba(231,176,8,.45)!important;box-shadow:0 0 8px #e7b00826}.badge-danger,.badge-expired,.badge-overdue,.badge-suspended{background-color:#ef44442e!important;color:#f87171!important;border:1px solid rgba(248,113,113,.45)!important;box-shadow:0 0 8px #ef444433}.badge-neutral,.badge-draft,.badge-void{background-color:#94a3b81f!important;color:#cbd5e1!important;border:1px solid rgba(148,163,184,.35)!important}.badge-accent,.badge-primary{background-color:#e7b0082e!important;color:#e7b008!important;border:1px solid rgba(231,176,8,.5)!important;box-shadow:0 0 8px #e7b00833}.modal-backdrop,.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .15s ease-out}.modal,.modal-content,.modal.card{background-color:var(--bg-surface);border:1px solid rgba(231,176,8,.3);border-radius:var(--radius-lg);width:100%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 50px -5px #000c,0 10px 20px -5px #e7b00826;animation:slideUp .18s cubic-bezier(.16,1,.3,1)}.modal-header{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);background-color:var(--bg-tertiary)}.modal-title{font-size:16.5px;font-weight:700;color:var(--text-primary)}.modal-body{padding:20px 22px;overflow-y:auto;overflow-x:hidden;max-height:calc(88vh - 120px);background-color:var(--bg-surface)}.modal-footer{padding:14px 22px;background-color:var(--bg-primary);border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;gap:12px}.error-banner{background-color:var(--danger-light);border:1px solid #fecaca;color:#991b1b;padding:12px 16px;border-radius:var(--radius-md);display:flex;align-items:center;gap:10px;font-size:13.5px}.loading-state,.state-container{padding:48px 20px;text-align:center;color:var(--text-muted);font-size:14px}.grid{display:grid;gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media(max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.flex{display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.p-0{padding:0!important}.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.py-8{padding-top:32px;padding-bottom:32px}.space-y-4>*+*{margin-top:16px}.rounded{border-radius:var(--radius-md)}.border{border:1px solid var(--border-subtle)}.border-b{border-bottom:1px solid var(--border-subtle)}.border-t{border-top:1px solid var(--border-subtle)}.bg-secondary{background-color:var(--bg-secondary)!important;border:1px solid var(--border-subtle)}.bg-surface{background-color:var(--bg-surface)}.bg-surface-elevated{background-color:var(--bg-surface-elevated);border:1px solid var(--border-subtle)}.bg-danger-subtle{background-color:var(--danger-light);border:1px solid #fecaca}.bg-success-subtle{background-color:var(--success-light);border:1px solid #a7f3d0}pre{background-color:#0f172a!important;color:#38bdf8!important;border-radius:var(--radius-md)!important;border:1px solid #1e293b!important}.text-emerald{color:var(--success)!important}.text-amber{color:var(--warning)!important}.text-primary{color:var(--primary)!important}.text-accent{color:var(--accent)!important}.text-muted{color:var(--text-muted)!important}.text-xs{font-size:11.5px}.text-sm{font-size:13px}.text-base{font-size:14.5px}.text-lg{font-size:16px}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-mono{font-family:var(--font-mono)}.text-uppercase{text-transform:uppercase}.text-center{text-align:center}.text-right{text-align:right}.line-through{text-decoration:line-through}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:24px}.metric-card{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 22px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.metric-card:hover{transform:translateY(-2px);border-color:var(--border-default);box-shadow:var(--shadow-md)}.metric-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.metric-title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:26px;font-weight:800;letter-spacing:-.8px;color:var(--text-primary);line-height:1.2}.metric-subtext{font-size:12px;color:var(--text-secondary);margin-top:6px;display:flex;align-items:center;gap:6px}.input-field{width:100%;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 12px;color:var(--text-primary);font-size:13.5px;font-family:inherit;outline:none;transition:all .15s ease;box-shadow:var(--shadow-sm)}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:#fff}select.input-field{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px!important}.btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.btn-icon:hover{background:var(--bg-tertiary);border-color:var(--border-strong);color:var(--text-primary)}.btn-icon.danger:hover{background:var(--danger-light);border-color:#fca5a5;color:var(--danger)}.pagination-container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background-color:var(--bg-surface);border-top:1px solid var(--border-subtle);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);gap:16px;flex-wrap:wrap;width:100%;box-sizing:border-box}.pagination-info{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:8px;white-space:nowrap}.pagination-info strong{color:var(--text-primary);font-weight:600}.pagination-controls{display:flex;align-items:center;gap:5px}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;font-family:inherit}.pagination-btn:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--primary);color:var(--primary)}.pagination-btn.active{background:linear-gradient(135deg,#e7b008,#d49e05)!important;color:#07080b!important;border-color:#e7b008!important;font-weight:700!important;box-shadow:0 2px 8px #e7b00859}.pagination-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--border-subtle)}.pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:32px;color:var(--text-muted);font-size:13px}.pagination-size-select{padding:4px 8px;border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12px;cursor:pointer;outline:none;font-family:inherit;transition:border-color .15s ease}.pagination-size-select:focus{border-color:var(--primary)}.invoice-modal-overlay{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:32px 16px;overflow-y:auto;background:#040508e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999}.invoice-action-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:780px;margin-bottom:14px;padding:10px 16px;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:0 4px 16px #0006}.action-bar-left{display:flex;align-items:center;gap:12px}.action-bar-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--primary);background:var(--primary-light);padding:3px 8px;border-radius:var(--radius-sm);border:1px solid rgba(231,176,8,.3)}.action-bar-inv-num{font-size:13.5px;font-weight:700;color:var(--text-primary);font-family:var(--font-mono)}.action-bar-right{display:flex;align-items:center;gap:8px}.action-bar-btn{display:inline-flex;align-items:center;gap:6px}.action-bar-close{padding:6px 10px!important}.company-editor-card{width:100%;max-width:780px;background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:14px;box-shadow:0 4px 20px #0006}.company-editor-header{margin-bottom:12px}.company-editor-header h4{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}.company-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.company-editor-actions{display:flex;gap:8px;margin-top:14px}.invoice-paper-sheet{width:100%;max-width:780px;background:#fff!important;color:#111827!important;padding:48px 52px 42px;border-radius:8px;box-shadow:0 25px 60px -15px #000000b3,0 0 0 1px #ffffff1a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin-bottom:40px;position:relative;box-sizing:border-box}.invoice-header-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.company-brand-name{font-size:27px;font-weight:800;letter-spacing:-.5px;color:#111827!important;margin:0 0 4px;line-height:1.1;text-transform:uppercase}.company-legal-name{font-size:13.5px;font-weight:500;color:#374151!important;margin:0 0 3px}.company-contact-line{font-size:12px;color:#6b7280!important;display:flex;align-items:center;gap:6px}.contact-sep{color:#d1d5db!important}.document-title-block{text-align:right}.document-type-title{font-size:18px;font-weight:500;color:#1f2937!important;margin:0 0 6px;white-space:nowrap}.document-status-subtitle{display:flex;justify-content:flex-end}.receipt-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:4px}.receipt-status-badge.status-paid{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.receipt-status-badge.status-partial{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}.receipt-status-badge.status-issued{background:#fef3c7;color:#92400e;border:1px solid #fde68a}.invoice-divider{border-top:1px solid #e5e7eb;margin:22px 0 24px}.invoice-meta-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;margin-bottom:24px}.meta-col-title{font-size:13px;font-weight:700;color:#111827!important;margin-bottom:6px}.client-display-name{font-size:13.5px;font-weight:600;color:#1f2937!important;line-height:1.4}.client-detail-line{font-size:13px;color:#374151!important;line-height:1.45;margin-top:1px}.client-attn{color:#4b5563!important;font-style:italic;margin-top:2px}.client-address{margin-top:4px;color:#4b5563!important;font-size:12.5px}.client-tax-id{margin-top:4px;font-size:12px;color:#1f2937!important}.meta-details-table{width:100%;border-collapse:collapse}.meta-details-table td{padding:2px 0;font-size:13px;vertical-align:top}.meta-label{color:#374151!important;font-weight:500;width:38%}.meta-value{color:#111827!important;text-align:right;font-weight:400}.font-mono-val{font-family:var(--font-mono),monospace;font-size:12px}.invoice-items-section{margin-top:18px;border-top:1px solid #e5e7eb}.invoice-items-table{width:100%;border-collapse:collapse}.invoice-items-table th{padding:11px 0;font-size:13px;font-weight:700;color:#111827!important;border-bottom:1px solid #e5e7eb}.invoice-items-table td{padding:16px 0;font-size:13px;color:#1f2937!important;border-bottom:1px solid #f3f4f6;vertical-align:top}.invoice-items-table .th-desc,.invoice-items-table .td-desc{text-align:left;white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important}.invoice-items-table .th-qty,.invoice-items-table .td-qty{text-align:center;width:75px}.invoice-items-table .th-amount,.invoice-items-table .td-amount{text-align:right;width:150px}.item-title{font-weight:500;color:#111827!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important;line-height:1.45}.item-subtitle{font-size:11.5px;color:#6b7280!important;margin-top:4px;white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important;line-height:1.5}.invoice-totals-wrapper{display:flex;justify-content:flex-end;margin-top:12px}.invoice-totals-table{width:320px}.totals-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13px;color:#374151!important}.totals-row .totals-label{color:#374151!important}.totals-row .totals-value{color:#111827!important;text-align:right}.totals-row.totals-grand{margin-top:6px;padding-top:10px;font-size:15.5px;color:#111827!important}.totals-row.totals-grand .totals-label{font-weight:700!important;color:#111827!important}.totals-highlight{font-size:16.5px;font-weight:800!important;color:#111827!important}.totals-paid-sub{color:#059669!important;padding-top:6px;border-top:1px dashed #e5e7eb;margin-top:4px}.totals-paid-sub .totals-label,.totals-paid-sub .totals-value{color:#059669!important}.totals-due-sub,.totals-due-sub .totals-label,.totals-due-sub .totals-value{color:#dc2626!important}.recorded-payments-block{margin-top:24px;padding:12px 16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px}.payments-header{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#4b5563!important;margin-bottom:8px}.payment-chip{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;color:#1f2937!important;border-bottom:1px solid #f3f4f6}.payment-chip:last-child{border-bottom:none}.payment-info-left{display:flex;align-items:center;gap:6px;font-size:12px;color:#4b5563!important}.payment-number{font-weight:600;color:#111827!important;font-family:var(--font-mono)}.payment-dot{color:#9ca3af!important}.payment-amount{font-weight:700;color:#059669!important}.invoice-footer-section{border-top:1px solid #e5e7eb;margin-top:36px;padding-top:20px;font-size:12px;color:#4b5563!important;line-height:1.5}.footer-notice{margin-bottom:12px}.footer-questions{color:#1f2937!important}.footer-questions strong{color:#111827!important}@media print{body *{visibility:hidden}.no-print{display:none!important}.invoice-modal-overlay{position:static!important;background:transparent!important;padding:0!important;margin:0!important;overflow:visible!important}.invoice-paper-sheet,.invoice-paper-sheet *{visibility:visible}.invoice-paper-sheet{position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:100%!important;padding:20mm!important;margin:0!important;box-shadow:none!important;border-radius:0!important;background:#fff!important;color:#000!important}@page{size:A4;margin:0}}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--text-primary)!important;-webkit-box-shadow:0 0 0px 1000px var(--bg-secondary) inset!important;box-shadow:0 0 0 1000px var(--bg-secondary) inset!important;transition:background-color 5000s ease-in-out 0s;color:var(--text-primary)!important}.search-box{position:relative;display:flex;align-items:center}.search-box .search-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;z-index:1}.search-box input.search-input,.search-box input{width:100%;background:var(--bg-secondary)!important;color:var(--text-primary)!important;border:1px solid var(--border-default)!important;border-radius:var(--radius-md);padding:8px 36px!important;font-size:13.5px;outline:none;transition:all .15s ease;box-shadow:var(--shadow-sm)}.search-box input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-glow)!important;background:var(--bg-secondary)!important}.search-box .search-clear{position:absolute;right:10px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:50%;transition:all .15s ease}.search-box .search-clear:hover{color:var(--text-primary);background:var(--bg-tertiary)}.modal-close,.modal-close-btn{background:transparent!important;border:none!important;color:var(--text-muted)!important;font-size:18px;cursor:pointer;padding:6px!important;border-radius:var(--radius-sm);line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}.modal-close:hover,.modal-close-btn:hover{color:var(--text-primary)!important;background:var(--bg-tertiary)!important}input[type=checkbox],input[type=radio]{accent-color:var(--primary);cursor:pointer}.custom-checkbox{width:18px;height:18px;border-radius:5px;background-color:#ffffff0d;border:1.5px solid var(--border-default);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);flex-shrink:0;-webkit-user-select:none;user-select:none}.custom-checkbox:hover{border-color:#e7b00880;background-color:#ffffff14}.custom-checkbox.checked{background-color:var(--primary);border-color:var(--primary);box-shadow:0 0 10px #e7b00859;color:#000}.custom-radio{width:18px;height:18px;border-radius:50%;background-color:#ffffff0a;border:2px solid var(--border-default);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease;flex-shrink:0}.custom-radio:hover{border-color:#e7b00880}.custom-radio.checked{border-color:var(--primary)}.custom-radio-dot{width:8px;height:8px;border-radius:50%;background-color:var(--primary);box-shadow:0 0 6px #e7b00866}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input[type=date]{color-scheme:dark}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.2) sepia(1) hue-rotate(5deg);cursor:pointer;opacity:.95;transition:opacity .15s ease,transform .15s ease}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;transform:scale(1.1)}.data-table tbody tr.clickable-row,.clickable-table tbody tr,tr.clickable-row{cursor:pointer;transition:background-color .15s ease}.data-table tbody tr.clickable-row:hover,.clickable-table tbody tr:hover,tr.clickable-row:hover{background-color:#e7b0080d!important}.data-table tbody tr.clickable-row:active,.clickable-table tbody tr:active,tr.clickable-row:active{background-color:#e7b0081a!important}.modal.card,.modal-content.card{padding:0!important}.text-danger{color:var(--danger)!important}.required-star{color:var(--danger);font-weight:700;margin-left:2px}.space-y-6>*+*{margin-top:24px!important}.space-y-5>*+*{margin-top:20px!important}.space-y-4>*+*{margin-top:16px!important}.space-y-3>*+*{margin-top:12px!important}.space-y-2>*+*{margin-top:8px!important}.mb-6{margin-bottom:24px!important}.mb-5{margin-bottom:20px!important}.mb-4{margin-bottom:16px!important}.mb-3{margin-bottom:12px!important}.mb-2{margin-bottom:8px!important}.gap-1{gap:4px!important}.gap-1\.5{gap:6px!important}.gap-2{gap:8px!important}.gap-2\.5{gap:10px!important}.gap-3{gap:12px!important}.gap-4{gap:16px!important}.gap-5{gap:20px!important}.gap-6{gap:24px!important}.spec-box-container{background:#0f172a99;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:8px 10px;display:flex;flex-direction:column;gap:5px;min-width:220px;max-width:320px;max-height:125px;overflow-y:auto;box-shadow:inset 0 1px 3px #0006;box-sizing:border-box}.spec-box-container::-webkit-scrollbar{width:4px}.spec-box-container::-webkit-scrollbar-track{background:transparent}.spec-box-container::-webkit-scrollbar-thumb{background:#e7b00859;border-radius:4px}.spec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 8px;background:#ffffff08;border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-sm);transition:background-color .12s ease}.spec-row:hover{background:#ffffff0f}.spec-key{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spec-val-number{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--primary);background:#e7b00824;border:1px solid rgba(231,176,8,.3);padding:1px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0}.spec-val-boolean-true{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--success);background:#10b98124;border:1px solid rgba(16,185,129,.3);padding:1px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0}.spec-val-boolean-false{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--danger);background:#ef444424;border:1px solid rgba(239,68,68,.3);padding:1px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0}.spec-val-text{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-primary);background:#ffffff0f;border:1px solid var(--border-subtle);padding:1px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0}