/* Active nav link highlight */
.navbar {
    position: relative;
    z-index: 1030;
}

.navbar .dropdown-menu {
    z-index: 1040;
}

.navbar .nav-link.active {
    color: #dc3545 !important;
    font-weight: 600;
}

/* Quiet page breadcrumbs */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-padding-x: 0.35rem;
    align-items: center;
    column-gap: 0;
    font-size: 0.82rem;
    margin-bottom: 0;
}

.breadcrumb .breadcrumb-item {
    line-height: 1.2;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    opacity: 0.55;
}

.breadcrumb .breadcrumb-item.active {
    color: var(--bs-secondary-color);
}

/* Select2 Bootstrap 5 size fixes - match form-control exactly */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    padding-right: 2rem;
    line-height: 1.5;
    font-size: 1rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
    font-size: 1rem;
}

/* Dropdown results */
.select2-container--bootstrap-5 .select2-dropdown {
    font-size: 1rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__option {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
}

/* Small size variant (.form-select-sm) */
.select2-container--bootstrap-5.select2-container--sm .select2-selection {
    min-height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.select2-container--bootstrap-5.select2-container--sm .select2-selection--single .select2-selection__rendered {
    font-size: 0.875rem;
}

.select2-container--bootstrap-5.select2-container--sm .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

.select2-container--bootstrap-5.select2-container--sm .select2-dropdown {
    font-size: 0.875rem;
}

.select2-container--bootstrap-5.select2-container--sm .select2-dropdown .select2-results__option {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.select2-container--bootstrap-5.select2-container--sm .select2-dropdown .select2-search .select2-search__field {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Alerts Bell Icon */
#alertsBellBtn {
    background: none;
    border: none;
    cursor: pointer;
}

#alertsBellBtn:hover {
    color: var(--bs-primary);
}

#alertsBadge {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    top: 6px !important;
}

/* Alerts Sidebar */
#alertsSidebar {
    width: 400px;
    max-width: 100%;
}

#alertsSidebar .offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

#alertsList .list-group-item {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

#alertsList .list-group-item:first-child {
    border-top: none;
}

#alertsList .list-group-item-light {
    background-color: var(--bs-light);
}

/* Indicator size variant - extra small */
.indicator-xs {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Checklist completed row - dimmed */
.checklist-completed {
    opacity: 0.5;
}

.checklist-completed .btn,
.checklist-completed .indicator {
    opacity: 0.7;
}

/* CSP-compliant media grid styles */
.cursor-pointer { cursor: pointer; }

.upcoming-tasks-toggle .collapse-icon {
    transition: transform 0.2s ease;
}

.upcoming-tasks-toggle[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .upcoming-tasks-toggle .collapse-icon {
        transition: none;
    }
}

.media-video-preview {
    width: 100%;
    height: 80px;
    background: #1a1a2e;
}

.media-pdf-preview {
    width: 100%;
    height: 80px;
    background: #2d1b1b;
}

.media-img-thumbnail {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.media-icon-play,
.media-icon-pdf {
    font-size: 2rem;
    opacity: 0.8;
}

.media-overlay-info {
    background: rgba(0,0,0,0.6);
    font-size: 0.65rem;
}

.media-locked-icon,
.media-delete-form {
    z-index: 10;
}

.media-lock-icon {
    font-size: 0.7rem;
}

.media-delete-btn {
    font-size: 0.6rem;
    line-height: 1.2;
}

/* Common utility classes */
.btn-delete-note { font-size: 0.7rem; }
.min-w-200 { min-width: 200px; }
.min-w-120 { min-width: 120px; }
.overflow-x-auto { overflow-x: auto !important; }
.col-w-40 { width: 40px; }
.col-w-48 { width: 48px; }
.col-w-50 { width: 50px; }
.col-w-80 { width: 80px; }
.col-w-100 { width: 100px; }
.col-w-120 { width: 120px; }
.col-w-150 { width: 150px; }
.scroll-container-300 { max-height: 300px; overflow-y: auto; }

.overflow-x-force {
    overflow-x: auto !important;
}

.col-w-30 {
    width: 30px;
}

.col-w-48 {
    width: 48px;
}

.col-w-110 {
    width: 110px;
}

.col-w-120 {
    width: 120px;
}

.img-max-h-120 {
    max-height: 120px;
}

.swal-tie-p {
    text-align: left;
    font-size: 0.9rem;
}

.swal-tie-check {
    background-color: #fff !important;
    border-color: #000 !important;
}

.swal-tie-check:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Unit edit page premium surface treatment */
.unit-edit-page {
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    max-width: 1180px;
    padding-bottom: 2rem;
}

[data-bs-theme="dark"] .unit-edit-page {
    --unit-edit-bg: #0f141b;
    --unit-edit-surface: #171d25;
    --unit-edit-surface-strong: #1d2530;
    --unit-edit-border: rgba(148, 163, 184, 0.2);
    --unit-edit-border-strong: rgba(148, 163, 184, 0.32);
    --unit-edit-text: #eef3f8;
    --unit-edit-muted: #9eacba;
    --unit-edit-accent: #4f8cff;
    --unit-edit-accent-soft: rgba(79, 140, 255, 0.16);
}

[data-bs-theme="dark"] .unit-edit-page .card {
    --bs-card-bg: var(--unit-edit-surface);
    --bs-card-border-color: var(--unit-edit-border);
    border-radius: 0.7rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

[data-bs-theme="dark"] .unit-edit-page .card-body {
    padding: 1.35rem 1.5rem;
}

[data-bs-theme="dark"] .unit-edit-page .card-header {
    align-items: center;
    background: linear-gradient(90deg, var(--unit-edit-surface-strong), var(--unit-edit-surface));
    border-bottom-color: var(--unit-edit-border);
    color: var(--unit-edit-text);
    display: flex;
    gap: 0.35rem;
    padding: 0.9rem 1.5rem;
    position: relative;
}

[data-bs-theme="dark"] .unit-edit-page .card-header::before {
    background: var(--unit-edit-accent);
    border-radius: 999px;
    content: "";
    height: 1.25rem;
    left: 0;
    position: absolute;
    width: 3px;
}

[data-bs-theme="dark"] .unit-edit-page .card-header.bg-success-subtle {
    background: linear-gradient(90deg, rgba(25, 135, 84, 0.22), var(--unit-edit-surface));
    color: #b7f5d1 !important;
}

[data-bs-theme="dark"] .unit-edit-page .card-header.bg-success-subtle::before {
    background: #45d483;
}

[data-bs-theme="dark"] .unit-edit-page .text-uppercase.small.fw-semibold {
    color: var(--unit-edit-muted) !important;
    font-size: 0.72rem;
    letter-spacing: 0;
}

[data-bs-theme="dark"] .unit-edit-page .form-label {
    color: #d9e2ec;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

[data-bs-theme="dark"] .unit-edit-page .form-control,
[data-bs-theme="dark"] .unit-edit-page .form-select,
[data-bs-theme="dark"] .unit-edit-page .form-control.bg-white,
[data-bs-theme="dark"] .unit-edit-page .form-select.bg-white {
    background-color: #111821 !important;
    border-color: var(--unit-edit-border-strong);
    border-radius: 0.55rem;
    color: var(--unit-edit-text);
    min-height: 2.65rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

[data-bs-theme="dark"] .unit-edit-page .form-control::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 0.68;
}

[data-bs-theme="dark"] .unit-edit-page .unit-edit-location-card .card-body {
    padding-bottom: 1.5rem;
}

[data-bs-theme="dark"] .unit-edit-page .unit-edit-location-card .row {
    row-gap: 1.15rem;
}

[data-bs-theme="dark"] .unit-edit-page .unit-edit-location-card .form-label {
    margin-bottom: 0.45rem;
}

[data-bs-theme="dark"] .unit-edit-page .unit-edit-location-card .form-control {
    line-height: 1.65;
}

[data-bs-theme="dark"] .unit-edit-page .form-control:hover,
[data-bs-theme="dark"] .unit-edit-page .form-select:hover,
[data-bs-theme="dark"] .unit-edit-page .form-control.bg-white:hover,
[data-bs-theme="dark"] .unit-edit-page .form-select.bg-white:hover {
    border-color: rgba(148, 163, 184, 0.5);
}

[data-bs-theme="dark"] .unit-edit-page .form-control:focus,
[data-bs-theme="dark"] .unit-edit-page .form-select:focus,
[data-bs-theme="dark"] .unit-edit-page .form-control.bg-white:focus,
[data-bs-theme="dark"] .unit-edit-page .form-select.bg-white:focus {
    background-color: #121b26 !important;
    border-color: var(--unit-edit-accent);
    box-shadow: 0 0 0 0.22rem var(--unit-edit-accent-soft);
    color: var(--unit-edit-text);
}

[data-bs-theme="dark"] .unit-edit-page .form-control-plaintext {
    background-color: #111821 !important;
    border-color: var(--unit-edit-border-strong) !important;
    border-radius: 0.55rem !important;
    color: var(--unit-edit-text);
}

[data-bs-theme="dark"] .unit-edit-page .form-text,
[data-bs-theme="dark"] .unit-edit-page .text-muted {
    color: var(--unit-edit-muted) !important;
}

[data-bs-theme="dark"] .unit-edit-page .bg-body-tertiary {
    background-color: rgba(148, 163, 184, 0.08) !important;
}

[data-bs-theme="dark"] .unit-edit-page .border {
    border-color: var(--unit-edit-border) !important;
}

[data-bs-theme="dark"] .unit-edit-page .btn {
    border-radius: 0.55rem;
    font-weight: 600;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

[data-bs-theme="dark"] .unit-edit-page .btn:hover {
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .unit-edit-page .btn:focus-visible {
    box-shadow: 0 0 0 0.22rem var(--unit-edit-accent-soft);
}

[data-bs-theme="dark"] .unit-edit-page .table-responsive,
[data-bs-theme="dark"] .unit-edit-page .list-group-item {
    background-color: #111821;
    border-color: var(--unit-edit-border);
}

[data-bs-theme="dark"] .unit-edit-page .select2-container--bootstrap-5 .select2-selection {
    background-color: #111821;
    border-color: var(--unit-edit-border-strong);
    border-radius: 0.55rem;
    color: var(--unit-edit-text);
    min-height: 2.65rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

[data-bs-theme="dark"] .unit-edit-page .select2-container--bootstrap-5 .select2-selection:hover {
    border-color: rgba(148, 163, 184, 0.5);
}

[data-bs-theme="dark"] .unit-edit-page .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .unit-edit-page .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--unit-edit-accent);
    box-shadow: 0 0 0 0.22rem var(--unit-edit-accent-soft);
}

[data-bs-theme="dark"] .unit-edit-page .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--unit-edit-text);
    line-height: 1.85;
}

.z-index-bulk-bar {
    z-index: 1050;
}

.wo-work-order-card .wo-card-dl dt {
    font-weight: 600;
}

.min-w-80 {
    min-width: 80px;
}

.min-w-100 {
    min-width: 100px;
}

.min-w-220 {
    min-width: 220px;
}

.min-w-200 {
    min-width: 200px;
}

.min-w-120 {
    min-width: 120px;
}

.min-w-300 {
    min-width: 300px;
}

.form-inline-auto {
    width: auto;
    display: inline-block;
}

.welcome-svg-mix-hard-light {
    mix-blend-mode: hard-light;
}

.welcome-svg-mix-plus-darker {
    mix-blend-mode: plus-darker;
}

.photo-thumb-tile {
    cursor: pointer;
}

.photo-thumb-video-placeholder {
    width: 100%;
    height: 150px;
    background: #1a1a2e;
}

.photo-thumb-pdf-placeholder {
    width: 100%;
    height: 150px;
    background: #2d1b1b;
}

.photo-thumb-img-cover {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.photo-thumb-caption {
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.7rem;
}

.icon-3rem-soft {
    font-size: 3rem;
    opacity: 0.8;
}

.avail-col-time {
    min-width: 80px;
}

.avail-col-tech {
    min-width: 100px;
}

.avail-bg-overlap {
    background-color: #e0cffc;
}

.avail-bg-current-wo {
    background-color: #cfe2ff;
}

.lightbox-max-vh {
    max-height: 70vh;
}

.lightbox-object-contain {
    object-fit: contain;
}

.lightbox-pdf-frame {
    width: 100%;
    height: 70vh;
    border: none;
}

.img-max-h-200 {
    max-height: 200px;
}

.icon-caret-tiny {
    font-size: 0.6em;
}

.qr-reader-full-width {
    width: 100%;
}

.max-w-320 {
    max-width: 320px;
}

.sticky-sidebar {
    top: 20px;
}

.notes-list-scroll {
    max-height: 200px;
    overflow-y: auto;
}

.signature-canvas {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    width: 100%;
    height: 200px;
    touch-action: none;
    cursor: crosshair;
}

.table-date-col {
    width: 40%;
}

.badge-xs {
    font-size: 0.65rem;
}

.photo-thumbnail-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
}

.photo-thumbnail-video {
    width: 50px;
    height: 50px;
    background: #1a1a2e;
    cursor: pointer;
}

.photo-thumbnail-file {
    width: 50px;
}

.print-toolbar-btn-secondary {
    background: #6c757d;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.dashboard-progress-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;
}

.dashboard-progress-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

/* Dim form placeholder text. Browsers default to ~54% opacity but inherit
   the input's solid foreground color, which still reads as fairly bold —
   especially against white inputs. Drop the opacity further so placeholders
   feel like hints rather than content. Works in both light and dark themes. */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.55;
}

/* EPA compliance panel — used on the unit edit page (§9.2). The cell
   showing the WO line item's catalog name needs a bounded width so long
   names don't blow out the table; truncation handled by `.text-truncate`. */
.compliance-event-item-name {
    max-width: 14rem;
}

/* Admin inventory inline adjust forms (avoid inline width styles for CSP hygiene) */
.inv-adjust-delta {
    width: 5rem;
}

.inv-adjust-note {
    width: 8rem;
}

.inventory-action-group .btn {
    min-width: 2.15rem;
}

.inventory-row-danger > td:first-child {
    box-shadow: inset 0.25rem 0 0 var(--bs-danger);
}

.inventory-row-warning > td:first-child {
    box-shadow: inset 0.25rem 0 0 var(--bs-warning);
}

.inventory-row-info > td:first-child {
    box-shadow: inset 0.25rem 0 0 var(--bs-info);
}

.inventory-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.inventory-summary-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
}

.inventory-summary-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inventory-summary-label {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.index-page-help {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--bs-info-rgb), 0.28);
    border-radius: 0.5rem;
    background:
        linear-gradient(135deg, rgba(var(--bs-info-rgb), 0.13), rgba(var(--bs-primary-rgb), 0.06)),
        var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.index-page-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(var(--bs-info-rgb), 0.18);
    color: var(--bs-info);
}

.index-page-help-copy {
    max-width: 78rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.settings-help-text summary {
    cursor: pointer;
}

.settings-help-text-full,
.settings-help-text-less,
.settings-help-text[open] .settings-help-text-preview,
.settings-help-text[open] .settings-help-text-more {
    display: none;
}

.settings-help-text[open] .settings-help-text-full,
.settings-help-text[open] .settings-help-text-less {
    display: inline;
}

.route-gps-autocomplete-results {
    top: calc(100% + 0.25rem);
    z-index: 1080;
    max-height: 16rem;
    overflow-y: auto;
}

.route-gps-autocomplete-results .list-group-item {
    cursor: pointer;
}

.route-gps-autocomplete-results .route-gps-google-attribution {
    cursor: default;
    font-size: 0.75rem;
}

.route-gps-help-button {
    --bs-btn-padding-x: 0.45rem;
    --bs-btn-padding-y: 0.2rem;
}

.route-gps-fix-button {
    background: #3a7afe;
    border-color: #3a7afe;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(58, 122, 254, 0.22);
}

.route-gps-fix-button:hover,
.route-gps-fix-button:focus {
    background: #5b91ff;
    border-color: #5b91ff;
    color: #ffffff;
}

.warranty-packet-review-modal {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.warranty-packet-review-modal .swal2-icon.swal2-info {
    border-color: var(--bs-info);
    color: var(--bs-info);
}

.warranty-packet-review-title {
    color: var(--bs-emphasis-color);
}

.warranty-packet-review-body {
    color: var(--bs-body-color);
}

.warranty-packet-review-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-align: start;
}

.warranty-packet-review-option .form-check-input {
    flex: 0 0 auto;
}
.schedule-event-commissioning {
    background: #8b5cf6;
    border-left-color: #6d28d9;
}