/* Operation's own look on top of the shared style.css: dark green header (as the OperationDB headers), the rack board,
   tiles, lists and chips. */
:root { --header: #2f5d3a; --primary: #2f6b4f; --primary-dark: #1f4a36; --bg: #f5f7f2; --border: #d7ded3; --muted: #5b6a5e;
  --acc-bg: #e3efe6; --acc-fg: #2f6b4f; --go-bg: #2f5d3a; --go-fg: #fff; --warn-bg: #fbefd6; --warn-fg: #7a4d06; --bad-bg: #f8e0dc; --bad-fg: #8c2b1c; --ok-bg2: #dcf1e3; --ok-fg: #1d5a36; }
.top { border-bottom-color: #4f8a5c; }
.lang { background: #ffffff22; color: #fff; border: 1px solid #ffffff55; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; cursor: pointer; margin-left: auto; }
.lang + .refresh { margin-left: 0; }
a.who { color: #cfe3d6; text-decoration: none; }
.demo-bar { background: var(--warn-bg); color: var(--warn-fg); text-align: center; font-size: 13px; padding: 4px var(--gutter); }
.btn.line { background: #06c755; border-color: #06c755; color: #fff; }
.gate-card .btn { display: block; margin-top: 10px; }
.gate-card .or { margin: 14px 0 6px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; }

.chip { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.c-acc { background: var(--acc-bg); color: var(--acc-fg); } .c-go { background: var(--go-bg); color: var(--go-fg); }
.c-warn { background: var(--warn-bg); color: var(--warn-fg); } .c-bad { background: var(--bad-bg); color: var(--bad-fg); }
.c-ok { background: var(--ok-bg2); color: var(--ok-fg); }

.block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.block h3 { margin-bottom: 6px; }
.warnbox { border-color: #e6c58a; }
details.block summary { cursor: pointer; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.list li.wrap { flex-wrap: wrap; justify-content: flex-start; }
.list .d { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 72px; }
.list .n, td.n, .n { font-variant-numeric: tabular-nums; }
.row-link { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; width: 100%; }
.head-line { margin: 4px 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: grid; gap: 2px; }
.tile .lbl { color: var(--muted); font-size: 12px; } .tile .val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl.small { font-size: 13px; }
.bcard { display: grid; gap: 2px; }

.legend { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.legend .cell { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-left: 8px; }
.board { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.board th { font-weight: 600; text-align: center; padding: 2px 4px; }
.board tbody th { text-align: left; padding-right: 8px; }
.board td { width: 30px; height: 26px; border-radius: 3px; background: var(--surface2); text-align: center; }
.board td a { color: inherit; text-decoration: none; }
.board .today { outline: 2px solid var(--primary); outline-offset: -2px; }
.cell.mix { background: var(--acc-bg); } .cell.onrack { background: var(--go-bg); color: #fff; } .cell.harvest { background: var(--warn-bg); color: var(--warn-fg); }