@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap";:root{--primary-hue:220;--primary:hsl(var(--primary-hue), 85%, 45%);--primary-hover:hsl(var(--primary-hue), 85%, 38%);--primary-light:hsl(var(--primary-hue), 85%, 95%);--secondary-hue:25;--secondary:hsl(var(--secondary-hue), 95%, 52%);--secondary-hover:hsl(var(--secondary-hue), 95%, 45%);--secondary-light:hsl(var(--secondary-hue), 95%, 95%);--color-pending:#f59f0a;--color-assigned:#1193d4;--color-transit:#7d30e8;--color-delivered:#1b9849;--color-failed:#c91d39;--color-cancelled:gray;--bg-app:#f5f7fa;--bg-surface:#fff;--border:#dcdfe5;--text-primary:#121b2b;--text-secondary:#626d84;--text-muted:#9da3af;--text-light:#fff;--shadow-sm:0 2px 4px #0f172a0d;--shadow-md:0 4px 12px #0f172a14;--shadow-lg:0 10px 25px -5px #0f172a1f, 0 8px 10px -6px #0f172a1f;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--transition:all .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Sarabun,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.app-container{min-height:100vh;display:flex}.main-content{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:2rem;overflow-y:auto}@media (width<=768px){.main-content{padding:1rem}}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.95rem;font-weight:500;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--primary);color:var(--text-light)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--secondary);color:var(--text-light)}.btn-secondary:hover{background-color:var(--secondary-hover)}.btn-outline{border-color:var(--border);color:var(--text-primary);background-color:#0000}.btn-outline:hover{background-color:var(--primary-light);border-color:var(--primary);color:var(--primary)}.btn-danger{background-color:var(--color-failed);color:var(--text-light)}.btn-danger:hover{background-color:#aa1830}.btn-large{border-radius:var(--radius-md);padding:1rem 1.5rem;font-size:1.1rem}.card{background-color:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:var(--transition);padding:1.5rem}.card:hover{box-shadow:var(--shadow-md)}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--primary);transform:translateY(-2px)}h1{color:var(--primary);margin-bottom:.5rem;font-size:1.85rem;font-weight:700}h2{color:var(--text-primary);font-size:1.4rem;font-weight:600}.table-container{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-sm);margin-bottom:1.5rem;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th{color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--border);background-color:#edeff3;padding:.875rem 1.25rem;font-size:.85rem;font-weight:600}td{border-bottom:1px solid var(--border);color:var(--text-primary);padding:.875rem 1.25rem;font-size:.925rem}tr:last-child td{border-bottom:none}tr:hover td{background-color:var(--primary-light)}.badge{text-transform:uppercase;border-radius:50px;align-items:center;padding:.25rem .625rem;font-size:.775rem;font-weight:600;display:inline-flex}.badge-pending{color:var(--color-pending);background-color:#fef2dd}.badge-assigned{color:var(--color-assigned);background-color:#def2fc}.badge-transit{color:var(--color-transit);background-color:#ebdffb}.badge-delivered{color:var(--color-delivered);background-color:#d4f7e1}.badge-failed{color:var(--color-failed);background-color:#fbe0e4}.badge-cancelled{color:var(--color-cancelled);background-color:#e6e6e6}.form-group{margin-bottom:1.25rem}.form-label{color:var(--text-secondary);margin-bottom:.375rem;font-size:.875rem;font-weight:500;display:block}.form-input,.form-select,.form-textarea{border-radius:var(--radius-sm);border:1px solid var(--border);background-color:var(--bg-surface);width:100%;color:var(--text-primary);transition:var(--transition);padding:.625rem .875rem;font-family:inherit;font-size:.95rem}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #1a56db26}.driver-app{background-color:var(--bg-app);flex-direction:column;max-width:600px;min-height:100vh;margin:0 auto;padding:1rem;display:flex}.driver-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:1rem;padding:1rem 0;display:flex}.driver-card{border-left:5px solid var(--primary);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-sm);margin-bottom:1rem;padding:1.25rem}.driver-card.in-transit{border-left-color:var(--color-transit)}.driver-card.delivered{border-left-color:var(--color-delivered)}.driver-action-btn{text-transform:uppercase;border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-md);padding:1.25rem;font-size:1.15rem;font-weight:700}.sync-badge{border-radius:50px;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.8rem;font-weight:500;animation:2s infinite pulse;display:inline-flex}.sync-badge-online{color:var(--color-delivered);background-color:#d4f7e1}.sync-badge-offline{color:var(--color-pending);background-color:#fef2dd}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.sig-canvas-container{border:2px dashed var(--border);border-radius:var(--radius-md);background-color:#fafbfc;margin-bottom:.75rem;position:relative;overflow:hidden}.sig-canvas{cursor:crosshair;width:100%;height:200px;display:block}.photo-upload-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;display:grid}.photo-upload-box{border:2px dashed var(--border);border-radius:var(--radius-sm);aspect-ratio:1;cursor:pointer;color:var(--text-secondary);text-align:center;transition:var(--transition);background-color:#fafbfc;flex-direction:column;justify-content:center;align-items:center;padding:.25rem;font-size:.75rem;display:flex}.photo-upload-box:hover{border-color:var(--primary);color:var(--primary)}.photo-preview{object-fit:cover;border-radius:var(--radius-sm);width:100%;height:100%}