/*
    Customer + Customer Item history (CustomerItem-History-Schedule-Design.md section 5). Originally
    ported from the Sales client's Components.css (.Sales* -> .Ch*) - Sales and Schedule duplicate
    rather than share client CSS by this codebase's convention (see Data.SalesTasks.js's own comment
    on the equivalent JS duplication). Sales' tokens (--brand/--border/--surface/...) come from
    Tokens.css (shared with Mobile); Schedule has no such file, so every value below is translated
    to Modern.css's own --totm-* tokens instead. Light-only: Schedule has no dark-mode system
    (Calendar.css's own comment), so no dark variants are defined here.

    These screens have since been brought onto the Create/Edit Booking dialog's visual language,
    which is the app's newest and is documented inline in Scheduler.css's "Create Booking dialog"
    section. What that means concretely:

      - Section titles are the small uppercase muted label over a hairline rule
        (.CreateBookingSectionTitle, and Modern.css section 6's table headers), not 16px <h3>s.
        Blue is left to mean an action or a selection.
      - Text inputs carry --totm-border-strong at 32px tall, and focus with a brand border plus a
        2px --totm-brand-tint ring (#CreateBookingBody input:focus).
      - Buttons come in the dialog's primary/secondary pair: .ChButtonPrimary is the brand fill,
        plain .ChButton is white with a strong hairline and an #F3F4F6 hover.
      - Surfaces (cards, grids, inset panels) take the 4px radius .ModalDialog and
        .CreateBookingJobCard use. Only surfaces - Modern.css section 2 already gives every button
        and input its own 3px, and job cards/tags stay square.

    !important on the button rules: Scheduler.css's global "button, input[type=button]" rule paints
    EVERY button solid brand blue with !important on background, colour and padding, and its
    "button:hover" is !important too. Source order cannot beat that, which is why the Create Booking
    footer buttons state their own !important - and why, before this, every .ChButton on these
    screens (the remove buttons and the .ChJobLink accordion rows included) rendered as an identical
    blue slab no matter what .ChButton asked for.

    Loaded after Modern.css in index.html so its rules win on source order.
*/

/* -- Breadcrumbs -------------------------------------------------------------
   #SettingsDialogBreadcrumb is a fixed strip between the dialog's title bar and its scrolling
   content pane, so the trail stays put while the content scrolls. Sentence case, not the uppercase
   eyebrow the section titles use: crumbs are customer and item names, and uppercasing a name makes
   it harder to recognise, not easier. */

#SettingsDialogBreadcrumb {
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid var(--totm-border);
}

.ChBreadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: var(--totm-fs-xs, 12px);
    line-height: 1.4;
}

/* The global "button, input[type=button]" blue-slab rule again - see the file header. */
.ChBreadcrumbCrumb {
    background: none !important;
    border: none !important;
    color: var(--totm-brand) !important;
    font-family: inherit;
    font-size: var(--totm-fs-xs, 12px) !important;
    font-weight: normal !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ChBreadcrumbCrumb:hover {
    background: var(--totm-brand-tint, #E8F1FB) !important;
    color: var(--totm-brand-ink, #0C447C) !important;
    text-decoration: underline;
}

.ChBreadcrumbSeparator {
    color: var(--totm-text-muted);
    padding: 0 2px;
}

/* The screen you are already on: named, but not offered as somewhere to go. */
.ChBreadcrumbCurrent {
    color: var(--totm-text);
    font-weight: 600;
    padding: 2px 4px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ChSection {
    background: #fff;
    border: 1px solid var(--totm-border);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

/* -- Section titles ----------------------------------------------------------
   The eyebrow. A .ChSection's own h3 carries the hairline; inside a .ChSectionHeader
   (title + action button on one line) the hairline moves to the header row itself so
   it spans the button too, the same shape .CreateBookingSectionTitle has. */

.ChSection h3,
.ChSection h4 {
    margin: 0 0 10px 0;
    font-size: var(--totm-fs-2xs, 11px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--totm-text-muted);
}

.ChSection > h3 {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--totm-border);
}

.ChSection h4 {
    margin-top: 16px;
}

.ChSectionHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--totm-border);
}

.ChSectionHeader h3 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* The action sitting beside a title is a title-sized control, not a full-height button. */
.ChSectionHeader .ChButton {
    margin: 0 !important;
    padding: 3px 10px !important;
    font-size: var(--totm-fs-2xs, 11px);
}

/* -- Grid / tables ---------------------------------------------------------- */

.ChGridContainer {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--totm-border);
    border-radius: 4px;
}

.ChGridContainer .UserTable {
    border: none;
}

.ChRowClickable:hover {
    background: var(--totm-brand-tint);
    cursor: pointer;
}

.ChJobDetailRow > td {
    background: var(--totm-brand-tint, #E8F1FB);
    padding: 4px 16px 16px !important;
    border-top: none;
}

.ChJobDetailRow .ChForm {
    border: none;
    background: transparent;
    padding: 0;
    max-width: none;
}

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

.ChShowMoreToggle {
    font-size: var(--totm-fs-sm, 13px);
    color: var(--totm-text-muted);
    margin: 8px 0;
}

/* -- Contacts --------------------------------------------------------------- */

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

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

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

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

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

.ChContactMeta {
    margin-top: 2px;
    font-size: var(--totm-fs-sm, 13px);
    color: var(--totm-text-muted);
}

/* -- Job / item detail form ------------------------------------------------- */

.ChForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    background: #fff;
    border: 1px solid var(--totm-border);
    border-radius: 4px;
    padding: 16px;
    max-width: 900px;
}

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

.ChFormRow {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-size: var(--totm-fs-sm, 13px);
    color: var(--totm-text-muted);
    min-width: 0;
}

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

.ChDetailValue {
    padding: 4px 0;
    font-size: 14px;
    color: var(--totm-text);
    word-break: break-word;
}

.ChJobDescriptionRow {
    grid-column: 1 / -1;
}

.ChJobMemoList {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.ChJobMemoList li {
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--totm-border);
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: var(--totm-fs-sm, 13px);
}

.ChJobTransactions {
    margin-top: 12px;
}

/* Used on both an <a> (attachment links) and a <button class="ChButton ChJobLink"> (the item and
   checklist accordion rows). The button half needs !important on background, colour, weight and
   padding to clear the global blue-slab rule; the anchor half is unaffected by it either way.
   The compound .ChButton.ChJobLink is what makes the link treatment win over .ChButton's own
   !important below - two classes to one, so it does not depend on which block comes first. */
.ChJobLink,
.ChButton.ChJobLink {
    background: none !important;
    border: none !important;
    color: var(--totm-brand) !important;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal !important;
    font-family: inherit;
    padding: 4px 0 !important;
    margin: 0 !important;
    text-align: left;
    display: block;
}

.ChJobLink:hover,
.ChButton.ChJobLink:hover {
    background: none !important;
    color: var(--totm-brand-ink, #0C447C) !important;
}

/* -- Customer item list ------------------------------------------------------
   A bordered list of disclosure rows, one per item: name, then a muted line of whatever tells it
   apart from its namesakes, with a caret that turns when the row is open. Not links - an account
   can hold a dozen-plus items, and a dozen blue underlines reads as a page of links rather than
   as an inventory. Same hairline-separated, brand-tint-on-hover grammar as the job tables.

   Rows are <button>s, so !important throughout: see the file header on the global blue-slab rule. */

.ChItemList {
    border: 1px solid var(--totm-border);
    border-radius: 4px;
    overflow: hidden;
}

.ChItemRow {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background-color: #fff !important;
    color: var(--totm-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--totm-border) !important;
    border-radius: 0 !important;
    font-family: inherit;
    font-weight: normal !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    cursor: pointer;
}

.ChItemList .ChItemRow:last-of-type {
    border-bottom: 0 !important;
}

.ChItemRow:hover {
    background-color: var(--totm-brand-tint, #E8F1FB) !important;
}

/* The name and facts stack; the badge and caret stay on the right of the row. */
.ChItemRowMain {
    flex: 1 1 auto;
    min-width: 0;
}

.ChItemName {
    display: block;
    font-weight: 600;
    color: var(--totm-text);
}

.ChItemFacts {
    display: block;
    margin-top: 1px;
    font-size: var(--totm-fs-xs, 12px);
    color: var(--totm-text-muted);
}

/* Not the amber/red row states: an inactive item is a fact about it, not a problem with it. */
.ChItemBadge {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid var(--totm-border-strong);
    border-radius: 12px;
    font-size: var(--totm-fs-2xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--totm-text-muted);
    background: #fff;
}

.ChItemCaret {
    flex: 0 0 auto;
    color: var(--totm-text-muted);
    font-size: var(--totm-fs-lg, 16px);
    line-height: 1;
    transition: transform var(--totm-motion, 0.15s ease);
}

.ChItemRowOpen .ChItemCaret {
    transform: rotate(90deg);
}

/* The open row's panel. Inset, not another card: it belongs to the row above it, and the ChForm
   inside brings its own border - which would otherwise double up against this one. */
.ChItemDetail {
    padding: 12px;
    background: #FAFBFC;
    border-bottom: 1px solid var(--totm-border);
}

.ChItemList > .ChItemDetail:last-child {
    border-bottom: 0;
}

.ChItemDetail .ChForm {
    border: none;
    background: transparent;
    padding: 0;
    max-width: none;
}

.ChImageGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.ChImageThumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--totm-border);
    border-radius: 4px;
}

.ChCoverageNote {
    color: var(--totm-text-muted);
    font-size: var(--totm-fs-sm, 13px);
    padding: 4px 0 12px 0;
}

/* -- Buttons ---------------------------------------------------------------- */

.ChButton {
    padding: 7px 16px !important;
    border: 1px solid var(--totm-border-strong) !important;
    background-color: #fff !important;
    color: var(--totm-text) !important;
    font-weight: 500 !important;
    font-size: var(--totm-fs-sm, 13px);
    font-family: inherit;
    cursor: pointer;
    margin: 4px 6px 4px 0 !important;
}

.ChButton:hover {
    background-color: #F3F4F6 !important;
}

.ChButton:disabled {
    color: var(--totm-text-muted) !important;
    cursor: default;
}

.ChButton:disabled:hover {
    background-color: #fff !important;
}

/* The one action a screen is actually for - "Open History", "Add line", "New template". At most
   one per row, the same way the booking dialog's footer pairs one Create against one Cancel. */
.ChButtonPrimary {
    background-color: var(--totm-brand, #1976D2) !important;
    color: #fff !important;
    border-color: var(--totm-brand, #1976D2) !important;
}

.ChButtonPrimary:hover {
    background-color: var(--totm-brand-ink, #0C447C) !important;
    border-color: var(--totm-brand-ink, #0C447C) !important;
}

.ChButtonPrimary:disabled,
.ChButtonPrimary:disabled:hover {
    background-color: var(--totm-brand, #1976D2) !important;
    color: #fff !important;
    opacity: 0.55;
}

/* -- Inputs ----------------------------------------------------------------- */

.ChSearchWrap {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-bottom: 12px;
}

/* input.X, not a bare .X: .ModalDialog's own "input, select, textarea" rule (border: 0, padding: 5px)
   scores (0,1,1), so a lone class loses to it however late this file loads - the same specificity
   trap Scheduler.css documents on input.CreateBookingPrimaryButton. Matching (0,1,1) and relying
   on source order is what actually puts the border back. */
input.ChSearchInput,
.ChSiTable input,
input.ChSiInput,
input.ChSiQuantity,
.ChSiTemplatePicker input,
.ChSiCopyPanel .ChFormRow input,
.ChSiAssignPanel .ChFormRow input {
    border: 1px solid var(--totm-border-strong);
    background: #fff;
    color: var(--totm-text);
    font-family: inherit;
    font-size: var(--totm-fs-sm, 13px);
    padding: 6px 8px;
    height: 32px;
    box-sizing: border-box;
}

input.ChSearchInput {
    width: 100%;
}

input.ChSearchInput:focus,
.ChSiTable input:focus,
input.ChSiInput:focus,
input.ChSiQuantity:focus,
.ChSiTemplatePicker input:focus,
.ChSiCopyPanel .ChFormRow input:focus,
.ChSiAssignPanel .ChFormRow input:focus {
    outline: none;
    border-color: var(--totm-brand);
    box-shadow: 0 0 0 2px var(--totm-brand-tint, #E8F1FB);
}

/* -- Job Info pane's Customer Item link (View.JobDetailsPane.js) --------------
   Section 2.4: the plain <label> becomes clickable when the source supports item history. */
.JobInfoCustomerItemLink {
    color: var(--totm-brand);
    text-decoration: underline;
    cursor: pointer;
}

/* -- Service Items editor (View.CustomerItemServiceItems.js) ------------------
   CustomerItem-ServiceItems-Design.md section 4.2. The grid reuses .UserTable; these
   only cover the inputs, the two row states and the button row. */

.ChSiInput {
    width: 100%;
    min-width: 120px;
}

/* The product picker fills its column like every other field in the row. Two classes to one:
   Util.Control.SearchableDropDown's input carries .autoCompleteInput, whose fixed 330px width is a
   single-class rule in Scheduler.css - so this has to out-specify it, not merely come later. The
   min-width keeps the column wide enough for "1010 - FRIDGE FREEZER - STAINLESS STEEL LEFT DR"
   once the table stops being sized by that 330px. */
.ChSiTable input.autoCompleteInput {
    width: 100%;
    min-width: 200px;
}

.ChSiQuantity {
    width: 80px;
}

.ChSiUnit {
    color: var(--totm-text-muted);
}

/* A product that has gone from Infusion. Amber rather than red: the line is still usable
   and still saved, it just needs re-pointing at a current product. */
.ChSiMissing td {
    border-left: 3px solid #E0A030;
    background: #FDF6E8;
}

/* Set by Save when a row has no product or no description. The same red pair
   .CreateBookingPreviewError uses, so a validation failure reads the same wherever it appears. */
.ChSiInvalid td {
    border-left: 3px solid #B3261E;
    background: #FDECEA;
}

.ChSiButtons {
    padding-top: 8px;
}

.ChButton.ChSiRemove {
    padding: 4px 10px !important;
}

.ChButton.ChSiRemove:hover {
    color: #B3261E !important;
    border-color: #B3261E !important;
}

.ChSiTemplateBanner {
    padding-top: 0;
}

/* -- Service Item templates (Phase 7) ----------------------------------------
   The Copy-from and Assign panels are inline (the shared dialog can't nest), so
   they read as insets rather than as separate surfaces. */

.ChSiCopyPanel,
.ChSiAssignPanel {
    border: 1px solid var(--totm-border);
    border-radius: 4px;
    background: var(--totm-brand-tint, #E8F1FB);
    padding: 12px;
    margin: 8px 0;
}

.ChSiCopyPanel h3,
.ChSiAssignPanel h3 {
    margin-top: 0;
}

/* On the tint, the section hairline needs to be a tint of the ink rather than the neutral
   --totm-border, which all but disappears against it. */
.ChSiCopyPanel > h3,
.ChSiAssignPanel > h3 {
    border-bottom-color: rgba(12, 68, 124, 0.18);
}

/* White on the tint, so the controls still read as controls. */
.ChSiCopyPanel .ChButton:not(.ChButtonPrimary),
.ChSiAssignPanel .ChButton:not(.ChButtonPrimary) {
    background-color: #fff !important;
}

.ChSiCopyItemCell {
    margin-top: 4px;
}

.ChSiAssignItems {
    max-height: 320px;
    overflow-y: auto;
    padding-top: 4px;
}

.ChSiAssignRow {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

/* An item that already has its own list, or is already on this template. */
.ChSiAssignState {
    color: var(--totm-text-muted);
    font-size: var(--totm-fs-sm, 13px);
}

.ChSiTemplatePicker {
    min-width: 260px;
}