/* ============================================================================
   service-business.css
   THE Service Business design language — adopted 2026-08-11 at the user's
   direction: every Service Business page follows the Logistics entry pages
   (Platform/Truebooks.CRM.Shared/Pages/CrmJobEnquiryEntry.razor), so the
   system reads as one product.

   Values are copied VERBATIM from that page's <style> block, renamed with an
   sb- prefix so they cannot collide with the CRM pages' own inline classes
   (which are global while those pages render). rem values are intentional —
   the logistics pages use rem on the app's 15px root, and matching their
   rendering is the goal.

   Pattern summary (matches the approved screenshot):
   - labels ABOVE fields (.sb-label), 30px native inputs/selects (.sb-input /
     .sb-select), textarea (.sb-textarea)
   - white section cards (.sb-card) with a small bordered title (.sb-title)
   - 2/3/4-column grids (.sb-grid-2/3/4) collapsing at 768px
   - tables styled like the logistics document tables (.sb-table)
   - a sticky entry header (.sb-sticky) whose actions are MudButtons
     (Text / Outlined / Filled), exactly as the logistics header uses
   ============================================================================ */

/* Page container (logistics: padding 16px, max-width 1200px, centered) */
.sb-page {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Fields (f-input / f-select / f-textarea / field-label, verbatim) ------ */
.sb-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 3px;
    display: block;
}

.sb-input {
    height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
    color: #1e293b;
}

.sb-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.sb-select {
    height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
    color: #1e293b;
}

.sb-select:focus {
    outline: none;
    border-color: #3b82f6;
}

.sb-textarea {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    color: #1e293b;
}

.sb-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Read-only / disabled fields render grey like the logistics Enquiry No. */
.sb-input:disabled, .sb-input[readonly],
.sb-select:disabled,
.sb-textarea:disabled {
    background: #f8fafc;
    color: #64748b;
}

/* app.css globally caps input[type=…] at max-height 30px / 4px padding via an
   attribute selector that beats a lone class. 30px is exactly this pattern's
   height, so only the vertical padding needs pinning back. */
.sb-input[type] { padding-top: 0 !important; padding-bottom: 0 !important; }

.sb-field { display: flex; flex-direction: column; }

/* Small helper caption under a field */
.sb-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 3px;
}

.sb-hint-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Required-field star, and the footer note that explains it */
.sb-req { color: #dc2626; }

.sb-required-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-right: auto;
}

/* "+ New" beside a picker's label: creates the master record on the fly and selects it
   (Service Contract accounts / SLA, 2026-09-18). Sits on the label row, right-aligned. */
.sb-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sb-label-row .sb-label { margin-bottom: 0; }
.sb-add-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; color: #2563eb; font-family: inherit;
    white-space: nowrap;
}
.sb-add-link:hover { text-decoration: underline; }
.sb-add-link:disabled { color: #94a3b8; cursor: default; text-decoration: none; }

/* --- Cards + section titles (section-card / section-title) ----------------- */
.sb-card {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Rendered uppercase per the approved screenshot (ENQUIRY INFORMATION). */
.sb-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
}

/* --- Grids (grid-2/3/4, verbatim incl. the 768px collapse) ----------------- */
.sb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sb-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.sb-span-2 { grid-column: span 2; }
.sb-span-3 { grid-column: span 3; }
.sb-span-4 { grid-column: span 4; }

@media (max-width: 768px) {
    .sb-grid-2, .sb-grid-3, .sb-grid-4 { grid-template-columns: 1fr; }
    .sb-span-2, .sb-span-3, .sb-span-4 { grid-column: span 1; }
}

/* --- Sticky entry header (entry-header-sticky, verbatim) ------------------- */
.sb-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding: 8px 0;
    box-shadow: 0 2px 6px -4px rgba(15, 23, 42, 0.25);
}

/* --- Tables (doc-table, verbatim) ------------------------------------------ */
.sb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.sb-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
}

.sb-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.sb-table tr:last-child td { border-bottom: none; }
.sb-table tr:hover td { background: #f8fafc; }

.sb-right { text-align: right; }
.sb-center { text-align: center; }

/* Inputs inside table cells keep the 30px field look */
.sb-table .sb-input, .sb-table .sb-select { height: 30px; }

/* Empty-table message (doc-empty, verbatim) */
.sb-empty {
    text-align: center;
    padding: 32px 0;
    color: #94a3b8;
    font-size: 0.84rem;
}

/* --- Row action icon buttons (doc-action-btn, verbatim + tints) ------------ */
.sb-actions-cell { white-space: nowrap; }

.sb-iconbtn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    color: #64748b;
    transition: color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
}

.sb-iconbtn:hover { color: #2563eb; background: #eff6ff; }
.sb-iconbtn.sb-danger:hover { color: #dc2626; background: #fef2f2; }
.sb-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }

.sb-iconbtn .mud-icon-root { width: 18px; height: 18px; font-size: 18px; }

/* Square 30px quick-add button beside a select (matches the field height) */
.sb-addbtn {
    height: 30px;
    width: 30px;
    min-width: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #2563eb;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.sb-addbtn:hover:not(:disabled) { background: #2563eb; color: #fff; border-color: #2563eb; }
.sb-addbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.sb-addbtn .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }

/* Field + quick-add pair */
.sb-field-row { display: flex; align-items: flex-end; gap: 6px; }
.sb-field-row .sb-field { flex: 1; min-width: 0; }

/* --- Status chips (logistics linked-badge geometry) ------------------------ */
.sb-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.sb-chip-draft { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.sb-chip-submitted { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.sb-chip-converted { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.sb-chip-cancelled { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.sb-chip-active { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.sb-chip-inactive { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.sb-chip-product { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.sb-chip-service { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* --- List page header + count line ----------------------------------------- */
.sb-listhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sb-listhead-title { font-size: 1.15rem; font-weight: 600; color: #1e293b; margin: 0; }
.sb-listhead-sub { font-size: 0.78rem; color: #64748b; margin: 2px 0 0; }

.sb-count-foot {
    padding: 10px 12px;
    font-size: 0.78rem;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
}

/* Inline radio row (small, matches .sb-label typography) */
.sb-radios {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    color: #475569;
}

.sb-radios label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.sb-radios input[type="radio"] { accent-color: #2563eb; margin: 0; }

/* Native checkbox row (Active flag in dialogs) */
.sb-check { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: #334155; cursor: pointer; height: 30px; }
.sb-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: #16a34a; margin: 0; }

/* Total line under a lines table */
.sb-totalbar {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.sb-total-label { font-size: 0.8rem; font-weight: 600; color: #475569; }
.sb-total-value { font-size: 1rem; font-weight: 700; color: #0f172a; }

/* Warning strip (logistics yellow banner) */
.sb-warn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 12px;
}

/* A banner the user can close: the × sits at the far right of the strip. */
.sb-warn-dismissible { position: relative; padding-right: 36px; }
.sb-warn-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}
.sb-warn-close:hover { background: rgba(0, 0, 0, 0.08); opacity: 1; }

/* --- Document action bar (.sb-actionbar) ------------------------------------
   One row of lifecycle actions for an entry page: SAVE AS DRAFT · APPROVE · UPDATE ·
   VOID · DELETE (· REINSTATE). Every action is ALWAYS rendered and merely disabled
   when the document's state does not allow it, so the bar never shifts and the
   operator learns where each button lives. Filled = the primary next step, tonal =
   secondary, outlined = destructive. Added 2026-09-15 for the Service Enquiry. */
.sb-actionbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sb-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .05s ease;
}
.sb-act svg { width: 16px; height: 16px; flex: 0 0 16px; }
.sb-act:active:not(:disabled) { transform: translateY(1px); }
.sb-act:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28); }

/* Filled: the one primary next step. */
.sb-act-primary {
    background: #2563eb; color: #fff; border-color: #2563eb;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}
.sb-act-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

.sb-act-success {
    background: #16a34a; color: #fff; border-color: #16a34a;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.35);
}
.sb-act-success:hover:not(:disabled) { background: #15803d; border-color: #15803d; }

/* Tonal: secondary, low-emphasis. */
.sb-act-tonal { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.sb-act-tonal:hover:not(:disabled) { background: #dbeafe; border-color: #bfdbfe; }

/* Outlined: destructive or reversible-but-serious. */
.sb-act-warning { background: #fff; color: #b45309; border-color: #fcd34d; }
.sb-act-warning:hover:not(:disabled) { background: #fffbeb; border-color: #f59e0b; }

.sb-act-danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.sb-act-danger:hover:not(:disabled) { background: #fef2f2; border-color: #f87171; }

.sb-act-ghost { background: #fff; color: #334155; border-color: #e2e8f0; }
.sb-act-ghost:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }

/* Disabled: same footprint, visibly inert, no hover. */
.sb-act:disabled,
.sb-act[disabled] {
    cursor: not-allowed;
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    box-shadow: none;
}

.sb-act-busy svg { animation: sb-spin .8s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* Hairline between the lifecycle group and the destructive group. */
.sb-act-sep { width: 1px; height: 24px; background: #e2e8f0; margin: 0 2px; }

@media (max-width: 900px) {
    .sb-act { padding: 0 12px; }
    .sb-act span { display: none; }   /* icon-only on narrow screens */
    .sb-act svg { width: 18px; height: 18px; }
}