/* =============================================================
   DOODLY — Delivery Executive portal (mobile-first)
   ============================================================= */
.dl-hero { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.dl-greet { font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.5rem; }
.dl-sub { color:var(--ink-3); font-size:.86rem; margin-top:2px; }

.dl-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
@media (min-width:680px){ .dl-kpis { grid-template-columns:repeat(6,1fr); } }
.dl-kpi { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px; box-shadow:var(--shadow-sm); }
.dl-kpi .n { font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.4rem; line-height:1; }
.dl-kpi .n small { font-size:.7rem; color:var(--ink-3); font-family:var(--font-body); }
.dl-kpi .l { font-size:.7rem; color:var(--ink-3); font-weight:600; margin-top:5px; }

.dl-card { border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:16px; }
.dl-card-h { padding:14px 16px 0; }
.dl-card-h h3 { display:flex; align-items:center; gap:.5rem; font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.1rem; }
.dl-card-h svg { color:var(--leaf-600); }
#dlRouteMap { height:300px; margin:12px 16px 0; }
.dl-route-btns { display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px; }
.dl-route-btns .btn { flex:1; min-width:120px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }

/* stop cards */
.dl-list { display:grid; gap:12px; }
.dl-stop { border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:14px; box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s; }
.dl-stop.done { opacity:.72; }
.dl-stop.done .dl-seq { background:var(--leaf); }
.dl-stop-top { display:flex; align-items:center; gap:10px; }
.dl-seq { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--forest); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.9rem; }
.dl-stop-id { flex:1; min-width:0; display:flex; flex-direction:column; }
.dl-stop-id b { color:var(--forest); font-size:.98rem; }
.dl-stop-id small { color:var(--ink-3); font-size:.78rem; }
.dl-stop-addr { display:flex; align-items:flex-start; gap:.4rem; color:var(--ink-2); font-size:.86rem; margin-top:10px; }
.dl-stop-addr svg { color:var(--leaf-600); flex:0 0 auto; margin-top:1px; }
.dl-instr { display:flex; align-items:center; gap:.4rem; color:var(--ink-3); font-size:.8rem; margin-top:6px; }
.dl-instr svg { color:#e0a800; flex:0 0 auto; }

/* workflow steps */
.dl-steps { display:flex; align-items:center; gap:0; margin:12px 0; }
.dl-step { font-size:.68rem; font-weight:700; color:var(--ink-3); padding:.26rem .5rem; border-radius:999px; background:var(--surface-2); white-space:nowrap; }
.dl-step.on { color:#fff; background:var(--leaf); }
.dl-step-sep { flex:1; height:2px; background:var(--line); min-width:8px; }

/* bottle row */
.dl-bottles { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; background:var(--surface-2); border-radius:12px; padding:.6rem .8rem; font-size:.82rem; color:var(--ink-2); }
.dl-bottles b { color:var(--forest); }
.dl-bottles svg { color:var(--leaf-600); vertical-align:-2px; }
.dl-bottle-btns, .dl-step-q { display:inline-flex; align-items:center; gap:6px; }
.dl-mini { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-size:1.1rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
.dl-mini:hover { background:var(--mint-soft); color:var(--leaf-600); }

/* communication */
.dl-comm { display:flex; gap:8px; margin-top:12px; }
.dl-cbtn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.5rem; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.8rem; }
.dl-cbtn:hover { background:var(--mint-soft); border-color:var(--mint); color:var(--leaf-600); }
.dl-cbtn svg { color:var(--leaf-600); }

/* actions */
.dl-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dl-acts .btn { flex:1; min-width:110px; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; font-size:.86rem; }
.dl-delivered { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; color:var(--leaf-600); font-weight:800; font-size:.88rem; }
.dl-navmodes { display:flex; gap:8px; margin-top:8px; }
.dl-mode { flex:1; text-align:center; padding:.45rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.8rem; }
.dl-mode:hover { background:var(--mint-soft); color:var(--leaf-600); }

/* modals (delivery confirm + issue) */
.dl-modal { position:fixed; inset:0; z-index:1320; display:grid; place-items:center; padding:16px; background:rgba(8,30,21,.42); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.dl-modal.show { opacity:1; pointer-events:auto; }
.dl-modal-card { width:100%; max-width:440px; max-height:92vh; overflow:auto; background:var(--surface); border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:18px; transform:translateY(16px) scale(.97); transition:transform .3s cubic-bezier(.2,1.1,.3,1); }
.dl-modal.show .dl-modal-card { transform:none; }
.dl-modal-head { display:flex; align-items:center; justify-content:space-between; }
.dl-modal-head h3 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.25rem; }
.dl-x { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--forest); cursor:pointer; display:grid; place-items:center; }
.dl-modal-sub { color:var(--ink-3); font-size:.84rem; margin:4px 0 14px; }
.dl-pod { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border:1.5px dashed var(--line); border-radius:12px; cursor:pointer; color:var(--leaf-600); font-weight:700; font-size:.86rem; margin-bottom:10px; }
.dl-pod input { display:none; }
.dl-pod-prev img { width:100%; max-height:160px; object-fit:cover; border-radius:12px; margin-bottom:10px; }
.dl-bcollect { display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:var(--surface-2); border-radius:12px; padding:.6rem .8rem; margin-bottom:10px; font-size:.86rem; color:var(--ink-2); }
.dl-bcollect b { color:var(--forest); min-width:20px; text-align:center; display:inline-block; }
.dl-bcollect small { color:var(--ink-3); }
.dl-notes { width:100%; min-height:64px; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font:inherit; font-size:.9rem; margin-bottom:12px; resize:vertical; }
.dl-confirm, .dl-isubmit { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.dl-issue-types { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.dl-itype { padding:.55rem .7rem; border-radius:11px; border:1.5px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.8rem; cursor:pointer; text-align:left; }
.dl-itype.sel { border-color:var(--leaf); background:var(--mint-soft); color:var(--leaf-600); box-shadow:0 0 0 1px var(--leaf); }
.dl-prio { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.dl-prio span { font-size:.82rem; color:var(--ink-3); margin-right:auto; }
.dl-pbtn { padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.8rem; cursor:pointer; }
.dl-pbtn.sel { border-color:var(--leaf); background:var(--mint-soft); color:var(--leaf-600); }

/* admin delivery analytics */
.dl-an-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:560px){ .dl-an-kpis { grid-template-columns:repeat(4,1fr); } }
@media (min-width:980px){ .dl-an-kpis { grid-template-columns:repeat(8,1fr); } }
.dl-an-kpi { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:13px; box-shadow:var(--shadow-sm); }
.dl-an-kpi .n { font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.35rem; line-height:1; }
.dl-an-kpi .l { font-size:.7rem; color:var(--ink-3); font-weight:600; margin-top:5px; }

@media (prefers-reduced-motion: reduce) { .dl-modal-card { transition:none; } }