/* brewsim dashboard — bygger på Pico 2 (dark). Kun små tillegg. */

:root {
  --bs-running:  #2ecc71;
  --bs-finished: #3aa0ff;
  --bs-disabled: #7f8c8d;
  --bs-fail:     #e74c3c;
}

body { padding-block: 1rem; }
.container { max-width: 1180px; }

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.topbar hgroup { margin: 0; }
.topbar-actions { display: flex; gap: .5rem; align-items: center; }
.topbar-actions button { margin: 0; width: auto; padding-inline: .9rem; }

.muted { color: var(--pico-muted-color); }
.foot { margin-top: 2rem; font-size: .82rem; }
.err { color: var(--pico-del-color); display: block; min-height: 1.2em; }

/* Grid av enhets-kort */
.grid-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }

.card {
  border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem; cursor: pointer; transition: border-color .12s, transform .12s;
}
.card:hover { border-color: var(--pico-primary); transform: translateY(-1px); }
.card.is-disabled { opacity: .6; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-name { font-weight: 600; line-height: 1.2; }
.card-type { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pico-muted-color); }

.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pill.running  { color: var(--bs-running);  background: color-mix(in srgb, var(--bs-running) 15%, transparent); }
.pill.finished { color: var(--bs-finished); background: color-mix(in srgb, var(--bs-finished) 15%, transparent); }
.pill.disabled { color: var(--bs-disabled); background: color-mix(in srgb, var(--bs-disabled) 22%, transparent); }

.metric-primary { font-size: 2rem; font-weight: 700; line-height: 1; }
.metric-primary .unit { font-size: .95rem; font-weight: 500; color: var(--pico-muted-color); margin-left: .2rem; }
.metric-sub { font-size: .85rem; color: var(--pico-muted-color); display: flex; gap: .75rem; flex-wrap: wrap; }

.progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--pico-muted-color) 25%, transparent); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--bs-running); transition: width .3s; }
.progress-fill.finished { background: var(--bs-finished); }
.progress-fill.disabled { background: var(--bs-disabled); }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-seen { font-size: .74rem; color: var(--pico-muted-color); }
.foot-right { display: flex; align-items: center; gap: .5rem; }
.card-trigger { margin: 0; width: auto; padding: .1rem .45rem; font-size: .9rem; line-height: 1.2; border-radius: 6px; }
.send-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.send-dot.ok   { background: var(--bs-running); }
.send-dot.fail { background: var(--bs-fail); }
.send-dot.none { background: color-mix(in srgb, var(--pico-muted-color) 40%, transparent); }

/* Modal */
.device-modal { max-width: 820px; width: min(96vw, 820px); }
.graph-wrap { margin: 0 0 1rem; }
#graph { width: 100%; height: auto; background: var(--pico-card-sectioning-background-color); border-radius: var(--pico-border-radius); display: block; }
#graph-caption { font-size: .78rem; margin-top: .3rem; }

.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; }
.config-grid label { font-size: .8rem; margin: 0; }
.config-grid input { margin-bottom: .2rem; }
#template-input { font-family: var(--pico-font-family-monospace, monospace); font-size: .82rem; }
.device-modal fieldset { margin-bottom: .75rem; }

.modal-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.modal-foot .spacer { flex: 1; }
.modal-foot button { margin: 0; width: auto; }

.trigger-result { display: block; min-height: 1.1em; font-size: .82rem; margin-bottom: .3rem; }
.trigger-result.ok { color: var(--bs-running); }
.trigger-result.fail { color: var(--bs-fail); }

#toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  background: var(--pico-card-background-color); border: 1px solid var(--pico-card-border-color);
  color: var(--pico-color); padding: .6rem 1rem; border-radius: 8px; font-size: .88rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 999;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.ok { border-color: color-mix(in srgb, var(--bs-running) 60%, transparent); }
#toast.fail { border-color: color-mix(in srgb, var(--bs-fail) 60%, transparent); }

@media (max-width: 560px) {
  .grid.two, .config-grid { grid-template-columns: 1fr; }
}