body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}body,html{background-color:#f9fafb;color:#333;font-family:Inter,Arial,sans-serif;margin:0;padding:0}.products-page{margin:0 auto;max-width:1200px;min-height:100vh;padding:24px}.products-header{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:24px}.products-header h1{color:#111827;font-size:24px;font-weight:600}.products-header button{border:none;border-radius:6px;cursor:pointer;font-weight:500;padding:10px 16px;transition:all .2s ease-in-out}.products-header .add-btn{background-color:#16a34a;color:#fff}.products-header .add-btn:hover{background-color:#15803d;transform:translateY(-1px)}.products-header .qr-btn{background-color:#0b63ce;color:#fff}.products-header .qr-btn:hover{background-color:#0b63ce;transform:translateY(-1px)}.products-header .refresh-btn{background-color:#e5e7eb;color:#111827}.products-header .refresh-btn:hover{background-color:#d1d5db}table{background-color:#fff;border-collapse:collapse;border-radius:8px;box-shadow:0 6px 16px #0000000d;overflow:hidden;width:100%}thead{background-color:#0b63ce;color:#fff;position:-webkit-sticky;position:sticky;top:0;z-index:10}thead th{color:#fff!important}thead tr:hover{background-color:#0b63ce;cursor:default}td,th{border-bottom:1px solid #e5e7eb;font-size:14px;padding:12px 16px;text-align:left}.product-img,td img{border-radius:4px;height:48px;object-fit:cover;transition:transform .18s ease,filter .18s ease;width:64px}.product-img:hover,td img:hover{cursor:pointer;filter:brightness(1.03);transform:scale(1.06)}tbody tr:hover{background-color:#f1f5f9;transition:background-color .2s ease-in-out}.clickable-row{cursor:pointer;transition:background-color .15s ease}.clickable-row:hover{background-color:#eef2ff}.product-name{color:inherit;transition:color .15s ease,-webkit-text-decoration .15s ease;transition:color .15s ease,text-decoration .15s ease;transition:color .15s ease,text-decoration .15s ease,-webkit-text-decoration .15s ease}.product-name:hover{color:#2563eb;cursor:pointer;text-decoration:underline}.action-btn{border:none;border-radius:4px;cursor:pointer;font-size:13px;padding:6px 10px;transition:all .2s ease}.edit-btn{background-color:#facc15;color:#111827}.delete-btn{background-color:#ef4444;color:#fff}.edit-btn:hover{background-color:#eab308;transform:scale(1.05)}.delete-btn:hover{background-color:#dc2626;transform:scale(1.05)}.action-btn:focus,.action-btn:hover{box-shadow:0 6px 18px #2563eb14;outline:none}.modal-overlay{animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#00000073;inset:0;padding:16px;z-index:50}.confirm-box,.modal-box{animation:slideUp .25s ease;background:#fff;border-radius:10px;box-shadow:0 10px 30px #0000001f;max-height:90vh;max-width:700px;overflow-y:auto;padding:24px;width:100%}.confirm-box{animation:popIn .25s ease;box-shadow:0 6px 25px #0000001f;max-width:360px;padding:24px;text-align:center}@keyframes popIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-box h2{color:#1e293b;font-size:20px;font-weight:600;margin-bottom:16px}.confirm-box h3{color:#111827;font-size:18px;font-weight:600;margin-bottom:12px}.confirm-box p{color:#6b7280;font-size:14px;margin-bottom:16px}.confirm-box button,.modal-box button{border:none;border-radius:6px;cursor:pointer;font-weight:500;padding:8px 14px;transition:all .2s ease}.cancel-btn,.confirm-box .cancel-btn{background:#e5e7eb;color:#111827}.cancel-btn:hover,.confirm-box .cancel-btn:hover{background:#d1d5db}.confirm-box .delete-btn,.delete-btn{background:#dc2626;color:#fff}.confirm-box .delete-btn:hover,.delete-btn:hover{background:#b91c1c;transform:translateY(-1px)}label{color:#374151;display:block;font-size:14px;font-weight:500;margin-bottom:4px}input,select,textarea{background-color:#f9fafb;border:1px solid #d1d5db;border-radius:6px;font-size:14px;margin-bottom:12px;padding:8px 10px;transition:all .2s ease;width:100%}input:focus,select:focus,textarea:focus{background-color:#fff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26;outline:none}.details{background-color:#f8fafc;border:1px solid #d1d5db;border-radius:6px;margin-top:12px;padding:12px}details summary{color:#111827;cursor:pointer;font-weight:500;margin-bottom:6px;-webkit-user-select:none;user-select:none}details[open] summary{color:#2563eb}@media (max-width:768px){.products-header{align-items:flex-start;flex-direction:column}td,th{font-size:13px}.modal-box{padding:18px}}@media (max-width:420px){.confirm-box:hover,.modal-box:hover,td img:hover{box-shadow:none;transform:none}}.form-card{border-radius:16px;overflow:hidden}.form-header{background:#fff}.form-label{font-size:13px;margin-bottom:6px}.form-input,.form-select,.form-textarea{background:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;padding:10px 12px;transition:box-shadow .15s ease,border-color .15s ease;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{background:#fff;border-color:#2563eb;box-shadow:0 6px 18px #2563eb14;outline:none}.form-textarea{min-height:96px;resize:vertical}.form-footer{align-items:center;border-top:1px solid #e5e7eb;display:flex;gap:12px;justify-content:space-between;padding-top:1rem}.btn-link,.btn-primary,.btn-secondary{align-items:center;display:inline-flex;font-size:14px;height:44px;justify-content:center;line-height:1;min-height:44px;padding:0 16px}.btn-primary{border-radius:10px}.btn-primary:hover{background-color:#095ab8}.btn-secondary{background-color:#eef2f7;border:1px solid #e6e9ee;border-radius:10px;color:#111827}.btn-secondary:hover{background-color:#e6eef7}.btn-link{background:#0000;color:#ef4444;padding:0 12px;text-decoration:underline}.form-footer>.flex{align-items:center}@media (max-width:420px){.form-footer{align-items:stretch;flex-direction:column}.form-footer>.flex{justify-content:flex-end;width:100%}.btn-primary,.btn-secondary{height:44px;width:100%}}.users-container{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;padding:2rem}.users-header{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;justify-content:space-between;margin-bottom:2rem;padding:1.5rem}.users-header h1{color:#111827;font-size:2rem;margin:0}.users-empty,.users-loading{align-items:center;display:flex;justify-content:center;min-height:400px;padding:2rem}.table-wrapper,.users-empty,.users-loading{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.table-wrapper{overflow-x:auto}.user-table{border-collapse:collapse;width:100%}.user-table thead{background:linear-gradient(135deg,#0b63ce,#2563eb)}.user-table th{border:none;color:#fff;font-weight:600;letter-spacing:.5px;padding:1rem;position:-webkit-sticky;position:sticky;text-align:left;top:0;z-index:10}.user-table thead tr:hover{background:linear-gradient(135deg,#0b63ce,#2563eb);cursor:default}.user-table tbody tr{border-bottom:1px solid #e5e7eb;transition:background-color .2s ease}.user-table tbody tr:hover{background-color:#f9fafb}.user-table td{color:#374151;padding:1.25rem 1rem;vertical-align:middle}.user-table td.font-semibold{color:#111827;font-weight:600}.badge{border-radius:9999px;display:inline-block;font-size:.875rem;font-weight:600;padding:.25rem .75rem}.badge-primary{background-color:#dbeafe;color:#0b63ce}.permissions{display:flex;flex-direction:column;font-size:.875rem;gap:.25rem}.permission-yes{color:#16a34a;font-weight:500}.permission-no{color:#ef4444;font-weight:500}.actions-cell{display:flex;flex-wrap:wrap;gap:.5rem}.actions-cell button{font-size:.875rem;padding:.5rem .75rem;white-space:nowrap}.btn-primary{align-items:center;background-color:#0b63ce;border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-weight:600;gap:.5rem;padding:.75rem 1.25rem;transition:all .3s ease}.btn-primary:hover{background-color:#2563eb;box-shadow:0 4px 12px #0b63ce4d;transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{align-items:center;background-color:#e5e7eb;border:none;border-radius:8px;color:#374151;cursor:pointer;display:inline-flex;font-weight:600;gap:.5rem;padding:.75rem 1rem;transition:all .3s ease}.btn-secondary:hover{background-color:#d1d5db}.btn-danger{align-items:center;background-color:#fee2e2;border:none;border-radius:8px;color:#dc2626;cursor:pointer;display:inline-flex;font-weight:600;gap:.5rem;padding:.75rem 1rem;transition:all .3s ease}.btn-danger:hover{background-color:#fecaca}.btn-link{background:none;border:none;color:#dc2626;cursor:pointer;font-weight:600;transition:color .2s ease}.btn-link:hover{color:#b91c1c}.form-section{border-bottom:1px solid #e5e7eb;margin-bottom:1.5rem;padding-bottom:1.5rem}.form-section:last-of-type{border-bottom:none}.form-group{margin-bottom:1.25rem}.form-label{color:#374151;display:block;font-size:.95rem;font-weight:600;margin-bottom:.5rem}.form-input,.form-textarea{border:2px solid #e5e7eb;border-radius:8px;font-family:inherit;font-size:1rem;padding:.75rem;transition:all .3s ease;width:100%}.form-input:focus,.form-textarea:focus{border-color:#0b63ce;box-shadow:0 0 0 3px #0b63ce1a;outline:none}.form-input::placeholder{color:#9ca3af}.permissions-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.permissions-grid label{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:.75rem;padding:.75rem;transition:background-color .2s ease}.permissions-grid label:hover{background-color:#f3f4f6}.permissions-grid input[type=checkbox]{cursor:pointer}.modal-overlay{align-items:center;animation:fadeIn .2s ease-out;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.modal-box{animation:slideUp .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;max-height:90vh;overflow-y:auto;padding:2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.users-header{flex-direction:column;gap:1rem;text-align:center}.users-header h1{font-size:1.5rem}.user-table td,.user-table th{font-size:.875rem;padding:.75rem .5rem}.permissions-grid{grid-template-columns:1fr}.modal-box{margin:1rem;padding:1.5rem}}.td-name{font-weight:600;min-width:150px}.td-email{min-width:180px}.td-role{min-width:100px;text-align:center}.td-permissions{min-width:280px}.td-actions{min-width:140px;text-align:center;white-space:nowrap}.permission-grid{grid-gap:.5rem;align-items:center;display:grid;font-size:.85rem;gap:.5rem;grid-template-columns:repeat(3,1fr);justify-items:center}.permission-grid span{border-radius:4px;font-weight:500;padding:.25rem .5rem;white-space:nowrap}.btn-danger-sm,.btn-secondary-sm{border:none;border-radius:6px;cursor:pointer;display:inline-block;font-size:.875rem;font-weight:600;padding:.5rem .75rem;transition:all .2s ease;white-space:nowrap}.btn-secondary-sm{background-color:#dbeafe;color:#0b63ce;margin-right:.5rem}.btn-secondary-sm:hover{background-color:#bfdbfe;transform:translateY(-1px)}.btn-danger-sm{background-color:#fee2e2;color:#dc2626}.btn-danger-sm:hover{background-color:#fecaca;transform:translateY(-1px)}