/* Mixing room issue screen. Builds on Bootstrap 4 and ../style.css.
   Vaccine colours only ever label a vaccine. Where a timer sits beside a
   vaccine, the two are joined into one pill. */

:root {
  --dark: #343a40;
  --muted: #6c757d;
  --border: #dee2e6;
  --light: #f8f9fa;
  --hover: #e9ecef;
  --green: #28a745;
  --amber: #ffc107;
  --red: #dc3545;
  --row-warn: #ffd27f;
  --row-alarm: #f5a3a3;
  --row-done: #c3e6cb;
  --row-out: #ffeeba;
  --aqiv: #37b7dd;
  --qivc: #9ed211;
  --c30: #6f42c1;
}

main { padding-top: 1.5rem; padding-bottom: 1.5rem; }
main section + section { margin-top: 2.5rem; }
.num, .table td { font-variant-numeric: tabular-nums; }

/* Vaccine identity */
[data-v="aQIV"] { --c: var(--aqiv); --c-ink: #10242e; --c-soft: #e3f5fb; }
[data-v="QIVc"] { --c: var(--qivc); --c-ink: #1b2604; --c-soft: #f1f9dd; }
[data-v="C30"]  { --c: var(--c30);  --c-ink: #ffffff; --c-soft: #eee8f9; }
.vac { display: inline-block; padding: .25em .5em; font-weight: 700; line-height: 1.1; border-radius: .25rem; white-space: nowrap; background: var(--c, var(--muted)); color: var(--c-ink, #fff); }

/* Time status: green OK, amber over 15 min, red over 20 min */
.rag { display: inline-block; padding: .2em .45em; font-size: 80%; font-weight: 700; line-height: 1.1; border-radius: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rag-ok { background: var(--green); color: #fff; }
.rag-warn { background: var(--amber); color: #212529; }
.rag-alarm { background: var(--red); color: #fff; }

/* Vaccine + timer as one pill, so a timer colour never reads as a vaccine colour */
.combo { display: inline-flex; border-radius: .25rem; overflow: hidden; white-space: nowrap; font-weight: 700; line-height: 1.1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.combo > .vac, .combo > .rag { border-radius: 0; font-size: 1em; padding: .25em .5em; }
.combo > .rag { border-left: 2px solid #fff; }
.combo-lg { font-size: 1.05rem; }

.warming { display: inline-block; padding: .2em .45em; font-size: 80%; font-weight: 700; line-height: 1.1; border-radius: .25rem; background: #fff3cd; color: #856404; border: 1px solid var(--amber); white-space: nowrap; }

.in-use { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1.25rem; padding: .6rem 1rem; margin-bottom: 1.5rem; background: var(--light); border: 1px solid var(--border); border-radius: .25rem; font-size: .95rem; }

/* Finding people */
.finder { position: relative; margin-bottom: 1rem; }
.finder-status { color: var(--muted); font-size: .9rem; margin-top: .35rem; min-height: 1.4em; }
.results { position: absolute; left: 0; right: 0; top: calc(100% - 1.6rem); z-index: 20; background: #fff; border: 1px solid #ced4da; border-radius: .25rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); list-style: none; margin: 0; padding: .25rem 0; }
.results li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .5rem .9rem; cursor: pointer; }
.results li[aria-selected="true"] { background: var(--hover); }
.results .nm { font-weight: 700; }
.results .meta { color: var(--muted); font-size: .85rem; }

/* Staff cards: A-Z, fixed height (room for three items) so nothing moves */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.tile { height: 124px; overflow: hidden; text-align: left; border: 1px solid #adb5bd; background: #fff; border-radius: .25rem; padding: .45rem .6rem; display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: #212529; }
.tile:hover { border-color: var(--dark); background: var(--light); }
.tile .nm { font-size: 1.05rem; font-weight: 700; }
.tile .off { font-size: .75rem; color: var(--muted); font-weight: 400; margin-left: .35rem; }
.tile .pills { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 2px; }
.tile .pill-line { display: inline-flex; gap: 6px; align-items: center; }
.tile .combo { font-size: .8rem; }
.tile .more { font-size: .8rem; font-weight: 700; line-height: 1.1; padding: .25em .5em; border-radius: .25rem; background: var(--hover); color: var(--dark); }
.tile.add { border-style: dashed; color: var(--muted); align-items: center; justify-content: center; font-size: 1.05rem; background: var(--light); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; color: var(--muted); margin-top: .75rem; align-items: center; }

/* Tables */
.table-click tbody tr[data-open] { cursor: pointer; }
.table-click tbody tr[data-open]:hover td { filter: brightness(.96); }
.table .table-success td { background: var(--row-done); }
.table .table-warning td { background: var(--row-out); }
tr.faded td { color: var(--muted); }

/* Batch cards */
.cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.batch-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.batch-list li { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: .25rem; }
.batch-list li.current { border: 2px solid var(--c); }
.batch-list li.done { color: var(--muted); background: var(--light); }
.batch-list li.done .bn { text-decoration: line-through; }
.batch-list .bn { font-weight: 700; }
.batch-list .btn { margin-left: auto; }
.cols form .btn { float: right; }
.cols form::after { content: ""; display: block; clear: both; }
.btn-vac { background: var(--c); border-color: var(--c); color: var(--c-ink); font-weight: 700; }
.btn-vac:hover { color: var(--c-ink); filter: brightness(.95); }
.section-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.section-label .btn { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Person panel (own names: Bootstrap's .modal is hidden by default) */
.person-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 1030; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1.75rem 1rem; }
.person-panel { width: 100%; max-width: 800px; background: #fff; border-radius: .3rem; border: 1px solid rgba(0, 0, 0, .2); }
.person-panel:focus { outline: none; }
.person-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem; background: var(--dark); color: #fff; border-radius: calc(.3rem - 1px) calc(.3rem - 1px) 0 0; }
.person-head h4 { margin: 0; }
.person-head .sub { opacity: .8; font-size: .9rem; }
.person-head .close { color: #fff; text-shadow: none; opacity: .8; font-size: 1.75rem; }
.person-body { padding: 1rem; display: grid; gap: 1.25rem; }
.person-foot { padding: .75rem 1rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.has-item { border: 1px solid var(--border); border-radius: .25rem; padding: .6rem .75rem; display: grid; gap: .5rem; }
.has-item + .has-item { margin-top: .5rem; }
.has-item.flu-warning { background: var(--row-warn); }
.has-item.flu-alarm { background: var(--row-alarm); }
.has-item.fresh { box-shadow: 0 0 0 3px var(--dark); }
@media (prefers-reduced-motion: no-preference) {
  .has-item.fresh { animation: fresh 1.6s ease-out forwards; }
  @keyframes fresh { 0%, 60% { box-shadow: 0 0 0 3px var(--dark); } 100% { box-shadow: 0 0 0 3px transparent; } }
}
.has-line { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; }
.has-line label { margin: 0; }
.has-line select { padding: .1rem .3rem; border: 1px solid #ced4da; border-radius: .2rem; background: #fff; }
.ret { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #ced4da; border-radius: .25rem; background: #fff; }
.stepper button { width: 2.5rem; height: 2.4rem; border: 0; background: var(--light); font-size: 1.2rem; cursor: pointer; }
.stepper output { min-width: 2.75rem; text-align: center; font-size: 1.15rem; font-weight: 700; }
.give-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: .6rem .5rem; border-top: 1px solid var(--border); background: var(--c-soft); }
.give-row + .give-row { margin-top: 2px; }
.give-row .lbl { display: grid; gap: 3px; font-size: .9rem; justify-items: start; }
.qtys { display: flex; flex-wrap: wrap; gap: .35rem; }
.qbtn { min-width: 3.1rem; height: 3.1rem; font-size: 1.2rem; font-weight: 700; border-radius: .25rem; cursor: pointer; background: #fff; border: 2px solid var(--c); color: #212529; }
.qbtn:hover:not(:disabled) { background: var(--c); color: var(--c-ink); }
.qbtn:disabled { opacity: .3; cursor: not-allowed; }
@media (max-width: 600px) { .give-row { grid-template-columns: 1fr; } }

/* Floating message: neutral so it never looks like a vaccine colour */
.issue-alert { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: 75%; max-width: 760px; z-index: 1060; display: flex; gap: 1rem; align-items: center; padding: .75rem 1.25rem; border-radius: .25rem; background: #fff; border: 1px solid #adb5bd; border-left: 6px solid var(--dark); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2); }
.issue-alert.error { background: #f8d7da; border-color: #f5c6cb; border-left-color: var(--red); color: #721c24; }
.issue-alert[hidden] { display: none; }
.issue-alert span { flex: 1; }
@media (max-width: 600px) { .issue-alert { width: calc(100% - 2rem); } }