/* ============================================
   OP Theme Variables
   ============================================ */

:root {
    accent-color: var(--opdms-primary);

    /* Primary brand colors - defaults match Bootstrap Blue theme.
       Overridden at runtime by ThemeService when the user picks a
       different theme or custom colors. */
    --opdms-primary: #0d6efd;
    --opdms-secondary: #6c757d;
    --opdms-accent: #198754;
    --opdms-warning: #ffc107;

    /* RGB versions for rgba() usage */
    --opdms-primary-rgb: 13, 110, 253;
    --opdms-secondary-rgb: 108, 117, 125;
    --opdms-accent-rgb: 25, 135, 84;
    --opdms-warning-rgb: 255, 193, 7;

    /* Color variations */
    --opdms-primary-light: #3d8bfd;
    --opdms-primary-dark: #0a58ca;

    /* Light mode surface colors */
    --opdms-bg: #ffffff;
    --opdms-bg-secondary: #f8f9fa;
    --opdms-surface: #ffffff;
    --opdms-surface-secondary: #f8f9fa;
    --opdms-text: #212529;
    --opdms-text-secondary: #6c757d;
    --opdms-border: #dee2e6;

    /* Component-specific colors */
    --opdms-card-bg: #ffffff;
    --opdms-modal-bg: #ffffff;
    --opdms-dropdown-bg: #ffffff;
    --opdms-input-bg: #ffffff;
    --opdms-sidebar-bg: #f8f9fa;
    --opdms-navbar-bg: var(--bs-light, #f8f9fa);

    /* Shadow for light mode */
    --opdms-shadow: rgba(0, 0, 0, 0.1);
    --opdms-shadow-lg: rgba(0, 0, 0, 0.15);
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
    /* Dark mode surface colors */
    --opdms-bg: #212529;
    --opdms-bg-secondary: #2c3034;
    --opdms-surface: #343a40;
    --opdms-surface-secondary: #495057;
    --opdms-text: #f8f9fa;
    --opdms-text-secondary: #adb5bd;
    --opdms-border: #495057;

    /* Component-specific dark mode colors */
    --opdms-card-bg: #343a40;
    --opdms-modal-bg: #2c3034;
    --opdms-dropdown-bg: #343a40;
    --opdms-input-bg: #495057;
    --opdms-sidebar-bg: #2c3034;
    --opdms-navbar-bg: #212529;

    /* Shadow for dark mode */
    --opdms-shadow: rgba(0, 0, 0, 0.3);
    --opdms-shadow-lg: rgba(0, 0, 0, 0.4);

    /* Override Bootstrap's own CSS variables for dark mode */
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
    --bs-secondary-bg: #343a40;
    --bs-tertiary-bg: #2c3034;
    --bs-emphasis-color: #f8f9fa;
    --bs-border-color: #495057;
    --bs-list-group-bg: #343a40;
    --bs-list-group-border-color: #495057;
    --bs-list-group-color: #f8f9fa;
    --bs-list-group-action-hover-bg: #495057;
    --bs-card-bg: #343a40;
    --bs-card-border-color: #495057;
    --bs-card-cap-bg: #2c3034;
    --bs-modal-bg: #2c3034;
    --bs-modal-border-color: #495057;
}

/* Apply theme variables to common elements */
body {
    background-color: var(--opdms-bg);
    color: var(--opdms-text);
}

body.dark-mode {
    background-color: var(--opdms-bg);
    color: var(--opdms-text);
}

/* Dark mode specific adjustments — use !important to beat Bootstrap theme specificity */
[data-bs-theme="dark"] .card,
.dark-mode .card {
    background-color: var(--opdms-card-bg) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .modal-content,
.dark-mode .modal-content {
    background-color: var(--opdms-modal-bg) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .dropdown-menu,
.dark-mode .dropdown-menu {
    background-color: var(--opdms-dropdown-bg) !important;
    border-color: var(--opdms-border) !important;
}

[data-bs-theme="dark"] .dropdown-item,
.dark-mode .dropdown-item {
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--opdms-surface-secondary) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--opdms-input-bg) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .table,
.dark-mode .table {
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--opdms-surface-secondary) !important;
}

[data-bs-theme="dark"] .list-group-item,
.dark-mode .list-group-item {
    background-color: var(--opdms-surface) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .list-group-item.active,
.dark-mode .list-group-item.active {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

[data-bs-theme="dark"] .list-group-item-secondary,
.dark-mode .list-group-item-secondary {
    background-color: var(--opdms-surface-secondary) !important;
    color: var(--opdms-text) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link,
.dark-mode .nav-tabs .nav-link {
    color: var(--opdms-text-secondary) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--opdms-surface) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

/* Textarea and input in dark mode */
[data-bs-theme="dark"] textarea.form-control,
.dark-mode textarea.form-control {
    background-color: var(--opdms-input-bg) !important;
    border-color: var(--opdms-border) !important;
    color: var(--opdms-text) !important;
}

/* Bootstrap alert and badge overrides for dark mode */
[data-bs-theme="dark"] .badge,
.dark-mode .badge {
    color: #fff !important;
}

/* Smooth transition for theme changes */
body,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.table,
.list-group-item,
.nav-tabs .nav-link {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* ============================================
   Apply Atlas Theme Colors to Bootstrap Components
   ============================================ */

/* Primary buttons */
/* OPDatePicker: field and calendar button stay on one line. Inline like the Telerik pickers it replaces,
   so date ranges sit on one line ("From [date] To [date]"); forms that want it full width pass Width="100%". */
/* One class only, so a page's own width class (.css-DateInput) can still size it. */
.op-datepicker {
    display: inline-flex;
    flex-wrap: nowrap;
    width: auto;
    vertical-align: middle;
}
.op-datepicker > .form-control {
    min-width: 7.5em;
}

/* A money box: the currency symbol drawn inside it on the left, muted, while the number keeps its
   own alignment. Wrap the input: <div class="op-money" data-symbol="$"><input class="form-control"></div>.
   Drawn, not typed into the value, so the box still holds a plain number for the number input and the
   parsing behind it. */
.op-money {
    position: relative;
    display: block;
    width: 100%;
}
.op-money::before {
    content: attr(data-symbol);
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--opdms-muted);
    font-size: 0.85em;
    pointer-events: none;
    z-index: 1;
}
.op-money > .form-control {
    padding-left: 1.4em;
}

/* A button placed straight in a table cell (Razor renders <table><tr><td><button>, no <tbody>) is
   matched by Bootstrap's ".table > :not(caption) > * > *" and gets the table's text colour, which
   outranks .btn: dark text on a primary button. Give buttons in tables their own colours back. */
.table .btn {
    color: var(--bs-btn-color);
}
.table .btn:hover {
    color: var(--bs-btn-hover-color);
}
.table .btn:active,
.table .btn.active,
.table .btn.show {
    color: var(--bs-btn-active-color);
}

.btn-primary {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--opdms-primary-dark) !important;
    border-color: var(--opdms-primary-dark) !important;
    filter: brightness(0.9);
}

.btn-outline-primary {
    color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

/* Selected toggle state (btn-check radios/checkboxes in a btn-group). Without
   this, a checked outline-primary keeps the base blue text on the Bootstrap
   active-blue background (unreadable) and ignores the theme palette. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.k-selected {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

/* Secondary buttons */
.btn-secondary {
    background-color: var(--opdms-secondary) !important;
    border-color: var(--opdms-secondary) !important;
    color: var(--opdms-on-primary) !important;
}

.btn-outline-secondary {
    color: var(--opdms-text) !important;
    border-color: var(--opdms-secondary) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--opdms-secondary) !important;
    color: var(--opdms-on-primary) !important;
    border-color: var(--opdms-secondary) !important;
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.k-selected {
    background-color: var(--opdms-secondary) !important;
    color: var(--opdms-on-primary) !important;
    border-color: var(--opdms-secondary) !important;
}

/* Link buttons */
.btn-link {
    color: var(--opdms-primary) !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--opdms-primary-dark) !important;
    filter: brightness(0.8);
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--opdms-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--opdms-primary-dark);
    filter: brightness(0.8);
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--opdms-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--opdms-primary-rgb), 0.25) !important;
}

/* Checkboxes and radios */
.form-check-input:checked {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--opdms-primary) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--opdms-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--opdms-secondary) !important;
}

/* Pagination */
.page-link {
    color: var(--opdms-primary);
}

.page-item.active .page-link {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

/* Nav links */
.nav-link {
    color: var(--opdms-primary) !important;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--opdms-primary-dark) !important;
    filter: brightness(0.8);
}

/* Nav pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus,
.nav-pills .show > .nav-link:hover,
.nav-pills .show > .nav-link:focus {
    color: var(--opdms-on-primary) !important;
}

/* Spinners */
.spinner-border.text-primary {
    color: var(--opdms-primary) !important;
}

/* Success buttons */
.btn-success {
    background-color: var(--opdms-accent) !important;
    border-color: var(--opdms-accent) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--opdms-accent) !important;
    border-color: var(--opdms-accent) !important;
    filter: brightness(0.9);
}

.btn-outline-success {
    color: var(--opdms-accent) !important;
    border-color: var(--opdms-accent) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--opdms-accent) !important;
    border-color: var(--opdms-accent) !important;
    color: var(--opdms-on-primary) !important;
}

/* Warning buttons */
.btn-warning {
    background-color: var(--opdms-warning) !important;
    border-color: var(--opdms-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: var(--opdms-warning) !important;
    border-color: var(--opdms-warning) !important;
    filter: brightness(0.9);
}

.btn-outline-warning {
    color: var(--opdms-warning) !important;
    border-color: var(--opdms-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: var(--opdms-warning) !important;
    border-color: var(--opdms-warning) !important;
    color: var(--opdms-text) !important;
}

/* Info buttons */
.btn-info {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

.btn-outline-info {
    color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

/* Text utilities */
.text-primary {
    color: var(--opdms-primary) !important;
}

.text-secondary {
    color: var(--opdms-secondary) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--opdms-primary) !important;
}

.border-secondary {
    border-color: var(--opdms-secondary) !important;
}

/* List group active */
.list-group-item.active {
    background-color: var(--opdms-primary) !important;
    border-color: var(--opdms-primary) !important;
}

/* Badges */
.badge.bg-success {
    background-color: var(--opdms-accent) !important;
}

/* Painted with the primary color, so its text is too: many of these still say text-dark, from when info was a light blue. */
.badge.bg-info {
    background-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

.badge.bg-warning {
    background-color: var(--opdms-warning) !important;
}

/* Dropdown items */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--opdms-primary) !important;
    color: var(--opdms-on-primary) !important;
}

/* Alerts */
.alert-primary {
    background-color: rgba(var(--opdms-primary-rgb), 0.15) !important;
    border-color: rgba(var(--opdms-primary-rgb), 0.3) !important;
    color: var(--opdms-primary) !important;
}

.alert-success {
    background-color: rgba(var(--opdms-accent-rgb), 0.15) !important;
    border-color: rgba(var(--opdms-accent-rgb), 0.3) !important;
    color: var(--opdms-accent) !important;
}

/* Accordion */
.accordion-button:not(.collapsed) {
    color: var(--opdms-primary) !important;
    background-color: rgba(var(--opdms-primary-rgb), 0.1) !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--opdms-primary-rgb), 0.25) !important;
}

/* Form range slider */
.form-range::-webkit-slider-thumb {
    background-color: var(--opdms-primary) !important;
}

.form-range::-moz-range-thumb {
    background-color: var(--opdms-primary) !important;
}

/* Breadcrumbs */
.breadcrumb-item a {
    color: var(--opdms-primary);
}

.breadcrumb-item a:hover {
    color: var(--opdms-primary-dark);
}

/* ============================================
   End Atlas Theme Variables
   ============================================ */

/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(34, 34, 34, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    height: 100%;
}

app {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    height: calc(100% - 1px);
    min-height: 500px;
    flex: 1;
    overflow: hidden;
}

    .main .top-row {
        background-color: var(--opdms-bg-secondary);
        border-bottom: 1px solid var(--opdms-border);
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 0.5rem;
        }

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* look-exempt: Blazor template sidebar, hidden (display: none) */
.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    display: none;
}

    /* look-exempt: hidden template sidebar */ .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        /* look-exempt: hidden template sidebar */ .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            /* look-exempt: hidden template sidebar */ .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: var(--opdms-on-primary);
            }

            /* look-exempt: hidden template sidebar */ .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: var(--opdms-on-primary);
            }

.content {
    padding: 0px !important;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--opdms-success);
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    /* Above every modal in the app (OPWindow 50000, folder picker 49999,
       bridge dialog 44444). Lower than those, the bar renders UNDERNEATH
       them and a dead renderer just looks like a frozen page. */
    z-index: 999999;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem; 
    }

/*@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}*/

@media (min-width: 768px) {
    app {
        height: 100%;
        flex-direction: row;
    }

    /*.sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }*/

    .sidebar {
        width: 0px;
        height: 0px;
        display: none;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-right: 0px !important;
        /*padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;*/
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: none;
    }
}
/* look-exempt: black at 50% opacity also fades the label, so it is not the scrim token */
#mainLoadinOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

    #mainLoadinOverlay span {
        padding: 5px;
        border-radius: 5px;
        color: var(--opdms-text);
        background-color: var(--opdms-surface);
        position: relative;
        top: 50%;
    }

.my-reconnect-modal > div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3500;
    overflow: hidden;
    background-color: var(--opdms-surface);
    opacity: 0.9;
    text-align: center;
    font-weight: bold;
}

.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
    z-index: 3500;
}

.components-reconnect-show > .show {
    display: block;
    z-index: 3500;
}

.components-reconnect-failed > div {
    display: none;
    z-index: 3500;
}

.components-reconnect-failed > .failed {
    display: block;
    z-index: 3500;
}

.components-reconnect-refused > div {
    display: none;
    z-index: 3500;
}

.components-reconnect-refused > .refused {
    display: block;
    z-index: 3500;
}
.DialogFullScreenCss22 {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0px !important;
    margin: 0px !important;
    min-height: 400px;
    min-width: 300px;
    z-index: 3500;
}
.DialogFullScreenMinus10PercentCss {
    width: calc(100vw - 10%) !important;
    height: calc(100vh - 10%) !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
} 
.DialogFullScreenCss {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
}
.DialogMarginsScreenCss {
    width: 90% !important;
    height: 90% !important;
    max-width: 90% !important;
    max-height: 90% !important;
    padding: 0px !important;
    margin: 0px !important;
    min-height: 400px;
    min-width: 300px;
    z-index: 3500;
}
.DialogSmallerWithMarginsScreenCss {
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-height: 400px;
    min-width: 400px;
    z-index: 3500;
}
.DialogSmallerWithTopMarginsScreenCss {
    max-width: 90vw !important;
    max-height: 100vh !important;
    min-height: 400px;
    min-width: 400px;
    z-index: 3500;
    margin-top: 25px;
}
.DialogCombineFilesCss {
    max-width: 90vw !important;
    max-height: 100vh !important;
    min-height: 600px;
    min-width: 400px;
    z-index: 3500;
    margin: 0 auto;
}
.btn-cancel { 
    margin: 2px 2px 2px 2px;
}
.btn-save {
    padding: 4px 16px 4px 16px !important;
    margin: 2px 2px 2px 2px;
}
.e-dlg-header {
    width: calc(100% - 30px) !important;
}


.blazored-NewPickfolder-modal {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 400px;
    height: calc(100vh - 10px);
    background-color: var(--opdms-bg-secondary);
    border-radius: 5px;
    border: 1px solid var(--opdms-border);
    padding: 10px;
    z-index: 102;
    box-shadow: 0 1px 1px var(--opdms-shadow);
}

    .blazored-NewPickfolder-modal .blazored-modal-content {
        overflow: hidden;
        padding: 2px;
    }

    .blazored-NewPickfolder-modal .blazored-modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 0 0 0;
    }

.blazored-pickfolder-modal {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 400px;
    max-height: calc(100vh - 60px);
    background-color: var(--opdms-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--opdms-border);
    padding: 0.8rem;
    z-index: 102;
    box-shadow: 0 2px 2px var(--opdms-shadow-lg);
}

    .blazored-pickfolder-modal .blazored-modal-content {
        overflow-y: auto;
        padding: 5px;
    }

.blazored-bigger-modal {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 400px;
    max-height: calc(100vh - 60px);
    background-color: var(--opdms-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--opdms-border);
    padding: 0.8rem;
    z-index: 102;
    box-shadow: 0 2px 2px var(--opdms-shadow-lg);
}
.inlineBlkCls {
    display: inline-block;
}
.divContextDoc {
    padding: 3px 3px 3px 6px; 
}
/* ---------------------------------------------------------------------------
   Document pane header rows -- the three stacked bars above the document list:
   Cabinets, Folders (CabinetFolderSelector) and Documents (DocumentsToolbar).

   They're Bootstrap .input-groups with a fixed 106px bold label welded to the
   left, which gave three heavy grey blocks stacked down the pane and a run of
   square outline buttons on the right. These rules keep the structure (Telerik
   binds to it, and the equal label widths form a deliberate alignment column)
   but turn the label into a quiet uppercase micro-label and the buttons into
   ghost icons. CSS-only -- no markup depends on it.
   --------------------------------------------------------------------------- */
/* The row stays a Bootstrap .input-group in the markup (Telerik binds into it, and
   #dropDocumentsArea is a drag-drop target), but visually the controls are pulled
   apart: Bootstrap's -1px child overlap is cancelled and a gap put in its place, so
   the search field becomes its own pill and the actions become free-standing ghost
   icons instead of one welded segmented bar. */
.doc-pane-row {
    column-gap: 4px;
    row-gap: 4px;
    align-items: center;
}

    .doc-pane-row > * {
        margin-left: 0 !important;
    }

/* em, not rem, throughout this row.
   ThemeService applies the user's font size with `document.body.style.fontSize`
   (opdms.js:552). rem resolves against <html>, so anything sized in rem -- including
   Bootstrap's own .input-group-sm rules -- ignores that setting completely. em
   inherits from body and scales as the user expects. */
.doc-pane-row > .input-group-text {
    padding-left: 10px;
    background-color: transparent;
    border-color: transparent;
    font-size: 0.72em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--opdms-muted);
}

/* Bootstrap pins these at .875rem via .input-group-sm > .form-control / > .btn. */
.doc-pane-row > .form-control,
.doc-pane-row > .btn,
.doc-pane-row > .btn-group > .btn,
.doc-pane-row > div > .k-picker,
.doc-pane-row > div > .k-picker .k-input-inner {
    font-size: 0.92em !important;
}

/* Search field: standalone pill.
   !important is required. Bootstrap squares the corners of input-group children on
   whichever side has a neighbour, via
   `.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle)
   :not(.dropdown-menu):not(.form-floating)` -- five classes of specificity, which
   outranks anything sane. These inputs have the label on the left and buttons on the
   right, so without this BOTH sides get flattened. Same reason the .k-picker rule
   below and the .btn rules further down carry it. */
.doc-pane-row > .form-control {
    border-radius: 999px !important;
    border-color: var(--opdms-border);
    padding-left: 12px;
}

    .doc-pane-row > .form-control:focus {
        border-color: var(--opdms-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--opdms-primary) 16%, transparent);
    }

/* The Telerik cabinet picker is wrapped in a div, so it needs its own reach-through.
   Kendo's theme loads after site.css, hence !important -- same pattern as
   telerik-overrides.css. */
.doc-pane-row > div > .k-picker {
    border-radius: 999px !important;
    border-color: var(--opdms-border) !important;
}

/* Actions carry the same 1px border and pill radius as the search field, so the
   row reads as a set of matching detached controls.

   !important is load-bearing here, twice over:
   1. .btn-outline-secondary above sets `border-color: var(--opdms-secondary)
      !important` (#6c757d) -- markedly darker than the inputs' --bs-border-color.
   2. Bootstrap zeroes input-group child radii with
      `.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle)
      :not(.dropdown-menu):not(.form-floating)`, which is 5-class specificity and
      outranks anything reasonable here. */
.doc-pane-row > .btn,
.doc-pane-row > .btn-group > .btn {
    border: 1px solid var(--opdms-border) !important;
    background-color: transparent !important;
    color: var(--opdms-muted) !important;
    border-radius: 999px !important;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

/* Bootstrap sizes input-group children with a DIRECT-child selector
   (.input-group-sm > .btn), so buttons nested inside a .btn-group -- the Import
   split button -- are grandchildren and never get it, rendering full height next
   to their small siblings. Re-apply the small metrics explicitly. */
.doc-pane-row > .btn-group > .btn {
    padding-top: .25rem;
    padding-bottom: .25rem;
    line-height: 1.5;
}

    .doc-pane-row > .btn:hover,
    .doc-pane-row > .btn:focus,
    .doc-pane-row > .btn-group > .btn:hover,
    .doc-pane-row > .btn-group > .btn:focus {
        background-color: color-mix(in srgb, var(--opdms-primary) 10%, transparent) !important;
        color: var(--opdms-primary) !important;
        border-color: var(--opdms-primary) !important;
        box-shadow: none;
    }

/* Split button (Import + caret).
   The outline lives on the .btn-group, not on the two buttons -- with a border on
   each half they read as two adjacent pills no matter how the inner radii are
   zeroed, because each still paints its own outline. Children go borderless and
   sit flush inside the group's pill; the divider is an inset box-shadow on the
   caret, which can't double up with a neighbouring border and costs no layout.

   Note: no overflow:hidden on the group -- the .dropdown-menu is a descendant and
   would be clipped by it. */
.doc-pane-row > .btn-group {
    border: 1px solid var(--opdms-border);
    /* !important for the same Bootstrap input-group reason as .form-control above --
       the import group is followed by the filter button, so it is not :last-child and
       its right corners would otherwise be flattened. */
    border-radius: 999px !important;
    background-color: transparent;
    transition: border-color .12s ease;
}

.doc-pane-row > .btn-group > .btn {
    border: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

    .doc-pane-row > .btn-group > .btn:first-child {
        border-top-left-radius: 999px !important;
        border-bottom-left-radius: 999px !important;
        padding-left: 10px;
        padding-right: 7px;
    }

    /* :not(:first-child) matters -- the narrow-pane overflow menu is a .btn-group with
       a single button, which is both first and last child. Without this it would get a
       divider hairline down its left edge with nothing to divide. */
    .doc-pane-row > .btn-group > .btn:last-child {
        border-top-right-radius: 999px !important;
        border-bottom-right-radius: 999px !important;
        padding-right: 9px;
    }

    .doc-pane-row > .btn-group > .btn:last-child:not(:first-child) {
        box-shadow: inset 1px 0 0 var(--opdms-border);
        padding-left: 5px;
    }

/* Hover lights the whole control, not just the half under the cursor. */
.doc-pane-row > .btn-group:hover {
    border-color: var(--opdms-primary);
}

    .doc-pane-row > .btn-group:hover > .btn {
        background-color: color-mix(in srgb, var(--opdms-primary) 10%, transparent) !important;
        color: var(--opdms-primary) !important;
    }

    .doc-pane-row > .btn-group:hover > .btn:last-child:not(:first-child) {
        box-shadow: inset 1px 0 0 color-mix(in srgb, var(--opdms-primary) 45%, transparent);
    }

/* Document list rows (class chosen in FileViewModel.cs:60-85).
   IMPORTANT: padding and borders here must not change the row's BOX HEIGHT --
   DocumentListComponent renders these inside <Virtualize ItemSize="..."> and a
   height mismatch makes the scroll position oscillate. The selected/search-hit
   accent is therefore an inset box-shadow, which paints inside the existing box
   instead of adding a border. */
.divContextAttchedDocs {
    padding: 5px 3px 5px 6px;
    border-bottom: color-mix(in srgb, var(--opdms-border) 55%, transparent) solid 1px;
    transition: background-color .1s ease;
}
.divContextAttchedDocs:hover,
.divContextAttchedDocsSearchHit:hover {
    background-color: color-mix(in srgb, var(--opdms-primary) 7%, transparent);
}
/* Was a solid --opdms-primary fill with color:var(--opdms-on-primary), which left the row's
   warning-yellow and danger-red action icons unreadable (they carry their own
   inline colors and never inherited the white). A tint keeps them legible. */
.divContextAttchedDocsActive {
    padding: 5px 3px 5px 6px;
    border-bottom: color-mix(in srgb, var(--opdms-border) 55%, transparent) solid 1px;
    background-color: color-mix(in srgb, var(--opdms-primary) 13%, transparent);
    box-shadow: inset 3px 0 0 var(--opdms-primary);
    font-weight: 600;
}
.divContextAttchedDocsSearchHit {
    padding: 5px 3px 5px 6px;
    border-bottom: color-mix(in srgb, var(--opdms-border) 55%, transparent) solid 1px;
    background-color: color-mix(in srgb, var(--opdms-warning) 15%, transparent);
    transition: background-color .1s ease;
}
.divContextAttchedDocsSearchHitAndActive {
    padding: 5px 3px 5px 6px;
    border-bottom: color-mix(in srgb, var(--opdms-border) 55%, transparent) solid 1px;
    background-color: color-mix(in srgb, var(--opdms-accent) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--opdms-accent);
    font-weight: 600;
}
.docsWthAttDivCls {
    overflow: hidden;
    /*height: calc(100vh - 185px);*/
    height: 550px;
    min-height: 250px;
    min-width: 250px;
}
.blazored-fullscreen-modal {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 10px);
    min-height: 400px;
    height: calc(100vh - 10px);
    background-color: var(--opdms-bg-secondary);
    border-radius: 5px;
    border: 1px solid var(--opdms-border);
    padding: 0.1rem;
    z-index: 102;
    box-shadow: 0 2px 2px var(--opdms-shadow-lg);
}

    .blazored-fullscreen-modal .blazored-modal-content {
        overflow-y: auto;
        padding: 5px;
    }

.blazored-newDocument-modal {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    height: calc(100vh - 60px);
    background-color: var(--opdms-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--opdms-border);
    padding: 0.8rem;
    z-index: 202;
    box-shadow: 0 2px 2px var(--opdms-shadow-lg);
}

@media only screen and (min-width: 768px) {
    .blazored-newDocument-modal {
        display: flex;
        flex-direction: column;
        min-width: 725px;
        height: calc(100vh - 60px);
        background-color: var(--opdms-bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--opdms-border);
        padding: 0.8rem;
        z-index: 202;
        box-shadow: 0 2px 2px var(--opdms-shadow-lg);
    }
}
.blazored-newDocument-modal .blazored-modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;
}

    .blazored-fullscreen2-modal {
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-height: 400px;
        height: 100vh;
        background-color: var(--opdms-bg-secondary);
        padding: 1rem;
        z-index: 102;
    }

        .blazored-fullscreen2-modal .blazored-modal-content {
            overflow-x: hidden;
            overflow-y: auto;
            padding: 5px;
            height: calc(100vh - 101px);
        }

    .blazored-FolderInfo-modal {
        display: flex;
        flex-direction: column;
        width: 95vw;
        height: calc(100vh - 75px);
        background-color: var(--opdms-bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--opdms-border);
        padding: 0.8rem;
        z-index: 102;
        box-shadow: 0 2px 2px var(--opdms-shadow-lg);
    }

        .blazored-FolderInfo-modal .blazored-modal-content {
            overflow-y: auto;
            padding: 5px;
        }

    .blazored-FolderInfo-wrapper {
        position: absolute;
        top: 30px;
    }

    .t-btn-sm {
        padding: .25rem .5rem !important;
        font-size: .76563rem !important;
        line-height: 1.5 !important;
        border-radius: .15rem !important;
    }

    .blazored-SendToUserOrGroup-modal {
        display: flex;
        flex-direction: column;
        min-width: 550px;
        min-height: 450px;
        max-height: calc(100vh - 60px);
        background-color: var(--opdms-bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--opdms-border);
        padding: 0.8rem;
        z-index: 102;
        box-shadow: 0 2px 2px var(--opdms-shadow-lg);
    }

        .blazored-SendToUserOrGroup-modal .blazored-modal-content {
            overflow-y: hidden;
            padding: 5px;
        }

    .blazored-SendToUserOrGroup-wrapper {
        position: absolute;
        top: 30px;
    }

.popupDialogMSG-windows {
    z-index: 44544;
    width: 500px;
    height: 300px;
}
.popup95x95Mx1280-windows {
    height: 95%;
    width: 95%;
    min-width: 400px;
    max-width: 1280px;
    z-index: 44444;
}

.blazored-fileImport-modal {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 1280px;
    height: 95vh;
    min-height: 400px;
    background-color: var(--opdms-bg-secondary);
    padding: 1rem;
    z-index: 102;
}

    .blazored-fileImport-modal .blazored-modal-content {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 5px;
        height: calc(100vh - 101px);
    }

.tel-win-50-50 {
    z-index: 44544;
    min-width: 400px;
    min-height: 400px;
    width: 50vw;
    height: 50vh;
}

.e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

.e-control, .e-css {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
    border: none !important;
}
 
/* OPSplitter (Comps/OPSplitter.razor + js/dyn/opSplitter.js): the app's own splitter, replacing TelerikSplitter. The bar's
   thickness is each person's Splitter bar thickness setting (--op-splitbar-size, opdms.js applySplitterSize; 6px default). The first pane is sized by flex-basis (set
   by the script as a percentage); the second takes the rest. Panes clip: whatever they hold scrolls itself. */
.op-splitter {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.op-splitter-h { flex-direction: row; }
.op-splitter-v { flex-direction: column; }
.op-splitter-h.op-splitter-reverse { flex-direction: row-reverse; }
.op-splitter-v.op-splitter-reverse { flex-direction: column-reverse; }

.op-split-pane {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.op-split-first { flex: 0 0 50%; }
.op-split-second { flex: 1 1 0; }
.op-splitter-single > .op-split-first { flex: 1 1 auto; }
/* A pane that scrolls its own content, as TelerikSplitter panes did by default (Scrollable). */
.op-split-pane.op-split-scroll { overflow: auto; }
/* A collapsed pane stays rendered (display: none keeps its components alive); the other takes the room. */
.op-splitter-first-collapsed > .op-split-first,
.op-splitter-second-collapsed > .op-split-second,
.op-splitter-narrow > .op-split-second,
.op-splitter-first-collapsed > .op-split-bar,
.op-splitter-second-collapsed > .op-split-bar,
.op-splitter-narrow > .op-split-bar { display: none !important; }
.op-splitter-first-collapsed > .op-split-second,
.op-splitter-second-collapsed > .op-split-first,
.op-splitter-narrow > .op-split-first { flex: 1 1 auto !important; }

.op-split-bar {
    flex: 0 0 var(--op-splitbar-size, 6px);
    background-color: var(--opdms-border);
    transition: background-color .12s ease;
    touch-action: none;
    user-select: none;
    outline: none;
}
.op-splitter-h > .op-split-bar { cursor: col-resize; }
.op-splitter-v > .op-split-bar { cursor: row-resize; }
.op-split-bar:hover,
.op-split-bar:focus-visible,
.op-splitter-dragging > .op-split-bar {
    background-color: var(--opdms-primary);
}

/* While dragging: a transparent sheet over the whole page, so an iframe in a pane (the document viewer) cannot take the
   pointer, and the resize cursor holds everywhere. Created and removed by opSplitter.js. */
.op-split-cover {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: transparent;
}
.op-split-cover-h { cursor: col-resize; }
.op-split-cover-v { cursor: row-resize; }

/* ---- Top-layer Bootstrap dropdowns (js/dyn/opBsDropdown.js) ------------------------

   Applied by that module while a menu is promoted, removed when it closes. The UA
   stylesheet gives every [popover] its own position/inset/margin/border/padding;
   .dropdown-menu already supplies the border, padding and colours, so only the box
   geometry needs resetting here -- opBsDropdown.place() writes top/left/max-height
   inline on top of this.

   The z-index is for browsers without popover support (iOS 16), where the class is
   the whole fix: fixed positioning above OPWindow's 50000. It is inert on the
   top-layer path, since top-layer content is not ordered by z-index at all.
   Deliberately NOT written as `:not(:popover-open)` -- an unknown pseudo-class
   invalidates the whole selector in exactly the browsers that need the fallback. */
.dropdown-menu.op-bsdd-toplayer {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: 50002;
}

/* ---- Document label descriptions (Comps/LabelCaption.razor) -----------------------

   A label may carry an optional description shown right after its name:
   "Date - This is the signature date". The name has to stay the thing the eye lands
   on, so the description is dimmed rather than given a different colour -- opacity
   inherits whatever the surrounding label already is, which keeps it correct in both
   themes and inside the bold/underlined captions some panels use.

   `font-weight: normal` matters: several captions are rendered inside a bold label,
   and a bold explanation competes with the name it is explaining. */
.op-label-description {
    opacity: 0.65;
    font-weight: normal;
}

/* The required marker, which sits between the name and the description rather than at
   the end of the caption. Same red the filing panel used when this was written inline,
   so nothing changes visually except where it sits. */
.op-label-required {
    color: red;
    font-weight: bold;
}

/* The preset looks a description can be given (CommonFields.LabelDescriptionStyleEnum).
   Each one sits ON TOP of .op-label-description above and overrides only what it changes,
   so the base keeps owning the shared behaviour. Normal adds no class at all.

   Bold and Warning deliberately drop back to full opacity: their whole job is to pull the
   eye, which fading works against. Colours come from Bootstrap's theme variables with a
   literal fallback, so a tenant theme can move them. */
.op-label-description.op-label-description-italic {
    font-style: italic;
}

.op-label-description.op-label-description-bold {
    opacity: 1;
    font-weight: 600;
}

.op-label-description.op-label-description-muted {
    opacity: 0.4;
}

.op-label-description.op-label-description-warning {
    opacity: 1;
    font-weight: 600;
    color: var(--opdms-ink-warning);
}

/* ---- OPPasswordInput: password box with a show/hide eye ----------------------
   The eye sits inside the field rather than in a Bootstrap .input-group addon, so
   the control drops into an existing form without changing its layout or the
   field's rounded corners. Lives here rather than in a scoped .razor.css to sit with
   the other op- control styles (.op-label-description, .op-bsdd-toplayer). */
.op-password-field {
    position: relative;
}

.op-password-field > input {
    /* Room for the eye, so a long password does not run under it. */
    padding-right: 40px;
}

/* Edge and IE draw their own reveal control; hide it so there is only one eye. */
.op-password-field > input::-ms-reveal,
.op-password-field > input::-ms-clear {
    display: none;
}

.op-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--opdms-text-secondary);
    cursor: pointer;
    border-radius: 0 0.375rem 0.375rem 0;
}

.op-password-toggle:hover:not(:disabled) {
    color: var(--opdms-muted-strong);
}

.op-password-toggle:disabled {
    opacity: 0.5;
    cursor: default;
}

.op-password-toggle:focus-visible {
    outline: 2px solid var(--opdms-primary);
    outline-offset: -2px;
}

/* Every check box and radio: an empty one keeps a visible outline (Bootstrap's own is the faint
   border colour, which almost vanishes next to a ticked one). Ticked ones keep the primary colour. */
.form-check-input {
    border-color: var(--opdms-border-strong);
}

/* OPCheckBox: a lone checkbox next to its label (not inside .form-check), as the Telerik ones sat. */
.op-checkbox {
    margin-top: 0;
    margin-right: 0.35em;
    vertical-align: -0.15em;
}

/* ---- OPLabelValue: a label shown read-only in the folder / document info panels ----
   Name above, value below, both plain text. Sizes are in em so they follow the user's
   font-size setting (it sits on <body>; rem would ignore it). Tight on purpose: these
   panels list many labels and should show as many as fit without scrolling. */
.op-label-value {
    line-height: 1.3;
}
/* Name: small, semi-bold grey -- reads as a heading for the value under it. */
.op-label-value-caption {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--opdms-muted-strong);
    margin-bottom: 0.15em;
}
.op-label-value-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
}
/* Value: in a lightly shaded well, so it reads as the answer (like a field, but slimmer
   than an input and without one's border). */
.op-label-value-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.15em 0.5em;
    border-radius: var(--opdms-radius);
    background-color: var(--opdms-fill);
    color: var(--opdms-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
}
.op-label-value-empty {
    color: var(--opdms-muted);
}
/* The list items that hold them: padding in em too, and small. */
.op-label-value-list > .list-group-item {
    padding: 0.45em 0.6em;
}
/* A label whose click does something (LabelActions): pointer cursor and an outline on hover.
   No long-press callout on iOS, which would cover the label's own menu. */
.op-label-value-clickable {
    cursor: pointer;
}
.op-label-value-clickable:hover .op-label-value-text {
    box-shadow: inset 0 0 0 1px var(--opdms-border-strong);
}
.op-label-value {
    -webkit-touch-callout: none;
}
.op-label-value-extra {
    flex: 0 0 auto;
}

/* Flatbed scanner icon (Scan buttons on Documents, the Scan page and the AP queue): lid open, light
   falling on the glass. The light is what makes it read as a scanner -- without it the open lid looked like a stapler, and fa-scanner-image like a picture frame.
   Drawn as a mask so it takes the text color and sizes like a font glyph. */
.icon-flatbed-scanner {
    display: inline-block;
    width: 1.25em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 L15 3.5 L16.6 5.7 L5.6 13.5'/%3E%3Cpath d='M7 12.3 L15.2 6.5 L19 13.5 Z' fill='%23000' fill-opacity='.35' stroke='none'/%3E%3Crect x='2' y='13.5' width='20' height='6.5' rx='1.5'/%3E%3Cpath d='M5 17 H12'/%3E%3Ccircle cx='18.5' cy='16.8' r='0.8' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 L15 3.5 L16.6 5.7 L5.6 13.5'/%3E%3Cpath d='M7 12.3 L15.2 6.5 L19 13.5 Z' fill='%23000' fill-opacity='.35' stroke='none'/%3E%3Crect x='2' y='13.5' width='20' height='6.5' rx='1.5'/%3E%3Cpath d='M5 17 H12'/%3E%3Ccircle cx='18.5' cy='16.8' r='0.8' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A checked-out document (DocumentListComponent.razor): the whole row outlined, like a drop target, and a tag in its
   top-right corner naming who has it. Outline and tag paint inside the row, so its height (Virtualize) is unchanged.
   Comes before the drop-target rules, so dragging over a checked-out row still shows the drop outline. */
#divContainerForInnerDocsTbl [data-checked-out="1"] {
    position: relative;
    outline: 2px solid var(--opdms-danger);
    outline-offset: -2px;
}
.doc-checkout-tag {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 1;
    max-width: 60%;
    padding: 0 8px;
    border-radius: var(--opdms-radius);
    background-color: var(--opdms-danger);
    color: var(--opdms-on-primary);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* Dragging documents onto each other (js/dyn/opDocDrag.js). The card is the drag image: it's drawn off-screen for
   the browser to photograph. The row under the pointer is outlined (inside, since rows clip their overflow) and a tag
   above it says what the drop will do, or in red why it won't. */
.op-docdrag-card {
    position: fixed;
    top: -1000px;
    left: -1000px;
    max-width: 320px;
    padding: 8px 12px;
    border: 2px solid var(--opdms-primary);
    border-radius: var(--opdms-radius);
    background-color: var(--opdms-surface);
    color: var(--opdms-text);
    box-shadow: 0 4px 14px var(--opdms-shadow-lg);
    font-size: 0.9rem;
    line-height: 1.35;
    pointer-events: none;
}
.op-docdrag-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--opdms-primary);
}
.op-docdrag-name {
    margin-top: 2px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-docdrag-more,
.op-docdrag-hint {
    color: var(--opdms-muted);
    font-size: 0.8rem;
}
.op-docdrag-hint {
    margin-top: 4px;
}
#divContainerForInnerDocsTbl [data-drop="ok"] {
    outline: 2px solid var(--opdms-primary);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--opdms-primary) 18%, transparent);
}
#divContainerForInnerDocsTbl [data-drop="no"] {
    outline: 2px dashed var(--opdms-danger);
    outline-offset: -2px;
}
.op-docdrag-tag {
    position: fixed;
    z-index: 60000;
    max-width: 360px;
    padding: 2px 10px;
    border-radius: var(--opdms-radius);
    background-color: var(--opdms-primary);
    color: var(--opdms-on-primary);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px var(--opdms-shadow-lg);
}
.op-docdrag-tag-no {
    background-color: var(--opdms-danger);
}