:root {
    --navbar-height: 70px;
    /* overriden in theme specific css files */
    --site-bg: white;
}

.ag-theme-quartz,
.ag-theme-quartz-dark,
.ag-theme-quartz-auto-dark {
    --ag-grid-size: 7px;
}

.ag-theme-quartz .ag-header-cell-text,
.ag-theme-quartz-dark .ag-header-cell-text,
.ag-theme-quartz-auto-dark .ag-header-cell-text {
    font-size: 13px;
}

.ag-large-text-input {
    padding: 0;
}

body:not(.login):not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: calc(var(--navbar-height) + 2em);
}

body.body-aggrid:not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: calc(var(--navbar-height) + 1.875em);
}

body.body-mvcgrid:not(.popup-content):not(.noheader-content):not(.has-sidebar) {
    padding-top: var(--navbar-height);
}

body:not(.body-aggrid) .body-content {
    padding-bottom: 1em;
}
body.body-aggrid .body-content {
    height: 100%;
}

body:not(.has-sidebar)>.container-fluid table.sheet>thead>tr>th,
body:not(.has-sidebar)>.container table.sheet>thead>tr>th {
    top: var(--navbar-height);
}

body.has-sidebar.body-aggrid {
    padding-top: 16px;
}

body.has-sidebar .index-container {
    padding-top: 28px;
}

body.login {
    background: linear-gradient(-45deg, #FFC260, orange, #FFC260);
}

body.body-colorful {
    background: linear-gradient(-45deg, #FFC260, orange, #FFC260);
}

body.flair {
    background: linear-gradient(-145deg, #166, var(--success));
}

body.noheader-content {
    padding-top: 2em;
}

html,
body {
    height: 100%;
}

body:not(.index) .body-content:not(.scroll-past-end) {
    height: calc(100% - 10px);
}

@media (max-width: 576px) {
    .dropdown-menu {
        max-height: calc(100vh - 1em);
        overflow-y: auto;
    }

    .navbar-collapse .dropdown-menu {
        max-height: unset;
    }

    #myGrid {
        margin-left: -15px;
        margin-right: -15px;
    }

    .ag-theme-balham,
    .ag-theme-balham-dark {
        --ag-grid-size: 5px !important;
        /* TODO: AG-Grid does not apply this when resizing... *sigh* */
    }
}

@media (min-width: 576px) {
    .body-content.container-fluid {
        padding-left: 26px;
        padding-right: 26px;
    }
}

body.no-container .container {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 576px) {
    body.no-container .container {
        padding-left: 28px;
        padding-right: 28px;
    }
}


.ag-watermark,
.gm-ui-hover-effect,
.validation-summary-valid.alert-danger,
.btn-info .live-view-text,
.no-close-button .bootbox-close-button,
.dropdown-divider:first-child,
.dropdown-divider+.dropdown-divider,
.dropdown-divider+.dropdown-divider+.dropdown-divider,
.dropdown-divider+.dropdown-divider+.dropdown-divider+.dropdown-divider,
.dropdown-toggle.actions::after {
    display: none !important;
}


/* Navbar */

@media (min-width: 575.98px) and (max-width: 1199.98px) {

    .navbar-expand-xl>.container,
    .navbar-expand-xl>.container-fluid {
        padding-left: 11px;
        padding-right: 12px;
    }
}

.navbar .nav-link,
.navbar .btn {
    text-wrap: nowrap;
}

.navbar>.container-fluid,
.navbar>.container {
    gap: 1em 0;
}

.navbar-collapse {
    overflow-y: visible !important;
}

.navbar-collapse.collapsing,
.navbar-collapse.show {
    /*margin-top: 1em;*/
    padding: 0 1.5em;
}

.navbar-collapse.collapsing .fa-fw,
.navbar-collapse.show .fa-fw {
    margin-right: 0.175em;
}

.navbar-collapse.show:not(.collapsing) {
    overflow-y: scroll !important;
    max-height: 75vh !important;
}

.navbar-brand {
    padding-left: 40px;
    align-items: center;
    background: url(../images/logos/logo-128.png) no-repeat;
    background-size: 32px 32px;
    background-position: left 50%;
}

.navbar-brand-testing {
    background: url(../images/logos/logo-testing-128.png) no-repeat;
    background-size: 32px 32px;
    background-position: left 50%;
}


.content-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1em;
}

.content-header .btn {
    text-wrap: nowrap;
}

.content-footer {
    display: flex;
    align-items: center;
    gap: 5px;
}


/*#region Home/Index Page */

.index-container {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

.index-group {
    display: flex;
    flex-direction: column;
    margin: 1em 2em;
}

@media (max-width: 1024px) {
    .index-container {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }

    .index-group {
        min-width: 18em;
    }
}

.index-group-title {
    font-weight: bold;
    opacity: 0.75;
}

.index-group-title>a {
    color: inherit;
    text-decoration: none;
}

.index-group-title>span {
    pointer-events: none;
}

.index-group a.btn {
    font-size: 1rem;
}

.index-group .btn {
    line-height: 1.6rem;
}

.index-group>.btn-sm:hover,
.index-group>.btn-group>.btn:hover:first-child {
    text-decoration: underline;
}

.index-group>.btn-group>.btn {
    border-radius: 0.25em !important;
}

.index-group>.btn-group>.dropdown-toggle {
    margin-left: -5px;
    padding-left: 0.7em;
    padding-right: 0.7em;
}

.index-group>.btn-group>.dropdown-toggle::after {
    vertical-align: 0.17em;
    opacity: 0.7;
}

/*#endregion:*/

/*#region AG-Grid touchups */

.ag-root-wrapper {
    border-radius: 3px;
}

/* Fix drag ghost taking full width when dragging column items */
.ag-dnd-ghost {
    width: auto !important;
    max-width: 300px;
}

/* Fix drag ghost offset when sidebar is open (body has margin-left) */
body.has-sidebar:not(.sidebar-closed-desktop) .ag-dnd-ghost {
    margin-left: var(--sidebar-width);
}

body.has-sidebar.sidebar-collapsed:not(.sidebar-closed-desktop) .ag-dnd-ghost {
    margin-left: var(--sidebar-collapsed-width);
}

.ag-input-field-input {
    border-radius: 3px;
}

.ag-floating-filter-input .flatpickr-input {
    border-radius: 3px;
    border: var(--ag-borders-input) var(--ag-input-border-color);
}

/* Clear (×) button injected into floating-filter cells with an active filter
   (see ag-grid-floating-filter-clear.js). */
.ag-floating-filter-body,
.ag-floating-filter-full-body {
    position: relative;
}

.idsys-ff-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* Full-height hitbox; width trimmed so it doesn't eat too much of the input. */
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Sit the glyph toward the right edge rather than centered in the hitbox. */
    padding-right: 6px;
    /* Nudge the glyph up a touch — it reads low when vertically centered. */
    padding-bottom: 2px;
    font-size: 18px;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.55;
    z-index: 2;
}

.idsys-ff-clear:hover {
    opacity: 1;
    background-color: rgb(0, 0, 0, 0.08);
}

.ag-theme-quartz-dark .idsys-ff-clear:hover,
.ag-theme-quartz-auto-dark .idsys-ff-clear:hover {
    background-color: rgb(255, 255, 255, 0.12);
}

/* Keep the filter input clear of the × so text/value isn't hidden behind it. */
.ag-floating-filter.idsys-ff-has-clear .ag-input-field-input {
    padding-right: 28px;
}


.floating-multi-filter-button-container {
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* The floating-filter body is a flex item with min-width:auto, so it refuses to
   shrink below its content and a long multi-filter label balloons it past the
   cell, breaking the header row. Force it to shrink and clip instead. */
.ag-header-cell.ag-floating-filter .ag-floating-filter-body {
    min-width: 0;
    overflow: hidden;
}

.floating-multi-filter-button {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 14px;
    text-align: left;
    /* Long selected-value labels would otherwise overflow and break the cell. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-theme-quartz .floating-multi-filter-button {
    border: 1px solid rgb(0, 0, 0, 0.15);
    background-color: rgb(255, 255, 255, 0.25);
}

.ag-theme-quartz-dark .floating-multi-filter-button {
    border: 1px solid rgb(255, 255, 255, 0.15);
    background-color: rgb(255, 255, 255, 0.03);
}

@media screen and (prefers-color-scheme: dark) {
    .ag-theme-quartz-auto-dark .floating-multi-filter-button {
        border: 1px solid rgb(255, 255, 255, 0.15);
        background-color: rgb(255, 255, 255, 0.03);
    }
}

@media screen and (prefers-color-scheme: light) {
    .ag-theme-quartz-auto-dark .floating-multi-filter-button {
        border: 1px solid rgb(0, 0, 0, 0.15);
        background-color: rgb(255, 255, 255, 0.25);
    }
}



/*#endregion:*/

.green-row {
    background-color: lightgreen !important;
}

.grid-container {
    display: grid;
    grid-template-columns: auto 1fr;
    /* Two columns: one for headers, one for values */
    gap: 10px;
    /* Space between columns and rows */
}

.header-item,
.value-item {
    display: flex;
    align-items: center;
    /* Vertically center content within the grid cell */
    grid-column: auto / span 1;
    /* Each item spans one column */
}

.header-item {
    grid-column: 1;
    /* Header in the first column */
}

.value-item {
    grid-column: 2;
    /* Value in the second column */
    word-break: break-word;
    /* Ensure long words do not overflow */
}

.larger-checkbox {
    transform: scale(1.4);
    /* Increase size of checkbox */
}

/* Styles for Desktop View */
.desktop-view {
    display: block;
    /* Show on larger screens */
}

.mobile-view {
    display: none;
    /* Hide on larger screens */
}

/* Styles for Mobile View */
@media screen and (max-width: 767.98px) {
    .desktop-view {
        display: none;
        /* Hide on smaller screens */
    }

    .mobile-view {
        display: block;
        /* Show on smaller screens */
    }

    .edit-modal .modal-body .slick-section-header {
        padding-left: 7px;
    }
}

.cards-container {
    display: flex;
    flex-direction: column;
    overflow-y: visible;
}

.card {
    position: relative;
    /* Needed for absolute positioning of children */
}

.custom-card {
    border: 1px solid #ddd;
    /* Subtle border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Soft shadow for depth */
    border-radius: 8px;
    /* Rounded corners */
    background-color: #fff;
    /* White background */
    position: relative;
    /* For absolute positioning of delete button */
    font-family: 'Arial', sans-serif;
}

.custom-card-body {
    padding: 15px;
    /* Adequate padding inside the card */
}



.custom-delete-row:hover {
    color: #d9534f;
    /* Color change on hover for interactivity */
}



/* Optional: Style for hover effect on delete button */
.delete-row:hover {
    color: #ff0000;
    /* Change color on hover, for example */
}

.confirmation-message-bubble {
    display: block;
    /* Stack bubbles vertically */
    margin-bottom: 5px;
    /* Space between bubbles */
    background-color: #E0F7FA;
    /* Soft cyan */
    color: #0C5460;
    /* Dark cyan - for text */
    border: 1px solid #B2EBF2;
    /* Lighter shade of cyan for border */
    border-radius: 10px;
    /* Rounded corners for bubble */
    padding: 10px;
    /* Inner spacing */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* Optional: adds shadow for depth */
    max-width: 200px;
    /* Adjust as needed */
    word-wrap: break-word;
    /* Ensures text wraps inside the bubble */
    margin-top: 5px;
    /* Additional styling as needed */
}


.card-body {
    display: flex;
}

.card-column {
    flex: 1;
}

.card-header-column,
.card-value-column {
    display: flex;
    flex-direction: column;
}


form.changed .when-form-unchanged,
form:not(.changed) .when-form-changed {
    display: none;
}

form:not(.editing) .when-form-editing,
form.editing .form-header .btn-group,
form.editing .form-header .btn:not(.actions):not(.close-btn):not([data-click="saveSlickEditing"]):not([data-click="cancelSlickEditing"]):not([data-click="showSidebar"]),
form.editing .form-header .dropdown-item:not([data-click="saveSlickEditing"]):not([data-click="cancelSlickEditing"]),
form.editing .form-header .dropdown-divider,
form.editing .form-header .dropdown-header,
form.editing .form-footer,
form.editing .nav-link[data-tab="references"],
form.editing .nav-link[data-tab="files"],
form.editing .save-button,
form.editing #saveButton {
    display: none !important;
}

.tab-extras {
    padding-top: 4px;
    padding-left: 5px;
}

.tab-extras>.btn {
    padding-top: 4px;
    padding-bottom: 4px;
    border: none;
}

.tooltip-inner {
    max-width: 360px;
}

.tooltip.tooltip-no-wrap,
.tooltip.tooltip-no-wrap .tooltip-inner {
    max-width: none;
}

.custom-filter-container {
    position: relative;
}

.filter-icon {
    cursor: pointer;
}

.custom-filter-input-container {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 10;
}

.confirm-icon {
    margin-left: 5px;
    cursor: pointer;
}

.file-drop-zone {
    width: 100%;
    height: 80px;
    border: 2px dashed #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #888;
    background-color: #f0f0f0;
    position: relative;
    cursor: pointer;
}

.file-drop-zone.dragover {
    border-color: #555;
    color: #555;
    background-color: #e0e0e0;
}

.file-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-attachments:not(:empty) {
    margin-top: 20px;
}

.file-attachment {
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.file-attachment .filename {
    font-size: 14px;
    text-decoration: none;
    color: #1a73e8;
    cursor: pointer;
}


h4.mvc-title {
    padding-bottom: 0.65rem;
}


.btn i.fa+span:not(:empty),
.btn i.fas+span:not(:empty),
.btn i.far+span:not(:empty),
.btn i.fab+span:not(:empty) {
    margin-left: 4px;
}

.btn span:not(:empty)+i.fa,
.btn span:not(:empty)+i.fas,
.btn span:not(:empty)+i.far,
.btn span:not(:empty)+i.fab {
    vertical-align: -3%;
    margin-left: 3px;
}

.dropdown-item>.fa-fw {
    margin-left: -0.4em;
    margin-right: 0.3em;
}

.dropdown-menu {
    z-index: 1040;
    /* above the .navbar.fixed-top, which has a z-index of 1030 */
}

.MVCGridContainer .table td.actions {
    padding: 0.55em 0.7em;
    text-align: right;
    vertical-align: middle;
}

.MVCGridContainer .table.table-sm td.actions {
    padding: 0 0.2em;
}


.autocomplete-suggestions {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 2px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}


body.popup-content {
    background-color: unset;
}

body.popup-content .body-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
}


body.no-padding,
body.no-margin,
body.no-padding #main-container,
body.no-margin #main-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 100% !important;
}

body.no-padding #main-container,
body.no-margin #main-container {
    min-height: 100% !important;
}

body:not(.content-no-menu).no-padding.no-margin {
    margin-top: 54px !important;
}

body:not(.content-no-menu).no-padding.no-margin #main-container {
    min-height: calc(100% - 54px) !important;
}

.scroll-past-end {
    padding-bottom: calc(75vh - 200px) !important;
}



.login-area {
    padding: 2em 2em 1.75em 2em;
    border-radius: 10px;
    background-color: white;
}

form+.login-language-select {
    margin-top: -2.75em;
    float: right;
}

footer {
    padding-top: 10px;
}

h4.title {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #E5E5E5;
}

.alert.text-xxl {
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
}

div.alert>ol,
ul,
dl {
    margin-bottom: 0;
    padding-left: 20px;
}

.modal-md {
    max-width: 650px;
}

@media (min-width: 768px) {
    .modal-lg {
        max-width: 650px;
    }
}


@media (min-width: 992px) {
    .modal-lg {
        max-width: 900px;
    }
}

@media (min-width: 1080px) {
    .modal-lg {
        max-width: 980px;
    }
}

@media (min-width: 1300px) {
    .modal-lg {
        max-width: 1100px;
    }
}

@media (min-width: 1600px) {
    .modal-lg {
        max-width: 1400px;
    }
}

.bootbox-body {
    position: relative;
}

#rowAddButton {
    position: sticky;
    bottom: 3em;
    left: calc(50% - 6.5em - 0.5em - 2.5em);
    width: 2.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    padding: 0.5rem;
    z-index: 750;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

#saveButton {
    position: sticky;
    bottom: 1.75em;
    left: calc(50% - 6.5em);
    width: 13em;
    margin-top: 2em;
    margin-bottom: 1em;
    /*float: left;*/
    /*margin-top: -1em;*/
    z-index: 750;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

/* Save button appearance based on form change state */
form:not(.changed) #saveButton {
    background-color: transparent !important;
    color: #adb5bd;
    border-color: #adb5bd;
}

form:not(.changed) #saveButton:hover {
    background-color: #adb5bd !important;
    color: #fff;
}

form.changed #saveButton {
    background-color: #18BC9C !important;
    border-color: #18BC9C !important;
    color: #fff !important;
}

#saveButton.has-errors {
    left: calc(50% - 8em);
    width: 16em;
}

@media (max-width: 576px) {
    #saveButton {
        width: 3em;
        left: calc(50% - 1.5em);
    }

    #rowAddButton {
        left: calc(50% - 2.5em - 0.5em);
    }

    #rowAddButton+#saveButton {
        left: calc(50%);
    }
}


.row-number-bottom-right {
    position: absolute;
    top: 10px;
    /* Increased margin from the bottom */
    right: 50px;
    /* Increased margin from the right */
    font-size: 1.4em;
    /* Larger font size */
}

.custom-delete-row {
    position: absolute;
    top: 6px;
    right: 5px;
    z-index: 2;
    background-color: transparent;
    /* Transparent background */
    border: none;
    /* Remove border */
    color: rgba(255, 0, 0, 0.3)
        /* Subtle color for the icon */
}


.custom-card {
    position: relative;
    /* Other styles */
}


.modal-header-card-popup {
    display: flex;
    align-items: center;
    /* Ensures vertical alignment */
    justify-content: space-between;
    /* Spaces out the title and the close button */
    margin-right: 0;
    margin-top: 1rem;
    margin-left: 1rem;
    justify-content: center;
}

.close-card-popup {
    margin-top: 1rem;
    margin-right: 1rem;
}

.modal-title-card-popup {
    margin-bottom: 0;
    /* Removes any default margin */
}

label {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
}

.input-group.date {
    max-width: 145px;
}

.help-active {
    text-decoration: underline;
    font-weight: bold;
}

.recovery-code {
    font-size: 1.5rem;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/** ag-grid **************************/

.ag-grid-rfid-code {
    font-family: 'PT Mono', monospace;
    /*text-transform: uppercase;*/
}

.rfid-field {
    font-family: 'PT Mono', monospace;
    /*text-transform: uppercase;*/
}

/* Row drag handle column */
.row-drag-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-drag-cell .ag-row-drag {
    opacity: 0.5;
    transition: opacity 0.15s;
}

.row-drag-cell:hover .ag-row-drag {
    opacity: 1;
}

/* Row number column */
.row-number-cell {
    color: #999;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    justify-content: center !important;
    text-align: center;
    user-select: none;
    padding-left: 0 !important;
    padding-right: 4px !important;
}

.local-ag-grid .ag-header-cell[col-id="rowNumber"] .ag-header-cell-label {
    justify-content: center;
    padding-right: 4px !important;
}

/* Rich text cell formatting */
.rich-text-cell code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-family: 'PT Mono', monospace;
    font-size: 0.9em;
}

.ag-theme-quartz-dark .rich-text-cell code,
.ag-theme-quartz-auto-dark .rich-text-cell code {
    background-color: rgba(255, 255, 255, 0.1);
}

.inline-tooltip {
    cursor: pointer;
}

.rfid-tooltip {
    font-family: 'PT Mono', monospace;
    font-size: 12px;
    white-space: nowrap;
    /*text-transform: uppercase;*/
}

.rfid-tooltip-elem {
    cursor: pointer;
}

/** Validation Styles */
.form-control.input-validation-error {
    border-color: #E74C3C;
}

.field-validation-error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #E74C3C;
}

.form-control.input-validation-error~.invalid-feedback {
    display: block;
}

.custom-control-input.input-validation-error~label {
    color: #E74C3C;
}

.custom-checkbox .custom-control-input.input-validation-error~.custom-control-label::before {
    border: 1px solid #E74C3C;
}


.bootbox-close-button {
    position: relative;
    z-index: 1;
    padding-left: 12px !important;
    /*padding-right: 2px !important;*/
    font-size: 1.875em;
}


.comment-close-btn {
    position: absolute;
    bottom: 10px;
    /* Adjust as needed */
    right: 10px;
    /* Adjust as needed */
    z-index: 1051;
    /* Ensure it's above the content */
}

.comment-input {
    width: 100%;
    /* Make textarea full width */
    box-sizing: border-box;
    /* Include padding and border in the element's width */
    margin-bottom: 10px;
    /* Space between textarea and buttons */
}

.tooltip-buttons {
    display: flex;
    /* Enable Flexbox */
    justify-content: flex-end;
    /* Align buttons to the right */
    padding-right: 5px;
    /* Add padding on the right for some spacing from the edge */
}

.comment-tooltip {
    position: absolute;
    width: 100vw;
    top: 100%;
    /* Position it below the icon */
    left: 50%;
    /* Center it */
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    /* Ensure it's above other content */
}

.comment-tooltip {
    display: none;
}

#cardModal .modal-dialog {
    width: 100vw;
    /* Keep full viewport width */
    max-width: 100vw;
    /* Ensure it doesn't exceed the viewport width */

    position: fixed;
    /* Use fixed positioning */
    top: 50%;
    /* Position the top edge of the modal at the center of the viewport */
    transform: translateY(-50%);
    /* Shift the modal up by half its own height to center it */

    margin: 0;
    /* Keep existing margin settings */
    display: block;
    /* Use block display */
}

.bootbox-modal .modal-dialog {
    width: 100vw;
    /* Set width to the full viewport width */
    max-width: 100vw;
    /* Ensure it doesn't exceed the viewport width */

    margin: 0;
    display: flex;
    align-items: center;
    /* Vertically center the modal */
}
.modal-dialog > .modal-content {
    border-radius: 16px;
}
.bootbox-modal .modal-content {
    overflow-y: auto;
    /* Make content scrollable */
    /* Subtract a little to account for margin */
    max-height: calc(100vh - 1rem);
}

@media screen and (min-width: 600px) {
    .bootbox-modal.qr-bootbox .modal-dialog {
        width: 70vw;
        /* Set width to 70% of the viewport width */
        max-width: 70vw;
        /* Ensure it doesn't exceed 70% of the viewport width */
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        /* Vertically center the modal */
    }
}


.total-data-rows-badge,
.total-data-rows {
    margin-top: 1px;
}

.currentTitle {
    vertical-align: middle;
    font-weight: bold;
    font-size: 12px;
    line-height: 13px;
}

.currentTitle::first-line {
    font-size: 19px;
    line-height: 23px;
}

.currentTitle.modest {
    font-weight: normal;
}

.currentTitle.modest::first-line {
    font-size: 17px;
}

.currentFilterTitle {
    font-size: 1.2em;
    vertical-align: middle;
}

.currentFilterTitle:empty {
    margin: 0 !important;
}

/* AG-Grid "this view has changed" inline bar (top of the View dropdown) */
.view-changed-bar {
    min-width: 240px;
}

.view-changed-label {
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.85;
}

/* Changed-bar Save button: "Save" when overwriting the active view, "Save as..." when
   no view is selected (saving creates a new one). */
.save-label-new { display: none; }
#filterDropdownContainer:not(.has-active-view) .save-label-active { display: none; }
#filterDropdownContainer:not(.has-active-view) .save-label-new { display: inline; }

/* Changed-bar Reset button icon: undo (revert to the saved view) when one is active,
   broom (reset to default) when no view is selected. */
.reset-icon-new { display: none; }
#filterDropdownContainer:not(.has-active-view) .reset-icon-active { display: none; }
#filterDropdownContainer:not(.has-active-view) .reset-icon-new { display: inline; }

/* Small dot on the View dropdown button when the current view has unsaved changes */
.view-dirty-dot {
    display: none;
    position: relative;
    top: -2px;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-radius: 50%;
    background-color: var(--warning, #ffc107);
    vertical-align: middle;
}

#filterDropdownContainer.view-dirty .view-dirty-dot {
    display: inline-block;
}

/* When the current view has unsaved changes, hide the "unchanged" slot
   (Reset View) — the changed bar takes its place. Compound selector beats
   Bootstrap's single-class .d-md-* utilities. */
#filterDropdownContainer.view-dirty .view-unchanged-only {
    display: none !important;
}

/* Nothing to reset (no active saved view and no unsaved changes) => hide Reset View. */
#filterDropdownContainer:not(.has-active-view):not(.view-dirty) .view-unchanged-only {
    display: none !important;
}

/* Live View active state when rendered as a dropdown item (in the ⋮ tools menu) */
.dropdown-item.live-view.active {
    font-weight: 600;
}

/* View dropdown button: when an active view is shown, drop the "View" label so the button
   reads just the view name; when none is selected, drop the filter icon so it reads "View".
   Keyed on the JS-maintained .has-active-view container class rather than :has(#currentFilter…)
   — NUglify can't parse an #id selector inside :has(), so it breaks the CSS bundle. */
#filterDropdownContainer.has-active-view .view-word {
    display: none;
}

#filterDropdownContainer:not(.has-active-view) .view-filter-icon {
    display: none;
}

/* On desktop (lg+) the only items above the saved-views list are the changed-bar (when
   dirty) and Reset View (when there's an active view); the parent-table links are d-lg-none
   and the mobile actions are d-md-none. So when neither is present, the views-list divider
   would sit orphaned at the very top of the dropdown — drop it. Pure CSS keyed on the same
   state classes, so it's correct on the first painted frame (no JS reflow / pop-in). */
@media (min-width: 992px) {
    #filterDropdownContainer:not(.view-dirty):not(.has-active-view) .views-list-divider {
        display: none !important;
    }
}


/* Live clock button (between View dropdown and ⋮) — only shown while live is active */
.live-view-clock.active {
    display: inline-block !important;
}

/* Report / Table / Card view-mode trio (left of the View dropdown) — a Bootstrap
   btn-group with all segments always visible, so native btn-group radii apply. */
.view-mode-trio:empty {
    display: none !important;
}

/* ── Entity-edit section switcher: [ Main | Files | <active-extra> | ⋯ ] ──
   One segmented btn-group in the form-header (next to the breadcrumb): Main, Files,
   the temporary active-dropdown segment, and the ⋯ menu, all connected. */
/* The form-header gives every .btn a tall box; force genuinely compact vertical
   padding/line-height on the section buttons so the bar is short, not just small-text. */
.edit-section-bar .btn {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.4;
}
/* Drop Bootstrap's strong focus ring (box-shadow) on the section buttons when clicked. */
.edit-section-bar .btn:focus,
.edit-section-bar .btn.focus,
.edit-section-bar .btn:active:focus {
    box-shadow: none !important;
    outline: none !important;
}
/* Restore the outer rounding on the first segment (Form) — the form-header btn rules can
   strip the btn-group's default :first-child radii. */
.edit-section-bar > .edit-section-btn:first-child {
    border-top-left-radius: 0.2rem !important;
    border-bottom-left-radius: 0.2rem !important;
}
.edit-section-temp.d-none {
    display: none !important;
}
/* Split-view hint at the bottom of the ⋯ menu. Hidden when the menu was hover-opened
   via a held modifier (the user already knows about it then). */
.edit-section-more.hover-opened .edit-section-split-tip {
    display: none;
}
.dropdown-item-text.edit-section-split-tip {
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
    line-height: 1.25rem;
}
.edit-section-split-tip kbd {
    margin-right: 0.25rem;
    background-color: var(--secondary, #6c757d);
    color: #fff;
}
/* The ⋯ toggle drops the dropdown-toggle caret on purpose (icon-only). */
.edit-section-more-toggle::after {
    display: none;
}
/* The ⋯ sits in a nested btn-group as the last segment; without the .dropdown-toggle
   class Bootstrap doesn't round its right edge, so do it explicitly. */
.edit-section-bar > .edit-section-more:last-child > .edit-section-more-toggle {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

/* Reference-tab row in the ⋯ menu: the section button fills the width, a per-tab ⋯
   button sits flush at the right and only reveals on row hover (or when its menu is open). */
.ref-tab-row {
    display: flex;
    align-items: stretch;
}
.ref-tab-row > .edit-section-btn {
    flex: 1 1 auto;
    min-width: 0;
}
.ref-tab-row > .ref-tab-dots-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0 0.6rem;
    color: inherit;
    opacity: 0;
    cursor: pointer;
}
.ref-tab-row:hover > .ref-tab-dots-btn,
.ref-tab-row > .ref-tab-dots-btn:focus,
.ref-tab-row > .ref-tab-dots-btn.active {
    opacity: 0.6;
}
.ref-tab-row > .ref-tab-dots-btn:hover {
    opacity: 1;
}

/* An embedded grid fragment (reference tab / Designer block) has no full-page .container wrapper,
   so make its root + grid container fill the host pane's width. */
.embedded-grid-root {
    display: block;
    width: 100%;
}
.embedded-grid-root #agGridContainer,
.embedded-grid-root [data-grid-role="container"],
.embedded-grid-root [data-grid-role="grid"] {
    width: 100%;
}
/* The reference-grid host panes themselves stretch to the form width. */
.reference-grid-pane,
.reference-grid-autoload {
    width: 100%;
}

/* Section-bar tab host: edit-sections.js gives .reference-grid-pane a DEFINITE height (fills from
   its top to the viewport bottom). Make the grid root a flex column inside it so the grid fills the
   space left below the toolbar — a perfect vertical fit, no magic numbers. The fragment's inline
   `height: 480px` on the grid div is overridden to flex-fill here. */
.reference-grid-pane {
    height: 100%;
}
.reference-grid-pane > .embedded-grid-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.reference-grid-pane > .embedded-grid-root > #agGridContainer,
.reference-grid-pane > .embedded-grid-root > [data-grid-role="container"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.reference-grid-pane > .embedded-grid-root [data-grid-role="grid"] {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;   /* override the fragment's inline fixed height */
}

/* Split view: the section content becomes two independent 50/50 cells. Ctrl/Cmd =
   side-by-side (.is-split, row), Alt = stacked top/bottom (.is-split-col). Full-page
   only — JS never adds these in popups / narrow widths. */
.edit-section-content.is-split,
.edit-section-content.is-split-col {
    display: flex;
}
.edit-section-content.is-split {
    flex-direction: row;
    align-items: stretch;
}
.edit-section-content.is-split-col {
    flex-direction: column;
}
/* Split cells: the FIRST cell takes --split-ratio of the axis (set by the divider drag),
   the second fills the rest. Each scrolls its own content. Overall content height is set
   by edit-sections.js (measured) so there's no empty space / overflow at the bottom. */
.edit-section-content.is-split > .edit-split-first {
    flex: 0 0 var(--split-ratio, 50%);
    min-width: 0;
    overflow: auto;
}
.edit-section-content.is-split > .edit-split-second {
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
}
.edit-section-content.is-split-col > .edit-split-first {
    flex: 0 0 var(--split-ratio, 50%);
    min-height: 0;
    overflow: auto;
}
.edit-section-content.is-split-col > .edit-split-second {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* The resizable divider between the two split cells — a clear, grabbable bar. */
.edit-split-divider {
    flex: 0 0 8px;
    background-color: var(--sidebar-border-color, rgb(226, 226, 226));
    background-clip: padding-box;
    position: relative;
    z-index: 2;
}
.edit-section-content.is-split > .edit-split-divider {
    cursor: col-resize;
    height: 100%;            /* full height of the row split */
    border-left: 3px solid transparent;
    border-right: 4px solid transparent;
}
.edit-section-content.is-split-col > .edit-split-divider {
    cursor: row-resize;
    width: 100%;             /* full width of the stacked split */
    border-top: 3px solid transparent;
    border-bottom: 4px solid transparent;
}
.edit-split-divider:hover {
    background-color: var(--primary, #007bff);
}
/* While dragging the divider, suppress text selection + iframe pointer capture. */
body.edit-split-resizing {
    user-select: none;
}
body.edit-split-resizing.edit-split-resizing-row { cursor: col-resize; }
body.edit-split-resizing.edit-split-resizing-col { cursor: row-resize; }
body.edit-split-resizing iframe {
    pointer-events: none;
}
/* In split mode, the form-header gets a bottom border (matching the sidebar border) to
   visually separate it from the split panes below. */
.edit-split-active .form-header {
    border-bottom: solid 1px var(--sidebar-border-color, rgb(226, 226, 226));
}
/* The floating voice/keyboard toolbar (fixed bottom-right) overlaps the AI-chat send button
   when split left/right — hide it while a split is active. */
body.edit-split-active .mobile-input-toolbar,
body.edit-split-active #ai-assistant-button,
body.edit-split-active .top-right-mic-button {
    display: none !important;
}
/* Inside a split cell, force the moved pane fully visible regardless of Bootstrap's
   tab-pane / .fade display+opacity mechanics (the pane is no longer a direct child of
   .tab-content, so those rules don't reliably apply). */
.edit-split-col > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    height: 100%;
}
/* …but the flex-layout panes (grid/chat/timeline fillers) must stay flex columns so their
   inner content fills + scrolls; override the block above. */
.edit-split-col > .files-pane,
.edit-split-col > .transcriptions-pane,
.edit-split-col > .activity-pane,
.edit-split-col > .chat-pane {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

/* The Main section holds a nested .tab-content (field pages). Don't double up the
   padding/border the outer .edit-section-content already provides. */
.edit-section-content .edit-main-inner-content {
    padding: 0;
    border: 0;
}

/* ── Section fill mode ──────────────────────────────────────────────────────────
   Only the Main section flows naturally (and scrolls past the end). Every other
   section fills the available viewport height/width and scrolls its OWN content. */
/* Drop the big scroll-past-end tail when a non-Main section is active, and let the
   container go full-width (it's a Bootstrap .container, normally max-width-capped). */
#main-container.section-fill-mode.scroll-past-end {
    padding-bottom: 0 !important;
}
#main-container.section-fill-mode {
    max-width: none;
}
/* The active non-Main pane fills the space under the form-header and scrolls inside.
   Its exact height is set by edit-sections.js (measured top → viewport bottom). */
.edit-section-content.section-fill {
    padding-top: 0;
}
.edit-section-content.section-fill > .tab-pane.show.active {
    width: 100%;
    overflow: auto;
}
/* Iframes inside a filled section (or a split column) take the full pane. display:block
   removes the inline descender gap (~4px) that otherwise made the pane scrollable by a few
   pixels. The pane itself doesn't scroll — the iframe's own content does. */
.edit-section-content.section-fill > .tab-pane.show.active > iframe,
.edit-split-col > .tab-pane > iframe {
    display: block;
    height: 100% !important;
    width: 100%;
    border: none;
}
.edit-section-content.section-fill > .tab-pane.show.active:has(> iframe),
.edit-split-col > .tab-pane:has(> iframe) {
    overflow: hidden;
}

/* Files pane: a flex column where the ag-grid fills the available height and scrolls
   internally (normal domLayout), with the upload drop-zone pinned below it. (The split-col
   case is handled by the .edit-split-col layout-pane rule above.) */
.edit-section-content.section-fill > .files-pane.show.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.files-pane > .files-pane-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.files-pane > .files-pane-grid > .col-12 {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.files-pane > .files-pane-grid > .col-12 > .ag-theme-alpine {
    flex: 1 1 auto;
    min-height: 0;
}
.files-pane > .drop-zone-indicator {
    flex: 0 0 auto;
}
/* No files → the grid is hidden, so let the upload drop-zone grow to fill the whole pane
   (and centre its prompt) instead of sitting as a small strip up top. (files.js toggles
   .files-empty on the pane by row count.) */
.files-pane.files-empty > .files-pane-grid {
    flex: 0 0 auto;
}
.files-pane.files-empty > .drop-zone-indicator {
    flex: 1 1 auto;
    min-height: 0;
}

/* Transcriptions pane: same fill-mode treatment as Files — the grid fills the
   available height and scrolls internally, with the drop-zone pinned below. */
.edit-section-content.section-fill > .transcriptions-pane.show.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.transcriptions-pane > .transcriptions-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.transcriptions-pane .transcriptions-grid,
.transcriptions-pane #transcriptionsGrid,
.transcriptions-pane [id^="transcriptionsGrid"] {
    flex: 1 1 auto;
    min-height: 0;
}
.transcriptions-pane .transcription-drop-zone {
    flex: 0 0 auto;
}

/* AI chat pane: flex column — messages fill+scroll, input pinned at the bottom. */
.edit-section-content.section-fill > .chat-pane.show.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chat-pane > .page-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.chat-pane > .page-chat-input-area {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--sidebar-border-color, #e2e2e2);
    background: var(--sheet-bg, #fff);
}
.chat-pane > .page-chat-input-area .form-control {
    flex: 1 1 auto;
}
.chat-pane > .page-chat-input-area .btn {
    flex: 0 0 auto;
}

/* Activity (Log/Messages) pane: flex column — the timeline fills the available height
   and scrolls (overriding its fixed 55vh), comment input pinned at the bottom. */
.edit-section-content.section-fill > .activity-pane.show.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.activity-pane > .activity-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
.activity-pane > .activity-comment-input-container {
    display: flex;
    flex: 0 0 auto;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}


.mvc-filter {
    padding-top: 15px;
    padding-bottom: 15px;
}

.mvc-filter .title {
    margin-top: -5px;
    margin-left: -5px;
    color: #DBDBDB;
    font-size: 39px;
    float: right;
}

.mvc-filter .form-group {
    display: inline-block;
    margin-right: 10px !important;
}

.mvc-filter .control-label {
    color: #222;
    font-weight: normal;
    font-size: 12px;
    padding-bottom: 4px;
    display: inline-block;
}

.mvc-filter .form-control {
    display: block;
    /*width: 100%;*/
}

.mvc-filter .btn {
    margin-top: 25px;
}


.MVCGridContainer thead th {
    white-space: nowrap;
}

.MVCGridContainer td {
    vertical-align: top;
}

.table.border-top-none th {
    border-top: none;
}

.color-sort {
    color: #58a676;
}

.color-gray {
    color: #bdbdbd;
}

.daterange-icon {
    cursor: pointer;
}


.sub-title {
    padding-top: 0;
    margin-top: 0;
    font-size: 16px;
    border-bottom: solid 1px;
    border-bottom-color: var(--gray);
    color: var(--teal);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.sub-title:not(:first-of-type) {
    padding-top: 10px;
}


/*** multiselect-native-select ******/

.mvc-filter .multiselect-native-select button {
    margin-top: 0;
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #7b8a8b;
}

ul.multiselect-container li label.checkbox {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding-left: 30px !important;
}

ul.multiselect-container li label.checkbox input {
    margin-right: 5px !important;
    margin-top: 4px;
}

.custom-control-label {
    cursor: pointer;
    user-select: none;
}

.custom-date-filter {
    width: 110px;
    position: relative;
}

.custom-date-filter>.input-button {
    position: absolute;
    left: 90px;
    padding: 1px;
    opacity: 0.5;
    cursor: pointer;
}

.custom-date-filter>.input-button:hover {
    opacity: 1;
}

/* .custom-date-filter:after {
    content: '\f073';
    font-weight: 400;
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 2px;
    left: 72px;
    pointer-events: none;
    opacity: 0.5;
} */

.ag-filter-body .custom-date-filter {
    margin: 4px 2px;
}

.ag-filter-body .custom-date-filter>.input-button {
    padding: 2px;
}


/* AG-Grid MultiSelectFilter */

.multi-filter {
    position: relative;
    padding-top: 0.25rem;
    overflow: visible !important;
}

/* Let the close button escape AG-Grid's popup/menu clipping */
.ag-popup-child:has(.multi-filter),
.ag-menu:has(.multi-filter),
.ag-tabs:has(.multi-filter),
.ag-tabs-body:has(.multi-filter),
.ag-filter:has(.multi-filter) {
    overflow: visible !important;
}

.multi-filter .multi-filter-close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 10;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    color: #333;
    font-size: 0.875rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.multi-filter .multi-filter-close:hover {
    background: #f1f3f5;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.multi-filter .rows>button:not(.selected) .fa-check {
    opacity: 0;
}

.multi-filter .rows>button {
    max-width: 30em;
    display: flex;
    align-items: center !important;
    text-align: left;
}

.multi-filter .rows>button>.fa-check {
    width: 1.5em !important;
    min-width: 1.5em !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    text-align: center;
}

.multi-filter button.toggle-all {
    flex-grow: 0;
}

.multi-filter button {
    border-radius: 0;
}

/* Fix for input-group in multi-filter: prevent X button from wrapping below search */
.multi-filter .input-group {
    flex-wrap: nowrap;
}

.multi-filter .input-group .search {
    min-width: 8em !important;
    /* Override inline style, reduced from 16em to allow shrinking */
    flex: 1 1 auto;
}

.multi-filter .input-group .input-group-append {
    flex-shrink: 0;
}


table .col-1,
table .col-md-1 {
    width: 8.3333333333%;
}

table .col-2,
table .col-md-2 {
    width: 16.6666666667%;
}

table .col-3,
table .col-md-3 {
    width: 25%;
}

table .col-4,
table .col-md-4 {
    width: 33.3333333333%;
}

table .col-5,
table .col-md-5 {
    width: 41.6666666667%;
}

table .col-6,
table .col-md-6 {
    width: 50%;
}

table .col-7,
table .col-md-7 {
    width: 58.3333333333%;
}

table .col-8,
table .col-md-8 {
    width: 66.6666666667%;
}

table .col-9,
table .col-md-9 {
    width: 75%;
}

table .col-10,
table .col-md-10 {
    width: 83.3333333333%;
}

table .col-11,
table .col-md-11 {
    width: 91.6666666667%;
}

table .col-12,
table .col-md-12 {
    width: 100%;
}

.valign-middle {
    vertical-align: middle !important;
}


.custom-control-nolabel::before {
    left: -1.1rem !important;
}

.custom-control-nolabel::after {
    left: -1.1rem !important;
}


ul.sortable-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.sortable-list li:nth-child(odd) {
    background: linear-gradient(to bottom, rgba(171, 171, 171, 0.10) 0%, rgba(171, 171, 171, 0.05) 100%);
    border-bottom: 1px solid #DDDDDD;
}

ul.sortable-list li {
    background-color: #fff;
    padding: 5px 0 5px 10px;
}

.drag-handle {
    margin-right: 10px;
    font: bold 20px Sans-Serif;
    color: #5F9EDF;
    display: inline-block;
    cursor: grabbing;
}

.col-dragable {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 42px;
    min-height: 28px;
    line-height: 20px;
}

.col-dragable-text {
    line-height: 28px;
    height: 28px;
    font-weight: bold;
}

.checkbox-dragable {
    margin: 5px 0;
    display: inline-block;
}

.checkbox-dragable label {
    line-height: 1.3rem;
}

/* Typeahead */

span.twitter-typeahead .tt-menu {
    cursor: pointer;
}

span.twitter-typeahead .tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 1rem;
    color: #373a3c;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}

span.twitter-typeahead .tt-suggestion {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.5;
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

span.twitter-typeahead .tt-suggestion:focus,
span.twitter-typeahead .tt-suggestion:hover {
    color: #2b2d2f;
    text-decoration: none;
    background-color: #f5f5f5;
}

span.twitter-typeahead .active.tt-suggestion,
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .active.tt-suggestion:focus,
span.twitter-typeahead .tt-suggestion.tt-cursor:focus,
span.twitter-typeahead .active.tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
    color: #fff;
    text-decoration: none;
    background-color: #0275d8;
    outline: 0;
}

span.twitter-typeahead .disabled.tt-suggestion,
span.twitter-typeahead .disabled.tt-suggestion:focus,
span.twitter-typeahead .disabled.tt-suggestion:hover {
    color: #818a91;
}

span.twitter-typeahead .disabled.tt-suggestion:focus,
span.twitter-typeahead .disabled.tt-suggestion:hover {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

span.twitter-typeahead {
    width: 100%;
}

.input-group span.twitter-typeahead {
    display: block !important;
}

.input-group span.twitter-typeahead .tt-menu {
    top: 2.375rem !important;
}

.btn:disabled {
    color: #fff !important;
    background-color: #c8c8c8 !important;
    border-color: #c8c8c8 !important;
}

.editEventForm-move-handle,
.filterManagerForm-move-handle,
.colVisibilityForm-move-handle,
.pdfExportForm-move-handle {
    cursor: move;
}


.info-bubble {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZFJREFUOI19Ur1qVEEYPd+ZuXfzAIYl6TRoJ67CmsoipMg7WNn4DGHBIMHFnzyDksZSe22SUjFhIQQbMeliMGIru96557Mwq7t3hz3lfOfvmxlDBr2BFkPSOoirAEDDaWXce3aHP5pcmxJ+UDsWaUfAfYJxciYo0e01i7C53eHFjMGjweiWyd4DbOda/XfSuZtv9Lut438Gl8lHTbGgIQAQXGiasIyd7Q4vCACxSDs5cbS4ElO8Lun3lAG5pKp+AQDWG2iRSt8yOw+heAMBRJ2+kCybdyLG5RiS1o3T4nFtIX1FDTTFl/No0locP1UObrgX/t7Tx9zcgGszyZN42i0/AcDWYcoHOJw0nM4zmQ8/YWXcE5SPmAepSgr7BgBbB9UuzB40Od8RyqUFmIb1aNbAXz65WzwkALAIm5DOm5w26jf6Vb+dba4zMvaAya98MLrpbu9ILs+t7jpz+UZ/tfUZADg+73dbx7GMt919F1KV29nhr2hFZyyeajCJx4d+xVGvObDiDgf8JCnsP1/lzyb3DznrrJ9XLLujAAAAAElFTkSuQmCC') top left;
    width: 16px;
    height: 16px;
    float: right;
    margin-left: 5px;
    display: block;
    cursor: pointer;
}

.info-bubble-inline {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZFJREFUOI19Ur1qVEEYPd+ZuXfzAIYl6TRoJ67CmsoipMg7WNn4DGHBIMHFnzyDksZSe22SUjFhIQQbMeliMGIru96557Mwq7t3hz3lfOfvmxlDBr2BFkPSOoirAEDDaWXce3aHP5pcmxJ+UDsWaUfAfYJxciYo0e01i7C53eHFjMGjweiWyd4DbOda/XfSuZtv9Lut438Gl8lHTbGgIQAQXGiasIyd7Q4vCACxSDs5cbS4ElO8Lun3lAG5pKp+AQDWG2iRSt8yOw+heAMBRJ2+kCybdyLG5RiS1o3T4nFtIX1FDTTFl/No0locP1UObrgX/t7Tx9zcgGszyZN42i0/AcDWYcoHOJw0nM4zmQ8/YWXcE5SPmAepSgr7BgBbB9UuzB40Od8RyqUFmIb1aNbAXz65WzwkALAIm5DOm5w26jf6Vb+dba4zMvaAya98MLrpbu9ILs+t7jpz+UZ/tfUZADg+73dbx7GMt919F1KV29nhr2hFZyyeajCJx4d+xVGvObDiDgf8JCnsP1/lzyb3DznrrJ9XLLujAAAAAElFTkSuQmCC') top left;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    cursor: pointer;
}

.w-1 {
    width: 1%;
}

.w-50 {
    width: 50%;
}

.input-view {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 7px 10px;
    border: 1px solid #ced4da;
    background-color: #F7F7F7;
    border-radius: 5px;
}


.popover .btn-group-vertical.rows .btn {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    transition: none !important;
}

.popover .btn-group-vertical.rows .btn:not(.selected):hover {
    background-color: hsl(205, 100%, 97%) !important;
}

.popover .btn-group-vertical.rows .btn.selected {
    background-color: hsl(205, 100%, 85%) !important;
}

.popmenu {
    position: absolute;
    max-height: 60vh;
    overflow: scroll;
    z-index: 2000;
    border-radius: 5px;
    background-color: white;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25);
    user-select: none;
    -webkit-user-select: none;
}

.popmenu>.btn-group-vertical>.btn {
    padding-top: 4px;
    padding-bottom: 4px;
    transition: none !important;
}

.popmenu>.btn-group-vertical>.btn:first-child,
.popmenu>.btn-group-vertical>.btn:last-child {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.popmenu>.btn-group-vertical>.btn:not(.selected):hover {
    background-color: hsl(205, 100%, 97%) !important;
}

.popmenu>.btn-group-vertical>.btn.selected {
    background-color: hsl(205, 100%, 85%) !important;
    font-weight: 600;
}

#popbox {
    position: absolute;
    z-index: 2000;
    border-radius: 5px;
    background-color: white;
}


.attached-clear-button {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.attached-clear-button::after {
    content: '×';
    position: absolute;
    right: -8px;
    top: -10px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    color: white;
    background-color: #C44;
}

.attached-clear-button:hover::after {
    background-color: #F00;
}


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.table-fixed tbody {
    height: 300px;
    overflow-y: auto;
    width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead>tr>th {
    float: left;
    position: relative;
}

.table-fixed thead>tr>th::after {
    content: '';
    clear: both;
    display: block;
}


.sticky-header-table-container {
    overflow-y: scroll;
    min-height: 80px;
    max-height: 2400px;
    height: calc(100vh - 500px);
    /* you can change this in your element */
}

.sticky-header-table-container table {
    margin-bottom: 0;
}

.sticky-header-table-container thead tr:nth-child(1) th {
    border-top: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sticky-header-table-container tfoot tr:nth-child(1) td {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.table .tfoot-light td {
    color: #7b8a8b;
    background-color: #ecf0f1;
    border-color: #dee2e6;
}

.table .tfoot-dark td {
    color: #2B3E50;
    background-color: #abb6c2;
    border-color: #4E5D6C;
}


/*
* ==========================================
* bootstrap-select
* ==========================================
*/

.bootstrap-select button {
    background-color: #fff !important;
    padding: 6px 12px 7px 16px;
    border-color: rgb(206, 212, 218);
}


.vertical-center {
    min-height: 100%;
    /* Fallback for vh unit */
    min-height: 100vh;
    /* You might also want to use
                           'height' property instead.
                           
                           Note that for percentage values of
                           'height' or 'min-height' properties,
                           the 'height' of the parent element
                           should be specified explicitly.
     
                           In this case the parent of '.vertical-center'
                           is the <body> element */
    /* Make it a flex container */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Align the bootstrap's container vertically */
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* In legacy web browsers such as Firefox 9
     we need to specify the width of the flex container */
    width: 100%;
    /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
     hence the bootstrap's container won't be aligned to the center anymore.
  
     Therefore, we should use the following declarations to get it centered again */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed;
    /* Stay in place */
    z-index: 5004;
    /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/opacity */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay * {
    color: #fff;
}

.overlay2 {
    z-index: 9000;
    /* Sit on top */
}

.overlay-content {
    min-width: 500px;
    font-size: 32px;
    text-align: center;
}

.add-scroll-bar {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.popup-scrollable-container {
    overflow: scroll;
    max-height: calc(100vh - 16em);
}

pre::-webkit-scrollbar,
.add-scroll-bar::-webkit-scrollbar {
    width: 40px;
    /* for vertical scrollbars */
    height: 40px;
    /* for horizontal scrollbars */
}

pre::-webkit-scrollbar-track,
.add-scroll-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

pre::-webkit-scrollbar-thumb,
.add-scroll-bar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
}

i.rfid-reading {
    background: url('../images/Ripple-1.5s-200px-white.svg');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    text-rendering: auto;
    line-height: 1;
    margin-top: 4px;
}

i.spinner {
    background-position: 0 8px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 40px;
    height: 44px;
    margin-right: 4px;
    text-rendering: auto;
    line-height: 1;
}

i.spinner-medium {
    background-position: 0 1px;
    background-size: 25px 24px;
    width: 28px;
    height: 22px;
}

i.spinner-small {
    background-position: 0 1px;
    background-size: 18px 19px;
    width: 17px;
    height: 17px;
    margin-left: 3px;
}

i.spinner-white {
    background-image: url('../images/Rolling-1s-200px_white.svg');
}

i.spinner-black {
    background-image: url('../images/Rolling-1s-200px.svg');
}

.alarm-container {
    background-color: #FFADB5;
    color: maroon;
    padding: 10px;
}

.alarm-container .table-striped tbody tr:nth-of-type(2n+1) {
    background-color: #FF96A0;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #b6d6f5;
}

.mass-edit-field-container>.form-control,
.mass-edit-field-container>.input-group>.form-control {
    height: 2.5em;
}


/* Sheet Adjustments */

body>.navbar+.container table.sheet>thead>tr>th {
    top: 54px;
}


/* Input Clear Button */

input.form-control+button.input-clear {
    position: absolute;
    z-index: 100;
    top: calc(50% - 1.15em);
    right: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: none;
    background-color: transparent;
}

input.form-control:placeholder-shown+button.input-clear {
    display: none;
}


/* Draggable */

.t-with-draggable {
    position: relative;
}

.t-draggable {
    cursor: grabbing;
}

.flying {
    position: absolute;
    width: 100%;
    z-index: 1000;
    opacity: 98%;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}


/* Editable */

.t-editable:hover {
    outline: solid 2px hsl(205, 100%, 94%);
    outline-offset: -3px;
}

.t-editable.select {
    position: relative;
    cursor: pointer;
}

.t-editable.select>input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px;
    border: none;
    z-index: 503;
}

.t-editable.select>.popup {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 5em;
    max-width: 25em;
    min-height: 1.5em;
    z-index: 501;
    background-color: white;
    border: solid 1px hsl(205, 20%, 50%);
}

.t-editable.select>.popup.scrollable {
    max-height: 20.25em;
    overflow: scroll;
}

.t-editable.select>.popup>.option {
    width: 100%;
    padding: 3px 12px 3px 4px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-editable.select>.popup>.option:hover {
    background-color: hsl(205, 100%, 92%);
}

.t-editable.select>.popup>.option.selected {
    background-color: hsl(205, 100%, 82%);
}


/* Patternator */

.patternator {
    width: 100%;
    font-size: 0.95em;
}

.patternator>tbody>tr>td.t-draggable>i {
    pointer-events: none;
}

.patternator>tbody>tr>td {
    padding: 5px 10px;
    user-select: none;
    font-size: 0.95em;
}

.patternator>tbody>tr>td:nth-child(1) {
    width: 3em;
    padding: 5px 12px;
}

.patternator>tbody>tr>td:nth-child(3) {
    width: 2em;
}

.patternator tr:nth-child(even) {
    background-color: white;
}

.patternator tr:nth-child(odd) {
    background-color: #FAF9F9;
}

.patternator tr.dragged {
    background-color: #EAE9E9;
    color: #CAC9C9;
}


body.tall-header {
    --navbar-height: 95px;
}

.enlarge-content * {
    font-size: 1.3rem;
}

.enlarge-content .custom-checkbox {
    line-height: 1.2rem;
}

#search-results * {
    font-size: 1.15rem;
}

tr.row-locked:nth-child(odd) {
    background-color: #FFD8DE !important;
}

tr.row-locked:nth-child(even) {
    background-color: #FFE8EB !important;
}

.row-locked-icon {
    color: red;
    display: none;
}

.row-locked .row-locked-icon {
    display: inline-block;
}

.row-locked .rowCheckBox .custom-checkbox {
    display: none;
}

#__rinInViewInspectorRootGenerated__ {
    display: none;
}


/* HTML: <div class="loader"></div> */
.custom-loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #25b09b;
    animation: l15 1s infinite linear;
}

.custom-loader::before,
.custom-loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
}

.custom-loader::after {
    margin: 8px;
    animation-duration: 3s;
}

@keyframes l15 {
    100% {
        transform: rotate(1turn)
    }
}

.bootbox-modal.camera-bootbox .modal-dialog {
    width: 100%;
    height: 100%;
}

.bootbox-modal.camera-bootbox {
    display: flex !important;
    align-items: center;
    /* Vertically center the modal */
    justify-content: center;
    margin: 0 !important;
}

@media screen and (min-width: 1000px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 90%;
        height: 90%;
    }
}

@media screen and (min-width: 1200px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 80%;
        height: 80%;
    }
}

@media screen and (min-width: 1400px) {
    .bootbox-modal.camera-bootbox .modal-dialog {
        width: 70%;
        height: 70%;
    }
}

.bootbox-modal.camera-bootbox .modal-content {
    height: 100%;
    max-height: unset;
}

.bootbox-modal.camera-bootbox .modal-body {
    height: calc(100% - 10rem);
    max-height: unset;
}

.bootbox-modal.camera-bootbox .bootbox-body {
    height: 100%
}


.popover-success {
    background-color: #18BC9C !important;
    border-color: #107c67 !important;
}

.popover-warning {
    background-color: #FFC107 !important;
    border-color: #c29203 !important;
}

.popover-danger {
    background-color: #E74C3C !important;
    border-color: #8a2d23 !important;
}


.input-with-icon-thumbnail {
    display: flex;
    align-items: center;
    position: relative;
}


.input-with-icon-thumbnail input {
    flex-grow: 1;
    /* Ensure there's enough padding on the right so text doesn't overlay the icon */
    padding-right: 40px;
    /* Adjust based on the size of your icon */
}

.input-with-icon-thumbnail .camera-icon {
    position: absolute;
    right: 10px;
    /* Adjust according to the padding of the input */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}


/* Hightlighting freshly filled inputs for a bit */

@keyframes success-to-transparent {
    0% {
        background-color: var(--success);
    }

    100% {
        background-color: transparent;
    }
}

@keyframes light-success-to-transparent {
    0% {
        background-color: #18BC9C3F;
    }

    100% {
        background-color: transparent;
    }
}

input.link-autocomplete.changed {
    animation: success-to-transparent 1.3s ease-in forwards;
}

input:not(.link-autocomplete).changed {
    animation: light-success-to-transparent 1.3s ease-in forwards;
}


.link-edit,
.link-add {
    padding-left: 10px;
    padding-right: 10px;
}


/* AG-Grid Live View row freshness  */

.ag-cell.fresh-within-day {
    background-color: #40B07009;
    transition: background-color 100ms ease-in-out;
}

.ag-cell.fresh-within-hour {
    background-color: #40B0701D;
}

.ag-cell.fresh-within-minute {
    background-color: #40B07040;
}

.ag-cell.fresh-within-seconds {
    background-color: #40B07080;
}

/* Rfid tags table */

.rfid-tags-table {
    font-family: Arial, sans-serif;
    /* Improve font styling */
    margin-top: 20px;
    /* To replace the mt-3 class */
}

#rfidTagsTable {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 3px #ccc;
    /* Adds a subtle shadow for depth */
    text-align: left;
    /* Aligns text to the left for a cleaner look */
}

#rfidTagsTable thead tr {
    background-color: #f2f2f2;
    /* A subtle color for the header */
    color: #333;
    /* Dark color for contrast */
}

#rfidTagsTable tbody tr:hover {
    background-color: #f5f5f5;
    /* Highlight rows on hover for interactivity */
}

#rfidTagsTable th,
#rfidTagsTable td {
    padding: 10px;
    /* Adds space around content within cells */
    border-bottom: 1px solid #ddd;
    /* Adds a separator for clarity */
}

#rfidTagsTable tbody tr:last-child {
    background-color: #b8e0f9;
    /* Highlight color for the last row */
}

.power-button {
    margin-right: 0.5rem;
}

@media (max-width: 1199.98px) {
    .power-button {
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .custom-ml-auto {
        margin-left: auto;
    }

    .custom-d-flex {
        display: flex;
    }

    .custom-order-md-1 {
        order: 1;
    }

    .custom-align-items-centers {
        align-items: center;
    }
}

.badge.ag-grid-selected-row-count {
    padding: 0.25em 0.5em;
}


.highlit {
    font-weight: bold !important;
    color: deeppink !important;
}



/* Sidebar */






/* Edit page header */

.form-header {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    min-height: 69px;
    background: var(--sheet-bg);
    transition: box-shadow 166.6ms;
    display: flex;
}

/* Document-edit header is a single-row, 3-column grid: title (left) | custom
   buttons (center, centered) | actions (right). The header stays one row tall in
   every state. When the buttons don't fit in the middle track, JS adds
   .has-button-overflow, which collapses them into a single "Actions ▾" dropdown
   (see .header-actions-* below). The fit test lives in JS (sizeFormHeaderButtons)
   because CSS alone can't detect content overflow. */
.document-edit-form-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "left center right";
    align-items: center;
    column-gap: 8px;
}

body:not(.has-sidebar) .form-header {
    top: calc(var(--navbar-height) - 1px);
}

.form-header .h4 {
    padding: 4px 0;
}

.form-header .h5 {
    padding: 7px 0;
}

.form-header .h5 .mobile {
    font-size: 1.125rem;
}

body:not(.has-sidebar):not(.body-mvcgrid) .form-header+.container {
    margin-top: calc(var(--form-header-height, 73px) - 30px);
}

.form-header+.container {
    margin-top: var(--form-header-height, 73px);
}

/* Document Edit view: grid zones (left/center/right). The grid tracks handle edge
   alignment, so no auto margins on the containers. */
.document-edit-form-header>.container.form-header-left {
    grid-area: left;
    margin-left: 0;
    margin-right: 0;
}

.document-edit-form-header>.container.form-header-right {
    grid-area: right;
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-end;
    padding-right: 30px;
}

.document-edit-form-header>.form-header-left,
.document-edit-form-header>.form-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.document-edit-form-header>.form-header-right {
    flex-wrap: wrap;
}

/* Center zone (a .dropdown). It holds a hidden "Actions ▾" toggle plus the
   .header-actions-menu container. While the buttons fit (default), .header-actions-menu
   is shown as a static, centered inline flex row and the toggle stays hidden. When
   JS flags .has-button-overflow, the buttons collapse into a real Bootstrap dropdown
   menu and the toggle becomes the only visible thing in the track. */
.document-edit-form-header>.form-header-center {
    grid-area: center;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: hidden;
    /* Size container so the inline-row vs "Actions ▾" decision can be made by a container
       query at FIRST LAYOUT (before any JS), keyed on the centre track's own width — not the
       viewport. This kills the pop-in: the correct state is painted immediately. JS
       (sizeFormHeaderButtons) then refines the content-accurate edge case (a long title that
       shrinks the track below what the buttons need) by adding .has-button-overflow. */
    container: header-center / inline-size;
}

body:not(.has-sidebar) .document-edit-form-header>.form-header-center {
    padding-top: 21px;
    padding-bottom: 8px;
}

/* ── First-paint baseline (before JS measures: header has no .js-fit-measured) ──
   Default to the collapsed dropdown, and reveal the inline row only when the track is wide
   enough to plausibly hold the buttons. This is a width threshold (CSS can't measure the
   buttons' own content width), so it's the common-case default; JS corrects the rest. Once
   JS has measured, .js-fit-measured disables this block and the .has-button-overflow rules
   below become authoritative. */
.document-edit-form-header:not(.js-fit-measured)>.form-header-center>.header-actions-toggle {
    display: inline-flex;
    align-items: center;
}
.document-edit-form-header:not(.js-fit-measured)>.form-header-center>.header-actions-menu {
    display: none;
}
@container header-center (min-width: 520px) {
    .document-edit-form-header:not(.js-fit-measured)>.form-header-center>.header-actions-toggle {
        display: none;
    }
    /* Reveal the buttons as a static inline row, neutralising Bootstrap's .dropdown-menu
       defaults (absolute/float/card chrome). No !important needed: pre-JS, Popper has never
       run, so there are no inline position styles to beat. */
    .document-edit-form-header:not(.js-fit-measured)>.form-header-center>.header-actions-menu {
        display: flex;
        position: static;
        float: none;
        inset: auto;
        transform: none;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
    }
}

/* Fit state (JS-managed): render the buttons as a static centered inline row, overriding the
   Bootstrap .dropdown-menu defaults (absolute, hidden, bordered card). The layout
   props are !important because Bootstrap's Popper writes INLINE position/transform/
   top/left when the dropdown has ever been opened; without !important those inline
   styles win and strand the buttons at 0,0 when we're back in the inline state.
   Scoped to .js-fit-measured:not(.has-button-overflow): only once JS owns the state (Popper
   can only have run by then). Before that, the container-query baseline above owns display. */
.document-edit-form-header.js-fit-measured:not(.has-button-overflow)>.form-header-center>.header-actions-menu {
    display: flex !important;
    position: static !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}

.document-edit-form-header>.form-header-center>.header-actions-toggle {
    display: none;
}

.document-edit-form-header>.form-header-center .custom-action-button-documents {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Overflow state: the toggle is the visible control; the buttons revert to a real
   dropdown menu (Bootstrap toggles its display via the .show class on click). */
.document-edit-form-header.has-button-overflow>.form-header-center {
    flex-wrap: nowrap;
    justify-content: center;
    overflow: visible;
}

.document-edit-form-header.has-button-overflow>.form-header-center>.header-actions-toggle {
    display: inline-flex;
    align-items: center;
}

.document-edit-form-header.has-button-overflow>.form-header-center>.header-actions-menu {
    display: none;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    min-width: auto;
    width: max-content;
    max-width: 320px;
    margin: 0.25rem 0 0;
    padding: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: var(--sheet-bg, #fff);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    gap: 6px;
}

/* Bootstrap adds .show when the dropdown is open. */
.document-edit-form-header.has-button-overflow>.form-header-center>.header-actions-menu.show {
    display: flex;
}

/* In the menu, each button sizes to its own content (left-aligned, not stretched). */
.document-edit-form-header.has-button-overflow>.form-header-center>.header-actions-menu>.custom-action-button-documents {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    justify-content: flex-start;
}

body:not(.has-sidebar) .document-edit-form-header>.form-header-left,
body:not(.has-sidebar) .document-edit-form-header>.form-header-right {
    padding-top: 21px;
    padding-bottom: 8px;
}

.form-header> :first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    /*The following line caused major malfunctions: */
    /*padding-top: 18px;*/
    flex: 1;
}

/* Left (title) and right (actions) sit in their grid tracks at natural width. */
.document-edit-form-header>.form-header-left {
    width: auto;
}

.document-edit-form-header>.form-header-right {
    width: auto;
}

body:not(.has-sidebar) .form-header> :first-child {
    padding-top: 21px;
}

.form-header> :first-child>.h4,
.form-header> :first-child>.h5 {
    margin-bottom: 1px;
}

.form-header .sidebar-open-button {
    margin-right: 6px;
}

.form-header .btn {
    min-width: 37px;
    padding-left: 9px;
    padding-right: 9px;
    text-wrap: nowrap;
}

.form-header .close-btn {
    margin-right: -16px;
    font-size: 22px;
    color: gray;
}

body.scrolled-away-top .form-header {
    box-shadow: 0 7px 7px -2px rgba(0, 0, 0, 9%);
}

.modal.scrolled-away-top .form-header {
    border-bottom: 1px solid rgba(0, 0, 0, 15%);
}

@media (max-width: 575.98px) {
    .form-header> :first-child {
        gap: 5px;
    }

    .form-header~#main-container #saveButton {
        display: none;
    }
}

@media (max-width: 419.98px) {
    .modal-body {
        padding-left: 5px;
        padding-right: 5px;
    }
}

body:not(.has-sidebar) .form-header~table.sheet>thead>tr>th {
    top: calc(var(--navbar-height) + var(--form-header-height, 73px)) !important;
}

body.has-sidebar .form-header~table.sheet>thead>tr>th {
    top: var(--form-header-height, 73px) !important;
}

.modal-body .form-header {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 16px;
    box-shadow: none !important;
}

.modal-body .form-header+.container {
    margin-top: 0.5em;
}

.form-header> :first-child {
    padding-left: 15px;
    padding-right: 15px;
}

.modal-body form .form-header> :first-child {
    padding: 10px 15px;
}

.modal-body .form-header>hr {
    margin-top: -3px !important;
    margin-bottom: 0 !important;
}

.edit-modal .modal-body {
    padding: 0 4px 18px 4px;
}

/* Document edit: make container use full width */
#main-container.container {
    max-width: 100% !important;
}

/* Document edit: make sheet-container (rows table) use full width */
.sheet-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.disabled-field {
    pointer-events: none;
    opacity: 0.6;
}

#liveToast {
    box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 0.6em;
}

#liveToastBody {
    padding: 0.75em 1.6em 0.75em 1.5em;
    line-height: 1.666rem;
}

#liveToastBody a {
    font-style: italic;
    text-decoration-line: whitesmoke;
    color: whitesmoke;
}

.self-service-name {
    text-transform: uppercase;
    color: white;
    font-size: 10em;
    text-align: center;
    font-weight: bold;
    padding-top: 0.5em;
}

.self-service-slogan {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    font-size: 6em;
    text-align: center;
}

.self-service-logo {
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    text-align: left;
    padding: 0;
    font-size: 1.5em;
    line-height: 1.1em;
}

.self-service-pcsc-card-action {
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(99, 193, 57);
    font-size: 3em;
    text-align: center;
}

.self-service-pcsc-card-action-error {
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(255, 77, 53);
    font-size: 3em;
    text-align: center;
}

.btn-xxl2 {
    font-size: 1.8em;
}

.btn-warning-dark {
    color: #fff;
    background-color: #FF8400;
    border-color: #F39C12;
}

.btn-rounded {
    border-radius: 0.8em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.inventory-pack-options {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.inventory-pack-options .option {
    padding: 10px;
    text-align: center;
    background-color: #f1f1f1;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-bottom: 10px;
}

.inventory-pack-options .option:hover {
    background-color: #e0e0e0;
}

.inventory-pack-options .option.selected {
    background-color: #007bff;
    color: #fff;
}


/*
 * We would just use 'd-none' instead of these, but there are
 * cases (ex. `d-none d-lg-inline-block`) where just toggling
 * 'd-none' on an element doesn't work the way we want it to.
 */
.hidden,
.hidden2 {
    display: none !important;
}


:not(:hover)>.show-on-parent-hover,
:hover>.hide-on-parent-hover {
    display: none;
}




/*#region MVCGrid mobile view (rows as cards) */

@media (max-width: 767.98px) {
    .mvc-filter .form-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .mvc-filter .form-group {
        margin-bottom: 12px;
        margin-right: 20px !important;
    }

    .mvc-filter .btn {
        margin-top: 14px;
    }

    .mvc-filter .form-control {
        font-size: 16px;
    }

    .MVCGridContainer .row>.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .MVCGridContainer table>thead,
    .MVCGridContainer table>tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }

    .MVCGridContainer table>thead>tr,
    .MVCGridContainer table>tbody>tr {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0.5em 0.75em 0.75em;
        border-radius: 9px;
        border: 1px solid #00000020 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 5%);
        background-color: var(--sheet-bg);
    }

    .MVCGridContainer table>thead>tr>th,
    .MVCGridContainer table>tbody>tr>td {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding: 8px 10px !important;
        text-align: left !important;
        background: none !important;
        border: none;
    }

    .MVCGridContainer table>tbody>tr>td.actions {
        padding-left: 7px !important;
    }

    .MVCGridContainer table>thead>tr>th:empty,
    .MVCGridContainer table>tbody>tr>td:empty {
        display: none;
    }
}

/*#endregion*/


/* AG-Grid - Bigger selection checkbox clickable area */

.ag-selection-checkbox .ag-input-field-input.ag-checkbox-input {
    position: absolute;
    left: calc(var(--ag-internal-calculated-line-height) * -0.3);
    top: calc(var(--ag-internal-calculated-line-height) * -0.3);
    width: var(--ag-internal-calculated-line-height);
    height: var(--ag-internal-calculated-line-height);
}


/* AG-Grid - Row actions cell */

.ag-row {
    z-index: 0;
}

.ag-row-focus {
    z-index: 1;
}

.ag-cell {
    z-index: 0;
}

.ag-cell>span {
    pointer-events: none;
}

.ag-cell>span>a {
    pointer-events: all;
}

.ag-pinned-left-cols-container {
    z-index: 2;
}

.ag-pinned-left-cols-container .ag-row-focus .ag-cell-value {
    overflow: visible;
}

.actions-cell-container {
    display: flex;
    align-items: center;
}

.ag-grid-btn.btn {
    display: flex;
    align-items: center;
    height: var(--ag-internal-calculated-line-height);
    padding-left: 3px;
    padding-right: 3px;
    padding-top: unset;
    padding-bottom: unset;
    color: var(--success);
    opacity: 0.875;
}

.ag-grid-btn.btn:hover {
    opacity: 1;
}

a.ag-grid-btn.btn>i {
    margin-bottom: 0.1em;
}

.ag-grid-btn-dropdown>.ag-grid-btn.btn {
    height: calc(var(--ag-internal-calculated-line-height) - 10px);
    vertical-align: baseline;
}

.ag-cell-value .dropdown-item {
    line-height: 1.5rem;
}

/* Row-action pinning: a "..." menu item paired with its trailing pin toggle. */
.row-action-menu-item {
    display: flex;
    align-items: center;
}

.row-action-menu-item > :first-child {
    flex: 1 1 auto;
}

.row-action-pin-toggle {
    flex: 0 0 auto;
    padding: 0 0.5rem;
    color: var(--secondary, #95a5a6);
    opacity: 0.35;
    background: none;
    border: none;
}

.row-action-menu-item:hover .row-action-pin-toggle {
    opacity: 0.7;
}

.row-action-pin-toggle.pinned {
    opacity: 1;
    color: var(--info, #3498db);
}

.row-action-pin-toggle:hover {
    opacity: 1;
}

/* Toolbar pinned quick-action buttons: a btn-group to the left of the Row Actions dropdown.
   Styling comes from .btn-group + .btn-outline-info; only collapse it when it has no buttons. */
.ag-grid-pinned-actions .btn {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.ag-grid-pinned-actions:empty {
    display: none;
}

/* AG-Grid validation failed cells - red border for "don't allow save if" violations */
.ag-cell.validation-failed {
    box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8);
    animation: validation-pulse-red 0.4s ease-in-out;
}

@keyframes validation-pulse-red {
    0% {
        box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8);
    }

    50% {
        box-shadow: inset 0 0 0 3px rgba(220, 53, 69, 1);
    }

    100% {
        box-shadow: inset 0 0 0 2px rgba(220, 53, 69, 0.8);
    }
}

/* AG-Grid non-editable cell styling */
.ag-cell.readonly-cell,
.ag-cell.calculated-cell,
.local-ag-grid .ag-cell.readonly-cell,
.local-ag-grid .ag-cell.calculated-cell {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #555;
}

.ag-cell.calculated-cell,
.local-ag-grid .ag-cell.calculated-cell {
    font-style: italic;
}

/* AG-Grid editable cell styling - subtle indicator */
.ag-cell.editable-cell,
.local-ag-grid .ag-cell.editable-cell {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

.ag-cell.editable-cell:hover,
.local-ag-grid .ag-cell.editable-cell:hover {
    background-color: rgba(0, 123, 255, 0.06) !important;
}

.bg-custom {
    background-color: var(--toastBackgroundColor);
}

.toast-content {
    text-align: center;
}

.toast-message {
    font-style: italic;
    color: #333;
}

.asset-link {
    color: blue;
    text-decoration: underline;
}

.asset-link:hover {
    color: darkblue;
}



.metadata-container {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    opacity: 0.666;
}

.colored-ag-cell-content-container {
    padding: 2px 6px;
    border-radius: 8px;
    color: var(--readable-text, white);
    pointer-events: none;
}

.colored-ag-cell-content-container:empty {
    padding-right: 17px;
    border-radius: 99px;
}

.ag-cell-entity-link {
    cursor: pointer;
    text-decoration: none;
}

.ag-cell-entity-link:hover {
    text-decoration: underline !important;
}

.colored-ag-cell-content-container>.ag-cell-entity-link {
    color: var(--readable-text, white);
    pointer-events: auto;
}

.ag-cell-identity-link {
    cursor: pointer;
}

.ag-cell-identity-link:hover {
    text-decoration: underline !important;
}


.link-option-inner {
    color: var(--readable-text, white);
    border-radius: 6px;
    padding: 2px 6px;
}

/* Colored link inputs - when entity has a color assigned */
input.link-autocomplete[data-color] {
    border-radius: 4px;
}

input.link-autocomplete[data-color]::placeholder {
    color: color-mix(in srgb, var(--readable-text, white) 70%, transparent);
}

input.link-autocomplete[data-color]:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

/* Slick field colored link inputs */
.slick-input.link-autocomplete[data-color]:not(.link-empty) {
    height: calc(var(--slick-field-height) - 6px);
    margin-left: -2px;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 6px;
    border-radius: 6px;
    background-color: transparent !important;
    color: inherit !important;
    /* Hug the text on the FIRST paint, with no JS measurement and no width snap. Overrides
       the base .slick-input flex:1 stretch so the coloured pill is only as wide as its value. */
    field-sizing: content;
    flex: 0 0 auto;
    max-width: 100%;
}

.slick-input.link-autocomplete[data-color].width-init:not(.link-empty) {
    /* max-width transition only ever fires on the JS-fallback width path (Firefox/Safari),
       fading the measured-width settle; on Chromium width comes from field-sizing (max-width
       is fixed at 100%) so it's a no-op there. */
    transition: background-color 0.15s ease-out, color 0.15s ease-out, max-width 0.15s ease-out;
}

/* While focused, expand to the full field width for comfortable searching/typing — turn off
   content-sizing and let the base flex:1 take over. On blur it hugs the value text again. */
.slick-input.link-autocomplete[data-color]:not(.link-empty):focus {
    field-sizing: auto;
    flex: 1;
    max-width: none;
}

.slick-input.link-autocomplete.color-ready:not(.link-empty) {
    background-color: var(--link-color) !important;
    color: var(--readable-text, white) !important;
}

/* Cleared link field: the placeholder echoes the just-removed value's display text, so keep
   it very subtle — a faint hint, not something that reads like a live value. */
.slick-input.link-autocomplete.link-empty::placeholder {
    color: color-mix(in srgb, currentColor 1%, transparent);
}

/* Readonly colored link inputs - same pattern as editable: coloured on first paint,
   transition armed (via .width-init) only afterwards so later changes animate. */
.slick-input[data-color][readonly] {
    flex: 0 0 auto;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 8px;
    background-color: transparent !important;
    color: inherit !important;
    /* Hug the text on first paint with no JS measurement. */
    field-sizing: content;
    max-width: 100%;
}

.slick-input[data-color][readonly].width-init {
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.slick-input[data-color][readonly].color-ready {
    background-color: var(--link-color) !important;
    color: var(--readable-text, white) !important;
}

#_popout>.ag-dialog {
    position: relative;
}

.btn.data-refresh {
    padding-left: 0.725em;
    padding-right: 0.725em;
}

/*.ag-theme-quartz .ag-side-buttons {
    width: calc(var(--ag-icon-size) + var(--ag-grid-size) * 2.5);
}*/

body.has-sidebar .mvc-title {
    margin-top: 24px;
}

#topAnnouncementToast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    display: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#topAnnouncementToast.show {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#topAnnouncementText {
    flex-grow: 1;
    text-align: center;
    margin-right: 20px;
}

#topAnnouncementToast .btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    cursor: pointer;
}

#topAnnouncementToast .btn-close:hover {
    opacity: 1;
}



.form-header.with-announcement {
    top: var(--announcement-height, 0);
}

.initials-badge-wrapper {
    text-decoration: none !important;
}

.initials-badge {
    color: white;
    border-radius: 99px;
    min-width: 3ch;
    font-size: 11px;
    font-stretch: condensed;
    text-align: center;
    vertical-align: center;
    user-select: none;
}

.nav-link {
    padding-left: 1em;
    padding-right: 1em;
    user-select: none;
    -webkit-user-select: none;
}

.meta-item-checkbox:checked,
.text-field-checkbox:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
}



@media (max-width: 575.98px)
/* Mobile */
    {
    .desktop {
        display: none !important;
    }

    body.login>.body-content {
        padding-left: 25px;
        padding-right: 25px;
    }

    body.has-sidebar.sidebar-closed-mobile .sidebar-open-button+.currentTitle,
    .btn:not(.sidebar-open-button):not(.hidden)+.currentTitle,
    .dropdown:not(.hidden)~.currentTitle {
        margin-left: 5px;
    }

    .dropdown-menu {
        font-size: 16px;
    }

    .dropdown-item {
        padding: 5px 24px;
    }

    .edit-modal .modal-dialog {
        margin: 1px;
    }

    .edit-modal .modal-body {
        padding: 0 0 20px 0;
    }

    .form-header+.container {
        padding-left: 0;
        padding-right: 0;
    }

    /* No horizontal padding in modern form edit popups */

    .edit-modal .modal-body .tab-pane>.row>.col-12 {
        padding: 0 6px 0 7px;
    }

    .edit-modal .modal-body .slick-horizontal {
        padding: 0 7px 0 8px;
    }

    .edit-modal .modal-body .tab-pane .slick-horizontal,
    .edit-modal .modal-body .container-fluid {
        padding: 0;
    }
}

@media (min-width: 576px)
/* Desktop */
    {
    .mobile {
        display: none !important;
    }

    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button+.row-adding-control,
    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button+.d-inline-flex,
    body.has-sidebar.sidebar-closed-desktop .sidebar-open-button~.currentTitle,
    .btn:not(.sidebar-open-button):not(.hidden)~.currentTitle,
    .dropdown:not(.hidden)~.currentTitle {
        margin-left: 7px;
    }

    form .form-header> :first-child {
        padding-left: 30px;
        padding-right: 12px;
    }
}


img[src="null"] {
    display: none;
}

.microphone-icon {
    font-size: 23px;
    margin-left: -20px !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    z-index: 3;
    transition: color 0.3s ease;
}

.microphone-icon.recording {
    color: red;
}

.microphone-icon:hover::after {
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 4;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.ai-icon {
    font-size: 23px;
    margin-left: 8px !important;
    margin-right: 8px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    z-index: 3;
    transition: color 0.3s ease;
}

.ai-icon:hover:not([data-toggle="tooltip"])::after {
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 4;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.recording-indicator {
    position: fixed;
    background-color: #4A4A4A;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 20px;
    /* Always position from the top */
    right: 20px;
    /* Always position from the right */
}

.recording-indicator .dot {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Adjust font size for smaller screens */
@media screen and (max-width: 768px) {
    .recording-indicator {
        font-size: 12px;
        padding: 8px 16px;
    }

    .recording-indicator .dot {
        width: 16px;
        height: 16px;
    }
}

.report-name {
    color: #3498DB !important;
}

.icon-item {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-item:hover {
    background-color: #f8f9fa;
}

#iconPreview {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: none;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

/**** Virtual Keyboard **************/

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-size: 1.7em !important;
}

.ui-keyboard-preview-wrapper textarea {
    min-height: 150px !important;
    font-size: 1.2em !important;
}

.ui-keyboard {
    border-radius: 0;
    left: 0;
    top: auto !important;
    bottom: 0;
    position: fixed;
    width: 100%;
    height: auto;
}

.form-announcement {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: lightyellow;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* This will only apply when form-announcement exists */
.form-announcement~.modal .modal-dialog {
    margin-top: 55px !important;
}

.geolocation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.get-location-btn {
    min-width: 200px;
    transition: all 0.3s ease;
}

.get-location-btn i {
    margin-right: 0.5rem;
}

.get-location-btn:disabled {
    cursor: wait;
}

.dropdown-menu.changeFilter,
.dropdown-menu.design-templates {
    z-index: 1050 !important;
}

.dropdown-menu-right {
    z-index: 5555 !important;
}

.changeFilter>.dropdown-item,
.design-templates>.dropdown-item,
#viewDropdownItems>.dropdown-item {
    position: relative;
    padding-right: 3em;
}

.changeFilter>.dropdown-item>.btn,
.design-templates>.dropdown-item>.btn,
#viewDropdownItems>.dropdown-item>.btn {
    position: absolute;
    top: 1px;
    right: 12px;
    color: inherit;
}

.dropdown-item>.fa-fw,
.dropdown-item>span {
    pointer-events: none;
    user-select: none;
}

#toastContainer {
    position: fixed;
    bottom: 1rem;
    /* Consistent spacing from bottom */
    right: 2rem;
    /* Consistent spacing from right */
    z-index: 1337;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    pointer-events: none;
    font-size: .2rem !important;
}

#toastContainer .toast {
    pointer-events: auto;
    width: fit-content;
    max-width: 500px;
    opacity: 1;
    box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 0.6em;
    /* Added for rounded corners */
}

#toastContainer .toast-body {
    padding: 0.5em .8em 0.5em .8em;
    line-height: 1.666rem;
}

#toastContainer .toast.bg-info,
#toastContainer .toast.bg-success,
#toastContainer .toast.bg-warning,
#toastContainer .toast.bg-danger {
    color: white;
}

#toastContainer .toast .toast-header {
    background-color: rgba(255, 255, 255, 0.85);
    color: #212529;
    border-top-left-radius: 0.6em;
    /* Match the main border radius */
    border-top-right-radius: 0.6em;
    /* Match the main border radius */
    display: none;
    /* Hide the header by default */
}

/* Only show header if title or closable */
#toastContainer .toast .toast-header:not(.d-none) {
    display: flex;
}

#toastContainer .toast-body a {
    font-style: italic;
    text-decoration-line: whitesmoke;
    color: whitesmoke;
}

#toastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Upload Panel (Google Drive style) */
.upload-panel {
    position: fixed;
    bottom: 0;
    right: 1rem;
    width: 350px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 1340;
    font-size: 14px;
    display: none;
    overflow: hidden;
    font-family: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.upload-panel.show {
    display: block;
}
.upload-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #323232;
    color: #fff;
    cursor: pointer;
    user-select: none;
    min-height: 48px;
    box-sizing: border-box;
}
.upload-panel-title {
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}
.upload-panel-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}
.upload-panel-toggle,
.upload-panel-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    opacity: 0.7;
    line-height: 1;
    border-radius: 50%;
    transition: opacity 0.15s, background 0.15s;
}
.upload-panel-toggle:hover,
.upload-panel-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}
.upload-panel-body {
    max-height: 240px;
    overflow-y: auto;
    padding: 0;
    display: none;
    border-top: 1px solid #e0e0e0;
}
.upload-file-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    min-height: 44px;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f3f4;
}
.upload-file-row:last-child {
    border-bottom: none;
}
.upload-file-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 16px;
}
.upload-file-done {
    color: #1a73e8;
}
.upload-file-error {
    color: #d93025;
}
.upload-file-progress {
    color: #5f6368;
    font-size: 14px;
}
.upload-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #202124;
    font-size: 13px;
    font-weight: 400;
}
.upload-file-bar {
    height: 4px;
    background: #e8eaed;
    margin: 0 16px 0 48px;
    border-radius: 2px;
    overflow: hidden;
}
.upload-file-bar-fill {
    height: 100%;
    background: #1a73e8;
    transition: width 0.2s ease;
    border-radius: 2px;
}

@media (max-width: 575.98px) {
    .upload-panel {
        right: 0;
        left: 0;
        width: auto;
        bottom: 0;
        border-radius: 8px 8px 0 0;
    }
}

/* Mobile styles for toast */
@media (max-width: 575.98px) {
    #toastContainer .toast {
        /* min-width: 67px; Removed to allow fit-content to shrink fully */
        max-width: 167px;
        /* About 2/3 of previous 250px */
        font-size: 0.8rem;
        /* Slightly smaller font size */
    }

    #toastContainer .toast-body {
        padding: 0.4em 0.8em;
        /* Reduced padding */
        font-size: 1.2rem !important;
        /* Added to make text smaller on mobile */
    }

    /* Half size corner toasts on mobile - Removing this rule as it is likely misapplied or causing unpredictable scaling */
    /*
    #toastContainer .corner-toast {
        max-width: 250px; 
        transform: scale(0.5);
        transform-origin: bottom right;
    }
    */
}

.import-id-column-radio-input {
    margin-right: 3px;
    vertical-align: 5%;
}

/* Styles for locked date inputs when using continuous reports */
input.date-locked {
    background-color: #f8f9fa;
    cursor: not-allowed;
    border-color: #ced4da;
    color: #6c757d;
}

input.date-locked:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.period-number-container {
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.period-number-container label {
    font-weight: 500;
    margin-right: 8px;
}

.period-number-container input {
    width: 60px;
    text-align: center;
}

/* Tooltip for locked date inputs */
.date-locked-tooltip {
    position: relative;
}

.date-locked-tooltip::after {
    content: "Date range is determined by the selected option";
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    width: 220px;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.date-locked-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.period-number-container {
    display: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.period-number-container label {
    font-weight: 600;
    margin-right: 10px;
    margin-bottom: 0;
}

.period-number-container input {
    width: 60px;
    text-align: center;
}

/* Style for locked inputs */
.period-selector input[readonly],
.period-selector input[disabled],
select[disabled] {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.8;
    border-color: #dee2e6;
}

/* Add a small lock icon to indicate locked inputs */
.period-selector input[readonly]::after,
.period-selector input[disabled]::after {
    content: "🔒";
    position: absolute;
    right: 10px;
    color: #6c757d;
}

tr.exceeds-stock {
    background-color: #f8d7da !important;
    /* light red */
}

#toastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Top toast container styles */
#topToastContainer {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1338;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    width: 100%;
    max-width: 800px;
    /* Wider than corner toast */
}

#topToastContainer .toast {
    pointer-events: auto;
    min-width: 300px;
    /* Wider minimum width */
    width: 100%;
    opacity: 1;
    margin-bottom: 0.5rem;
    box-shadow: 3px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 0.6em;
}

#topToastContainer .toast-body {
    padding: 0.75em 1.6em 0.75em 1.5em;
    line-height: 1.8rem;
    /* Slightly larger line height */
    font-size: 1.2rem;
    /* Larger font size */
}

#topToastContainer .toast.bg-info,
#topToastContainer .toast.bg-success,
#topToastContainer .toast.bg-warning,
#topToastContainer .toast.bg-danger {
    color: white;
}

#topToastContainer .toast .toast-header {
    background-color: rgba(255, 255, 255, 0.85);
    color: #212529;
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
    display: none;
}

#topToastContainer .toast .toast-header:not(.d-none) {
    display: flex;
}

#topToastContainer .toast-body a {
    font-style: italic;
    text-decoration-line: whitesmoke;
    color: whitesmoke;
}

#topToastContainer .toast:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Mobile styles for top toast */
@media (max-width: 575.98px) {
    #topToastContainer {
        max-width: 90%;
        margin-top: 8rem !important;
        /* Move top-center toast down for mobile */
    }

    #topToastContainer .toast {
        min-width: 200px;
        font-size: 0.9rem;
    }

    #topToastContainer .toast-body {
        padding: 0.5em 1em;
        line-height: 1.5rem;
    }
}

/* Mobile styles for toast */
@media (max-width: 575.98px) {
    #toastContainer {
        bottom: 0.5rem;
        right: 0.5rem;
    }
}

.changeFilter>.dropdown-item>.fa-fw,
.design-templates>.dropdown-item>.fa-fw,
.dropdown-item>span {
    pointer-events: none;
    user-select: none;
}

/* Floating Action Generator Styles */
.floating-action-generator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 1060;
    transition: all 0.3s ease;
    min-height: 110px;
}

/* Adjust positioning when sidebar is open */
body.has-sidebar:not(.sidebar-closed-desktop) .floating-action-generator {
    left: calc(50% + var(--sidebar-width, 250px) / 2);
    width: calc(70vw - var(--sidebar-width, 250px));
}

/* Ensure proper centering when sidebar is closed */
body.has-sidebar.sidebar-closed-desktop .floating-action-generator {
    left: 50%;
    width: 70vw;
}

.floating-action-generator:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.floating-action-generator .d-flex {
    height: 100%;
}

.floating-action-generator #aiScriptPrompt {
    height: 100%;
    min-height: 90px;
    resize: vertical;
}

.floating-action-generator .bootstrap-select {
    width: 100% !important;
    margin-bottom: 10px;
}

.floating-action-generator .bootstrap-select .dropdown-menu {
    max-height: 300px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .floating-action-generator {
        width: 90vw;
        bottom: 10px;
        left: 50% !important;
    }

    /* Override sidebar positioning on mobile */
    body.has-sidebar .floating-action-generator {
        left: 50% !important;
        width: 90vw !important;
    }
}

/* Simple Action Generator (Alt+G) */
.simple-action-generator .simple-model-label {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 72px;
    text-align: right;
    flex-shrink: 0;
}
.simple-action-generator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 48px);
    max-width: 1400px;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 28px;
    padding: 8px 14px 8px 8px;
    z-index: 1060;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* Alt+G chat history (above input bar) */
.simple-action-generator .simple-chat-history {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 12px 4px 12px;
    margin: 0 0 6px 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

.simple-action-generator .simple-chat-history.empty {
    display: none;
}

.simple-action-generator .simple-chat-message {
    display: flex;
}

.simple-action-generator .simple-chat-message.user {
    justify-content: flex-end;
}

.simple-action-generator .simple-chat-message.assistant {
    justify-content: flex-start;
}

.simple-action-generator .simple-chat-bubble {
    padding: 6px 12px;
    max-width: 80%;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 12px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.simple-action-generator .simple-chat-message.user .simple-chat-bubble {
    background: rgb(170, 120, 255);
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.simple-action-generator .simple-chat-message.assistant .simple-chat-bubble {
    background: #f1f3f5;
    color: #212529;
    border-radius: 12px 12px 12px 2px;
}

.simple-action-generator .simple-chat-bubble.script-result {
    border: 1px solid #d1d5db;
    background: #ffffff;
}

.simple-action-generator .simple-chat-bubble .script-result-title {
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
}

.simple-action-generator .simple-chat-bubble .script-result-title.error {
    color: #dc2626;
}

.simple-action-generator .simple-chat-bubble .script-result-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

.simple-action-generator .simple-chat-bubble details {
    margin-top: 4px;
    font-size: 11px;
}

.simple-action-generator .simple-chat-bubble details > summary {
    cursor: pointer;
    color: #6b7280;
    user-select: none;
}

.simple-action-generator .simple-chat-bubble details pre {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 4px 0 0 0;
    max-height: 180px;
    overflow: auto;
    font-size: 11px;
    color: #111827;
    white-space: pre-wrap;
}

/* Chat-mode visual treatment (blue accent vs purple/orange in normal mode) */
.simple-action-generator.chat-mode .simple-chat-mode {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: rgb(59, 130, 246) !important;
}

.simple-action-generator.chat-mode .simple-icon-left {
    color: rgb(59, 130, 246);
}

.simple-action-generator.chat-mode .simple-send-btn {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: rgb(59, 130, 246) !important;
}

.simple-action-generator.chat-mode .simple-send-btn:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

/* Edit mode styling - orange/amber accent to indicate editing existing script */
.simple-action-generator.edit-mode {
    border-color: #f59e0b;
    box-shadow: 0 4px 24px rgba(245, 158, 11, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.simple-action-generator.edit-mode .simple-icon-left {
    color: #f59e0b;
}

.simple-action-generator.edit-mode .simple-send-btn {
    background-color: #f59e0b !important;
}

.simple-action-generator.edit-mode .simple-send-btn:hover {
    background-color: #d97706 !important;
}

/* Unsaved script indicator in script dropdown */
.script-search-input.unsaved {
    color: #f59e0b !important;
    font-style: italic;
}

body.has-sidebar:not(.sidebar-closed-desktop) .simple-action-generator {
    left: calc(50% + var(--sidebar-width, 250px) / 2);
    width: calc(100vw - var(--sidebar-width, 250px) - 48px);
}

.simple-action-generator .d-flex {
    align-items: center;
}

.simple-action-generator .simple-icon-left {
    color: #5f6368;
    padding: 8px 12px;
    font-size: 18px;
}

.simple-action-generator .simple-controls-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.simple-action-generator .simple-controls-stack .btn-group.btn-group-left {
    margin-right: 0;
}

.simple-action-generator .simple-provider-select {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
    border-radius: 999px;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 22px;
    width: 132px;
    outline: none;
}

.simple-action-generator .simple-provider-select:focus {
    border-color: rgb(170, 120, 255);
    background: #ffffff;
}

.simple-action-generator #simpleAiPrompt {
    border: none;
    box-shadow: none;
    padding: 12px 10px;
    font-size: 15px;
    background: transparent;
    color: #202124;
    flex: 1;
    height: 48px;
    min-height: 48px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

.simple-action-generator .d-flex {
    align-items: center;
}

.simple-action-generator #simpleAiPrompt::placeholder {
    color: #80868b;
}

.simple-action-generator #simpleAiPrompt:focus {
    outline: none;
    box-shadow: none;
}

.simple-action-generator .btn-group {
    gap: 2px;
    display: flex;
    align-items: center;
}

.simple-action-generator .btn-group .btn {
    background: transparent;
    border: none;
    color: #5f6368;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    font-size: 17px;
}

.simple-action-generator .btn-group .btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.simple-action-generator .btn-group .btn:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.simple-action-generator .btn-group.btn-group-left {
    margin-right: 8px;
}

.simple-action-generator .btn-group .btn.btn-primary,
.simple-action-generator .btn-group .btn.btn-success {
    background: transparent;
    color: #5f6368;
    box-shadow: none;
}

.simple-action-generator .btn-group .btn.btn-primary:hover,
.simple-action-generator .btn-group .btn.btn-success:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #202124;
}

.simple-action-generator .simple-send-btn {
    background: transparent;
    border: none;
    color: #5f6368;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s;
    background-color: rgba(170, 120, 255, 0.15) !important;
    color: rgb(170, 120, 255) !important;
    margin-left: 8px;
    flex-shrink: 0;
}

.simple-action-generator .simple-send-btn:hover {
    background-color: rgba(170, 120, 255, 0.25) !important;
}

.simple-action-generator .simple-photo-btn.has-photo {
    background-color: rgba(74, 222, 128, 0.2) !important;
    color: #22c55e !important;
}

.simple-action-generator .simple-photo-btn.has-photo:hover {
    background-color: rgba(74, 222, 128, 0.3) !important;
}

.simple-action-generator .simple-selectors-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 8px;
}

/* Custom searchable dropdown for trigger selector */
.simple-action-generator .trigger-searchable-dropdown {
    position: relative;
    width: 100%;
}

.simple-action-generator .trigger-search-input {
    border: none;
    background: #f3f4f6;
    color: #5f6368;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    width: 100%;
    outline: none;
}

.simple-action-generator .trigger-search-input:focus {
    background: #e5e7eb;
}

.simple-action-generator .trigger-search-input.has-selection {
    background: rgba(170, 120, 255, 0.15);
    color: rgb(140, 90, 220);
    font-weight: 500;
}

.simple-action-generator .trigger-dropdown-list {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 4px;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 10001;
}

.simple-action-generator .trigger-dropdown-list.show {
    display: block;
}

.simple-action-generator .trigger-dropdown-group {
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e5e7eb;
}

.simple-action-generator .trigger-dropdown-group:first-of-type {
    border-top: none;
}

.simple-action-generator .trigger-dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
}

.simple-action-generator .trigger-dropdown-item:hover,
.simple-action-generator .trigger-dropdown-item.active {
    background: rgba(170, 120, 255, 0.1);
    color: rgb(140, 90, 220);
}

.simple-action-generator .trigger-dropdown-item.selected {
    background: rgba(170, 120, 255, 0.15);
    color: rgb(140, 90, 220);
    font-weight: 500;
}

.simple-action-generator .trigger-dropdown-item.no-trigger {
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.simple-action-generator .trigger-dropdown-item.no-trigger:hover {
    color: rgb(140, 90, 220);
}

/* Custom searchable dropdown for script selector */
.simple-action-generator .script-searchable-dropdown {
    position: relative;
    width: 100%;
}

.simple-action-generator .script-search-input {
    border: none;
    background: #f3f4f6;
    color: #5f6368;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    width: 100%;
    outline: none;
}

.simple-action-generator .script-search-input:focus {
    background: #e5e7eb;
}

.simple-action-generator .script-search-input.has-selection {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(37, 99, 235);
    font-weight: 500;
}

.simple-action-generator .script-dropdown-list {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 4px;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 10001;
}

.simple-action-generator .script-dropdown-list.show {
    display: block;
}

.simple-action-generator .script-dropdown-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
}

.simple-action-generator .script-dropdown-item:hover,
.simple-action-generator .script-dropdown-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37, 99, 235);
}

.simple-action-generator .script-dropdown-item.selected {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(37, 99, 235);
    font-weight: 500;
}

.simple-action-generator .script-dropdown-item.new-script {
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.simple-action-generator .script-dropdown-item.new-script:hover {
    color: rgb(37, 99, 235);
}

/* Script context menu (right-click menu) */
.simple-action-generator .script-context-menu {
    position: absolute;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10002;
    min-width: 120px;
    padding: 4px 0;
}

.simple-action-generator .script-context-menu-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.simple-action-generator .script-context-menu-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(37, 99, 235);
}

.simple-action-generator .script-context-menu-item[data-action="delete"]:hover {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(220, 38, 38);
}

.simple-action-generator .script-context-menu-item i {
    width: 14px;
    text-align: center;
}

/* Editing name state for script input */
.simple-action-generator .script-search-input.editing-name {
    background: #fff !important;
    border: 1px solid rgb(59, 130, 246) !important;
    color: #1f2937 !important;
    font-style: normal !important;
}

/* Generating state */
.simple-action-generator.generating .simple-send-btn {
    background-color: rgb(170, 120, 255) !important;
    color: white !important;
}

/* Claude Code Generator (Alt+V) accent overrides */
.claude-code-generator .simple-icon-left { color: #10b981; }
.claude-code-generator.edit-mode .simple-icon-left { color: #059669; }
.claude-code-generator.edit-mode { border-color: #10b981; box-shadow: 0 4px 24px rgba(16, 185, 129, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08); }
.claude-code-generator.edit-mode .simple-send-btn { background-color: #10b981 !important; }
.claude-code-generator.edit-mode .simple-send-btn:hover { background-color: #059669 !important; }

/* Button context menu */
.button-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 150px;
    padding: 4px 0;
    display: none;
}

.button-context-menu.show {
    display: block;
}

.button-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    transition: background-color 0.15s;
}

.button-context-menu-item:hover {
    background-color: #f3f4f6;
}

.button-context-menu-item.edit {
    color: #2563eb;
}

.button-context-menu-item.edit:hover {
    background-color: #eff6ff;
}

.button-context-menu-item.delete {
    color: #dc2626;
}

.button-context-menu-item.delete:hover {
    background-color: #fef2f2;
}

.button-context-menu-item.add {
    color: #059669;
}

.button-context-menu-item.add:hover {
    background-color: #ecfdf5;
}

.button-context-menu-divider {
    height: 1px;
    margin: 4px 0;
    background-color: #e5e7eb;
}

.button-edit-modal .modal-dialog {
    max-width: 90vw;
    width: 90vw;
}

.button-edit-modal .modal-body {
    padding: 0;
}

.button-edit-modal-iframe {
    width: 100%;
    height: 82vh;
    border: 0;
    display: block;
    background: #fff;
}

/* Field context menu */
.field-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 200px;
    padding: 4px 0;
    display: none;
}

.field-context-menu.show {
    display: block;
}

.field-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    transition: background-color 0.15s;
}

.field-context-menu-item:hover {
    background-color: #f3f4f6;
}

.field-context-menu-item.add-trigger {
    color: #6366f1;
}

.field-context-menu-item.add-trigger:hover {
    background-color: #eef2ff;
}

/* Page context menu (super admin) */
.page-context-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 160px;
    padding: 4px 0;
    display: none;
}

.page-context-menu.show {
    display: block;
}

.page-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    transition: background-color 0.15s;
}

.page-context-menu-item:hover {
    background-color: #f3f4f6;
}

.page-context-menu-item.add-button {
    color: #059669;
}

.page-context-menu-item.add-button:hover {
    background-color: #ecfdf5;
}

.page-context-menu-item.add-timetracking {
    color: #d97706;
}

.page-context-menu-item.add-timetracking:hover {
    background-color: #fffbeb;
}

@media (max-width: 768px) {
    .simple-action-generator {
        width: 95vw;
        left: 50% !important;
    }

    .simple-action-generator .simple-provider-select {
        width: 116px;
    }
}

/* Print Template Generator (Alt+T) */
.template-generator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 48px);
    max-width: 1400px;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 28px;
    padding: 8px 14px 8px 8px;
    z-index: 1001;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.template-generator.edit-mode {
    border-color: #0d9488;
    box-shadow: 0 4px 24px rgba(13, 148, 136, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.has-sidebar:not(.sidebar-closed-desktop) .template-generator {
    left: calc(50% + var(--sidebar-width, 250px) / 2);
    width: calc(100vw - var(--sidebar-width, 250px) - 48px);
}

.template-generator .d-flex {
    align-items: center;
}

.template-generator .tg-icon-left {
    color: #0d9488;
    padding: 8px 12px;
    font-size: 18px;
}

.template-generator #tgPrompt {
    border: none;
    box-shadow: none;
    padding: 12px 10px;
    font-size: 15px;
    background: transparent;
    color: #202124;
    flex: 1;
    height: 48px;
    min-height: 48px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
}

.template-generator #tgPrompt::placeholder {
    color: #80868b;
}

.template-generator #tgPrompt:focus {
    outline: none;
    box-shadow: none;
}

.template-generator .btn-group {
    gap: 2px;
    display: flex;
    align-items: center;
}

.template-generator .btn-group .btn {
    background: transparent;
    border: none;
    color: #5f6368;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    font-size: 17px;
}

.template-generator .btn-group .btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.template-generator .btn-group.btn-group-left {
    margin-right: 8px;
}

.template-generator .tg-photo-btn.has-photo {
    background-color: rgba(74, 222, 128, 0.2) !important;
    color: #22c55e !important;
}

.template-generator .tg-photo-btn.has-photo:hover {
    background-color: rgba(74, 222, 128, 0.3) !important;
}

.template-generator .tg-template-select {
    border: none;
    background: #f3f4f6;
    color: #5f6368;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    outline: none;
    margin-right: 8px;
    max-width: 220px;
    cursor: pointer;
}

.template-generator .tg-template-select:focus {
    background: #e5e7eb;
}

.template-generator .tg-template-select.has-selection {
    background: rgba(13, 148, 136, 0.15);
    color: #0d9488;
    font-weight: 500;
}

.template-generator .tg-send-btn {
    background: transparent;
    border: none;
    color: #5f6368;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s;
    background-color: rgba(13, 148, 136, 0.15) !important;
    color: #0d9488 !important;
    margin-left: 8px;
    flex-shrink: 0;
}

.template-generator .tg-send-btn:hover {
    background-color: rgba(13, 148, 136, 0.25) !important;
}

.template-generator.generating .tg-send-btn {
    background-color: #0d9488 !important;
    color: white !important;
    pointer-events: none;
}

/* Preview panel */
.tg-preview-panel {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 90px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tg-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.tg-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: #0d9488;
}

.tg-preview-title i {
    margin-right: 6px;
}

.tg-preview-actions {
    display: flex;
    gap: 4px;
}

.tg-preview-actions .btn {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
}

.tg-preview-actions .btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

.tg-preview-actions .btn.active {
    background: rgba(13, 148, 136, 0.16);
    color: #0d9488;
}

.tg-editor-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    flex-wrap: wrap;
}

.tg-editor-controls .form-control {
    height: 30px;
    font-size: 12px;
    padding: 4px 8px;
}

.tg-editor-controls #tgFontFamily {
    width: 220px;
    min-width: 180px;
}

.tg-editor-controls #tgFontSize {
    width: 90px;
}

.tg-editor-controls #tgTextColor {
    width: 44px;
    padding: 2px;
}

.tg-editor-controls .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
}

.tg-editor-controls .btn:hover {
    background: #f3f4f6;
}

.tg-editor-controls .btn.active {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.tg-preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

@media (max-width: 768px) {
    .template-generator {
        width: 95vw;
        left: 50% !important;
    }
}

/* Mobile Modal Styles for AG-Grid Edit Dialog */
@media (max-width: 767.98px) {

    /* Fix the modal container itself */
    .bootbox.modal.edit-modal-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        z-index: 1055 !important;
        /* Ensure modal appears above sidebar button (1051) */
    }

    /* Barcode scanner modal should appear above edit modal */
    #barcodeScannerModal {
        z-index: 1070 !important;
        /* Higher than edit modal (1055) */
    }

    #barcodeScannerModal .modal-dialog {
        z-index: 1070 !important;
    }

    /* Override Bootstrap's modal centering that causes overflow */
    .modal.fade.bootbox.edit-modal-mobile.show .modal-dialog {
        transform: none !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
    }

    /* Fullscreen modal on mobile */
    .bootbox.modal.edit-modal-mobile .modal-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
        transform: none !important;
    }

    .bootbox.modal.edit-modal-mobile .modal-content {
        position: relative !important;
        height: 100vh !important;
        width: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .bootbox.modal.edit-modal-mobile .modal-body {
        position: relative !important;
        max-height: calc(100vh - 40px) !important;
        height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 0 20px 0 !important;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        width: 100% !important;
    }

    /* Ensure form elements are properly sized on mobile */
    .bootbox.modal.edit-modal-mobile .slick-field {
        margin-bottom: 15px;
    }

    .bootbox.modal.edit-modal-mobile .slick-label {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .bootbox.modal.edit-modal-mobile .form-control {
        font-size: 16px;
        /* Prevent zoom on iOS */
        padding: 10px;
    }

    /* Button styling for mobile */
    .bootbox.modal.edit-modal-mobile .save-btn,
    .bootbox.modal.edit-modal-mobile .close-btn {
        padding: 12px 24px;
        font-size: 16px;
        min-height: 44px;
        /* Apple's recommended touch target size */
    }

    /* Override mobile styles for small save buttons */
    .bootbox.modal.edit-modal-mobile .save-btn.btn-sm {
        padding: 0.28rem 0.56rem !important;
        font-size: 0.975rem !important;
        min-height: auto !important;
    }

    /* General override for small save buttons */
    .save-btn.btn-sm {
        padding: 0.28rem 0.56rem !important;
        font-size: 0.975rem !important;
        min-height: auto !important;
    }

    /* Tab navigation for mobile */
    .bootbox.modal.edit-modal-mobile .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .bootbox.modal.edit-modal-mobile .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 14px;
    }

    /* Adjust container padding */
    .bootbox.modal.edit-modal-mobile .container,
    .bootbox.modal.edit-modal-mobile .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Slick container adjustments */
    .bootbox.modal.edit-modal-mobile .slick-horizontal {
        padding: 0 8px;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .bootbox.modal.edit-modal-mobile .slick-section {
        margin-bottom: 20px;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make draggable handle more touch-friendly on mobile */
    .bootbox.modal.edit-modal-mobile .editEventForm-move-handle {
        display: none;
        /* Hide drag handle on mobile */
    }

    /* Prevent any content from overflowing */
    .bootbox.modal.edit-modal-mobile .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .bootbox.modal.edit-modal-mobile .col-12,
    .bootbox.modal.edit-modal-mobile [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ensure all form elements respect container width */
    .bootbox.modal.edit-modal-mobile input,
    .bootbox.modal.edit-modal-mobile select,
    .bootbox.modal.edit-modal-mobile textarea,
    .bootbox.modal.edit-modal-mobile .form-control {
        max-width: 100% !important;
    }

    /* Fix for any tables that might cause overflow */
    .bootbox.modal.edit-modal-mobile table {
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    /* Ensure edit form doesn't overflow */
    .bootbox.modal.edit-modal-mobile #editEventForm {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Fix infoMessage positioning on mobile */
    @media (max-width: 767px) {
        #infoMessage {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            margin: 0 !important;
            border-radius: 0 !important;
            z-index: 2000 !important;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
    }

    /* Fix infoMessage positioning within modal */
    .bootbox.modal.edit-modal-mobile #infoMessage {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 2050 !important;
        /* Higher than modal backdrop (1040) and modal (1050) */
    }

    /* Fix form header button overflow on mobile */
    .bootbox.modal.edit-modal-mobile .form-header> :first-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    /* Ensure buttons don't overflow */
    .bootbox.modal.edit-modal-mobile .form-header .btn {
        white-space: nowrap !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Make title responsive */
    .bootbox.modal.edit-modal-mobile .form-header .h4,
    .bootbox.modal.edit-modal-mobile .form-header .h5 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Button groups should wrap nicely */
    .bootbox.modal.edit-modal-mobile .form-header .btn-group {
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Hide button text on very small screens, show only icons */
    @media (max-width: 480px) {
        .bootbox.modal.edit-modal-mobile .form-header .btn>span:not(.sr-only) {
            display: none !important;
        }

        .bootbox.modal.edit-modal-mobile .form-header .btn>i {
            margin-right: 0 !important;
        }
    }

    /* Ensure ml-auto doesn't push buttons off screen */
    .bootbox.modal.edit-modal-mobile .form-header .ml-auto {
        margin-left: auto !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }



    /* Fix custom action buttons overflow */
    .bootbox.modal.edit-modal-mobile .custom-action-button-data {
        max-width: 100% !important;
        margin: 5px 0 !important;
        word-wrap: break-word !important;
    }

    /* Ensure button containers don't overflow */
    .bootbox.modal.edit-modal-mobile .btn-toolbar,
    .bootbox.modal.edit-modal-mobile .button-container {
        flex-wrap: wrap !important;
        gap: 8px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* File attachments should wrap */
    .bootbox.modal.edit-modal-mobile .file-attachments {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .bootbox.modal.edit-modal-mobile .file-attachment {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .bootbox.modal.edit-modal-mobile .file-attachment .file-link {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: calc(100% - 80px) !important;
        display: inline-block !important;
    }

    /* Ensure dropdown menus don't cause overflow */
    .bootbox.modal.edit-modal-mobile .dropdown-menu {
        position: absolute !important;
        transform: none !important;
        max-width: 90vw !important;
        overflow-x: auto !important;
    }

    /* Fix any horizontal scrolling in modal body */
    .bootbox.modal.edit-modal-mobile .modal-body>* {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Additional mobile optimizations */
@media (max-width: 575.98px) {
    .bootbox.modal.edit-modal-mobile .modal-body {
        padding: 0 5px 20px 5px !important;
    }

    .bootbox.modal.edit-modal-mobile .slick-field-label {
        min-width: 120px;
        max-width: 150px;
    }
}

.badge-xl {
    font-size: 0.8rem;
}

.form-title {
    font-weight: 700;
    font-size: 1.125em;
}

/* Two-level breadcrumb that replaces the document title + back button:
   [Type list] > Current item. The parent crumb is a real link to the table. */
.form-title-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.form-title-crumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-title-crumb-parent {
    font-weight: 600;
    color: var(--primary, #007bff);
    max-width: 16rem;
}

.form-title-crumb-parent:hover,
.form-title-crumb-parent:focus {
    text-decoration: underline;
    color: var(--primary, #007bff);
}

.form-title-crumb-sep {
    font-size: 0.7em;
    color: #adb5bd;
    flex: 0 0 auto;
}

.form-title-crumb-current {
    font-weight: 700;
    min-width: 0;
}

/* Fix AG-Grid header button overflow on mobile */
@media (max-width: 767.98px) {

    /* Make content-header wrap on mobile */
    .content-header#button-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px 5px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    /* Ensure the icon inside the button is centered */
    .content-header#button-container .sidebar-open-button i {
        pointer-events: none !important;
    }

    /* Make sidebar button consistent size with other header buttons */
    .sidebar-open-button.btn-outline-secondary,
    .content-header#button-container .sidebar-open-button {
        min-width: auto !important;
        min-height: auto !important;
        padding: 0.375rem 0.75rem !important;
    }

    /* Ensure button groups don't overflow */
    .content-header .btn-group {
        flex-shrink: 0 !important;
        max-width: auto !important;
        width: auto !important;
    }

    /* Hide title on mobile to save space */
    .content-header .table-view-title,
    .content-header .report-view-title {
        display: none !important;
    }

    /* Show title on larger screens */
    @media (min-width: 768px) {

        .content-header .table-view-title,
        .content-header .report-view-title {
            display: inline-block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            margin-right: 8px !important;
        }
    }

    /* Fix badge positioning */
    .content-header .total-data-rows-badge {
        position: static !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Remove dropdown arrows on mobile */
    .content-header .dropdown-toggle::after {
        display: none !important;
    }

    /* Keep the arrow on desktop for filter dropdown */
    @media (min-width: 768px) {
        .content-header #filterDropdown.dropdown-toggle::after {
            display: inline-block !important;
        }
    }

    /* Removed custom-action-buttons-container styles as buttons now in separate row */
}

/* Ensure mobile title wraps/clamps and controls don't wrap across lines */
@media (max-width: 767.98px) {
    .content-header#button-container #mobileViewNameRow {
        order: 99 !important;
        flex: 1 0 100% !important;
        /* take full width on its own row */
        margin-top: 4px !important;
    }

    .content-header#button-container #mobileViewNameRow .mobile-view-name-label {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
        max-height: 2.4em !important;
        /* clamp to 2 lines visually */
    }

    /* Keep header controls as fixed-size items */
    .content-header#button-container>*:not(#mobileViewNameRow) {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
}

/* Scanner button styling for identifier fields */
.slick-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.slick-field .scan-identifier-btn {
    padding: 4px 6px;
    margin-right: 0.25rem;
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
    transition: all 0.15s ease-in-out;
    font-size: 1.75rem !important;
    line-height: 1;
    height: 20px;
    align-self: center;
}

.slick-field .scan-identifier-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.slick-field .scan-identifier-btn i {
    font-size: 1.75rem;
}

/* Fix vertical alignment for slick-label and its content in desktop mode */
@media (min-width: 768px) {
    .slick-label {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
    }

    .slick-label>span {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
    }
}

/* Hide delivery/identifier message on desktop screens */
@media (min-width: 768px) {
    #infoMessage {
        display: none !important;
    }
}

/* Make all fields taller/fatter on mobile */
@media (max-width: 767.98px) {

    /* Remove left and right margins from main-container on mobile - only for Documents edit views */
    /* Note: Using class selector instead of :has() for better minifier compatibility */
    body.document-edit-page #main-container,
    #main-container.shared-edit-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 13px !important;
    }

    /* Make the parent slick-field container taller */
    .slick-field {
        min-height: 60px !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    /* Limit slick-field width on mobile and center it */
    .slick-field {
        max-width: 420px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .slick-container {
        margin-right: .1rem !important;
        margin-left: .1rem !important;
    }

    /* Remove margins from slick sections */
    .bootbox.modal.edit-modal-mobile .slick-section {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* Remove margins from form groups if any */
    .bootbox.modal.edit-modal-mobile .form-group {
        margin-bottom: 0 !important;
    }

    /* Increase height and padding for all input fields */
    .slick-field .slick-input,
    .slick-field input[type="text"],
    .slick-field input[type="number"],
    .slick-field input[type="email"],
    .slick-field input[type="tel"],
    .slick-field input[type="password"],
    .slick-field input[type="date"],
    .slick-field input[type="datetime-local"],
    .slick-field select,
    .slick-field textarea,
    .form-control {
        min-height: 50px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        /* Prevents zoom on iOS */
        line-height: 1.3 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Special handling for actual input elements */
    .slick-field input[type="text"],
    .slick-field input[type="number"],
    .slick-field input[type="email"],
    .slick-field input[type="tel"],
    .slick-field input[type="password"] {
        height: 50px !important;
        padding: 0 16px !important;
        line-height: 50px !important;
        display: block !important;
    }

    /* Make labels bigger on mobile */
    .slick-label {
        font-size: 16px !important;
        padding: 8px 12px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Increase button sizes on mobile */
    .slick-field .btn {
        min-height: 50px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ensure icon buttons are properly centered */
    .slick-field .btn i {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* Make linkInputEdit buttons smaller on mobile */
    .slick-field button[data-click="linkInputEdit"],
    .slick-field a[data-click="linkInputEdit"] {
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }

    .slick-field button[data-click="linkInputEdit"] i,
    .slick-field a[data-click="linkInputEdit"] i {
        font-size: 14px !important;
    }

    /* Fix specific button types */
    .slick-field button[data-click="linkInputEdit"],
    .slick-field a[data-click="linkInputEdit"],
    .slick-field button[data-click="deleteIdentifierField"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
    }

    /* Make scan button even bigger on mobile */
    .slick-field .scan-identifier-btn {
        padding: 8px 10px !important;
        font-size: 2rem !important;
        min-height: 45px !important;
        margin-left: 10px !important;
    }

    .slick-field .scan-identifier-btn i {
        font-size: 1.5rem !important;
    }

    /* Remove horizontal padding on mobile for maximum space */
    .bootbox.modal.edit-modal-mobile .slick-horizontal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bootbox.modal.edit-modal-mobile .tab-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bootbox.modal.edit-modal-mobile .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Also remove column padding for maximum width */
    .bootbox.modal.edit-modal-mobile .col-12,
    .bootbox.modal.edit-modal-mobile [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Increase nav-item text size to match field text size */
    .bootbox.modal.edit-modal-mobile .nav-tabs .nav-item .nav-link {
        font-size: 16px !important;
        padding: 12px 20px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Make sure nav pills are also bigger if used */
    .bootbox.modal.edit-modal-mobile .nav-pills .nav-item .nav-link {
        font-size: 16px !important;
        padding: 12px 20px !important;
        min-height: 50px !important;
    }

    /* Ensure breadcrumb and other navigation elements are proportional */
    .bootbox.modal.edit-modal-mobile .breadcrumb-item {
        font-size: 16px !important;
    }

    .bootbox.modal.edit-modal-mobile .nav-item {
        margin-bottom: 5px !important;
    }

    /* Make select dropdowns taller */
    select.form-control,
    .slick-field select {
        height: 50px !important;
        line-height: 1.5 !important;
    }

    /* Make textareas have more padding */
    textarea.form-control,
    .slick-field textarea {
        min-height: 100px !important;
        padding: 12px 16px !important;
    }

    /* Ensure custom Bootstrap select components are also taller */
    .bootstrap-select .dropdown-toggle {
        height: 50px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    /* Make radio buttons and checkboxes bigger */
    .form-check-input,
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
    }

    .form-check-label {
        font-size: 16px !important;
        padding-left: 8px !important;
        line-height: 24px !important;
    }
}


/* Activity tab */

.activity-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin: 10px 0;
    height: 55vh;
    overflow-y: auto;
}

.activity-entry {
    font-size: 14px;
}

.activity-entry-text {
    color: color-mix(in srgb, var(--sheet-fg) 30%, transparent);
}

.activity-entry-text>span {
    color: color-mix(in srgb, var(--sheet-fg) 55%, transparent);
}

.activity-entry-text>i {
    color: color-mix(in srgb, var(--sheet-fg) 55%, transparent);
}

.activity-entry-text>b {
    font-weight: 600;
    color: color-mix(in srgb, var(--sheet-fg) 50%, transparent);
}

.activity-entry-time {
    float: right;
    color: color-mix(in srgb, var(--sheet-fg) 40%, transparent);
}

.activity-comment {
    /*border: solid 1px color-mix(in srgb, var(--sheet-fg) 25%, transparent);*/
    font-size: 15px;
    margin-top: 1px;
    background-color: #92d0ed;
    color: white;
    border-radius: 7px;
    padding: 6px 10px;
}

/* Scanner Debug Console */
.scanner-console {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 500px;
    max-width: 90vw;
    background: rgba(0, 0, 0, 0.9);
    color: #0f0;
    border: 1px solid #0f0;
    border-radius: 5px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
}

.scanner-console .console-output {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    border-radius: 3px;
}

.scanner-console .console-output .console-line {
    margin: 2px 0;
    padding: 2px 5px;
    border-left: 2px solid #0f0;
    word-wrap: break-word;
}

.scanner-console .console-output .console-line.error {
    color: #f00;
    border-left-color: #f00;
}

/* QR/Barcode Scanner Modal Styles */
#barcodeScannerModal .modal-dialog {
    max-width: 500px;
    z-index: 1070 !important;
}

#barcodeScannerModal .modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#barcodeScannerModal .modal-header {
    border-bottom: none;
    padding: 1.25rem;
    background: #1a73e8;
    color: white;
}

#barcodeScannerModal .modal-header .modal-title {
    font-weight: 500;
    display: flex;
    align-items: center;
    color: white;
}

#barcodeScannerModal .modal-header .close {
    opacity: 0.9;
    transition: opacity 0.2s;
    color: white;
}

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

#barcodeScannerModal .modal-body {
    background-color: #f8f9fa;
}

/* Scanner Container */
#barcodeScannerModal .scanner-container {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

#barcodeScannerModal #reader {
    width: 100%;
}

/* Scanner Overlay with Frame */
#barcodeScannerModal .scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

#barcodeScannerModal .scanner-frame {
    position: relative;
    width: 200px;
    height: 200px;
}

#barcodeScannerModal .scanner-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #1a73e8;
}

#barcodeScannerModal .scanner-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

#barcodeScannerModal .scanner-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

#barcodeScannerModal .scanner-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

#barcodeScannerModal .scanner-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Scan Identifier Button Styles */
.scan-identifier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
    /* increased padding */
    margin-left: 3px !important;
    background: #1a73e8 !important;
    color: white !important;
    border-radius: 3px !important;
    font-size: 1rem !important;
    /* slightly larger text */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 44px !important;
    /* taller height */
    min-height: 44px !important;
}


.scan-identifier-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: #1967d2 !important;
}

.scan-identifier-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Improve the field styling when scan button is present */
.slick-field {
    position: relative;
}

.slick-field .slick-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mobile responsiveness for scanner modal */
@media (max-width: 576px) {
    #barcodeScannerModal .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }

    #barcodeScannerModal .scanner-frame {
        width: 150px;
        height: 150px;
    }
}

.scanner-console .console-output .console-line.warning {
    color: #ff0;
    border-left-color: #ff0;
}

.scanner-console .console-output .console-line.info {
    color: #0ff;
    border-left-color: #0ff;
}

@media (max-width: 768px) {
    .custom-action-button-global {
        margin-top: -1.3rem !important;
    }
}

/* Fix for Data/Edit modal form layout in Bootstrap mode */

/* Ensure proper form group layout and spacing */
#editEventForm .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Fix label alignment */
#editEventForm .form-group label.control-label {
    font-weight: normal !important;
    margin-bottom: 0.25rem;
    display: block;
    padding-left: 0;
    text-align: left;
}

/* Override any bold styling for display template labels */
.form-group label.control-label {
    font-weight: normal !important;
}

/* Specific override for locked/readonly datarow labels */
#editEventForm .asset-fields-container label.control-label,
#editEventForm label.control-label[style*="font-weight"] {
    font-weight: normal !important;
}

/* Fix input view alignment for read-only fields */
#editEventForm .form-group .input-view {
    min-height: 34px;
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Asset fields container proper layout */
.asset-fields-container {
    width: 100%;
}

.asset-fields-container .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* Fix Bootstrap column layout for form groups */
#editEventForm .form-group {
    position: relative;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Apply col-lg-N widths at all breakpoints so explicit widths are respected on mobile.
   When BootstrapColumnWidth is not set, Razor adds .col-width-unset and mobile falls back to 100%. */
.form-group.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.form-group.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.form-group.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.form-group.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.form-group.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.form-group.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.form-group.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.form-group.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.form-group.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.form-group.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.form-group.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.form-group.col-lg-12 { flex: 0 0 100%; max-width: 100%; }

/* Mobile: when width was not explicitly set, fall back to full width (overrides col-lg-N above) */
@media (max-width: 991px) {
    .form-group.col-width-unset { flex: 0 0 100%; max-width: 100%; }
}

/* Fix input groups */
#editEventForm .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

#editEventForm .input-group>.form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;
}

/* Fix validation messages */
/* TODO: There was a `#editEventForm .text-danger` here. That's too broad and screws up other things. */
#editEventForm .field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

/* Fix for identifier/RFID fields */
#editEventForm .rfid-field {
    width: 100%;
}

/* Fix button alignment in input groups */
#editEventForm .input-group-append {
    margin-left: -1px;
    display: flex;
}

#editEventForm .input-group-append .btn {
    position: relative;
    z-index: 2;
}

/* Fix select elements */
#editEventForm select.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Fix textarea elements */
#editEventForm textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    resize: vertical;
}

/* Fix checkbox and radio button alignment */
#editEventForm .custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

#editEventForm .custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

#editEventForm .custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

/* Fix tab content padding */
#editEventForm .tab-content {
    padding: 0 2px;
}

/* Ensure proper spacing between rows */
#editEventForm .asset-fields-container>.col-12>.row {
    margin-bottom: 0;
}

#editEventForm .asset-fields-container>.col-12>.row:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* Fix modal body scrolling */
.modal-body#editEventForm,
#editEventForm.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

/* Reduce container-fluid padding */
#editEventForm .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* On smaller screens, reduce padding even more */
@media (max-width: 767px) {
    #editEventForm .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Fix for hidden fields that might be causing layout issues */
#editEventForm input[type="hidden"] {
    display: none !important;
}

/* Ensure proper flex container for rows */
#editEventForm .row {
    display: flex;
    flex-wrap: wrap;
}

/* Fix z-index issues with dropdowns and modals */
.modal #editEventForm .dropdown-menu {
    z-index: 1055;
}

/* Ensure info bubbles display correctly */
#editEventForm .info-bubble {
    cursor: help;
    margin-left: 0.25rem;
}

/* Fix date/datetime inputs */
#editEventForm input[type="date"],
#editEventForm input[type="datetime-local"] {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Additional fixes for proper field alignment */
#editEventForm .form-group>* {
    width: 100%;
}

#editEventForm .form-group .input-group {
    width: 100%;
}

/* Ensure proper stacking on smaller screens */
@media (max-width: 575px) {
    #editEventForm .form-group {
        margin-bottom: 0.75rem;
    }

    #editEventForm .control-label {
        font-size: 0.9rem;
    }

    #editEventForm .form-control {
        font-size: 0.95rem;
    }
}

.version-update-container img {
    max-width: 100%;
}

/* Sidebar dropdown items with action buttons */
.dropdown-item-with-actions {
    position: relative;
    padding: 0;
}

.dropdown-item-with-actions .dropdown-item {
    border-radius: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.dropdown-item-with-actions .dropdown-item i {
    flex-shrink: 0;
}

.dropdown-item-with-actions .dropdown-item i+span {
    margin-left: 0.35rem;
}

.dropdown-item-with-actions .dropdown-item span+i {
    flex-shrink: 0;
    margin-left: 0.35rem;
}

.dropdown-item-with-actions .dropdown-item span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* When the view is active, highlight the entire row */
.dropdown-item-with-actions:has(.dropdown-item.active) {
    background-color: #b6d6f5;
}

.dropdown-item-with-actions:has(.dropdown-item.active) .dropdown-item {
    background-color: transparent !important;
    color: #212529 !important;
}

.dropdown-item-with-actions:has(.dropdown-item.active) .sidebar-set-home {
    color: #212529 !important;
}

.dropdown-item-with-actions:has(.dropdown-item.active) i {
    color: #212529 !important;
}

.dropdown-item-with-actions .sidebar-set-home {
    display: inline-flex;
    align-items: center;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

/* Hover state for the entire row */
.dropdown-item-with-actions:hover:not(:has(.dropdown-item.active)) {
    background-color: #ced4da;
}

.dropdown-item-with-actions:hover .dropdown-item {
    background-color: transparent !important;
}

.dropdown-item-with-actions:hover .sidebar-set-home {
    background-color: transparent !important;
    color: #007bff;
}

/* Sticky custom buttons container */
.custom-buttons-sticky-container {
    position: sticky;
    top: var(--navbar-height);
    z-index: 100;
    background-color: var(--site-bg, white);
    padding: 15px 0 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
}

/* When scrolled, add shadow */
.custom-buttons-sticky-container.scrolled {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Adjust for popup modals */
.popup-content .custom-buttons-sticky-container,
.modal .custom-buttons-sticky-container {
    position: sticky;
    top: 10px;
}

/* Document edit: custom buttons now live in the form-header center zone (see
   .form-header-center). Flat look, no lift, so they read as a toolbar band.
   Spacing comes from the zone's flex gap, so drop the per-button margins. */
.document-custom-buttons-header .custom-action-button-documents {
    box-shadow: none !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    margin-right: 0;
    margin-bottom: 0;
}

.document-custom-buttons-header .custom-action-button-documents:hover,
.document-custom-buttons-header .custom-action-button-documents:active {
    box-shadow: none !important;
    transform: none !important;
}

/* ── Custom action buttons: Modern Flat with Depth ── */
.custom-action-button-documents {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease, filter 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    vertical-align: top;
    overflow: hidden;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1 !important;
    padding: 0.5rem 0.75rem !important;
    position: relative;
    outline: none;
}

.custom-action-button-documents:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.custom-action-button-documents:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transform: translateY(0);
    transition-duration: 0.06s;
}

.custom-action-button-documents:focus-visible {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* Icon inside button */
.custom-action-button-documents i.fas {
    flex-shrink: 0;
    font-size: 1em;
}

/* Outlined variant (border buttons) */
.custom-action-button-documents--outlined {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}

.custom-action-button-documents--outlined:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Filled variant */
.custom-action-button-documents--filled {
    border: none !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.custom-action-button-documents--filled:hover {
    filter: brightness(1.08);
    color: #fff !important;
}

.custom-action-button-documents--filled:active {
    filter: brightness(0.95);
}

/* Suppress Bootstrap's is-valid green styling on action buttons */
.custom-action-button-documents.is-valid {
    border-color: inherit !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Toolbar variant (height=0, sits in top bar next to lock/back buttons) */
.custom-action-button-documents.custom-action-button-documents--toolbar {
    width: auto !important;
    height: auto !important;
    min-height: calc(1.5em + 12px + 2px) !important;
    max-height: none !important;
    padding: 6px 12px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    gap: 5px !important;
    box-shadow: none !important;
    margin: 0;
    border-radius: .25rem !important;
}

.custom-action-button-documents.custom-action-button-documents--toolbar:hover {
    box-shadow: none !important;
    transform: none;
}

.custom-action-button-documents.custom-action-button-documents--toolbar:active {
    box-shadow: none !important;
    transform: none;
}

/* Small icon-only variant (GenericSheet table buttons) */
.custom-action-button-documents.btn-sm {
    border-radius: 6px !important;
    padding: 0.3rem 0.5rem !important;
    gap: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.custom-action-button-documents.btn-sm:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Field with OnFieldChange trigger indicator */
.field-with-trigger {
    position: relative;
    margin-left: -5px;
    border-left: 3px solid #FFC260 !important;
    padding-left: 6px !important;
}

.field-with-trigger::before {
    content: '⚡';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #FFC260;
    pointer-events: none;
    z-index: 1;
}

/* For select elements, adjust positioning */
select.field-with-trigger::before {
    right: 30px;
    /* Account for dropdown arrow */
}

/* For link autocomplete fields */
.link-autocomplete.field-with-trigger::before {
    right: 35px;
    /* Account for the link icon button */
}

/* Ensure the indicator is visible on focus */
.field-with-trigger:focus {
    border-left-color: #ff9900 !important;
}

.field-with-trigger:focus::before {
    color: #ff9900;
}

/* BOM Processing trigger field - more prominent styling */
.bom-trigger-field {
    position: relative;
}

.bom-trigger-field .form-control,
.bom-trigger-field .link-autocomplete {
    background: linear-gradient(to right, rgba(255, 194, 96, 0.08), transparent) !important;
    border-left: 3px solid #FFC260 !important;
    padding-left: 8px !important;
}

.bom-trigger-field .form-control:focus,
.bom-trigger-field .link-autocomplete:focus {
    background: linear-gradient(to right, rgba(255, 153, 0, 0.12), transparent) !important;
    border-left-color: #ff9900 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 153, 0, 0.15) !important;
}

/* Badge indicator for BOM trigger field */
.bom-trigger-field::after {
    content: attr(data-trigger-label);
    position: absolute;
    top: -8px;
    right: 10px;
    background: linear-gradient(135deg, #FFC260, #ff9900);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3);
    z-index: 2;
}

/* Animation on field value change */
@keyframes bom-trigger-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 153, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

.bom-trigger-field.triggering .form-control,
.bom-trigger-field.triggering .link-autocomplete {
    animation: bom-trigger-pulse 0.8s ease-out;
}

/* Lighter AG-Grid dropdown icons */

.ag-menu-option-icon>.fa-fw {
    opacity: 0.6;
}

@media (min-width: 1200px)
/* Wider document edit page */
    {
    .shared-edit-container .container {
        max-width: 1366px !important;
    }
}

@media (min-width: 768px)
/* Full-width tables on document edit page. */
    {

    body.has-sidebar .container>.sheet-container,
    body.has-sidebar .container>.local-ag-grid {
        margin-left: calc(-50vw + var(--sidebar-width) / 2 + 2em + 50%);
        margin-right: calc(-50vw + var(--sidebar-width) / 2 + 2em + 50%);
    }

    body.has-sidebar.sidebar-collapsed .container>.sheet-container,
    body.has-sidebar.sidebar-collapsed .container>.local-ag-grid {
        margin-left: calc(-50vw + var(--sidebar-collapsed-width) / 2 + 2em + 50%);
        margin-right: calc(-50vw + var(--sidebar-collapsed-width) / 2 + 2em + 50%);
    }
}


/* Double-click prevention - button submitting state */

button.submitting,
input[type="submit"].submitting,
.btn.submitting {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

button.submitting::after,
input[type="submit"].submitting::after,
.btn.submitting::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spinner 0.75s linear infinite;
    vertical-align: middle;
}

@keyframes btn-spinner {
    to {
        transform: rotate(360deg);
    }
}

.local-ag-grid {
    --ag-grid-size: 4px;
    --ag-header-height: 32px;
    --ag-row-height: 32px;
    --ag-list-item-height: 36px;
    position: relative;
}


.local-ag-grid .ag-header-cell[col-id="selection"] .ag-header-cell-comp-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.local-ag-grid .ag-header-cell[col-id="selection"] {
    padding-left: 4px !important;
    padding-right: 3px !important;
}
.local-ag-grid .ag-cell[col-id="selection"] {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.local-ag-grid .grid-actions-cell-container .btn,
.local-ag-grid .grid-actions-header-container .btn {
    border-color: transparent !important;
    width: 28px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.local-ag-grid .grid-actions-header-container .grid-add-button,
.local-ag-grid .grid-group-add-button {
    margin-left: -1px;
    font-size: 16px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.local-ag-grid .grid-paste-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.local-ag-grid .grid-select-all-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--ag-icon-size, 16px);
    height: var(--ag-icon-size, 16px);
    margin: 0;
    cursor: pointer;
    border: 1px solid #666;
    border-radius: var(--ag-checkbox-border-radius, var(--ag-border-radius, 3px));
    background-color: var(--ag-checkbox-background-color, var(--ag-background-color, #fff));
    transition: background-color 0.1s, border-color 0.1s;
}

.local-ag-grid .grid-select-all-checkbox:checked {
    background-color: var(--ag-checkbox-checked-color, var(--ag-accent-color, #2196f3));
    border-color: var(--ag-checkbox-checked-color, var(--ag-accent-color, #2196f3));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.local-ag-grid .grid-select-all-checkbox:indeterminate {
    background-color: var(--ag-checkbox-checked-color, var(--ag-accent-color, #2196f3));
    border-color: var(--ag-checkbox-checked-color, var(--ag-accent-color, #2196f3));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='4' y1='8' x2='12' y2='8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.local-ag-grid .ag-header-cell[col-id="rowDrag"],
.local-ag-grid .ag-header-cell[col-id="rowDrag"] * {
    overflow: visible;
}

.local-ag-grid .ag-header-cell[col-id="rowDrag"] .ag-header-cell-comp-wrapper {
    position: relative;
}

.local-ag-grid .grid-expand-toggle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.local-ag-grid .grid-expand-toggle:focus {
    outline: none;
}

.local-ag-grid .grid-expand-toggle:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #ced4da;
}

.local-ag-grid .grid-expand-toggle i {
    font-size: 11px;
}

.local-ag-grid.grid-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh !important;
    z-index: 10000;
    background: #fff;
    margin: 0 !important;
    border-radius: 0;
}

body:has(.grid-fullscreen) .slick-dropdown,
body:has(.grid-fullscreen) #auto-save-status-indicator {
    z-index: 10001 !important;
}

.local-ag-grid .ag-header-cell {
    font-size: 14px !important;
}

.local-ag-grid .ag-header-cell[col-id="rowNumber"] {
    opacity: 0.4;
}

/* Auto-height text cells - allow text to wrap and expand row height */
.local-ag-grid .ag-cell[col-id^="f"]:not(.ag-cell-inline-editing) {
    line-height: 1.4;
    white-space: pre-line !important;
    /* Preserve newlines (Ctrl+Enter) while wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Add vertical padding for better spacing on multi-line cells */
.local-ag-grid .ag-row .ag-cell[col-id^="f"]:not(.ag-cell-inline-editing) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Vertically center content in non-editing cells when rows have variable height */
.local-ag-grid .ag-cell:not(.ag-cell-inline-editing) {
    display: flex !important;
    align-items: center;
}

.local-ag-grid .ag-cell:not(.ag-cell-inline-editing) .ag-cell-value,
.local-ag-grid .ag-cell:not(.ag-cell-inline-editing) .ag-cell-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Keep inline editors full-width in row edit mode (especially numeric editors) */
.local-ag-grid .ag-cell.ag-cell-inline-editing {
    display: block !important;
}

.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-cell-wrapper,
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-cell-edit-wrapper,
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-cell-editor,
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-input-field,
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-input-wrapper {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    flex: 1 1 auto;
}

.local-ag-grid .ag-cell.ag-cell-inline-editing input:not(.ag-checkbox-input),
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-input-field-input:not(.ag-checkbox-input),
.local-ag-grid .ag-cell.ag-cell-inline-editing .ag-cell-edit-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
}

.local-ag-grid .ag-details-row .ag-layout-auto-height .ag-center-cols-viewport,
.local-ag-grid .ag-details-row .ag-layout-auto-height .ag-center-cols-container {
    min-height: 0;
}

/* Let clicks pass through the parent grid's pinned-left overlay onto the detail grid.
   In AG Grid v31, detail rows live in ag-full-width-container (not inside ag-pinned-left-cols-container),
   but the pinned-left container (z-index: 2) still overlaps the left portion of the detail grid. */
.local-ag-grid .ag-pinned-left-cols-container {
    pointer-events: none;
}
.local-ag-grid .ag-pinned-left-cols-container > .ag-row {
    pointer-events: auto;
}

/* Local AG-Grid row grouping styles */
.local-ag-grid .ag-row-group-panel {
    min-height: 36px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--ag-border-color, #dde2eb);
}

.local-ag-grid .ag-column-drop-cell {
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    padding: 2px 8px;
}

.local-ag-grid .ag-column-drop-empty-message {
    color: #666;
    font-style: italic;
}

/* Group row styling */
.local-ag-grid .ag-row-group {
    background-color: rgba(0, 0, 0, 0.03);
    font-weight: 500;
}

.local-ag-grid .ag-row-group:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Group row add button in actions column */
.local-ag-grid .ag-row-group .grid-group-add-button {
    opacity: 0.7;
    transition: opacity 0.15s;
}

.local-ag-grid .ag-row-group:hover .grid-group-add-button {
    opacity: 1;
}

/* Textarea cell editor for multi-line text (Ctrl+Enter for newline) */
.local-ag-grid .ag-cell-inline-editing {
    border: none !important;
    box-shadow: none !important;
}

.local-ag-grid .ag-cell-inline-editing .ag-cell-edit-wrapper,
.local-ag-grid .ag-cell-inline-editing .ag-cell-editor,
.local-ag-grid .ag-cell-inline-editing .ag-input-field,
.local-ag-grid .ag-cell-inline-editing .ag-wrapper {
    width: 100%;
    height: 100%;
}

.local-ag-grid .ag-large-text-input {
    padding: 0;
}

.local-ag-grid .grid-textarea-input {
    width: 100%;
    min-width: 200px;
    border: 1px solid var(--ag-input-border-color, #babfc7);
    border-radius: 3px;
    background-color: var(--ag-background-color, #fff);
}

.local-ag-grid .grid-textarea-input:focus {
    outline: none;
    border-color: var(--ag-input-focus-border-color, #2196f3);
    box-shadow: 0 0 0 1px var(--ag-input-focus-border-color, #2196f3);
}

/* Link cell editor textarea: wraps long link names while picking from dropdown. */
.local-ag-grid textarea.grid-link-input {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: none;
    line-height: 1.2;
}

/* Version indicator button */
.version-indicator-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.version-indicator-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
}

.version-indicator-btn:focus {
    outline: none;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.version-indicator-btn i {
    font-size: 0.9rem;
}

.version-indicator-btn small {
    font-weight: 500;
}

/* Transcribe Audio Modal Styles */
.transcribe-audio-modal .modal-body {
    padding: 20px;
}

.transcribe-audio-container {
    min-height: 200px;
}

.transcribe-audio-dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.transcribe-audio-dropzone:hover {
    border-color: #007bff;
    background-color: #f0f7ff;
}

.transcribe-audio-dropzone.dragover {
    border-color: #28a745;
    background-color: #e8f5e9;
    border-style: solid;
}

.transcribe-audio-dropzone .dropzone-content {
    color: #6c757d;
}

.transcribe-audio-dropzone:hover .dropzone-content {
    color: #007bff;
}

.transcribe-audio-dropzone .fa-cloud-upload-alt {
    color: #adb5bd;
    transition: color 0.3s ease;
}

.transcribe-audio-dropzone:hover .fa-cloud-upload-alt {
    color: #007bff;
}

.transcribe-file-info {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.transcribe-progress {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.transcribe-progress .progress {
    height: 20px;
    border-radius: 10px;
}

.transcribe-progress .progress-bar {
    border-radius: 10px;
}

.transcribe-result {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transcribe-audio-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile styles for transcribe audio modal */
@media (max-width: 576px) {
    .transcribe-audio-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .transcribe-audio-modal .modal-body {
        padding: 15px;
    }

    .transcribe-audio-dropzone {
        padding: 30px 15px;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .transcribe-audio-dropzone .fa-cloud-upload-alt {
        font-size: 2em !important;
    }

    .transcribe-audio-modal .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .transcribe-audio-modal .modal-footer .btn {
        width: 100%;
        margin: 0;
        padding: 12px;
        font-size: 16px;
    }

    .transcribe-file-info {
        padding: 12px;
    }

    .transcribe-file-info .fa-file-audio {
        font-size: 1.5em !important;
    }

    .transcribe-progress {
        padding: 15px;
    }
}

.transcribe-audio-icon {
    color: #17a2b8;
}

.transcribe-audio-icon:hover {
    color: #138496;
}

/* Transcription collapse badge */
.transcription-collapse-badge {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin: 4px 0;
    cursor: default;
}

.collapse-badge-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #495057;
    font-size: 14px;
}

.collapse-badge-inner .fa-file-alt {
    color: #17a2b8;
    font-size: 18px;
}

.collapse-badge-meta {
    margin-left: auto;
    color: #868e96;
    font-size: 12px;
}

/* Transcription chat panel */
.transcription-chat-panel {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-top: 8px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 350px;
    overflow: hidden;
    padding-bottom: 6px;
}

.chat-panel-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 1;
}

.chat-panel-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #ced4da;
    border-radius: 2px;
}

.chat-panel-resize-handle:hover::after {
    background: #6c757d;
}

.chat-panel-header {
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    cursor: ns-resize;
    user-select: none;
    font-size: 13px;
    color: #495057;
    border-radius: 4px 4px 0 0;
}

.chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    min-height: 0;
}

.chat-message {
    margin-bottom: 10px;
    display: flex;
}

.chat-message-user {
    justify-content: flex-end;
}

.chat-message-assistant {
    justify-content: flex-start;
}

.chat-message-user .chat-bubble {
    background: #007bff;
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}

.chat-message-assistant .chat-bubble {
    background: #f1f3f5;
    color: #212529;
    border-radius: 12px 12px 12px 2px;
}

.chat-bubble {
    padding: 8px 12px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-x: auto;
}

.chat-bubble table {
    white-space: normal;
}

.chat-panel-input-area {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: 0 0 4px 4px;
}

.chat-panel-input-area .form-control {
    font-size: 13px;
}

.chat-send-btn {
    flex-shrink: 0;
}

/* Floating page chat panel */
.page-chat-panel {
    position: fixed;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 36vh;
    min-height: 240px;
    max-height: 80vh;
    background: #fff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
    z-index: 1002;
    display: flex;
    flex-direction: column;
}

.page-chat-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 1;
}

.page-chat-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #ced4da;
    border-radius: 2px;
}


.page-chat-resize-handle:hover::after {
    background: #6c757d;
}

.page-chat-header {
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.page-chat-close {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
}

.page-chat-close:hover {
    color: #dc3545;
}

.page-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.page-chat-input-area {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    flex-shrink: 0;
}

.page-chat-input-area .form-control {
    font-size: 13px;
}

body.has-sidebar:not(.sidebar-closed-desktop) .page-chat-panel {
    left: calc(var(--sidebar-width, 250px) + 15px);
}

@media (max-width: 768px) {
    .page-chat-panel {
        left: 0;
        right: 0;
        border-radius: 0;
        border-left: none;
    }

    body.has-sidebar:not(.sidebar-closed-desktop) .page-chat-panel {
        left: var(--sidebar-width, 250px);
    }
}

/* Push floating toolbar above chat panel when chat is open */
body.page-chat-open .mobile-input-toolbar {
    bottom: calc(var(--chat-panel-height, 36vh) + 16px) !important;
}

/* Spellcheck controls for textareas */
.spellcheck-controls {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: top;
}

.spellcheck-toggle-icon {
    color: #28a745;
}

.spellcheck-toggle-icon:hover {
    color: #218838;
}

.spellcheck-toggle-icon.spellcheck-off {
    color: #dc3545;
}

.spellcheck-toggle-icon.spellcheck-off:hover {
    color: #c82333;
}

.spellcheck-lang-select {
    font-size: 12px;
    padding: 2px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    height: 28px;
    min-width: 100px;
}

.spellcheck-lang-select:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

/* Quill toolbar spellcheck controls */
.ql-spellcheck-formats {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-left: auto !important;
    float: right;
}

.ql-spellcheck-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    color: #28a745;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline wavy;
}

.ql-spellcheck-toggle:hover {
    color: #218838;
}

.ql-spellcheck-toggle.spellcheck-off {
    color: #dc3545;
}

.ql-spellcheck-toggle.spellcheck-off:hover {
    color: #c82333;
}

.ql-spellcheck-lang {
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    height: 24px;
}

/* Floating QR/Scan button - positioned 5px above bottom, accounting for iOS safe area */
.floating-qr-button {
    position: fixed;
    bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    z-index: 1000;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.floating-qr-button:hover {
    opacity: 1;
}

.floating-qr-button i {
    font-size: 24px;
}

/* PhotoSwipe base hide. The CDN photoswipe.min.css (loaded via @@section Scripts) carries the
   real `.pswp { display:none }` rule, but that section doesn't render under a null layout
   (embedded grid fragments), leaving the scaffold visible. Replicate the base hide here in
   always-loaded site.css so the gallery scaffold stays hidden until PhotoSwipe opens it
   (it adds .pswp--open). */
.pswp:not(.pswp--open) {
    display: none;
}

/* PhotoSwipe gallery description styles */
.pswp__caption__center {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0;
}

.pswp__caption__title {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 8px;
}

.pswp__caption__description {
    margin-top: 5px;
}

.pswp__description-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    max-width: 400px;
    color: #333;
}

.pswp__description-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.pswp__description-input::placeholder {
    color: #999;
}

/* PhotoSwipe navigation arrows - vertically centered on sides */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    background: none !important;
    width: 70px !important;
    height: 100px !important;
}

.pswp__button--arrow--left {
    left: 0 !important;
}

.pswp__button--arrow--right {
    right: 0 !important;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    top: 50% !important;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3) !important;
}


/* PhotoSwipe annotate button - use FA icon instead of sprite */
.pswp__button--annotate {
    background: none !important;
    color: #fff;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
}

.pswp__button--annotate:hover,
.pswp__button--annotate:focus {
    opacity: 1;
    color: #fff;
}

.pswp__button--annotate i {
    line-height: 44px;
}

/* Image Annotator Styles */
.image-annotator-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.annotator-container {
    display: flex;
    flex-direction: column;
    width: 95vw;
    height: 95vh;
    max-width: 1600px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.annotator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.annotator-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.annotator-header-buttons {
    display: flex;
    gap: 5px;
}

.annotator-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.toolbar-divider {
    width: 1px;
    height: 30px;
    background: #dee2e6;
}

.tool-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #495057;
}

.tool-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.tool-btn.active {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.toolbar-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.toolbar-label span {
    font-size: 0.7rem;
    color: #6c757d;
}

.toolbar-label input[type="color"] {
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
}

.toolbar-label select {
    padding: 4px 6px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.85rem;
    background: #fff;
}

.annotator-canvas-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2c2c2c;
    overflow: hidden;
    padding: 10px;
    position: relative;
    /* Block default browser pinch-zoom/scroll so our handlers can implement
       canvas-level pinch-zoom + pan instead of the page zooming. */
    touch-action: none;
}

#annotatorCanvas {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background: #fff;
}

.annotator-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2c2c2c;
}

.annotator-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.annotator-loading-spinner i {
    color: #007bff;
}

.annotator-loading-text {
    font-size: 14px;
    color: #aaa;
}

.annotator-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

.annotator-text-input {
    outline: none;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* Image Modal Annotate Button */
.image-modal-annotate-btn {
    position: absolute;
    bottom: 10px;
    right: 50px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 8px 12px;
    border-radius: 6px;
}

.image-modal-annotate-btn:hover {
    opacity: 1;
}

.text-input-container {
    display: flex;
    align-items: center;
}

.text-input-container input {
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Mobile responsive adjustments for annotator.
   Goal: header, toolbar and footer must remain on-screen and reachable on phones
   (portrait + landscape). Toolbar is allowed to wrap onto multiple rows; the
   canvas area is the only flex:1 region and shrinks to fit what's left. */
@media (max-width: 768px) {
    .annotator-container {
        /* Use small-viewport-height units when supported so iOS Safari's address
           bar doesn't clip the footer; fall back to vh otherwise. */
        width: 100vw;
        height: 100vh;
        height: 100svh;
        max-height: 100vh;
        max-height: 100svh;
        border-radius: 0;
    }

    .annotator-header {
        padding: 6px 10px;
    }

    .annotator-title {
        font-size: 0.95rem;
    }

    .annotator-toolbar {
        padding: 6px 10px;
        gap: 6px;
        /* Allow toolbar to grow vertically as buttons wrap */
        max-height: 40vh;
        overflow-y: auto;
    }

    .tool-btn {
        width: 34px;
        height: 34px;
    }

    .toolbar-divider {
        height: 24px;
    }

    .toolbar-label span {
        display: none;
    }

    .annotator-footer {
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 10px;
    }

    .annotator-footer .btn {
        flex: 1;
        min-width: 90px;
    }

    .annotator-canvas-container {
        padding: 4px;
    }
}

@media (max-width: 480px) {
    .tools-group {
        flex-wrap: wrap;
    }

    .settings-group {
        flex-wrap: wrap;
    }

    .annotator-toolbar {
        gap: 4px;
    }

    .tool-btn {
        width: 32px;
        height: 32px;
    }

    .annotator-footer .btn {
        font-size: 0.85rem;
        padding: 6px 8px;
        min-width: 70px;
    }
}

.local-ag-grid .ag-cell.boolean-cell {
    justify-content: center;
}

.local-ag-grid .ag-cell.boolean-cell .ag-cell-wrapper {
    width: auto;
    justify-content: center;
}

.local-ag-grid .ag-cell.boolean-cell .ag-checkbox-input-wrapper {
    font-size: 20px;
    cursor: pointer;
}

.local-ag-grid .ag-cell.boolean-cell .ag-checkbox-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Formula input with field name autocomplete */
.formula-input-wrapper { position: relative; }
.formula-editor { overflow-x: auto; overflow-y: hidden; white-space: nowrap; cursor: text; min-height: calc(1.5em + 0.75rem + 2px); }
.formula-editor:empty::before { content: attr(data-placeholder); color: #999; pointer-events: none; }
.formula-editor:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); outline: none; }
.formula-tag { display: inline; background: #e8f0fe; color: #1a73e8; border-radius: 3px; padding: 1px 4px; font-weight: 500; cursor: default; }
.formula-autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: white; border: 1px solid #ccc; border-radius: 4px; max-height: 200px; overflow-y: auto; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.formula-autocomplete-item { padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.formula-autocomplete-item:hover, .formula-autocomplete-item.active { background: #007bff; color: white; }
.formula-autocomplete-item .field-id { opacity: 0.6; font-size: 0.85em; margin-left: 4px; }
.formula-autocomplete-item .field-source { opacity: 0.5; font-size: 0.85em; margin-left: 4px; font-style: italic; }
.formula-tag.sum-tag { background: #1a73e8; color: white; }
.formula-tag.asset-tag { background: #d6f0e0; color: #0b6b2e; }
.formula-tag.asset-tag.sum-tag { background: #0b6b2e; color: white; }
.slick-input.calculated-field { background: #f0f0f0; }

.time-tracking-button { cursor: pointer; transition: color 0.15s; }
.time-tracking-button:hover { color: #1e7e34; }
.time-tracking-button:focus { outline: none; box-shadow: none; }
.time-tracking-button.tt-running { color: #dc3545; }
.time-tracking-button.tt-running:hover { color: #bd2130; }
.time-tracking-button.tt-running .fa-stop { animation: tt-pulse 1.5s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.color-field-group .color-clear-btn { padding: 0.25rem 0.5rem; }
/* Keep AG Grid popup editors above other modal content (time-entry tab, large text, tag pickers) */
.modal .ag-popup-child,
.modal .ag-popup-editor {
    z-index: 2060 !important;
}

/* Transcriptions tab — matches Files tab styling */
.transcriptions-container {
    position: relative;
    transition: all 0.3s ease;
}
.transcriptions-container.drag-over {
    background-color: rgba(76, 175, 80, 0.08);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
    transform: scale(1.01);
}
.transcriptions-container.drag-over .transcription-drop-zone i {
    color: #4CAF50;
    animation: pulse 1s infinite;
}
.transcription-drop-zone {
    position: relative;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #666;
    background-color: transparent;
    border-radius: 8px;
    margin: 5px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
    cursor: pointer;
    border: none;
}
.transcription-drop-zone i {
    font-size: 64px;
    margin-bottom: 15px;
    color: #999;
    transition: all 0.3s ease;
}
.transcription-text-panel {
    border: 1px solid #dee2e6;
    border-radius: 4px;
}
.transcription-text-panel .card-header {
    background-color: #f8f9fa;
}
.audio-player-panel {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 8px 12px;
}
/* Remove focus outline on transcription grid action buttons */
.transcriptions-container .action-button:focus {
    outline: none;
    box-shadow: none;
}
.transcriptions-container .ag-cell:focus,
.transcriptions-container .ag-cell-focus {
    border: none !important;
    outline: none !important;
}
/* Inline audio progress bar in grid row */
.transcription-audio-bar {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
}
.transcription-audio-bar .progress-fill {
    height: 100%;
    background: #18BC9C;
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Send Email Modal */
.email-template-preview-modal .modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}
.email-template-preview-modal .modal-title {
    font-size: 1.1rem;
    font-weight: normal;
}
.email-template-preview-modal .modal-body {
    padding: 1rem;
}
.email-template-preview-modal .modal-body label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 0.25rem;
}
.email-template-preview-modal .modal-body .form-control {
    font-size: 0.9rem;
}
.email-template-preview-modal .modal-body .form-check-label {
    font-weight: 400;
    font-size: 0.85rem;
}
.email-template-preview-modal .modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.6rem 1rem;
}
.email-template-preview-modal .modal-dialog {
    max-width: 500px;
}
.email-template-preview-modal .row {
    margin-bottom: 0.25rem;
}

/* Row Files (per-row gallery, modeled on design-gallery) */
.row-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 2px;
    align-items: center;
}
.row-gallery-thumb {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
    cursor: pointer;
}
.row-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.row-gallery-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: rgba(0,0,0,0.45);
}
.row-gallery-menu {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
}
.row-gallery-thumb:hover .row-gallery-menu {
    opacity: 1;
}
.row-gallery-add {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 2px dashed rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: rgba(0,0,0,0.35);
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    background: transparent;
}
.row-gallery-add:hover {
    border-color: rgb(0, 127, 255);
    color: rgb(0, 127, 255);
}
.row-gallery-add-menu {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.5);
    border: none;
    cursor: pointer;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.row-gallery-add:hover .row-gallery-add-menu {
    opacity: 1;
}
.row-gallery-add-menu:hover {
    background: rgba(0,0,0,0.2);
    color: rgba(0,0,0,0.8);
}
.row-gallery-add.drag-over {
    border-color: rgb(0, 127, 255);
    background-color: rgba(0, 127, 255, 0.08);
    color: rgb(0, 127, 255);
}
.row-gallery-add.disabled {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}
.row-gallery-grid.readonly .row-gallery-menu,
.row-gallery-grid.readonly .row-gallery-add {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Sticky group rows: keep the (coloured) group value visible ABOVE    */
/* the data rows while scrolling. Without this the absolutely-          */
/* positioned data rows in .ag-center-cols-container paint OVER the     */
/* sticky group header, so the group value visually disappears under    */
/* the rows on scroll. Applies to BOTH the table grid (#myGrid /        */
/* .ag-theme-*) and the local inline grid (.local-ag-grid).             */
/* ------------------------------------------------------------------ */
.ag-root-wrapper .ag-sticky-top,
.ag-root-wrapper .ag-sticky-top-container,
.ag-root-wrapper .ag-sticky-top-full-width-container {
    z-index: 3 !important;
    /* Opaque background so rows scrolling underneath don't bleed through */
    background-color: var(--ag-background-color, #fff);
}

/* The sticky group ROW itself sits above the scrolling data rows */
.ag-root-wrapper .ag-sticky-top .ag-row,
.ag-root-wrapper .ag-sticky-top-container .ag-row,
.ag-root-wrapper .ag-sticky-top-full-width-container .ag-row,
.ag-root-wrapper .ag-row.ag-row-group.ag-sticky-row {
    z-index: 4 !important;
    background-color: var(--ag-background-color, #fff);
}

/* Preserve the coloured group pill inside the sticky group row */
.ag-root-wrapper .ag-sticky-top .colored-ag-cell-content-container,
.ag-root-wrapper .ag-sticky-top-full-width-container .colored-ag-cell-content-container {
    position: relative;
    z-index: 5;
}

/* Hover-capable (pointer) devices: move the standalone header actions (camera,
   QR scan) out of the form-header and into the ellipsis menu; keep them as
   standalone header/floating buttons on touch devices. */
@media (hover: hover) {
    .hover-hide { display: none !important; }
    /* The matching ellipsis items and their dividers are breakpoint-hidden on
       md+ (or fully hidden with d-none); force them back on for hover-capable
       devices so the action lives in the menu there instead of the header. */
    .hover-show { display: block !important; }
}