@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";#root{max-width:100%;margin:0;padding:0}.app-layout{background-color:var(--color-background);flex-direction:column;min-height:100vh;display:flex;position:relative}.app-header{background-color:var(--glass-bg);height:80px;-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--color-border);z-index:1000;align-items:center;display:flex;position:sticky;top:0}.header-container{width:100%;max-width:1440px;padding:0 var(--spacing-4);justify-content:space-between;align-items:center;gap:var(--spacing-4);margin:0 auto;display:flex}.header-logo .logo-link{align-items:center;gap:var(--spacing-3);text-decoration:none;display:flex}.logo-wrapper{background:var(--color-white);border-radius:var(--border-radius-md);width:48px;height:48px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);justify-content:center;align-items:center;padding:6px;display:flex}.app-logo{object-fit:contain;max-width:100%;max-height:100%}.brand-info{flex-direction:column;display:flex}.brand-name{color:var(--color-primary);letter-spacing:-.02em;font-size:1.25rem;font-weight:700;line-height:1.1}.brand-tagline{color:var(--color-text-secondary);font-size:.75rem;font-weight:500}.header-nav{background:var(--color-primary-light);border-radius:var(--border-radius-full);padding:6px;display:none}.mobile-menu-button{cursor:pointer;padding:var(--spacing-2);z-index:1100;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.mobile-menu{top:100%;right:var(--spacing-4);background-color:var(--color-white);border-radius:var(--border-radius-lg);width:260px;box-shadow:var(--shadow-premium);border:1px solid var(--color-border);z-index:1000;padding:var(--spacing-2);transform-origin:100% 0;flex-direction:column;gap:0;animation:.25s ease-out dropdownFade;display:flex;position:absolute}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.mobile-nav-item{padding:var(--spacing-3)var(--spacing-4);color:var(--color-text-secondary);border-radius:var(--border-radius-md);align-items:center;gap:var(--spacing-3);cursor:pointer;text-align:left;background:0 0;border:none;width:100%;font-family:inherit;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--color-primary);background-color:var(--color-primary-light)}.mobile-nav-item.logout-link{margin-top:var(--spacing-2);padding-top:var(--spacing-3);border-top:1px solid var(--color-border);border-radius:0}.nav-item{padding:var(--spacing-2)var(--spacing-4);color:var(--color-text-secondary);border-radius:var(--border-radius-full);font-size:.9rem;font-weight:500;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-item:hover{color:var(--color-primary)}.nav-item.active{background-color:var(--color-white);color:var(--color-primary);box-shadow:var(--shadow-sm)}.header-actions{align-items:center;gap:var(--spacing-3);display:flex}.header-profile .logout-button{background-color:var(--color-text);color:var(--color-white);padding:var(--spacing-2)var(--spacing-4);border-radius:var(--border-radius-full);cursor:pointer;border:none;font-size:.85rem;font-weight:600;transition:all .3s}.header-profile .logout-button:hover{background-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.app-content{padding:var(--spacing-4);flex-grow:1}.desktop-only{display:none}@media (min-width:768px){.desktop-only{display:block}}.page-container{gap:var(--spacing-5);flex-direction:column;display:flex}.page-section{width:100%}.section-title{margin-bottom:var(--spacing-4);color:var(--color-text);font-size:1.5rem;font-weight:600}.hero-section{padding:var(--spacing-5)var(--spacing-3);background:linear-gradient(135deg,var(--color-primary)0%,#0056b3 100%);color:var(--color-white);border-radius:var(--border-radius-lg);text-align:center}.hero-title{margin-bottom:var(--spacing-2);font-size:1.75rem;font-weight:700}.hero-subtitle{opacity:.9;max-width:600px;margin:0 auto;font-size:1rem}.stats-grid{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}.stat-card{padding:var(--spacing-4);background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);border-left:5px solid;align-items:center;transition:transform .2s,box-shadow .2s;display:flex}.stat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}.stat-card.clickable{cursor:pointer}.stat-card.success{border-color:var(--color-success)}.stat-card.danger{border-color:var(--color-danger)}.stat-card.info{border-color:var(--color-info)}.stat-icon{margin-right:var(--spacing-4);font-size:1.75rem;line-height:1}.stat-card.success .stat-icon{color:var(--color-success)}.stat-card.danger .stat-icon{color:var(--color-danger)}.stat-card.info .stat-icon{color:var(--color-info)}.stat-info .stat-value{color:var(--color-text);margin:0;font-size:2rem;font-weight:700}.stat-info .stat-label{color:var(--color-text-secondary);margin:0;font-size:.9rem}.services-grid{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}.service-card{padding:var(--spacing-4);background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);text-align:left;cursor:pointer;align-items:center;width:100%;transition:border-color .2s,box-shadow .2s;display:flex}.service-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.service-icon{color:var(--color-primary);margin-right:var(--spacing-4);background-color:#007bff1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.5rem;display:flex}.service-content{flex-grow:1}.service-title{color:var(--color-text);margin-bottom:var(--spacing-1);font-size:1.1rem;font-weight:600}.service-subtitle{color:var(--color-text-secondary);margin:0;font-size:.9rem}.service-arrow{color:var(--color-text-secondary);margin-left:var(--spacing-3);font-size:1.25rem}.dashboard-controls{gap:var(--spacing-4);background-color:var(--color-white);padding:var(--spacing-4);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-6);flex-direction:column;display:flex}.controls-top-row{gap:var(--spacing-4);flex-direction:column;display:flex}@media (min-width:768px){.controls-top-row{flex-direction:row;justify-content:space-between;align-items:center}}.filter-group{gap:var(--spacing-2);padding-bottom:2px;display:flex;overflow-x:auto}.filter-button{align-items:center;gap:var(--spacing-2);padding:var(--spacing-2)var(--spacing-4);background-color:var(--color-background);border-radius:var(--border-radius-md);color:var(--color-text-secondary);white-space:nowrap;border:2.5px solid #0000;flex-direction:row;font-size:.95rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.filter-button:hover{background-color:var(--color-white);border-color:var(--color-primary-light);transform:translateY(-1px)}.filter-button.active{background-color:var(--color-primary);color:var(--color-white);box-shadow:0 4px 12px var(--color-primary-light)}.filter-count{background:#0000001a;border-radius:10px;padding:2px 8px;font-size:.8rem}.filter-button.active .filter-count{background:#fff3}.add-job-btn{align-items:center;gap:var(--spacing-2);padding:var(--spacing-3)var(--spacing-6);height:max-content;display:flex}.modal-header{padding:var(--spacing-6)var(--spacing-6)0;justify-content:space-between;align-items:center;display:flex}.modal-title{margin:0;padding:0}.close-modal{color:var(--color-text-tertiary);cursor:pointer;background:0 0;border:none;align-items:center;font-size:1.5rem;transition:color .2s;display:flex}.close-modal:hover{color:var(--color-danger)}.search-bar{align-items:center;gap:var(--spacing-3);background-color:var(--color-background);border-radius:var(--border-radius-md);padding:0 var(--spacing-3);border:1px solid var(--color-border);display:flex}.search-bar input{padding:var(--spacing-3)0;background:0 0;border:none;width:100%;font-size:1rem}.search-bar input:focus{outline:none}.button-primary{justify-content:center;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);background-color:var(--color-primary);color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;border:none;font-size:1rem;font-weight:500;transition:background-color .2s;display:flex}.button-primary:hover{background-color:var(--color-primary-hover)}.complaint-list{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}.complaint-card{background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);border-left:5px solid}.complaint-card.pending{border-color:var(--color-warning)}.complaint-card.completed{border-color:var(--color-success)}.customer-history-section{margin-top:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--color-border)}.history-header{align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-3);color:var(--color-text);font-size:.9rem;font-weight:700;display:flex}.history-icon{color:var(--color-primary)}.history-items{gap:var(--spacing-2);flex-direction:column;display:flex}.history-item{background:var(--color-background);border-radius:var(--border-radius-sm);border:1px solid var(--color-border);padding:10px 12px;font-size:.8rem}.history-item-top{justify-content:space-between;align-items:center;margin-bottom:.25rem;display:flex}.history-item-no{color:var(--color-text);font-weight:700}.history-status{text-transform:uppercase;border-radius:12px;padding:2px 8px;font-size:.7rem;font-weight:800}.history-status.pending{background:var(--color-warning-light);color:var(--color-warning)}.history-status.completed{background:var(--color-success-light);color:var(--color-success)}.history-item-details{color:var(--color-text-secondary);line-height:1.4}.history-item-date{color:var(--color-text-tertiary);margin-top:.25rem;font-size:.75rem}.no-history{color:var(--color-text-tertiary);text-align:center;padding:var(--spacing-2);font-size:.85rem}.action-inputs{gap:var(--spacing-3);margin:var(--spacing-4)0;flex-direction:column;display:flex}.action-input-wrapper{align-items:center;display:flex;position:relative}.action-input-wrapper .input-icon{left:var(--spacing-3);color:var(--color-text-tertiary);font-size:1rem;position:absolute}.action-input-wrapper .form-input,.action-input-wrapper .form-textarea{padding-left:var(--spacing-10)}.payment-summary{background:var(--color-white);padding:var(--spacing-4);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--color-primary-light)}.reminder-list{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}.reminder-card{background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);border-left:5px solid}.reminder-card.overdue{border-color:var(--color-danger)}.overdue-date{color:var(--color-danger);font-weight:600}.action-button{padding:var(--spacing-2)var(--spacing-4);border-radius:var(--border-radius-md);cursor:pointer;border:none;font-weight:500;transition:background-color .2s}.action-button:hover{opacity:.9}.card-header{padding:var(--spacing-3)var(--spacing-4);border-bottom:1px solid var(--color-border);cursor:pointer;justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--color-text);font-weight:600}.status-badge{align-items:center;gap:var(--spacing-2);padding:var(--spacing-1)var(--spacing-3);text-transform:uppercase;border-radius:999px;font-size:.8rem;font-weight:600;display:flex}.status-badge.pending{color:#856404;background-color:#ffc1071a}.status-badge.completed{color:var(--color-success);background-color:#28a7451a}.status-badge.overdue{color:var(--color-danger);background-color:#dc35451a}.card-content{padding:var(--spacing-4);gap:var(--spacing-3);display:grid}.info-row{align-items:flex-start;gap:var(--spacing-3);font-size:.9rem;line-height:1.4;display:flex}.info-row-icon{color:var(--color-text-secondary);flex-shrink:0;margin-top:1px}.info-row-label{color:var(--color-text-secondary);flex-shrink:0;min-width:85px;font-weight:500}.info-row-value{color:var(--color-text);word-break:break-word;flex:1;font-weight:500}.card-actions{padding:var(--spacing-4);border-top:1px solid var(--color-border);gap:var(--spacing-3);background-color:var(--color-background);flex-direction:column;display:flex}.payment-options{gap:var(--spacing-3);display:flex}.payment-button{justify-content:center;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;flex:1;transition:all .2s;display:flex}.payment-button.selected{background-color:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}.form-label{margin-bottom:var(--spacing-2);font-weight:500}.form-textarea{width:100%;padding:var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-family:inherit;font-size:1rem}.form-textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #007bff1a}.modal-backdrop{z-index:2000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-white);padding:var(--spacing-5);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);width:90%;max-width:500px}.modal-title{margin-bottom:var(--spacing-4);text-align:center;font-size:1.5rem;font-weight:600}.form-grid{gap:var(--spacing-4);display:grid}.form-input{width:100%;padding:var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-family:inherit;font-size:1rem}.modal-actions{justify-content:flex-end;gap:var(--spacing-3);margin-top:var(--spacing-5);display:flex}.button-secondary{justify-content:center;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3);background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;font-size:1rem;font-weight:500;display:flex}@media (min-width:768px){.app-content{padding:var(--spacing-5)var(--spacing-6)}.header-nav{justify-content:center;gap:var(--spacing-2);flex-grow:1;display:flex}.mobile-menu-button{display:none}.nav-item{padding:var(--spacing-2)var(--spacing-3);color:var(--color-text-secondary);border-radius:var(--border-radius-md);font-weight:500;transition:color .2s,background-color .2s}.nav-item:hover{color:var(--color-text);background-color:var(--color-background)}.nav-item.active{color:var(--color-primary);background-color:#007bff1a;font-weight:600}.page-container{gap:var(--spacing-6)}.section-title{font-size:1.75rem}.hero-section{text-align:left;padding:var(--spacing-6)}.hero-title{font-size:2.25rem}.hero-subtitle{max-width:700px;margin:0;font-size:1.1rem}.stats-grid{grid-template-columns:repeat(3,1fr)}.services-grid{grid-template-columns:repeat(2,1fr)}.dashboard-controls{flex-direction:row;justify-content:space-between;align-items:center}.filter-group{overflow-x:visible}.search-bar{flex-grow:1;max-width:350px}.complaint-list{grid-template-columns:repeat(3,1fr)}.reminder-list{grid-template-columns:repeat(2,1fr)}.modal-actions{flex-direction:row}}.customers-page .customers-list{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}.customer-card{background-color:var(--color-white);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);cursor:pointer;border-left:5px solid;transition:transform .2s,box-shadow .2s}.customer-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.customer-card.internal{border-color:var(--color-primary)}.customer-card.external{border-color:var(--color-info)}.customer-card .card-header{padding:var(--spacing-3)var(--spacing-4);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.customer-card .card-content{padding:var(--spacing-4);gap:var(--spacing-3);display:grid}.customer-card .card-actions{padding:var(--spacing-4);border-top:1px solid var(--color-border);justify-content:flex-end;display:flex}.action-button{align-items:center;gap:var(--spacing-2);padding:var(--spacing-2)var(--spacing-4);border:1px solid var(--color-primary);background-color:var(--color-primary);color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;font-weight:500;transition:background-color .2s;display:flex}.action-button:hover{background-color:var(--color-primary-hover)}.action-button.view-history{color:var(--color-primary);background-color:#0000}.status-badge.internal{color:var(--color-primary);background-color:#007bff1a}.status-badge.external{color:var(--color-info);background-color:#17a2b81a}.status-badge.assigned{color:#856404;background-color:#ffc1071a}.customer-history-page .history-header{gap:var(--spacing-4);flex-direction:column;display:flex}.customer-history-page .back-button{align-self:flex-start}.customer-history-page .customer-info-header{gap:var(--spacing-3);flex-direction:column;display:flex}.customer-history-page .customer-summary{background-color:var(--color-white);padding:var(--spacing-4);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md)}.customer-history-page .customer-name{color:var(--color-text);margin:0 0 var(--spacing-3)0;font-size:1.25rem;font-weight:600}.customer-history-page .customer-details{gap:var(--spacing-3);display:grid}.loading-state,.empty-state{padding:var(--spacing-6);text-align:center;color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-state p,.empty-state p{margin:var(--spacing-3)0 var(--spacing-2)0;font-size:1.1rem}.empty-subtitle{opacity:.8;margin:0;font-size:.9rem}@media (min-width:768px){.customers-page .customers-list{grid-template-columns:repeat(2,1fr)}.customer-history-page .history-header{flex-direction:row;justify-content:space-between;align-items:flex-start}.customer-history-page .customer-info-header{margin-left:var(--spacing-4);flex:1}}@media (min-width:1024px){.customers-page .customers-list{grid-template-columns:repeat(3,1fr)}}.warranty-modal{max-width:600px}.warranty-modal .modal-header{padding:var(--spacing-4);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.warranty-modal .modal-title{color:var(--color-text);margin:0;font-size:1.25rem;font-weight:600}.warranty-modal .close-button{cursor:pointer;color:var(--color-text-secondary);padding:var(--spacing-2);border-radius:var(--border-radius-md);background:0 0;border:none;font-size:1.25rem;transition:background-color .2s}.warranty-modal .close-button:hover{background-color:var(--color-background);color:var(--color-text)}.warranty-modal .modal-body{padding:var(--spacing-4);gap:var(--spacing-4);flex-direction:column;display:flex}.warranty-info h3{margin:0 0 var(--spacing-2)0;color:var(--color-text);font-size:1rem;font-weight:600}.warranty-info p{color:var(--color-text-secondary);margin:0;font-size:.9rem}.warranty-image-container h3{margin:0 0 var(--spacing-3)0;color:var(--color-text);font-size:1rem;font-weight:600}.warranty-image{border-radius:var(--border-radius-md);width:100%;max-width:400px;height:auto;box-shadow:var(--shadow-md);margin:0 auto;display:block}.no-image{padding:var(--spacing-6);text-align:center;color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.no-image p{margin:var(--spacing-3)0 0 0;font-size:.9rem}.warranty-link{transition:color .2s}.warranty-link:hover{text-decoration:underline}.feature-box{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--spacing-4);margin:var(--spacing-4)0}.feature-box h3{color:var(--color-primary);margin:0 0 var(--spacing-3)0;font-size:1.1rem;font-weight:600}.feature-box p{color:var(--color-text);margin:0;font-size:.95rem;line-height:1.5}.page-header{gap:var(--spacing-4);margin-bottom:var(--spacing-5);flex-direction:column;display:flex}.header-content{gap:var(--spacing-2);flex-direction:column;display:flex}.page-title{color:var(--color-text);margin:0;font-size:2rem;font-weight:700}.page-subtitle{color:var(--color-text-secondary);margin:0;font-size:1.1rem}.form-card{background-color:var(--color-white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.form-header{padding:var(--spacing-5)var(--spacing-5)var(--spacing-4)var(--spacing-5);border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,var(--color-primary)0%,#007bff1a 100%);color:var(--color-white)}.form-header h2{margin:0 0 var(--spacing-2)0;font-size:1.5rem;font-weight:600}.form-header p{opacity:.9;margin:0;font-size:.95rem}.customer-form{padding:var(--spacing-5);gap:var(--spacing-5);flex-direction:column;display:flex}.required{color:var(--color-danger);font-weight:600}.optional{color:var(--color-text-secondary);font-size:.85rem;font-weight:400}.form-actions{justify-content:flex-end;gap:var(--spacing-3);padding-top:var(--spacing-4);border-top:1px solid var(--color-border);display:flex}.alert{align-items:center;gap:var(--spacing-3);padding:var(--spacing-4);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-4);font-weight:500;display:flex}.alert-error{color:var(--color-danger);background-color:#dc35451a;border:1px solid #dc354533}.alert-success{color:var(--color-success);background-color:#28a7451a;border:1px solid #28a74533}.alert-icon{flex-shrink:0;font-size:1.25rem}.button-icon{font-size:1rem}.spinner{border:2px solid var(--color-white);border-top:2px solid #0000;border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.form-input:focus,.form-textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #007bff1a}.form-input:invalid,.form-textarea:invalid{border-color:var(--color-danger)}.form-input:invalid:focus,.form-textarea:invalid:focus{box-shadow:0 0 0 3px #dc35451a}.field-status,.field-error{align-items:center;gap:var(--spacing-2);margin-top:var(--spacing-1);font-size:.875rem;display:flex}.field-status.checking{color:var(--color-info)}.field-error{color:var(--color-danger)}.status-icon,.error-icon{flex-shrink:0;font-size:1rem}.form-input.error{border-color:var(--color-danger);box-shadow:0 0 0 3px #dc35451a}@media (min-width:768px){.page-header{flex-direction:row;justify-content:space-between;align-items:flex-start}.header-content{flex:1}.form-actions{flex-direction:row}.customer-form{padding:var(--spacing-6)}.form-header{padding:var(--spacing-6)var(--spacing-6)var(--spacing-4)var(--spacing-6)}}@media (min-width:1024px){.form-grid{grid-template-columns:repeat(2,1fr)}}.login-page{background-color:var(--color-background);min-height:100vh;padding:var(--spacing-4);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-bg-shapes{z-index:0;position:absolute;inset:0}.login-bg-shapes .shape{filter:blur(80px);border-radius:50%;position:absolute}.shape-1{background:#007bff33;width:400px;height:400px;top:-100px;right:-100px}.shape-2{background:#17a2b833;width:300px;height:300px;bottom:-50px;left:-50px}.shape-3{background:#6f42c11a;width:250px;height:250px;top:50%;left:20%}.login-card-container{z-index:1;gap:var(--spacing-4);flex-direction:column;width:100%;max-width:440px;display:flex}.login-header-section{text-align:center}.login-logo-container{background:var(--color-white);border-radius:var(--border-radius-lg);width:80px;height:80px;margin:0 auto var(--spacing-3);box-shadow:var(--shadow-md);justify-content:center;align-items:center;padding:12px;display:flex}.login-logo{object-fit:contain;max-width:100%}.login-app-title{color:var(--color-text);letter-spacing:-.04em;margin:0;font-size:2.25rem;font-weight:800}.login-app-subtitle{color:var(--color-text-secondary);margin:0;font-weight:500}.login-form-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);padding:var(--spacing-5);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-premium)}.login-form-header{align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-4);display:flex}.login-header-icon{color:var(--color-primary);font-size:1.5rem}.login-form-title{color:var(--color-text);font-size:1.25rem;font-weight:700}.login-input-group{margin-bottom:var(--spacing-3)}.login-label{color:var(--color-text-secondary);margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.login-input-wrapper{align-items:center;gap:var(--spacing-3);background:var(--color-white);border:1.5px solid var(--color-border);border-radius:var(--border-radius-md);padding:0 var(--spacing-3);transition:all .3s;display:flex}.login-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-light)}.login-input-wrapper.has-error{border-color:var(--color-danger)}.login-input-icon{color:var(--color-text-secondary);font-size:1.1rem}.login-input{width:100%;min-width:0;padding:var(--spacing-3)0;appearance:none;color:var(--color-text);flex:1;font-family:inherit;font-size:1rem;font-weight:500;background:0 0!important;border:none!important;outline:none!important}.login-input:focus{outline:none}.login-error-msg{color:var(--color-danger);margin-top:.25rem;font-size:.75rem;font-weight:600;display:block}.login-submit-btn{width:100%;padding:var(--spacing-3);margin-top:var(--spacing-4);background:var(--color-primary);color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-2);border:none;font-size:1rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 12px #007bff4d}.login-submit-btn:disabled{opacity:.7;cursor:not-allowed}.login-footer-text{text-align:center;color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.loader{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s ease-in-out infinite spin}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;padding:var(--spacing-4);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-white);border-radius:var(--border-radius-lg);width:100%;max-width:600px;max-height:90vh;box-shadow:var(--shadow-premium);z-index:1001;position:relative;overflow-y:auto}.modal-title{color:var(--color-text);margin-bottom:var(--spacing-5);padding:var(--spacing-6)var(--spacing-6)0;font-size:1.5rem;font-weight:800}.modal-actions{justify-content:flex-end;gap:var(--spacing-3);padding:var(--spacing-6);background:var(--color-background);border-bottom-left-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg);display:flex}.form-grid{gap:var(--spacing-4);padding:0 var(--spacing-6)var(--spacing-6);grid-template-columns:1fr;display:grid}@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,1fr)}}.form-group{gap:var(--spacing-2);flex-direction:column;display:flex}.form-label{color:var(--color-text-secondary);font-size:.875rem;font-weight:600}.form-input,.form-textarea,.form-select{width:100%;min-width:0;padding:var(--spacing-3)var(--spacing-4);background:var(--color-background);border:1.5px solid var(--color-border);border-radius:var(--border-radius-md);color:var(--color-text);appearance:none;flex:1;font-family:inherit;font-size:.95rem;transition:all .2s}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-light);background:var(--color-white);outline:none}.form-textarea{resize:vertical;min-height:100px}.page-container{max-width:1200px;padding:var(--spacing-6);min-height:calc(100vh - 80px);margin:0 auto}.section-title{color:var(--color-text);margin-bottom:var(--spacing-1);letter-spacing:-.02em;font-size:2rem;font-weight:800}.section-subtitle{color:var(--color-text-secondary);margin-bottom:var(--spacing-6);font-size:1.1rem}.card-title-group{align-items:center;gap:var(--spacing-3);display:flex}.staff-avatar-sm{border-radius:var(--border-radius-full);object-fit:cover;border:2px solid var(--color-white);width:40px;height:40px;box-shadow:var(--shadow-sm)}.staff-avatar-placeholder{border-radius:var(--border-radius-full);background:var(--color-primary-light);width:40px;height:40px;color:var(--color-primary);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.badge-info{background:var(--color-info-light);color:var(--color-info);border-radius:var(--border-radius-full);align-items:center;padding:.25rem .75rem;font-size:.875rem;font-weight:600;display:inline-flex}.divider-dashed{border-top:1px dashed var(--color-border);height:1px;margin:var(--spacing-4)0;width:100%}.info-grid-2{gap:var(--spacing-4);grid-template-columns:1fr 1fr;display:grid}.payment-summary{background:var(--color-background);padding:var(--spacing-3)var(--spacing-4);border-radius:var(--border-radius-md);margin-top:var(--spacing-3);justify-content:space-between;align-items:center;display:flex}.payment-method{align-items:center;gap:var(--spacing-2);color:var(--color-text);font-size:.875rem;font-weight:700;display:flex}.payment-amount{color:var(--color-success);font-size:1.25rem;font-weight:800}.remarks-box{gap:var(--spacing-3);margin-top:var(--spacing-4);padding:var(--spacing-3);background:rgba(var(--color-primary-h),var(--color-primary-s),95%,.5);border-left:4px solid var(--color-primary);border-radius:var(--border-radius-sm);display:flex}.remarks-icon{color:var(--color-primary);flex-shrink:0;margin-top:2px}.remarks-text{color:var(--color-text-secondary);margin:0;font-size:.875rem;font-style:italic;line-height:1.5}.modal-header{padding:var(--spacing-6)var(--spacing-6)0;margin-bottom:var(--spacing-4);justify-content:space-between;align-items:center;display:flex}.modal-close{color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-2);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.5rem;transition:all .2s;display:flex}.modal-close:hover{color:var(--color-danger);transform:rotate(90deg)}.profile-upload-section{align-items:center;gap:var(--spacing-2);flex-direction:column;display:flex}.avatar-preview-container{width:100px;height:100px;position:relative}.avatar-preview{object-fit:cover;border:4px solid var(--color-white);width:100%;height:100%;box-shadow:var(--shadow-md);border-radius:50%}.avatar-preview-placeholder{background:var(--color-background);width:100%;height:100%;color:var(--color-text-secondary);border:2px dashed var(--color-border);border-radius:50%;justify-content:center;align-items:center;font-size:2.5rem;display:flex}.camera-btn{background:var(--color-primary);color:var(--color-white);border:2px solid var(--color-white);cursor:pointer;width:32px;height:32px;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;bottom:0;right:0}.camera-btn:hover{background:var(--color-primary-dark);transform:scale(1.1)}.upload-hint{color:var(--color-text-secondary);font-size:.75rem;font-weight:600}.form-group.full-width{grid-column:1/-1}.history-card-grid{gap:var(--spacing-4);grid-template-columns:1fr;display:grid}@media (min-width:640px){.history-card-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.history-card-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1400px){.history-card-grid{grid-template-columns:repeat(4,1fr)}}.history-summary-card{background:var(--color-white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);border-left:4px solid var(--color-success);cursor:pointer;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.history-summary-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.hsc-header{border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,#22c55e0f 0%,#fff0 100%);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.hsc-no{color:var(--color-text);letter-spacing:.02em;align-items:center;gap:4px;font-size:.85rem;font-weight:700;display:flex}.hsc-body{flex-direction:column;flex:1;gap:.45rem;padding:.85rem 1rem;display:flex}.hsc-row{color:var(--color-text-secondary);align-items:flex-start;gap:.5rem;font-size:.85rem;line-height:1.4;display:flex}.hsc-row svg{color:var(--color-text-secondary);flex-shrink:0;margin-top:2px}.hsc-row strong{color:var(--color-text);font-weight:600}.hsc-address{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.hsc-footer{border-top:1px solid var(--color-border);background:var(--color-background);justify-content:space-between;align-items:center;padding:.65rem 1rem;display:flex}.hsc-footer-left{align-items:center;gap:.6rem;display:flex}.hsc-date{color:var(--color-text-secondary);align-items:center;gap:4px;font-size:.75rem;display:flex}.hsc-amount{color:var(--color-success);background:var(--color-success-light);border-radius:var(--border-radius-full);padding:2px 8px;font-size:.85rem;font-weight:700}.btn-view-details{border:1.5px solid var(--color-primary);color:var(--color-primary);border-radius:var(--border-radius-full);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:4px;padding:5px 12px;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.btn-view-details:hover{background:var(--color-primary);color:#fff}.history-stats{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.badge-info{color:var(--color-primary);border-radius:var(--border-radius-full);background:#0095ff1a;padding:4px 14px;font-size:.8rem;font-weight:600;display:inline-block}.modal-overlay{-webkit-backdrop-filter:blur(4px);z-index:3000;background:#0000008c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.history-modal{background:var(--color-white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-premium);flex-direction:column;width:100%;max-width:680px;max-height:90vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,#22c55e12 0%,#fff0 100%);flex-shrink:0;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.modal-header-left{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.modal-header-right{align-items:center;gap:.75rem;display:flex}.modal-complaint-no{color:var(--color-text);letter-spacing:.03em;font-size:1.1rem;font-weight:700}.badge-customer-type{text-transform:uppercase;border-radius:var(--border-radius-full);letter-spacing:.05em;padding:3px 10px;font-size:.7rem;font-weight:700}.badge-customer-type.our_customer{color:var(--color-primary);background:#0095ff1a}.badge-customer-type.external_customer{color:#7c3aed;background:#a855f71a}.modal-close-btn{border:1.5px solid var(--color-border);cursor:pointer;width:34px;height:34px;color:var(--color-text-secondary);background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.modal-close-btn:hover{background:var(--color-danger);border-color:var(--color-danger);color:#fff}.modal-body{flex-direction:column;gap:1.25rem;padding:1.25rem 1.5rem 1.5rem;display:flex;overflow-y:auto}.modal-section{flex-direction:column;gap:.6rem;display:flex}.history-section-head{text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-secondary);border-bottom:1.5px solid var(--color-border);margin-bottom:.25rem;padding-bottom:.4rem;font-size:.8rem;font-weight:700}.modal-grid{grid-template-columns:1fr;gap:.4rem;display:grid}@media (min-width:480px){.modal-grid{grid-template-columns:repeat(2,1fr)}}.info-row--highlight .info-row-value{color:var(--color-success);font-size:1rem;font-weight:700}.remarks-box{border-radius:var(--border-radius-md);background:#f5f3ffcc;border:1px solid #a78bfa4d;padding:.7rem 1rem}.remarks-box--completed{background:#f0fdf4cc;border-color:#22c55e4d}.remarks-label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);margin-bottom:.3rem;font-size:.7rem;font-weight:700;display:block}.remarks-text{color:var(--color-text);margin:0;font-size:.9rem;line-height:1.5}.complete-job-panel{margin:0 var(--spacing-4)var(--spacing-4);border:1.5px solid var(--color-border);border-radius:var(--border-radius-lg);background:#f8faff;overflow:hidden}.cjp-header{border-bottom:1.5px solid var(--color-border);color:var(--color-text);background:linear-gradient(135deg,#0ea5e91a 0%,#6366f112 100%);align-items:center;gap:.5rem;padding:.7rem 1rem;font-size:.85rem;font-weight:700;display:flex}.cjp-header-icon{color:var(--color-primary);font-size:1rem}.cjp-section{padding:.85rem 1rem 0}.cjp-label{text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-secondary);margin:0;font-size:.7rem;font-weight:700}.cjp-payment-row{gap:.6rem;display:flex}.cjp-pay-btn{border:1.5px solid var(--color-border);border-radius:var(--border-radius-full);background:var(--color-white);color:var(--color-text-secondary);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.55rem 0;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.cjp-pay-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.cjp-pay-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 4px 12px #0095ff4d}.cjp-fields{flex-direction:column;gap:1rem;padding:1rem;display:flex}.cjp-field--wide{width:100%}.cjp-field{flex-direction:column;gap:.35rem;display:flex}.cjp-input-wrap{border:1.5px solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-white);align-items:center;gap:.4rem;padding:0 .75rem;transition:border-color .2s,box-shadow .2s;display:flex}.cjp-input-wrap:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #0095ff1a}.cjp-icon{color:var(--color-text-secondary);flex-shrink:0}.cjp-input{color:var(--color-text);background:0 0;border:none;outline:none;width:100%;padding:.6rem 0;font-family:inherit;font-size:.9rem}.cjp-input::placeholder{color:var(--color-text-secondary);opacity:.6}.cjp-submit-btn{background:linear-gradient(135deg,var(--color-success)0%,#16a34a 100%);color:#fff;border-radius:var(--border-radius-md);cursor:pointer;letter-spacing:.02em;border:none;justify-content:center;align-items:center;gap:.5rem;width:calc(100% - 2rem);margin:0 1rem 1rem;padding:.78rem;font-size:.95rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 14px #22c55e4d}.cjp-submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #22c55e73}.cjp-submit-btn:active{transform:translateY(0)}.cjp-assigned-banner{color:var(--color-primary);border-radius:var(--border-radius-sm);background:#0095ff12;border:1px solid #0095ff2e;align-items:center;gap:.4rem;margin-top:.25rem;padding:.35rem .7rem;font-size:.78rem;font-weight:600;display:flex}@media (max-width:768px){html,body,#root,.app-layout{max-width:100vw;overflow-x:hidden}.page-container{box-sizing:border-box;width:100%;max-width:100vw;overflow-x:hidden;padding:16px!important}.booking-layout,.booking-form-section{box-sizing:border-box;width:100%;max-width:100%}.login-page{box-sizing:border-box;width:100%;max-width:100vw;padding:16px!important;overflow:hidden auto!important}.login-card-container{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto}.login-form-card{box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;padding:20px 16px!important}.login-input-wrapper{box-sizing:border-box;width:100%;max-width:100%}.login-input{box-sizing:border-box;width:100%;min-width:0;max-width:100%}select.login-input{text-overflow:ellipsis}.form-group.full-width label{white-space:normal;word-wrap:break-word;max-width:100%;line-height:1.3}.dashboard-controls{box-sizing:border-box;width:100%;max-width:100%;padding:12px}.form-grid{gap:16px!important;padding:0!important}.filter-group{grid-template-columns:1fr 1fr;width:100%;max-width:100%;gap:8px!important;display:grid!important;overflow:hidden!important}.filter-button{box-sizing:border-box;justify-content:center;width:100%;max-width:100%;white-space:normal!important;padding:10px 4px!important;font-size:.85rem!important}.search-bar{box-sizing:border-box;width:100%;max-width:100%;padding:0 10px}.search-bar input{min-width:0;max-width:100%;font-size:.85rem!important}}:root{--font-family-sans:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--color-primary-h:210;--color-primary-s:100%;--color-primary-l:50%;--color-primary:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));--color-primary-hover:hsl(var(--color-primary-h),var(--color-primary-s),40%);--color-primary-light:hsl(var(--color-primary-h),var(--color-primary-s),96%);--color-text:#1f2933;--color-text-secondary:#6a737c;--color-background:#f8fafc;--color-white:#fff;--color-border:#dfe3e7;--color-success:#21c45d;--color-success-light:#e9fbf0;--color-warning:#f59f0a;--color-warning-light:#fef5e7;--color-danger:#ef4343;--color-danger-light:#fde8e8;--color-info:#0da2e7;--color-info-h:199;--color-info-s:89%;--color-info-l:48%;--color-info-light:hsl(var(--color-info-h),var(--color-info-s),95%);--glass-bg:#ffffffb3;--glass-border:#fff6;--glass-blur:blur(12px);--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:1rem;--spacing-4:1.5rem;--spacing-5:2.25rem;--spacing-6:3.5rem;--border-radius-sm:.4rem;--border-radius-md:.75rem;--border-radius-lg:1.25rem;--border-radius-full:9999px;--shadow-sm:0 1px 3px 0 #0000000d;--shadow-md:0 10px 15px -3px #0000000d,0 4px 6px -2px #00000008;--shadow-lg:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--shadow-premium:0 25px 50px -12px #00000026}body{font-family:var(--font-family-sans);background-color:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}*,:before,:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}a{color:var(--color-primary);text-decoration:none;transition:color .2s ease-in-out}a:hover{color:var(--color-primary-hover)}.warranty-section{margin-top:var(--spacing-4);padding:var(--spacing-3);border-radius:var(--border-radius-md);background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border:1px solid #0ea5e9}.warranty-title{color:#0c4a6e;margin-bottom:var(--spacing-2);align-items:center;gap:var(--spacing-2);font-size:1rem;font-weight:600;display:flex}.warranty-photo-row{align-items:center;gap:var(--spacing-2);margin-top:var(--spacing-2);display:flex}.warranty-photo-link{padding:var(--spacing-1)var(--spacing-2);border-radius:var(--border-radius-sm);font-weight:500;text-decoration:underline;transition:all .2s;color:var(--color-primary)!important}.warranty-photo-link:hover{background-color:var(--color-primary);text-decoration:none;color:#fff!important}.status-badge.initial{color:#805ad5;background-color:#f0e6ff;border:1px solid #d6bcfa}.status-badge.initial svg{color:#805ad5}.complaint-card.initial{background:#f8f5ff;border-left:3px solid #805ad5}.complaint-card.initial .card-header{background:linear-gradient(135deg,#f0e6ff 0%,#e9d7fe 100%)}.complaint-card.initial .card-title{color:#805ad5}.customers-page.page-container{background:#f7fafc;min-height:100vh;padding:1.5rem}.customers-page .section-title{color:#1a202c;margin-bottom:1rem;font-size:1.75rem;font-weight:700}.customers-page .dashboard-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.customers-page .filter-group{flex-wrap:wrap;gap:.5rem;display:flex}.customers-page .filter-button{cursor:pointer;color:#2d3748;background:#edf2f7;border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.6rem .9rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.customers-page .filter-button.active{color:#fff;background:#3182ce}.customers-page .filter-count{background:#ffffff40;border-radius:999px;padding:0 .45rem;font-size:.75rem}.customers-page .search-bar{background:#fff;border:1px solid #e2e8f0;border-radius:999px;align-items:center;gap:.5rem;padding:.6rem .9rem;display:flex}.customers-page .search-bar input{border:none;outline:none;width:200px;font-size:.9rem}.customers-page .customers-list{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:1.5rem;display:flex}.customer-card{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:.75rem;width:360px;min-height:280px;padding:1.25rem;transition:all .25s;display:flex;position:relative;box-shadow:0 4px 12px #0000000f}.customer-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001f}.customer-card.external_customer{border-left:4px solid #805ad5}.customer-card .card-header{grid-template-columns:1fr auto;align-items:start;gap:.75rem;display:grid}.customer-card .card-title{color:#2d3748;margin:0;font-size:1.1rem;font-weight:600}.customer-card .status-badge{color:#3182ce;white-space:nowrap;background:#e6f3ff;border-radius:999px;padding:.3rem .75rem;font-size:.7rem;font-weight:600}.customer-card .status-badge.external_customer{color:#805ad5;background:#f0e6ff}.customer-card .card-actions{gap:.25rem;display:flex}.customer-card .action-btn{cursor:pointer;color:#4a5568;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.customer-card .action-btn:hover{transform:scale(1.1)}.customer-card .edit-btn:hover{color:#3182ce;background:#ebf8ff}.customer-card .delete-btn:hover{color:#e53e3e;background:#fed7d7}.customer-card .card-content{flex-direction:column;flex-grow:1;gap:.6rem;margin-top:.5rem;display:flex}.customer-card .info-row{align-items:center;gap:.5rem;display:flex}.customer-card .info-row-icon{color:#718096;font-size:.95rem}.customer-card .info-row-label{color:#4a5568;white-space:nowrap;font-size:.85rem;font-weight:500}.customer-card .info-row-value{color:#2d3748;text-align:right;margin-left:auto;font-size:.85rem;font-weight:600}.customer-card .client-ids-list{flex-wrap:wrap;align-items:center;gap:.35rem;margin-left:auto;display:flex}.customer-card .client-id-badge{color:#3182ce;white-space:nowrap;background:#e6f3ff;border:1px solid #bee3f8;border-radius:999px;padding:.2rem .5rem;font-size:.75rem;font-weight:600}.customer-card .client-id-badge:hover{color:#2c5282;background:#bee3f8}.customer-card .action-button{color:#fff;cursor:pointer;background:#3182ce;border:none;border-radius:999px;align-self:flex-start;align-items:center;gap:.35rem;margin-top:auto;padding:.45rem .9rem;font-size:.8rem;transition:background .2s;display:flex}.customer-card .action-button:hover{background:#2c5282}.customer-card .action-button.toggle-history{background:#4a5568;margin-top:.5rem}.customer-card .action-button.toggle-history:hover{background:#2d3748}.customer-card .action-button.view-full-history{background:#38a169}.customer-card .action-button.view-full-history:hover{background:#2f855a}.customer-card .service-history-section{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem}.customer-card .service-history-list{flex-direction:column;gap:.75rem;max-height:400px;display:flex;overflow-y:auto}.customer-card .service-item{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;transition:all .2s}.customer-card .service-item:hover{background:#edf2f7;border-color:#cbd5e0}.customer-card .service-item.completed{background:#f0fff4;border-left:3px solid #38a169}.customer-card .service-item.assigned{background:#ebf8ff;border-left:3px solid #3182ce}.customer-card .service-item.pending{background:#fffaf0;border-left:3px solid #ed8936}.customer-card .service-item.initial{background:#f7fafc;border-left:3px solid #a0aec0}.customer-card .service-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.customer-card .service-title{color:#2d3748;font-size:.9rem;font-weight:600}.customer-card .service-content{flex-direction:column;gap:.4rem;display:flex}.customer-card .service-content .info-row,.customer-card .service-content .info-row-icon{font-size:.8rem}.customer-card .service-content .info-row-label{min-width:80px;font-size:.75rem}.customer-card .service-content .info-row-value{font-size:.75rem;font-weight:500}.customers-page .loading-state,.customers-page .empty-state{text-align:center;color:#718096;width:100%;padding:3rem}.customers-page .modal-overlay{z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.customers-page .modal-content{background:#fff;border-radius:16px;width:90%;max-width:480px;box-shadow:0 25px 50px #00000040}.customers-page .modal-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1.25rem;display:flex}.customers-page .modal-body{padding:1.25rem}.customers-page .modal-actions{border-top:1px solid #e2e8f0;justify-content:flex-end;gap:.75rem;padding:1.25rem;display:flex}.customers-page .form-group{margin-bottom:1.25rem}.customers-page .form-group label{color:#4a5568;margin-bottom:.35rem;font-size:.85rem;font-weight:600;display:block}.customers-page .form-group input,.customers-page .form-group textarea,.customers-page .form-group select{border:1px solid #e2e8f0;border-radius:6px;width:100%;padding:.65rem}.customers-page .form-group input:focus,.customers-page .form-group textarea:focus,.customers-page .form-group select:focus{border-color:#3182ce;outline:none;box-shadow:0 0 0 3px #3182ce26}.customers-page .btn-primary{color:#fff;background:#3182ce}.customers-page .btn-secondary{color:#4a5568;background:#e2e8f0}.customers-page .btn-danger{color:#fff;background:#e53e3e}.customers-page .btn-primary,.customers-page .btn-secondary,.customers-page .btn-danger{cursor:pointer;border:none;border-radius:6px;padding:.6rem 1.2rem;font-size:.9rem}@media (max-width:768px){.customers-page.page-container{padding:.5rem}.customers-page .section-title{margin-bottom:.5rem;font-size:1.5rem}.customers-page .dashboard-controls{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:.75rem;width:100%;max-width:100%}.customers-page .filter-group{flex-wrap:wrap;justify-content:flex-start;width:100%;padding-bottom:.5rem}.customers-page .filter-button{white-space:normal;text-align:center;flex:calc(50% - .5rem);justify-content:center}.customers-page .search-bar,.customers-page .search-bar input{box-sizing:border-box;width:100%}.customers-page .customers-list{flex-direction:column;margin-top:1rem}.customer-card{width:100%;min-height:auto;padding:1rem}.customer-card .card-header{flex-direction:column;gap:.5rem;padding-right:4rem;display:flex}.customer-card .card-title{font-size:1.1rem}.customer-card .status-badge{align-self:flex-start}.customer-card .card-actions{flex-direction:column;position:absolute;top:1rem;right:1rem}.customer-card .info-row{flex-wrap:wrap;align-items:flex-start;gap:.25rem}.customer-card .info-row-value{text-align:left;width:100%;margin-left:0;padding-left:1.5rem}.customer-card .client-ids-list{margin-left:0}.customer-card .action-button{justify-content:center;width:100%;padding:.75rem}}.landing-page{color:#333;background:#fff;flex-direction:column;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex}.landing-navbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#ffffffe6;border-bottom:1px solid #0000000d;justify-content:center;padding:1.5rem 0;display:flex;position:sticky;top:0}.landing-container{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex}.landing-logo{color:var(--color-primary,#0056b3);align-items:center;gap:.5rem;display:flex}.logo-text{letter-spacing:-.5px;font-size:1.8rem;font-weight:800}.landing-nav-links{align-items:center;gap:2.5rem;display:flex}.nav-link{color:#555;padding:.5rem 0;font-size:1.05rem;font-weight:600;text-decoration:none;transition:all .3s;position:relative}.nav-link:hover,.nav-link.active{color:var(--color-primary,#0056b3)}.nav-link:after{content:"";background:var(--color-primary,#0056b3);width:0;height:2px;transition:width .3s;position:absolute;bottom:0;left:0}.nav-link:hover:after,.nav-link.active:after{width:100%}.btn-outline{border:2px solid var(--color-primary,#0056b3);color:var(--color-primary,#0056b3);border-radius:999px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.btn-outline:hover{background:var(--color-primary,#0056b3);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #0056b333}.landing-hero{background:radial-gradient(circle at 100% 0,#0056b30d,#0000 40%),radial-gradient(circle at 0 100%,#0056b314,#0000 40%);flex:1;align-items:center;padding:4rem 0;display:flex}.hero-content{text-align:center;flex-direction:column;align-items:center}.hero-title{color:#1a1a1a;max-width:800px;margin:0 auto 1.5rem;font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.1}.hero-title span{background:linear-gradient(135deg,var(--color-primary,#0056b3),#00a8ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:#555;max-width:600px;margin:0 auto 3rem;font-size:1.25rem;line-height:1.6}.hero-actions{gap:1rem;margin-bottom:5rem;display:flex}.btn-primary{background:linear-gradient(135deg,var(--color-primary,#0056b3),#004494);color:#fff;border-radius:999px;padding:1rem 2rem;font-size:1.1rem;font-weight:600;text-decoration:none;transition:all .3s;box-shadow:0 10px 20px #0056b333}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 25px #0056b34d}.hero-features{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%;max-width:1000px;display:grid}.feature-card{text-align:left;background:#fff;border:1px solid #00000005;border-radius:20px;padding:2rem;transition:transform .3s;box-shadow:0 10px 40px #0000000a}.feature-card:hover{transform:translateY(-5px)}.feature-icon{width:50px;height:50px;color:var(--color-primary,#0056b3);background:#0056b314;border-radius:12px;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex}.feature-card h3{color:#222;margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.feature-card p{color:#666;font-size:.95rem;line-height:1.5}.landing-footer{text-align:center;color:#888;border-top:1px solid #0000000d;margin-top:auto;padding:2rem 0;font-size:.9rem}.desktop-only-flex{display:flex}.mobile-menu-toggle{cursor:pointer;z-index:101;background:0 0;border:none;padding:.5rem;display:none}.hamburger{flex-direction:column;justify-content:space-between;width:24px;height:18px;display:flex;position:relative}.hamburger span{background-color:var(--color-primary,#0056b3);border-radius:2px;width:100%;height:2px;transition:all .3s;display:block}.hamburger.open span:first-child{transform:translateY(8px)rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-8px)rotate(-45deg)}.landing-mobile-menu{display:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.desktop-only-flex{display:none!important}.mobile-menu-toggle{display:block}.landing-mobile-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border-bottom:1px solid #0000000d;flex-direction:column;gap:1rem;padding:1rem 2rem;animation:.3s slideDown;display:flex;position:absolute;top:100%;left:0;right:0;box-shadow:0 10px 20px #0000000d}.mobile-nav-link{color:#555;border-bottom:1px solid #0000000d;padding:.5rem 0;font-size:1.1rem;font-weight:600;text-decoration:none}.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--color-primary,#0056b3)}.mobile-btn{justify-content:center;margin-top:.5rem}.hero-actions{flex-direction:column;width:100%;max-width:300px}.btn-primary{text-align:center;width:100%}}.permission-page-container *{box-sizing:border-box}.permission-page-container{background-color:#6addf7;min-height:100vh;padding:20px}.permission-page-wrapper{width:100%;max-width:650px;margin:0 auto}.permission-header-section{text-align:center;background-color:#12b5d9;border-radius:16px;margin-bottom:20px;padding:24px;box-shadow:0 4px 10px #00000026}.permission-header-title{color:#fff;font-size:30px;font-weight:700}.permission-header-subtitle{color:#fff;margin-top:6px}.permission-tabs-container{background-color:#9ad7ec;border-radius:16px;width:100%;max-width:650px;margin:0 auto 20px;padding:4px;display:flex;box-shadow:0 2px 8px #0000001a}.permission-tab-button{color:#555;cursor:pointer;background-color:#0000;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:700;transition:all .3s;display:flex}.permission-tab-button.active{color:#fff;background-color:#007bff;box-shadow:0 2px 4px #0003}.permission-card{background-color:#9ad7ec;border-radius:16px;margin-bottom:20px;padding:24px;box-shadow:0 4px 8px #00000026}.permission-card-title{color:#007bff;align-items:center;margin-bottom:14px;font-size:22px;font-weight:700;display:flex}.permission-input-container{background-color:#fff;border:1px solid #2694a8;border-radius:16px;padding:12px 16px}.permission-select{background-color:#0000;border:none;outline:none;width:100%;font-size:14px}.permission-checkbox-row{background-color:#b2ebf2;border-radius:16px;align-items:center;margin-bottom:10px;padding:12px 14px;display:flex;box-shadow:0 2px 5px #0000001a}.permission-checkbox{margin-right:12px;transform:scale(1.2)}.permission-checkbox-label{color:#000;font-size:18px}.permission-row{gap:10px;margin-top:10px;display:flex}.permission-button{color:#fff;cursor:pointer;box-sizing:border-box;border:none;border-radius:16px;flex:1;justify-content:center;align-items:center;padding:12px;font-size:14px;font-weight:700;transition:all .2s;display:flex}.permission-button:hover{opacity:.9;transform:translateY(-1px)}.permission-button.success{background-color:#399a43}.permission-button.danger{background-color:#eb5968}.permission-button.primary{background-color:#007bff;width:100%}.permission-form-group{margin-bottom:16px}.permission-form-label{color:#000;margin-bottom:8px;font-size:18px;font-weight:700;display:block}.permission-input{box-sizing:border-box;background-color:#fff;border:1px solid #2694a8;border-radius:16px;outline:none;width:100%;padding:12px 16px;font-size:14px}.permission-user-row{background-color:#b2ebf2;border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px 16px;display:flex;box-shadow:0 2px 5px #0000001a}.permission-user-info{flex-direction:column;display:flex}.permission-user-name{color:#000;font-size:18px;font-weight:700}.permission-user-role{color:#555;margin-top:2px;font-size:14px}.permission-delete-button{color:#fff;cursor:pointer;background-color:#eb5968;border:none;border-radius:16px;justify-content:center;align-items:center;padding:8px 12px;font-size:14px;transition:all .3s;display:flex}.permission-delete-button.disabled{cursor:not-allowed;opacity:.6;background-color:#777}.permission-empty-state{text-align:center;color:#555;padding:40px 20px}.permission-product-row{background-color:#b2ebf2;border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:16px;display:flex;box-shadow:0 2px 5px #0000001a}.permission-product-info{flex-direction:column;flex:1;display:flex}.permission-product-name{color:#000;margin-bottom:4px;font-size:18px;font-weight:700}.permission-product-description{color:#555;font-size:14px}.permission-product-actions{gap:8px;display:flex}.permission-edit-button{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:16px;justify-content:center;align-items:center;padding:8px 12px;font-size:14px;transition:all .3s;display:flex}.permission-edit-form{flex-direction:column;gap:12px;width:100%;display:flex}.permission-edit-inputs{flex-direction:column;gap:8px;display:flex}.permission-edit-input{box-sizing:border-box;background-color:#fff;border:1px solid #2694a8;border-radius:16px;outline:none;width:100%;padding:8px 12px;font-size:14px}.permission-edit-actions{justify-content:flex-end;gap:8px;display:flex}@media (max-width:768px){.permission-page-container{padding:10px}.permission-header-section{border-radius:12px;margin-bottom:12px;padding:16px}.permission-header-title{font-size:22px}.permission-tabs-container{border-radius:12px;gap:4px;margin-bottom:12px;padding:4px;display:flex}.permission-tab-button{text-align:center;white-space:nowrap;border-radius:8px;flex:1;gap:4px;min-width:0;padding:8px 4px;font-size:12px}.permission-card{border-radius:12px;margin-bottom:12px;padding:16px}.permission-card-title{margin-bottom:10px;font-size:18px}.permission-checkbox-row{border-radius:12px;padding:10px}.permission-checkbox-label{font-size:14px}.permission-button{border-radius:12px;padding:10px;font-size:12px}.permission-form-label{font-size:14px}.permission-input{border-radius:12px;padding:10px 12px;font-size:13px}.permission-user-row{border-radius:12px;padding:10px 12px}.permission-user-name{font-size:15px}.permission-user-role{font-size:12px}.permission-delete-button,.permission-edit-button{border-radius:12px;padding:6px 10px;font-size:12px}.permission-product-row{border-radius:12px;flex-direction:column;align-items:stretch;gap:12px;padding:12px}.permission-product-actions{justify-content:flex-end}}