/**
 * cf-fields.css — styles for the shared custom-form field engine
 * (public/js/cf-fields.js), loaded globally from dashboard.html so both the
 * per-form records page and the contact Records widget get them.
 *
 * The `.cf-rf-*` / `.cf-rel-*` / `.cf-cell-*` blocks are the same rules the
 * custom-forms page stylesheet carries (identical declarations, so loading
 * both changes nothing); everything from "sql69 field types" down is new and
 * lives only here.
 */

/* ── record form fields ─────────────────────────────────────────────── */

.cf-rf { grid-column: span 2; margin-bottom: 16px; }
.cf-rf-half { grid-column: span 1; }
@media (max-width: 640px) {
    .cf-rf-half { grid-column: span 2; }
}

.cf-rf label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.cf-rf label .cf-req { color: var(--danger); }

.cf-rf input[type="text"],
.cf-rf input[type="number"],
.cf-rf input[type="email"],
.cf-rf input[type="tel"],
.cf-rf input[type="url"],
.cf-rf input[type="time"],
.cf-rf input[type="date"],
.cf-rf input[type="datetime-local"],
.cf-rf select,
.cf-rf textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
.cf-rf input:focus, .cf-rf select:focus, .cf-rf textarea:focus {
    outline: none; border-color: var(--accent);
}
.cf-rf input[type="color"] {
    width: 60px; height: 38px; padding: 2px;
    background: var(--tertiary); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer;
}

.cf-rf-options {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    padding: 8px 2px;
}
.cf-rf-options label {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 400; color: var(--text);
    margin: 0; cursor: pointer;
}
.cf-rf-options input { accent-color: var(--accent); }

.cf-rf-rating { display: flex; gap: 4px; font-size: 22px; color: var(--text-dark); }
.cf-rf-rating i { cursor: pointer; transition: color 0.1s ease, transform 0.1s ease; }
.cf-rf-rating i:hover { transform: scale(1.15); }
.cf-rf-rating i.on { color: var(--warning); }

.cf-rf-map {
    height: 260px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--tertiary);
}
.cf-rf-map .leaflet-container { height: 100%; width: 100%; }
.cf-rf-gps-inputs { display: flex; gap: 10px; }
.cf-rf-gps-inputs input { flex: 1; }

.cf-rf-upload {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
}
.cf-rf-upload:hover { border-color: var(--accent); color: var(--text); }
.cf-rf-upload i { font-size: 18px; margin-right: 6px; }
.cf-rf-upload.cf-uploading { opacity: 0.6; pointer-events: none; }

.cf-rf-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cf-rf-file-chip {
    display: flex; align-items: center; gap: 8px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
    max-width: 240px;
}
.cf-rf-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-rf-file-chip .cf-chip-x { color: var(--text-dark); cursor: pointer; border: none; background: none; padding: 2px; }
.cf-rf-file-chip .cf-chip-x:hover { color: var(--danger); }

.cf-rf-thumb {
    position: relative;
    width: 84px; height: 84px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.cf-rf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-rf-thumb .cf-chip-x {
    position: absolute; top: 3px; right: 3px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    border: none; border-radius: 50%;
    width: 20px; height: 20px; font-size: 11px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* relation / contact / product pickers */
.cf-rel, .cf-prod { position: relative; }
.cf-rel-input { cursor: pointer; }
.cf-prod .cf-rel-input,
.cf-rel .cf-rel-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
.cf-rel-dropdown {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: none;
}
.cf-rel-dropdown.open { display: block; }
.cf-rel-option {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 14px;
}
.cf-rel-option:hover { background: var(--tertiary); }
.cf-rel-option.cf-rel-none { color: var(--text-dark); font-style: italic; }
.cf-rel-sub { display: block; font-size: 12px; color: var(--text-dark); margin-top: 2px; }
.cf-rel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cf-rel-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(45, 94, 229, 0.12);
    color: var(--accent);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 13px;
}
.cf-rel-tag button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; }

/* record table cell bits */
.cf-cell-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; }
.cf-cell-color { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); vertical-align: middle; }
.cf-cell-check { color: var(--success); }
.cf-cell-link { color: var(--accent); text-decoration: none; }
.cf-cell-link:hover { text-decoration: underline; }
.cf-cell-muted { color: var(--text-dark); }

/* ── sql69 field types ──────────────────────────────────────────────── */

/* status — colored pill (read-only) */
.cf-status-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
}

/* status — pill picker (editable) */
.cf-status-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.cf-status-opt {
    border: 1px solid var(--border);
    background: var(--tertiary);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s ease;
}
.cf-status-opt:hover { border-color: var(--sc); color: var(--text); }
.cf-status-opt.on {
    background: var(--scb);
    border-color: var(--sc);
    color: var(--sc);
    font-weight: 600;
}

/* product — chips in read-only cells */
.cf-prod-chip, .cf-contact-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
    max-width: 100%;
}
.cf-prod-chip i, .cf-contact-chip i { color: var(--text-dark); font-size: 11px; }
.cf-prod-chip b { color: var(--accent); font-weight: 600; }
.cf-prod-total-chip {
    display: inline-flex; align-items: center;
    background: rgba(16, 185, 129, 0.14);
    color: var(--success);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px; font-weight: 700;
    margin: 2px 0;
}

/* product — editable line list */
.cf-prod-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cf-prod-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 110px 96px 32px;
    align-items: center;
    gap: 8px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
}
.cf-prod-line .cf-prod-name {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; font-size: 13px; color: var(--text);
}
.cf-prod-line .cf-prod-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-prod-line .cf-prod-name em {
    font-style: normal; font-size: 11px; color: var(--text-dark);
    border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}
.cf-prod-line input {
    width: 100%;
    padding: 6px 8px !important;
    font-size: 13px !important;
    background: var(--secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text);
}
.cf-prod-line-total { font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: right; }
.cf-prod-del {
    background: none; border: none; color: var(--text-dark);
    cursor: pointer; padding: 4px; font-size: 13px;
}
.cf-prod-del:hover { color: var(--danger); }
.cf-prod-sum {
    display: flex; justify-content: flex-end; align-items: baseline; gap: 10px;
    margin-top: 10px; font-size: 14px;
}
.cf-prod-sum span { color: var(--text-muted); }
.cf-prod-sum b { color: var(--success); font-size: 16px; }

@media (max-width: 640px) {
    .cf-prod-line { grid-template-columns: minmax(0, 1fr) 70px 32px; }
    .cf-prod-line .cf-prod-price, .cf-prod-line-total { display: none; }
}

/* ── record comment thread (sql69) ──────────────────────────────────── */

.cf-comments {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 260px; overflow-y: auto;
    padding: 4px 2px;
}
.cf-comment-empty { color: var(--text-dark); font-size: 13px; font-style: italic; padding: 6px 0; }
.cf-comment {
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
}
.cf-comment-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--text-dark); margin-bottom: 4px;
}
.cf-comment-head b { color: var(--text-muted); font-size: 12px; }
.cf-comment-head span { flex: 1; }
.cf-comment-del {
    background: none; border: none; color: var(--text-dark);
    cursor: pointer; padding: 0 2px; font-size: 12px;
}
.cf-comment-del:hover { color: var(--danger); }
.cf-comment-body { font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; }

.cf-comment-add { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.cf-comment-add textarea {
    flex: 1;
    padding: 9px 12px;
    background: var(--tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px; font-family: inherit;
    resize: vertical;
}
.cf-comment-add textarea:focus { outline: none; border-color: var(--accent); }
.cf-comment-add button { flex-shrink: 0; height: 40px; }