@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
:root{--blue-900:#0a1628;--blue-800:#0d2040;--blue-700:#0f3460;--blue-600:#1565c0;--blue-500:#1976d2;--blue-400:#2196f3;--blue-100:#e3f2fd;--teal-500:#00acc1;--teal-400:#26c6da;--green-500:#43a047;--green-100:#e8f5e9;--red-500:#e53935;--red-100:#ffebee;--orange-500:#f57c00;--gray-900:#111827;--gray-700:#374151;--gray-600:#6b7280;--gray-500:#9ca3af;--gray-400:#d1d5db;--gray-300:#e5e7eb;--gray-200:#f3f4f6;--gray-100:#f9fafb;--white:#fff;--sidebar-width:220px;--header-height:56px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 12px #0000001a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--t:.15s ease;--font:"Inter", system-ui, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:14px}body{font-family:var(--font);background:var(--gray-200);color:var(--gray-900);line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit}img{max-width:100%;display:block}.app-shell{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-width);flex-direction:column;flex:1;min-height:100vh;display:flex}.page-body{flex:1;padding:24px}.sidebar{width:var(--sidebar-width);z-index:100;background-color:#0d1149;flex-direction:column;height:100vh;display:flex;position:fixed;top:0;left:0;box-shadow:2px 0 8px #0003}.sidebar-logo{border-bottom:1px solid #ffffff14;align-items:center;gap:10px;padding:18px 16px;display:flex}.sidebar-logo-img{object-fit:contain;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:50%;width:36px;height:36px}.sidebar-logo-text{color:#fff;font-size:1.05rem;font-weight:700}.sidebar-logo-text span{color:var(--teal-400)}.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.nav-item{color:#ffffffb3;cursor:pointer;transition:all var(--t);border-left:3px solid #0000;align-items:center;gap:10px;padding:9px 16px;font-size:.8rem;font-weight:500;display:flex}.nav-item:hover{color:#fff;background:#ffffff12}.nav-item.active{color:#fff;border-left-color:var(--teal-400);background:#ffffff1c}.nav-item svg{flex-shrink:0;width:16px;height:16px}.nav-subitem{color:#fff9;cursor:pointer;transition:all var(--t);align-items:center;gap:5px;padding:7px 16px 7px 42px;font-size:.775rem;display:flex}.nav-subitem:before{content:"–";opacity:.4;font-size:.7rem}.nav-subitem:hover,.nav-subitem.active{color:#fff;background:#ffffff0d}.nav-divider{background:#ffffff12;height:1px;margin:4px 0}.header{height:var(--header-height);border-bottom:1px solid var(--gray-300);z-index:50;box-shadow:var(--shadow-sm);background:#fff;justify-content:flex-end;align-items:center;gap:12px;padding:0 24px;display:flex;position:sticky;top:0}.header-user{cursor:pointer;border-radius:var(--radius-md);transition:background var(--t);align-items:center;gap:8px;padding:5px 8px;display:flex;position:relative}.header-user:hover{background:var(--gray-200)}.header-avatar{background:linear-gradient(135deg, var(--blue-500), var(--teal-500));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.8rem;font-weight:600;display:flex}.header-username{color:var(--gray-700);font-size:.825rem;font-weight:500}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;display:flex}.page-title{color:var(--blue-600);font-size:1.25rem;font-weight:700}.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-300);background:#fff;overflow:visible}.card-header{background:var(--gray-900);color:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:10px 18px;font-size:.85rem;font-weight:600}.card-body{padding:18px}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px;display:grid}.stat-card{background:linear-gradient(135deg, var(--blue-500), var(--blue-700));border-radius:var(--radius-lg);color:#fff;transition:transform var(--t);padding:18px;box-shadow:0 4px 12px #1565c040}.stat-card:hover{transform:translateY(-2px)}.stat-card-label{opacity:.8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:.7rem;font-weight:500}.stat-card-value{margin-bottom:12px;font-size:1.8rem;font-weight:700;line-height:1}.stat-card-action{color:#fff;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;background:#00000040;padding:4px 12px;font-size:.68rem;font-weight:600;display:inline-block}.stat-card-action:hover{background:#0006}.kyc-banner{border-left:4px solid var(--green-500);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#fff;align-items:center;gap:14px;margin-bottom:20px;padding:14px 18px;display:flex}.kyc-title{color:var(--gray-900);font-size:.875rem;font-weight:700}.kyc-text{color:var(--gray-600);margin-top:2px;font-size:.775rem}.kyc-text a{color:var(--blue-500)}.table-controls{border-bottom:1px solid var(--gray-200);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px;display:flex}.table-per-page,.table-search{color:var(--gray-600);align-items:center;gap:6px;font-size:.775rem;display:flex}.table-search input{border:1px solid var(--gray-400);border-radius:var(--radius-sm);transition:border-color var(--t);outline:none;padding:4px 8px;font-size:.775rem}.table-search input:focus{border-color:var(--blue-400)}.per-page-select{border:1px solid var(--gray-400);border-radius:var(--radius-sm);color:var(--gray-700);cursor:pointer;background:#fff;padding:3px 6px;font-size:.775rem}.data-table{border-collapse:collapse;width:100%}.data-table th{background:var(--gray-100);text-align:left;color:var(--gray-700);border-bottom:2px solid var(--gray-300);white-space:nowrap;padding:9px 14px;font-size:.775rem;font-weight:600}.data-table td{color:var(--gray-700);border-bottom:1px solid var(--gray-200);padding:10px 14px;font-size:.8rem}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--gray-100)}.ref-link{color:var(--blue-500);cursor:pointer;font-weight:600}.ref-link:hover{text-decoration:underline}.empty-state{text-align:center;color:var(--gray-500);font-size:.825rem;padding:32px 14px!important}.table-footer{border-top:1px solid var(--gray-300);color:var(--gray-500);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:10px 18px;font-size:.75rem;display:flex}.pagination{gap:3px;display:flex}.pagination button{border:1px solid var(--gray-400);border-radius:var(--radius-sm);cursor:pointer;width:26px;height:26px;transition:all var(--t);background:#fff;justify-content:center;align-items:center;font-size:.75rem;display:flex}.pagination button:hover{background:var(--gray-200)}.pagination button.active{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}.pagination button:disabled{opacity:.4;cursor:default}.badge{text-transform:capitalize;border-radius:20px;padding:2px 8px;font-size:.7rem;font-weight:600;display:inline-block}.badge-draft{color:#6b7280;background:#f3f4f6}.badge-submitted{color:#1d4ed8;background:#dbeafe}.badge-moderation{color:#b45309;background:#fef3c7}.badge-approved{color:#065f46;background:#d1fae5}.badge-rejected{color:#b91c1c;background:#fee2e2}.badge-pass{color:#065f46;background:#d1fae5}.badge-fail{color:#b91c1c;background:#fee2e2}.badge-pending{color:#b45309;background:#fef3c7}.badge-paid{color:#065f46;background:#d1fae5}.badge-overdue{color:#b91c1c;background:#fee2e2}.badge-cancelled{color:#6b7280;background:#f3f4f6}.badge-printing{color:#b45309;background:#fef3c7}.badge-shipped{color:#1d4ed8;background:#dbeafe}.badge-delivered{color:#065f46;background:#d1fae5}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--t);border:none;align-items:center;gap:6px;padding:8px 16px;font-size:.825rem;font-weight:600;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-sm{padding:5px 12px;font-size:.775rem}.btn-primary{background:var(--blue-500);color:#fff}.btn-primary:hover:not(:disabled){background:var(--blue-600)}.btn-success{background:var(--green-500);color:#fff}.btn-success:hover:not(:disabled){background:#388e3c}.btn-teal{background:var(--teal-500);color:#fff}.btn-teal:hover:not(:disabled){background:#00838f}.btn-outline{color:var(--gray-700);border:1px solid var(--gray-400);background:0 0}.btn-outline:hover:not(:disabled){background:var(--gray-200)}.btn-danger{background:var(--red-500);color:#fff}.btn-danger:hover:not(:disabled){background:#c62828}.form-group{flex-direction:column;gap:4px;display:flex}.form-label{color:var(--gray-700);font-size:.8rem;font-weight:500}.required{color:var(--red-500)}.form-input,.form-select,.form-textarea{border:1px solid var(--gray-400);border-radius:var(--radius-sm);transition:border-color var(--t);width:100%;color:var(--gray-900);background:#fff;outline:none;padding:8px 10px;font-size:.825rem}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-400);box-shadow:0 0 0 2px #2196f31a}.form-input:disabled,.form-select:disabled,.form-textarea:disabled{background:var(--gray-100);color:var(--gray-600);cursor:not-allowed}.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:28px}.form-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-grid-3{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.full-width{grid-column:1/-1}.alert{border-radius:var(--radius-md);margin-bottom:14px;padding:10px 14px;font-size:.825rem}.alert-error{background:var(--red-100);color:var(--red-500);border-left:3px solid var(--red-500)}.alert-success{background:var(--green-100);color:var(--green-500);border-left:3px solid var(--green-500)}.alert-info{background:var(--blue-100);color:var(--blue-600);border-left:3px solid var(--blue-400)}.alert-warning{color:#b45309;background:#fef3c7;border-left:3px solid #f59e0b}.detail-grid{border:1px solid var(--gray-300);border-radius:var(--radius-sm);grid-template-columns:minmax(150px,auto) 1fr;display:grid;overflow:hidden}.detail-label{background:var(--gray-100);color:var(--gray-700);border-bottom:1px solid var(--gray-300);border-right:1px solid var(--gray-300);padding:9px 14px;font-size:.775rem;font-weight:600}.detail-value{color:var(--gray-800);border-bottom:1px solid var(--gray-300);padding:9px 14px;font-size:.8rem}.purchase-grid{border:1px solid var(--gray-300);border-radius:var(--radius-sm);grid-template-columns:minmax(200px,auto) 1fr;margin-bottom:18px;display:grid;overflow:hidden}.purchase-label{color:var(--gray-700);background:var(--gray-100);border-bottom:1px solid var(--gray-300);border-right:1px solid var(--gray-300);padding:9px 16px;font-size:.825rem;font-weight:600}.purchase-value{color:var(--gray-800);border-bottom:1px solid var(--gray-300);padding:9px 16px;font-size:.825rem}.radio-group{gap:20px;display:flex}.radio-item{cursor:pointer;align-items:center;gap:6px;font-size:.825rem;display:flex}.icon-btn{border-radius:var(--radius-sm);cursor:pointer;width:28px;height:28px;transition:opacity var(--t);border:none;justify-content:center;align-items:center;padding:5px;display:flex}.icon-btn:hover{opacity:.8}.icon-btn-blue{background:var(--blue-500);color:#fff}.icon-btn-orange{background:var(--orange-500);color:#fff}.icon-btn-row{gap:5px;display:flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-page{min-height:200px;color:var(--gray-500);flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:.825rem;display:flex}.login-page{background:linear-gradient(135deg,#e8edf5 0%,#c3cfe2 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-md);background:#fff;padding:32px 36px}.login-logo{text-align:center;margin-bottom:18px}.login-logo img{border:0px solid var(--blue-900);object-fit:contain;border-radius:0%;width:100px;height:100px;margin:0 auto 10px}.login-tagline{color:var(--gray-900);text-align:center;font-size:.9rem;font-weight:700}.login-subtext{color:var(--gray-600);text-align:center;margin-top:4px;margin-bottom:18px;font-size:.75rem;line-height:1.5}.login-form{flex-direction:column;gap:12px;display:flex}.login-btn{background:var(--blue-700);color:#fff;border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:background var(--t);border:none;justify-content:center;align-items:center;gap:8px;margin-top:4px;padding:10px;font-size:.9rem;font-weight:700;display:flex}.login-btn:hover{background:var(--blue-600)}.login-btn:disabled{opacity:.7;cursor:not-allowed}.login-forgot{text-align:center;color:var(--blue-400);cursor:pointer;margin-top:10px;font-size:.775rem}.login-forgot:hover{text-decoration:underline}.action-dropdown{display:inline-block;position:relative}.action-menu{border:1px solid var(--gray-300);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:200;background:#fff;min-width:150px;position:absolute;top:calc(100% + 4px);right:0;overflow:hidden}.action-menu-item{color:var(--gray-700);cursor:pointer;transition:background var(--t);padding:9px 14px;font-size:.8rem;display:block}.action-menu-item:hover{background:var(--gray-100)}.section-title{color:var(--gray-900);margin:18px 0 12px;font-size:.95rem;font-weight:700}.balance-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:18px;display:flex}.balance-amount{color:var(--blue-600);font-size:1.5rem;font-weight:700}.balance-label{color:var(--gray-600);margin-bottom:2px;font-size:.75rem}@media (max-width:900px){.form-grid,.form-grid-3,.detail-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){:root{--sidebar-width:0px}.sidebar{transform:translate(-100%)}.main-content{margin-left:0}.stats-grid{grid-template-columns:1fr}.page-body{padding:14px}.purchase-grid{grid-template-columns:1fr}}