:root{--primary-white:#ffffff;--off-white:#fafbfc;--soft-white:#f8f9fa;--subtle-gray:#f1f3f5;--light-gray:#e9ecef;--border-gray:#dee2e6;--medium-gray:#adb5bd;--text-gray:#495057;--dark-text:#212529;--darker-text:#0c0e10;--accent-blue:#0b76ff;--accent-blue-light:#3aa0ff;--accent-blue-dark:#0a5ecc;--accent-green:#00d26a;--accent-orange:#ff9500;--accent-red:#ff3b30;--accent-purple:#8b5cf6;--accent-teal:#14b8a6;--gradient-blue:linear-gradient(135deg, #0b76ff 0%, #3aa0ff 100%);--gradient-green:linear-gradient(135deg, #00d26a 0%, #00ff87 100%);--gradient-orange:linear-gradient(135deg, #ff9500 0%, #ffaa33 100%);--gradient-purple:linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);--gradient-teal:linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);--gradient-subtle:linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.04);--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.06);--shadow-md:0 3px 8px rgba(0, 0, 0, 0.08);--shadow-lg:0 6px 16px rgba(0, 0, 0, 0.10);--shadow-xl:0 12px 32px rgba(0, 0, 0, 0.12);--shadow-accent:0 4px 12px rgba(11, 118, 255, 0.16);--shadow-success:0 4px 12px rgba(0, 210, 106, 0.16);--font-primary:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;--font-mono:'Menlo', 'Monaco', 'Courier New', monospace;--space-xs:4px;--space-sm:6px;--space-md:10px;--space-lg:14px;--space-xl:18px;--space-2xl:24px;--space-3xl:32px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-full:9999px;--timing-fast:0.15s cubic-bezier(0.4, 0, 0.2, 1);--timing-normal:0.2s cubic-bezier(0.4, 0, 0.2, 1);--timing-smooth:0.3s cubic-bezier(0.4, 0, 0.2, 1);--timing-luxe:0.5s cubic-bezier(0.19, 1, 0.22, 1);--header-height:68px;--sidebar-width:280px;--sidebar-collapsed:60px;--card-padding:12px;--card-gap:10px;--z-card:10;--z-dropdown:100;--z-sticky:500;--z-modal:1000}.billing-main{margin-left:var(--sidebar-width);margin-top:calc(var(--header-height) + 3px);padding:var(--space-xl) var(--space-lg);min-height:calc(100vh - var(--header-height));background:var(--off-white);transition:margin-left var(--timing-smooth);max-width:calc(100vw - var(--sidebar-width));overflow-x:hidden}.main-nav.collapsed~.billing-main{margin-left:var(--sidebar-collapsed);max-width:calc(100vw - var(--sidebar-collapsed))}.billing-main h2{font-size:1.25rem;font-weight:800;color:var(--darker-text);letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--space-sm) 0;background:var(--gradient-blue);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.billing-main .subheading{font-size:.75rem;font-weight:600;color:var(--text-gray);line-height:1.4;margin:0 0 var(--space-xl) 0;padding:var(--space-sm) var(--space-lg);background:rgb(11 118 255 / .05);border-left:2px solid var(--accent-blue);border-radius:var(--radius-md)}.billing-main .subheading strong{color:var(--accent-blue);font-weight:700}.billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-top:var(--space-xl);align-items:start}.form-section{background:var(--primary-white);border:1px solid var(--border-gray);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-sm);transition:all var(--timing-normal);position:relative;overflow:hidden;height:fit-content}.form-section::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-blue);opacity:0;transition:opacity var(--timing-normal)}.form-section:hover{box-shadow:var(--shadow-md);border-color:var(--accent-blue-light)}.form-section:hover::before{opacity:1}.form-section h3{font-size:.9375rem;font-weight:800;color:var(--darker-text);letter-spacing:-.01em;margin:0 0 var(--space-lg) 0;padding-bottom:var(--space-sm);border-bottom:1px solid var(--light-gray);display:flex;align-items:center;gap:var(--space-sm)}.form-section h3::before{content:'';width:3px;height:18px;background:var(--gradient-blue);border-radius:var(--radius-full);box-shadow:0 0 6px rgb(11 118 255 / .3)}.billing-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);border-bottom:1px solid var(--light-gray);flex-wrap:wrap;gap:var(--space-sm)}.billing-header h3{margin:0;padding:0;border:none;font-size:.9375rem;font-weight:800;color:var(--darker-text)}.billing-header h3::before{content:'';width:3px;height:18px;background:var(--gradient-blue);border-radius:var(--radius-full);margin-right:var(--space-sm);display:inline-block;vertical-align:middle}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);border:none;font-family:var(--font-primary);font-weight:700;font-size:.75rem;cursor:pointer;transition:all var(--timing-normal);user-select:none;min-height:34px;white-space:nowrap;letter-spacing:.01em;position:relative;overflow:hidden}.primary-btn{background:var(--gradient-blue);color:var(--primary-white);box-shadow:var(--shadow-accent)}.primary-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .3),transparent);transition:left 0.5s ease}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(11 118 255 / .28)}.primary-btn:hover::before{left:100%}.primary-btn:active{transform:translateY(0) scale(.98)}.secondary-btn{background:var(--primary-white);color:var(--text-gray);border:1px solid var(--border-gray);box-shadow:var(--shadow-xs)}.secondary-btn:hover{background:var(--soft-white);border-color:var(--accent-blue);color:var(--accent-blue);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.billing-summary,.billing-summary-min{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);border:1px solid var(--border-gray);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:all var(--timing-normal)}.billing-summary::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gradient-blue)}.billing-summary:hover{box-shadow:var(--shadow-md);border-color:var(--accent-blue-light);transform:translateY(-2px)}.billing-summary h4,.billing-summary-min h4{font-size:.875rem;font-weight:800;color:var(--darker-text);margin:0 0 var(--space-md) 0;background:var(--gradient-blue);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.billing-summary p,.billing-summary-min p{font-size:.75rem;font-weight:600;color:var(--dark-text);line-height:1.5;margin:var(--space-xs) 0;display:flex;align-items:baseline;gap:var(--space-sm)}.billing-summary strong,.billing-summary-min strong{color:var(--text-gray);font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;min-width:70px}#billing-form{display:flex;flex-direction:column;gap:var(--space-lg)}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-weight:700;color:var(--darker-text);font-size:.6875rem;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:var(--space-xs)}.form-group label::before{content:'';width:2px;height:10px;background:var(--gradient-blue);border-radius:var(--radius-full);opacity:.6}.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group textarea{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-gray);border-radius:var(--radius-md);background:var(--primary-white);font-size:.8125rem;font-weight:600;color:var(--dark-text);transition:all var(--timing-normal);font-family:var(--font-primary);min-height:36px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-blue);background:var(--soft-white);box-shadow:0 0 0 2px rgb(11 118 255 / .1);transform:translateY(-1px)}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--medium-gray);font-weight:500;font-size:.75rem}.form-group textarea{min-height:80px;resize:vertical;line-height:1.4;padding:var(--space-sm)}.form-group input.field-error{border-color:var(--accent-red);background:rgb(255 59 48 / .05)}.form-group input.field-success{border-color:var(--accent-green);background:rgb(0 210 106 / .05)}.form-group input.field-error:focus{box-shadow:0 0 0 2px rgb(255 59 48 / .1)}.form-group input.field-success:focus{box-shadow:0 0 0 2px rgb(0 210 106 / .1)}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.shake{animation:shake 0.3s ease-in-out}.invoice-filters{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--soft-white);border:1px solid var(--border-gray);border-radius:var(--radius-md);flex-wrap:wrap}.invoice-filters input[type="month"]{padding:var(--space-xs) var(--space-md);border:1px solid var(--border-gray);border-radius:var(--radius-sm);background:var(--primary-white);font-size:.75rem;font-weight:600;color:var(--dark-text);transition:all var(--timing-normal);font-family:var(--font-primary);min-height:32px;cursor:pointer}.invoice-filters input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 2px rgb(11 118 255 / .1)}.invoice-filters button{padding:var(--space-xs) var(--space-lg);border:none;border-radius:var(--radius-sm);font-weight:700;font-size:.75rem;cursor:pointer;transition:all var(--timing-normal);min-height:32px}.invoice-filters button:first-of-type{background:var(--gradient-blue);color:var(--primary-white);box-shadow:var(--shadow-accent)}.invoice-filters button:first-of-type:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(11 118 255 / .24)}.invoice-filters button:last-of-type{background:var(--gradient-teal);color:var(--primary-white);box-shadow:0 4px 12px rgb(20 184 166 / .16)}.invoice-filters button:last-of-type:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(20 184 166 / .24)}.invoice-table-wrapper{background:var(--primary-white);border:1px solid var(--border-gray);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs);max-height:450px;overflow-y:auto}.invoice-table{width:100%;border-collapse:collapse;background:var(--primary-white);font-size:.75rem}.invoice-table thead{background:var(--subtle-gray);position:sticky;top:0;z-index:var(--z-sticky)}.invoice-table thead th{padding:var(--space-md) var(--space-sm);text-align:left;font-weight:800;color:var(--darker-text);font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border-gray);white-space:nowrap;background:var(--subtle-gray)}.invoice-table thead th:first-child{padding-left:var(--space-lg);border-radius:var(--radius-md) 0 0 0}.invoice-table thead th:last-child{padding-right:var(--space-lg);text-align:center;border-radius:0 var(--radius-md) 0 0}.invoice-table tbody tr{border-bottom:1px solid var(--light-gray);transition:all var(--timing-fast);cursor:pointer}.invoice-table tbody tr:hover{background:var(--soft-white);box-shadow:inset 0 0 0 1px var(--accent-blue-light);transform:scale(1.001)}.invoice-table tbody tr:last-child{border-bottom:none}.invoice-table tbody td{padding:var(--space-md) var(--space-sm);color:var(--dark-text);font-size:.75rem;font-weight:600;vertical-align:middle;line-height:1.3}.invoice-table tbody td:first-child{padding-left:var(--space-lg);font-weight:700;color:var(--darker-text)}.invoice-table tbody td:last-child{padding-right:var(--space-lg);text-align:center}.invoice-table tbody tr.empty-row td{text-align:center;padding:var(--space-2xl);color:var(--text-gray);font-style:italic;font-size:.75rem}.status-badge{display:inline-flex;align-items:center;padding:3px var(--space-sm);border-radius:var(--radius-full);font-size:.5625rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;box-shadow:var(--shadow-xs);white-space:nowrap}.status-badge::before{content:'';width:5px;height:5px;border-radius:50%;margin-right:4px;background:currentColor;box-shadow:0 0 4px currentColor}.status-paid,.status-completed{background:linear-gradient(135deg,rgb(0 210 106 / .15),rgb(0 210 106 / .08));color:#059669;border:1px solid rgb(0 210 106 / .2)}.status-pending,.status-processing{background:linear-gradient(135deg,rgb(255 149 0 / .15),rgb(255 149 0 / .08));color:#d97706;border:1px solid rgb(255 149 0 / .2)}.status-overdue,.status-failed{background:linear-gradient(135deg,rgb(255 59 48 / .15),rgb(255 59 48 / .08));color:#dc2626;border:1px solid rgb(255 59 48 / .2)}.status-draft{background:linear-gradient(135deg,rgb(148 163 184 / .15),rgb(148 163 184 / .08));color:var(--text-gray);border:1px solid var(--border-gray)}.invoice-table button,.download-invoice-btn{padding:4px 10px;border-radius:var(--radius-sm);border:none;font-size:.6875rem;font-weight:700;cursor:pointer;transition:all var(--timing-fast);white-space:nowrap;letter-spacing:.02em;text-transform:uppercase;display:inline-flex;align-items:center;gap:3px}.invoice-table button:hover,.download-invoice-btn:hover{transform:translateY(-1px)}.invoice-table button:active,.download-invoice-btn:active{transform:translateY(0) scale(.97)}.invoice-table button[onclick*="download"],.download-invoice-btn{background:var(--gradient-blue);color:var(--primary-white);box-shadow:var(--shadow-xs)}.invoice-table button[onclick*="download"]:hover,.download-invoice-btn:hover{box-shadow:var(--shadow-accent)}.invoice-table button[onclick*="view"]{background:var(--gradient-teal);color:var(--primary-white);box-shadow:var(--shadow-xs)}.invoice-table button[onclick*="view"]:hover{box-shadow:0 4px 12px rgb(20 184 166 / .2)}.invoice-table td span:not(.status-badge){color:var(--medium-gray);font-style:italic;font-weight:500;font-size:.6875rem}#toast-container{position:fixed;top:calc(var(--header-height) + var(--space-lg));right:var(--space-lg);z-index:9999;display:flex;flex-direction:column;gap:var(--space-xs);pointer-events:none}.toast{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:700;font-size:.75rem;color:var(--primary-white);box-shadow:var(--shadow-lg);pointer-events:auto;animation:slideInRight 0.3s ease-out;min-width:240px;backdrop-filter:blur(12px);display:flex;align-items:center;gap:var(--space-sm)}.toast::before{content:'';width:14px;height:14px;flex-shrink:0;border-radius:50%;background:currentColor;opacity:.3}.toast.success{background:linear-gradient(135deg,rgb(0 210 106 / .95),rgb(0 255 135 / .95))}.toast.error{background:linear-gradient(135deg,rgb(255 59 48 / .95),rgb(220 38 38 / .95))}.toast.info{background:linear-gradient(135deg,rgb(11 118 255 / .95),rgb(58 160 255 / .95))}@keyframes slideInRight{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}.invoice-table-wrapper::-webkit-scrollbar{width:5px;height:5px}.invoice-table-wrapper::-webkit-scrollbar-track{background:var(--subtle-gray);border-radius:var(--radius-full)}.invoice-table-wrapper::-webkit-scrollbar-thumb{background:var(--medium-gray);border-radius:var(--radius-full);transition:background var(--timing-normal)}.invoice-table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--accent-blue)}.loading-state{text-align:center;padding:var(--space-2xl);color:var(--text-gray);font-size:.8125rem}.loading-spinner{width:32px;height:32px;border:3px solid var(--light-gray);border-top:3px solid var(--accent-blue);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto var(--space-md)}@keyframes spin{to{transform:rotate(360deg)}}