html{font-size:16px;scroll-behavior:smooth}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background-color:#f8f9fa;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;min-height:100vh}#root{min-height:100vh}a{color:#2a5298;text-decoration:none}a:hover{color:#1e3c72;text-decoration:underline}::selection{background:#2a5298;color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background-color:#f8f9fa}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding-top:20px}.header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:1rem 0;box-shadow:0 2px 10px #0000001a}.header .container{max-width:1200px;margin:0 auto;padding:0 20px}.header-content{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;text-decoration:none;color:#fff;font-size:1.5rem;font-weight:700}.logo-icon{margin-right:10px}.nav{display:flex;align-items:center;gap:2rem}.nav-links{display:flex;gap:1.5rem}.nav-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:5px;transition:background-color .3s}.nav-link:hover{background-color:#ffffff1a}.user-menu{display:flex;align-items:center;gap:1rem}.user-info{display:flex;align-items:center;gap:.5rem;color:#e8f4f8}.logout-btn{display:flex;align-items:center;gap:.5rem;background:#ffffff1a;color:#fff;border:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;transition:background-color .3s}.logout-btn:hover{background:#fff3}.container{max-width:1200px;margin:0 auto;padding:0 20px}.container-fluid{width:100%;padding:0 20px;max-width:1400px;margin:0 auto}.card{background:#fff;border-radius:10px;padding:2rem;margin:2rem 0;box-shadow:0 4px 15px #0000001a;border:1px solid #e9ecef}.card h2{color:#2c3e50;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:600;color:#555}.form-group input,.form-group select{width:100%;padding:12px;border:2px solid #e9ecef;border-radius:8px;font-size:1rem;transition:border-color .3s}.form-group input:focus,.form-group select:focus{outline:none;border-color:#2a5298;box-shadow:0 0 0 3px #2a52981a}.form-control-disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,#2a5298,#1e3c72);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none;width:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #2a52984d}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:linear-gradient(135deg,#6c757d,#495057);width:auto}.btn-sm{padding:8px 16px;font-size:.875rem}.admin-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.dashboard-header{text-align:center;margin-bottom:3rem}.dashboard-header h2{font-size:2.5rem;color:#2c3e50;margin-bottom:.5rem}.dashboard-header p{color:#6c757d;font-size:1.1rem}.metrics-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:3rem}.metric-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 8px 25px #0000001a;display:flex;align-items:center;gap:1.5rem;transition:transform .3s}.metric-card:hover{transform:translateY(-5px)}.metric-card.admin-card{border-left:5px solid #dc3545}.metric-icon{color:#2a5298;background:linear-gradient(135deg,#e3f2fd,#f8f9fa);padding:1rem;border-radius:50%}.admin-icon{color:#dc3545}.metric-info{display:flex;flex-direction:column}.metric-value{font-size:2.5rem;font-weight:700;color:#2c3e50}.metric-label{color:#6c757d;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.dashboard-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem}.content-title{color:#2c3e50;margin-bottom:2rem;font-size:1.5rem}.shipment-card{background:#fff;border-radius:10px;margin-bottom:1.5rem;box-shadow:0 4px 15px #00000014;overflow:hidden;transition:transform .3s}.shipment-card:hover{transform:translateY(-3px)}.shipment-card.status-transit{border-left:5px solid #28a745}.shipment-card.status-pending{border-left:5px solid #ffc107}.shipment-card.status-completed{border-left:5px solid #007bff}.shipment-card.status-rejected{border-left:5px solid #dc3545}.shipment-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#f8f9fa;border-bottom:1px solid #e9ecef}.shipment-id{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#2c3e50}.status-pill{padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600;text-transform:uppercase}.status-pill.in-transit,.status-pill.confirmed,.status-pill.transit{background:#d4edda;color:#155724}.status-pill.pending{background:#fff3cd;color:#856404}.status-pill.completed{background:#cce5ff;color:#004085}.status-pill.rejected{background:#f8d7da;color:#721c24}.status-pill.status-completed{background:#cce5ff;color:#004085}.status-pill.status-confirmed{background:#d4edda;color:#155724}.shipment-body{padding:1.5rem}.route{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.port-detail{flex:1;text-align:center}.port-code{display:block;font-size:.75rem;color:#6c757d;font-weight:700;margin-bottom:.25rem}.route-line{height:2px;background:linear-gradient(90deg,#2a5298,#1e3c72);flex:0 0 50px}.shipment-info p{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:#555}.icon{color:#6c757d}.sidebar{display:flex;flex-direction:column;gap:2rem}.sidebar-widget{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 4px 15px #00000014}.sidebar-widget h4{color:#2c3e50;margin-bottom:1rem;font-size:1.1rem}.quick-action{display:flex;align-items:center;gap:.75rem;padding:1rem;text-decoration:none;color:#555;border-radius:8px;transition:all .3s;margin-bottom:.5rem}.quick-action:hover{background:#f8f9fa;color:#2a5298;transform:translate(5px)}.result-card{background:#fff;padding:2rem;border-radius:10px;margin-bottom:1.5rem;box-shadow:0 4px 15px #00000014;border:1px solid #e9ecef}.result-card.error-card{border-left:5px solid #dc3545;background:#fff5f5}.result-card h3{color:#2c3e50;margin-bottom:1rem}.result-card p{color:#6c757d;margin-bottom:1rem}.admin-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.content-panel{background:#fff;border-radius:10px;box-shadow:0 4px 15px #00000014;overflow:hidden}.panel-header{background:#f8f9fa;padding:1.5rem;border-bottom:1px solid #e9ecef}.panel-header h3{color:#2c3e50;margin:0}.panel-body{padding:0}.table-responsive{overflow-x:auto}.invoice-table{width:100%;border-collapse:collapse}.invoice-table th,.invoice-table td{padding:1rem;text-align:left;border-bottom:1px solid #e9ecef}.invoice-table th{background:#f8f9fa;font-weight:600;color:#2c3e50}.invoice-table tbody tr:hover{background:#f8f9fa}.route-info{font-family:monospace;font-size:.9rem}.action-buttons{display:flex;gap:.5rem}.table-action-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:none;border-radius:5px;font-size:.875rem;cursor:pointer;transition:all .3s}.table-action-btn.approve{background:#d4edda;color:#155724}.table-action-btn.approve:hover{background:#c3e6cb}.table-action-btn.reject{background:#f8d7da;color:#721c24}.table-action-btn.reject:hover{background:#f1b0b7}.success-message,.error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;border-radius:8px;margin-bottom:1.5rem;font-weight:500}.success-message{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.error-message{background:#f8d7da;color:#721c24;border:1px solid #f1b0b7}.demo-credentials{background:#e3f2fd;padding:1rem;border-radius:8px;margin-top:1.5rem;border-left:4px solid #2196f3}.demo-credentials h4{color:#1976d2;margin-bottom:.5rem;font-size:.9rem}.demo-credentials p{margin:.25rem 0;font-size:.875rem;color:#424242}.page-header{text-align:center;margin-bottom:2rem}.page-header h2{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#2c3e50;margin-bottom:.5rem}.page-header p{color:#6c757d}.empty-state{text-align:center;padding:3rem;color:#6c757d}.empty-state svg{margin-bottom:1rem;opacity:.5}.empty-state h3{margin-bottom:.5rem;color:#2c3e50}.invoice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;padding:1.5rem}.invoice-card{background:#fff;border-radius:10px;border:1px solid #e9ecef;overflow:hidden;transition:transform .3s}.invoice-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000026}.invoice-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8f9fa;border-bottom:1px solid #e9ecef}.invoice-number{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#2c3e50}.invoice-body{padding:1.5rem}.invoice-detail{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#555}.invoice-detail svg{color:#6c757d}.route-detail{text-align:center}.route-label{display:block;font-size:.75rem;color:#6c757d;font-weight:700;margin-bottom:.25rem}.route-port{font-weight:500;color:#2c3e50}.route-arrow{color:#6c757d;font-weight:700;font-size:1.2rem}.invoice-amount{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:#28a745;margin-top:1rem;padding-top:1rem;border-top:1px solid #e9ecef}.invoice-actions{padding:1rem;border-top:1px solid #e9ecef;background:#f8f9fa}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f8f9fa;border-radius:5px}.info-label{font-weight:600;color:#6c757d}.info-value{color:#2c3e50}.status-active{color:#28a745;font-weight:600}.footer{background:#2c3e50;color:#fff;text-align:center;padding:2rem 0;margin-top:auto}.data-management{max-width:1200px;margin:0 auto;padding:2rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f8f9fa;border-radius:5px;border-left:3px solid #2a5298}.stat-label{font-weight:600;color:#6c757d}.stat-value{font-size:1.25rem;font-weight:700;color:#2c3e50}.action-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.import-wrapper{position:relative}.import-wrapper label{margin:0;cursor:pointer}.btn-danger{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-danger:hover{background:linear-gradient(135deg,#c82333,#bd2130)}.warning-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background:#fff3cd;color:#856404;border:1px solid #ffeaa7;border-radius:8px;margin-top:1rem}.storage-info{color:#6c757d}.storage-info ul{margin:1rem 0;padding-left:2rem}.storage-info li{margin-bottom:.5rem}@media (max-width: 768px){.header-content,.nav{flex-direction:column;gap:1rem}.nav-links{flex-wrap:wrap;justify-content:center;gap:1rem}.user-menu{flex-direction:column;gap:.5rem}.dashboard-layout{grid-template-columns:1fr;gap:2rem}.form-grid,.metrics-container{grid-template-columns:1fr}.route{flex-direction:column;gap:.5rem}.route-line{width:2px;height:30px}.invoice-grid{grid-template-columns:1fr;padding:1rem}.action-buttons{flex-direction:column}.container,.container-fluid{padding:0 15px}}