:root {
    --bg: #095f70;
    --card: #ffffff;
    --text: #095f70;
    --muted: #66664d;
    --pri: #0f62fe;
    --pri-600: #0bd732;
    --line: #e5e7eb;
    --pill: #eef2ff;
    --danger: #fee2e2;
    --danger-text: #991b1b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
input{color:var(--text);}
header{background:var(--bg);}
#style_sku_upc{text-transform:uppercase;}
.container{margin:0 auto;padding:10px;}
.brand{display:flex;justify-content: center;align-items:center;gap:12px;margin:10px 0 0}
.logo{width:350px;}
.brand-title{font-size:20px;margin:0;text-align:center;}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .choices-wrap { display:flex; flex-wrap:wrap; gap:10px; }
  .choice { display:flex; align-items:center; gap:6px; }

.form .field{display:flex;flex-direction:column;margin:10px 0;}
.label{font-weight:600;margin-bottom:6px}
#statusForm{display: grid; gap: 10px;}
#statusForm,#bhForm,#admApprovalForm,#admReschedForm,#cloverSetPayForm,#admInForm,#admOutForm{border:1px solid;padding:5px;margin:5px;}
.thumbs{display:grid;}
.req{color:#d00}
.section{margin-bottom:18px}
.section-title{font-size:18px;margin:0 0 10px 0}
.subhead{font-size:16px;margin:16px 0 6px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-content:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-2-col{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.pill{background:var(--pill);padding:2px 8px;border-radius:999px}
/* Base chip + aliases so old .pill/.badge still look right */
.pill, .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:999px; font-weight:600;
  font-size:12px; line-height:1.4; border:1px solid transparent;
}
/* Carrier-agnostic grouped timeline */
.tl-grid{display:grid;grid-template-columns:50px 25px 1fr;gap:0 18px;margin-top:8px}
.tl-day{grid-column:1 / -1;background:var(--bg-soft,#fafafa);padding:10px 12px;margin:14px 0 6px;border-radius:10px;font-weight:600}
.tl-rail-col{grid-column:2;position:relative}
.tl-rail{position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--line,#e5e7eb)}
.tl-row{display:contents}
.tl-time{grid-column:1;white-space:nowrap;padding:8px 0 12px 0;font-weight:600}
.tl-evt{grid-column:3;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;padding:8px 0 12px 0;border-bottom:1px solid var(--line,#eee)}
.tl-evt:last-child{border-bottom:none}
.tl-loc{color:var(--muted,#6b7280);white-space:nowrap}
.tl-dot{position:absolute;left:6px;width:12px;height:12px;border-radius:50%;background:var(--muted,#9ca3af)}
.tl-dot.delivered{background:transparent;border:2px solid var(--accent,#10b981)}
.tl-dot.delivered::after{content:"";position:absolute;inset:2px;background:var(--accent,#10b981);mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / contain}

/* Base chip (keeps your existing look) */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:999px; font-weight:600;
  font-size:12px; line-height:1.4; border:1px solid transparent;
}

/* Optional dot that follows text color */
.status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.7; margin-right:2px;
}

/* Fallback (unknown/missing) */
.status:not([data-status]), .status[data-status=""]{
  background:var(--pill); color:#111; border-color:#e5e7eb;
}

/* Variants – using data attributes + your colors (case-insensitive matching) */
.status[data-status="New" i]          { background:#0055ff; color:#fff; }
.status[data-status="Approved" i]  { background:#ffe700; color:#000; }
.status[data-status="Received" i]     { background:#f3a01f; color:#000; }
.status[data-status="Time Approval" i]  { background:#ff0000; color:#000; }
.status[data-status="On Hold" i]      { background:#dc2626; color:#fff; }
.status[data-status="Completed" i]    { background:#78ff00; color:#000; }
.status[data-status="Payment Approval" i]  { background:#00ffff; color:#000; }
.status[data-status="Shipped" i]      { background:#7352fd; color:#fff; }
.status[data-status="Closed" i]       { background:#ff00f5; color:#fff; }
.status[data-status="Cancelled" i]    { background:#9ca3af; color:#fff; } /* neutral gray */


@media(max-width:900px){.grid-2,.grid-3,.grid-2-col{grid-template-columns:1fr}}
input,select,textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
textarea.pre{white-space:pre-wrap}
.actions{display:flex;gap:10px;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--pri);text-decoration:none;color:var(--line);cursor:pointer;}
.btn-primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn-primary:hover{background:var(--pri-600)}
.btn-secondary{background:var(--pri)}
.btn-sm{color:var(--line);padding:6px 10px;font-size:12px}
.btn-link{background:transparent;border-color:transparent;color:var(--text);padding:0}


.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.flash-stack{display:flex;flex-direction:column;gap:8px}
.flash{padding:10px;border-radius:8px;background:var(--card);border:1px solid #c7e2ff}
.flash-error{background:#ff0000;border-color:#ffc7c7}
.footer{display:flex;flex-direction: column;justify-content:center;align-items:center;margin-top:24px;color:var(--line);font-size:14px}
.footer a{color:var(--line); padding:5px;}
.kv .k{display:inline-block;width:160px;color:var(--muted)}
.kv .v{display:inline-block}
.block .k{display:block;margin-bottom:6px}
.mb-1{color:var(--line);}
.mb-2{color:var(--line);}
.table-wrap{overflow:auto;color:var(--line);}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sig-wrap{display:flex;align-items:center;gap:2px}
.sig-canvas{width:90%;height:180px;border:1px dashed #9ca3af;border-radius:8px;background:#fff}
.timeline{list-style:none;padding-left:0}
.timeline li{padding:8px 0;border-bottom:1px solid var(--line)}
.t-time{font-size:12px;color:var(--muted)}
.log-view{max-height:70vh;overflow:auto;background:#0b1020;color:#daf0ff;padding:12px;border-radius:8px}
.banner{padding:10px 14px;margin:0;background:#fff7ed;border-bottom:1px solid #fed7aa}
.banner-danger{background:var(--danger);color:var(--danger-text);border-bottom:1px solid #fecaca}

@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

/* Details + uploads side-by-side container (optional, explicit name) */
.details-uploads{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){.details-uploads{grid-template-columns:1fr}}

/* Key/Value block */
.kv{display:grid;grid-template-columns: 1fr;gap:6px 10px;align-items:start}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{word-break:break-word}

/* Upload thumbs */
.uploads-grid{display:flex;flex-wrap:wrap;gap:10px}
.thumb{display:inline-block;border:1px solid var(--border);border-radius:8px;padding:4px;text-align:center}
.thumb img{display:block;width:120px;max-height:120px;height:auto;object-fit:contain}