html {
  font-size: 14px;
  scrollbar-gutter: stable;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: #354CA0;
}

.chv-file-thumb {
    max-width: 4rem;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
}

.chv-file-thumb-lg {
    width: 160px;
    max-width: none;
    height: 110px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #d0d0d0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.chv-info-btn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.65rem;
    padding: 0;
    line-height: 20px;
    cursor: pointer;
    z-index: 1;
}

/* === SPLIT LAYOUT (details + files panel) === */
#chv-split-layout {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
}
#chv-split-main {
    flex: 1;
    min-width: 0;
}
#chv-split-files {
    width: 500px;
    flex-shrink: 0;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 1rem;
    height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    background: #fff;
}
.chv-files-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #d0d0d0;
    background: #f6f8fd;
    flex-shrink: 0;
}
.chv-files-panel-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #354CA0;
}
.chv-panel-x-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}
.chv-panel-x-btn:hover { color: #c00; }
.chv-files-close-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 20;
    font-size: 1.5rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid #ddd !important;
    border-radius: 50%;
    color: #555;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
#chv-files-list-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#chv-files-iframe {
    width: 100%;
    flex: 1;
    border: none;
    display: block;
    min-height: 0;
}
.chv-panel-preview-toolbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: #f6f8fd;
    flex-shrink: 0;
}

.chv-page-title {
    font-weight: 600;
    color: #354CA0;
    margin-bottom: 0.75rem;
}

.form-check-input:checked {
    background-color: #354CA0 !important;
    border-color: #354CA0 !important;
}

.form-check-input:focus {
    border-color: rgba(53, 76, 160, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(53, 76, 160, 0.25) !important;
}

.form-select:focus,
.form-control:focus {
    border-color: rgba(53, 76, 160, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(53, 76, 160, 0.25) !important;
}

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

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-group.required .control-label:after {
    content: "*"; 
    color: red;
}

.event-list-pending {
    background-image: linear-gradient(#ffffff, #eeeeee);
    vertical-align: middle;
    font-weight: bold;
}

.event-list-new {
    font-weight: bold;
    vertical-align: middle;
}

.event-list-in-progress {
    background-image: linear-gradient(#f1ffea, #afffbd);
    vertical-align: middle;
}

.event-list-completed {
    color: dimgray;
    background-image: linear-gradient(#f0f6ff, #d9e8fc);
    vertical-align: middle;
}

.event-another-appraiser {
    color: dimgray;
    background-color: lightgray;
    vertical-align: middle;
}

.event-list-self-sampled {
    background-image: linear-gradient(#fafacf, #f5f5b5);
    vertical-align: middle;
}

#dt-search-0 {
    width: 25rem;
    height: 2.5rem;
}

div.dt-container div.dt-search label {
    font-size: 1.5rem;
}

.file-preview-content-container {
    display: flex;
    justify-content: center;
}

@media screen and (orientation:portrait) {
    .file-preview-content {
        max-width: 85vw;
        max-height: 85vh;
        object-fit: scale-down;
    }
}

@media screen and (orientation:landscape) {
    .file-preview-content {
        max-width: 85vw;
        max-height: 85vh;
        object-fit: scale-down;
    }
}


.file-preview-arrow-left {
    font-size: 4rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left:0;
    transform: translate(0, -50%);
    z-index: 1000;
}

.file-preview-arrow-right {
    font-size: 4rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 1000;
}

.nodecor > a {
    text-decoration: none;
}

.btn-primary {
    margin-top: 0.3rem;
}

.btn-secondary {
    margin-bottom: 0;
    margin-top: 0.3rem;
}

.btn-danger {
    margin-top: 0.3rem;
}

@media (min-width:1281px) {
    .header-btn{
        font-size: 1rem;
    }
}


.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    width:80%;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-image: linear-gradient(#fff, #f8f8f8);
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-image: linear-gradient(#ddd, #d8d8d8);
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-image: linear-gradient(#5555dd, #4444ff) !important;
    color: #ffffff;
    font-weight:bold;
}

.floating-select {
    width: 100%;
    padding: 1rem 0.75rem;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    -webkit-appearance: none;
}

.floating-select:focus + label,
.floating-select.has-value + label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    width: 100%;
}

span.multiselect-native-select + label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    width: 100%;
    pointer-events: none;
}

.multiselect-native-select .btn-group {
    width: 100%;
    height: 48px;
}

.multiselect-native-select .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 100%;
    top: 100%;
    transform: none !important;
    inset: unset !important;
}

.multiselect-container .multiselect-option:hover,
.multiselect-container .multiselect-group:hover,
.multiselect-container .multiselect-all:hover,
.multiselect-container .multiselect-option:focus,
.multiselect-container .multiselect-group:focus,
.multiselect-container .multiselect-all:focus {
    background-color: #dce8f7 !important;
    color: #354CA0 !important;
}

.multiselect-container .multiselect-option.active,
.multiselect-container .multiselect-group.active,
.multiselect-container .multiselect-all.active {
    background-color: #354CA0 !important;
    color: #fff !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #dce8f7;
    color: #354CA0;
}

.dropdown-toggle  {
    text-align: left !important;
    padding-top: 1.625rem;
}

.required-marker{
    color: red;
    white-space: nowrap;
}

.input-guidance {
    font-size: small;
    opacity: 0.7;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.form-floating {
    margin-bottom: 1.5rem !important;
}

.header-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media only screen and (min-width: 830px) {
    #eventsSearchInputContainer {
        display: flex;
        align-items: center;
        background-color: #ccddff55;
        padding: 0.5rem;
        border-radius: 1rem;
        margin: 0 1rem;
    }
}

@media only screen and (max-width: 830px) {
    #eventsSearchInputContainer {
        display: block;
        background-color: #ccddff55;
        padding: 0 0.2rem;
        border-radius: 1rem;
        width: 20rem;
    }

    #search_label_status {
    }

    #eventsSearchInputContainer > *{
        display: inline;
        padding: 0.2rem;
        border-radius: 1rem;
        width: 100%;
    }

    #eventsSearchInputContainer > *  > *{
        display: inline-block;
        width: 7rem;
    }

    #eventsSearchInputContainer > * > :first-child {
        display: inline-block;
        width: 4rem;
    }

    #searchModel_Status {
    }
}

#eventsSearchInputContainer > * {
    line-height: 2rem;
}

.modal-backdrop {
    width: 100%;
    height: 100%;
}

.modal {
    padding-right: 0px !important;
}

@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
    }
    /* Prevent Bootstrap scrollbar-compensation from clipping RTL modals */
    body.modal-open {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    div.container {
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 0.85rem !important;
    }
    /* Files panel: full-screen fixed overlay on mobile */
    .chv-panel-open #chv-split-main {
        display: none !important;
    }
    .chv-panel-open #chv-split-files {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1050 !important;
        border-radius: 0 !important;
        border: none !important;
    }
}

#eventsTable th,
#eventsTable td,
#resultsTable th,
#resultsTable td,
#usersTable th,
#usersTable td,
div.dt-container th,
div.dt-container td {
    text-align: right !important;
}

/* === CHV LAYOUT === */
.chv-body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

@media (min-width: 992px) {
    .chv-body {
        flex-direction: row;
        align-items: flex-start;
        height: 100%;
    }
}

/* === SIDEBAR === */
#chv-sidebar {
    width: 175px;
    background: #fff;
    border-left: 1px solid #dee2e6;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    overflow-y: hidden;
    z-index: 1030;
    box-shadow: -2px 0 6px rgba(0,0,0,0.07);
}

.chv-sidebar-logo {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
    width: 100%;
    text-align: center;
    flex-shrink: 0;
}

.chv-sidebar-logo img { max-width: 80px; }

.chv-new-event-wrapper {
    padding: 0.65rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.chv-new-event-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
}

.chv-new-event-btn:hover { color: #354CA0; }

.chv-new-event-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #354CA0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #354CA0;
    line-height: 1;
    flex-shrink: 0;
    padding-bottom: 0.18rem;
}

.chv-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chv-sidebar-nav li a {
    display: block;
    padding: 0.38rem 0.8rem;
    color: #2B3A4E;
    text-decoration: none;
    font-size: 0.82rem;
    text-align: right;
    border-bottom: 1px solid #f0f0f0;
}

.chv-sidebar-nav li a:hover { background: #f0f4ff; color: #354CA0; }
.chv-sidebar-nav li a.chv-nav-active { background: #eef2ff; color: #354CA0; font-weight: 600; }

/* === COLLAPSIBLE SECTIONS (event details) === */
.chv-section-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    user-select: none;
    padding: 0.45rem 0;
    border-bottom: 1.5px solid #dde4f0;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}
.chv-section-header:hover { border-color: #a0b4d8; }
.chv-section-header h4 { margin: 0; color: #354CA0; font-weight: 600; font-size: 1rem; flex: 1; }
.chv-section-header h5 { margin: 0; color: #2B3A4E; font-weight: 600; font-size: 0.88rem; flex: 1; }
.chv-section-header h6 { margin: 0; color: #3a4a5a; font-weight: 500; font-size: 0.82rem; flex: 1; }
.chv-section-header-sub { margin-top: 0.5rem; border-bottom-color: #eaeff7; }
.chv-section-header-sub2 { margin-top: 0.25rem; border-bottom-color: #f0f4fa; }
.chv-section-toggle {
    font-size: 1rem;
    transition: transform 0.2s ease;
    color: #354CA0;
    flex-shrink: 0;
    line-height: 1;
}
.chv-section-header.chv-sec-collapsed .chv-section-toggle { transform: rotate(90deg); }

/* Light alternating row background for readability, on every chv-table-outer table
   EXCEPT #eventsTable and #resultsTable (the events page's live search-results
   table, appended dynamically into the same chv-table-outer wrapper) - there a
   light-blue row background already has a specific meaning (event-list-completed
   = closed event), so striping would visually conflict with that status coloring.
   Every other chv-table-outer table (reports, garage gallery, user management...)
   doesn't carry that meaning and keeps it. */
.chv-table-outer table:not(#eventsTable):not(#resultsTable) tbody tr:nth-child(even),
.chv-report-table tbody tr:nth-child(even) {
    background: #eef4fc;
}

/* Detail table: dl/dt/dd with grid lines */
div[id^="sec-"] > dl.row {
    border: 1px solid #e5eaf3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
div[id^="sec-"] > dl.row > dt {
    background: #f6f8fd;
    border-bottom: 1px solid #e5eaf3;
    border-left: 1px solid #e5eaf3;
    padding: 0.42rem 0.75rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
div[id^="sec-"] > dl.row > dd {
    border-bottom: 1px solid #e5eaf3;
    padding: 0.42rem 0.75rem;
    font-size: 0.84rem;
    color: #1a1a1a;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/* Two-column detail grid (replaces dl.row in event details) */
.chv-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    border: 1px solid #e5eaf3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.chv-detail-grid > dt {
    background: #f6f8fd;
    border-bottom: 1px solid #e5eaf3;
    border-left: 1px solid #e5eaf3;
    padding: 0.42rem 0.75rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0;
    white-space: nowrap;
    align-self: stretch;
    display: flex;
    align-items: center;
    min-height: 2.2rem;
}
.chv-detail-grid > dd {
    border-bottom: 1px solid #e5eaf3;
    padding: 0.42rem 0.75rem;
    font-size: 0.84rem;
    color: #1a1a1a;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
    min-height: 2.2rem;
}
@media (max-width: 575px) {
    .chv-detail-grid { grid-template-columns: max-content 1fr; }
}

/* Damage location tabs */
.chv-loc-tabs .nav-link {
    font-size: 0.92rem;
    padding: 0.3rem 0.8rem;
    color: #555;
}
.chv-loc-tabs .nav-link.active { color: #354CA0; font-weight: 600; }
.chv-loc-tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 0.75rem 1rem;
}
.chv-loc-tab-content p,
.chv-loc-tab-content strong,
.chv-loc-tab-content .text-muted { font-size: 0.84rem; }
.chv-loc-tab-content .chv-section-header h6 { font-size: 0.95rem; font-weight: 600; }
.chv-diagram-label { font-size: 0.7rem; color: #6c7a8a; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }

/* Edit-user button (oval, blue) */
.chv-btn-edit-user {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.75rem;
    border: 2px solid #354CA0;
    border-radius: 100px;
    color: #354CA0;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none !important;
    background: white;
    margin-right: 0.75rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.chv-btn-edit-user:hover { background: #354CA0; color: white; }
.chv-btn-edit-user-icon {
    width: 0.9rem; height: 0.9rem; object-fit: contain;
    filter: brightness(0) saturate(100%) invert(22%) sepia(59%) saturate(620%) hue-rotate(205deg) brightness(88%) contrast(93%);
    transition: filter 0.15s;
}
.chv-btn-edit-user:hover .chv-btn-edit-user-icon { filter: brightness(0) invert(1); }

/* Page title */
.chv-event-page-title { font-size: 1.75rem; font-weight: 700; color: #354CA0; }

/* Create event submit button (circle V) */
.chv-create-submit-btn {
    width: 4.5rem; height: 4.5rem;
    border: 3px solid #354CA0; border-radius: 50%;
    background: none; font-size: 2.8rem; color: #354CA0;
    font-weight: 700; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.chv-create-submit-btn:hover, .chv-create-submit-btn:active { background: #354CA0; color: #fff; }
.chv-create-submit-label { font-size: 1.2rem; font-weight: 700; color: #354CA0; }

/* Create/Edit form */
/* ========== Create/Edit Event Form ========== */
form.chv-event-form { max-width: 860px; }

/* ===== Unified field appearance ===== */
/* border-radius + border-color + font-size on every field type */
form.chv-event-form .form-control,
form.chv-event-form .form-select,
form.chv-event-form select,
form.chv-event-form textarea {
    border-radius: 8px;
    border-color: #c8d4ea;
    font-size: 0.88rem;
}
form.chv-event-form .form-control:focus,
form.chv-event-form .form-select:focus,
form.chv-event-form select:focus {
    border-color: #354CA0;
    box-shadow: 0 0 0 0.15rem rgba(53,76,160,0.18);
}

/* form-floating fields: fixed height + padding for the floating label */
form.chv-event-form .form-floating > .form-control,
form.chv-event-form .form-floating > .form-select,
form.chv-event-form .form-floating > select {
    height: 48px;
    min-height: 48px;
    padding: 1.15rem 0.75rem 0.25rem;
    border-radius: 8px;
    border-color: #c8d4ea;
    font-size: 0.88rem;
}

/* label: same position, same size, clipped to field width */
form.chv-event-form .form-floating > label {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    color: #6c7a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transform-origin: 100% 0;
}

/* floated state — scaled up and moved to top */
form.chv-event-form .form-floating > .form-control:focus ~ label,
form.chv-event-form .form-floating > .form-control:not(:placeholder-shown) ~ label,
form.chv-event-form .form-floating > .form-select:focus ~ label,
form.chv-event-form .form-floating > .form-select.has-value ~ label,
form.chv-event-form .form-floating > select:focus ~ label,
form.chv-event-form .form-floating > select.has-value ~ label {
    transform: scale(0.78) translateY(-0.55rem);
    transform-origin: 100% 0;
    opacity: 0.8;
    overflow: visible;
}

/* Smaller labels inside inspection details to prevent overflow */
.insp-details .form-floating > label,
[id^="inspDetails_"] .form-floating > label {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

form.chv-event-form .input-group > .form-floating > .form-control { border-radius: 8px 0 0 8px; }
form.chv-event-form .input-group > .btn { border-radius: 0 8px 8px 0; border-color: #c8d4ea; }

/* Main section headers — dark blue block, clearly top-level */
.chv-section-header.chv-form-section-header {
    background: #354CA0;
    border-radius: 8px;
    border-bottom: none;
    padding: 0.65rem 1rem;
    margin-top: 1.75rem;
    cursor: default;
}
.chv-section-header.chv-form-section-header:hover { border-bottom: none; }
.chv-section-header.chv-form-section-header h4 { font-size: 1rem; font-weight: 700; color: #fff; }
.chv-section-header.chv-form-section-header .form-select-sm { font-size: 0.8rem; }

/* Location sub-headers — light blue tint with left accent */
form.chv-event-form .chv-section-header-sub {
    background: #eef2fb;
    border-radius: 6px;
    border-bottom: none;
    border-right: 4px solid #354CA0;
    padding: 0.5rem 0.85rem;
    margin-top: 1.25rem;
    cursor: default;
}
form.chv-event-form .chv-section-header-sub:hover { border-bottom: none; }
form.chv-event-form .chv-section-header-sub h5 { color: #354CA0; font-weight: 700; font-size: 0.92rem; }

/* Inspection sub-sub-headers — subtle underline only */
form.chv-event-form .chv-section-header-sub2 {
    background: none;
    border-bottom: 1px dashed #c8d4ea;
    border-right: 2px solid #c8d4ea;
    padding: 0.35rem 0.7rem;
    margin-top: 0.85rem;
    cursor: default;
}
form.chv-event-form .chv-section-header-sub2:hover { border-bottom: 1px dashed #c8d4ea; }
form.chv-event-form .chv-section-header-sub2 h6 { color: #4a5a70; font-weight: 600; font-size: 0.82rem; }

.chv-form-section-body { padding: 0.5rem 0 0.5rem; }
form.chv-event-form .form-floating,
form.chv-event-form .form-group { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.chv-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.5rem; align-items: start; }
.chv-form-2col > * { min-width: 0; }
.chv-form-full { grid-column: 1 / -1; }
@media (max-width: 767px) { .chv-form-2col { grid-template-columns: 1fr; } }

/* Inspection card — framed box per inspection */
.chv-inspection-card {
    border: 1px solid #c8d4ea;
    border-radius: 8px;
    margin-top: 0.75rem;
    background: #f9faff;
}
form.chv-event-form .chv-inspection-card > .chv-section-header-sub2 {
    margin: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    border-right: none;
    border-bottom: 1px solid #d0daf0;
    background: #eef2fb;
    padding: 0.4rem 0.85rem;
}
form.chv-event-form .chv-inspection-card > .chv-section-header-sub2:hover { border-bottom: 1px solid #d0daf0; }
.chv-inspection-card > div { padding: 0.25rem 0.75rem 0.5rem; }
.chv-inspection-title { color: #354CA0; font-size: 0.92rem; font-weight: 700; margin: 0; }
.chv-sub-label {
    font-size: 0.7rem;
    color: #6c7a8a;
    font-weight: 600;
    display: block;
    margin-top: 0.65rem;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Location tabs */
.chv-location-tabs {
    border-bottom: 2px solid #c8d4ea;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
    align-items: flex-end;
    padding-top: 4px;
}
.chv-location-tabs .nav-link {
    color: #4a5a70;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
.chv-location-tabs .nav-link:not(.active):not(.chv-tab-add-btn) {
    border-color: #d0d0d0 #d0d0d0 transparent;
    background: #F2F2F2;
    color: #555;
}
.chv-location-tabs .nav-link.active {
    color: #354CA0;
    background: #fff;
    border-color: #c8d4ea #c8d4ea #fff;
}
.chv-location-tabs .nav-link:hover:not(.active):not(.chv-tab-add-btn) {
    background: #eef2fb;
    border-color: #c8d4ea #c8d4ea transparent;
}
.chv-tab-add-btn {
    color: #354CA0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.7rem !important;
    border: 1px dashed #c8d4ea !important;
    border-radius: 6px 6px 0 0 !important;
}
.chv-tab-add-btn:hover {
    background: #eef2fb !important;
}
.chv-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.65rem;
    color: #6c7a8a;
    cursor: pointer;
    margin-right: 2px;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}
.chv-tab-close:hover {
    background: #d93030;
    color: #fff;
}
.chv-location-tab-content {
    border: 1px solid #c8d4ea;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1rem 0.75rem 0.75rem;
    background: #fff;
}

/* Inspection tabs (nested, smaller) */
.chv-inspection-tabs {
    border-bottom: 1px solid #d0daf0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 1px;
    align-items: flex-end;
    padding-top: 3px;
    margin-top: 0.75rem;
}
.chv-inspection-tabs .nav-link {
    color: #4a5a70;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 4px 4px 0 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
.chv-inspection-tabs .nav-link:not(.active):not(.chv-tab-add-btn) {
    border-color: #d0d0d0 #d0d0d0 transparent;
    background: #F2F2F2;
    color: #555;
}
.chv-inspection-tabs .nav-link.active {
    color: #354CA0;
    background: #f9faff;
    border-color: #d0daf0 #d0daf0 #f9faff;
}
.chv-inspection-tabs .nav-link:hover:not(.active):not(.chv-tab-add-btn) {
    background: #f0f4fb;
    border-color: #d0daf0 #d0daf0 transparent;
}
.chv-inspection-tab-content {
    border: 1px solid #d0daf0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 0.75rem 0.65rem 0.5rem;
    background: #f9faff;
}

/* Canvas color picker dots */
.chv-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.chv-color-dot.selected {
    border-color: #354CA0;
    box-shadow: 0 0 0 2px #fff inset, 0 1px 4px rgba(0,0,0,0.3);
}

/* Mobile action strip sizing (responsive) */
@media (max-width: 991px) {
    .chv-action-strip { gap: 0.35rem; padding: 0.5rem 0 0.75rem; }
    .chv-action-btn { min-width: 4rem; max-width: 5.2rem; padding: 0.5rem 0.35rem; }
    .chv-action-icon { height: 3rem; }
    .chv-action-back-arrow { width: 3rem; height: 3rem; font-size: 2.2rem; }
    .chv-action-icon-symbol { width: 3rem; height: 3rem; font-size: 2rem; }
    .chv-panel-x-btn { font-size: 2rem; padding: 0 0.5rem; color: #333; }
    .chv-action-label { font-size: 0.82rem; }

    /* Details page — larger text on mobile */
    .chv-detail-grid > dt { font-size: 1rem; padding: 0.6rem 0.75rem; }
    .chv-detail-grid > dd { font-size: 1rem; padding: 0.6rem 0.75rem; }
    .chv-section-header h4 { font-size: 1.05rem; }
    .chv-section-header h5 { font-size: 0.95rem; }
    .chv-section-header h6 { font-size: 0.88rem; }
    .chv-loc-tab-content p,
    .chv-loc-tab-content strong,
    .chv-loc-tab-content .text-muted { font-size: 0.92rem; }
    .chv-loc-tab-content .chv-section-header h6 { font-size: 1.02rem; }
}

/* === ACTION ICON STRIP (event details, desktop) === */
.chv-action-strip {
    gap: 0.5rem;
    padding: 0.6rem 0 0.8rem;
    border-bottom: 2px solid #e8ecf0;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.chv-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none !important;
    color: #262626;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    min-width: 4rem;
    max-width: 5.5rem;
    text-align: center;
    background: transparent;
    border: none;
    transition: background 0.15s;
}
.chv-action-btn:hover { background: #f0f3ff; color: #262626; }
.chv-action-icon {
    height: 2.4rem;
    width: auto;
    max-width: 3rem;
    object-fit: contain;
    margin-bottom: 0.28rem;
    flex-shrink: 0;
}
/* converts any colored PNG to near-black #262626 */
.chv-action-icon-dark { filter: brightness(0) opacity(0.88); }
.chv-action-icon { transition: transform 0.25s ease; }
.chv-action-icon-rotated { transform: rotate(180deg); }
/* converts black PNG to green #0DA567 */
.chv-action-icon-green { filter: brightness(0) saturate(100%) invert(47%) sepia(75%) saturate(504%) hue-rotate(119deg) brightness(96%) contrast(96%); }
/* back arrow circle */
.chv-action-back-arrow {
    width: 2.4rem;
    height: 2.4rem;
    border: 2.5px solid #354CA0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    line-height: 1;
    color: #354CA0;
    margin-bottom: 0.28rem;
    flex-shrink: 0;
    padding-bottom: 0.45rem;
}
/* symbol icons (approve ✓, delete ✕, date ◷) */
.chv-action-icon-symbol {
    width: 2.4rem;
    height: 2.4rem;
    border: 2.5px solid #262626;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.28rem;
    flex-shrink: 0;
    line-height: 1;
}
.chv-action-icon-symbol-red { border-color: #c00; color: #c00; }
/* outlined circle icon (e.g. "run report" primary action) */
.chv-action-icon-circle {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #354CA0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.28rem;
    flex-shrink: 0;
}
.chv-action-icon-circle img { width: 1.3rem; height: 1.3rem; object-fit: contain; filter: brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(750%) hue-rotate(208deg) brightness(95%); }
.chv-action-label {
    font-size: 0.72rem;
    line-height: 1.3;
    color: inherit;
    white-space: normal;
    max-width: 5rem;
}
.chv-action-label-red { color: #c00; }

/* === FORM ADD BUTTONS (circle + label) === */
.chv-add-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: none; padding: 0.15rem 0;
    cursor: pointer; color: #354CA0; font-size: 0.82rem; font-weight: 600;
}
.chv-add-btn:hover { color: #354CA0; }
.chv-add-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #354CA0; color: #fff; font-size: 1.05rem; font-weight: 400;
    line-height: 1; flex-shrink: 0;
}
.chv-add-btn:hover .chv-add-circle { background: #354CA0; }

/* === CLOSE INSPECTION BUTTON === */
.chv-close-insp-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem;
    background: none; border: none; padding: 0.2rem 0.4rem;
    cursor: pointer; color: #354CA0; font-size: 0.72rem; font-weight: 600;
}
.chv-close-insp-btn:hover { color: #354CA0; }
.chv-close-insp-btn:disabled, .chv-close-insp-btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }
.chv-close-insp-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: #354CA0; border: none;
}
.chv-close-insp-icon img { width: 1.1rem; height: 1.1rem; filter: brightness(0) invert(1); }

/* === DETAILS TOGGLE ("פרטים נוספים") === */
.chv-details-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    cursor: pointer; color: #354CA0; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; user-select: none; border-bottom: none;
}
.chv-details-toggle:hover { color: #354CA0; text-decoration: none; }
.chv-details-arrow {
    display: inline-block; transition: transform 0.2s ease;
    font-size: 0.78rem; line-height: 1;
    transform: rotate(90deg); /* closed: arrow points toward text (RTL) */
}
.chv-details-toggle.open .chv-details-arrow { transform: rotate(0deg); }

/* === SIDEBAR SUBMENU (event details) === */
.chv-sidebar-subnav-header {
    padding: 0.35rem 1.6rem 0.35rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #354CA0;
    background: #eef2ff;
    border-top: 1px solid #d8e0ff;
    border-bottom: 1px solid #d8e0ff;
    border-right: 3px solid #354CA0;
    list-style: none;
    margin-top: 2px;
    text-align: right;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.chv-sidebar-subnav-header:hover { background: #e4ebff; }

.chv-subnav-arrow {
    margin-right: auto;
    font-size: 0.65rem;
    transition: transform 0.2s ease;
    color: #354CA0;
    display: inline-block;
}
.chv-sidebar-subnav-header.chv-collapsed .chv-subnav-arrow {
    transform: rotate(-90deg);
}

.chv-sidebar-subnav-body { padding: 0; list-style: none; }
.chv-sidebar-subnav-body > ul { margin: 0; padding: 0; list-style: none; }

.chv-sidebar-nav li.chv-sidebar-subnav-item > a {
    padding-right: 1.3rem;
    font-size: 0.78rem;
    color: #2B3A4E;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.chv-sidebar-subnav-item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    object-fit: contain;
}
.chv-subnav-icon-dark { filter: brightness(0) opacity(0.75); }
.chv-subnav-icon-green { filter: brightness(0) saturate(100%) invert(47%) sepia(75%) saturate(504%) hue-rotate(119deg) brightness(96%) contrast(96%); }
.chv-subnav-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
    color: #262626;
}

.chv-sidebar-nav li.chv-sidebar-subnav-item > a:hover { background: #f0f4ff; color: #354CA0; }

.chv-sidebar-login {
    margin-top: auto;
    padding: 0.5rem 0.6rem;
    width: 100%;
    border-top: 1px solid #dee2e6;
    font-size: 0.75rem;
    text-align: center;
    flex-shrink: 0;
}
.chv-sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
    padding: 0.3rem 0.2rem;
    border-radius: 6px;
}
.chv-sidebar-user-toggle { cursor: pointer; }
.chv-sidebar-user-toggle:hover { opacity: 0.82; }
.chv-sidebar-user-toggle.dropdown-toggle::after { display: none; }
.chv-sidebar-user-icon { width: 26px; height: 26px; opacity: 0.72; flex-shrink: 0; }
.chv-sidebar-user-name { font-size: 0.78rem; font-weight: 600; color: #2B3A4E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

.chv-sidebar-login a { color: #555; text-decoration: none; font-size: 0.78rem; display: block; }
.chv-sidebar-login a:hover { color: #354CA0; }

/* === MAIN WRAPPER === */
.chv-main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* === DESKTOP HEADER === */
.chv-desktop-header {
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    gap: 1rem;
    min-height: 68px;
}

.chv-header-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.chv-header-user img { width: 38px; height: 38px; opacity: 0.75; }

.chv-header-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* ── Global modal dialog styles ─────────────────────────────── */
.modal-content {
    border-radius: 14px;
    overflow: hidden;
}

.modal-header .close {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0.45;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    color: inherit;
    margin-inline-start: auto;
}

.modal-header .close:hover { opacity: 1; }

.modal select,
.modal .listbox,
.modal .form-select {
    border-radius: 8px !important;
}

.modal-footer {
    gap: 0.75rem;
    justify-content: center;
}

.modal-footer .form-group { margin: 0; }

/* ── "גררו קובץ לכאן" — full-page drop overlay for auto-reading a document ── */
.chv-drop-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(53, 76, 160, 0.88);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.chv-drop-overlay.chv-drop-overlay-active { display: flex; }
.chv-drop-overlay-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    border: 3px dashed rgba(255,255,255,0.7);
    border-radius: 1.2rem;
    padding: 3rem 4rem;
}
.chv-drop-overlay-icon { font-size: 3rem; }

/* ── Video consultation ("התייעצות בוידאו עם שמאי") מודל ─────── */
.chv-consult-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.chv-consult-enter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: #354CA0;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    border: none;
}
.chv-consult-enter-btn:hover { background: #2b3f87; color: #fff; }
.chv-consult-enter-icon { font-size: 1.15rem; }

.chv-consult-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.4rem 0 0.9rem;
    color: #354CA0;
    font-weight: 700;
    font-size: 0.92rem;
}
.chv-consult-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e6f5;
}

.chv-consult-select {
    margin-bottom: 0.9rem;
}

.chv-consult-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chv-consult-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: none;
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}

.chv-consult-action-primary { background: #354CA0; color: #fff; }
.chv-consult-action-primary:hover { background: #2b3f87; color: #fff; }

.chv-consult-action-whatsapp { background: #25D366; color: #fff; }
.chv-consult-action-whatsapp:hover { background: #1eb958; color: #fff; }

.chv-consult-action-secondary { background: #eef1f8; color: #354CA0; }
.chv-consult-action-secondary:hover { background: #e0e6f5; color: #354CA0; }

.chv-consult-status {
    margin-top: 0.7rem;
    color: #1eb958;
    font-weight: 600;
    font-size: 0.85rem;
}

/* .chv-confirm-actions reuses the exact same ✓/✕ save-cancel look outside a modal
   (e.g. the Reports builder's "שמור תבנית"/"ביטול" row). */
.modal-footer .btn,
.chv-confirm-actions .btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 4.5rem;
    padding: 0.3rem 0.75rem;
    line-height: 1.3;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.modal-footer .btn:hover,
.modal-footer .btn:focus,
.modal-footer .btn:active,
.chv-confirm-actions .btn:hover,
.chv-confirm-actions .btn:focus,
.chv-confirm-actions .btn:active {
    background: transparent !important;
    border-color: transparent !important;
}

.modal-footer .btn-primary, .chv-confirm-actions .btn-primary { color: #354CA0; }
.modal-footer .btn-secondary, .chv-confirm-actions .btn-secondary { color: #555; }

.modal-footer .btn::before,
.chv-confirm-actions .btn::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.modal-footer .btn-primary::before,
.chv-confirm-actions .btn-primary::before {
    content: '✓';
    background: #354CA0;
    color: #fff;
}

.modal-footer .btn-secondary::before,
.chv-confirm-actions .btn-secondary::before {
    content: '✕';
    border: 2.5px solid #777;
    color: #555;
}

/* .chv-modal-cta: a deliberate opt-out of the transparent minimal-icon look above, for the
   rare modal where accidentally dismissing has real consequences (e.g. notification
   permission on mobile silently blocks call alerts and can't be re-requested by us) and the
   confirm action needs to be visually impossible to miss or misclick. */
.modal-footer .btn.chv-modal-cta {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    min-width: auto;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
.modal-footer .btn.chv-modal-cta:hover,
.modal-footer .btn.chv-modal-cta:focus,
.modal-footer .btn.chv-modal-cta:active {
    background: #c82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

#keywordInput {
    width: 11rem;
    height: 2rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.chv-adv-search-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: #555;
    white-space: nowrap;
}

.chv-adv-search-btn:hover { background: #f5f5f5; }

.chv-org-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

#connected_organisations {
    height: 2rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
    min-width: 8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#advSearchWrapper { position: relative; }

#advancedSearchPanel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.13);
    padding: 1rem 1.25rem;
    z-index: 1050;
    min-width: 280px;
}

#advancedSearchPanel label { font-size: 0.85rem; white-space: nowrap; }
#advancedSearchPanel select { font-size: 0.85rem; }

/* === TABS === */
.chv-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    flex-direction: row;
    justify-content: flex-start;
}

.chv-tab {
    display: block;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    text-decoration: none !important;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border: 2px solid #dee2e6;
    border-bottom: 2px solid #354CA0;
    background: #e9ecef;
    color: #888;
    position: relative;
    bottom: -2px;
}

.chv-tab.active {
    background: #fff;
    color: #354CA0;
    border-color: #354CA0;
    border-bottom-color: #fff;
    font-weight: 600;
}

.chv-table-outer {
    border: 2px solid #354CA0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.chv-table-outer .table {
    margin-bottom: 0;
}

/* === EVENT ID BUTTONS === */
.btn-event-id {
    display: inline-block;
    min-width: 3.5rem;
    padding: 0.3rem 0.5rem;
    font-weight: bold;
    border-radius: 6px;
    border: 2px solid transparent;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.3;
}

.btn-event-id.btn-video    { background-color: #354CA0; }
.btn-event-id.btn-no-video { background-color: #CC2929; }

.btn-event-id:active                  { background-color: transparent !important; color: #000 !important; }
.btn-event-id.btn-video:active        { border-color: #354CA0 !important; }
.btn-event-id.btn-no-video:active     { border-color: #CC2929 !important; }

/* === COMMUNICATION ICONS === */
.icon-comm { width: 2rem; height: 2rem; object-fit: contain; }

.icon-active  { filter: brightness(0) saturate(100%) invert(38%) sepia(22%) saturate(650%) hue-rotate(160deg) brightness(73%); }
.icon-inactive { filter: brightness(0) opacity(0.25); }

/* === ROW COLOR UPDATES === */
.event-list-in-progress  { background-image: none !important; background-color: #C2EABD !important; }
.event-list-completed    { background-image: none !important; background-color: #E0F5F8 !important; }
.event-another-appraiser { background-image: none !important; background-color: #EBEBEB !important; }
.event-list-self-sampled { background-image: none !important; background-color: #FAFACF !important; }

/* Files table: thin separator between rows */
.chv-files-table tbody tr { border-bottom: 1px solid #e5eaf3; }
.chv-files-table tbody tr:last-child { border-bottom: none; }

/* Mobile + button */
.chv-mobile-new-btn { display: flex; align-items: center; text-decoration: none; }

.chv-new-event-circle-sm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #354CA0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #354CA0;
    line-height: 1;
    padding-bottom: 0.18rem;
}

.chv-mobile-new-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333;
    margin-right: 0.25rem;
}

/* ===== Profile Management ===== */
.chv-manage-title {
    color: #354CA0;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: right;
    margin-bottom: 1.5rem;
}
.chv-manage-tabs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1.5px solid #e5e5e5;
    padding-bottom: 1rem;
}
.chv-manage-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #444;
    text-decoration: none !important;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    width: 72px;
    flex-shrink: 0;
    text-align: center;
    word-break: keep-all;
}
.chv-manage-tab-icon {
    width: 40px;
    height: 40px;
}
.chv-manage-tab.active,
.chv-manage-tab:hover { color: #354CA0; }
.chv-manage-tab.active .chv-manage-tab-icon,
.chv-manage-tab:hover .chv-manage-tab-icon {
    filter: brightness(0) saturate(100%) invert(22%) sepia(100%) saturate(750%) hue-rotate(208deg) brightness(95%);
}
.chv-manage-tab.active span { font-weight: 600; }
.chv-manage-field-wrap { max-width: 460px; margin-bottom: 0.9rem; }
.chv-manage-field {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    border-radius: 2rem;
    border: 2px solid #354CA0;
    font-size: 0.9rem;
    text-align: right;
    position: relative;
    gap: 0.4rem;
}
.chv-manage-field-readonly {
    background: #E8E8E8;
    color: #555;
}
.chv-manage-field input {
    border: none;
    background: transparent;
    text-align: right;
    width: 100%;
    outline: none;
    font-size: 0.9rem;
    color: #333;
    direction: rtl;
}
.chv-manage-field input:disabled { color: #666; }
.chv-manage-field-label {
    white-space: nowrap;
    flex-shrink: 0;
    color: #555;
}
.chv-manage-field-readonly .chv-manage-field-label { color: #777; }
.chv-manage-eye-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    line-height: 0;
}
.chv-manage-eye-btn img { width: 1.4rem; }
.chv-manage-eye-btn.chv-pw-hidden::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 2px;
    background: #555;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.chv-manage-change-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 1.2rem;
    font-size: 0.85rem;
    color: #333;
    text-decoration: none !important;
}
.chv-manage-change-btn img { width: 52px; height: 52px; }
.chv-manage-question {
    font-size: 1.05rem;
    text-align: right;
    margin: 2rem 0 1.5rem;
}
.chv-manage-logout-btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2.5rem;
    align-items: flex-start;
}
.chv-manage-logout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #444;
}
.chv-manage-logout-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.chv-manage-circle-yes { background: #354CA0; color: #fff; }
.chv-manage-circle-no  { border: 2.5px solid #777; color: #555; }
.chv-manage-error {
    color: #dc3545;
    font-size: 0.8rem;
    text-align: right;
    margin-top: 0.25rem;
    padding-right: 1rem;
}

/* ===== MOBILE GARAGE UX IMPROVEMENTS ===== */
@media (max-width: 991px) {

    /* --- Navbar: taller, hamburger bigger, "new event" centered --- */
    #nav { min-height: 68px; }
    .navbar-toggler { min-width: 56px; min-height: 56px; padding: 0.7rem; }
    #nav .container-fluid { position: relative; }
    .chv-mobile-new-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }
    .chv-new-event-circle-sm { width: 50px; height: 50px; font-size: 1.8rem; }
    .chv-mobile-new-label { font-size: 1rem; font-weight: 700; }

    /* --- Mobile menu: bigger fonts --- */
    .navbar-collapse .nav-link { padding: 1rem 1.1rem !important; font-size: 1.3rem !important; min-height: 58px; }
    .navbar-collapse form button.nav-link { padding: 1rem 1.1rem !important; font-size: 1.3rem !important; }

    /* --- Search fields: prominent + bigger font --- */
    .navbar-collapse .form-control,
    .navbar-collapse .form-select {
        font-size: 1.2rem;
        padding: 0.8rem 1rem;
        min-height: 54px;
        border: 2px solid #354CA0 !important;
        border-radius: 8px;
    }
    .navbar-collapse label { font-size: 1.15rem; font-weight: 600; }

    /* --- Username: bigger --- */
    .chv-nav-user-name { font-size: 1.15rem !important; }
    .chv-nav-user-icon { width: 36px !important; height: 36px !important; }

    /* --- Event list tabs --- */
    .chv-tab { font-size: 1.15rem !important; padding: 0.6rem 1.4rem !important; }

    /* --- Event list: hide duplicate caption, bigger rows + ID button --- */
    #eventsTable caption { display: none; }
    #eventsTable th { font-size: 1.1rem !important; padding: 12px 10px !important; }
    #eventsTable td,
    #resultsTable td { padding: 16px 10px !important; font-size: 1.15rem !important; }
    #resultsTable th { font-size: 1.1rem !important; padding: 12px 10px !important; }
    .btn-event-id {
        min-width: 4.2rem;
        padding: 0.65rem 0.8rem;
        font-size: 1.25rem;
        border-radius: 10px;
    }
    .icon-comm { width: 3rem !important; height: 3rem !important; }

    /* --- Event details: section headers + grid bigger --- */
    .chv-section-header h4 { font-size: 1.35rem !important; font-weight: 700 !important; }
    .chv-section-header h5 { font-size: 1.2rem !important; font-weight: 700 !important; }
    .chv-section-header h6 { font-size: 1.1rem !important; font-weight: 700 !important; }
    .chv-detail-grid > dt { font-size: 1.2rem !important; padding: 0.8rem 0.75rem !important; }
    .chv-detail-grid > dd { font-size: 1.2rem !important; padding: 0.8rem 0.75rem !important; }

    /* --- Location tabs: bigger and prominent --- */
    .chv-loc-tabs .nav-link {
        font-size: 1.25rem !important;
        padding: 0.75rem 1.5rem !important;
        font-weight: 700 !important;
    }
    .chv-loc-tabs .nav-link.active { font-weight: 800 !important; }

    /* --- Location tab content: match main table size --- */
    .chv-loc-tab-content p,
    .chv-loc-tab-content strong,
    .chv-loc-tab-content .text-muted { font-size: 1.15rem !important; line-height: 1.5 !important; }
    .chv-loc-tab-content p.small,
    .chv-loc-tab-content p.text-muted { font-size: 1.1rem !important; }
    .chv-loc-tab-content .chv-section-header h6 { font-size: 1.2rem !important; font-weight: 700 !important; }
    .chv-loc-tab-content .chv-detail-grid > dt,
    .chv-loc-tab-content .chv-detail-grid > dd { font-size: 1.15rem !important; padding: 0.75rem 0.75rem !important; }
    .chv-diagram-label { font-size: 1.05rem !important; color: #6c7a8a; font-weight: 600; margin-bottom: 4px; }

    /* --- Action strip: icons + labels bigger --- */
    .chv-action-icon { height: 4.2rem !important; }
    .chv-action-back-arrow { width: 4.2rem !important; height: 4.2rem !important; font-size: 2.8rem !important; }
    .chv-action-icon-symbol { width: 4.2rem !important; height: 4.2rem !important; }
    .chv-action-label { font-size: 1rem !important; }

    /* --- Action strip: join call full width on top, others spread evenly --- */
    .chv-action-strip { justify-content: space-around; }
    .chv-join-call-btn {
        order: -1;
        width: 100% !important;
        max-width: 100% !important;
        background: #0DA567 !important;
        border-radius: 12px !important;
        padding: 1rem 1.5rem !important;
        flex-direction: row !important;
        gap: 0.75rem;
        justify-content: center;
        align-items: center !important;
        min-height: 68px;
        margin-bottom: 0.5rem;
    }
    .chv-join-call-btn .chv-action-icon {
        height: 2.4rem !important;
        margin-bottom: 0 !important;
    }
    .chv-join-call-btn .chv-action-label {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        max-width: none !important;
    }
    .chv-join-call-btn .chv-action-icon-green {
        filter: brightness(0) invert(1) !important;
    }
    .chv-action-strip > .chv-action-btn:not(.chv-join-call-btn) {
        flex: 1 0 auto;
        max-width: 7rem !important;
    }

    /* --- Event page title: push away from navbar --- */
    .chv-event-page-title { margin-top: 1.2rem !important; }

    /* --- Files panel: centered strip + bigger tabs --- */
    .chv-files-strip {
        display: flex !important;
        justify-content: center !important;
        gap: 0.4rem;
    }
    .chv-file-row-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.3rem;
    }
    /* These strips reuse .chv-action-icon/.chv-action-btn but must stay compact — override
       the generic "Action strip: icons + labels bigger" enlargement above, which otherwise
       leaves too little room per row on Android's typically larger effective text scale. */
    .chv-files-strip .chv-action-icon,
    .chv-file-row-btns .chv-action-icon {
        height: 1.9rem !important;
    }
    /* Back arrow ("›" glyph) leaked the same generic enlargement as the plain-image icons
       above — match it so "חזרה" doesn't look oversized next to the other buttons. */
    .chv-files-strip .chv-action-back-arrow,
    .chv-file-row-btns .chv-action-back-arrow {
        width: 1.9rem !important;
        height: 1.9rem !important;
        font-size: 1.4rem !important;
    }
    /* Symbol icons (circle + svg/char, e.g. copy/move/delete/OCR) leaked the same generic
       enlargement — match them to the plain-image icons above so nothing looks mismatched. */
    .chv-files-strip .chv-action-icon-symbol,
    .chv-file-row-btns .chv-action-icon-symbol {
        width: 1.9rem !important;
        height: 1.9rem !important;
        font-size: 0.85rem !important;
    }
    .chv-files-strip .chv-action-label,
    .chv-file-row-btns .chv-action-label {
        font-size: 0.78rem !important;
    }
    .chv-files-strip .chv-action-btn,
    .chv-file-row-btns .chv-action-btn {
        min-width: 3.2rem !important;
        max-width: 4.4rem !important;
        padding: 0.25rem 0.2rem !important;
    }
    .chv-files-loc-tabs .nav-link {
        font-size: 1.2rem !important;
        padding: 0.7rem 1.4rem !important;
        font-weight: 700 !important;
    }

    /* --- Account Management: bigger everything --- */
    .chv-manage-title { font-size: 1.3rem !important; }
    .chv-manage-tabs { gap: 1.5rem !important; }
    .chv-manage-tab-icon { width: 56px !important; height: 56px !important; }
    .chv-manage-tab span { font-size: 1rem !important; }
    .chv-manage-field { padding: 0.9rem 1.1rem !important; }
    .chv-manage-field-label { font-size: 1.15rem !important; }
    .chv-manage-field input { font-size: 1.15rem !important; }
    .chv-manage-field-wrap { max-width: 100% !important; }
    .chv-manage-logout-circle { width: 3.8rem !important; height: 3.8rem !important; font-size: 2.2rem !important; }
    .chv-manage-logout-btn { font-size: 1.15rem !important; gap: 0.5rem !important; }
    .chv-manage-logout-btns { gap: 3rem !important; }
    .chv-manage-question { font-size: 1.2rem !important; }
    .chv-manage-change-btn img { width: 68px !important; height: 68px !important; }
    .chv-manage-change-btn span { font-size: 1.1rem !important; }
    .chv-manage-eye-btn img { width: 1.9rem !important; }

    /* --- Create/Edit form: padding + fonts --- */
    form.chv-event-form { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
    form.chv-event-form .form-control,
    form.chv-event-form .form-select,
    form.chv-event-form select,
    form.chv-event-form textarea { font-size: 1.4rem !important; }
    form.chv-event-form .form-floating > .form-control,
    form.chv-event-form .form-floating > .form-select,
    form.chv-event-form .form-floating > select {
        font-size: 1.4rem !important;
        height: 64px !important;
        min-height: 64px !important;
    }
    form.chv-event-form .form-floating > label { font-size: 1.2rem !important; }
    form.chv-event-form .form-check-label { font-size: 1.4rem !important; }
    .chv-section-header.chv-form-section-header h4 { font-size: 1.45rem !important; }
    /* camera OCR button: keep on same row as license field */
    form.chv-event-form .input-group { flex-wrap: nowrap !important; align-items: center !important; }
    form.chv-event-form .input-group > .form-floating { flex: 1 1 auto !important; margin-bottom: 0 !important; min-width: 0 !important; }

    /* --- Settings: colors + bigger fonts --- */
    .chv-settings-title { font-size: 1.5rem !important; color: #354CA0; font-weight: 700; border-bottom: 2px solid #e0e6f5; padding-bottom: 0.4rem; margin-bottom: 1rem; }
    .chv-settings-page h2 { font-size: 1.2rem !important; color: #354CA0; font-weight: 700; border-bottom: 2px solid #e0e6f5; padding-bottom: 0.3rem; margin-top: 1.5rem; }
    .chv-settings-page .form-check { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 0.6rem 0 !important; }
    .chv-settings-page .form-check-label { font-size: 1.15rem !important; font-weight: 600 !important; margin: 0 !important; }
    .chv-settings-page .form-check-input { width: 1.7rem !important; height: 1.7rem !important; flex-shrink: 0; }
    .chv-settings-page .form-group { border-bottom: 1px solid #f0f0f0; padding-bottom: 0.4rem; }

    /* --- Floating back button --- */
    .chv-float-back-btn {
        position: fixed;
        bottom: 1.5rem;
        right: 1rem;
        z-index: 999;
        background: #354CA0;
        color: #fff !important;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.8rem;
        text-decoration: none !important;
        box-shadow: 0 3px 14px rgba(0,0,0,0.35);
        padding-bottom: 0.25rem;
        line-height: 1;
    }
}

@media (min-width: 992px) {
    .chv-main-wrapper {
        margin-right: 175px;
    }
    /* No sidebar rendered (embedded inside the video-call panel) — don't reserve its space. */
    .chv-main-wrapper.chv-no-sidebar {
        margin-right: 0;
    }
    .chv-main-wrapper > .container {
        max-width: 100% !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
    }
}

/* Embedded inside the video-call side panel (Details/Edit/Files loaded in #doc_iframe).
   #chv-sidebar is still rendered server-side as usual (its @section is always invoked -
   an earlier attempt to skip rendering it server-side for this case left an unrendered
   Razor section and crashed the page for the primary appraiser), it's only hidden here
   with CSS so the panel shows just the form/files instead of the full app chrome.
   The panel itself is roughly half the browser width (see #secondaryPageOverlay), so
   content is also scaled down a bit to avoid feeling oversized. */
body.chv-during-video-call .chv-main-wrapper {
    font-size: 0.87em;
}
@media (min-width: 992px) {
    body.chv-during-video-call #chv-sidebar {
        display: none !important;
    }
    body.chv-during-video-call .chv-main-wrapper {
        margin-right: 0 !important;
    }
}