/*
    Report Designer form rendering for Sales - View.SalesFormRenderer.js (editable render +
    renderReadOnly), View.SalesFormsList.js, View.SalesFormFill.js, View.SalesFormView.js.
    Reuses .SalesForm/.SalesFormRow/.SalesButton/.SalesGridContainer/.SalesLeadsTable/
    .SalesEmptyState/.SalesFilterPanel/.SalesPager/.SalesDetailHeader/.SalesStatusChip from
    Components.css - only the pieces with no existing equivalent live here. See
    Sales-Forms-Design.md, section 6.4.
*/

/* ── Available forms tiles (#forms) ───────────────────────────────────────── */

.SalesFormTiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.SalesFormTile {
    flex: 1 1 220px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.SalesFormTileTitle {
    font-weight: 600;
    color: var(--text);
}

/* ── Draft status chip ─────────────────────────────────────────────────────── */
/* Reuses .SalesStatusChip's base look (Components.css) - these two stubs just colour it. */

.SalesStatusChip.SalesFormDraft {
    background: #F9A825;
    color: #fff;
    border-color: #F9A825;
}

.SalesStatusChip.SalesFormCompleted {
    background: #2E7D32;
    color: #fff;
    border-color: #2E7D32;
}

.SalesFormAttachedTick {
    color: #2E7D32;
    margin-left: 4px;
}

/* ── Form fill screen (View.SalesFormFill.js) ─────────────────────────────── */

.SalesFormFillContext {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.SalesFormFillContext .SalesCustomerPicker {
    min-width: 260px;
}

/* ── Renderer: section chrome ──────────────────────────────────────────────── */

.SalesFormRenderer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 900px;
}

.SalesFormSection {
    margin-bottom: 20px;
}

.SalesFormSection:last-child {
    margin-bottom: 0;
}

.SalesFormSectionHeading {
    font-size: 15px;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.SalesFormFieldList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
}

.SalesFormFieldList > .SalesFormRow {
    min-width: 0;
}

/* Multi-line text and Signature fields get the full row width by spanning both grid columns -
   see WIDE_FIELDS in View.SalesFormRenderer.js. Every other field type stays in its own single
   cell but its control still fills that cell's full width - see the rules below. */
.SalesFormFieldList > .SalesFormRow.SalesFormFieldWide {
    grid-column: 1 / -1;
}

/* TextSingle/Numeric wrap their <input> in a div (to make room for an optional Suffix span
   alongside it) - flexing that wrapper is what makes the input actually fill the cell, rather
   than sitting at the browser's default input width inside an unstretched block div. */
.SalesFormFieldInputWrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.SalesFormFieldInputWrap input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Date/Time/MultiChoice render their control as the row's only child, so flex stretch (the
   .SalesFormRow column-flex default) already sizes them to the row - width:100% here is just an
   explicit safety net for select, whose intrinsic sizing browsers don't always stretch reliably. */
.SalesFormFieldList .SalesFormRow select {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .SalesFormFieldList {
        grid-template-columns: 1fr;
    }
}

.SalesFormPageBreak {
    border: none;
    border-top: 2px dashed var(--border);
    margin: 20px 0;
}

/* ── Compulsory / validation ───────────────────────────────────────────────── */

.SalesFormRow.SalesFieldError input,
.SalesFormRow.SalesFieldError select,
.SalesFormRow.SalesFieldError textarea,
.SalesTableWithHeadingsCell.SalesFieldError input,
.SalesTableWithHeadingsCell.SalesFieldError select,
.SalesTableWithHeadingsCell.SalesFieldError textarea {
    border-color: var(--danger);
}

.SalesFormRow.SalesFieldError > label {
    color: var(--danger);
}

/* ── Static text field types (ReadOnly/ReadOnlyBold/FormOnly/SubHeading) ──── */

.SalesFormStaticText {
    grid-column: 1 / -1;
    padding: 6px 0;
    color: var(--text);
}

.SalesFormStaticText.Bold {
    font-weight: 700;
}

.SalesFormSubHeadingDivider {
    grid-column: 1 / -1;
    font-weight: 700;
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* ── Yes/No toggle (YesNo + TickBox) ──────────────────────────────────────── */

.SalesYesNoToggle {
    display: flex;
    gap: 8px;
    width: 100%;
}

.SalesYesNoToggle .SalesButton {
    flex: 1 1 0;
    min-width: 64px;
}

.SalesYesNoToggle .SalesButton.Active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
}

/* ── Field suffix (e.g. "kg", "%") ─────────────────────────────────────────── */

.SalesFormFieldSuffix {
    margin-left: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Signature canvas ──────────────────────────────────────────────────────── */

.SalesSignatureWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.SalesSignatureCanvas {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    touch-action: none;
    max-width: 100%;
}

/* ── Image upload ──────────────────────────────────────────────────────────── */

.SalesFormImageWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.SalesFormImagePreview {
    max-width: 240px;
    max-height: 240px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: none;
}

.SalesFormImageFileInput {
    /* The visible control is the <label class="SalesButton"> beside it - matches Mobile's own
       ReportHelper.js Image control (file-input-hidden). */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* ── TableWithHeadings ─────────────────────────────────────────────────────── */

.SalesTableWithHeadingsRows {
    overflow-x: auto;
}

.SalesTableWithHeadingsHeader,
.SalesTableWithHeadingsRow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
}

.SalesTableWithHeadingsHeader {
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.SalesTableWithHeadingsRow {
    border-bottom: 1px solid var(--border);
}

.SalesTableWithHeadingsCell input,
.SalesTableWithHeadingsCell select,
.SalesTableWithHeadingsCell textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

.SalesTableWithHeadingsRemoveCell {
    display: flex;
    align-items: flex-start;
}

.SalesTableWithHeadingsRemoveCell .SalesButton {
    padding: 4px 8px;
    font-size: 12px;
}

.SalesTableWithHeadingsAddButton {
    margin-top: 10px;
}

/* ── Read-only render (View.SalesFormRenderer.renderReadOnly) ─────────────── */

.SalesFormReadOnly {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 900px;
}

.SalesFormReadOnlyRow {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.SalesFormReadOnlyRow:last-child {
    border-bottom: none;
}

.SalesFormReadOnlyLabel {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.SalesFormReadOnlyValue {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.SalesFormReadOnlyImage {
    max-width: 320px;
    max-height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ── Forms sections on Customer/Lead detail screens ───────────────────────── */

.SalesFormsSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 8px;
}

.SalesFormsSectionHeader h3 {
    margin: 0;
}

.SalesFormsNewFormRow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.SalesFormsNewFormRow select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
}