:root {
    --settingsFontFamily: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
    --settingsbackgroundColor: #253038;
    --settingsFontColor: #ccc;

    --maxButtonHeight: 100px;
    --minButtonHeight: 26px;
    --buttonBorderWidth: 1px;
    --presetNameTextAlign: left;

    --cam1BorderColor: #4B8A08;
    --cam2BorderColor: #285eff;
    /*1320aa;*/
    --cam3BorderColor: #aa13a0;
    --cam4BorderColor: #aa1313;
    --cam5BorderColor: #cb8712;
    --cam6BorderColor: #b4b23a;
    --cam7BorderColor: #1a6b6b;
    --cam8BorderColor: #8b5a00;

    --cam1Color: #6eb522;
    --cam2Color: #5073ff;
    /*1320aa;*/
    --cam3Color: #f04ce5;
    --cam4Color: #e94141;
    --cam5Color: #f6ab29;
    --cam6Color: #e7de37;
    --cam7Color: #2aa8a8;
    --cam8Color: #c77d00;

    --backgroundColor: #34495a;
    --buttonBackgroundColor: #333333b6;
    --presetSavingColor: #f08d84;
    --presetHighlightingColor: #f0eb84;
    --presetSavingTextColor: white;

    --previewBackgroundColor: #005b115d;
    --previewBorderColor: #02c726;
    --liveBackgroundColor: #9a000067;
    --liveBorderColor: #cc0000;

    --unsavedChangesColor: #ff9500;
    --undoRedoDisabledColor: #666;

    --activeColor: #4CAF50;

}

html,
body {

    overscroll-behavior: none;
    margin-bottom: 0;
}

body {
    background-color: var(--backgroundColor);
    transition: all 0.2s ease-in-out;
    margin: 0;
}

@keyframes blinkBackground {

    0%,
    49.99% {
        background-color: var(--presetSavingColor);
        /*    background-color: var(--backgroundColor);			      */
    }

    50%,
    100% {
        background-color: var(--presetSavingColor);
    }
}

.saving-background {
    background-color: var(--presetSavingColor);
}

.highlighting-background {
    background-color: var(--presetHighlightingColor);
}


.loadingSpinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: opacity 0.2s ease-in-out;
    border-radius: 50%;
    outline: #00000054;
    outline-offset: 5px;

}

.loadingSpinner::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loadingSpinner.show {
    display: block;
    opacity: 1;
}

.loadingSpinner.hide {
    opacity: 0;
    display: none;
    pointer-events: none;
}

.hidden {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}


/* ATEM connection status indicator — shared by presetBoard and cuttingList */
.atem-status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 16px;
    background: rgba(128, 128, 128, 0.25);
    transition: background 0.3s;
    cursor: default;
}

.atem-status-indicator.connected {
    background: rgba(76, 175, 80, 0.35);
}

.atem-status-indicator.disconnected {
    background: rgba(204, 0, 0, 0.25);
}

/* Test für den Footer mit den Schaltflächen mehrerer csv Dateien */
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #1c1c1ce8 !important;
    height: auto;
    color: white;
    display: flex;
    align-items: center;
    /* <-- Vertikale Zentrierung */
    justify-content: left;
    gap: 20px;
    /* Abstand zwischen Dropdowns und Buttons */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
    z-index: 100;
    flex-wrap: wrap;
}

#footer h3 {
    margin: 10px 0;
    font-size: 1.2em;
    color: white;
}

#footer button {
    background-color: #333;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s ease;
}

#footer button.active {
    background-color: #0d6efd;
    /* z. B. blau */
    color: white;
    font-weight: bold;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

#footer select {
    background-color: #444;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}

#footer select:hover {
    background-color: #555;
}

#footer select:focus {
    outline: none;
    background-color: #666;
}


.preset-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    /* <-- wichtig für vertikale Ausrichtung */
}

#footer button:hover {
    background-color: #555;
}


#debubgPanel {
    display: flex;
}

#debugPanel input {
    width: 50px;
    box-sizing: border-box;
    height: fit-content;
    margin: 2px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#debugPanel label {
    display: block;
    height: fit-content;
}

/* Footer Ende */



/* ── Top bar (settingsBar) and secondary toolbar shared across pages ──── */

#pageHeader {
    position: sticky;
    top: 0;
    z-index: 1000;
}

#settingsBar {
    position: relative;
    min-height: 45px;
    max-height: 50px;
    overflow: visible;
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--settingsbackgroundColor);
    width: 100%;
    font-family: var(--settingsFontFamily);
    color: var(--settingsFontColor);
}

#settingsBar>div {
    display: flex;
    flex-wrap: nowrap;
    color: white;
    padding: 5px;
    align-items: center;
    gap: 6px;
}

#fileSettings {
    gap: 8px;
}

#settingsBar>div>label {
    text-wrap: nowrap;
}

#toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 8px 15px;
    background: #2a2a2a;
    border-bottom: 1px solid var(--borderColor);
    font-family: var(--settingsFontFamily);
    color: var(--settingsFontColor);
}

.toolbar-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-field-label {
    font-size: 13px;
    color: rgb(208, 208, 208);
    white-space: nowrap;
}

.toolbar-number-input {
    width: 42px;
    font-family: inherit;
    font-size: 14px;
    padding: 2px 4px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #3a3a3a;
    color: #eee;
}

.toolbar-display-range-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin: 0;
}

#settingsBar .toolbar-icon-btn,
#toolbar .toolbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 3px 10px;
    min-width: 34px;
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
}

.toolbar-icon-btn-lg {
    min-width: 48px;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 1;
}

#settingsBar .toolbar-icon-btn-lg,
#settingsBar .auto-zoom-trigger.toolbar-icon-btn-lg {
    min-width: 36px;
    padding: 3px 6px;
    font-size: 18px;
}

#settingsBar .toolbar-icon-btn-wide {
    min-width: 44px;
}

/* Checkboxes inside the top bar or toolbar are styled-as-buttons via the
   adjacent <label>; the raw checkbox is hidden. */
#settingsBar input[type=checkbox],
#toolbar input[type=checkbox] {
    display: none;
}

#settingsBar input[type=checkbox]+label,
#toolbar input[type=checkbox]+label {
    color: rgb(208, 208, 208);
}

#settingsBar input[type=checkbox]:checked+label,
#toolbar input[type=checkbox]:checked+label {
    color: rgb(255, 255, 255);
    font-style: normal;
    background-color: #0848a8;
}

.cutting-list-playback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    min-width: 0;
    flex: 1 1 320px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    line-height: 1.2;
    color: rgb(208, 208, 208);
    overflow: hidden;
}

.cutting-list-playback.is-waiting {
    color: #888;
}

.cl-playback-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #999;
    white-space: nowrap;
}

.cl-playback-value {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eee;
}

.cutting-list-playback.is-waiting .cl-playback-value {
    color: #888;
}

#clPlaybackInstruction {
    max-width: 280px;
}

.cl-playback-sep {
    color: #555;
    user-select: none;
}

.active-context-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 115px;
    max-width: 150px;
    flex-shrink: 0;
    align-self: center;
}

.active-context-line {
    font-size: 10px;
    line-height: 1.15;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-context-line:empty {
    display: none;
}

/* Combined tap / long-press action buttons — full settingsBar height, no wrapper box */
#settingsBar > .interaction-actions {
    padding: 0;
    gap: 4px;
    align-self: center;
    align-items: center;
    flex-shrink: 0;
    min-width: max-content;
}

.interaction-action-btn {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    font-size: 22px;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.interaction-action-btn .hold-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: rgba(232, 160, 32, 0.55);
    pointer-events: none;
    z-index: 0;
}

.interaction-action-btn.holding .hold-progress {
    height: 100%;
    transition: height linear;
}

.interaction-action-btn > :not(.hold-progress) {
    position: relative;
    z-index: 1;
}

.interaction-action-btn.tap-active {
    box-shadow: inset 0 4px 0 0 #4a9eff;
}

.interaction-action-btn.longpress-active {
    box-shadow: inset 0 -4px 0 0 #e8a020;
}

.interaction-action-btn.tap-active.longpress-active {
    box-shadow:
        inset 0 4px 0 0 #4a9eff,
        inset 0 -4px 0 0 #e8a020;
}

.interaction-action-btn.holding {
    background-color: #3d3d3d;
}

.auto-zoom-control {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.auto-zoom-toggle-input {
    display: none;
}

.auto-zoom-trigger[aria-expanded="true"] {
    background-color: #0848a8;
    border-color: #0848a8;
    color: #fff;
}

.auto-zoom-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #2a2a2a;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.auto-zoom-popover[hidden] {
    display: none !important;
}

.auto-zoom-auto-btn {
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--borderColor);
    border-radius: 4px;
    padding: 2px 10px;
    color: #ccc;
    line-height: 1.35;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.auto-zoom-auto-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.auto-zoom-control.auto-mode .auto-zoom-auto-btn {
    color: rgb(255, 255, 255);
    background-color: #0848a8;
    border-color: #0848a8;
}

.auto-zoom-slider-vertical {
    width: 32px;
    height: 120px;
    margin: 0;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
}

.auto-zoom-control.auto-mode .auto-zoom-slider-vertical {
    display: none;
}

#fileInput {
    display: none;
}

.customButton {
    background-color: #535353;
    border: 2px solid #2c2c2c;
    display: inline-block;
    padding: 3px 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 7px;
}

/* Undo/Redo buttons */
#undoButton:disabled,
#redoButton:disabled {
    background-color: var(--undoRedoDisabledColor);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Save button states */
#saveButton.has-changes {
    background-color: var(--unsavedChangesColor);
    border-color: var(--unsavedChangesColor);
    color: white;
    font-weight: bold;
}

#saveButton:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


#buttonGrid {
    display: grid;
    grid-template-columns: repeat(var(--active-camera-count, 6), minmax(0, 1fr));
    grid-auto-flow: dense;
    min-width: 350px;
    padding: 10px 10px 10px 10px;
    grid-gap: 0px;
    grid-auto-rows: 1fr;
    align-content: flex-start;
    align-items: flex-start;
    transition: all 0.3s ease-in-out;
}

#buttonGrid.loading {
    opacity: 0.5;
    pointer-events: none;
}



.camButton {
    display: flex;
    position: relative;
    background-color: var(--buttonBackgroundColor);
    height: 100%;
    min-height: var(--minButtonHeight);
    max-height: var(--maxButtonHeight);
    width: 100%;
    min-width: 0;
    border: 1px solid var(--camBorderColor, transparent);
    color: var(--camColor, #969696);
    box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
    box-sizing: border-box;
    cursor: cell;
    overflow: hidden;
    font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 0px;
    margin: 0px;
    text-align: var(--presetNameTextAlign);
    transform: translateY(0);
    transition: transform 150ms, box-shadow 150ms, min-height 200ms ease-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* set the color of the button text and border width for standard buttons */
.camButton:not(.highlight):not(.deactivated):not(.camActivePreset) {
    color: #969696;
    border-width: 1px;
}


.highlight {
    text-shadow: #ffffff88 0px 0px 5px;
    border-width: 2px;
    background-color: #272727;
}

.active {
    background-color: #ff0000;
}

.preview {
    background-color: var(--previewBackgroundColor);
}

.live {
    background-color: var(--liveBackgroundColor);
}

.deactivated {
    color: #525252;
    opacity: 0.2;
}

.hidden-preset .presetNameText {
    visibility: hidden;
}

#buttonGrid.showThumbnails .hidden-preset .cameraThumbnail {
    background-color: #000;
}

#buttonGrid.showThumbnails .hidden-preset .cameraThumbnail img {
    filter: brightness(0);
}

/* 5px spacer before first visible row after skipped hidden rows (margin avoids grid-auto-rows: 1fr stretching a gap row) */
.camButton.row-gap-after-hidden {
    margin-top: 5px;
}

.showThumbnails .deactivated {
    opacity: 0.2;
}

/* Active preset — generic, works for any camera number */
.camActivePreset {
    background-color: var(--camBorderColor);
    color: white;
}

.showThumbnails .camActivePreset {
    background-color: #000000;
    border: 8px solid #ffffff;
    border-radius: 10px;
}

.camActivePreset.deactivated {
    background-color: #c6c6c6;
    color: #525252;
    opacity: 0.7;
}

.showThumbnails .camActivePreset.deactivated {
    border: 8px solid #ffffff;
}

.showThumbnails .camActivePreset.preview {
    border-color: var(--previewBorderColor);
}

.showThumbnails .camActivePreset.live {
    border-color: var(--liveBorderColor);
}


#sceneControl {
    display: none;
}

#slotContainer {
    display: none;
}



.showStandard .buttonNumbers {
    font-family: monospace;
    font-size: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    min-width: 35px;
    width: 35px;
    flex-shrink: 0;
    height: 100%;
    background-color: #00000023;
    padding: 0px 5px 0px 3px;
}

.cameraThumbnail {
    display: none;
}


.cameraNumText {
    display: none;
}

.showStandard .presetNumText {
    display: inline;
    margin: auto;
}


.showStandard .presetNameText,
.showStandard .showCameraNumbers .presetNameText {
    display: block;
    font-weight: bold;
    margin: auto 5px;
    padding: 1px 3px 1px 3px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showCameraNumbers .cameraNumText,
.presetNumText {
    display: inline;
    margin: auto;
}


.showThumbnails .presetNameText {
    display: inline-block;
    position: absolute;
    left: 10px;
    top: auto;
    bottom: 10px;
    padding: 2px 6px;
    font-weight: bold;
    font-size: 15px;
    color: white;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.showThumbnails .camButton.highlight .presetNameText {
    background-color: var(--camBorderColor);
}

.showThumbnails .buttonNumbers {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: absolute;
    padding: 2px 6px;
    left: 10px;
    top: 10px;
    width: auto;
    min-width: 0;
    height: auto;
    font-weight: bold;
    font-size: 12px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    border-radius: 3px;
    white-space: nowrap;
}

/* presetBoard grid: flush labels for maximum thumbnail visibility */
#buttonGrid.showThumbnails .presetNameText {
    left: 0;
    bottom: 0;
    padding: 1px 4px;
    border-radius: 0;
    max-width: 100%;
}

#buttonGrid.showThumbnails .buttonNumbers {
    left: 0;
    top: 0;
    padding: 1px 4px;
    border-radius: 0;
}

.showThumbnails .buttonNumbers .cameraNumText,
.showThumbnails .buttonNumbers .presetNumText {
    margin: 0;
}

.showThumbnails .cameraNumText {
    display: none;
}

.showThumbnails.showCameraNumbers .cameraNumText {
    display: inline;
}

.showThumbnails .cameraThumbnail {
    display: inline;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.showThumbnails .preview {
    .cameraThumbnail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--previewBackgroundColor);
    }
}

.showThumbnails .live {
    .cameraThumbnail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--liveBackgroundColor);
    }
}

.cameraThumbnail>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hide thumbnail image when preset name is empty */
.showThumbnails .cameraThumbnail.no-thumbnail img {
    display: none;
}

/* Quick Action Buttons */
#quickPanel {
    padding: 5px 15px;
    background-color: var(--buttonBackgroundColor);
    border-top: 1px solid var(--borderColor);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

#quickPanel h3 {
    display: none;
}

.quickActionButton {
    padding: 6px 12px;
    margin: 0;
    background-color: #444;
    color: #ccc;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--settingsFontFamily);
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.quickActionButton:hover {
    background-color: #555;
    border-color: var(--borderColor);
}

.quickActionButton.active {
    background-color: var(--activeColor);
    color: white;
    border-color: var(--activeColor);
}

#greetings {
    padding: 3px;
    margin-bottom: 55px;
    font-family: var(--settingsFontFamily);
    font-size: 9px;
    color: #000000;
}

/* ============================================
   GROUP EDIT MODE STYLES
   ============================================ */

/* Body class when in group edit mode */
body.group-edit-mode {
    --groupEditHighlight: #0d6efd;
}

body.group-edit-mode #buttonGrid {
    cursor: pointer;
}

/* Config/Edit button in footer */
.group-edit-button {
    padding: 6px 12px;
    margin: 0;
    background-color: #555;
    color: #ccc;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--settingsFontFamily);
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.group-edit-button:hover {
    background-color: #666;
}

.group-edit-button.active {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

/* Add Group button - hidden by default, shown in edit mode */
.add-group-button {
    display: none;
    padding: 6px 12px;
    margin: 0;
    background-color: #28a745;
    color: white;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--settingsFontFamily);
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

body.group-edit-mode .add-group-button {
    display: inline-block;
}

.add-group-button:hover {
    background-color: #218838;
}

/* Highlight rows that belong to the selected group */
.camButton.in-selected-group {
    outline: 3px solid var(--groupEditHighlight, #0d6efd);
    outline-offset: -3px;
}

/* Quick action button in editing state */
.quickActionButton.editing {
    background-color: var(--groupEditHighlight, #0d6efd);
    color: white;
    border-color: var(--groupEditHighlight, #0d6efd);
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
}

/* Group naming modal */
.group-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.group-modal {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 24px;
    min-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.group-modal h3 {
    margin: 0 0 16px 0;
    color: white;
    font-family: var(--settingsFontFamily);
}

.group-modal input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #444;
    color: white;
    font-family: var(--settingsFontFamily);
    font-size: 1em;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.group-modal input[type="text"]:focus {
    outline: none;
    border-color: var(--groupEditHighlight, #0d6efd);
}

.group-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.group-modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--settingsFontFamily);
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.group-modal-buttons .cancel-btn {
    background-color: #555;
    color: #ccc;
}

.group-modal-buttons .cancel-btn:hover {
    background-color: #666;
}

.group-modal-buttons .confirm-btn {
    background-color: var(--groupEditHighlight, #0d6efd);
    color: white;
}

.group-modal-buttons .confirm-btn:hover {
    background-color: #0b5ed7;
}

.group-modal-buttons .delete-btn {
    background-color: #dc3545;
    color: white;
    margin-right: auto;
}

.group-modal-buttons .delete-btn:hover {
    background-color: #bb2d3b;
}

/* Position edit button on far right */
#groupEditButton {
    margin-left: auto;
    order: 999;
}

/* Blue background for quick panel in edit mode */
body.group-edit-mode #quickPanel {
    background-color: #1e3a5f;
    border-top-color: #2d5a8f;
}

/* Force green color for add group button */
.add-group-button {
    background-color: #28a745 !important;
    color: white !important;
}

.add-group-button:hover {
    background-color: #218838 !important;
    color: white !important;
}

/* Fixed width for utility buttons in Quick Panel */
.quickActionButton[data-filter=""],
.add-group-button {
    min-width: 100px;
    text-align: center;
    box-sizing: border-box;
}
/* ============================================================================
   LIVE SYNC TOGGLE + PENDING BADGE
   ============================================================================ */

.live-sync-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.live-sync-toggle input[type="checkbox"] {
    display: none;
}

.live-sync-label {
    font-weight: bold;
    font-size: 0.8em;
    letter-spacing: 1px;
}

.live-sync-toggle input[type="checkbox"]:checked + .live-sync-label {
    background: #28a745;
    color: white;
}

.pending-badge {
    background: #ff9500;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ============================================================================
   SHOWPRESET STYLING
   ============================================================================ */

.showpreset-badge {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 11px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

.showThumbnails .showpreset-badge {
    bottom: 5px;
    right: 5px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}