*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#1e3c72;--primary-hover:#2a5298;--primary-light:#e8eef7;--bg-main:#f5f7fa;--text-primary:#1a202c;--text-secondary:#64748b;--text-muted:#94a3b8;--card-bg:#fff;--border-color:#e2e8f0;--border-hover:#cbd5e1;--success:#059669;--success-bg:#ecfdf5;--warning:#d97706;--warning-bg:#fffbeb;--danger:#dc2626;--danger-bg:#fef2f2;--info:#0284c7;--info-bg:#f0f9ff;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000a;--radius-sm:6px;--radius-md:10px;--radius-lg:14px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-main);min-height:100vh;color:var(--text-primary);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}#root{min-height:100vh}a{color:var(--primary-color);text-decoration:none;transition:color .2s}a:hover{color:var(--primary-hover)}.month-tabs-container{background-color:var(--bg-main);border-radius:var(--radius-md);border:1px solid var(--border-color);gap:4px;width:fit-content;margin-bottom:20px;padding:4px;display:flex}.month-tab{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);letter-spacing:.01em;background:0 0;border:none;padding:8px 18px;font-size:13px;font-weight:600;transition:all .2s}.month-tab:hover{background-color:var(--primary-light);color:var(--primary-color)}.month-tab.active{background-color:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm);font-weight:600}.main-tabs-container{border-bottom:2px solid var(--border-color);gap:0;margin:0 40px 24px;padding:0;display:flex}.main-tab{color:var(--text-secondary);cursor:pointer;letter-spacing:.01em;background:0 0;border:none;border-bottom:3px solid #0000;margin-bottom:-2px;padding:12px 28px;font-size:14px;font-weight:600;transition:all .2s}.main-tab:hover{color:var(--primary-color);background-color:var(--primary-light)}.main-tab.active{color:var(--primary-color);border-bottom:3px solid var(--primary-color);background-color:#0000;font-weight:700}.btn{border-radius:var(--radius-sm);cursor:pointer;letter-spacing:.01em;border:none;justify-content:center;align-items:center;gap:6px;padding:9px 20px;font-size:13px;font-weight:600;line-height:1.5;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);background-color:#fff}.btn-secondary:hover{border-color:var(--border-hover);background-color:#f8fafc}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-success{background-color:var(--success);color:#fff}.btn-success:hover{background-color:#047857}.btn-sm{border-radius:var(--radius-sm);padding:5px 12px;font-size:12px}.section-card,.data-table-container,.card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);transition:box-shadow .2s;overflow:hidden}.section-card:hover,.card:hover{box-shadow:var(--shadow-md)}.btn-warning{background-color:var(--warning);color:#fff}.btn-warning:hover{background-color:#b45309}.btn-icon{border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;padding:8px 12px}.btn-icon:hover{background-color:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color)}input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],select,textarea{color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:#fff;padding:9px 12px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #1e3c721a}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@keyframes spin{to{transform:rotate(360deg)}}.login-container{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 50%,#1e3c72 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{border-radius:var(--radius-lg,14px);background:#fff;border:none;width:100%;max-width:420px;padding:44px 40px;box-shadow:0 20px 60px #00000026}.login-card h1{text-align:center;color:#1e3c72;letter-spacing:-.02em;margin-bottom:8px;font-size:24px;font-weight:700}.login-card h2{text-align:center;color:#64748b;margin-bottom:32px;font-size:15px;font-weight:400}.form-group input{box-sizing:border-box;color:#1a202c;background:#fff;border:1px solid #d1d5db;border-radius:8px;width:100%;padding:11px 14px;font-size:14px;transition:all .2s}.form-group input::placeholder{color:#9ca3af}.login-button{color:#fff;cursor:pointer;letter-spacing:.01em;background:#1e3c72;border:none;border-radius:8px;width:100%;padding:12px;font-size:15px;font-weight:600;transition:all .2s}.login-button:hover:not(:disabled){background:#2a5298;transform:translateY(-1px);box-shadow:0 6px 20px #1e3c724d}.login-button:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#dc2626;text-align:center;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;justify-content:center;align-items:center;margin-bottom:20px;padding:12px;font-size:13px;display:flex}.success-message{color:#059669;text-align:center;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;justify-content:center;align-items:center;margin-bottom:20px;padding:12px;font-size:13px;display:flex}.generate-password-container{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 50%,#1e3c72 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.generate-password-card{border-radius:var(--radius-lg,14px);background:#fff;width:100%;max-width:480px;padding:44px 40px;box-shadow:0 20px 60px #00000026}.logo-section{text-align:center;margin-bottom:36px}.logo-section .logo{max-width:180px;height:auto;margin-bottom:20px}.logo-section h1{color:#1e3c72;letter-spacing:-.02em;margin:0 0 8px;font-size:24px;font-weight:700}.logo-section .subtitle{color:#64748b;margin:0;font-size:15px}.password-form{flex-direction:column;gap:20px;display:flex}.alert{border-radius:8px;align-items:center;gap:10px;padding:12px 16px;font-size:13px;line-height:1.5;display:flex}.alert svg{flex-shrink:0}.alert-error{color:#dc2626;background-color:#fef2f2;border:1px solid #fecaca}.alert-success{color:#059669;background-color:#ecfdf5;border:1px solid #a7f3d0}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:#374151;font-size:13px;font-weight:600}.form-group input{color:#1a202c;border:1px solid #d1d5db;border-radius:8px;padding:11px 14px;font-size:14px;transition:all .2s}.form-group input:focus{border-color:#1e3c72;outline:none;box-shadow:0 0 0 3px #1e3c721f}.form-group input:disabled{cursor:not-allowed;background-color:#f8f9fa}.form-group input[readonly]{background-color:#e9ecef}.password-input-wrapper{position:relative}.password-input-wrapper input{width:100%;padding-right:45px}.toggle-password{cursor:pointer;color:#64748b;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.toggle-password:hover{color:#1e3c72}.submit-btn{color:#fff;cursor:pointer;letter-spacing:.01em;background:#1e3c72;border:none;border-radius:8px;margin-top:10px;padding:12px 24px;font-size:15px;font-weight:600;transition:all .2s}.submit-btn:hover:not(:disabled){background:#2a5298;transform:translateY(-1px);box-shadow:0 6px 20px #1e3c724d}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.login-link{text-align:center;color:#64748b;margin-top:10px;font-size:14px}.login-link a{color:#1e3c72;font-weight:600;text-decoration:none}.login-link a:hover{text-decoration:underline}@media (max-width:576px){.generate-password-card{padding:30px 20px}.logo-section h1{font-size:20px}.logo-section .subtitle{font-size:14px}}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0;overflow-y:auto}.product-form-modal{background:#fff;border-radius:8px;flex-direction:column;width:100%;max-width:1100px;max-height:90vh;display:flex;box-shadow:0 4px 20px #00000026}.modal-header{border-bottom:1px solid #e0e0e0;flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-close{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:24px;transition:all .2s;display:flex}.modal-close:hover{color:#333;background-color:#f5f5f5}.modal-body{flex:1;min-height:0;padding:28px 32px;overflow:hidden auto}.modal-form .form-section{background-color:#f8f9fa;border-radius:6px;margin-bottom:16px;padding:20px}.modal-form .form-section.collapsible{background-color:#e7f3ff;border-left:4px solid #0dcaf0}.modal-form .form-section .section-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;display:flex}.modal-form .form-section .section-header:hover{opacity:.8}.modal-form .form-section .section-header i{color:#0dcaf0;font-size:14px;transition:transform .2s}.modal-form .section-title{color:#1e3c72;margin:0 0 16px;font-size:16px;font-weight:600}.modal-form .form-section.collapsible .section-title{margin-bottom:0}.modal-form .form-section .section-content{margin-top:16px}.modal-form .form-row{grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:12px;display:grid}.modal-form .form-row:last-child{margin-bottom:0}.modal-form .form-group{flex-direction:column;display:flex}.modal-form .form-group.full-width{grid-column:1/-1}.modal-form .form-group label{color:#495057;margin-bottom:6px;font-size:13px;font-weight:500}.modal-form .form-group input,.modal-form .form-group select,.modal-form .form-group textarea{border:1px solid #ddd;border-radius:4px;padding:10px 12px;font-size:14px;transition:border-color .2s}.modal-form .form-group input:focus,.modal-form .form-group select:focus,.modal-form .form-group textarea:focus{border-color:#1e3c72;outline:none;box-shadow:0 0 0 3px #1e3c721a}.modal-form .form-group input:disabled,.modal-form .form-group select:disabled,.modal-form .form-group textarea:disabled{cursor:not-allowed;background-color:#f5f5f5}.modal-footer{border-top:1px solid #e0e0e0;flex-shrink:0;justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.modal-footer .btn{cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.modal-footer .btn-secondary{color:#fff;background-color:#6c757d}.modal-footer .btn-secondary:hover:not(:disabled){background-color:#5a6268}.modal-footer .btn-primary{color:#fff;background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%)}.modal-footer .btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#1a3461 0%,#254880 100%);transform:translateY(-1px);box-shadow:0 4px 12px #1e3c724d}.modal-footer .btn:disabled{opacity:.6;cursor:not-allowed}.product-form-modal .error-message{color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;margin:16px 24px 0;padding:12px 16px;font-size:14px}.product-form-modal .spinner{border:4px solid #f3f3f3;border-top-color:#1e3c72;border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:1s linear infinite spin}@media (max-width:1200px){.product-form-modal{max-width:95%}.modal-form .form-row{grid-template-columns:repeat(2,1fr);gap:16px}}@media (max-width:768px){.product-form-modal{max-width:95%;max-height:95vh}.modal-form .form-row{grid-template-columns:1fr;gap:12px}.modal-header,.modal-body{padding:16px}.modal-footer{padding:12px 16px}.modal-form .form-section{padding:16px}}.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{border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);border:1px solid var(--border-color,#e2e8f0);text-align:center;background:#fff;padding:24px}.card h3{color:var(--primary-color,#1e3c72);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;font-size:13px;font-weight:600}.card h3.success{color:var(--success,#059669)}.card h3.warning{color:var(--warning,#d97706)}.card .value{color:var(--text-primary,#1a202c);margin:0;font-size:32px;font-weight:700}.card .value.success{color:var(--success,#059669)}.card .value.warning{color:var(--warning,#d97706)}.charts-grid{grid-template-columns:1fr 400px;gap:24px;margin-bottom:30px;display:grid}@media (max-width:1024px){.charts-grid{grid-template-columns:1fr}}.chart-container{border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);border:1px solid var(--border-color,#e2e8f0);background:#fff;padding:24px}.chart-container.full-width{grid-column:1/-1}.chart-container.status-chart,.chart-container.payment-chart{height:400px}.chart-container h3{color:var(--text-primary,#1a202c);border-bottom:1px solid var(--border-color,#e2e8f0);margin-bottom:20px;padding-bottom:12px;font-size:16px;font-weight:700}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--border-color,#e2e8f0);padding:11px 16px}.data-table th{background-color:var(--bg-main,#f5f7fa);color:var(--text-secondary,#64748b);text-transform:uppercase;letter-spacing:.05em;font-size:11px;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{border-radius:var(--radius-lg,14px);width:90%;max-width:500px;max-height:90vh;box-shadow:var(--shadow-lg,0 12px 40px #0000001f);background:#fff;animation:.3s ease-out slideIn;overflow-y:auto}@keyframes slideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--border-color,#e2e8f0);justify-content:space-between;align-items:center;padding:20px 25px;display:flex}.modal-header h2{color:var(--text-primary,#1a202c);margin:0;font-size:1.25rem;font-weight:700}.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}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{width:100%;color:var(--text-primary,#1a202c);border:1px solid #d1d5db;border-radius:8px;padding:11px 40px 11px 14px;font-size:14px;transition:all .2s}.password-input-wrapper input:focus{border-color:var(--primary-color,#1e3c72);outline:none;box-shadow:0 0 0 3px #1e3c721a}.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:#1e3c72}.btn-primary:hover:not(:disabled){background-color:#2a5298;transform:translateY(-1px);box-shadow:0 4px 12px #1e3c724d}.btn-secondary{color:#333;background-color:#f5f5f5}.btn-secondary:hover:not(:disabled){background-color:#e0e0e0}.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 var(--border-color,#e2e8f0);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-top:16px;padding:16px 0;display:flex}.pagination-info{color:var(--text-secondary,#64748b);flex-wrap:wrap;align-items:center;gap:20px;font-size:13px;display:flex}.page-size-selector{align-items:center;gap:8px;display:flex}.page-size-select{border:1px solid var(--border-color,#e2e8f0);cursor:pointer;color:var(--text-primary,#1a202c);background-color:#fff;border-radius:6px;padding:6px 12px;font-size:13px}.page-size-select:hover{border-color:var(--primary-color,#1e3c72)}.page-size-select:focus{border-color:var(--primary-color,#1e3c72);outline:none;box-shadow:0 0 0 3px #1e3c721a}.pagination-controls{align-items:center;gap:4px;display:flex}.pagination-btn{border:1px solid var(--border-color,#e2e8f0);color:var(--text-primary,#1a202c);cursor:pointer;background-color:#fff;border-radius:6px;justify-content:center;align-items:center;min-width:36px;padding:7px 12px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.pagination-btn:hover:not(:disabled){background-color:var(--primary-light,#e8eef7);border-color:var(--primary-color,#1e3c72);color:var(--primary-color,#1e3c72)}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.pagination-btn.active{background-color:var(--primary-color,#1e3c72);color:#fff;border-color:var(--primary-color,#1e3c72);font-weight:600}.pagination-ellipsis{color:var(--text-muted,#94a3b8);-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%}}.notification-bell-container{position:relative}.notification-bell-button{cursor:pointer;color:#495057;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex;position:relative}.notification-bell-button:hover{background-color:#0000000d}.notification-bell-button svg{width:24px;height:24px}.notification-badge{color:#fff;background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);border-radius:10px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:2px 5px;font-size:10px;font-weight:700;display:flex;position:absolute;top:4px;right:4px;box-shadow:0 2px 4px #0003}.notification-dropdown{z-index:99999;background:#fff;border:1px solid #e9ecef;border-radius:12px;flex-direction:column;width:420px;max-height:600px;display:flex;position:fixed;box-shadow:0 8px 24px #00000026}.notification-header{border-bottom:1px solid #e9ecef;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.notification-header h3{color:#212529;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:600;display:flex}.notification-header h3 span{color:#6c757d;font-size:14px;font-weight:500}.mark-all-read-btn{color:var(--primary-color,#1e3c72);border:1px solid var(--primary-color,#1e3c72);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .2s}.mark-all-read-btn:hover:not(:disabled){background:var(--primary-color,#1e3c72);color:#fff}.mark-all-read-btn:disabled{opacity:.5;cursor:not-allowed}.notification-list{max-height:520px;overflow-y:auto}.no-notifications{text-align:center;color:#6c757d;padding:60px 20px}.no-notifications svg{color:var(--primary-color,#1e3c72);margin-bottom:16px}.no-notifications p{color:#212529;margin:0 0 4px;font-size:18px;font-weight:600}.no-notifications span{color:#6c757d;font-size:14px}.notification-item{border-bottom:1px solid #f1f3f5;gap:12px;padding:16px 20px;transition:background-color .2s;display:flex}.notification-item:last-child{border-bottom:none}.notification-item:hover{background-color:#f8f9fa}.notification-content{flex:1;min-width:0}.notification-title{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;display:flex}.product-name{color:#212529;font-size:14px;font-weight:600}.client-badge{color:#1971c2;background-color:#e7f5ff;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500}.notification-meta{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.unread-count{color:var(--primary-color,#1e3c72);font-size:12px;font-weight:600}.category-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:600}.category-testing{color:#e67700;background-color:#fff4e6}.category-qa{color:#1971c2;background-color:#e7f5ff}.category-admin{color:#6741d9;background-color:#f3f0ff}.category-payment{color:#2b8a3e;background-color:#d3f9d8}.category-delivery{color:#c92a2a;background-color:#fff5f5}.category-general{color:#495057;background-color:#f1f3f5}.remark-preview{color:#495057;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:8px 0;font-size:13px;line-height:1.5;display:-webkit-box;overflow:hidden}.notification-time{color:#868e96;margin-top:4px;font-size:12px}.notification-actions{flex-direction:column;align-self:flex-start;gap:6px;display:flex}.view-btn,.dismiss-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;transition:all .2s}.view-btn{background:var(--primary-color,#1e3c72);color:#fff}.view-btn:hover{background:var(--primary-hover,#2a5298);transform:translateY(-1px);box-shadow:0 4px 8px #1e3c724d}.dismiss-btn{color:#6c757d;background:0 0;border:1px solid #dee2e6}.dismiss-btn:hover{background:#f8f9fa;border-color:#adb5bd}@media (max-width:576px){.notification-dropdown{width:calc(100vw - 32px);right:-8px}.notification-header{flex-direction:column;align-items:flex-start;gap:12px}.mark-all-read-btn{width:100%}.notification-item{flex-direction:column;gap:12px}.notification-actions{flex-direction:row;width:100%}.view-btn,.dismiss-btn{flex:1}}.page-container{min-height:100vh}.page-header{border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:100;background:#fff;justify-content:space-between;align-items:center;margin-bottom:24px;padding:14px 40px;display:flex;position:sticky;top:0}.page-header h1{color:var(--primary-color);letter-spacing:-.01em;margin:0;font-size:18px;font-weight:700}.user-info{align-items:center;gap:16px;display:flex}.user-info span{color:var(--text-secondary);font-size:13px;font-weight:500}.content{max-width:1600px;margin:0 auto;padding:0 40px 40px}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-header h2{color:var(--text-primary);letter-spacing:-.01em;margin:0;font-size:18px;font-weight:700}.data-table{border-collapse:separate;border-spacing:0;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#fff;width:100%;font-size:13px}.data-table thead{background:var(--bg-main)}.data-table th{text-align:left;color:var(--text-secondary);border-bottom:1px solid var(--border-color);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;font-size:11px;font-weight:600}.data-table th:first-child{border-top-left-radius:var(--radius-md)}.data-table th:last-child{border-top-right-radius:var(--radius-md)}.data-table td{border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle;padding:11px 16px}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr{transition:background-color .15s}.data-table tbody tr:hover{background:var(--primary-light)}.status-badge{text-align:center;letter-spacing:.02em;white-space:nowrap;border-radius:9999px;align-items:center;padding:4px 10px;font-size:11px;font-weight:600;line-height:1.2;display:inline-flex}.status-badge.active{background:var(--success-bg);color:var(--success)}.status-badge.inactive{background:var(--danger-bg);color:var(--danger)}.status-badge.status-paid{background:var(--success-bg);color:var(--success)}.status-badge.status-pending{background:var(--warning-bg);color:var(--warning)}.status-badge.status-overdue{background:var(--danger-bg);color:var(--danger)}.error-message{background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-sm);border:1px solid #fecaca;margin-bottom:20px;padding:12px 16px;font-size:13px;font-weight:500}.loading{text-align:center;color:var(--text-secondary);padding:40px;font-size:14px}.section-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);background:#fff;padding:24px}code{background-color:var(--bg-main);color:var(--text-primary);border-radius:4px;padding:2px 6px;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}.service-card{border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);background:#fff;padding:20px;transition:all .2s}.service-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover);transform:translateY(-2px)}.service-card h3{color:var(--primary-color);margin:0 0 8px;font-size:15px;font-weight:600}.service-card p{color:var(--text-secondary);margin:0 0 12px;font-size:13px;line-height:1.5}.library-doc-card{border-radius:var(--radius-md);border:1px solid var(--border-color);background:#fff;align-items:center;gap:12px;padding:16px;transition:all .2s;display:flex}.library-doc-card:hover{border-color:var(--border-hover);background-color:var(--primary-light)}.library-doc-card h4{color:var(--text-primary);font-size:14px;font-weight:500}.form-container{margin:0 auto}.client-form{border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);border:1px solid var(--border-color,#e2e8f0);background:#fff;margin-top:20px;padding:30px}.form-group{margin-bottom:20px}.form-group label{color:#374151;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-group input,.form-group textarea{width:100%;color:var(--text-primary,#1a202c);background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:11px 14px;font-size:14px;transition:all .2s}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary-color,#1e3c72);outline:none;box-shadow:0 0 0 3px #1e3c721a}.form-group input:disabled,.form-group textarea:disabled{cursor:not-allowed;background-color:#f8f9fa}.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:var(--text-secondary);margin-bottom:24px;font-size:15px}.btn-link{color:var(--primary-color);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;margin-bottom:12px;padding:0;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn-link:hover{color:var(--primary-hover);text-decoration:underline}.status-new{color:#1e40af;background-color:#dbeafe}.status-progress{color:#9a3412;background-color:#ffedd5}.status-completed{color:#166534;background-color:#dcfce7}.status-review{color:#6b21a8;background-color:#f3e8ff}.status-pending{color:#854d0e;background-color:#fef9c3}.status-approved{color:#3f6212;background-color:#ecfccb}.status-delivered{color:#115e59;background-color:#ccfbf1}.status-hold{color:#991b1b;background-color:#fee2e2}.status-cancelled,.status-default{color:#64748b;background-color:#f1f5f9}.status-paid{color:#166534;background-color:#dcfce7}.product-detail-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:flex-start;margin:20px 0;padding-bottom:20px;display:flex}.product-detail-header h2{color:var(--text-primary);margin:0 0 5px;font-size:22px;font-weight:700}.client-info{color:var(--text-secondary);margin:0;font-size:14px}.header-actions{gap:10px;display:flex}.detail-sections{flex-direction:column;gap:24px;display:flex}.detail-section{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);background:#fff;padding:24px;transition:box-shadow .2s}.detail-section:hover{box-shadow:var(--shadow-md)}.detail-section h3{color:var(--text-primary);border-bottom:1px solid var(--border-color);letter-spacing:-.01em;margin:0 0 20px;padding-bottom:12px;font-size:16px;font-weight:700}.info-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.info-item{flex-direction:column;gap:6px;display:flex}.info-item label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}.info-item span{color:var(--text-primary);font-size:14px;font-weight:500}.info-item .status-badge{width:fit-content;font-size:11px;font-weight:600}.remarks-section{border-top:1px solid var(--border-color);margin-top:20px;padding-top:20px}.remarks-section label{color:var(--text-primary);margin-bottom:8px;font-size:13px;font-weight:600;display:block}.remarks-section p{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.7}.upload-section{background:var(--primary-light);border-radius:var(--radius-md);border:2px var(--primary-color);margin-bottom:24px;padding:20px;transition:background-color .2s}.upload-section:hover{background:#dce5f3}.upload-controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.upload-controls select{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;background:#fff;min-width:180px;padding:9px 12px;font-size:13px;font-weight:500}.upload-controls input[type=file]{color:var(--text-secondary);font-size:13px}.upload-controls input[type=file]::file-selector-button{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;background:#fff;margin-right:12px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s}.upload-controls input[type=file]::file-selector-button:hover{background:var(--primary-light);border-color:var(--primary-color);color:var(--primary-color)}.file-info{color:var(--text-secondary);margin-top:10px;font-size:13px;font-weight:500}.documents-table{border-collapse:separate;border-spacing:0;border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;font-size:13px;overflow:hidden}.documents-table thead{background:var(--bg-main)}.documents-table th{text-align:left;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);padding:10px 16px;font-size:11px;font-weight:600}.documents-table td{border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle;padding:12px 16px}.documents-table tbody tr:last-child td{border-bottom:none}.documents-table tbody tr{transition:background-color .15s}.documents-table tbody tr:hover{background:var(--primary-light)}.no-documents{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:14px;font-style:normal}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);width:90%;max-width:600px;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);background:#fff;padding:32px}.modal-content h3{color:var(--text-primary);margin:0 0 16px;font-size:18px;font-weight:700}.modal-content p{color:var(--text-secondary);margin:0 0 16px;font-size:14px}.change-comment-textarea{border:1px solid var(--border-color);border-radius:var(--radius-sm);resize:vertical;width:100%;color:var(--text-primary);background-color:#fff;margin-bottom:24px;padding:12px;font-family:inherit;font-size:14px;transition:border-color .2s}.change-comment-textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #1e3c721a}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.status-history-timeline{margin-top:16px;padding-left:32px;position:relative}.timeline-item{padding-bottom:32px;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-marker{background-color:var(--primary-color);width:12px;height:12px;box-shadow:0 0 0 2px var(--primary-color);border:2px solid #fff;border-radius:50%;position:absolute;top:4px;left:-32px}.timeline-item:before{content:"";background-color:var(--border-color);width:2px;height:calc(100% - 12px);position:absolute;top:16px;left:-26px}.timeline-item:last-child:before{display:none}.timeline-content{background:var(--bg-main);border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:12px 16px}.timeline-header{align-items:center;gap:10px;margin-bottom:6px;display:flex}.timeline-date{color:var(--text-muted);font-size:12px}.timeline-meta{color:var(--text-secondary);margin-bottom:8px;font-size:13px}.timeline-info{color:var(--text-secondary);font-size:13px;font-style:italic}.operation-badge{text-transform:uppercase;letter-spacing:.03em;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.operation-insert{background:var(--success-bg);color:var(--success)}.operation-update{background:var(--info-bg);color:var(--info)}.operation-delete{background:var(--danger-bg);color:var(--danger)}.timeline-changes{flex-direction:column;gap:6px;display:flex}.change-item{align-items:baseline;gap:8px;font-size:13px;display:flex}.field-name{color:var(--text-secondary);white-space:nowrap;font-weight:600}.field-value-change{flex-wrap:wrap;align-items:baseline;gap:6px;display:flex}.old-value{color:var(--danger);font-size:12px;text-decoration:line-through}.change-arrow{color:var(--text-muted);font-size:12px}.new-value{color:var(--success);font-weight:500}.removed-value{color:var(--text-muted);font-size:12px}.add-remark-section{margin-bottom:20px}.remarks-list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.remark-item{background:var(--bg-main);border-radius:var(--radius-sm);border:1px solid var(--border-color);padding:14px 16px}.remark-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.remark-meta{align-items:center;gap:8px;font-size:13px;display:flex}.remark-meta strong{color:var(--text-primary)}.role-badge{text-transform:capitalize;background:var(--primary-light);color:var(--primary-color);border-radius:4px;padding:2px 8px;font-size:10px;font-weight:600;display:inline-flex}.role-client{background:var(--info-bg);color:var(--info)}.remark-date{color:var(--text-muted);font-size:12px}.remark-text{color:var(--text-primary);font-size:14px;line-height:1.6}.no-remarks{text-align:center;color:var(--text-muted);padding:30px;font-size:14px}.btn-delete-remark{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;transition:all .15s}.btn-delete-remark:hover{color:var(--danger);background:var(--danger-bg)}