/* App builder - three panels around a live phone preview. The phone screen is light, like a real app. */

.builder { display: flex; flex-direction: column; gap: .75rem; }

.builder-topbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.builder-title .h5 { font-weight: 700; }
.builder-save-status { min-width: 9rem; }
.builder-save-status.error { color: #ff8a8a !important; }

.builder-problems { background: var(--cs-alert-warning); border: 1px solid #6b5a2a; border-radius: .5rem; padding: .75rem 1rem; }
.builder-problems ul { margin: .25rem 0 0; padding-left: 1.25rem; }
.builder-problems a { cursor: pointer; }

.builder-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .builder-grid { grid-template-columns: 200px minmax(0, 1fr); } .builder-props { grid-column: 1 / -1; } }
@media (max-width: 720px) { .builder-grid { grid-template-columns: 1fr; } }

.builder-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .75rem; padding: 1rem; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; }
@media (max-width: 1000px) { .builder-panel { position: static; max-height: none; } }
.builder-panel-title { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-text-muted); margin-bottom: .75rem; }

/* Palette */
.palette-list { display: flex; flex-direction: column; gap: .4rem; }
.palette-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .5rem .65rem; border-radius: .5rem;
                background: var(--app-surface-2); border: 1px solid var(--app-border); color: var(--app-text); cursor: grab; font-size: .9rem; }
.palette-item:hover { border-color: var(--app-accent); }
.palette-item i { color: var(--app-accent); width: 1.1rem; text-align: center; }
.palette-item .plus { margin-left: auto; color: var(--app-text-muted); }

/* Phone */
.builder-stage { display: flex; flex-direction: column; align-items: center; }

.phone-tab.selected-for-edit { box-shadow: 0 0 0 2px var(--app-accent); }
.phone-tab-add { border: 1px dashed #b7bdcc; background: transparent; color: #5b6478; border-radius: 999px; width: 1.9rem; height: 1.9rem; flex: none; }
.phone-tab-add:hover { border-color: #1d2433; color: #1d2433; }

.phone-empty { border: 2px dashed #c4c9d6; border-radius: .9rem; color: #7b8396; text-align: center; padding: 2.5rem 1rem; font-size: .85rem; }

/* A field on the phone */
.pf { position: relative; background: #ffffff; border: 1px solid #e3e6ee; border-radius: .8rem; padding: .65rem .75rem .75rem; cursor: pointer; }
.pf:hover { border-color: #b7bdcc; }
.pf.selected { border-color: #7ac70c; box-shadow: 0 0 0 3px rgba(198, 243, 107, .55); }
.pf.drop-ghost { opacity: .4; }
.pf-handle { position: absolute; right: .35rem; top: .35rem; color: #a3a9b8; cursor: grab; padding: .1rem .3rem; font-size: .9rem; }
.pf-label { font-size: .85rem; font-weight: 700; color: #1d2433; margin-bottom: .35rem; padding-right: 1.5rem; }
.pf-label .req { color: #e5484d; margin-left: .15rem; }
.pf-badge { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #eef0f5; color: #5b6478; border-radius: .3rem; padding: .05rem .35rem; margin-left: .35rem; vertical-align: middle; }
.pf-help { font-size: .75rem; color: #6b7386; margin: -.15rem 0 .4rem; }
.pf-input { background: #f7f8fb; border: 1px solid #dfe3ec; border-radius: .5rem; padding: .45rem .6rem; font-size: .8rem; color: #9aa1b2; min-height: 2.1rem; display: flex; align-items: center; gap: .4rem; }
.pf-input.tall { min-height: 4.5rem; align-items: flex-start; }
.pf-input .ms-auto { color: #9aa1b2; }
.pf-input.readonly { background: #eef0f5; }
.pf-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pf-pill { border: 1px solid #dfe3ec; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; color: #3b4458; background: #f7f8fb; }
.pf-pill.on { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-on-accent); font-weight: 600; }
.pf-checks { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: #3b4458; }
.pf-checks span::before { content: ""; display: inline-block; width: .85rem; height: .85rem; border: 1.5px solid #b7bdcc; border-radius: .2rem; margin-right: .45rem; vertical-align: -2px; }
.pf-checks span.on::before { background: var(--brand-accent); border-color: var(--brand-accent); }
.pf-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.pf-photo { aspect-ratio: 1; border: 1.5px dashed #c4c9d6; border-radius: .6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: #6b7386; font-size: .65rem; text-align: center; padding: .25rem; background: #f7f8fb; }
.pf-photo i { font-size: 1.1rem; color: #3b4458; }
.pf-photo.req { border-color: #e5a1a3; }
.pf-shots { display: flex; flex-direction: column; gap: .3rem; }
.pf-shot { display: flex; align-items: center; gap: .4rem; border: 1px solid #dfe3ec; border-left: 3px solid #dfe3ec; border-radius: .5rem; padding: .35rem .5rem; font-size: .72rem; color: #3b4458; background: #f7f8fb; }
.pf-shot.req { border-left-color: #e5a1a3; }
.pf-shot > i { color: #9aa2b4; }
.pf-shot span { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pf-shot em { font-style: normal; font-size: .6rem; text-transform: uppercase; color: #c0565a; }
.pf-shot b { width: 1.6rem; height: 1.6rem; border-radius: .4rem; background: #3b4458; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: normal; }
.pf-photo-note { font-size: .7rem; color: #6b7386; margin-top: .35rem; }
.pf-signature { height: 5rem; border: 1.5px dashed #c4c9d6; border-radius: .6rem; display: flex; align-items: flex-end; padding: .5rem .75rem; color: #9aa1b2; font-size: .75rem; background: #f7f8fb; }
.pf-signature span { border-top: 1px solid #c4c9d6; width: 100%; padding-top: .2rem; }
.pf-button { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #1d2433; border-radius: .5rem; padding: .35rem .7rem; font-size: .8rem; color: #1d2433; font-weight: 600; }
.pf-heading { font-size: 1rem; font-weight: 800; color: #1d2433; padding-right: 1.5rem; }
.pf-heading-text { font-size: .78rem; color: #5b6478; margin-top: .2rem; }
.pf.is-heading { background: transparent; border-style: dashed; }

/* Repeating section (PT-00021): a box whose questions are asked once per entry; it is also a drop zone */
.pf.is-section { background: #f1f3f8; border: 1.5px solid #c9cfdc; }
.pf-section-note { font-size: .72rem; color: #6b7386; margin: -.2rem 0 .45rem; }
.pf-children { display: flex; flex-direction: column; gap: .45rem; min-height: 3.2rem; padding: .45rem; border: 1.5px dashed #c4c9d6; border-radius: .7rem; background: #fafbfd; }
.pf-children-empty { color: #7b8396; font-size: .75rem; text-align: center; padding: .7rem .5rem; }
.pf-children .pf-handle { right: .25rem; top: .25rem; }

/* "Show if" rule and "starts with the last entry's answer" notes (PT-00036, PT-00035) */
.pf-rule { display: flex; align-items: flex-start; gap: .3rem; font-size: .7rem; color: #5a4fcf; margin: -.15rem 0 .35rem; line-height: 1.25; }
.pf-rule .bi { flex: none; }
.rule-values { max-height: 14rem; overflow-y: auto; padding: .35rem .6rem; border: 1px solid var(--app-border, #3a4152); border-radius: .5rem; }

/* Properties panel */
.props-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.props-head .props-icon { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--app-surface-2); display: flex; align-items: center; justify-content: center; color: var(--app-accent); }
.props-head .props-type { font-weight: 700; }
.props-section { border-top: 1px solid var(--app-border); padding-top: .75rem; margin-top: .75rem; }
.props-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-text-muted); margin-bottom: .5rem; }
.builder-props .form-label { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.builder-props .form-control, .builder-props .form-select { font-size: .88rem; }
.list-editor { display: flex; flex-direction: column; gap: .35rem; }
.list-row { display: flex; align-items: center; gap: .35rem; }
.list-row .grip { color: var(--app-text-muted); cursor: grab; }
.list-row .form-control { flex: 1; }
.pin-toggle { display: inline-flex; align-items: center; white-space: nowrap; }
.pin-bar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .4rem .5rem; border: 1px solid var(--app-border); border-radius: .5rem; }
.pin-bar-label { flex: 1; min-width: 8rem; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
#pDiagramUpload.disabled { opacity: .5; pointer-events: none; }
.builder-props .pd-wrap { max-width: none; }
/* PT-00040: pin on a plan - the plan in the props panel and in the phone preview */
.plan-builder-stage { border: 1px solid rgba(255,255,255,.15); border-radius: .5rem; overflow: hidden; background: #fff; }
.plan-builder-stage img, .pf-plan img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.plan-colors { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.plan-color-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin: 0; cursor: pointer; }
.plan-color-row input[type=color] { width: 2rem; height: 1.6rem; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: .3rem; background: none; }
.pf-plan { position: relative; border: 1px solid #dfe3ec; border-radius: .5rem; overflow: hidden; background: #fff; max-height: 220px; }
.pf-plan-pin { position: absolute; left: 42%; top: 46%; transform: translate(-50%, -50%); min-width: 1.3rem; height: 1.3rem; border-radius: .65rem; border: 2px solid #fff;
    background: #1F6FEB; color: #fff; font: 700 .65rem/1 system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pf-shot .pd-num { color: #3b4458; min-width: 1rem; height: 1rem; font-size: .6rem; flex: none; }
.props-id { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: var(--app-text-muted); }
.props-empty { color: var(--app-text-muted); font-size: .9rem; }

/* A required question with no answer yet, tinted with the company's "required" brand color (PT-00034). */
.pf.pf-missing { background: var(--brand-required, #FFD6E0); border-color: color-mix(in srgb, var(--brand-required, #FFD6E0), #b4233c 30%); }
.pf.pf-missing .pf-label { color: var(--brand-on-required, #111827); }

/* Scan field preview (PT-00027) */
.pf-scan { font-size: .8em; opacity: .85; white-space: nowrap; }

/* Checklist preview (PT-00022) */
.pf-checklist { display: flex; flex-direction: column; gap: 4px; }
.pf-check-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .85em; }
.pf-check-rates { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.pf-rate { border: 1px solid var(--rate-color); color: var(--rate-color); border-radius: 6px; padding: 1px 6px; font-size: .8em; font-weight: 600; }
.pf-rate.on { background: var(--rate-color); color: #fff; }

/* Example pictures (PT-00026) */
.ref-edit .ref-thumb { width: 96px; max-height: 128px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--bs-border-color); background: #fff; }