html {
 font-size:14px;
}
@media (min-width:768px) { html { font-size:16px; } }

/* SVS Brand Colors */
:root {
    --svs-primary: #123659;
    --svs-primary-rgb: 18, 54, 89;
    --bs-primary: #123659;
    --bs-primary-rgb: 18, 54, 89;
    --bs-primary-text-emphasis: #0a1f32;
    --bs-primary-bg-subtle: #d1d8e0;
    --bs-primary-border-subtle: #a3b3c4;
    --bs-link-color: #123659;
    --bs-link-color-rgb: 18, 54, 89;
    --bs-link-hover-color: #0a1f32;
    --bs-link-hover-color-rgb: 10, 31, 50;
}

/* Apply SVS primary color to default link styles (sortable th headers, body links, etc.) */
a {
    color: var(--svs-primary);
}

a:hover {
    color: #0a1f32;
}

/* Hover effect for text links inside tables: turn SVS blue and slightly bolder.
   Excludes .btn-styled anchors (pencil/trash action buttons keep their button styling).
   Uses text-shadow to fake bold without layout shift (font-weight changes glyph width
   and would jiggle adjacent columns). */
table a:not(.btn) {
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

table a:not(.btn):hover {
    color: var(--svs-primary);
    text-shadow: 0.5px 0 0 currentColor;
}

/* Apply SVS primary color to Bootstrap primary classes */
.btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.bg-primary,
.badge.bg-primary,
.alert-primary {
    background-color: var(--svs-primary) !important;
    border-color: var(--svs-primary) !important;
}

.btn-outline-primary {
    color: var(--svs-primary);
    border-color: var(--svs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: #fff;
}

.text-primary {
    color: var(--svs-primary) !important;
}

.border-primary {
    border-color: var(--svs-primary) !important;
}

.table-primary {
    background-color: rgba(var(--svs-primary-rgb), 0.1) !important;
}

/* Dashboard Widget Header Styling - SVS Primary Blue */
.card-header.bg-primary {
    background-color: var(--svs-primary) !important;
}

/* SVS Expando - Dark blue header with white text/icons */
.card-header.svs-expando-header {
    background-color: var(--svs-primary) !important;
    border-color: var(--svs-primary) !important;
}

.card-header.svs-expando-header .btn-link {
    color: #ffffff !important;
    text-decoration: none;
}

.card-header.svs-expando-header .btn-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.card-header.svs-expando-header svg,
.card-header.svs-expando-header .btn-link i {
    fill: #ffffff;
    color: #ffffff;
}

/* Rotate chevron when collapsed/expanded */
[data-bs-toggle="collapse"] .bi-chevron-down,
[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.2s ease-in-out;
}

[data-bs-toggle="collapse"][aria-expanded="false"] .bi-chevron-down,
[data-bs-toggle="collapse"][aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}

/* Make all form labels bolder */
.form-label,
label.form-label {
    font-weight: 600;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:000 .1rem white,000 .25rem #258cfb; }
html { position: relative; min-height:100%; }
body { margin-bottom:60px; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.site-logo { max-width:180px; height: auto; }
.avatar { width:40px; height:40px; position: relative; }
.avatar.avatar-sm { width:36px; height:36px; }
.avatar-img { width:100%; height:100%; object-fit: cover; border-radius:50%; display: block; }
.avatar-fallback { width:100%; height:100%; border-radius:50%; background-color: #dee2e6; color: #6c757d; }
/* New layout adjustments */
.content-offset-fixed-top { padding-top:80px; }
.breadcrumb { background:transparent; font-size:.85rem; padding:.25rem0; margin-bottom:.25rem; }
.breadcrumb a { text-decoration:none; }
@media (max-width:575.98px) { .breadcrumb { font-size:.75rem; } }
/* Checklist Items Table Styling */
.checklist-items-table {
    width: 100%;
    margin-bottom: 0;
}

/* Zebra striping for checklist items - use highly specific selectors */
.table.table-sm.checklist-items-table tbody tr:nth-child(even),
table.checklist-items-table tbody tr:nth-child(even) {
    background-color: #f8f9fa !important; /* Light gray for even rows */
}

.table.table-sm.checklist-items-table tbody tr:nth-child(odd),
table.checklist-items-table tbody tr:nth-child(odd) {
    background-color: #ffffff !important; /* White for odd rows */
}

/* Hover effect for checklist item rows */
.table.table-sm.checklist-items-table tbody tr,
table.checklist-items-table tbody tr {
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.table.table-sm.checklist-items-table tbody tr:hover,
table.checklist-items-table tbody tr:hover {
    background-color: #e7f3ff !important; /* Light blue on hover - override zebra striping */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure text remains readable on hover */
.table.table-sm.checklist-items-table tbody tr:hover td,
table.checklist-items-table tbody tr:hover td {
    color: #212529;
}

/* Make action buttons more visible on hover */
.table.table-sm.checklist-items-table tbody tr:hover .item-actions-cell a,
table.checklist-items-table tbody tr:hover .item-actions-cell a {
    opacity: 1;
}

/* Slightly dim action buttons when not hovering */
.table.table-sm.checklist-items-table tbody tr:not(:hover) .item-actions-cell a,
table.checklist-items-table tbody tr:not(:hover) .item-actions-cell a {
 opacity: 0.6;
    transition: opacity 0.15s ease-in-out;
}

/* Checklist item action button alignment fix */
.action-icon-placeholder {
    display: inline-block;
 width: 1.25rem; /* Match the approximate width of Font Awesome icons */
 visibility: hidden; /* Keep space but make invisible */
}

.item-actions-cell a {
display: inline-block;
    width: 1.25rem;
    text-align: center;
}

/* Nested dropdown submenu support */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0;
}

/* For dropend variant (right-side submenu) */
.dropend > .dropdown-toggle {
  display: flex;
    align-items: center;
 justify-content: space-between;
    width: 100%;
    white-space: nowrap;
}

.dropend .dropdown-toggle::after {
    display: inline-block;
    margin-left: auto;
    padding-left: 0.5rem;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid transparent;
 border-right: 0;
    border-bottom: 0.3em solid transparent;
 border-left: 0.3em solid;
  border-left-color: currentColor;
}

.dropend .dropdown-menu {
    position: absolute;
top: 0;
 right: auto;
 left: 100%;
  margin-top: 0;
    margin-left: 0.125rem;
}

/* Show submenu on hover and click */
.dropdown-menu .dropend:hover > .dropdown-menu,
.dropdown-menu .dropend > .dropdown-menu.show {
    display: block;
}

/* Hover behavior for nested dropdowns */
.dropdown-menu .dropdown-toggle:hover {
    background-color: #e9ecef;
}

/* Jump Navigation */
.jump-link {
    transition: all 0.2s ease;
}

.jump-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.jump-link i {
    transition: transform 0.2s ease;
}

.jump-link:hover i {
    transform: scale(1.1);
}

/* Smooth scroll offset for sections with IDs */
html {
    scroll-behavior: smooth;
}

/* Add scroll padding to account for fixed header */
:root {
    scroll-padding-top: 80px;
}

/* Collapsible Section Styling */
.collapse-icon {
  transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.btn-link[aria-expanded="false"] .collapse-icon {
    transform: rotate(-90deg);
}

.btn-link[aria-expanded="true"] .collapse-icon {
    transform: rotate(0deg);
}

.card-header .btn-link {
    font-weight: 500;
}

.card-header .btn-link:hover {
 color: #0d6efd !important;
}

.card-header .btn-link:focus {
    box-shadow: none;
}

/* Back to Top Button */
.back-to-top-btn {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.back-to-top-btn:hover {
    opacity: 1;
    color: #0d6efd !important;
    transform: translateY(-2px);
}

.back-to-top-btn:focus {
    box-shadow: none;
}

.back-to-top-btn i {
    font-size: 0.875rem;
}

/* Section card spacing */
#job-details-section .card,
#notes-section .card,
#technicians-section .card,
#expenses-section .card,
#logged-time-section .card,
#checklists-section .card {
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#job-details-section .card-header,
#notes-section .card-header,
#technicians-section .card-header,
#expenses-section .card-header,
#logged-time-section .card-header,
#checklists-section .card-header {
  background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Shared Image Preview Modal — zoom/pan container */
.image-preview-container {
    height: 75vh;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    background: #1a1a1a;
}

.image-preview-container.is-dragging {
    cursor: grabbing;
}

.image-preview-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 0 0;
    transition: transform 0.15s ease;
}

.image-preview-container.is-dragging img {
    transition: none;
}

/* Technician tile selection — clickable tiles with selected highlight */
.tech-tile {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.tech-tile:hover {
    background-color: #f0f6ff;
}

.tech-tile:has(input:checked) {
    background-color: #e7f3ff;
    border-color: #90c2ff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.tech-tile .form-check-input {
    display: none;
}