/* Digital docket (/tools/digital-docket): row cards, signature pads, photos, history and the printed docket */
.dk .tool-out { align-content: start; grid-template-columns: minmax(0, 1fr); }
.dk .tool-out > *, .dk .tool-out .tw-gate-wrap, .dk .tool-out .tw-gate-blur { min-width: 0; }
.dk .tw-actions button { min-height: 44px; }
.dk-rows { display: grid; gap: 10px; }
.dk-row { border: 1.5px solid var(--concrete-2); border-radius: 12px; padding: 10px 12px 12px; background: #fafbfc; display: grid; gap: 8px; }
.dk-row-h { display: flex; align-items: center; gap: 10px; }
.dk-row-h b { font-size: .84rem; color: var(--asphalt); }
.dk-hrs { margin-left: auto; font-weight: 800; font-size: .86rem; color: var(--orange); }
.dk-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 10px; }
.dk-g > * { grid-column: span 12; min-width: 0; }
.dk-g .c2 { grid-column: span 2; } .dk-g .c3 { grid-column: span 3; } .dk-g .c4 { grid-column: span 4; } .dk-g .c6 { grid-column: span 6; } .dk-g .c8 { grid-column: span 8; }
@media (max-width: 620px) { .dk-g .m4 { grid-column: span 4; } .dk-g .m6 { grid-column: span 6; } .dk-g .m12 { grid-column: span 12; } }
.dk-g input[type="time"] { padding: 0 6px; }
@media (max-width: 620px) { .dk .row3 > :first-child { grid-column: 1 / -1; } }
.dk-x { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; border-radius: 10px; border: 1px solid var(--concrete-2); background: var(--white); color: var(--steel); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.dk-row-h span:empty + .dk-x { margin-left: auto; }
.dk-x:hover { border-color: var(--red); color: var(--red); }
.dk-mini { justify-self: start; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--concrete-2); background: var(--white); font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.dk .presets button { min-height: 40px; }

.dk-logo { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.dk-logo-prev { grid-row: span 2; width: 84px; height: 64px; border: 1.5px dashed var(--concrete-2); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: var(--white); font-size: .74rem; color: var(--steel); }
.dk-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dk-file input[type="file"] { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1.5px dashed var(--concrete-2); border-radius: 10px; background: var(--white); font: inherit; font-size: .84rem; }
.dk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.dk-photos:empty { display: none; }
.dk-photos figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--concrete); }
.dk-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-photos .dk-x { position: absolute; top: 4px; right: 4px; margin: 0; width: 34px; height: 34px; font-size: 1.1rem; background: rgba(255,255,255,.92); }

.dk-sig { display: grid; gap: 6px; }
.dk-sig-l { font-weight: 700; font-size: .9rem; color: var(--ink); }
.dk-sig canvas { display: block; width: 100%; height: 170px; border: 1.5px solid var(--concrete-2); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.dk-sig.signed canvas { border-color: #16a34a; }
.dk-sig.signed .dk-sig-l::after { content: " ✓ signed"; color: #15803d; font-weight: 800; }

/* the dark panel */
.dk-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: #e3e6ea; }
.dk-ck .tw-pill { min-width: 26px; justify-content: center; }
.dk-fine { margin: 0; font-size: .78rem; color: #aab0ba; }
.dk .tool-out .btn-block { min-height: 52px; font-size: 1.02rem; }
.dk-done { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.16); }
.dk-code { font-size: .8rem; word-break: break-all; }
.dk-prev summary { cursor: pointer; font-weight: 800; color: var(--yellow); padding: 6px 0; }
.dk-paper { margin-top: 8px; background: #fff; color: #15171b; border-radius: 12px; padding: 14px; }
.dk-hist:empty { display: none; }
.dk-hist { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.16); }
.dk-hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dk-hlist li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.dk-hlist li > div:first-child { display: grid; gap: 2px; }
.dk-hlist li span { font-size: .8rem; color: #aab0ba; }
.dk-hact { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-hact button { min-height: 40px; min-width: 44px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; border-radius: 10px; padding: 6px 11px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.dk-hact button:hover { border-color: var(--yellow); color: var(--yellow); }
.dk-hlist small:empty { display: none; }
.dk-file-dark { display: grid; gap: 6px; font-weight: 700; font-size: .86rem; color: #fff; }
.dk-file-dark input[type="file"] { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1.5px dashed rgba(255,255,255,.3); border-radius: 10px; background: rgba(255,255,255,.04); color: #e3e6ea; font: inherit; font-size: .82rem; }
.dk-flash { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1100; width: min(92vw, 460px); padding: 12px 16px; border-radius: 12px; background: var(--asphalt); color: #fff; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-lg); }

/* the docket page (preview + print) */
.dkp > * { min-width: 0; }
@media (max-width: 520px) { .dk-paper { padding: 12px 10px; } }
.dkp { display: grid; gap: 10px; font-size: .86rem; line-height: 1.4; color: #15171b; }
.dkp-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 3px solid #15171b; }
.dkp-co { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dkp-co img { max-height: 56px; max-width: 120px; object-fit: contain; }
.dkp-co b { display: block; font-size: 1.05rem; }
.dkp-co span, .dkp-ref span { display: block; font-size: .78rem; color: #4b5260; }
.dkp-ref { text-align: right; }
.dkp-ref b { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; }
.dkp-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.dkp-meta .w { grid-column: 1 / -1; }
.dkp-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #4b5260; font-weight: 700; }
.dkp-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dkp h4 { margin: 6px 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #15171b; font-family: var(--body); }
.dkp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dkp-t { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dkp-t th, .dkp-t td { border: 1px solid #c9ced6; padding: 4px 6px; text-align: left; white-space: nowrap; }
.dkp-t th { background: #f1f3f5; font-size: .7rem; text-transform: uppercase; }
.dkp-t td:first-child { white-space: normal; min-width: 90px; }
.dkp-t tfoot td { font-weight: 700; }
.dkp-notes { white-space: pre-wrap; margin: 0; }
.dkp p { margin: 0; }
.dkp-small { font-size: .78rem; color: #4b5260; }
.dkp-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dkp-photos figure { margin: 0; }
.dkp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #c9ced6; }
.dkp-photos figcaption { font-size: .66rem; color: #4b5260; }
.dkp-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .dkp-sign { grid-template-columns: 1fr; } }
.dkp-sigbox { border: 1px solid #c9ced6; border-radius: 8px; padding: 8px; display: grid; gap: 2px; }
.dkp-sigbox small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #4b5260; font-weight: 700; }
.dkp-sigbox img { width: 100%; max-height: 90px; object-fit: contain; border-bottom: 1px solid #15171b; }
.dkp-sigbox span { font-size: .76rem; color: #4b5260; }
.dkp-nosig { height: 60px; border-bottom: 1px solid #15171b; color: #9aa1ac; font-size: .78rem; display: grid; align-items: end; }
.dkp-fp { border: 1.5px solid #15171b; border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.dkp-fp code { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; word-break: break-all; font-weight: 700; }
.dkp-fp small { font-size: .7rem; color: #4b5260; }

@media print {
  #tw-print .dkp { font-size: 9.5pt; }
  #tw-print .dkp-t th, #tw-print .dkp-t td { white-space: normal; font-size: 8.5pt; }
  #tw-print .dkp-top { border-bottom: 2px solid #000 !important; }
  #tw-print .dkp-sign, #tw-print .dkp-fp, #tw-print .dkp-photos figure { break-inside: avoid; }
  #tw-print .dkp-photos { grid-template-columns: repeat(3, 1fr); }
  #tw-print .dkp-sigbox img { max-height: 70px; }
}