/* Free work order generator (/tools/work-order-generator,
   marketing/office_tools/work_order_generator, work_order_controller.js).
   Rules for this tool only, prefixed .ot-wo-; shared pieces are in
   ../office_tools.css. Tap targets 44px or larger; no sideways scroll at 390px. */

.ot-wo-group { display: flex; flex-direction: column; gap: 14px; }
.ot-wo-heading { font-size: 15px; font-weight: 700; color: var(--text); margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--gray-100); }
.ot-wo-heading-first { margin-top: 0; padding-top: 0; border-top: 0; }
.ot-wo-subheading { font-size: 14px; font-weight: 600; color: var(--text); margin: 4px 0 8px; }
.ot-wo-subheading .ot-optional { font-weight: 400; color: var(--text-secondary); }

.ot-wo-business { display: flex; flex-wrap: wrap; gap: 14px; }
.ot-wo-business-fields { flex: 999 1 320px; min-width: 0; }
.ot-wo-logo { flex: 1 1 160px; }
.ot-wo-logo-preview { max-width: 160px; max-height: 64px; object-fit: contain; align-self: flex-start; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; background: var(--surface); }

.ot-wo-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) {
  .ot-wo-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-wo-grid-3 > :first-child { grid-column: 1 / -1; }
}
.ot-wo-number-hint { margin-top: -10px; }

.ot-wo-trade-fields { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-secondary); }
.ot-wo-trade-check { min-height: 44px; }

.ot-wo-textarea { padding: 10px 12px; min-height: 84px; resize: vertical; line-height: 1.45; }

.ot-wo-tasks, .ot-wo-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ot-wo-task { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.ot-wo-task-done { width: 22px; height: 22px; margin: 0 auto; accent-color: var(--primary); }
.ot-wo-task:has(.ot-wo-task-done:checked) input[type="text"] { color: var(--text-secondary); }
.ot-wo-remove { width: 44px; padding: 0; color: var(--text-secondary); }
.ot-wo-add { align-self: flex-start; }

.ot-wo-part, .ot-wo-part-head { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.7fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.ot-wo-part-head { font-size: 13px; color: var(--text-secondary); padding-right: 52px; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.7fr) minmax(0, 1fr); }
.ot-wo-part-head .ot-optional { color: var(--text-light); }
.ot-wo-parts-total { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); text-align: right; }
@media (max-width: 560px) {
  .ot-wo-part-head { display: none; }
  .ot-wo-part { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 44px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); }
  .ot-wo-part-desc { grid-column: 1 / -1; }
}

.ot-wo-pad-wrap { position: relative; }
.ot-wo-pad { width: 100%; height: 150px; display: block; box-sizing: border-box; border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--surface) linear-gradient(to top, transparent 30px, var(--gray-400) 30px, var(--gray-400) 31px, transparent 31px); background-size: calc(100% - 28px) 100%; background-position: 14px 0; background-repeat: no-repeat; touch-action: none; cursor: crosshair; }
.ot-wo-pad-hint { position: absolute; left: 14px; bottom: 8px; font-size: 12px; color: var(--text-secondary); pointer-events: none; }
.ot-wo-pad-clear { position: absolute; right: 8px; top: 8px; font-size: 14px; background: var(--surface); }

.ot-wo-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; font-size: 13px; color: var(--gray-700); display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.ot-wo-summary-top { display: flex; justify-content: space-between; gap: 12px; }
.ot-wo-summary-top strong { color: var(--text); }
.ot-wo-summary-top span { flex: none; }
.ot-wo-summary-counts { border-top: 1px solid var(--gray-100); padding-top: 6px; }
.ot-wo-summary-signed { color: var(--text-secondary); }

.ot-wo-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* .ot-btn sets display, which would beat the hidden attribute. */
.ot-wo [hidden] { display: none !important; }