/* ═══════════════════════════════════════════════════════════════════════════
   FIELD SERVICE — Schedule table
   ═══════════════════════════════════════════════════════════════════════════ */

.fs-schedule-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.79rem;
}

/* Date section header rows */
.fs-date-header td {
    background: #2c3e50;
    color: #fff;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    position: sticky;
    top: 40px; /* below sticky thead */
    z-index: 1;
}
.fs-date-header.fs-weekend td   { background: #4a5568; }
.fs-date-header.fs-bank-holiday td { background: #7b2d2d; }

.fs-empty-day td { background: #f8f9fa; }
.fs-completed    { opacity: 0.55; text-decoration-line: line-through; }

/* Row accent colours matching Excel screenshot */
.fs-row-collection { background: #e8f4fd; }
.fs-row-dropoff    { background: #edfaf1; }
.fs-row-return     { background: #fff8e1; }
.fs-row-visit      { background: #f3e8fd; }

/* Status-driven row colours (take priority over type accent) */
.fs-schedule-table tr.fs-status-booked  > td { background: #d4edda !important; } /* light green = booked (RMA shipped style) */
.fs-schedule-table tr.fs-status-pending > td { background: #ffe8cc !important; } /* orange = pending (not booked) */

/* Duplicate badge */
.fs-dup-badge {
    background: #d63384;
    color: #fff;
}

/* ═════════════════════════════════════════════════════════════════════════
   FIELD SERVICE — Holding section (jobs awaiting a date)
   ═════════════════════════════════════════════════════════════════════════ */
.fs-holding {
    border: 1px solid #ffc107;
    border-radius: 0.4rem;
    background: #fffdf5;
    overflow: hidden;
}
.fs-holding-header {
    background: #ffc107;
    color: #212529;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD SERVICE — Calendar grid
   ═══════════════════════════════════════════════════════════════════════════ */

.fs-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: #dee2e6;
}
.fs-cal-header {
    background: #343a40;
    color: #fff;
    text-align: center;
    padding: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.fs-cal-cell {
    background: #fff;
    min-height: 80px;
    padding: 4px;
    position: relative;
    font-size: 0.72rem;
    overflow: hidden;
}
.fs-cal-cell.empty    { background: #f8f9fa; }
.fs-cal-cell.weekend  { background: #f4f4f4; }
.fs-cal-cell.today    { background: #fff8e1; outline: 2px solid #f0ad00; }
.fs-cal-day-num {
    font-weight: 700;
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 2px;
}
.fs-cal-chip {
    border-radius: 3px;
    padding: 1px 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.fs-chip-collection { background:#cfe2ff; color:#084298; }
.fs-chip-dropoff    { background:#d1e7dd; color:#0a3622; }
.fs-chip-return     { background:#fff3cd; color:#664d03; }
.fs-chip-visit      { background:#e8d5ff; color:#450d7b; }
.fs-chip-other      { background:#e2e3e5; color:#41464b; }
.fs-cal-add {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.9rem;
    color: #adb5bd;
    cursor: pointer;
    line-height: 1;
}
.fs-cal-add:hover { color: #0d6efd; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD SERVICE — Driver / Phone view
   ═══════════════════════════════════════════════════════════════════════════ */

.fs-driver-shell {
    background: #1a1a2e;
    min-height: 100vh;
    padding-bottom: 2rem;
    color: #eee;
}
.fs-driver-topbar {
    background: #16213e;
    padding: 0.6rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid #0f3460;
}
.fs-driver-absence-bar {
    background: #0f3460;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
}
.fs-driver-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}
.fs-driver-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: #adb5bd;
}
.fs-driver-card {
    background: #16213e;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    border-left: 6px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.fs-card-collection { border-left-color: #0d6efd; }
.fs-card-dropoff    { border-left-color: #198754; }
.fs-card-return     { border-left-color: #0dcaf0; }
.fs-card-visit      { border-left-color: #ffc107; }
.fs-card-done       { opacity: 0.5; }

.fs-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.fs-card-type   { font-size: 0.8rem; }
.fs-card-time   { color: #adb5bd; font-size: 0.85rem; }
.fs-card-status { font-size: 0.82rem; font-weight: 600; }

.fs-card-rma {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.fs-card-product { color: #adb5bd; font-size: 0.85rem; }
.fs-card-serial  { color: #6c757d; font-size: 0.8rem; font-family: monospace; }

.fs-card-customer {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.4rem;
}

/* Address block — designed to be readable at arm's length */
.fs-card-address {
    background: #0f1929;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    color: #e9ecef;
    line-height: 1.5;
}
.fs-card-postcode {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    margin-top: 2px;
}

.fs-card-phone a {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0dcaf0;
    text-decoration: none;
}
.fs-card-phone a:hover { color: #fff; }

.fs-card-notes {
    font-size: 0.82rem;
    color: #adb5bd;
    background: #0d1117;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.fs-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RMA Edit — card left accent border */
.ms-tab-content .card,
.ms-edit-panels .card {
    border-left: 3px solid #1a6fc4 !important;
}

/* Non-card "box" containers used inside some tabs (e.g. bordered/rounded
   panels, DiffSection boxes) get the same blue left accent so every box on
   every tab is visually consistent. Excludes floating dropdown result
   popups (which are positioned absolutely) so they aren't accented. */
.ms-tab-content .border.rounded:not([style*="position:absolute"]):not([style*="position: absolute"]) {
    border-left: 3px solid #1a6fc4 !important;
}

/* RMA / Spares Edit — tab navigation (enhanced for visibility) */
.ms-tab-nav {
    gap: 4px;
    padding: 6px 12px 0 !important;
    background: #eaf1f9;
    border-bottom: 2px solid #1a6fc4 !important;
}

.ms-tab-nav .nav-link {
    color: #34506b;
    font-size: 0.86rem !important;
    font-weight: 600;
    padding: 7px 14px !important;
    background: #ffffff;
    border: 1px solid #cdd9e7;
    border-bottom: 3px solid transparent;
    border-radius: 7px 7px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ms-tab-nav .nav-link:hover:not(.active) {
    color: #1a6fc4;
    background: #f2f7fd;
    border-color: #a8c8f0;
    border-bottom-color: #a8c8f0;
}

.ms-tab-nav .nav-link.active {
    color: #ffffff !important;
    background-color: #1a6fc4 !important;
    border-color: #1a6fc4 !important;
    box-shadow: 0 2px 6px rgba(26, 111, 196, 0.35);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RMA Edit — compact Radzen inputs (dropdowns, date pickers, text boxes)
   Scoped to .ms-tab-content and .ms-edit-panels so other pages are unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */

.ms-tab-content,
.ms-edit-panels {
    --rz-input-height: 28px;
    --rz-input-font-size: 0.8rem;
    --rz-input-padding-block: 0.15rem;
    --rz-input-padding-inline: 0.5rem;
    --rz-input-line-height: 1.4;
}

/* Dropdown: the visible label area that sets the box height */
.ms-tab-content .rz-dropdown-label,
.ms-edit-panels .rz-dropdown-label {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.5rem !important;
    min-height: 28px !important;
    line-height: 1.4 !important;
}

/* Dropdown: the chevron/trigger button on the right */
.ms-tab-content .rz-dropdown-trigger,
.ms-edit-panels .rz-dropdown-trigger {
    height: 28px !important;
    width: 28px !important;
    font-size: 0.8rem !important;
}

/* The outer rz-dropdown wrapper */
.ms-tab-content .rz-dropdown,
.ms-edit-panels .rz-dropdown {
    font-size: 0.8rem !important;
    height: 28px !important;
    min-height: unset !important;
}

/* Date picker input */
.ms-tab-content .rz-datepicker input,
.ms-edit-panels .rz-datepicker input {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.5rem !important;
    height: 28px !important;
}

/* Text boxes and numerics */
.ms-tab-content .rz-textbox,
.ms-tab-content .rz-numeric,
.ms-edit-panels .rz-textbox,
.ms-edit-panels .rz-numeric {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.5rem !important;
    height: 28px !important;
    min-height: unset !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RMA Edit — compact tab layout (cards, headers, labels, rows, tables)
   Scoped to .ms-tab-content so every tab renders with the same compressed
   fields and padding regardless of the individual tab's own markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cards — tighter shell and internal padding */
.ms-tab-content .card {
    margin-bottom: 0.5rem;
}
.ms-tab-content .card-body {
    padding: 0.6rem !important;
}
.ms-tab-content .card-body.p-0 {
    padding: 0 !important;
}
.ms-tab-content .card-header {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.82rem;
}

/* Labels — small and close to their field */
.ms-tab-content .form-label,
.ms-tab-content label.form-label,
.ms-tab-content .form-label.small {
    font-size: 0.76rem !important;
    margin-bottom: 0.1rem !important;
    font-weight: 600;
}

/* Bootstrap inputs inside tabs match the compact 28px scale */
.ms-tab-content .form-control,
.ms-tab-content .form-select {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.5rem !important;
    min-height: 28px !important;
    line-height: 1.4 !important;
}
.ms-tab-content textarea.form-control {
    min-height: unset !important;
}
.ms-tab-content .input-group-sm > .form-control,
.ms-tab-content .input-group-sm > .input-group-text {
    min-height: 28px !important;
}

/* Row gutters — tighter vertical rhythm between fields */
.ms-tab-content .row {
    --bs-gutter-y: 0.5rem;
}
.ms-tab-content .mb-3 {
    margin-bottom: 0.5rem !important;
}
.ms-tab-content .mb-2 {
    margin-bottom: 0.35rem !important;
}

/* Tables — condensed rows */
.ms-tab-content .table {
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
}
.ms-tab-content .table > :not(caption) > * > * {
    padding: 0.25rem 0.45rem;
}

/* Buttons — compact to match fields */
.ms-tab-content .btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL COMPACT DENSITY — web_multiserve internal
   Reduces the size/spacing of form fields, buttons, tables and labels
   across the app so pages are less spaced out. Uses the same 28px / 0.8rem
   scale already established for the RMA edit panels above.
   Scoped under body so it applies app-wide but stays inside this app only.
   ════════════════════════════════════════════════════════════════════════ */

/* Base text scale — slightly tighter default */
body {
    font-size: 0.875rem;
}

/* Bootstrap form controls (inputs, selects, textareas) */
body .form-control,
body .form-select {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    min-height: 30px;
    line-height: 1.4;
}

/* Textareas keep auto height but tighter padding */
body textarea.form-control {
    min-height: unset;
}

/* Input-group affordances match the compact inputs */
body .input-group-text {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

/* Labels — tighter and closer to their field */
body .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.15rem;
    font-weight: 600;
}

/* Buttons — smaller default so they don't dominate */
body .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}
body .btn-lg {
    font-size: 0.9rem;
    padding: 0.35rem 0.8rem;
}

/* Tables — condensed rows across the app */
body .table > :not(caption) > * > * {
    padding: 0.3rem 0.5rem;
}
body .table {
    font-size: 0.82rem;
}

/* Tighter vertical rhythm for form rows/margins */
body .mb-3 {
    margin-bottom: 0.75rem !important;
}
body .row.g-3 {
    --bs-gutter-y: 0.75rem;
}

/* Cards — reduce internal padding */
body .card-body {
    padding: 0.85rem;
}

/* Badges a touch smaller */
body .badge {
    font-weight: 600;
}

/* Radzen inputs app-wide match the compact scale */
body {
    --rz-input-height: 30px;
    --rz-input-font-size: 0.8rem;
    --rz-input-padding-block: 0.2rem;
    --rz-input-padding-inline: 0.5rem;
    --rz-input-line-height: 1.4;
}

/* RMA list row-state colours and the exact-match highlight live in
   multiserve-page-theme.css (scoped to .ms-grid) using the ms-row-* classes. */