*{margin:0;padding:0;font-family:Inter,sans-serif}.container-login{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center;min-width:400px}.wrapper-login{width:100%;height:50%;display:flex;justify-content:center;align-items:center;gap:2%}.wrapper-login hr{width:1px;height:60%;background-color:#004a73;border:none;margin:0 20px}.left-login{width:20%;height:50%;display:flex;flex-direction:column;gap:20px}.left-login img{width:100%;object-fit:cover}.left-login h4{font-size:24px;color:#004a73;font-weight:400}.right-login{width:20%;height:50%;gap:5%;display:flex;flex-direction:column}.right-login .title-login h1{font-size:24px;color:#004a73}@media (max-width: 900px){.wrapper-login{width:95%;flex-direction:column;gap:30px;padding:30px;height:100%}.wrapper-login hr{width:80%;height:1px}.left-login img{max-width:180px}.left-login,.right-login{width:100%;align-items:center;height:100px}.left-login h4{font-size:20px}}@media (max-width: 600px){.wrapper-login{padding:20px;border-radius:12px}.title-login h1{font-size:24px}.left-login img{max-width:180px}.input-login input,.button-login button{width:100%!important}}@media (max-width: 400px){.wrapper-login{padding:16px}.left-login img{max-width:150px}.title-login h1{font-size:22px}}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:#333}.required{color:red}.input-field{border:1px solid #ccc;border-radius:6px;padding:8px 12px;font-size:14px;outline:none;transition:all .2s ease;width:100%;box-sizing:border-box}.input-field:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff33}.input-field:disabled{background-color:#f5f5f5;cursor:not-allowed}.input-error{border-color:red}.input-error-text{font-size:12px;color:red;margin-top:2px}.container-forgot{display:flex;align-items:center;justify-content:center;height:100vh;background:#f7f8fa}.wrapper-forgot{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;box-shadow:0 4px 10px #0000001a;padding:40px 60px}.left-forgot{display:flex;flex-direction:column;align-items:center;justify-content:center}.left-forgot img{width:120px;object-fit:contain}.left-forgot h4{color:#004a73;margin-top:10px}.divider{width:1px;height:300px;background-color:#ddd;margin:0 40px}.right-forgot{position:relative;display:flex;flex-direction:column;align-items:center}.back-btn{position:absolute;top:0;right:0;background:none;border:none;color:#004a73;font-weight:600;cursor:pointer;font-size:14px;transition:.3s}.back-btn:hover{color:#f6b500}.card-forgot{background-color:#fff;border-radius:16px;padding:40px 50px;text-align:center;min-width:350px}.title-forgot h1{color:#1a2b5f;margin-bottom:10px}.title-forgot p{color:#666;margin-bottom:25px;font-size:14px}.form-forgot{display:flex;flex-direction:column;align-items:center;gap:15px}.button-forgot button{width:300px;height:45px;background-color:#004a73;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600}.button-forgot button:hover{background-color:#f6b500;color:#004a73;transition:.3s}.success-forgot{text-align:center;color:#004a73}.container-app{width:100%;height:100vh;display:flex;font-family:Inter,sans-serif}.left-bar{width:15%;transition:transform .4s ease,opacity .4s ease;transform:translate(0)}.main-bar{flex:1;width:100%;background-color:transparent;padding:16px}.loading-logo-screen{width:100%;height:100vh;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}.loading-logo{width:130px;animation:fadeLogo 1.5s ease-in-out infinite alternate}@keyframes fadeLogo{0%{opacity:.5}to{opacity:1}}.loader-dots{width:36px;height:6px;border-radius:3px;background:linear-gradient(90deg,#d1d5db,#3134ae);animation:dotPulse 1s ease-in-out infinite alternate}@keyframes dotPulse{0%{width:20px;opacity:.4}to{width:36px;opacity:1}}.container-leftbar{width:100%;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center}.wrapper-leftbar{width:90%;height:95%;background-color:#0f1536;border-radius:20px}.title-leftbar{width:100%;height:8%;display:flex;justify-content:center;align-items:center}.title-leftbar h1{font-size:24px;font-weight:500;color:#fff}.menu-leftbar{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px}.menu-leftbar span{font-size:14px;color:#fff;background-color:none;padding:10px;border-radius:5px;cursor:pointer}.menu-leftbar span:hover,.menu-leftbar span.active-menu{font-size:14px;color:#fff;background-color:#7a7a7a;padding:10px;border-radius:5px}.menu-group{display:flex;flex-direction:column;color:#fff}.menu-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600}.submenu-leftbar{display:flex;flex-direction:column;padding-left:8px;padding-top:8px;gap:4px}.submenu-item{cursor:pointer;font-size:14px;color:#a5a5a5;padding:8px 12px;border-radius:8px;transition:all .2s ease}.submenu-item:hover{color:#fff;background-color:#7a7a7a}.active-submenu{color:#75f94c;background-color:#7a7a7a;border-radius:8px;padding:8px 12px;transition:.2s ease}.active-menu-parent{background-color:#7a7a7a;color:#fff;border-radius:8px;transition:all .2s ease}.menu-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:8px;transition:all .2s ease}.menu-header:hover{background-color:#565656}.suppliers-container{width:100%;min-height:90vh;display:flex;flex-direction:column;box-sizing:border-box}.suppliers-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap}.suppliers-header h1{color:#fff;font-size:22px;font-weight:600}.suppliers-header button{display:flex;align-items:center;gap:6px;font-weight:500}.suppliers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.container-box{position:relative;background:#fff;border-radius:14px;transition:all .2s ease-in-out;cursor:pointer}.container-box:hover{transform:translateY(-4px);box-shadow:0 6px 18px #0000001a}.supplier-info h2{font-size:18px;font-weight:600;color:#0f1536;margin-bottom:6px}.supplier-info p{color:#555;font-size:14px;margin-bottom:6px;line-height:1.4}.supplier-info small{display:block;color:#999;font-size:12px;margin-top:4px}.supplier-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}.supplier-actions button{border:none;background:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .2s ease-in-out}.supplier-actions button:hover{background:#0000000d}.popup-box{background:#fff;border-radius:16px;width:90%;max-width:420px;padding:24px 26px;box-shadow:0 6px 16px #00000026;animation:scaleIn .3s ease}.popup-box h2{font-size:20px;color:#0f1536;font-weight:600;margin-bottom:16px}.popup-box label{font-size:14px;color:#0f1536;font-weight:500}.popup-box input,.popup-box textarea{border:1px solid #dcdcdc;border-radius:8px;padding:10px;font-size:14px;resize:none;outline:none}.popup-box input:focus,.popup-box textarea:focus{border-color:#75f94c;box-shadow:0 0 5px #75f94c66}.btn-save{background-color:#75f94c;color:#0f1536;border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer;transition:.2s}.btn-cancel{background-color:#ccc;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:500;color:#0f1536}@media (max-width: 768px){.suppliers-header{flex-direction:column;align-items:flex-start;gap:10px}.suppliers-header h1{font-size:20px}.suppliers-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.popup-box{width:95%;padding:20px}}@media (max-width: 480px){.suppliers-header{padding:12px 14px}.suppliers-header h1{font-size:18px}.btn-save,.btn-cancel{padding:6px 12px;font-size:13px}.supplier-info h2{font-size:16px}}.suppliers-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.suppliers-table th,.suppliers-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.suppliers-table th{background-color:#0f1536;color:#fff;font-weight:600}.suppliers-table tr:hover td{background-color:#f9f9f9}.suppliers-table td button{background:none;border:none;cursor:pointer;margin-right:6px}.suppliers-table td .btn-edit svg{color:#4caf50}.suppliers-table td .btn-delete svg{color:#e74c3c}.container-box{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;transition:all .2s ease-in-out}.container-box:hover{transform:translateY(-1px)}.top-mainbar{width:100%;height:60px;display:flex;justify-content:space-between}.search-top-mainbar{width:90%;height:45px;border-radius:20px;background-color:#0f1536;color:#fff;border:none;outline:none;padding:0 15px;font-size:14px;box-sizing:border-box}.search-top-mainbar::placeholder{color:#fff9}.avatar-wrapper{position:relative}.avatar-menu{position:absolute;right:0;top:55px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026;min-width:140px;z-index:999;overflow:hidden;animation:fadeIn .2s ease-in-out}.avatar-menu p{margin:0;padding:10px 14px;cursor:pointer;font-size:14px;color:#333;transition:background .2s}.avatar-menu p:hover{background:#f5f5f5}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.categories-container{width:100%;min-height:90vh;display:flex;flex-direction:column}.categories-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap}.categories-header h1{color:#fff;font-size:22px;font-weight:600}.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.category-info h2{font-size:18px;font-weight:600;color:#0f1536;margin-bottom:8px}.category-info small{display:block;color:#999;font-size:12px;margin-top:4px}.category-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}.category-actions button{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .2s ease-in-out}.category-actions button:hover{background:#0000000d}.popup-overlay{position:fixed;inset:0;background:#0f153699;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:999;animation:fadeIn .25s ease-in-out}.popup-box{background:#fff;border-radius:16px;width:90%;max-width:400px;padding:24px;box-shadow:0 6px 16px #00000026;animation:scaleIn .3s ease}.popup-box h2{color:#0f1536;font-weight:600;margin-bottom:16px}.popup-box form{display:flex;flex-direction:column;gap:12px}.popup-box input{border:1px solid #dcdcdc;border-radius:8px;padding:10px;font-size:14px;outline:none}.popup-box input:focus{border-color:#75f94c;box-shadow:0 0 4px #75f94c66}.popup-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.btn-save{background-color:#75f94c;color:#0f1536;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;transition:.2s}.btn-save:hover{background-color:#5de13b}.btn-cancel{background-color:#ccc;border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width: 768px){.categories-header{flex-direction:column;gap:10px}}.categories-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.categories-table th,.categories-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.categories-table th{background-color:#0f1536;color:#fff;font-weight:600}.categories-table tr:hover td{background-color:#f9f9f9}.categories-table td button{background:none;border:none;cursor:pointer;margin-right:6px}.categories-table td .btn-edit svg{color:#4caf50}.categories-table td .btn-delete svg{color:#e74c3c}.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px}.pagination button{background-color:#f1f1f1;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;transition:.2s}.pagination button.active{background-color:#0f1536;color:#fff;font-weight:700}.pagination button:hover:not(.active){background-color:#dcdcdc}.products-container{width:100%;min-height:90vh;display:flex;flex-direction:column}.products-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap}.products-header h1{color:#fff;font-size:22px;font-weight:600}.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;justify-items:center}.product-card-image-view{width:100%;height:120px;object-fit:cover;border-radius:10px;background-color:#f8fafc;transition:transform .3s ease,box-shadow .3s ease}.product-card-image-view:hover{transform:scale(1.03);box-shadow:0 6px 18px #0000001a}.product-card-noimage{width:100%;height:180px;border-radius:10px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#94a3b8;font-weight:500;display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center}.product-info{margin-top:8px;color:#1e293b;display:flex;flex-direction:column;gap:4px}.product-info h2{font-size:14px;font-weight:600;margin:0;color:#0f172a}.product-info p{font-size:10px;margin:0;color:#475569}.product-info small{font-size:12px;color:#64748b}.product-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}.product-actions button{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;transition:background .2s ease-in-out}.product-actions button:hover{background:#0000000d}.btn-edit svg{color:#4caf50}.popup-overlay{position:fixed;inset:0;background:#0f0f0f99;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.popup-box-products{background:#fff;border-radius:16px;width:90%;max-width:450px;max-height:90vh;overflow-y:auto;padding:24px;box-shadow:0 8px 24px #0003;animation:fadeIn .2s ease}.popup-box-products::-webkit-scrollbar{width:6px}.popup-box-products::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.popup-box-products::-webkit-scrollbar-thumb:hover{background:#94a3b8}.popup-box-products h2{text-align:center;font-size:20px;margin-bottom:20px;color:#1e293b}.popup-box-products form{display:flex;flex-direction:column;gap:12px}.popup-box-products label{font-weight:600;font-size:14px;color:#334155}.popup-box-products input,.popup-box-products select{padding:10px;border-radius:8px;border:1px solid #cbd5e1;outline:none;transition:border-color .2s}.popup-box-products input:focus,.popup-box-products select:focus{border-color:#2563eb}.popup-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.image-preview-box{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px}.image-preview{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb;background-color:#fafafa}.image-preview-text{font-size:13px;color:#6b7280}.search-input{padding:10px 12px;border-radius:8px;border:1px solid #ccc;font-size:14px;width:220px}.pagination{margin-top:24px;display:flex;justify-content:center;gap:8px}.pagination button{padding:6px 10px;border:none;border-radius:6px;background:#f2f2f2;cursor:pointer;transition:all .2s}.pagination button.active{background:#0f1536;color:#fff}.pagination button:disabled{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;gap:12px}.search-input,.category-filter{padding:10px 12px;border-radius:8px;border:1px solid #ccc;font-size:14px}.category-filter{background:#fff;cursor:pointer}.products-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.products-table th{padding:6px;text-align:center;border-bottom:1px solid #eaeaea;font-size:14px}.products-table td{padding:3px 6px;text-align:center;border-bottom:1px solid #eaeaea;font-size:12px}.products-table th{background-color:#0f1536;color:#fff;font-weight:600}.products-table tr:hover td{background-color:#f9f9f9}.products-table td button{background:none;border:none;cursor:pointer;margin-right:6px}.products-table td .btn-edit svg{color:#4caf50}.products-table td .btn-delete svg{color:#e74c3c}.supplier-filter{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1.5px solid #d1d5db;border-radius:8px;padding:10px 38px 10px 14px;font-size:15px;font-weight:500;color:#0f1536;cursor:pointer;outline:none;transition:all .2s ease;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%233134AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;min-width:180px}.supplier-filter:hover{border-color:#3134ae;box-shadow:0 0 0 2px #3134ae1a}.supplier-filter:focus{border-color:#3134ae;box-shadow:0 0 0 3px #3134ae33}.supplier-filter option{color:#0f1536;background-color:#fff}@media (prefers-color-scheme: dark){.supplier-filter{background-color:#1e1e2f;color:#e0e0f0;border-color:#3134ae}.supplier-filter option{background-color:#1e1e2f;color:#fff}}.category-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1.5px solid #d1d5db;border-radius:8px;padding:10px 38px 10px 14px;font-size:15px;font-weight:500;color:#0f1536;cursor:pointer;outline:none;transition:all .2s ease;width:100%;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%233134AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;margin-bottom:12px}.category-select:hover{border-color:#3134ae;box-shadow:0 0 0 2px #3134ae1a}.category-select:focus{border-color:#3134ae;box-shadow:0 0 0 3px #3134ae33}.category-select option{color:#0f1536;background-color:#fff}@media (prefers-color-scheme: dark){.category-select{background-color:#1e1e2f;color:#e0e0f0;border-color:#3134ae}.category-select option{background-color:#1e1e2f;color:#fff}}.product-card-image{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px;background-color:#f5f5f5}.image-preview-box{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:10px}.image-preview{width:120px;height:120px;border-radius:8px;object-fit:cover;border:1px solid #ddd}.image-preview-text{font-size:13px;color:#6b7280;margin-top:4px}.react-hot-toast{font-family:Inter,sans-serif}.react-hot-toast-success{background:#16a34a;color:#fff}.react-hot-toast-error{background:#dc2626;color:#fff}.product-card-image{width:100%;height:180px;object-fit:cover;border-radius:10px;background:#f1f5f9}.product-card-noimage{display:flex;align-items:center;justify-content:center;height:180px;background:#f8fafc;color:#94a3b8;border-radius:10px;font-size:14px}@media (max-width: 1024px){.products-header{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{flex-wrap:wrap;width:100%;gap:10px}.supplier-filter,.search-input,.category-filter{width:48%}.products-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.product-card-image-view{height:110px}.products-table{font-size:13px}.popup-box-products{max-width:420px;padding:20px}.products-header{flex-direction:column;align-items:stretch;padding:18px;gap:16px}.header-actions{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.header-actions button{width:100%}}@media (max-width: 767px){.products-header{padding:12px}.products-header h1{font-size:18px}.header-actions{flex-direction:column;align-items:stretch;width:100%}.supplier-filter,.search-input,.category-filter,.header-actions button{width:100%}.products-grid{grid-template-columns:1fr;gap:18px}.product-card-image-view{height:140px}.products-table{display:block;overflow-x:auto;white-space:nowrap}.products-table th,.products-table td{padding:8px;font-size:12px}.pagination{gap:4px}.pagination button{padding:6px 8px;font-size:12px}.popup-box-products{width:95%;height:90vh;border-radius:12px;padding:18px}.popup-box-products h2{font-size:18px}.popup-box-products input,.popup-box-products select{font-size:14px;padding:8px 10px}.popup-buttons{flex-direction:column;gap:10px}.btn-save,.btn-cancel{width:100%;padding:10px}}@media (max-width: 420px){.product-card-image-view{height:120px}.product-info h2{font-size:13px}.product-info p{font-size:10px}.popup-box-products{width:100%;padding:16px}}.users-container{width:100%;min-height:90vh;display:flex;flex-direction:column;box-sizing:border-box}.users-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap;gap:12px}.users-header h1{color:#fff;font-size:22px;font-weight:600}.users-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.email{font-size:14px;color:#666}.role{font-size:14px;color:#444}.users-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #0000000d}.users-table th,.users-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.users-table th{background-color:#0f1536;color:#fff;font-weight:600}.users-table tr:hover td{background-color:#f9f9f9}.roles-container{width:100%;min-height:90vh;display:flex;flex-direction:column;box-sizing:border-box}.roles-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px;flex-wrap:wrap;gap:12px}.roles-header h1{color:#fff;font-size:22px;font-weight:600}.search-wrapper{display:flex;align-items:center;background:#fff;border-radius:10px;padding:6px 12px;box-shadow:0 2px 6px #0000001a}.search-wrapper input{border:none;outline:none;background:transparent;font-size:14px;padding-left:8px}.search-icon{color:#0f1536;font-size:20px}.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.description{margin:4px 0 8px;color:#444;font-size:14px}.roles-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #0000000d}.roles-table th,.roles-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.roles-table th{background-color:#0f1536;color:#fff;font-weight:600}.roles-table tr:hover td{background-color:#f9f9f9}.btn-edit,.btn-delete{background:none;border:none;cursor:pointer;padding:6px}.btn-edit svg{color:#0f1536}.btn-delete svg{color:#e74c3c}.btn-edit:hover svg{color:#3b82f6}.btn-delete:hover svg{color:#ff5c5c}.pagination{display:flex;justify-content:center;align-items:center;margin:20px 0;gap:8px}.pagination button{padding:8px 12px;border:none;border-radius:6px;background-color:#0f1536;color:#fff;cursor:pointer;transition:.2s}.pagination button:hover{background-color:#232a57}.pagination button.active{background-color:#75f94c;color:#0f1536;font-weight:700}.pagination button:disabled{background-color:#aaa;cursor:not-allowed}.permission-container{width:100%;min-height:90vh;display:flex;flex-direction:column;box-sizing:border-box}.permission-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px}.permission-header h1{color:#fff;font-size:22px;font-weight:600}.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.permission-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.permission-table th,.permission-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.permission-table th{background-color:#0f1536;color:#fff;font-weight:600}.permission-table tr:hover td{background-color:#f9f9f9}.rolePermission-container{width:100%;min-height:90vh;display:flex;flex-direction:column;box-sizing:border-box}.rolePermission-header{display:flex;justify-content:space-between;align-items:center;background-color:#0f1536;padding:16px 20px;border-radius:12px;margin-bottom:20px}.rolePermission-header h1{color:#fff;font-size:22px;font-weight:600}.header-actions{display:flex;gap:10px;align-items:center}.search-wrapper{position:relative}.search-wrapper input{padding:8px 32px 8px 10px;border-radius:8px;border:1px solid #ccc;outline:none}.search-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#888}.rolePermission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.rolePermission-table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.rolePermission-table th,.rolePermission-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eaeaea}.rolePermission-table th{background-color:#0f1536;color:#fff;font-weight:600}.rolePermission-table tr:hover td{background-color:#f9f9f9}.popup-overlay{position:fixed;inset:0;background:#0f153699;display:flex;align-items:center;justify-content:center;z-index:999}.popup-box{background:#fff;border-radius:16px;width:90%;max-width:420px;padding:24px 26px;box-shadow:0 6px 16px #00000026}.popup-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.btn-save{background-color:#75f94c;color:#0f1536;border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer}.btn-cancel{background-color:#ccc;border:none;border-radius:8px;padding:8px 16px;font-weight:500;color:#0f1536}