/* Minimal UI for courier web prototype */
.upost-app {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #faf7f2; /* light milky */
  min-height: 100vh;
}
.upost-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #e5e7eb; gap:12px; }
.upost-header { background:#fff; position: sticky; top: 0; z-index: 10; }
.upost-header .brand { display:flex; align-items:baseline; gap:10px; }
.upost-header .logo { font-weight:800; font-size:18px; }
.upost-header .title { font-weight:600; color:#374151; }
.upost-header .right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.geo-toggle { display:flex; align-items:center; gap:6px; font-size:11px; color:#111827; }
.btn { border:1px solid #d1d5db; background:#fff; cursor:pointer; font-weight:600; }
.btn:hover { background:#f9fafb; }
.btn.primary { background:#111827; border-color:#111827; color:#fff; }
.btn.primary:hover { background:#0b1220; }
.btn.danger { border-color:#ef4444; color:#ef4444; }
.btn.danger:hover { background:#fff1f2; }
.btn.wide { width:100%; padding:10px 12px; }
.hidden { display:none !important; }

.upost-body { display:grid; grid-template-columns: 1fr 1.4fr; gap:12px; padding:12px; }
.col { border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; min-height: 70vh; }
.col-title { padding:10px 12px; background:#f9fafb; font-weight:700; border-bottom:1px solid #e5e7eb; }

/* Tabs: Active / Archive */
.orders-tabs{ display:flex; gap:6px; padding:8px; border-bottom:1px solid #e5e7eb; background:#fff; }
.orders-tabs .tab{ flex:1 1 auto; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:800; border-radius:12px; padding:8px 10px; }
.orders-tabs .tab:hover{ background:#f9fafb; }
.orders-tabs .tab.active{ border-color:#111827; }
.orders-list { padding:8px; display:flex; flex-direction:column; gap:6px; }
.order-item { border:1px solid #e5e7eb; border-radius:12px; padding:10px; cursor:pointer; }
.order-item:hover { background:#f9fafb; }
.order-item.active { border-color:#111827; }
.order-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.order-id { font-weight:800; }
.order-id { font-size: 16px; }
.badge { font-size:12px; border:1px solid #d1d5db; padding:2px 8px; border-radius:999px; color:#374151; background:#fff; }
.order-meta { margin-top:4px; font-size:13px; color:#4b5563; display:flex; flex-direction:column; gap:1px; }

.details-box { padding:12px; }
.muted { color:#6b7280; }
.small { font-size:12px; }
.section { border-top:1px solid #e5e7eb; padding-top:6px; margin-top:6px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row > * { flex: 1 1 auto; }
.kv { display:flex; flex-direction:column; gap:1px; margin-bottom:4px; }
.kv .k { font-size:12px; color:#6b7280; }
.kv .v { font-weight:700; color:#111827; word-break:break-word; line-height:1.2; }
.link { color:#2563eb; text-decoration:none; }
.link:hover { text-decoration:underline; }
.field { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.field label { font-size:12px; color:#6b7280; font-weight:700; }
.field input, .field select, .field textarea { border:1px solid #d1d5db; border-radius:10px; padding:9px 10px; font-size:14px; }
.field textarea { min-height:72px; resize:vertical; }
.error { color:#b91c1c; margin-top:10px; font-weight:700; }

.login-overlay { position:fixed; inset:0; background:rgba(17,24,39,0.6); display:flex; align-items:center; justify-content:center; z-index:9999; }
.login-card { width:min(420px, 92vw); background:#fff; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.login-title { font-size:18px; font-weight:800; margin-bottom:6px; }

.remember-row{ display:flex; align-items:center; gap:8px; margin:10px 0 4px; font-size:14px; color:#111827; }

.bell-wrap{ position:relative; }
.bell-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:800; margin-left:6px; }
.bell-panel{ position:absolute; right:0; top:calc(100% + 8px); width:min(380px, 92vw); background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.15); padding:10px; max-height:calc(100vh - 80px); overflow:hidden; }
.bell-panel-title{ font-weight:800; margin-bottom:8px; }
.bell-list{ max-height:calc(100vh - 230px); overflow:auto; display:flex; flex-direction:column; gap:8px; }
.bell-item{ border:1px solid #e5e7eb; border-radius:12px; padding:10px; cursor:pointer; }
.bell-item:hover{ background:#f9fafb; }
.bell-item .t{ font-weight:800; }
.bell-item .m{ margin-top:4px; font-size:13px; color:#4b5563; display:flex; flex-direction:column; gap:2px; }
.bell-actions{ display:flex; gap:8px; margin-top:10px; }
.bell-actions .btn{ flex:1 1 auto; }

.scan-modal { position:fixed; inset:0; background:rgba(17,24,39,0.6); display:flex; align-items:center; justify-content:center; z-index:10000; }
.scan-card { width:min(720px, 96vw); background:#fff; border-radius:16px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.scan-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.scan-title { font-weight:800; font-size:16px; }
#upostVideo { width:100%; max-height:60vh; border-radius:12px; background:#000; }
.scan-hint { margin-top:10px; color:#6b7280; font-size:13px; }

@media (max-width: 900px){
  .upost-body { grid-template-columns: 1fr; }
  .col { min-height: auto; }
}

/* App mode (shortcode page): hide theme footer to make the webview look like a real app */
.upost-courier-app-page footer,
.upost-courier-app-page #footer,
.upost-courier-app-page #colophon,
.upost-courier-app-page .site-footer,
.upost-courier-app-page .footer,
.upost-courier-app-page .elementor-location-footer{
  display:none !important;
}


/* Settings modal */
.settings-modal { position:fixed; inset:0; background:rgba(17,24,39,0.55); display:flex; align-items:center; justify-content:center; z-index:10001; }
.settings-card { width:min(720px, 96vw); background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.settings-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.settings-title { font-weight:800; font-size:16px; }
.settings-actions { margin-top:12px; }


/* Photo preview */
#photoPreview{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Generic modal (camera / SMS preview) */
.upost-modal-overlay{ position:fixed; inset:0; background:rgba(17,24,39,0.6); display:flex; align-items:center; justify-content:center; z-index:10002; padding:12px; }
.upost-modal-overlay.hidden{ display:none; }
.upost-modal-card{ width:min(720px, 96vw); background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
.upost-modal-title{ font-weight:800; font-size:16px; margin-bottom:10px; }
.upost-cam-video{ width:100%; max-height:60vh; border-radius:14px; background:#000; }