/* 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; }


.complete-row{ display:flex; align-items:center; gap:8px; margin-top:8px; font-weight:700; }
.complete-row input{ width:18px; height:18px; }
button[disabled], .btn[disabled]{ opacity:.55; cursor:not-allowed; }
.upost-toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); background:#111827; color:#fff; padding:12px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:10050; opacity:0; transition:all .2s ease; max-width:min(92vw,520px); text-align:center; }
.upost-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.bell-panel{ position:fixed; right:12px; top:70px; width:min(380px, calc(100vw - 24px)); max-width:calc(100vw - 24px); z-index:10020; }
@media (max-width: 700px){
  .upost-header .right{ gap:6px; }
  .bell-panel{ left:12px; right:12px; width:auto; max-width:none; }
}

.orders-tabs #upostTabActive{ display:none !important; }
.orders-tabs #upostTabArchive{ flex:1 1 100%; width:100%; }
#btnSendStatus{ width:100%; display:block; }

/* v1.5.3 courier payment workflow */
.upost-badge-stack{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge.payment.paid{background:#e8f7ee;border-color:#9dd8b1;color:#146c35}
.badge.payment.not-paid{background:#fff1f0;border-color:#f0aaa6;color:#a12620}
.upost-due,.upost-balance-negative{font-weight:800;color:#b42318}
.upost-payment-box{border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.upost-payment-box.paid{border-color:#a7d7b4;background:#f4fbf6}
.upost-payment-box.not-paid{border-color:#efc6c3;background:#fffafa}
.upost-payment-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:16px;margin-bottom:7px}
.upost-payment-head strong{text-transform:lowercase}
.upost-parcel-section .btn{margin-top:9px}
.upost-rate-list{display:grid;gap:8px;margin:8px 0}
.upost-rate-choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid #dfe3e8;border-radius:10px;background:#fff;cursor:pointer}
.upost-rate-choice strong{white-space:nowrap}
.upost-rate-list.busy{opacity:.55;pointer-events:none}
#upostSignatureCanvas{display:block;width:100%;height:150px;touch-action:none;border:1px solid #cbd5e1;border-radius:10px;background:#fff;margin:8px 0}
.upost-workflow-modal{position:fixed;inset:0;z-index:100000;background:rgba(15,23,42,.58);display:flex;align-items:center;justify-content:center;padding:16px}
.upost-workflow-card{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:16px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.upost-workflow-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:17px}
.upost-dim-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:560px){.upost-dim-grid{grid-template-columns:1fr}.upost-rate-choice{grid-template-columns:auto minmax(0,1fr)}.upost-rate-choice strong{grid-column:2}}

/* v1.5.3 compact parcel/payment summary + staged parcel popup */
.upost-summary-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:10px;align-items:stretch;margin-top:6px}
.upost-summary-grid .section{margin-top:0;padding:10px;border-top:0}
.upost-parcel-section.compact,.upost-payment-box.compact{border:1px solid #e5e7eb;border-radius:12px}
.upost-parcel-section.compact{background:#fff}
.upost-parcel-section .btn.compact{margin-top:7px;padding:5px 9px;font-size:12px}
.upost-payment-box.compact .upost-payment-head{margin-bottom:4px}
.upost-workflow-hint{margin-top:6px;line-height:1.25}
.upost-workflow-sub{font-size:12px;color:#6b7280;margin:-4px 0 10px}
.upost-modal-step{margin-top:12px;padding-top:10px;border-top:1px solid #e5e7eb}
.upost-step-title{font-weight:800;font-size:13px;margin-bottom:7px}
.upost-workflow-msg{min-height:18px;margin-top:8px}
#upostModalSignatureCanvas{display:block;width:100%;height:150px;touch-action:none;border:1px solid #cbd5e1;border-radius:10px;background:#fff;margin:8px 0}
@media(max-width:700px){.upost-summary-grid{grid-template-columns:1fr}.upost-payment-box.compact{min-height:auto}}

/* v1.6.5 courier payment/guard UX */
.upost-courier-amount-step{border:1px solid #cbd5e1;background:#f8fafc;border-radius:12px;padding:12px}
.upost-courier-due-main{font-size:24px;font-weight:800;line-height:1.1;margin:5px 0 6px}
.upost-workflow-block-notice{color:#991b1b!important;font-weight:700;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:8px 10px}
.upost-workflow-guarded{position:relative}
.upost-attention-pulse{animation:upostAttentionPulse .85s ease-in-out 0s 4}
@keyframes upostAttentionPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 5px rgba(220,38,38,.22)}}

/* v1.6.6 courier balance collection method */
.upost-courier-payment-method-field{margin-top:12px}
.upost-courier-payment-method-field label{display:block;font-weight:700;margin-bottom:6px}
.upost-courier-payment-method-field select{width:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:7px 10px;font-size:16px}

/* v1.6.8 show the customer's original tariff in the weigh/measure popup */
.upost-client-selected-rate{margin:0 0 12px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#f8fafc;line-height:1.3}
.upost-client-selected-rate-caption{font-size:11px;color:#6b7280;font-weight:700;margin-bottom:4px}
.upost-client-selected-rate strong{display:block;font-size:13px;overflow-wrap:anywhere}