*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;background:linear-gradient(135deg,#e3edf7 0%,#c8d9eb 50%,#b8cfe5 100%) fixed;min-height:100vh;font-family:Raleway,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}#root{min-height:100vh}a:hover{color:#2a5298}.login-container{background:0 0;justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{-webkit-backdrop-filter:blur(30px);background:#ffffff40;border:1px solid #ffffff2e;border-radius:20px;width:100%;max-width:400px;padding:40px;box-shadow:0 8px 32px #1f26875e}.login-card h1{text-align:center;color:#1e3c72;text-shadow:none;margin-bottom:10px;font-size:28px}.login-card h2{text-align:center;color:#4a5f7f;margin-bottom:30px;font-size:18px;font-weight:400}.form-group input{-webkit-backdrop-filter:blur(10px);box-sizing:border-box;color:#fff;background:#fff3;border:1px solid #ffffff4d;border-radius:10px;width:100%;padding:10px;font-size:14px;transition:all .3s}.form-group input::placeholder{color:#2c3e5080}.form-group input:focus{background:#ffffff40;border-color:#ffffff80;outline:none;box-shadow:0 4px 16px #1f268733}.login-button{-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#2a5298e6;border:1px solid #fff3;border-radius:10px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 4px 16px #1e3c724d}.login-button:hover:not(:disabled){background:#2a5298;transform:translateY(-2px);box-shadow:0 6px 20px #1e3c7266}.login-button:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#c33;text-align:center;background:#fee;border-radius:5px;margin-bottom:20px;padding:10px;font-size:14px}.overview-cards{grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:30px;display:grid}@media (max-width:1400px){.overview-cards{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.overview-cards{grid-template-columns:repeat(2,1fr)}}.card{text-align:center;background:#fff;border-radius:8px;padding:25px;box-shadow:0 2px 4px #0000001a}.card h3{color:#667eea;margin:0 0 10px;font-size:16px}.card h3.success{color:#28a745}.card h3.warning{color:#ffc107}.card .value{color:#333;margin:0;font-size:36px;font-weight:700}.card .value.success{color:#28a745}.card .value.warning{color:#ffc107}.charts-grid{grid-template-columns:1fr 400px;gap:30px;margin-bottom:30px;display:grid}@media (max-width:1024px){.charts-grid{grid-template-columns:1fr}}.chart-container{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.chart-container.full-width{grid-column:1/-1}.chart-container.status-chart,.chart-container.payment-chart{height:400px}.chart-container h3{color:#333;border-bottom:2px solid #eee;margin-bottom:20px;padding-bottom:10px;font-size:18px}.section-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #eee;padding:12px}.data-table th{color:#555;background-color:#f8f9fa;font-weight:600}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;animation:.2s ease-in fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;animation:.3s ease-out slideIn;overflow-y:auto;box-shadow:0 4px 20px #00000026}@keyframes slideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:20px 25px;display:flex}.modal-header h2{color:#333;margin:0;font-size:1.5rem}.close-btn{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:30px;height:30px;padding:5px;font-size:1.5rem;transition:background-color .2s,color .2s;display:flex}.close-btn:hover{color:#333;background-color:#f0f0f0}.change-password-form{padding:25px}.form-group label{color:#333;margin-bottom:8px;font-size:.95rem;font-weight:500;display:block}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{border:1px solid #ddd;border-radius:4px;width:100%;padding:10px 40px 10px 12px;font-size:1rem;transition:border-color .2s}.password-input-wrapper input:focus{border-color:#4caf50;outline:none}.password-input-wrapper input:disabled{cursor:not-allowed;background-color:#f5f5f5}.toggle-password-btn{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:8px;transition:color .2s,background-color .2s;display:flex;position:absolute;right:8px}.toggle-password-btn:hover:not(:disabled){color:#333;background-color:#f0f0f0}.toggle-password-btn:disabled{cursor:not-allowed;opacity:.5}.form-hint{color:#666;margin-top:5px;font-size:.85rem;display:block}.error-message{color:#c62828;background-color:#ffebee;border-left:4px solid #c62828;border-radius:4px;margin:15px 25px;padding:12px 15px;font-size:.9rem}.form-actions{border-top:1px solid #e0e0e0;justify-content:flex-end;gap:10px;margin-top:25px;padding-top:20px;display:flex}.btn{cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-size:1rem;font-weight:500;transition:all .2s}.btn-primary{color:#fff;background-color:#4caf50}.btn-primary:hover:not(:disabled){background-color:#45a049;transform:translateY(-1px);box-shadow:0 2px 8px #4caf504d}.btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width:600px){.modal-content{width:95%;max-height:95vh}.modal-header,.change-password-form{padding:15px 20px}.modal-header h2{font-size:1.25rem}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}.pagination-container{border-top:1px solid #e0e0e0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-top:20px;padding:20px 0;display:flex}.pagination-info{color:#666;flex-wrap:wrap;align-items:center;gap:20px;font-size:14px;display:flex}.page-size-selector{align-items:center;gap:8px;display:flex}.page-size-select{cursor:pointer;background-color:#fff;border:1px solid #ddd;border-radius:4px;padding:6px 12px;font-size:14px}.page-size-select:hover{border-color:#1976d2}.page-size-select:focus{border-color:#1976d2;outline:none;box-shadow:0 0 0 2px #1976d21a}.pagination-controls{align-items:center;gap:5px;display:flex}.pagination-btn{color:#333;cursor:pointer;background-color:#fff;border:1px solid #ddd;border-radius:4px;justify-content:center;align-items:center;min-width:38px;padding:8px 12px;font-size:14px;transition:all .2s;display:flex}.pagination-btn:hover:not(:disabled){color:#1976d2;background-color:#f5f5f5;border-color:#1976d2}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-btn.active{color:#fff;background-color:#1976d2;border-color:#1976d2;font-weight:600}.pagination-ellipsis{color:#666;-webkit-user-select:none;user-select:none;padding:8px 4px}@media (max-width:768px){.pagination-container{flex-direction:column;align-items:stretch}.pagination-info{justify-content:space-between;width:100%}.pagination-controls{justify-content:center;width:100%}}.page-container{background:0 0;min-height:100vh}.page-header{-webkit-backdrop-filter:blur(20px);background:#ffffffbf;border-bottom:1px solid #ffffff80;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;box-shadow:0 8px 32px #1f268714}.page-header h1{color:#1e3c72;margin:0;font-size:24px}.user-info{align-items:center;gap:15px;display:flex}.user-info span{color:#666}.content{margin:0 auto;padding:40px}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-header h2{color:#333;margin:0}.btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff2e;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 4px 16px #1f268726}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1f268740}.btn-primary{color:#fff;background:#2a5298d9}.btn-secondary{color:#fff;background:#4e5d78bf}.btn-danger{color:#fff;background:#dc3545}.btn-danger:hover{background:#c82333}.btn-sm{padding:6px 12px;font-size:13px}.data-table{-webkit-backdrop-filter:blur(20px);border-collapse:collapse;background:#ffffffbf;border:1px solid #ffffff80;border-radius:16px;width:100%;overflow:hidden;box-shadow:0 8px 32px #1f268714}.data-table thead{-webkit-backdrop-filter:blur(10px);background:#1e3c7214}.data-table th{text-align:left;color:#1e3c72;border-bottom:2px solid #1e3c7226;padding:15px;font-weight:600}.data-table td{color:#2c3e50;border-bottom:1px solid #1e3c7214;padding:15px}.data-table tbody tr:hover{background:#1e3c720d}.status-badge{border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.status-badge.active{color:#155724;background:#d4edda}.status-badge.inactive{color:#721c24;background:#f8d7da}.status-badge.status-paid{color:#155724;background:#d4edda}.status-badge.status-pending{color:#856404;background:#fff3cd}.status-badge.status-overdue{color:#721c24;background:#f8d7da}.error-message{color:#721c24;background:#f8d7da;border-radius:5px;margin-bottom:20px;padding:15px}.loading{text-align:center;color:#666;padding:40px;font-size:18px}.section-card{-webkit-backdrop-filter:blur(20px);background:#ffffff4d;border:1px solid #ffffff2e;border-radius:16px;padding:20px;box-shadow:0 8px 32px #1f268733}.btn-success{color:#fff;background-color:#28a745}code{background-color:#f4f4f4;border-radius:3px;padding:2px 6px;font-family:Courier New,monospace;font-size:13px}.service-card{-webkit-backdrop-filter:blur(20px);background:#ffffffb3;border:1px solid #ffffff80;border-radius:16px;padding:20px;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 32px #1f268714}.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #1f268726}.service-card h3{color:#2a5298;margin:0 0 12px;font-size:18px}.service-card p{color:#4a5f7f;margin:0 0 15px;font-size:14px;line-height:1.5}.library-doc-card{-webkit-backdrop-filter:blur(20px);background:#ffffffb3;border:1px solid #ffffff80;border-radius:12px;align-items:center;gap:15px;padding:15px;transition:background .3s,transform .3s;display:flex}.library-doc-card:hover{background:#ffffffd9;transform:translate(5px)}.library-doc-card h4{font-size:16px}@keyframes spin{to{transform:rotate(360deg)}}.form-container{margin:0 auto}.client-form{-webkit-backdrop-filter:blur(20px);background:#ffffffbf;border:1px solid #ffffff80;border-radius:16px;margin-top:20px;padding:30px;box-shadow:0 8px 32px #1f268714}.form-group{margin-bottom:20px}.form-group label{color:#2c3e50;margin-bottom:8px;font-weight:500;display:block}.form-group input,.form-group textarea{color:#2c3e50;background-color:#fff;border:1px solid #ddd;border-radius:4px;width:100%;padding:10px;font-size:14px}.form-group input:focus,.form-group textarea:focus{border-color:#007bff;outline:none}.form-group input:disabled,.form-group textarea:disabled{cursor:not-allowed;background-color:#f5f5f5}.form-actions{justify-content:flex-end;gap:10px;margin-top:30px;display:flex}.empty-state{text-align:center;padding:60px 20px}.empty-state p{color:#666;margin-bottom:20px;font-size:18px}.btn-link{color:#007bff;cursor:pointer;background:0 0;border:none;margin-bottom:10px;padding:0;font-size:14px;text-decoration:none}.btn-link:hover{text-decoration:underline}.status-new{color:#1976d2;background-color:#e3f2fd}.status-progress{color:#f57c00;background-color:#fff3e0}.status-completed{color:#388e3c;background-color:#e8f5e9}.status-review{color:#7b1fa2;background-color:#f3e5f5}.status-pending{color:#f57f17;background-color:#fff9c4}.status-approved{color:#2e7d32;background-color:#c8e6c9}.status-delivered{color:#00695c;background-color:#b2dfdb}.status-hold{color:#d84315;background-color:#ffccbc}.status-cancelled{color:#c62828;background-color:#ffcdd2}.status-default{color:#616161;background-color:#f5f5f5}.status-paid{color:#2e7d32;background-color:#c8e6c9}.product-form{background:#fff;border-radius:8px;margin-top:20px;padding:30px;box-shadow:0 2px 4px #0000001a}.form-section{-webkit-backdrop-filter:blur(15px);background:#ffffffbf;border:1px solid #ffffff80;border-radius:12px;margin-bottom:30px;padding:20px;box-shadow:0 4px 16px #1f268714}.section-title{color:#1e3c72;border-bottom:2px solid #2a5298;margin:0 0 15px;padding-bottom:10px;font-size:16px;font-weight:600}.form-row{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:20px;display:grid}.form-group select{color:#2c3e50;background-color:#fff;border:1px solid #ddd;border-radius:4px;width:100%;padding:10px;font-size:14px}.form-group select:focus{border-color:#007bff;outline:none}.form-group select:disabled{cursor:not-allowed;background-color:#f5f5f5}.product-detail-header{border-bottom:2px solid #e0e0e0;justify-content:space-between;align-items:flex-start;margin:20px 0;padding-bottom:20px;display:flex}.product-detail-header h2{margin:0 0 5px}.client-info{color:#666;margin:0;font-size:14px}.header-actions{gap:10px;display:flex}.detail-sections{flex-direction:column;gap:30px;display:flex}.detail-section{-webkit-backdrop-filter:blur(20px);background:#ffffffbf;border:1px solid #ffffff80;border-radius:16px;padding:25px;box-shadow:0 8px 32px #1f268714}.detail-section h3{color:#1e3c72;border-bottom:2px solid #2a5298;margin:0 0 20px;padding-bottom:10px;font-size:18px}.info-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px;display:grid}.info-item{align-items:baseline;gap:10px;display:flex}.info-item label{color:#4a5f7f;min-width:150px;font-weight:600}.info-item span{color:#2c3e50}.remarks-section{border-top:1px solid #e0e0e0;margin-top:20px;padding-top:20px}.remarks-section label{color:#4a5f7f;margin-bottom:10px;font-weight:600;display:block}.remarks-section p{color:#333;margin:0;line-height:1.6}.upload-section{-webkit-backdrop-filter:blur(10px);background:#f8f9fa80;border:1px solid #fff3;border-radius:12px;margin-bottom:20px;padding:20px}.upload-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.upload-controls select{background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px 12px;font-size:14px}.upload-controls input[type=file]{flex:1;min-width:200px}.file-info{color:#666;margin-top:10px;font-size:14px}.documents-table{border-collapse:collapse;width:100%;margin-top:20px}.documents-table th,.documents-table td{text-align:left;border-bottom:1px solid #e0e0e0;padding:12px}.documents-table thead th{-webkit-backdrop-filter:blur(10px);color:#1e3c72;background:#1e3c7214;font-weight:600}.documents-table tbody tr:hover{background:#1e3c720d}.no-documents{text-align:center;color:#999;padding:40px 20px;font-style:italic}.btn-success{color:#fff;cursor:pointer;background-color:#28a745;border:none;border-radius:4px;padding:10px 20px;font-size:14px}.btn-success:hover{background-color:#218838}.btn-danger{color:#fff;background-color:#dc3545}.btn-danger:hover{background-color:#c82333}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{-webkit-backdrop-filter:blur(30px);background:#ffffffe6;border:1px solid #ffffff2e;border-radius:20px;width:90%;max-width:600px;padding:30px;box-shadow:0 8px 32px #1f26875e}.modal-content h3{color:#333;margin:0 0 15px}.modal-content p{color:#666;margin:0 0 15px}.change-comment-textarea{resize:vertical;border:1px solid #ddd;border-radius:4px;width:100%;margin-bottom:20px;padding:10px;font-family:inherit;font-size:14px}.change-comment-textarea:focus{border-color:#007bff;outline:none}.change-comment-textarea:disabled{cursor:not-allowed;background-color:#f5f5f5}.modal-actions{justify-content:flex-end;gap:10px;display:flex}.btn-warning{color:#212529;background-color:#ffc107}.btn-warning:hover:not(:disabled){background-color:#e0a800}.btn-secondary{color:#fff;background-color:#6c757d}.btn-secondary:hover:not(:disabled){background-color:#5a6268}.status-history-timeline{padding-left:30px;position:relative}.timeline-item{padding-bottom:25px;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-marker{background-color:#2a5298;border:3px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;top:5px;left:-30px;box-shadow:0 0 0 2px #2a5298}.timeline-item:before{content:"";background-color:#1e3c7233;width:2px;height:calc(100% - 12px);position:absolute;top:17px;left:-24px}.timeline-item:last-child:before{display:none}.timeline-content{-webkit-backdrop-filter:blur(10px);background:#fff9;border:1px solid #ffffff80;border-left:3px solid #2a5298e6;border-radius:12px;padding:15px}.timeline-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.status-change{align-items:center;gap:8px;display:flex}.status-badge{text-transform:capitalize;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600}.prev-status{color:#495057;background-color:#e9ecef}.new-status{color:#0c5460;background-color:#d1ecf1}.arrow{color:#6c757d;font-weight:700}.timeline-date{color:#6c757d;font-size:13px}.timeline-meta{color:#6c757d;margin-bottom:8px;font-size:14px}.timeline-comment{background:#fff;border-left:3px solid #ffc107;border-radius:4px;margin-top:10px;padding:10px;font-size:14px}.timeline-comment strong{color:#856404;margin-right:5px}.operation-badge{text-transform:uppercase;color:#fff;background-color:#007bff;border-radius:4px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.timeline-changes{flex-direction:column;gap:8px;margin-top:12px;display:flex}.change-item{background:#fff;border-left:3px solid #28a745;border-radius:6px;flex-direction:column;gap:4px;padding:10px 14px;display:flex}.field-name{color:#495057;font-size:13px;font-weight:600}.field-value-change{flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.old-value{color:#dc3545;background:#ffe6e6;border-radius:3px;padding:2px 8px;font-weight:400;text-decoration:line-through}.change-arrow{color:#6c757d;font-size:14px;font-weight:700}.new-value{color:#28a745;background:#e6ffe6;border-radius:3px;padding:2px 8px;font-weight:500}.removed-value{color:#dc3545;font-style:italic}.operation-badge{text-transform:uppercase;border-radius:4px;padding:4px 10px;font-size:12px;font-weight:600}.operation-insert{color:#0c5460;background:#d1ecf1}.operation-update{color:#856404;background:#fff3cd}.operation-delete{color:#721c24;background:#f8d7da}.timeline-info{color:#6c757d;margin-top:8px;font-size:13px;font-style:italic}@media (max-width:768px){.product-detail-header{flex-direction:column;gap:15px}.header-actions{flex-direction:column;width:100%}.info-grid{grid-template-columns:1fr}.upload-controls{flex-direction:column;align-items:stretch}.upload-controls select,.upload-controls input[type=file]{width:100%}}