/* ---- V1.64 the operator logbook (lb-): Client\Apps\Logbook (LogbookPage and its tabs). Design system tokens only (--os-*), full
   page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance: "Apps/Logbook/", "logbook.css"). ---- */

.lb-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.lb-page > * { min-width: 0; max-width: 100%; }
.lb-page .os-pagehead > * { min-width: 0; }

/* The shift's line under the header: its label, its hours, the buttons to the previous / current shift and the handover */
.lb-shiftbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2) var(--os-space-3); }
.lb-shiftbar .os-spacer { flex: 1 1 auto; }

/* The main column and the side column (open issues, standing orders, downtime): side by side from 1100 px, stacked below */
.lb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-4); align-items: start; }
@media (min-width: 1100px) {
    .lb-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
}
.lb-main, .lb-side { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }

/* The forms: the composer, the handover's sections, the settings */
.lb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--os-space-3); }
.lb-form .lb-wide { grid-column: 1 / -1; }
.lb-form--handover { grid-template-columns: minmax(0, 1fr); }
.lb-check { align-self: end; padding-bottom: var(--os-space-2); }
.lb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-3); }

/* The texts written by people: kept as written (line breaks), wrapped */
.lb-text { margin: var(--os-space-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--os-text); }
.lb-meta { display: flex; flex-wrap: wrap; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.lb-revision { margin-top: var(--os-space-3); padding: var(--os-space-2) var(--os-space-3); border-left: var(--os-border-w-strong) solid var(--os-border); }

/* The side lists: one item per standing order, open issue, equipment or alarm */
.lb-item { padding: var(--os-space-2) 0; border-bottom: var(--os-border-w) solid var(--os-border-subtle); overflow-wrap: anywhere; }
.lb-item:last-child { border-bottom: 0; }
.lb-item .os-row { gap: var(--os-space-2); align-items: center; }
.lb-close { gap: var(--os-space-2); margin-top: var(--os-space-2); }
.lb-close .os-input { flex: 1 1 200px; }

/* The handover's equipment lines */
.lb-lines { display: flex; flex-direction: column; gap: var(--os-space-2); margin-top: var(--os-space-2); }
.lb-line { display: grid; grid-template-columns: minmax(110px, 160px) minmax(130px, 170px) minmax(0, 1fr) auto; gap: var(--os-space-2); align-items: center; }
@media (max-width: 640px) {
    .lb-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .lb-line .lb-note { grid-column: 1 / -1; grid-row: 2; }
}

/* The handover read only: its three sections side by side on a wide screen */
.lb-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--os-space-4); }
.lb-list { margin: var(--os-space-2) 0 0; padding-left: var(--os-space-5); }
.lb-list li { margin-bottom: var(--os-space-1); overflow-wrap: anywhere; }

/* The search bar */
.lb-q { flex: 1 1 260px; min-width: 180px; }
.lb-eq { width: auto; min-width: 110px; }

/* ---- V1.66 the premium pass (mockup 21): the overview, the phone's My shift ---- */
.lb-page .os-grid { align-items: start; }
.lb-col { --span: 4; display: grid; gap: var(--os-gutter); align-content: start; min-width: 0; }
.lb-col.lb-col--8 { --span: 8; }
/* The overview's columns end together: the columns stretch to the row, the last panel of each fills what is left */
.lb-page .os-grid.lb-ovgrid { align-items: stretch; }
.lb-ovgrid > .lb-col { display: flex; flex-direction: column; }
.lb-ovgrid > .lb-col > :last-child { flex: 1 1 auto; }
.lb-brief { display: grid; gap: var(--os-gutter); }
/* A flush panel's footer stays inside it (no padding to pull back) and wraps its long lines */
.lb-page .os-panel--flush > .os-panel__foot { margin: 0; flex-wrap: wrap; }
.lb-page .os-panel__foot { flex-wrap: wrap; }
.lb-click { cursor: pointer; }
.lb-strong { font: var(--os-type-body-strong); color: var(--os-text); }
.lb-nowrap { white-space: nowrap; }
.lb-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-logpick { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-text-2); }
.lb-block { width: 100%; justify-content: center; }

/* The category groups: the chart palette's slots (operator order) */
.lb-g--equipment { --lb-c: var(--os-chart-6); }
.lb-g--process { --lb-c: var(--os-chart-1); }
.lb-g--safety { --lb-c: var(--os-chart-8); }
.lb-g--production { --lb-c: var(--os-chart-2); }
.lb-g--maintenance { --lb-c: var(--os-chart-3); }
.lb-g--other { --lb-c: var(--os-chart-other); }
.lb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--lb-c); flex: none; }
.os-swatch.lb-g--equipment, .os-swatch.lb-g--process, .os-swatch.lb-g--safety, .os-swatch.lb-g--production, .os-swatch.lb-g--maintenance, .os-swatch.lb-g--other { --c: var(--lb-c); }

/* The figures under the category chart */
.lb-stats { display: flex; flex-wrap: wrap; gap: var(--os-space-3) var(--os-space-5); margin: 0; width: 100%; }
.lb-stats > div { display: grid; gap: var(--os-space-1); padding-right: var(--os-space-5); border-right: var(--os-border-w) solid var(--os-border-subtle); }
.lb-stats > div:last-child { border-right: 0; }
.lb-stats dt { font: var(--os-type-caption); color: var(--os-text-2); }
.lb-stats dd { margin: 0; font: var(--os-type-kpi-sm); color: var(--os-text); font-variant-numeric: tabular-nums; }

/* The lists of the overview (needs attention, standing orders, my entries) */
.lb-alist { list-style: none; margin: 0; padding: 0; }
.lb-alist li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.lb-alist li:first-child { border-top: 0; }
.lb-alist li > div { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.lb-alist__title { display: flex; align-items: baseline; gap: var(--os-space-2); min-width: 0; overflow-wrap: anywhere; }
.lb-alist__title > b { min-width: 0; }
.lb-alist__age { margin-left: auto; white-space: nowrap; font: var(--os-type-body-strong); color: var(--os-text); font-variant-numeric: tabular-nums; }
.lb-alist__time { font: var(--os-type-mono); color: var(--os-text-2); padding-top: 1px; }
.lb-alist__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.lb-alist__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.lb-alist__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.lb-alist__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }

/* The shift's entries: a timeline */
.lb-tl { list-style: none; margin: 0; padding: 0; }
.lb-tl li { display: grid; grid-template-columns: 3.25rem 1.75rem minmax(0, 1fr) auto; gap: var(--os-space-3); align-items: start; padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.lb-tl li:first-child { border-top: 0; }
.lb-tl li.is-hot { background: var(--os-warn-soft); }
.lb-tl__time { font: var(--os-type-mono); color: var(--os-text-2); padding-top: 2px; font-variant-numeric: tabular-nums; }
.lb-tl__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--os-radius-pill); border: var(--os-border-w-strong) solid var(--lb-c); color: var(--os-text-2); background: var(--os-surface); }
.lb-tl__body { display: grid; gap: var(--os-space-1); min-width: 0; }
.lb-tl__title { font: var(--os-type-body-strong); color: var(--os-text); overflow-wrap: anywhere; }
.lb-tl__text { margin: 0; padding-left: var(--os-space-3); border-left: var(--os-border-w-strong) solid var(--os-border); color: var(--os-text-2); overflow-wrap: anywhere; }
.lb-tl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.lb-tl__state { white-space: nowrap; }
.lb-cat { display: inline-flex; align-items: center; gap: var(--os-space-1); font: var(--os-type-caption); color: var(--os-text-2); }
.lb-high { font: var(--os-type-caption); color: var(--os-bad-text); }
.lb-who { display: inline-flex; align-items: center; gap: var(--os-space-1); font: var(--os-type-caption); color: var(--os-text-2); white-space: nowrap; }
@media (max-width: 639.98px) {
    .lb-tl li { grid-template-columns: 3rem minmax(0, 1fr); }
    .lb-tl__icon { display: none; }
    .lb-tl__state { grid-column: 2; }
}

/* The equipment mentioned most: a bar per equipment, split by group */
.lb-eqb { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-3); }
.lb-eqb li { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) 2rem minmax(4.5rem, auto); gap: var(--os-space-3); align-items: center; }
.lb-eqb__name { display: grid; min-width: 0; }
.lb-eqb__name b { font: var(--os-type-body-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-eqb__bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--os-surface-sunken); }
.lb-eqb__bar i { display: block; height: 100%; background: var(--lb-c); }
.lb-eqb__bar i + i { border-left: 1px solid var(--os-surface); }
.lb-eqb__n { text-align: right; font-variant-numeric: tabular-nums; }
.lb-eqb__open { font: var(--os-type-caption); color: var(--os-text-2); white-space: nowrap; }
.lb-eqb__open.is-warn { color: var(--os-warn-text); }

/* Photos of an entry (V1.66): the picker of a new entry, the thumbnails, one photo large */
.lb-photopick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.lb-photopick__add { position: relative; cursor: pointer; }
.lb-photopick__error { font: var(--os-type-caption); color: var(--os-bad-text); }
.lb-photos { display: flex; flex-wrap: wrap; gap: var(--os-space-2); margin: var(--os-space-1) 0; }
.lb-thumb { position: relative; margin: 0; width: 4rem; height: 3rem; border-radius: var(--os-radius-sm); overflow: hidden; background: var(--os-surface-sunken); border: var(--os-border-w) solid var(--os-border); flex: none; }
.lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-thumb--btn { padding: 0; cursor: zoom-in; }
.lb-thumb--btn.is-open { outline: 2px solid var(--os-accent); outline-offset: 1px; }
.lb-thumb__wait { display: grid; place-items: center; width: 100%; height: 100%; color: var(--os-text-3); }
.lb-thumb__x { position: absolute; top: 0; right: 0; padding: 0; min-height: 0; background: var(--os-surface); }
.lb-photo-big { display: block; max-width: min(100%, 28rem); border-radius: var(--os-radius-md); border: var(--os-border-w) solid var(--os-border); cursor: zoom-out; margin: var(--os-space-1) 0; }

/* The handovers' table */
.lb-htable td { vertical-align: top; }
.lb-ai { display: inline-flex; align-items: center; gap: var(--os-space-1); font: var(--os-type-caption); color: var(--os-text-2); white-space: nowrap; }

/* The phone: My shift first, the overview one tap away; wider screens never show the phone's switch */
.lb-mine { display: grid; gap: var(--os-gutter); }
.lb-strip { display: flex; align-items: center; gap: var(--os-space-2); width: 100%; padding: var(--os-space-3) var(--os-space-4); border: var(--os-border-w) solid var(--os-good-border); border-radius: var(--os-radius-md); background: var(--os-good-soft); color: var(--os-good-text); font: var(--os-type-body-strong); text-align: left; cursor: pointer; }
.lb-strip span { flex: 1; }
.lb-strip.is-warn { border-color: var(--os-warn-border); background: var(--os-warn-soft); color: var(--os-warn-text); }
.lb-tosign { border-color: var(--os-bad-border); }
.lb-tosign__title { font: var(--os-type-h3); margin: var(--os-space-2) 0 var(--os-space-1); }
.lb-quick .os-field { display: grid; gap: var(--os-space-1); margin-top: var(--os-space-3); }
.lb-chips { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: center; }
.lb-more { width: auto; }
.lb-quick__foot { margin-top: var(--os-space-3); gap: var(--os-space-3); }
.lb-phone-only { display: none; }
@media (max-width: 639.98px) {
    .lb-phone-only { display: block; }
    .lb-phone-only.lb-hidden, .lb-phone-hide { display: none; }
    .lb-phone-switch .os-seg { width: 100%; }
    .lb-stats > div { border-right: 0; padding-right: 0; }
    .lb-eqb li { grid-template-columns: minmax(0, 1fr) 2rem minmax(4.5rem, auto); }
    .lb-eqb__bar { grid-column: 1 / -1; grid-row: 2; }
}