/* Fișă de lucru styles added after style.css grew large: the `× 10ˣ` box of a typed count, results that come
   from the readings (shown, not typed), required fields still empty (red, `missing.rs`), and the fișă's photos with the webcam dialog. Linked from index.html after style.css. Prints: boxes lose their frames. Also the phone layout of the fișă and
   „Fișa completă a probei”. */

.pow { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.pow-m { width: 4.2rem; text-align: right; }
.pow-x { font-family: var(--font-mono); font-size: .95rem; }
.pow-e { width: 3.4rem; font-size: .8rem; padding: .15rem .3rem; position: relative; top: -.55em; }
.pow-step { display: inline-flex; flex-direction: column; gap: 1px; align-self: center; }
.pow-btn { padding: 0 .35rem; min-height: 0; line-height: 1.05; font-size: .62rem; border-radius: 4px; }
.from-readings { font-weight: 600; }
.from-readings::after { content: " (din citiri)"; font-weight: 400; font-size: .78em; color: var(--muted); }

/* Poze (dovadă vizuală) on a fișă (`pages/work/photos.rs`) and the webcam dialog (`camera.rs`). */
.ws-photos { margin-top: 1rem; }
.ws-photos h3 { margin: 0; }
.ws-photos button .icon { width: 1.1em; height: 1.1em; margin-right: .35rem; vertical-align: -.15em; }
.ws-photo-strip { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.ws-photo-strip figure { position: relative; margin: 0; width: 180px; }
.ws-photo-strip img { width: 180px; height: 135px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.ws-photo-strip figcaption { margin-top: .2rem; color: var(--muted); }
.ws-photo-strip .icon-btn { position: absolute; top: .25rem; right: .25rem; padding: .1rem .45rem; line-height: 1; background: var(--surface-solid); }
.modal.webcam { width: min(900px, calc(100vw - 1.5rem)); }
.webcam-view { background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; min-height: 240px; }
.webcam-view video, .webcam-view img { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.webcam-view video.hidden { display: none; }
@media print {
    .ws-photos.empty { display: none; }
    .ws-photo-strip figure { break-inside: avoid; width: 48%; }
    .ws-photo-strip img { width: 100%; height: auto; max-height: 9cm; object-fit: contain; }
    .pow-e { top: -.5em; }
    .pow input { border: 0; background: none; }
    .from-readings::after { content: ""; }
}

/* The samples table has five columns: `table.doc.fields th { width: 26% }` (made for two-column tables) would ask
   for 130%, which pushed it out of the card on a phone. */
table.ws-samples th { width: auto; }

/* „Fișa completă a probei” (`pages/work/combined.rs`): the sample's fișe one under the other. */
.combined-sheets .worksheet + .worksheet { margin-top: 1.5rem; }
.combined-messages { list-style: none; margin: 0; padding: 0; }
.combined-messages li { margin: .15rem 0; }
.combined-open { margin-top: .35rem; }

/* Phone: the fișă fits the screen. The samples table turns into one small card per sample; the wide tables
   (controls, stages, readings, results) scroll sideways inside the fișă instead of spilling out of it. */
@media screen and (max-width: 720px) {
    .ws-sheet .letterhead { flex-direction: column; gap: .4rem; }
    .ws-sheet .letterhead .right { text-align: left; }
    table.ws-samples thead { display: none; }
    table.ws-samples, table.ws-samples tbody, table.ws-samples tr, table.ws-samples td { display: block; width: 100%; }
    table.ws-samples tr { border: 1px solid #000; margin-bottom: .4rem; }
    table.ws-samples td { border: 0; border-bottom: 1px solid #d0d5dd; display: flex; gap: .6rem; }
    table.ws-samples td:last-child { border-bottom: 0; }
    table.ws-samples td::before { content: attr(data-label); flex: 0 0 42%; font-weight: 600; font-family: var(--font); }
    .ws-sheet table:not(.ws-samples) { display: block; max-width: 100%; overflow-x: auto; }
    .ws-sheet .doc-grid { grid-template-columns: 1fr; }
    .actions.sticky .row > button { flex: 1 1 0; padding-left: .6rem; padding-right: .6rem; }
}
@media print {
    .combined-sheets .worksheet + .worksheet { margin-top: 0; break-before: page; }
}

/* What is still missing on an open fișă (`pages/work/missing.rs`), only on `.ws-checking` (open, not the editor
   preview): empty required boxes are `:invalid` (HTML `required`), rows without a result are `tr.row-missing`.
   The red goes away as soon as the box is filled. The fișă itself is always black on white, so one red fits every
   theme; prints drop the marks. */
.ws-checking .ws-sheet :is(input, select, textarea):required:invalid:not(:disabled) {
    border-color: #b42318 !important; background-color: #fff1f0 !important; box-shadow: 0 0 0 1px #b42318;
}
.ws-checking .ws-sheet input[type=checkbox]:required:invalid:not(:disabled) { outline: 2px solid #b42318; outline-offset: 1px; }
.ws-checking .ws-sheet tr.row-missing > td:first-child { box-shadow: inset 4px 0 0 #b42318; color: #b42318; font-weight: 600; }
.ws-checking .ws-sheet .ws-todo::after { content: " de completat"; color: #b42318; font-size: .85em; }
.missing-note { margin: 0 0 .4rem; color: var(--danger); font-weight: 600; }
.missing-note button.link { font-weight: 600; }
@media print {
    .ws-checking .ws-sheet :is(input, select, textarea):required:invalid:not(:disabled) {
        border-color: #000 !important; background-color: transparent !important; box-shadow: none;
    }
    .ws-checking .ws-sheet input[type=checkbox]:required:invalid { outline: 0; }
    .ws-checking .ws-sheet tr.row-missing > td:first-child { box-shadow: none; color: #000; font-weight: inherit; }
    .ws-checking .ws-sheet .ws-todo::after { content: ""; }
    .missing-note { display: none; }
}
/* „Proba următoare” after closing a fișă (pages/lucru/next.rs): big rows, easy to hit with gloves on. */
.modal.next-sample { width: min(760px, calc(100vw - 1.5rem)); display: grid; gap: .8rem; }
.next-sample-search { font-size: 1.25rem; padding: .8rem 1rem; width: 100%; }
.next-sample-list { display: grid; gap: .45rem; max-height: 55vh; overflow: auto; }
.next-sample-row {
    display: grid; grid-template-columns: minmax(7rem, auto) 1fr auto; align-items: center; gap: .9rem;
    width: 100%; padding: .85rem 1rem; text-align: left; font-size: 1.1rem; min-height: 3.4rem;
}
.next-sample-name { display: grid; gap: .15rem; min-width: 0; }
.next-sample-name strong, .next-sample-name small { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { .next-sample-row { grid-template-columns: 1fr; gap: .3rem; } }
/* „Determinarea 2?” over the readings of a chemistry fișă (pages/work/second.rs); never printed. */
.ws-second { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .7rem; font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.ws-second input { width: 1.35rem; height: 1.35rem; }