:root{--dsb-900: #001b33;--dsb-800: #012a4a;--dsb-700: #013a63;--dsb-600: #01497c;--dsb-500: #2a6f97;--dsb-100: #d9edf7;--dsb-050: #eef6fb;--text-strong: #10243a;--text-muted: #4f6174}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.08),transparent 30%),radial-gradient(circle at 85% 20%,rgba(255,255,255,.06),transparent 28%),linear-gradient(160deg,var(--dsb-800) 0%,var(--dsb-700) 58%,var(--dsb-600) 100%);margin:0;padding:0;min-height:100vh}.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.auth-container{width:100%;max-width:450px;background:#fff;border-radius:16px;box-shadow:0 14px 36px #012a4a47;overflow:hidden}.logo-section{background:linear-gradient(135deg,var(--dsb-600) 0%,var(--dsb-700) 100%);color:#fff;padding:50px 30px 40px;text-align:center}.logo-placeholder{font-size:60px;margin-bottom:15px;display:inline-block}.logo-section h1{margin:15px 0 5px;font-size:28px;font-weight:700}.tagline{margin:0;font-size:14px;opacity:.9}.auth-form{padding:40px 30px}.auth-form h2{margin:0 0 8px;font-size:24px;color:var(--text-strong)}.form-subtitle{margin:0 0 30px;font-size:14px;color:var(--text-muted)}.form-group{margin-bottom:20px}.form-group input{display:block;width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;box-sizing:border-box;font-size:14px;transition:all .3s ease}.auth-btn{display:block;width:100%;padding:12px;margin-top:10px;background:linear-gradient(135deg,var(--dsb-600) 0%,var(--dsb-700) 100%);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.auth-btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #012a4a66}.auth-footer{padding:20px 30px;background:#f9f9f9;text-align:center;border-top:1px solid #eee}.auth-footer p{margin:0;font-size:14px;color:#666}.auth-link{color:var(--dsb-600);text-decoration:none;font-weight:600;transition:all .3s ease}.auth-link:hover{color:var(--dsb-700);text-decoration:underline}.container{max-width:400px;margin:80px auto;padding:30px;background:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;text-align:center}input{display:block;width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}button{padding:10px;width:100%;background:var(--dsb-600);color:#fff;border:none;cursor:pointer;border-radius:4px;font-size:14px;margin-top:5px}button:hover{background:var(--dsb-700)}.status{margin-top:20px;padding:10px;background:#e9f5ff;border-radius:6px}.dashboard-container{display:flex;height:100vh;background:linear-gradient(165deg,var(--dsb-800) 0%,var(--dsb-700) 65%,var(--dsb-600) 100%)}.sidebar{width:280px;background:linear-gradient(185deg,var(--dsb-900) 0%,var(--dsb-700) 100%);color:#fff;padding:20px;box-shadow:2px 0 18px #012a4a73;overflow-y:auto;display:flex;flex-direction:column}.sidebar-header{margin-bottom:40px;border-bottom:2px solid rgba(255,255,255,.2);padding-bottom:20px}.sidebar-header h1{margin:0 0 15px;font-size:24px;font-weight:700}.user-badge{display:flex;align-items:center;gap:12px;margin-top:10px}.avatar{width:40px;height:40px;border-radius:50%;background:#ffffff4d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.user-name{font-size:14px;font-weight:500}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.nav-item{display:flex;align-items:center;gap:12px;padding:15px 16px;background:#ffffff1a;border:none;color:#fff;cursor:pointer;border-radius:6px;font-size:14px;font-weight:500;transition:all .3s ease;text-align:left}.nav-item:hover{background:#fff3;transform:translate(5px)}.nav-item.active{background:#ffffff40;border-left:4px solid white;padding-left:12px}.nav-icon{font-size:20px}.nav-label{flex:1}.logout-btn{display:flex;align-items:center;gap:12px;padding:15px 16px;background:#dc3545cc;border:none;color:#fff;cursor:pointer;border-radius:6px;font-size:14px;font-weight:600;transition:all .3s ease;text-align:left;width:100%;margin-top:auto}.logout-btn:hover{background:#dc3545;transform:translateY(-2px);box-shadow:0 5px 15px #dc354566}.logout-icon{font-size:18px}.logout-label{flex:1}.main-content{flex:1;overflow-y:auto;padding:30px}.page-content{background:#fffffffa;border-radius:14px;padding:30px;box-shadow:0 12px 30px #012a4a33;border:1px solid rgba(1,73,124,.16)}.page-content h2{margin-top:0;color:var(--text-strong);font-size:28px;margin-bottom:25px}.page-content h3{color:var(--text-muted);font-size:18px;margin-top:25px;margin-bottom:15px}.tracking-input-section{display:contents;gap:10px;margin-bottom:30px}.tracking-input{flex:1;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box}.tracking-input:focus{outline:none;border-color:var(--dsb-600);box-shadow:0 0 0 3px #01497c1a}.btn-primary{padding:12px 24px;background:linear-gradient(135deg,var(--dsb-600) 0%,var(--dsb-700) 100%);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .3s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #012a4a66}.btn-secondary{padding:10px 20px;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-secondary:hover{background:#5a6268}.status-card{background:linear-gradient(135deg,var(--dsb-050) 0%,var(--dsb-100) 100%);padding:20px;border-radius:8px;border-left:4px solid var(--dsb-600);margin:20px 0}.status-card h3{margin:0 0 12px;color:#333}.status-badge{display:inline-block;padding:8px 16px;background:var(--dsb-600);color:#fff;border-radius:20px;font-size:13px;font-weight:600}.status-date{color:#666;font-size:13px;margin-top:10px}.tracking-history{margin-top:30px}.history-list{list-style:none;padding:0;margin:0}.history-item{display:grid;grid-template-columns:1.5fr 1.5fr 2fr;padding:12px;border-bottom:1px solid #eee;align-items:center;font-size:13px}.history-item:last-child{border-bottom:none}.history-id{font-weight:600;color:#333}.history-status{background:var(--dsb-100);padding:4px 10px;border-radius:4px;width:fit-content;color:var(--dsb-600);font-weight:500}.history-date{color:#999;text-align:right}.profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.btn-logout{padding:8px 16px;background:#dc3545;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-logout:hover{background:#c82333}.profile-card{display:flex;gap:30px;margin-bottom:30px;align-items:flex-start}.profile-avatar{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#01497c,#013a63);display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;font-weight:700;flex-shrink:0;box-shadow:0 5px 15px #012a4a4d}.profile-info{flex:1}.profile-info p{margin:10px 0;font-size:14px;color:var(--text-strong)}.profile-info strong{color:var(--dsb-600);margin-right:8px}.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group{grid-column:span 1}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-strong);font-size:14px}.form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.form-group input:focus{outline:none;border-color:var(--dsb-600);box-shadow:0 0 0 3px #01497c1a}.form-group:nth-child(1),.form-group:nth-child(2){grid-column:span 1}.form-actions{grid-column:1 / -1;display:flex;gap:10px;margin-top:20px;justify-content:flex-end}.form-actions button{padding:10px 24px;border:none;border-radius:6px;cursor:pointer;font-weight:600}.orders-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}.summary-card{background:#fffffff5;color:var(--dsb-700);padding:20px;border-radius:10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 22px #013a6329;border:1px solid rgba(1,73,124,.18)}.summary-label{font-size:13px;opacity:.7;margin-bottom:8px}.summary-value{font-size:32px;font-weight:700;color:var(--dsb-600)}.orders-list{overflow-x:auto}.orders-table{width:100%;border-collapse:collapse;font-size:14px}.orders-table thead{background:#01497c14;border-bottom:2px solid rgba(1,58,99,.2)}.orders-table th{padding:15px;text-align:left;font-weight:600;color:#333}.orders-table td{padding:15px;border-bottom:1px solid #eee}.order-row:hover{background:#01497c12}.order-id{font-weight:600;color:var(--dsb-600)}.status-delivered{background:#d4edda;color:#155724;padding:6px 12px;border-radius:4px;font-weight:500;font-size:12px}.status-transit{background:#fff3cd;color:#856404;padding:6px 12px;border-radius:4px;font-weight:500;font-size:12px}.status-processing{background:#e2e3e5;color:#383d41;padding:6px 12px;border-radius:4px;font-weight:500;font-size:12px}.status-out{background:#cce5ff;color:#004085;padding:6px 12px;border-radius:4px;font-weight:500;font-size:12px}.btn-view-details{padding:6px 14px;background:var(--dsb-600);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;transition:all .3s ease}.btn-view-details:hover{background:var(--dsb-700);transform:scale(1.05)}.orders-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.orders-header h2{margin:0}.btn-create-order{display:flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,var(--dsb-600) 0%,var(--dsb-700) 100%);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.btn-create-order:hover{transform:translateY(-2px);box-shadow:0 5px 20px #012a4a66}.btn-create-order span{font-size:16px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;padding:30px;max-width:500px;width:90%;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-content h3{margin:0 0 20px;color:#333;font-size:22px}.modal-content .form-group{margin-bottom:20px}.modal-content .form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-strong);font-size:14px}.modal-content .form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box;transition:all .3s ease}.modal-content .form-group input:focus{outline:none;border-color:var(--dsb-600);box-shadow:0 0 0 3px #01497c1a}.modal-actions{display:flex;gap:10px;margin-top:25px;justify-content:flex-end}.modal-actions button{padding:10px 20px;font-size:14px;border-radius:6px;border:none;cursor:pointer;font-weight:600;transition:all .3s ease}.modal-actions .btn-primary{background:linear-gradient(135deg,var(--dsb-600) 0%,var(--dsb-700) 100%);color:#fff;flex:1}.modal-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #012a4a66}.modal-actions .btn-secondary{background:#6c757d;color:#fff;flex:1}.modal-actions .btn-secondary:hover{background:#5a6268}@media(max-width:1024px){.sidebar{width:240px}.main-content,.page-content{padding:20px}}@media(max-width:768px){.dashboard-container{flex-direction:column}.sidebar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px;flex-direction:row;position:sticky;top:0;z-index:100;border-bottom:2px solid rgba(255,255,255,.1)}.sidebar-header{margin-bottom:0;padding-bottom:0;border-bottom:none;flex-shrink:0;display:flex;align-items:center;gap:10px}.sidebar-header h1{margin-bottom:0;font-size:18px;display:none}.user-badge{margin:0;gap:8px}.avatar{width:36px;height:36px;font-size:16px}.user-name{font-size:12px;display:none}.sidebar-nav{flex-direction:row;gap:5px;flex:1;justify-content:center}.nav-item{padding:10px 12px;font-size:11px;gap:4px;min-height:44px;display:flex;align-items:center;flex:1;max-width:100px}.nav-label{display:none}.nav-icon{font-size:18px}.logout-btn{margin-top:0;padding:10px 12px;font-size:11px;gap:4px;flex-shrink:0;min-height:44px;width:auto}.logout-label{display:none}.main-content{flex:1;overflow-y:auto;padding:15px}.page-content{padding:15px;border-radius:8px}.page-content h2{font-size:22px;margin-bottom:20px}.profile-card{flex-direction:column;align-items:center;text-align:center;gap:15px}.profile-info{text-align:center}.profile-form{grid-template-columns:1fr}.form-group:nth-child(1),.form-group:nth-child(2){grid-column:span 1}.orders-summary{grid-template-columns:1fr;gap:15px}.summary-card{padding:15px}.summary-value{font-size:28px}.history-item{grid-template-columns:1fr;gap:5px;padding:10px}.history-date{text-align:left;font-size:12px}.tracking-input-section{flex-direction:column;gap:10px}.tracking-input{width:100%}.btn-primary,.btn-secondary{padding:12px 16px;font-size:14px;min-height:44px;width:100%}.auth-container{max-width:100%;border-radius:0}.auth-form{padding:30px 20px}.logo-section{padding:40px 20px 30px}.logo-placeholder{font-size:50px}.logo-section h1{font-size:24px}.orders-table{font-size:12px}.orders-table th,.orders-table td{padding:10px}.btn-view-details{padding:6px 10px;font-size:11px}.orders-header{flex-direction:column;gap:10px;align-items:flex-start}.btn-create-order{width:100%;padding:10px 16px}.modal-content{width:90%;padding:25px}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}@media(max-width:480px){html,body{margin:0;padding:0;width:100%;overflow-x:hidden}.dashboard-container{height:auto;flex-direction:column}.sidebar{width:100%;padding:10px;min-height:50px;flex-wrap:wrap;justify-content:space-around}.sidebar-header{gap:5px;order:1;min-width:100%}.avatar{width:32px;height:32px;font-size:14px}.sidebar-nav{order:2;width:100%;gap:5px}.nav-item{flex:1;padding:8px;font-size:10px;min-height:40px}.logout-btn{order:3;min-height:40px;padding:8px;font-size:10px}.main-content{padding:10px;min-height:calc(100vh - 50px)}.page-content{padding:12px;border-radius:6px}.page-content h2{font-size:18px;margin-bottom:15px}.page-content h3{font-size:15px;margin-top:15px;margin-bottom:10px}.tracking-input-section{flex-direction:column;gap:8px}.tracking-input{width:100%;padding:10px;font-size:14px}.btn-primary,.btn-secondary,.btn-logout{padding:10px;font-size:13px;min-height:40px;width:100%;margin-top:5px}.btn-view-details{padding:5px 8px;font-size:10px}.status-card{padding:15px;margin:15px 0}.status-card h3{font-size:14px;margin:0 0 8px}.profile-card{flex-direction:column;gap:12px}.profile-avatar{width:70px;height:70px;font-size:32px}.profile-info p{font-size:13px;margin:8px 0}.profile-form{grid-template-columns:1fr;gap:15px}.form-group{grid-column:span 1!important}.form-actions{flex-direction:column;grid-column:1 / -1}.form-actions button{width:100%;margin:5px 0}.orders-summary{grid-template-columns:1fr;gap:10px;margin-bottom:20px}.summary-card{padding:12px}.summary-label{font-size:12px}.summary-value{font-size:24px}.orders-table{font-size:11px}.orders-table th,.orders-table td{padding:8px 5px}.history-item{grid-template-columns:1fr;gap:5px;padding:8px}.history-id{font-size:12px}.history-status{font-size:11px;padding:3px 8px}.history-date{font-size:11px;text-align:left}.auth-page{padding:10px;min-height:100vh}.auth-container{max-width:100%;border-radius:8px;margin:0}.logo-section{padding:30px 15px 20px}.logo-placeholder{font-size:45px;margin-bottom:10px}.logo-section h1{font-size:20px;margin:10px 0 3px}.tagline{font-size:12px}.auth-form{padding:20px 15px}.auth-form h2{font-size:20px;margin-bottom:5px}.form-subtitle{font-size:12px;margin-bottom:20px}.form-group{margin-bottom:15px}.form-group label{font-size:13px;margin-bottom:6px}.form-group input{padding:10px;font-size:14px}.auth-btn{padding:10px;font-size:14px;min-height:40px;margin-top:10px}.auth-footer{padding:15px}.auth-footer p{font-size:12px}.profile-header{flex-direction:column;gap:10px;align-items:flex-start}.btn-logout{width:100%}.orders-header{flex-direction:column;gap:15px;align-items:flex-start;margin-bottom:20px;padding-bottom:15px}.btn-create-order{width:100%;padding:10px 16px;font-size:13px}.modal-content{width:95%;padding:20px;max-width:100%}.modal-content h3{font-size:18px;margin-bottom:15px}.modal-content .form-group{margin-bottom:15px}.modal-content .form-group label{font-size:13px;margin-bottom:6px}.modal-content .form-group input{padding:10px;font-size:14px}.modal-actions{flex-direction:column;gap:10px;margin-top:20px}.modal-actions button{width:100%;padding:12px;font-size:14px;min-height:40px}}@media(max-width:360px){.page-content h2{font-size:16px}.nav-item{font-size:9px;padding:6px}.logout-icon{font-size:16px}.tracking-input{font-size:13px}.logo-section h1{font-size:18px}.orders-table{font-size:10px}.orders-table th,.orders-table td{padding:6px 3px}}