/* Rapido DTF gang sheet builder. Brand tokens match quote-builder.css. */
.rdtf {
  --rd-primary: var(--rapido-primary, #18723C); --rd-accent: var(--rapido-accent, #FFCC33); --rd-dark: var(--rapido-dark, #12261B);
  --rd-light: var(--rapido-light, #FBF8EC); --rd-muted: #4d5a52; --rd-line: #cfd3cc; --rd-soft: #eef4ee; --rd-err: #a32117; --rd-warn: #8a5a00;
  color: var(--rd-dark); font-size: 16px; line-height: 1.45; margin: 0 auto 80px; max-width: 1280px; padding: 0 12px; box-sizing: border-box;
}
.rdtf *, .rdtf *::before, .rdtf *::after { box-sizing: border-box; }
.rdtf [hidden] { display: none !important; }
.rdtf-loading { padding: 40px 0; text-align: center; font-weight: 600; }
.rdtf-loading.is-err { color: var(--rd-err); }
.rdtf-banner { margin: 0 0 14px; }
.rdtf-banner p { margin: 0 0 6px; padding: 10px 14px; border: 2px solid var(--rd-dark); border-radius: 12px; background: #fff3c4; font-size: 15px; }
.rdtf-note--err { color: var(--rd-err); font-weight: 600; }

.rdtf-app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.rdtf-main { min-width: 0; }
.rdtf-side { display: grid; gap: 14px; min-width: 0; }

.rdtf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rdtf-sep { width: 1px; height: 28px; background: var(--rd-line); margin: 0 4px; }
.rdtf-btn {
  appearance: none; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.1; cursor: pointer; padding: 10px 14px; min-height: 44px;
  border: 2px solid var(--rd-dark); border-radius: 12px; background: #fff; color: var(--rd-dark); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rdtf-btn:hover:not(:disabled) { background: var(--rd-soft); }
.rdtf-btn:focus-visible, .rdtf input:focus-visible, .rdtf select:focus-visible, .rdtf-canvas:focus-visible { outline: 3px solid var(--rd-primary); outline-offset: 2px; }
.rdtf-btn:disabled { opacity: .45; cursor: not-allowed; }
.rdtf-btn--pri { background: var(--rd-accent); box-shadow: 3px 3px 0 var(--rd-dark); }
.rdtf-btn--pri:hover:not(:disabled) { background: #F5BD12; }
.rdtf-btn--del { color: var(--rd-err); border-color: var(--rd-err); }
.rdtf-btn--sq { width: 44px; padding: 0; font-size: 20px; }
.rdtf-btn--sm { min-height: 34px; padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.rdtf-btn--wide { width: 100%; }
.rdtf-btn--big { font-size: 17px; min-height: 52px; margin-top: 8px; }

.rdtf-stage { position: relative; height: min(72vh, 680px); min-height: 420px; border: 2px solid var(--rd-dark); border-radius: 16px; overflow: hidden; background: #dfe4dc; box-shadow: 6px 6px 0 var(--rd-dark); }
.rdtf-stage.is-drop { outline: 4px dashed var(--rd-primary); outline-offset: -8px; }
.rdtf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; -webkit-user-select: none; user-select: none; }
.rdtf-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(255,255,255,.94); border: 2px dashed var(--rd-dark); border-radius: 16px; padding: 22px 24px; width: min(86%, 380px); display: grid; gap: 10px; justify-items: center; }
.rdtf-empty span { color: var(--rd-muted); font-size: 14px; }
.rdtf-hud { position: absolute; right: 8px; bottom: 8px; background: rgba(255,255,255,.88); border-radius: 8px; padding: 2px 8px; font-size: 12px; pointer-events: none; }
.rdtf-status { min-height: 1.4em; margin: 10px 2px 0; font-weight: 600; color: var(--rd-primary); }
.rdtf-hint { margin: 2px 2px 0; font-size: 13px; color: var(--rd-muted); }

.rdtf-card { background: #fff; border: 2px solid var(--rd-dark); border-radius: 16px; padding: 16px; box-shadow: 4px 4px 0 var(--rd-dark); }
.rdtf-card h3 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.rdtf-card h3 span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--rd-dark); color: #fff; align-items: center; justify-content: center; font-size: 14px; }
.rdtf-field { display: grid; gap: 4px; margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.rdtf-field > span { color: var(--rd-muted); }
.rdtf input[type=number], .rdtf input[type=text], .rdtf select { font: inherit; font-size: 16px; padding: 9px 10px; min-height: 44px; border: 2px solid var(--rd-dark); border-radius: 10px; background: #fff; width: 100%; color: var(--rd-dark); }
.rdtf-field--sm { max-width: 90px; margin: 0; }
.rdtf-stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.rdtf-stepper button { font-size: 20px; font-weight: 700; border: 2px solid var(--rd-dark); border-radius: 10px; background: #fff; min-height: 44px; cursor: pointer; }
.rdtf-stepper input { text-align: center; }
.rdtf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
.rdtf-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 8px 0; cursor: pointer; }
.rdtf-check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--rd-primary); margin-top: 1px; }
.rdtf-check--warn { padding: 10px; border: 2px solid #c0291b; border-radius: 10px; background: #fdecea; }
.rdtf-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: flex-end; }
.rdtf-fine { font-size: 13px; color: var(--rd-muted); margin: 6px 0; }
.rdtf-sel-name { margin: 0 0 8px; font-weight: 700; word-break: break-word; }
.rdtf-dpi { font-size: 14px; margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; border-left: 6px solid; }
.rdtf-dpi--ok { background: #e7f4ea; border-color: var(--rd-primary); }
.rdtf-dpi--warn { background: #fff3c4; border-color: #f2b705; }
.rdtf-dpi--bad { background: #fdecea; border-color: #c0291b; }
.rdtf-bg { margin-top: 10px; border-top: 1px solid var(--rd-line); padding-top: 10px; }
.rdtf-bg summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

.rdtf-lib { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.rdtf-lib li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--rd-line); border-radius: 10px; }
.rdtf-lib img { width: 44px; height: 44px; object-fit: contain; background: repeating-conic-gradient(#eef1ec 0 25%, #fff 0 50%) 0 0/10px 10px; border-radius: 6px; }
.rdtf-lib b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.rdtf-lib small { color: var(--rd-muted); font-size: 12px; }
.rdtf-lib-b { display: grid; gap: 4px; }

.rdtf-dl { margin: 0; display: grid; gap: 6px; }
.rdtf-dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--rd-line); padding-bottom: 4px; }
.rdtf-dl dt { color: var(--rd-muted); font-size: 14px; }
.rdtf-dl dd { margin: 0; font-weight: 700; text-align: right; }
.rdtf-dl-total dd { font-size: 24px; color: var(--rd-primary); }
.rdtf-warns { margin: 10px 0 0; }
.rdtf-w { margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; border-left: 6px solid; }
.rdtf-w--bad { background: #fdecea; border-color: #c0291b; }
.rdtf-w--warn { background: #fff3c4; border-color: #f2b705; }
.rdtf-w--info { background: var(--rd-soft); border-color: var(--rd-primary); }
.rdtf-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-weight: 600; background: var(--rd-soft); }
.rdtf-msg--err { background: #fdecea; color: var(--rd-err); border: 2px solid var(--rd-err); }
.rdtf-done { margin-top: 12px; padding: 12px; border: 2px solid var(--rd-primary); border-radius: 12px; background: #e7f4ea; display: grid; gap: 8px; }
.rdtf-done p { margin: 0; }
.rdtf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.rdtf-bar { display: none; }
.rdtf-busy { position: fixed; inset: 0; z-index: 100000; background: rgba(18,38,27,.55); display: flex; align-items: center; justify-content: center; }
.rdtf-busy > div { background: #fff; border: 2px solid var(--rd-dark); border-radius: 16px; padding: 22px 26px; width: min(88vw, 360px); text-align: center; box-shadow: 6px 6px 0 var(--rd-dark); }
.rdtf-busy p { margin: 8px 0 12px; font-weight: 700; }
.rdtf-prog { height: 10px; border-radius: 6px; background: var(--rd-soft); overflow: hidden; border: 1px solid var(--rd-dark); }
.rdtf-prog i { display: block; height: 100%; width: 0; background: var(--rd-primary); transition: width .2s; }
.rdtf-spin { display: inline-block; width: 28px; height: 28px; border: 4px solid var(--rd-soft); border-top-color: var(--rd-primary); border-radius: 50%; animation: rdtf-spin .8s linear infinite; }
@keyframes rdtf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rdtf-spin { animation: none; } .rdtf-prog i { transition: none; } }

@media (max-width: 960px) {
  .rdtf-app { grid-template-columns: 1fr; gap: 14px; }
  .rdtf-stage { height: 62vh; min-height: 340px; box-shadow: 4px 4px 0 var(--rd-dark); }
  .rdtf-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .rdtf-toolbar .rdtf-btn { flex: none; }
  .rdtf { margin-bottom: 110px; }
  .rdtf-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; background: #fff; border-top: 2px solid var(--rd-dark); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  }
  .rdtf-bar[hidden] { display: none !important; }
  .rdtf-bar > div { display: grid; line-height: 1.2; }
  .rdtf-bar-l { font-size: 12px; color: var(--rd-muted); }
  .rdtf-bar strong { font-size: 22px; color: var(--rd-primary); }
  .rdtf-hint { display: none; }
}

.rdtf-stepper input { min-width: 0; }
.rdtf-lib, .rdtf-lib li { list-style: none; margin-left: 0; margin-right: 0; }
.rdtf-lib { padding: 0; }
.rdtf-lib li { padding: 6px; margin-bottom: 0; }
.rdtf ul { margin-left: 0; }
.rdtf-lib > div { min-width: 0; }
.rdtf-toolbar .rdtf-btn { padding: 9px 12px; }

@media (min-width: 961px) { .rdtf-main { position: sticky; top: 10px; } }
.rdtf .rdtf-btn, .rdtf .rdtf-btn:hover, .rdtf .rdtf-btn:focus, .rdtf .rdtf-btn:active, .rdtf a.rdtf-btn:visited { color: var(--rd-dark); text-decoration: none; }
.rdtf .rdtf-btn--del, .rdtf .rdtf-btn--del:hover, .rdtf .rdtf-btn--del:focus { color: var(--rd-err); }
.rdtf .rdtf-btn:hover:not(:disabled):not(.rdtf-btn--pri) { background: var(--rd-soft); }
.rdtf .rdtf-btn--pri:hover:not(:disabled) { background: #F5BD12; }
.rdtf .rdtf-stepper button, .rdtf .rdtf-stepper button:hover, .rdtf .rdtf-stepper button:focus { color: var(--rd-dark); background: #fff; }
.rdtf .rdtf-stepper button:hover { background: var(--rd-soft); }
.rdtf .rdtf-btn:focus-visible, .rdtf .rdtf-btn:active { background: #fff; }
.rdtf .rdtf-btn--pri:focus, .rdtf .rdtf-btn--pri:active, .rdtf .rdtf-btn--pri:focus-visible { background: var(--rd-accent); }
.rdtf .rdtf-btn:focus:not(.rdtf-btn--pri):not(:hover) { background: #fff; }