.loading-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(33,37,41,.5); /* Bootstrap dark @ 50% */
    z-index: 20000; /* above app shell, menus, modals, and report surfaces */
}

.loading-card {
    background: var(--bs-body-bg);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-cell {
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    max-height: 120px;
}

.avatar {
  --size: 48px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-fallback {
    --scale: .42; /* for 2 letters */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #6c757d;
    color: #f1f1f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    font-size: calc(var(--size) * var(--scale));
}

.avatar-fallback[data-chars="1"] {
    --scale: .58;
}

.avatar-fallback[data-chars="3"] {
    --scale: .34;
}

/* Make Google Places dropdown appear above Bootstrap offcanvas/modal */
.pac-container {
    z-index: 2000 !important; /* higher than offcanvas (1045) and modal (1055) */
}

/* Make gallery scroll nicely if it gets tall */
.gallery-scroll {
    max-height: 520px;
    overflow: auto;
}

/* Ensure images scale and crop elegantly */
.object-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doclist-scroll {
    max-height: 520px;
    overflow: auto;
}

.min-w-0 {
    min-width: 0;
}
/* helps text-truncate inside flex */

.drop-zone {
    border-style: dashed !important;
    transition: background-color .15s, border-color .15s;
}

.drop-zone.dragover {
    background-color: rgba(0,0,0,.03);
    border-color: var(--bs-primary) !important;
}


.doclist-scroll {
    max-height: 520px;
    overflow: auto;
}

.min-w-0 {
    min-width: 0;
}

.object-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-scroll {
    overflow: auto;
    max-height: 60vh; /* adjust for your layout */
}

.chat-day-divider {
    text-align: center;
    position: relative;
}

.chat-day-divider span {
    display: inline-block;
    padding: .25rem .75rem;
    font-size: .75rem;
    background: var(--bs-light);
    color: var(--bs-secondary);
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
}

.chat-bubble {
    max-width: min(65ch, 80%);
    padding: .5rem .75rem .25rem;
    border-radius: 1rem;
    position: relative;
    border: 1px solid var(--bs-border-color);
}

.chat-bubble .chat-text {
    white-space: pre-wrap;
}

.chat-bubble .chat-meta {
    text-align: right;
    font-size: .75rem;
    color: var(--bs-secondary);
}

.chat-bubble.mine {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
}

.chat-bubble.theirs {
    background: var(--bs-body-bg);
}

.chat-attachments {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.chat-attachment-thumb {
    width: 120px;
    height: 90px;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    display: inline-block;
}

.chat-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-attachment-file {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
}

.chat-input {
    resize: none;
    max-height: 8rem;
}

.typing {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.typing span {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--bs-secondary);
    animation: blink 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) {
    animation-delay: .15s;
}

.typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes blink {
    0%,80%,100% {
        opacity: .3
    }

    40% {
        opacity: 1
    }
}

.draft-attach-thumb {
    width: 80px;
    height: 60px;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--bs-border-color);
}

    .draft-attach-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .draft-attach-thumb .btn-close {
        position: absolute;
        top: 2px;
        right: 2px;
    }

.draft-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
}

.chat-threads-scroll {
    max-height: 70vh;
    overflow: auto;
}

.chat-thread.active {
    background: var(--bs-primary-bg-subtle);
}

.min-w-0 {
    min-width: 0;
}

/* Wider offcanvas (desktop), full width on phones */
.offcanvas.offcanvas-end.offcanvas-wide {
    --bs-offcanvas-width: 450px;
}

/* Flight schedule offcanvas — needs extra width for schedule table */
#flightScheduleCanvas {
    --bs-offcanvas-width: 700px;
}

/* Extra wide offcanvas for location picker with map */
.offcanvas.offcanvas-end.offcanvas-wide-xl {
    --bs-offcanvas-width: clamp(700px, 65vw, 1000px);
}

.offcanvas.offcanvas-end.offcanvas-workspace-full {
    --bs-offcanvas-width: min(1180px, calc(100vw - 2rem));
}

@media (max-width: 767.98px) {
    .offcanvas.offcanvas-end.offcanvas-wide,
    .offcanvas.offcanvas-end.offcanvas-wide-xl,
    .offcanvas.offcanvas-end.offcanvas-workspace-full,
    #flightScheduleCanvas {
        --bs-offcanvas-width: 100vw;
    }
}

/* Keep long values (GUIDs) inside the card */
.audit-changes, .audit-changes * {
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .audit-changes .badge, .audit-changes code {
        white-space: normal;
    }


    /* TIMELINE */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}

.title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.view-all-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #0078d4; /* or theme color */
}

.timeline-content {
    min-height: 200px; /* or whatever baseline you want */
    height: 100%;
    max-height: 500px; /* if you still want to cap it */
    overflow-y: auto;
    padding: 0.5rem 1rem;
}

/* Flight Autocomplete Styles */
.flight-autocomplete-dropdown {
    position: absolute !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--bs-border-color) !important;
    z-index: 1070 !important;
    background-color: var(--bs-dropdown-bg, #fff) !important;
    color: var(--bs-dropdown-color, inherit) !important;
    opacity: 1 !important;
}

/* Override Bootstrap dropdown-menu defaults with highest specificity */
div.dropdown-menu.show.flight-autocomplete-dropdown,
div.position-relative > div.dropdown-menu.show.flight-autocomplete-dropdown {
    background: var(--bs-dropdown-bg) !important;
    background-color: var(--bs-dropdown-bg) !important;
    color: var(--bs-dropdown-color) !important;
    border-color: var(--bs-dropdown-border-color) !important;
    opacity: 1 !important;
}

div.dropdown-item.flight-result-item,
div.dropdown-menu.flight-autocomplete-dropdown > div.dropdown-item.flight-result-item {
    cursor: pointer !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    transition: background-color 0.2s ease !important;
    color: var(--bs-body-color, inherit) !important;
    background: var(--bs-dropdown-bg, #fff) !important;
    background-color: var(--bs-dropdown-bg, #fff) !important;
    opacity: 1 !important;
}

    .flight-result-item:last-child {
        border-bottom: none;
    }

    div.dropdown-item.flight-result-item:hover {
        background-color: var(--bs-dropdown-link-hover-bg, var(--bs-secondary-bg)) !important;
        color: var(--bs-dropdown-link-hover-color, inherit) !important;
        opacity: 1 !important;
    }

    .flight-result-item:active {
        background-color: var(--bs-dropdown-link-active-bg, var(--bs-tertiary-bg));
    }

    /* Text colors within flight items */
    .flight-result-item .text-muted {
        color: var(--bs-secondary-color, #6c757d) !important;
    }

    .flight-result-item .text-primary {
        color: var(--bs-primary, #0d6efd) !important;
    }

    .flight-result-item .text-info {
        color: var(--bs-info, #0dcaf0) !important;
    }

    .flight-result-item .fw-semibold,
    .flight-result-item .fw-bold {
        color: inherit;
    }

    .flight-result-item div,
    .flight-result-item span {
        color: inherit;
    }

/* Dark mode specific adjustments */
[data-bs-theme="dark"] div.dropdown-menu.show.flight-autocomplete-dropdown {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    background: #212529 !important;
    background-color: #212529 !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] div.dropdown-item.flight-result-item {
    color: #dee2e6 !important;
    background: #212529 !important;
    background-color: #212529 !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] div.dropdown-item.flight-result-item:hover {
    background: #2c3034 !important;
    background-color: #2c3034 !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] .flight-result-item .fw-semibold,
[data-bs-theme="dark"] .flight-result-item .fw-bold {
    color: #dee2e6 !important;
}

/* Airport switch button animation */
.btn-icon i {
    transition: transform 0.3s ease;
}

.btn-icon:hover i {
    transform: rotate(180deg);
}

.btn-icon:active {
    transform: scale(0.95);
}

/* Modal fixes - break out of parent stacking context */
/* Reset transform/filter on body and wrappers when modal is open */
body.modal-open {
    filter: none !important;
}

body.modal-open .wrapper,
body.modal-open .page-content {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

/* Ensure modal and backdrop cover entire viewport */
/* Note: td-components.css sets backdrop to z-index 1070, so modal-dialog must be higher */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1075 !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1070 !important;
}

/* Ensure modal backdrop is visible when modals are shown */
/* Override theme's fade transition that sets opacity to 0 */
.modal-backdrop.fade.show,
.modal-backdrop.show {
    opacity: 0.5 !important;
    background-color: #000 !important;
}

/* Ensure modal-dialog and content are above backdrop (must be > 1070) */
.modal-dialog {
    position: relative !important;
    z-index: 1080 !important;
}

.modal-content {
    position: relative !important;
    z-index: 1081 !important;
}

/* ========================================
   Operations List - Attention Indicators
   ======================================== */

/* Attention level left border ribbons */
.attention-critical {
    border-left: 4px solid #dc3545 !important;
}

.attention-warning {
    border-left: 4px solid #fd7e14 !important;
}

.attention-info {
    border-left: 4px solid #ffc107 !important;
}

.attention-none {
    border-left: 4px solid transparent !important;
}

/* ========================================
   Operations List - Card View
   ======================================== */

.operation-card {
    transition: all 0.2s ease;
    border-left-width: 4px !important;
}

.operation-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.operation-card.attention-critical {
    border-left-color: #dc3545 !important;
}

.operation-card.attention-warning {
    border-left-color: #fd7e14 !important;
}

.operation-card.attention-info {
    border-left-color: #ffc107 !important;
}

.operation-card.attention-none {
    border-left-color: var(--tb-border-color, #e9ecef) !important;
}

/* ========================================
   Operations List - Scheduling Progress Bar
   ======================================== */

.scheduling-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e9ecef;
}

.scheduling-bar .segment {
    height: 100%;
}

.scheduling-bar .segment-draft {
    background: #6c757d;
}

.scheduling-bar .segment-unscheduled {
    background: #ffc107;
}

.scheduling-bar .segment-assigned {
    background: #0dcaf0;
}

.scheduling-bar .segment-scheduled {
    background: #198754;
}

.scheduling-bar .segment-completed {
    background: #198754;
}

.scheduling-bar .segment-cancelled {
    background: #dc3545;
}

/* ========================================
   Resource Tracking Page
   ======================================== */

.cursor-pointer {
    cursor: pointer;
}

.hover-bg-light:hover {
    background-color: #f8f9fa;
}

.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.resource-info-popup {
    min-width: 200px;
}

/* Google Maps InfoWindow - ensure close button visibility in dark mode */
.gm-style-iw-d,
.gm-style-iw-c {
    background: #fff !important;
}

.gm-style-iw-tc::after {
    background: #fff !important;
}

/* Make the close button always visible with good contrast */
.gm-ui-hover-effect {
    opacity: 1 !important;
    width: 30px !important;
    height: 30px !important;
    top: 4px !important;
    right: 4px !important;
}

.gm-ui-hover-effect > span {
    background-color: #374151 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 6px !important;
}

/* Dark mode - ensure InfoWindow close button has light background for visibility */
[data-bs-theme="dark"] .gm-ui-hover-effect {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50%;
}

[data-bs-theme="dark"] .gm-ui-hover-effect:hover {
    background: rgba(255, 255, 255, 1) !important;
}

[data-bs-theme="dark"] .gm-ui-hover-effect > span {
    background-color: #1f2937 !important;
}

/* ========================================
   Sales Operations Dashboard
   ======================================== */

/* KPI Card animations */
.card-animate {
    transition: all 0.2s ease;
}

.card-animate:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Clickable rows */
tr.cursor-pointer {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

tr.cursor-pointer:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

/* Badge sizing baseline
   The bundled theme's default .badge uses an em-based font size, which becomes
   very small inside tables and small text rows. Keep badges readable even when
   a page misses the standard fs-6/py/px utility classes. */
.badge {
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 600;
    padding: 0.25rem 0.45rem;
    border-radius: 0.25rem;
}

.badge:not(.fs-6) {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.45rem !important;
}

/* Source badges */
.badge-light-info {
    background-color: rgba(var(--bs-info-rgb), 0.15);
    color: var(--bs-info);
}

.badge-light-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.badge-light-warning {
    background-color: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

label.required::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
}

/* Custom soft badges (extends Bootstrap badge-soft-* palette) */
.badge-soft-orange {
    background-color: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
}

.badge-soft-teal {
    background-color: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
}

.badge-soft-yellow {
    background-color: rgba(255, 193, 7, 0.18);
    color: #856404;
}

.badge-soft-red {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.badge-soft-purple {
    background-color: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
}

.badge-soft-pink {
    background-color: rgba(214, 51, 132, 0.15);
    color: #d63384;
}

.badge-soft-indigo {
    background-color: rgba(102, 16, 242, 0.15);
    color: #6610f2;
}

.badge-soft-cyan {
    background-color: rgba(13, 202, 240, 0.15);
    color: #0aa2c0;
}

/* Custom outline badges */
.badge-outline-orange {
    border: 1px solid #fd7e14;
    color: #fd7e14;
    background-color: transparent;
}

.badge-outline-teal {
    border: 1px solid #17a2b8;
    color: #17a2b8;
    background-color: transparent;
}

.badge-outline-yellow {
    border: 1px solid #ffc107;
    color: #856404;
    background-color: transparent;
}

.badge-outline-red {
    border: 1px solid #dc3545;
    color: #dc3545;
    background-color: transparent;
}

.badge-outline-purple {
    border: 1px solid #6f42c1;
    color: #6f42c1;
    background-color: transparent;
}

.badge-outline-pink {
    border: 1px solid #d63384;
    color: #d63384;
    background-color: transparent;
}

.badge-outline-indigo {
    border: 1px solid #6610f2;
    color: #6610f2;
    background-color: transparent;
}

.badge-outline-cyan {
    border: 1px solid #0dcaf0;
    color: #0aa2c0;
    background-color: transparent;
}

/* Operation offcanvas custom width */
.offcanvas.offcanvas-end[style*="width: 600px"] {
    --bs-offcanvas-width: 600px;
}

/* Alert row animations */
.table tr.table-danger,
.table tr.table-warning {
    transition: background-color 0.3s ease;
}

/* Filter button group improvements */
.btn-group .btn.btn-sm {
    padding: 0.35rem 0.75rem;
}

/* Mobile responsiveness for dashboard */
@media (max-width: 767.98px) {
    .card-animate:hover {
        transform: none;
    }

    .offcanvas[style*="width: 600px"] {
        width: 100vw !important;
    }

    /* Stack KPI cards better on mobile */
    .row.g-3 > [class*="col-xl-3"] {
        margin-bottom: 0.5rem;
    }
}

/* Operation card view - better grid on mobile */
@media (max-width: 575.98px) {
    .operation-card .btn-group {
        width: 100%;
        margin-top: 0.5rem;
    }

    .operation-card .btn-group .btn {
        flex: 1;
    }
}

/* Offcanvas improvements */
.offcanvas-body.p-0 > .p-3 {
    transition: background-color 0.15s ease;
}

.offcanvas-body .list-group-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Quick filter badges in alerts table */
.badge.fs-7 {
    font-size: 0.75rem !important;
}

/* ========================================
   Notification Dropdown z-index Fix
   ======================================== */

/* Topbar z-index: above page-content (auto) but BELOW Bootstrap offcanvas
   (backdrop=1040, panel=1045) and modal (backdrop=1050, dialog=1055).
   This prevents the topbar from "punching through" the offcanvas overlay. */
.app-topbar {
    z-index: 1035 !important;
}

.app-topbar .topbar-item .dropdown-menu {
    z-index: 1100 !important;
    border-style: solid !important;
}

/* Fix dropdown menus being clipped inside table-responsive containers.
   The overflow-x:auto on .table-responsive creates a scrolling context
   that clips absolutely-positioned dropdowns at the container boundary. */
.table-responsive .dropdown-menu {
    position: fixed !important;
    z-index: 1050 !important;
}

/* ========================================
   Search Input Width - Consistent Toolbars
   ======================================== */

/* Ensure search inputs have consistent minimum width */
.gridjs-search-input {
    min-width: 200px;
}

@media (min-width: 768px) {
    .gridjs-search-input {
        min-width: 250px;
    }
}

/* ── Print: element-targeted printing via #print-overlay ──── */
/* exportHelpers.printElement() clones content into #print-overlay,
   which sits directly on body. During print, only that overlay shows. */
@media print {
    body:has(#print-overlay) > *:not(#print-overlay) {
        display: none !important;
    }

    #print-overlay {
        display: block !important;
        position: static !important;
        padding: 20px;
        background: white;
        color: black;
    }

    #print-overlay .d-print-none {
        display: none !important;
    }
}

/* Screen: keep print overlay hidden */
#print-overlay {
    display: none;
}

/* ── Print Layout: A4 Orientation ── */
@media print {
    .print-portrait {
        width: 100%;
    }

    .print-landscape {
        width: 100%;
    }

    .print-header img {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .print-section {
        page-break-inside: avoid;
    }
}

@page {
    margin: 12mm 15mm;
}

body:has(.print-landscape) {
    @page {
        size: A4 landscape;
    }
}

body:has(.print-portrait) {
    @page {
        size: A4 portrait;
    }
}

/* ========================================
   Schedule Timeline
   ======================================== */

/* Grid container for the schedule timeline */
.schedule-grid {
    position: relative;
}

/* Resource label column (sticky left) */
.schedule-resource-label {
    position: sticky;
    left: 0;
    z-index: 3;
    background: inherit;
    min-width: 150px;
    max-width: 150px;
}

/* Resource row */
.schedule-row {
    transition: background-color 0.1s ease;
}

.schedule-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.03) !important;
}

/* Schedule block base styles */
.schedule-block {
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.schedule-block:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    z-index: 5;
}

/* Hard block — solid left border, full opacity background */
.schedule-block--hard {
    border-left-width: 3px;
    border-left-style: solid;
}

/* Soft block — dashed left border, lower opacity background */
.schedule-block--soft {
    border-left-width: 3px;
    border-left-style: dashed;
    opacity: 0.75;
}

.schedule-block--soft:hover {
    opacity: 1;
}

/* Now indicator — vertical red line for current time */
.schedule-now-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dc3545;
    z-index: 4;
    pointer-events: none;
}

.schedule-now-indicator::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
}

/* Hour grid lines */
.schedule-hour-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

/* Block type icons in schedule */
.schedule-block-icon {
    font-size: 0.65rem;
    margin-right: 2px;
    opacity: 0.8;
}

/* Drag-drop styles for schedule */
.schedule-draggable {
    cursor: grab;
    user-select: none;
}

.schedule-draggable:active {
    cursor: grabbing;
}

.schedule-draggable.dragging {
    opacity: 0.5;
}

/* Drop zone highlight when dragging over a resource row */
.schedule-drop-target {
    transition: background-color 0.15s ease;
}

.schedule-drop-target.drag-over {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
}

/* Week view day separator */
.schedule-day-separator {
    border-right: 2px solid var(--bs-border-color);
}

/* Block tooltip on hover */
.schedule-block-tooltip {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: var(--bs-dark);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.schedule-block:hover .schedule-block-tooltip {
    opacity: 1;
}

/* Zoom controls */
.schedule-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.schedule-zoom-controls .btn {
    padding: 0.15rem 0.3rem;
    font-size: 0.7rem;
}

/* Hide schedule timeline on print */
@media print {
    .schedule-grid,
    .schedule-zoom-controls {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════
   Dispatch Planner
   ═══════════════════════════════════════════════ */

.planner-layout {
    --planner-panel-height: calc(100dvh - 166px);
}

.planner-panel-card {
    height: var(--planner-panel-height);
    min-height: 680px;
}

.planner-panel-card > .card-body {
    min-height: 0;
}

.planner-status-card {
    min-height: 0;
}

.planner-shift-suffix-editor {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    vertical-align: middle;
}

.planner-shift-suffix-input {
    width: 8.5rem;
    height: 30px;
    min-height: 30px;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.planner-shift-suffix-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    flex: 0 0 30px;
    line-height: 1;
}

.planner-shift-suffix-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

@media (min-height: 1100px) {
    .planner-layout {
        --planner-panel-height: calc(100dvh - 152px);
    }
}

@media (max-height: 820px) {
    .planner-layout {
        --planner-panel-height: calc(100dvh - 144px);
    }

    .planner-panel-card {
        min-height: 560px;
    }
}

@media (max-width: 991.98px) {
    .planner-panel-card {
        height: 72dvh;
        min-height: 520px;
    }
}

/* Task cards in left panel */
.task-card {
    cursor: grab;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .task-card:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.04);
    }

    .task-card:active {
        cursor: grabbing;
    }

.task-card.dragging {
    opacity: 0.4;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.planner-task-card {
    background-color: var(--bs-body-bg);
}

.planner-task-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.45rem;
    line-height: 1;
    vertical-align: middle;
}

.planner-task-card .badge i {
    line-height: 1;
}

.planner-task-shell {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.planner-task-grip {
    margin-top: 0.18rem;
    line-height: 1;
}

.planner-task-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.planner-task-title-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.planner-task-number {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.planner-task-title {
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.25;
}

.planner-task-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.15rem;
    padding-top: 0.02rem;
}

.planner-task-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
}

.planner-task-facts {
    display: grid;
    gap: 0.45rem;
}

.planner-task-facts-schedule {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planner-task-facts-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-task-facts-route .planner-task-fact:first-child {
    grid-column: 1 / -1;
}

.planner-task-facts-requirements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planner-task-fact {
    min-width: 0;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.16);
    border-radius: 0.35rem;
    background-color: rgba(var(--bs-light-rgb), 0.72);
    padding: 0.36rem 0.44rem;
}

.planner-task-fact-label,
.planner-task-fact-value {
    display: block;
    min-width: 0;
}

.planner-task-fact-label {
    color: rgba(var(--bs-secondary-rgb), 0.82);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
}

.planner-task-fact-value {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
    color: var(--bs-body-color);
    font-size: 0.77rem;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 0.16rem;
    gap: 0.2rem;
}

.planner-task-fact-value > i {
    flex-shrink: 0;
    line-height: 1;
}

.planner-task-fact-value .badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-task-facts-requirements .planner-task-fact-value {
    margin-top: 0.26rem;
}

.planner-task-fact-value .badge i,
.planner-task-chip-row .badge i {
    line-height: 1;
}

.planner-task-meta,
.planner-task-route,
.planner-task-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.planner-task-meta,
.planner-task-route {
    color: var(--bs-secondary-color);
}

.planner-task-route {
    gap: 0.25rem 0.75rem;
}

.planner-task-route > span {
    min-width: 0;
    max-width: 100%;
}

.planner-task-chip-row {
    gap: 0.25rem;
    align-items: center;
    margin-top: 0.45rem !important;
    padding-left: 0.44rem;
}

.planner-task-chip-row .badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
}

.planner-task-details {
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.45rem;
}

.planner-task-detail-section + .planner-task-detail-section {
    margin-top: 0.45rem;
}

.planner-task-detail-label {
    color: var(--bs-secondary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.planner-assigned-task-card {
    cursor: pointer;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.16) !important;
    border-radius: 0.42rem;
    background-color: rgba(var(--bs-light-rgb), 0.36);
    margin: 0.46rem 0.75rem;
    padding: 0.56rem 0.66rem !important;
    transition: background-color 0.15s, border-color 0.15s;
}

.planner-assigned-task-card:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.34) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.planner-assigned-task-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.4rem;
    line-height: 1;
    vertical-align: middle;
}

.planner-assigned-task-card .badge i {
    line-height: 1;
}

.planner-leg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.planner-leg-summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 12rem;
    flex: 1 1 18rem;
}

.planner-leg-vehicle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-leg-actions,
.planner-leg-time-editor {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 0 1 auto;
    min-width: 0;
}

.planner-leg-time-editor {
    flex-wrap: wrap;
}

.planner-leg-time-display {
    white-space: nowrap;
}

.planner-leg-time-input {
    flex: 0 0 7.25rem;
    min-width: 7.25rem;
}

.planner-leg-time-picker {
    min-width: 0;
}

.planner-leg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    flex: 0 0 32px;
}

.planner-assigned-task-header {
    display: block !important;
    position: relative;
    min-width: 0;
}

.planner-assigned-task-main {
    width: 100%;
    min-width: 0;
}

.planner-assigned-task-title-line {
    padding-right: 2.25rem;
}

.planner-assigned-task-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem 0.35rem;
    min-width: 0;
}

.planner-assigned-task-number,
.planner-assigned-task-operation {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.planner-assigned-task-operation,
.planner-assigned-task-divider {
    font-weight: 600;
}

.planner-assigned-task-divider {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

.planner-assigned-task-name {
    color: var(--bs-body-color);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 0.25rem;
}

.planner-assigned-task-product-line .planner-assigned-task-name {
    margin-top: 0;
}

.planner-assigned-task-product-line {
    display: block !important;
    width: 100%;
    min-height: 1.65rem;
    padding-right: 12.75rem;
}

.planner-assigned-task-product-line .badge {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-assigned-task-vehicle-badge {
    position: absolute;
    top: 1.55rem;
    right: 0;
}

.planner-assigned-task-subtitle,
.planner-assigned-task-note {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 0.12rem;
}

.planner-assigned-task-note {
    font-style: italic;
}

.planner-assigned-task-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.25rem;
    position: absolute;
    top: 0;
    right: 0;
}

.planner-assigned-task-facts,
.planner-assigned-task-context {
    display: grid;
    gap: 0.36rem;
}

.planner-assigned-task-facts {
    grid-template-columns: 1.2fr 0.85fr 0.8fr 1.15fr;
    margin-top: 0.55rem;
}

.planner-assigned-task-context {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    margin-top: 0.36rem;
}

.planner-assigned-task-fact,
.planner-assigned-task-context-row {
    min-width: 0;
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.14);
    border-radius: 0.35rem;
    background-color: rgba(var(--bs-light-rgb), 0.6);
    padding: 0.26rem 0.36rem;
}

.planner-assigned-task-label,
.planner-assigned-task-value {
    display: block;
    min-width: 0;
}

.planner-assigned-task-label {
    color: rgba(var(--bs-secondary-rgb), 0.86);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
}

.planner-assigned-task-value {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--bs-body-color);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-assigned-task-value > i {
    flex-shrink: 0;
    line-height: 1;
}

.planner-assigned-task-value .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-assigned-task-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.45rem;
}

.planner-assigned-task-chip-row .badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.4rem;
}

.planner-assigned-task-facts.row,
.planner-assigned-task-context.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

[data-bs-theme="dark"] .planner-task-fact {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

[data-bs-theme="dark"] .planner-task-fact-label {
    color: rgba(173, 190, 218, 0.76);
}

[data-bs-theme="dark"] .planner-task-fact-value {
    color: rgba(226, 235, 255, 0.96);
}

[data-bs-theme="dark"] .planner-task-details {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .planner-assigned-task-fact,
[data-bs-theme="dark"] .planner-assigned-task-context-row {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.035);
}

[data-bs-theme="dark"] .planner-assigned-task-card {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] .planner-assigned-task-card:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.42) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.055);
}

[data-bs-theme="dark"] .planner-assigned-task-label {
    color: rgba(173, 190, 218, 0.78);
}

[data-bs-theme="dark"] .planner-assigned-task-value,
[data-bs-theme="dark"] .planner-assigned-task-name {
    color: rgba(226, 235, 255, 0.96);
}

@media (max-width: 1399.98px) {
    .planner-assigned-task-facts,
    .planner-assigned-task-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planner-leg-time-editor,
    .planner-leg-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Match score highlighting when a shift is selected */
.task-card.match-good {
    border-left: 3px solid var(--bs-success);
}

.task-card.match-partial {
    border-left: 3px solid var(--bs-warning);
}

.task-card.match-poor {
    border-left: 3px solid var(--bs-danger);
}

/* Shift cards in right panel */
.shift-card {
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .shift-card:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.03);
    }

.shift-card-selected {
    background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
    border-left: 3px solid var(--bs-primary);
}

/* Drop zone highlighting — task drop */
.shift-drop-zone-active {
    background-color: rgba(var(--bs-success-rgb), 0.08) !important;
    border: 2px dashed var(--bs-success) !important;
    box-shadow: inset 0 0 8px rgba(var(--bs-success-rgb), 0.15);
}

/* Drop zone highlighting — resource drop */
.resource-drop-zone-active {
    background-color: rgba(var(--bs-info-rgb), 0.08) !important;
    border: 2px dashed var(--bs-info) !important;
    box-shadow: inset 0 0 8px rgba(var(--bs-info-rgb), 0.15);
}

/* Drop zone highlighting — leg-specific task drop (more emphatic than the shift-wide zone
   so dispatchers can see which leg they're about to drop onto in a multi-leg shift) */
.leg-drop-zone-active {
    background-color: rgba(var(--bs-primary-rgb), 0.10) !important;
    border: 2px dashed var(--bs-primary) !important;
    box-shadow: inset 0 0 8px rgba(var(--bs-primary-rgb), 0.18);
}

/* Resource cards in right panel */
.resource-card {
    cursor: default;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .resource-card[draggable="true"] {
        cursor: grab;
    }

    .resource-card[draggable="true"]:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.04);
    }

    .resource-card[draggable="true"]:active {
        cursor: grabbing;
    }

.resource-card.resource-dragging {
    opacity: 0.4;
    background-color: rgba(var(--bs-info-rgb), 0.10);
}

.resource-busy-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 3.25rem;
    min-height: 1.35rem;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.75);
    border-radius: 0.3rem;
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), 0.10);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.15rem 0.45rem;
}

.resource-busy-chip i {
    line-height: 1;
}

.planner-resource-supplier-badge {
    max-width: 9rem;
}

.resource-filter-chips {
    align-items: center;
}

/* Dashed border for empty task zone */
.border-dashed {
    border-style: dashed !important;
}

/* Operation group in left panel */
.sibling-group .bg-light {
    transition: background-color 0.15s;
}

    .sibling-group .bg-light:hover {
        background-color: rgba(var(--bs-secondary-rgb), 0.12) !important;
    }

/* Expanded task list inside shift cards */
.shift-card .btn-icon.text-danger {
    opacity: 0;
    transition: opacity 0.15s;
}

.shift-card .d-flex:hover > .btn-icon.text-danger {
    opacity: 1;
}

.shift-card .btn-icon.text-danger:hover {
    opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    border-radius: 0.25rem;
}

/* Soft background helpers for resource assignment */
.bg-soft-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.bg-soft-success {
    background-color: rgba(var(--bs-success-rgb), 0.08) !important;
}

.bg-soft-info {
    background-color: rgba(var(--bs-info-rgb), 0.08) !important;
}

.planner-coverage-location {
    max-width: 180px;
}

.offcanvas.offcanvas-wide-xl {
    --bs-offcanvas-width: min(760px, 100vw);
    --osen-offcanvas-width: min(760px, 100vw);
    width: min(760px, 100vw);
}

.offcanvas.offcanvas-workspace-full {
    --bs-offcanvas-width: min(1180px, calc(100vw - 2rem));
    --osen-offcanvas-width: min(1180px, calc(100vw - 2rem));
    width: min(1180px, calc(100vw - 2rem));
}

.task-staffing-select {
    width: auto;
    min-width: 180px;
}

@media (max-width: 767.98px) {
    .offcanvas.offcanvas-wide-xl,
    .offcanvas.offcanvas-workspace-full {
        --bs-offcanvas-width: 100vw;
        --osen-offcanvas-width: 100vw;
        width: 100vw;
    }
}

.operations-overview-filter {
    min-width: 170px;
}

.operations-overview-search {
    min-width: 220px;
}

.operations-overview-table {
    max-height: calc(100vh - 250px);
}

.operations-overview-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Sticky list toolbar ───────────────────────────────────────────────────
   Keeps a list page's filter/action bar visible while scrolling long tables.
   Anchored below the fixed topbar via --osen-topbar-height rather than a magic
   number, so it follows the theme if that height changes.

   z-index sits below .app-topbar (1035) so the topbar and its dropdowns still
   win, but above table content so rows scroll underneath rather than through.
   The negative top margin + matching padding stop a sliver of scrolled content
   showing above the card as it sticks. */
.list-toolbar-sticky {
    position: sticky;
    top: var(--osen-topbar-height, 70px);
    z-index: 1020;
}

/* Opaque background: the card would otherwise let rows show through as they
   scroll beneath it. Inherits the theme's card colour in both light and dark. */
.list-toolbar-sticky > .card-body {
    background-color: var(--osen-card-bg, var(--osen-secondary-bg));
    border-radius: inherit;
}

/* ─── User Guides reader ───────────────────────────────────────────────────
   The on-screen twin of the PDF guides. Sections are read one at a time and
   are often arrived at from a search result, so each one has to stand alone.
   Theme-aware throughout: --osen-*, never --bs-*. */

.guide-search-input {
    min-width: 260px;
}

.guide-nav {
    position: sticky;
    top: calc(var(--osen-topbar-height, 70px) + 1rem);
}

.guide-nav-sections {
    border-left: 2px solid var(--osen-border-color);
    margin-left: 1rem;
    padding-left: .25rem;
}

.guide-nav-section {
    color: var(--osen-secondary-color);
    font-size: .8125rem;
    padding: .25rem .5rem;
    border: 0;
    background: none;
}

.guide-nav-section:hover {
    background-color: var(--osen-tertiary-bg);
    color: var(--osen-body-color);
}

.guide-nav-section.active {
    color: var(--osen-primary);
    font-weight: 600;
}

/* Reader body ------------------------------------------------------------ */

.guide-reader {
    max-width: 78ch;          /* measure, not full card width — this is prose */
    line-height: 1.6;
}

.guide-intro {
    margin-bottom: 1rem;
}

.guide-paragraph {
    margin-bottom: .75rem;
}

.guide-list {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.guide-list li {
    margin-bottom: .35rem;
}

.guide-subsection {
    border-top: 1px solid var(--osen-border-color);
    padding-top: 1rem;
    margin-top: 1.5rem;
}

.guide-table th {
    background-color: var(--osen-tertiary-bg);
    font-size: .8125rem;
}

.guide-callout {
    margin-bottom: 1rem;
}

/* Numbered flow: a step column with a connecting line down the middle. */
.guide-flow {
    background-color: var(--osen-tertiary-bg);
    border-radius: .375rem;
    padding: .875rem 1rem;
}

.guide-flow li {
    position: relative;
    padding-bottom: .625rem;
}

.guide-flow li:last-child {
    padding-bottom: 0;
}

.guide-flow-step {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--osen-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Status flows are authored with newlines and arrows; keep them. */
.guide-statusflow {
    background-color: var(--osen-tertiary-bg);
    border-radius: .375rem;
    padding: .75rem 1rem;
    white-space: pre-line;
    font-size: .875rem;
}

.guide-qa-question {
    font-weight: 600;
    margin-bottom: .25rem;
}

.guide-qa-question::before {
    content: "Q: ";
    color: var(--osen-primary);
}

.guide-qa-answer {
    padding-left: 1.25rem;
    color: var(--osen-secondary-color);
}

/* Search results --------------------------------------------------------- */

.guide-result {
    display: block;
    border: 0;
    border-bottom: 1px solid var(--osen-border-color);
    background: none;
    padding: .75rem .25rem;
    color: inherit;
}

.guide-result:last-child {
    border-bottom: 0;
}

.guide-result:hover {
    background-color: var(--osen-tertiary-bg);
}

/* ─── Guide panel (pinnable help offcanvas) ───────────────────────────────
   Floating by default; pinned shifts the topbar and page content across so
   the panel sits beside the work instead of on top of it. The topbar already
   transitions its margins, so the shift animates for free. */

:root {
    --guide-panel-width: 460px;
}

#guidePanelCanvas {
    /* The theme's offcanvas reads --osen-offcanvas-width; --bs-* is inert here. */
    --osen-offcanvas-width: var(--guide-panel-width);
}

.page-content {
    transition: margin-right .25s ease-in-out;
}

body.guide-pinned .app-topbar,
body.guide-pinned .page-content {
    margin-right: var(--guide-panel-width);
}

/* Prose inside a 460px panel wants a narrower measure than the full page. */
.guide-panel-reader {
    max-width: none;
    font-size: .9375rem;
}

.guide-panel-reader .guide-table {
    font-size: .8125rem;
}

/* Below lg there is no room to shift anything: the panel goes full width and
   floats, whatever the remembered pin says. */
@media (max-width: 991.98px) {
    #guidePanelCanvas {
        --osen-offcanvas-width: 100vw;
    }

    body.guide-pinned .app-topbar,
    body.guide-pinned .page-content {
        margin-right: 0;
    }
}

/* Disabled soft buttons. The theme gives them the same text and background colour
   (e.g. --osen-btn-disabled-color and -bg both var(--osen-secondary)), so a button
   disabled while it works showed a solid block and its spinner or label vanished.
   Keep the soft look instead; .btn:disabled still applies the dimming opacity. */
.btn-soft-primary   { --osen-btn-disabled-bg: var(--osen-primary-bg-subtle); }
.btn-soft-secondary { --osen-btn-disabled-bg: var(--osen-secondary-bg-subtle); }
.btn-soft-success   { --osen-btn-disabled-bg: var(--osen-success-bg-subtle); }
.btn-soft-info      { --osen-btn-disabled-bg: var(--osen-info-bg-subtle); }
.btn-soft-warning   { --osen-btn-disabled-bg: var(--osen-warning-bg-subtle); }
.btn-soft-danger    { --osen-btn-disabled-bg: var(--osen-danger-bg-subtle); }
.btn-soft-dark      { --osen-btn-disabled-bg: var(--osen-dark-bg-subtle); }
.btn-soft-primary, .btn-soft-secondary, .btn-soft-success, .btn-soft-info,
.btn-soft-warning, .btn-soft-danger, .btn-soft-dark {
    --osen-btn-disabled-border-color: transparent;
}