/* responsive.css */
@media (max-width: 767.98px) {
    .optional-md {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .optional-lg {
        display: none;
    }
}
@media (max-width: 1199.98px) {
    .optional-xl {
        display: none;
    }
}
@media (max-width: 1399.98px) {
    .optional-xxl {
        display: none;
    }
}

/* form.css */
/* Aligns checkboxes when using columned layout */
.form-columned-check {
    padding-left: 2.25rem;
    margin-bottom: 0.5rem;
}

.form-row {
    row-gap: 1rem;
    margin-bottom: 1rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

.field-group-header {
    display: flex;
    align-items: center;
}

.field-group-header .form-label {
    margin-right: 1rem;
}

.field-group-header .form-check-input {
    margin: 0 0.35rem 0.5rem 0;
    vertical-align: middle;
}

.field-group-header .form-check-label {
    margin-bottom: 0.5rem;
}

.mnemonic { text-decoration: none; }
.show-mnemonics .mnemonic { text-decoration: underline; }

/* dialog.css */
.dialog-spinner {
    width: 1rem;
    height: 1rem;
    margin-right: auto;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dialog-spin 0.75s linear infinite;
}

@keyframes dialog-spin {
    to { transform: rotate(360deg); }
}

.modal-footer:empty {
    display: none;
}

/* list.css */
.list-container {
    --list-accent-rgb: var(--bs-primary-rgb);
}

/* Selection */
.list-container .selected {
    background-color: var(--bs-tertiary-bg);
    color: rgb(var(--list-accent-rgb));
}

/* Drag and drop */
.list-container.dragging {
    cursor: grabbing;
}

.list-container .dragging {
    opacity: 0.6;
}

.list-container .drop-zone-above {
    background: radial-gradient(ellipse 70% 8px at center top, rgba(var(--list-accent-rgb), 0.6), transparent 80%);
}

.list-container .drop-zone-below {
    background: radial-gradient(ellipse 70% 8px at center bottom, rgba(var(--list-accent-rgb), 0.6), transparent 80%);
}

.list-container .dragging.drop-zone-above {
    background: radial-gradient(ellipse 70% 8px at center top, rgb(var(--list-accent-rgb)), transparent 80%);
}

.list-container .dragging.drop-zone-below {
    background: radial-gradient(ellipse 70% 8px at center bottom, rgb(var(--list-accent-rgb)), transparent 80%);
}

@keyframes record-changed {
    3% {
        background: var(--bs-warning);
        color: rgb(0, 0, 0);
    }
}

.record-changed {
    animation: record-changed 2s;
}

/* grid.css */
.grid {
    display: grid;
    overflow: auto;

    --gridline-color: rgba(128, 128, 128, 0.3);
    --border-color: rgba(128, 128, 128, 0.5);
    --background-rgb: var(--bs-body-bg-rgb);
    --overlay-opacity: 0.9;

    --column-width: 9rem;
    --row-height: 3rem;

    --header-height: calc(var(--x-axis-height, 0px));
    --sidebar-width: calc(var(--y-axis-width, 0px));

    --header-body-height: calc(var(--header-rows, 0) * var(--row-height) + var(--header-padding, 0px));
    --sidebar-body-width: calc(var(--sidebar-columns, 0) * var(--column-width) + var(--sidebar-padding, 0px));

    grid-template-columns:
        var(--sidebar-width)
        var(--sidebar-body-width)
        var(--sidebar-margin, 0px)
        calc(var(--columns) * var(--column-width));
    grid-template-rows:
        var(--header-height)
        var(--header-body-height)
        var(--header-margin, 0px)
        calc(var(--rows) * var(--row-height));
}

.grid-corner {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    background: rgba(var(--background-rgb), 1);
}

.grid-header-gap {
    grid-row: 1 / 3;
    grid-column: 3;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}
.grid-header {
    grid-row: 1;
    grid-column: 4;
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}
.grid-header-body {
    grid-row: 2;
    grid-column: 4;
    position: sticky;
    top: var(--header-height);
    z-index: 3;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}

.grid-sidebar-gap {
    grid-row: 3;
    grid-column: 1 / 3;
    position: sticky;
    left: 0;
    z-index: 2;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}
.grid-sidebar {
    grid-row: 4;
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}
.grid-sidebar-body {
    grid-row: 4;
    grid-column: 2;
    position: sticky;
    left: var(--sidebar-width);
    z-index: 3;
    background: rgba(var(--background-rgb), var(--overlay-opacity));
}

.grid-body {
    grid-row: 4;
    grid-column: 4;
    position: relative;
}

/* Gridlines — pseudo-elements so they combine independently
   and leave the body's own background free for consumer use */

.grid-header.vertical-lines::after,
.grid-header-body.vertical-lines::after,
.grid-header-body.horizontal-lines::before,
.grid-sidebar.horizontal-lines::before,
.grid-sidebar-body.horizontal-lines::before,
.grid-sidebar-body.vertical-lines::after,
.grid-body.horizontal-lines::before,
.grid-body.vertical-lines::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.grid-sidebar.horizontal-lines::before,
.grid-header-body.horizontal-lines::before,
.grid-sidebar-body.horizontal-lines::before,
.grid-body.horizontal-lines::before {
    background: 
        linear-gradient(to bottom, var(--gridline-color) 1px, transparent 1px),
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent calc(var(--row-height) - 1px),
            var(--gridline-color) calc(var(--row-height) - 1px),
            var(--gridline-color) var(--row-height)
        );
}
.grid-body.horizontal-lines::before {
    left: calc(-1 * var(--sidebar-margin, 0px));
}

.grid-header.vertical-lines::after,
.grid-sidebar-body.vertical-lines::after,
.grid-header-body.vertical-lines::after,
.grid-body.vertical-lines::after {
    background: 
        linear-gradient(to right, var(--gridline-color) 1px, transparent 1px),
        repeating-linear-gradient(
            to right,
            transparent 0px,
            transparent calc(var(--column-width) - 1px),
            var(--gridline-color) calc(var(--column-width) - 1px),
            var(--gridline-color) var(--column-width)
        );
}

.grid-body.vertical-lines::after {
    top: calc(-1 * var(--header-margin, 0px));
}

/* Hides gridlines when there are no header rows or sidebar columns */
.grid-header-body.horizontal-lines::before {
    opacity: min(var(--header-rows, 0), 1);
}
.grid-sidebar-body.vertical-lines::after {
    opacity: min(var(--sidebar-columns, 0), 1);
}

/* Sidebar and header borders */
.grid.sidebar-border .grid-corner,
.grid.sidebar-border .grid-sidebar-body,
.grid.sidebar-border .grid-sidebar-gap {
    border-right: 1px solid var(--border-color);
}
.grid.header-border .grid-corner,
.grid.header-border .grid-header-body,
.grid.header-border .grid-header-gap {
    border-bottom: 1px solid var(--border-color);
}

/* Positioning helpers */

.grid .grid-row    { 
    position: absolute; 
    margin: 0; 
    top: calc(var(--row) * var(--row-height)); 
}
.grid .grid-column { 
    position: absolute; 
    margin: 0; 
    left: calc(var(--column) * var(--column-width)); 
}
.grid .grid-rows { 
    --row-span: 1;
    height: calc(var(--row-span) * var(--row-height)); 
}
.grid .grid-columns { 
    --column-span: 1;
    width: calc(var(--column-span) * var(--column-width)); 
}
.grid .grid-item {
    position: absolute;
    margin: 0;
    --row-span: 1;
    --column-span: 1;
    top:  calc(var(--row) * var(--row-height));
    left: calc(var(--column) * var(--column-width));
    height: calc(var(--row-span) * var(--row-height)); 
    width: calc(var(--column-span) * var(--column-width)); 
}
.grid .grid-row,
.grid .grid-column,
.grid .grid-rows,
.grid .grid-columns,
.grid .grid-item {
    transition: top .2s, left .2s, width .2s, height .2s;
}

/* menu.css */
.dropdown-menu {
    z-index: 9999;
}
.context-menu {
    position: fixed;
}
.dropdown-item {
    --highlight-color-rgb: var(--bs-body-color-rgb);
    color: rgb(var(--highlight-color-rgb));
}
.dropdown-item-active, .dropdown-item:focus, .dropdown-item:hover {
    background-color: rgba(var(--highlight-color-rgb), 0.1);
}
.dropdown-item-activate  { font-weight: bold; }
.dropdown-item-action    { --highlight-color-rgb: var(--action-rgb, var(--bs-primary-rgb)); }
.dropdown-item-primary   { --highlight-color-rgb: var(--bs-primary-rgb);   }
.dropdown-item-secondary { --highlight-color-rgb: var(--bs-secondary-rgb); }
.dropdown-item-success   { --highlight-color-rgb: var(--bs-success-rgb);   }
.dropdown-item-danger    { --highlight-color-rgb: var(--bs-danger-rgb);    }
.dropdown-item-warning   { --highlight-color-rgb: var(--bs-warning-rgb);   }
.dropdown-item-info      { --highlight-color-rgb: var(--bs-info-rgb);      }

.has-marks .dropdown-item {
    padding-left: 2rem;
}
.has-marks .dropdown-item-checked::before {
    position: absolute;
    left: 0.75rem;
}
.has-marks .dropdown-item-checked[data-mark="checkmark"]::before { content: "✓"; }
.has-marks .dropdown-item-checked[data-mark="bullet"]::before { content: "•"; }

.dropdown-item.with-submenu::after {
    content: "›";
    float: right;
    margin-left: 0.5rem;
    font-size: 1.7rem;
    height: 1rem;
    margin-top: -0.7rem;
    opacity: 0.8;
}
.dropdown-item-hidden {
    display: none;
}
.dropdown-item-shortcut {
    float: right;
    padding-left: 2rem;
    opacity: .6;
}
html[data-platform="mac"] .dropdown-item-shortcut {
    letter-spacing: .25em;
}

/* handler.css */
.records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.records-control {
    display: flex;
    gap: 0.5em;
    flex: 0 1 350px;
    justify-content: flex-end;
}
.records-control .btn {
    white-space: nowrap
}
.records.navigable tbody tr {
    user-select: none;
    cursor: pointer;
    transition: opacity 1s ease-in-out;
}
.records [data-state="changing"] {
    opacity: 0.3;
    pointer-events: none;
}
.toaster-container {
    --toaster-bg-opacity: 0.85;
    --margin: 1rem;
    position: fixed;
    top: var(--margin);
    right: var(--margin);
    z-index: 1090;
}
.toaster-container.top-left {
    top: var(--margin);
    left: var(--margin);
    right: auto;
    bottom: auto;
}
.toaster-container.top-right {
    top: var(--margin);
    right: var(--margin);
    left: auto;
    bottom: auto;
}
.toaster-container.bottom-left {
    bottom: var(--margin);
    left: var(--margin);
    top: auto;
    right: auto;
}
.toaster-container.bottom-right {
    bottom: var(--margin);
    right: var(--margin);
    top: auto;
    left: auto;
}
[data-bs-theme="dark"] .toaster-container {
    --toaster-bg-opacity: 0.6;
}
.toast-body {
    display: flex;
    align-items: start;
    gap: .5rem;
}
.toast-body .btn-close {
    flex-shrink: 0;
    margin-left: auto;
}
.toast-success {
    background-color: rgba(var(--bs-success-rgb), var(--toaster-bg-opacity));
    color: white;
}
.toast-danger {
    background-color: rgba(var(--bs-danger-rgb), var(--toaster-bg-opacity));
    color: white;
}
.toast-secondary {
    background-color: rgba(var(--bs-secondary-rgb), var(--toaster-bg-opacity));
    color: white;
}
.settings-group {
    display: flex;
    gap: .5rem;
    padding: .5rem;
}
.settings-group .input-group {
    flex: 1 1 0;
}