/* Supplement to the design system.
   Everything above the divider is the inline <style> block from
   `Production Logs.dc.html`, carried over unchanged. Everything below it exists
   only because this build is server-rendered rather than client-state driven. */

html, body { height: 100%; margin: 0; background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-ink, var(--blue)); }
.lnk { color: var(--blue); cursor: pointer; }
.ptab { padding: 0 2px 8px; margin-right: 18px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500; white-space: nowrap; }
.ptab:hover { color: var(--ink); }
.ptab.on { color: var(--ink); border-bottom-color: var(--blue); }
.kv { display: grid; grid-template-columns: 148px 1fr; gap: 7px 14px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }
.sel-row td { background: var(--blue-soft) !important; }
.chk { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; margin: 0; display: block; }
input.he-input::placeholder { color: var(--muted-2); }
.app .btn, .app .btn.sm, .app .seg button { white-space: nowrap; }
.app .card-body.flush { overflow-x: auto; }
.kv dd.nowrap { white-space: nowrap; }
.grp-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 600; margin: 0 0 8px; }

/* ------------------------------------------------------------------------- */

/* The design drew an unassigned board cell in the caution colour inline.
   One class instead, because it appears in three tables. */
.cell-warn { color: var(--warning, var(--muted)); }

/* HTMX indicators. The design faked a 340 ms fetch with a timer and showed a
   skeleton; here the same skeleton is tied to the real request. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

#nav-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); opacity: 0; transition: opacity .12s linear; z-index: 20; }
.htmx-request #nav-bar { opacity: 1; animation: navpulse 1s ease-in-out infinite; }
@keyframes navpulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

#tbl-skel { position: absolute; inset: 0; background: var(--surface); z-index: 3; padding: 14px 16px; display: none; }
.tbl-wrap.htmx-request #tbl-skel { display: block; }

/* A screen swap replaces #main wholesale, so the scroll container is reset by
   the browser rather than by a router. */
.shell-main { position: relative; }

/* Form controls the design system styles through .he-input, used here in the
   filter rows where the design used a bare input with a class. */
select.he-input { appearance: auto; }
textarea.he-input { font-family: var(--font-mono); resize: vertical; }

/* Tool switcher (sni_internal_common/templates/_switcher.html). The design opens it from the
   product name; a details element gives the same open and close without client state. */
.tool-switch { position: relative; flex-shrink: 0; }
.tool-switch > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.tool-switch > summary::-webkit-details-marker { display: none; }
.tool-switch > summary:hover { background: var(--surface-2); }
.tool-switch .chev { color: var(--muted); margin-left: 2px; flex-shrink: 0; }
.tool-menu { position: absolute; left: 8px; top: calc(100% + 4px); z-index: 60; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 8px); box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.12)); padding: 4px; display: flex; flex-direction: column; }
.tool-menu-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 500; padding: 7px 10px 4px; }
.tool-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.tool-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--ink); }
.tool-item:hover { background: var(--surface-2); color: var(--ink); }
.tool-item .pill { margin-left: auto; }
.tool-item.current { font-weight: 600; }
.tool-item.disabled { color: var(--muted); cursor: default; }
.tool-item.disabled:hover { background: transparent; }