/* Launchpad Feature — Opening hours
   Load after core/tokens.css. Colours come from tokens only. 375px first.
   Everything is namespaced .lp-oh-*. */

/* ---------- customer banner ---------- */
.lp-oh-banner{
  display:flex;align-items:center;min-height:var(--tap);
  padding:10px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);
  font-size:.95rem;line-height:1.35;font-weight:500;overflow-wrap:anywhere;
}
.lp-oh-banner::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;
  margin-right:10px;background:var(--text-2);
}
.lp-oh-banner--open{border-color:var(--ok)}
.lp-oh-banner--open::before{background:var(--ok)}
.lp-oh-banner--closing-soon{border-color:var(--warn)}
.lp-oh-banner--closing-soon::before{background:var(--warn)}
.lp-oh-banner--cutoff,.lp-oh-banner--closed,.lp-oh-banner--paused,.lp-oh-banner--unset{border-color:var(--err)}
.lp-oh-banner--cutoff::before,.lp-oh-banner--closed::before,.lp-oh-banner--paused::before,.lp-oh-banner--unset::before{background:var(--err)}

/* ---------- staff editor ---------- */
.lp-oh{max-width:640px;margin:0 auto;padding:0 0 88px;color:var(--text)}
.lp-oh-title{font-family:var(--font-head);font-size:1.25rem;margin:0 0 14px}
.lp-oh-h3{font-family:var(--font-head);font-size:1rem;margin:0 0 6px}
.lp-oh-help{margin:0 0 10px;font-size:.82rem;color:var(--text-2);line-height:1.4}

.lp-oh-msg{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);
  margin-bottom:14px;font-size:.9rem;line-height:1.4;overflow-wrap:anywhere}
.lp-oh-msg[hidden]{display:none}
.lp-oh-msg--err{border-color:var(--err);color:var(--text);background:var(--bg-2)}
.lp-oh-msg--ok{border-color:var(--ok);background:var(--bg-2)}

.lp-oh-week{display:grid;gap:10px;grid-template-columns:1fr}
.lp-oh-day,.lp-oh-section{background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:12px 14px}
.lp-oh-section{margin-top:14px}
.lp-oh-dayname{font-family:var(--font-head);font-size:.95rem;margin:0 0 8px}
.lp-oh-closed{margin:0 0 8px;color:var(--text-2);font-size:.9rem;min-height:24px}

.lp-oh-period,.lp-oh-closure{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;align-items:end}
.lp-oh-closure .lp-oh-field:nth-child(3){grid-column:1 / -1}
.lp-oh-period .lp-oh-btn,.lp-oh-closure .lp-oh-btn{grid-column:1 / -1}

.lp-oh-field{display:block;min-width:0}
.lp-oh-label{display:block;font-size:.78rem;color:var(--text-2);margin-bottom:4px}
.lp-oh input[type=time],.lp-oh input[type=date],.lp-oh input[type=text],
.lp-oh input[type=number],.lp-oh input[type=datetime-local]{
  width:100%;min-height:var(--tap);font-size:var(--input-size);padding:8px 10px;
  background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);
}
.lp-oh input:focus-visible,.lp-oh-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.lp-oh-switch{display:flex;align-items:center;gap:12px;min-height:var(--tap);margin-bottom:8px;font-weight:600}
.lp-oh-switch input{width:var(--tap);height:var(--tap);min-height:var(--tap);flex:none;accent-color:var(--err)}

.lp-oh-btn{min-height:var(--tap);min-width:var(--tap);padding:8px 16px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.95rem;font-weight:600}
.lp-oh-btn[disabled]{opacity:.5;cursor:not-allowed}
.lp-oh-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--text)}
.lp-oh-btn--danger{background:var(--err);border-color:var(--err);color:var(--text)}
.lp-oh-btn--ghost{background:transparent}

.lp-oh-confirm{position:sticky;bottom:72px;margin-top:14px;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--err);background:var(--bg-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lp-oh-confirm[hidden]{display:none}
.lp-oh-confirm-text{flex:1 1 100%;margin:0;font-size:.95rem}

.lp-oh-bar{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;justify-content:flex-end;
  padding:12px 0;margin-top:14px;background:var(--bg);border-top:1px solid var(--border)}
.lp-oh-dirty{flex:1;font-size:.85rem;color:var(--warn)}

@media (min-width:640px){
  .lp-oh-week{grid-template-columns:1fr 1fr}
  .lp-oh-period{grid-template-columns:1fr 1fr auto}
  .lp-oh-period .lp-oh-btn{grid-column:auto}
  .lp-oh-closure{grid-template-columns:1fr 1fr 2fr auto}
  .lp-oh-closure .lp-oh-field:nth-child(3){grid-column:auto}
  .lp-oh-closure .lp-oh-btn{grid-column:auto}
}