/* ============================================================================
   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;
}

/* --- 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;
}