@import"https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;500;700&display=swap";:root{--font-family-sans: "Red Hat Display", sans-serif;--font-weight-light: 300;--font-weight-medium: 500;--font-weight-bold: 700;--gradient-primary: linear-gradient(to right, #cdffd8, #94b9ff);--background-gradient: linear-gradient(to bottom right, #171758, #000000);--text-color: #ffffff;--text-color-secondary: rgba(255, 255, 255, .7);--text-color-emphasis: #ffffff;--text-color-muted: rgba(255, 255, 255, .5);--button-text-color: #171758;--surface: rgba(255, 255, 255, .05);--border-color: rgba(255, 255, 255, .1);--primary-color: #94b9ff;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--border-radius: .5rem;--border-radius-large: .75rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--color-blue-100: #e3f2fd;--color-blue-500: #2196f3;--color-blue-700: #1976d2;--color-green-100: #e8f5e9;--color-green-500: #4caf50;--color-green-700: #388e3c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-sans);font-weight:var(--font-weight-light);background:var(--background-gradient);background-color:var(--background-gradient);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}.App{display:flex;flex-direction:column;min-height:100vh}h1,h2,h3,h4,h5,h6,.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}h1{font-size:2.5rem;font-weight:var(--font-weight-medium)}.main-content,.main-content-bottom-nav{flex-grow:1;padding:var(--spacing-4);overflow-y:auto;max-width:1400px;margin:0 auto;width:100%}.main-content-bottom-nav{padding-bottom:120px}@media(min-width:768px){.main-content,.main-content-bottom-nav{padding:var(--spacing-8);padding-bottom:120px}}.page-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-6);margin-bottom:var(--spacing-6);flex-wrap:nowrap}.page-title{display:flex;align-items:center;gap:var(--spacing-4);flex:1;min-width:0}.page-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-actions{display:flex;gap:var(--spacing-4);align-items:center;flex-shrink:0}.header-actions{display:flex;align-items:center;gap:var(--spacing-3);flex-wrap:wrap;flex-shrink:0}.save-confirmation{color:var(--color-green-500);font-size:.875rem;font-weight:500;white-space:nowrap}button,.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-2) var(--spacing-5);border-radius:var(--border-radius);border:none;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);cursor:pointer;transition:all .2s ease-in-out;text-decoration:none;background:var(--gradient-primary);color:var(--button-text-color);box-shadow:var(--shadow-md)}button:hover,.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:var(--surface);color:var(--text-color);border:1px solid var(--border-color)}.btn-pill,.btn-icon{background:var(--surface);color:var(--text-color);border:1px solid var(--border-color);border-radius:999px;box-shadow:none;font-size:.85rem;font-weight:var(--font-weight-medium);gap:var(--spacing-2);transition:background .15s ease,border-color .15s ease,color .15s ease}.btn-pill{padding:6px 14px}.btn-icon{padding:7px 9px;line-height:1}.btn-pill:hover,.btn-icon:hover{background:var(--surface-hover, rgba(255, 255, 255, .06));border-color:var(--primary-color);color:var(--text-color-emphasis);transform:none;box-shadow:none}.card{background-color:var(--surface);border-radius:var(--border-radius);padding:var(--spacing-6);box-shadow:var(--shadow-md)}.table-container{background-color:var(--surface);border-radius:var(--border-radius);box-shadow:var(--shadow-md);overflow:hidden;overflow-x:auto}table{width:100%;border-collapse:collapse}thead{background-color:#ffffff1a}th{padding:var(--spacing-4) var(--spacing-6);text-align:left;font-size:.875rem;font-weight:var(--font-weight-light);color:var(--text-color);text-transform:uppercase;letter-spacing:.05em}td{padding:var(--spacing-4) var(--spacing-6);border-top:1px solid var(--border-color);color:var(--text-color)}tbody tr:hover{background-color:#ffffff0d}.form-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-4)}@media(min-width:768px){.form-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-6)}}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:var(--font-weight-light);margin-bottom:var(--spacing-2);color:var(--text-color-secondary);font-size:.9rem}.form-group input,.form-group select,.form-group textarea{background-color:#0003;border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-3);color:var(--text-color);font-size:1rem;font-family:var(--font-family-sans);font-weight:var(--font-weight-light);transition:border-color .2s,box-shadow .2s;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#94b9ff;box-shadow:0 0 0 3px #94b9ff4d}.form-actions{display:flex;flex-direction:column;gap:var(--spacing-4);margin-top:var(--spacing-6)}@media(min-width:768px){.form-actions{flex-direction:row;justify-content:flex-end;margin-top:var(--spacing-8)}}fieldset.form-section{border:0;padding:0;margin:0;margin-bottom:var(--spacing-8)}fieldset.form-section:last-of-type{margin-bottom:0}fieldset.form-section legend{font-size:1.25rem;font-weight:var(--font-weight-light);color:var(--text-color-secondary);padding:0;margin-bottom:var(--spacing-4);width:100%;border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-3)}.auth-form-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4)}.auth-form{width:100%;max-width:420px;background-color:var(--surface);border-radius:var(--border-radius);padding:var(--spacing-8) var(--spacing-6);border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}.auth-title{font-size:2rem;font-weight:var(--font-weight-bold);text-align:center;margin-bottom:var(--spacing-2)}.auth-subtitle{text-align:center;color:var(--text-color-secondary);margin-bottom:var(--spacing-8)}.auth-form .form-group{margin-bottom:var(--spacing-5)}.auth-form .form-actions button{width:100%;padding:var(--spacing-4);font-size:1.1rem}.password-input-container{position:relative;display:flex;align-items:center}.password-input-container input{padding-right:3.5rem}.password-toggle-btn{position:absolute;right:0;top:0;bottom:0;background:transparent;border:none;color:var(--text-color-secondary);padding:0 var(--spacing-4);cursor:pointer;font-size:1.2rem;display:flex;align-items:center}.password-toggle-btn:hover{color:var(--text-color)}.forgot-password-link{text-align:center;margin-top:var(--spacing-6)}.forgot-password-link a{color:var(--text-color-secondary);font-size:.9rem;text-decoration:none}.forgot-password-link a:hover{color:var(--text-color);text-decoration:underline}.invoice-form .form-section{background-color:var(--surface);border-radius:var(--border-radius);padding:var(--spacing-4);margin-bottom:var(--spacing-6)}@media(min-width:768px){.invoice-form .form-section{padding:var(--spacing-6);margin-bottom:var(--spacing-8)}}.invoice-form .form-section h2{font-size:1.25rem;font-weight:var(--font-weight-light);margin-bottom:var(--spacing-6)}.invoice-item-table{width:100%;border-collapse:separate;border-spacing:0 var(--spacing-2)}.invoice-item-table thead{display:none}@media(min-width:992px){.invoice-item-table thead{display:table-header-group}}.invoice-item-table thead th{text-align:left;font-weight:var(--font-weight-medium);color:var(--text-color-secondary);padding:var(--spacing-3) var(--spacing-4);border-bottom:2px solid var(--border-color);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.invoice-item-table tbody tr{display:block;background-color:#00000026;transition:background-color .2s;border-radius:var(--border-radius);border:1px solid var(--border-color);padding:var(--spacing-4);margin-bottom:var(--spacing-4)}@media(min-width:992px){.invoice-item-table tbody tr{display:table-row;border:none;border-radius:0;padding:0;margin-bottom:0}.invoice-item-table tbody tr:hover{background-color:#00000040}}.invoice-item-table tbody td{display:block;padding:var(--spacing-2) 0;border:none;text-align:right}.invoice-item-table tbody td:before{content:attr(data-label);float:left;font-weight:var(--font-weight-medium);color:var(--text-color-secondary)}@media(min-width:992px){.invoice-item-table tbody td{display:table-cell;padding:var(--spacing-2) var(--spacing-4);vertical-align:middle;border-top:1px solid var(--border-color);text-align:left}.invoice-item-table tbody td:before{display:none}}.invoice-item-table input,.invoice-item-table select{width:100%;background-color:#0003;border:1px solid var(--border-color);border-radius:var(--border-radius);color:var(--text-color);font-family:var(--font-family-sans);font-weight:var(--font-weight-light);padding:var(--spacing-2) var(--spacing-3)}@media(min-width:992px){.invoice-item-table input,.invoice-item-table select{background-color:transparent;border:none;border-radius:0;padding:var(--spacing-2) 0}.invoice-item-table input:focus,.invoice-item-table select:focus{outline:none;background-color:#ffffff0d}}.invoice-item-table .source{width:10%}.invoice-item-table .product{width:15%}.invoice-item-table .desc{width:25%}.invoice-item-table .qty{width:7%}.invoice-item-table .price,.invoice-item-table .subtotal{width:8%}.invoice-item-table .tax{width:7%}.invoice-item-table .tax-amount{width:8%}.invoice-item-table .total{width:7%}.invoice-item-table .actions{width:5%}.invoice-item-table th.qty,.invoice-item-table th.price,.invoice-item-table th.subtotal,.invoice-item-table th.tax-amount,.invoice-item-table th.total,.invoice-item-table .qty,.invoice-item-table .price,.invoice-item-table .subtotal,.invoice-item-table .tax-amount,.invoice-item-table .total,.invoice-item-table .qty input,.invoice-item-table .price input,.invoice-item-table .actions{text-align:right}.remove-item-btn{background:none;border:none;color:#ff7b7b;font-size:1.2rem;cursor:pointer;transition:color .3s}.remove-item-btn:hover{color:#ff4d4f}.add-item-btn{margin-top:var(--spacing-4);font-weight:var(--font-weight-medium);color:var(--text-color);background:none;border:1px dashed var(--border-color);width:100%;padding:var(--spacing-3)}.add-item-btn:hover{background-color:var(--surface);border-color:#94b9ff}.summary-section{margin-top:var(--spacing-6)}.summary-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-4);align-items:start}@media(min-width:768px){.summary-grid{grid-template-columns:1fr 1fr;gap:var(--spacing-8)}}.summary-details{background-color:var(--surface);border-radius:var(--border-radius);padding:var(--spacing-6);border:1px solid var(--border-color)}.summary-details p{display:flex;justify-content:space-between;margin-bottom:var(--spacing-3);font-size:1rem}.summary-details .grand-total{font-weight:var(--font-weight-medium);font-size:1.25rem;margin-top:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--border-color)}.error-message{color:#ff7b7b;background-color:#ff7b7b1a;border:1px solid #ff7b7b;padding:var(--spacing-4);border-radius:var(--border-radius);margin-bottom:var(--spacing-6)}.invoice-preview-container{width:100%;display:flex;justify-content:center;align-items:flex-start;padding:var(--spacing-8) 0}.invoice-preview-container iframe{width:100%;max-width:800px;aspect-ratio:1 / 1.414;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-lg)}.invoice-details-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-8);margin-top:var(--spacing-8)}@media(min-width:1024px){.invoice-details-grid{grid-template-columns:1fr 400px}.invoice-preview-container{padding:0}}.invoice-status-badge{display:inline-block;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--border-radius);font-size:.9rem;font-weight:var(--font-weight-medium);text-transform:uppercase;vertical-align:middle}.invoice-meta-data{background:var(--surface);padding:var(--spacing-6);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:var(--spacing-6)}.invoice-meta-data h2{font-size:1.2rem;margin-bottom:var(--spacing-4)}.invoice-meta-data p{margin-bottom:var(--spacing-3)}.project-number{color:var(--text-color-secondary);font-weight:var(--font-weight-light)}.planning-item-stats{display:flex;gap:var(--spacing-2);justify-content:flex-end}.stat-badge{background-color:#ffffff1a;padding:var(--spacing-1) var(--spacing-3);border-radius:999px;font-size:.8rem;font-weight:var(--font-weight-medium);display:inline-flex;align-items:center}.stat-value{text-align:right;width:100%}.btn{display:flex;align-items:center;gap:var(--spacing-2)}.content-layout{display:grid;grid-template-columns:1fr;gap:var(--spacing-6)}@media(min-width:992px){.content-layout{grid-template-columns:2fr 1fr;gap:var(--spacing-8)}.sidebar-area{display:none}}.main-content-area,.sidebar-area{display:flex;flex-direction:column;gap:var(--spacing-6)}.card-header{margin-bottom:var(--spacing-4);display:flex;align-items:center;gap:var(--spacing-3);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-3)}.card-header h2{font-size:1.25rem;font-weight:var(--font-weight-medium)}.detail-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2);padding:var(--spacing-3) 0;border-bottom:1px solid var(--border-color)}@media(min-width:768px){.detail-row{flex-direction:row;justify-content:space-between;align-items:center}}.detail-row:last-child{border-bottom:none}.detail-label{display:flex;align-items:center;gap:var(--spacing-3);color:var(--text-color-secondary);font-weight:var(--font-weight-light)}.detail-value{font-weight:var(--font-weight-medium);text-align:left;width:100%}@media(min-width:768px){.detail-value{text-align:right;width:auto}}.info-message{background-color:var(--surface);border:1px solid var(--border-color);padding:var(--spacing-4);border-radius:var(--border-radius);color:var(--text-color-secondary)}.header-input{font-size:2.5rem;font-weight:var(--font-weight-light);background-color:transparent;border:none;color:var(--text-color);border-bottom:2px solid var(--border-color);width:100%}.form-control-inline{background-color:transparent;border:none;border-bottom:1px solid var(--border-color);color:var(--text-color);width:100%;padding:var(--spacing-1) 0}.form-control-inline:focus{outline:none;border-bottom-color:var(--primary-color)}h2{font-size:1.8rem}@media(max-width:768px){h1{font-size:1.8rem}h2{font-size:1.5rem}.card{padding:var(--spacing-4)}.invoice-detail-page .page-header{flex-direction:column;align-items:flex-start}}.planning-list-item{display:flex;flex-direction:column;gap:var(--spacing-2)}@media(min-width:768px){.planning-list-item{flex-direction:row;justify-content:space-between;align-items:center}}.planning-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-6)}@media(min-width:992px){.planning-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-8)}}.billing-header h2{width:100%;display:flex;justify-content:space-between}.detail-section{background-color:#ffffff12;border-radius:var(--border-radius);padding:var(--spacing-4);margin-bottom:var(--spacing-4)}.detail-section:last-child{margin-bottom:0}.detail-section h3{font-size:1rem;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-3);color:var(--text-color-secondary);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:var(--spacing-2)}.detail-section p{display:flex;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-2)}.detail-section p strong{color:var(--text-color-secondary);font-weight:var(--font-weight-light);min-width:60px}.detail-section a{color:#94b9ff;text-decoration:none;display:inline-flex;align-items:center;gap:var(--spacing-2)}.detail-section a:hover{text-decoration:underline}.total-amount{font-size:1.5rem;font-weight:var(--font-weight-bold)}.confirm-modal-body{display:flex;flex-direction:column;gap:var(--spacing-5)}.confirm-modal-body .form-group{gap:var(--spacing-2)}.attachment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-3)}.attachment-item{display:flex;align-items:center;justify-content:space-between;background-color:#0003;padding:var(--spacing-3);border-radius:var(--border-radius);transition:background-color .2s}.attachment-item:hover{background-color:#0000004d}.attachment-info{display:flex;align-items:center;gap:var(--spacing-3)}.attachment-info svg{color:var(--text-color-secondary)}.attachment-item a{font-weight:var(--font-weight-medium)}.attachment-placeholder{color:var(--text-color-secondary);font-style:italic}.attachment-upload-section{margin-top:var(--spacing-4);border-top:1px solid var(--border-color);padding-top:var(--spacing-4)}.attachment-upload-section .file-input{width:100%;margin-bottom:var(--spacing-3)}.send-invoice-modal-content{display:flex;flex-direction:column;gap:var(--spacing-4)}.send-invoice-modal-content p{line-height:1.6;color:var(--text-color-secondary)}.send-invoice-modal-content .form-group{margin-bottom:0}.auto-bcc-notice{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-3);border:1px solid var(--border-color);border-radius:var(--border-radius);background:#ffffff0a}.auto-bcc-label{font-size:.8rem;color:var(--text-color-secondary)}.auto-bcc-chips{display:flex;flex-wrap:wrap;gap:.4rem}.auto-bcc-chip{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:999px;background:#ffffff14;border:1px solid var(--border-color);font-size:.85rem;color:var(--text-color);line-height:1.2}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal-content{background:#10102c;border:1px solid var(--border-color);padding:var(--spacing-6);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);width:90%;max-width:700px;color:var(--text-color)}.modal-content h2,.modal-content h3{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:var(--font-weight-light)}.modal-content h2{font-size:1.75rem;margin-bottom:var(--spacing-6);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-4)}.modal-content h3.project-group-header{font-size:1.2rem;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-4)}.planning-items-list{max-height:60vh;overflow-y:auto;padding-right:var(--spacing-2)}.project-group{margin-bottom:var(--spacing-6)}.planning-item{display:flex;align-items:center;background-color:#0003;border:1px solid transparent;border-radius:var(--border-radius);margin-bottom:var(--spacing-3);padding:var(--spacing-4);cursor:pointer;transition:all .2s ease-in-out}.planning-item:hover{border-color:var(--border-color);background-color:#0000004d}.planning-item.selected{border-color:#94b9ff;background-color:#94b9ff1a}.planning-item.disabled{opacity:.5;cursor:not-allowed;background-color:#0000001a}.planning-item input[type=checkbox]{display:none}.planning-item-content{display:flex;justify-content:space-between;width:100%;align-items:center;margin-left:var(--spacing-4)}.planning-item-details{display:flex;flex-direction:column;gap:var(--spacing-1)}.planning-item-details .item-product-name{font-weight:var(--font-weight-medium);color:var(--text-color);font-size:1rem}.planning-item-details .item-date{font-size:.85rem;color:var(--text-color-secondary)}.planning-item-stats{display:grid;grid-template-columns:repeat(3,80px);gap:var(--spacing-6);text-align:right}.planning-item-stats .stat{display:flex;flex-direction:column}.planning-item-stats .stat-value{font-weight:var(--font-weight-medium);font-size:1rem}.planning-item-stats .stat-label{font-size:.75rem;color:var(--text-color-secondary);text-transform:uppercase}.modal-actions{display:flex;justify-content:flex-end;gap:var(--spacing-4);margin-top:var(--spacing-6);padding-top:var(--spacing-6);border-top:1px solid var(--border-color)}.planning-item{display:flex;align-items:center}.planning-item-content{align-items:center}.bottom-nav{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:95%;max-width:500px;display:flex;justify-content:space-around;align-items:center;background-color:#0006;backdrop-filter:blur(1.5rem);-webkit-backdrop-filter:blur(1.5rem);border:1px solid rgba(255,255,255,.1);border-radius:30px;height:60px;z-index:1000;box-shadow:0 8px 32px #0000005e}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-color-secondary);text-decoration:none;font-size:.75rem;padding:.5rem;transition:all .2s ease-in-out;background:none;border:none;cursor:pointer;flex-grow:1;height:100%;border-radius:25px}.nav-item:hover,.nav-item.active{color:var(--text-color);background-color:#ffffff0d}.nav-item.active{background:linear-gradient(to top,rgba(148,185,255,.1),transparent);color:var(--primary-color)}.nav-item svg{font-size:1.25rem;margin-bottom:.25rem}.nav-item-divider{width:1px;height:60%;background-color:var(--border-color)}.profile-btn{flex-grow:0;min-width:60px}.catalogue-dropdown,.profile-dropdown{position:absolute;bottom:65px;background-color:#000c;border-radius:var(--border-radius);padding:var(--spacing-2);box-shadow:var(--shadow-lg);z-index:1001;border:1px solid var(--border-color)}.catalogue-dropdown{right:70px;width:180px}.profile-dropdown{right:5px;min-width:140px}.dropdown-item{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-2) var(--spacing-3);background:transparent;color:var(--text-color-secondary);text-decoration:none;border:none;border-radius:var(--border-radius);font-size:.9rem;white-space:nowrap;text-align:left;cursor:pointer}.dropdown-item:hover{background:#ffffff0d;color:var(--text-color)}.loading-spinner-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.loading-spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}