/*
    Login dialog, confirm dialog, buttons, notification text - the modal chrome View.Login.js and
    View.ConfirmDialog.js need. Grows in step 4 with the leads grid/forms.
*/

#GreyOut {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.ModalDialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 201;
    width: 90%;
    max-width: 360px;
    padding: 0;
}

.SectionHeading {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.SectionHeading h2 {
    margin: 0;
    font-size: 16px;
}

#LoginContent,
#ConfirmDialogContent {
    padding: 20px;
}

.LoginFormElement {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: var(--text-muted);
}

.LoginFormElementControl {
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

input.LoginFormElementControl[type="button"] {
    background: var(--brand);
    color: var(--text-on-brand);
    border: none;
    cursor: pointer;
    font-weight: 600;
}

input.LoginFormElementControl[type="button"]:hover {
    background: var(--brand-hover);
}

label#LoginScreenStatus {
    color: var(--danger);
    font-size: 13px;
    min-height: 16px;
    display: block;
}

/* ── Confirm dialog ────────────────────────────────────────────────────────── */

#ConfirmDialogScreen #ConfirmDialogHeading {
    margin: 0 0 8px;
    font-size: 16px;
}

#ConfirmDialogScreen #ConfirmDialogText {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 14px;
}

#ConfirmDialogInputRow {
    display: none;
    margin-bottom: 14px;
}

#ConfirmDialogInput {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
}

#ConfirmDialogInputError {
    display: none;
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
}

#ConfirmDialogButtons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.SalesButton {
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.SalesButton:hover {
    background: var(--surface-2);
}

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

.SalesButton.Primary:hover {
    background: var(--brand-hover);
}

/* ── Fly-in customer drawer (create/edit lead screens) ────────────────────── */

.SalesCustomerDrawerToggle {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow);
}

.SalesCustomerDrawerToggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.SalesCustomerDrawerToggle:disabled:hover {
    background: var(--surface);
}

.SalesCustomerDrawerScrim {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 150;
}

.SalesCustomerDrawerScrim.Open {
    display: block;
}

.SalesCustomerDrawer {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    /* width is set inline (View.SalesCustomerDrawer.js) - user-resizable, persisted to
       localStorage. This is only the pre-JS/fallback value. */
    width: 748px;
    max-width: 90vw;
    background: var(--page-bg);
    box-shadow: var(--shadow-lg);
    z-index: 151;
    /* No overflow/scrolling here - only .SalesCustomerDrawerContent (below) scrolls, so the resize
       handle (a sibling of it, not a child) stays fixed in the middle of the screen regardless of
       how far the customer record inside is scrolled. */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.SalesCustomerDrawer.Open {
    transform: translateX(0);
}

.SalesCustomerDrawer.Resizing {
    /* No transform/width transition while actively dragging - it fights the drag and lags the cursor. */
    transition: none;
    user-select: none;
}

.SalesCustomerDrawerResizeHandle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18px;
    cursor: ew-resize;
    background: transparent;
    /* Stops the browser's own touch-scroll/pan gesture from fighting the drag on tablets - the
       JS drives the resize entirely off touchmove instead. */
    touch-action: none;
    z-index: 2;
}

.SalesCustomerDrawerResizeHandle:hover,
.SalesCustomerDrawer.Resizing .SalesCustomerDrawerResizeHandle {
    background: rgba(25, 118, 210, 0.08);
}

/* Grab icon fixed halfway down the handle - see the handle's own doc comment (View.SalesCustomerDrawer.js) for why this needs to be visible rather than hover-only. */
.SalesCustomerDrawerResizeGrip {
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 16px;
    height: 64px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.SalesCustomerDrawerResizeHandle:hover .SalesCustomerDrawerResizeGrip,
.SalesCustomerDrawer.Resizing .SalesCustomerDrawerResizeGrip {
    color: var(--brand);
    border-color: var(--brand);
}

.SalesCustomerDrawerContent {
    /* The one scrolling pane inside the drawer - see .SalesCustomerDrawer's own comment on why
       overflow lives here and not on the drawer itself. */
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 20px 20px 26px;
}

.SalesCustomerDrawerContent .SalesForm {
    grid-template-columns: 1fr;
}

.SalesCustomerDrawer.TwoColumn .SalesCustomerDrawerContent .SalesForm {
    /* Toggled by width, not a viewport media query - the drawer's own width (View.SalesCustomerDrawer.js's
       TWO_COLUMN_MIN_WIDTH), not the page's, is what determines whether two columns actually fit. */
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1100px) {
    /* Would otherwise sit on top of the leads-list pager/hamburger drawer on narrow screens - the
       customer drawer is a desktop-workflow convenience (see .SalesFormRow's own responsive
       collapse), and the left nav's own overlay drawer already owns this breakpoint. */
    .SalesCustomerDrawerToggle {
        display: none;
    }
}

/* ── Recent Activity fly-in (View.SalesCustomerActivityDrawer.js) ────────────
   Same fly-in-from-the-right/resize chrome as .SalesCustomerDrawer (including reusing its
   .SalesCustomerDrawerResizeHandle/Grip rules directly - see that file's own comment on why),
   just a higher z-index so it stacks visibly on top when opened from inside that drawer - both
   share View.SalesCustomerDetail.js's renderHeader. */

.SalesActivityDrawerScrim {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 160;
}

.SalesActivityDrawerScrim.Open {
    display: block;
}

.SalesCustomerActivityDrawer {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    /* width is set inline (View.SalesCustomerActivityDrawer.js) - user-resizable, defaults to
       half the viewport, persisted to its own localStorage key. This is only the pre-JS value. */
    width: 50vw;
    max-width: 90vw;
    background: var(--page-bg);
    box-shadow: var(--shadow-lg);
    z-index: 161;
    /* No overflow/scrolling here - only .SalesCustomerDrawerContent scrolls, same reasoning as
       .SalesCustomerDrawer's own comment (keeps the resize handle fixed in place). */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.SalesCustomerActivityDrawer.Open {
    transform: translateX(0);
}

.SalesCustomerActivityDrawer.Resizing {
    transition: none;
    user-select: none;
}

/* The header here is a direct child of the drawer, not of the padded .SalesCustomerDrawerContent
   pane below it (kept outside so it stays put while the timeline scrolls) - so it needs its own
   padding rather than inheriting the content pane's, matching that pane's own left/top spacing
   (26px/20px - see .SalesCustomerDrawerContent) so the heading lines up with the timeline below it
   instead of sitting flush against the drawer's edge. */
.SalesCustomerActivityDrawer > .SalesDetailHeader {
    padding: 20px 20px 0 26px;
    margin-bottom: 12px;
}

/* ── Customer overview: account details card + 12-month activity chart, side by side ─────────
   .SalesForm is capped at 900px, which left a lot of dead space to its right on a wide screen -
   the chart fills it. Falls back to stacked below 1400px, where two columns would squeeze both. */

.SalesCustomerOverview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.SalesCustomerOverview > .SalesForm {
    flex: 1 1 480px;
    margin-bottom: 0;
}

.SalesCustomerChartPanel {
    flex: 1 1 420px;
    min-width: 0; /* flex items default to min-width:auto - without this the canvas can't shrink */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.SalesCustomerChartContainer {
    position: relative;
    height: 260px;
}

/* Pills on the left, Expand on the right. Wraps rather than squashing the Expand button off the
   edge when the panel is narrow (it shares a row with three pills). */
.SalesCustomerChartHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.SalesCustomerChartHeader .SalesActivityFilterPills {
    margin-bottom: 0;
}

.SalesChartExpandButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Expanded chart modal ────────────────────────────────────────────────────
   5% inset all round (so 90% x 90% of the viewport), for reading the chart on a tablet. Sits
   above both fly-in drawers (z-index 161) so it can be opened from the customer drawer too. */

.SalesChartModalScrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.SalesChartModal {
    position: fixed;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    z-index: 201;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 20px;
}

.SalesChartModalHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.SalesChartModalHeader h2 {
    margin: 0;
    margin-right: auto; /* pushes the pills + Close to the right, title stays left */
}

.SalesChartModalHeader .SalesActivityFilterPills {
    margin-bottom: 0;
}

/* min-height:0 is what lets this flex child actually shrink to the dialog's height - without it
   the canvas grows unbounded and pushes the dialog past its 5% inset. */
.SalesChartModalBody {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* LEAD/JOB/INVOICE filter pills - shared by the Recent Activity fly-in's timeline and the
   customer overview chart. All active by default; toggling re-filters client-side, no re-fetch. */
.SalesActivityFilterPills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* The chart's own pills additionally get their series colour painted on inline when active (see
   renderActivityChart's `paint`), so they act as the chart's legend - nothing needed here for
   that beyond the base pill styling below. */

.SalesActivityFilterPill {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.SalesActivityFilterPill:hover {
    border-color: var(--brand);
}

.SalesActivityFilterPill.Active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.SalesActivityTimeline {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.SalesActivityTimelineItem {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

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

.SalesActivityTimelineIcon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Left column: title + date/detail - grows to fill whatever the right column (type + $) doesn't need. */
.SalesActivityTimelineMain {
    min-width: 0;
    flex: 1 1 auto;
}

.SalesActivityTimelineTitle {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SalesActivityTimelineTitle a {
    color: var(--brand);
    text-decoration: none;
}

.SalesActivityTimelineTitle a:hover {
    text-decoration: underline;
}

.SalesActivityTimelineMeta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Right column: LEAD/JOB/INVOICE label with its $ value directly beneath - kept as its own
   fixed-width column (not inline with the title) specifically so the amount is easy to scan down
   the whole list, per the user's own ask. */
.SalesActivityTimelineAside {
    flex: 0 0 auto;
    text-align: right;
}

.SalesActivityTimelineType {
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.SalesActivityTimelineAmount {
    margin-top: 2px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

/* ── Notification bar text ────────────────────────────────────────────────── */

#NotificationContent {
    display: none;
    font-size: 13px;
}

/* ── Generic placeholder panel content (step 3 stubs) ─────────────────────── */

.SalesView h2 {
    margin-top: 0;
    font-size: 20px;
}

.SalesView p {
    color: var(--text-muted);
}

/* ── Status chips (grid cell + filter row) ────────────────────────────────── */
/* Stub class names come from SalesLeadWebServices.AvailableStatusOptions() - one per
   SalesLeadStatus value. Lost/Sold/OnHold carry meaning (see CLAUDE.md's Mobile theming note on
   not darkening/neutralising colours that convey status); every other status is neutral. */

.SalesStatusChip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-2);
}

.SalesStatusChip.sales-lead-status-lost {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.SalesStatusChip.sales-lead-status-sold {
    background: #2E7D32;
    color: #fff;
    border-color: #2E7D32;
}

.SalesStatusChip.sales-lead-status-on-hold {
    background: #F9A825;
    color: #fff;
    border-color: #F9A825;
}

/* ── Tasks (View.SalesTasksList/Create/Detail) ─────────────────────────────── */

/* Task status chips reuse .SalesStatusChip's base; these stubs colour the non-neutral states.
   Pending keeps the base muted look deliberately - it's the resting state. */
.SalesStatusChip.sales-task-status-in-progress {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.SalesStatusChip.sales-task-status-waiting {
    background: #F9A825;
    color: #fff;
    border-color: #F9A825;
}

.SalesStatusChip.sales-task-status-done {
    background: #2E7D32;
    color: #fff;
    border-color: #2E7D32;
}

.SalesTaskFilterRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.SalesTaskFilterRow .SalesActivityFilterPills {
    margin-bottom: 0;
}

.SalesTaskDateFilter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

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

.SalesTaskGroupHeading {
    margin: 20px 0 8px;
}

.SalesTaskGroupHeading.Overdue {
    color: var(--danger);
}

.SalesTaskRepeatBadge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Row-level status select - smaller than a form select, and visually quiet until used. */
.SalesTaskStatusSelect {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
}

/* "every [N] [unit]" inline control group on the create/detail forms. */
.SalesTaskRepeatDetail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.SalesTaskRepeatDetail .SalesTaskRepeatFrequency {
    width: 70px;
}

.SalesChipRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.SalesStatusChipFilter {
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}

.SalesStatusChipFilter:hover {
    background: var(--surface-2);
}

.SalesStatusChipFilter.Active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
    font-weight: 600;
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */

.SalesGridContainer {
    /* Own scroll container, never the page (see Sales-Port-Spec.md, section 11.2/8.4) */
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.SalesLeadsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.SalesLeadsTable th,
.SalesLeadsTable td {
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.SalesLeadsTable th {
    background: var(--surface-2);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.SalesLeadsTable th.Sortable {
    cursor: pointer;
    user-select: none;
}

.SalesLeadsTable th.Sortable:hover {
    color: var(--text);
}

.SalesLeadsTable th .fa {
    margin-left: 4px;
}

/* Only rows with a real navigation (View.SalesLeadsTable's onRowClick, View.SalesCustomersList's
   row click) carry .SalesRowClickable - a read-only table (e.g. the customer detail screen's ERP
   Jobs list) gets no hover affordance, since it isn't actually clickable. Light blue, not the
   neutral --surface-2 used elsewhere, so a clickable row reads as distinctly interactive. */
.SalesLeadsTable tbody tr.SalesRowClickable:hover {
    background: rgba(25, 118, 210, 0.08);
    cursor: pointer;
}

.SalesEmptyState {
    text-align: center;
    color: var(--text-muted);
    padding: 24px !important;
}

/* ── Expandable job row (customer-level and per-item Jobs lists) ─────────── */

.SalesJobDetailRow > td,
.SalesInvoiceDetailRow > td {
    background: var(--surface-2);
    padding: 4px 16px 16px !important;
    border-top: none;
}

.SalesJobDetailRow .SalesForm {
    grid-template-columns: 1fr 1fr;
    border: none;
    background: transparent;
    padding: 0;
    max-width: none;
}

.SalesJobDescriptionRow {
    /* Spans both of the form's own columns, not the 2-cell label/value split every other row
       uses - a job description running to multiple lines/numbered points reads poorly squeezed
       into a half-width column. */
    grid-column: 1 / -1;
}

.SalesJobDescriptionValue {
    /* Preserves the description's own line breaks/spacing (white-space: normal, the default,
       collapses them) while still wrapping long lines and never exceeding the row's own width -
       max-width: 100% + overflow-wrap stop a single long unbroken line from pushing the table wider
       than its container. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 100%;
}

.SalesJobMemoList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.SalesJobMemoList li {
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    font-size: 13px;
}

.SalesJobTransactions {
    margin-top: 12px;
}

.SalesTransactionLinesTotal {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 16px;
    border-top: 2px solid var(--border);
    font-size: 14px;
}

/* Contacts list on the /Customer/ detail view (above the Customer Item section) - static, not
   expandable like .SalesCustomerItemsList's rows, so no caret/click affordance. */
.SalesContactsList {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.SalesContactsList > li {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
}

.SalesContactsList > li:last-child {
    border-bottom: none;
}

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

.SalesContactPosition {
    color: var(--text-muted);
    margin-left: 6px;
}

.SalesContactMeta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.SalesCustomerItemsList {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.SalesCustomerItemsList > li {
    border-bottom: 1px solid var(--border);
}

.SalesCustomerItemsList > li:last-child {
    border-bottom: none;
}

/* Clickable row - expands/collapses .SalesCustomerItemDetail below it (leads/jobs referencing
   this specific item, not just the customer as a whole). */
.SalesCustomerItemSummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
}

.SalesCustomerItemSummary:hover {
    background: var(--surface-2);
}

.SalesCustomerItemCaret {
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.SalesCustomerItemRow.Expanded .SalesCustomerItemCaret {
    transform: rotate(180deg);
}

.SalesCustomerItemDetail {
    padding: 4px 16px 16px 28px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

.SalesCustomerItemDetail h4 {
    font-size: 13px;
    color: var(--text-muted);
    margin: 12px 0 6px;
}

.SalesCustomerItemDetail h4:first-child {
    margin-top: 4px;
}

.SalesRowActions {
    white-space: nowrap;
}

.SalesRowActions .SalesButton {
    padding: 4px 10px;
    margin-right: 4px;
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */

.SalesPager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.SalesPagerLabel {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 8px;
}

/* ── Detail header (lead detail screen) ───────────────────────────────────── */

.SalesDetailHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.SalesDetailHeader h2 {
    margin: 0;
}

.SalesDetailSubheading {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: -8px;
    margin-bottom: 16px;
}

/* ── Forms (lead detail/create, add-activity) ─────────────────────────────── */
/* Two columns >=1100px, one column below it - see Sales-Port-Spec.md, section 11.2 (step 4.6). */

.SalesForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 900px;
}

/* Grid items default to min-width:auto, so a <select> with one very long option (a tenant's own
   long division/location/status name, no fixed length) can force its whole 1fr column wider than
   its fair share, squeezing the sibling column - "grid blowout". min-width:0 lets the column
   shrink to its track size and the <select> itself truncate/scroll instead. */
.SalesForm > .SalesFormRow {
    min-width: 0;
}

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

.SalesFormRow {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

.SalesFormRow label {
    margin-bottom: 4px;
}

.SalesFormRow input[type="text"],
.SalesFormRow input[type="email"],
.SalesFormRow input[type="number"],
.SalesFormRow input[type="date"],
.SalesFormRow input[type="time"],
.SalesFormRow select,
.SalesFormRow textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

.SalesFormRow input:focus,
.SalesFormRow select:focus,
.SalesFormRow textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.SalesFormRow input[type="checkbox"] {
    width: 18px;
    height: 18px;
    align-self: flex-start;
}

.SalesCharCounter {
    font-size: 11px;
    text-align: right;
    margin-top: 4px;
}

.SalesFormButtons {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.SalesFormButtons a.SalesButton {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* ── Collapsible "Show More" fields (create lead) ─────────────────────────── */

.SalesShowMoreToggle {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 6px;
}

/* display:contents (not none/block) so its .SalesFormRow children keep participating directly in
   .SalesForm's own grid once expanded, instead of being laid out inside a nested one-column box. */
.SalesFormMoreFields {
    display: none;
}

.SalesFormMoreFields.Expanded {
    display: contents;
}

/* Customer Name/Contact Name/Phone/Email on the create-lead form (View.SalesLeadCreate.js) -
   same display:none/display:contents toggle as .SalesFormMoreFields above, but driven by the
   customer picker's own state (an ERP pick, or "enter customer details manually") rather than
   the Show More button, so these fields surface right under Customer as soon as there's a
   customer context for them, instead of needing a separate click. */
.SalesCustomerDetailsFields {
    display: none;
}

.SalesCustomerDetailsFields.Expanded {
    display: contents;
}

.SalesFormRow.SpanTwo {
    grid-column: 1 / -1;
}

/* Delivery Address's "copy from customer" buttons (create/detail lead screens) - sits directly
   under the textarea, same row. Buttons hide individually per-address when that ERP address is
   blank (see populateContactContext in both views), so this stays a plain flex row rather than a
   fixed two-button grid. */
.SalesAddressCopyButtons {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.SalesAddressCopyButtons .SalesButton {
    padding: 6px 12px;
    font-size: 12px;
}

/* Job Name on the create-lead form - a taller single-line input, same visual weight as the
   textarea fields around it (Work Required is rows:6; a plain <input> has no "rows" attribute,
   so the height is set directly). ~50% taller than the ~35px a default input renders at. */
.SalesFormRow input.SalesTallInput {
    height: 52px;
}

/* ── Activity trail ────────────────────────────────────────────────────────── */

.SalesActivityTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.SalesActivityTable th,
.SalesActivityTable td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.SalesActivityTable th {
    background: var(--surface-2);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.SalesYesNo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.SalesYesNo.Yes {
    background: #2E7D32;
    color: #fff;
}

.SalesYesNo.No {
    background: #F9A825;
    color: #fff;
}

/* ── Customer picker (create lead) ────────────────────────────────────────── */

.SalesCustomerPicker {
    position: relative;
}

.SalesCustomerPicker input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

.SalesCustomerPickerResults {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-top: 2px;
}

.SalesCustomerPickerResultRow {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

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

.SalesCustomerPickerResultRow:hover {
    background: var(--surface-2);
}

.SalesCustomerPickerLocked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 14px;
}

.SalesCustomerPickerManualLink {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--brand);
}

/* ── Product picker (quote lines) - reuses .SalesCustomerPickerResults/ResultRow above ──────── */

.SalesProductPicker {
    position: relative;
    max-width: 480px;
    margin-bottom: 12px;
}

.SalesProductPicker input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

/* ── Quote lines table + totals ───────────────────────────────────────────── */

.SalesQuoteLinesSection {
    margin-top: 24px;
}

.SalesQuoteLinesTable input {
    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);
}

.SalesQuoteLineDescription {
    min-width: 160px;
}

.SalesQuoteLineQty,
.SalesQuoteLineDiscount,
.SalesQuoteLineGst {
    width: 60px;
}

.SalesQuoteLineUnit {
    width: 70px;
}

.SalesQuoteLineUnitPrice {
    width: 90px;
}

.SalesQuoteLineTotal {
    font-weight: 600;
    white-space: nowrap;
}

.SalesQuoteTotalsRow {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.SalesQuoteTotals {
    text-align: right;
    font-size: 14px;
    color: var(--text);
}

.SalesQuoteTotals > div {
    margin-bottom: 4px;
}

.SalesQuoteTotalsGrandTotal {
    font-size: 18px;
    font-weight: 700;
}

.SalesQuoteErpTotal {
    color: var(--text-muted, var(--text));
    font-size: 13px;
}

/* ── Dashboard filter panel ───────────────────────────────────────────────── */
/* Reuses .SalesForm's grid/input styling (see the Forms section above) - just a narrower row height
   since every field here is a dropdown/date/radio group, never a textarea. */

.SalesFilterPanel {
    margin-bottom: 20px;
}

.SalesFilterPanel .SalesFormRow {
    margin-bottom: 10px;
}

.SalesRadioGroup {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 6px;
}

.SalesRadioGroup input[type="radio"] {
    margin-right: 4px;
}

.SalesRadioGroup label {
    font-size: 14px;
    color: var(--text);
    margin: 0;
}

/* ── KPI tiles ─────────────────────────────────────────────────────────────── */

.SalesKpiRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.SalesKpiTile {
    flex: 1 1 140px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.SalesKpiValue {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-ink);
}

.SalesKpiLabel {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 4px;
}

/* ── Dashboard filter row + upcoming-tasks widget ─────────────────────────────
   The filter column and the widget share one flex row, 2:1 (2/3 filters, 1/3 tasks) via matching
   flex-basis:0 + flex-grow ratios - align-items' default (stretch) is what makes the widget match
   the filter panel's height with no explicit height needed. Stacks below 900px, same breakpoint
   as the chart row, since there's no room for both side by side. */

.SalesDashboardTopRow {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.SalesDashboardFilterColumn {
    flex: 2 1 0;
    min-width: 0;
}

.SalesDashboardFilterColumn .SalesFilterPanel {
    margin-bottom: 0;
    height: 100%;
    /* Overrides .SalesForm's 900px cap - that cap exists for readable text-field widths on a
       lead/customer detail form, not for a proportionally-sized dashboard column. */
    max-width: none;
}

/* Bare flex item, no padding/border of its own - some browsers skew flex-grow's 2:1 distribution
   when the item itself carries padding/border, even with box-sizing:border-box and min-width:0.
   The card's visual chrome lives on .SalesUpcomingTasksCard instead, same "padding lives on a
   child, not the flex item" shape as .SalesDashboardFilterColumn/.SalesFilterPanel above. */
.SalesUpcomingTasksWidget {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.SalesUpcomingTasksCard {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 16px 12px;
}

.SalesUpcomingTasksHeader {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* Extra-specific selector (not just ".SalesUpcomingTasksHeader h3") - needed to beat ".SalesView
   h3"'s own margin/font-size reset further down this file, which has equal specificity and would
   otherwise win on source order alone, putting its 24px top margin back above this heading. */
.SalesUpcomingTasksWidget .SalesUpcomingTasksHeader h3 {
    margin: 0;
    font-size: 14px;
}

.SalesUpcomingTasksHeader a {
    font-size: 12px;
}

.SalesUpcomingTasksList {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.SalesUpcomingTaskRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: var(--radius);
    cursor: pointer;
}

.SalesUpcomingTaskRow:hover {
    background: var(--surface-2);
}

.SalesUpcomingTaskDue {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-muted);
}

.SalesUpcomingTaskDue.Overdue {
    color: var(--danger);
    font-weight: 600;
}

.SalesUpcomingTaskTitle {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SalesUpcomingTaskCustomer {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-muted);
}

.SalesUpcomingTaskAssignee {
    flex: 0 0 auto;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-muted);
}

.SalesUpcomingTaskStatus {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .SalesDashboardTopRow {
        flex-direction: column;
    }

    .SalesDashboardFilterColumn .SalesFilterPanel {
        height: auto;
    }

    .SalesUpcomingTasksWidget {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ── Dashboard charts ──────────────────────────────────────────────────────── */

.SalesChartRow {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.SalesChartCard {
    flex: 1 1 0;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.SalesChartCard h3 {
    margin: 0 0 12px;
    font-size: 14px;
}

.SalesChartCard > div:not(.SalesChartEmptyState) {
    position: relative;
    height: 260px;
}

.SalesChartEmptyState {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
}

@media (max-width: 1100px) {
    .SalesChartRow {
        flex-direction: column;
    }
}

/* ── Customers list + detail ──────────────────────────────────────────────── */
/* The Customers screens reuse .SalesLeadsTable/.SalesGridContainer/.SalesForm wholesale - only
   the pieces below have no existing equivalent. See View.SalesCustomersList.js/View.SalesCustomerDetail.js. */

.SalesCustomersSearchRow {
    margin-bottom: 12px;
}

/* Positioning context for the clear button, and where the field's width now lives - the input
   itself is width:100% of this so the button can sit inside its right edge. */
.SalesSearchWrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 360px;
}

.SalesSearchWrap input {
    width: 100%;
    /* Right padding keeps typed text from running under the clear button. */
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.SalesSearchWrap input:focus {
    outline: none;
    border-color: var(--brand);
}

/* Inset by 1px so it never overlaps the input's own border. */
.SalesSearchClear {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.SalesSearchClear:hover {
    color: var(--text);
}

/* Read-only counterpart to a .SalesFormRow's input - same box metrics as one, minus the border,
   so a details card lines up with the edit forms elsewhere in the app. */
.SalesDetailValue {
    padding: 8px 0;
    font-size: 14px;
    color: var(--text);
    word-break: break-word;
}

/* Section headings within a detail screen (Current Leads / Historic Leads / Jobs). */
.SalesView h3 {
    margin: 24px 0 8px;
    font-size: 16px;
}

/* renderPagedSection's search box (Current Leads / Historic Leads / Jobs on the customer detail
   screen) - .SalesSearchWrap already gives the input its box styling; this just adds the same
   bottom margin .SalesCustomersSearchRow uses ahead of the grid below it. */
.SalesPagedSearchRow {
    margin-bottom: 10px;
}

.SalesShowMoreButton {
    margin-top: 10px;
}