/* Custom styles for output and station grid */
        body {
            max-width: 1200px;
            margin: auto;
        }

        #output {
            font-family: monospace;
            white-space: pre;
            height: 200px;
            resize: vertical;
            overflow-y: auto;
            margin-top: 10px;
        }

        .hidden {
            display: none;
        }

        .resize-handle {
            width: 100%;
            height: 15px;
            background-color: #1a9bd3;
            cursor: ns-resize;
            text-align: center;
            font-size: 10px;
            line-height: 10px;
            color: #ffffff;
            align-items: center;
            justify-content: center;
        }

        #stationGrid {
            display: grid;
            grid-template-columns: repeat(20, 50px);
            grid-gap: 5px;
            margin-top: 20px;
            justify-content: center;
        }

        @media (max-width: 1200px) {
            #stationGrid {
                grid-template-columns: repeat(16, 50px);
            }
        }

        @media (max-width: 992px) {
            #stationGrid {
                grid-template-columns: repeat(8, 50px);
            }
        }

        .station {
            width: 50px;
            height: 50px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            position: relative;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .station.checked {
            background-color: #b3e5fc;
        }

        .station.hovered {
            outline: 2px solid yellow;
        }
        
        .station.active {
            outline: 3px solid orange;
            outline-offset: -3px;
        }
        
        .station.group-highlight {
            box-shadow: 0 0 0 3px orange;
            outline: 3px solid orange;
            outline-offset: -3px;
        }
        
        .station.hidden {
            display: none;
        }

        .station::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.629 14.271l-4.037-4.038 1.414-1.414 2.623 2.623 6.296-6.296 1.414 1.414-7.71 7.711z" fill="%230090ee"/></svg>');
            background-size: cover;
            top: 5px;
            right: 5px;
            display: none;
        }

        .station.checked::after {
            display: block;
        }

        .conditional-field {
            transition: opacity 0.3s ease;
        }
        
        .conditional-field.hidden {
            display: none;
        }

        .custom-switch {
            padding-left: 2.25rem;
        }

        .container-fluid {
            max-width: 1200px;
        }

        /* Context Menu Styles */
        #contextMenu {
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
            z-index: 1000;
            min-width: 180px;
            border-radius: 4px;
            padding: 4px 0;
        }

        .context-menu-item {
            padding: 8px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

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

        .color-indicator {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            border: 1px solid #999;
        }

        .context-menu-checkbox {
            margin-left: auto;
        }

        /* Red border for missing record */
        #databaseContainer.record-missing .card {
            border: 2px solid #dc3545;
        }
        #databaseContainer.record-missing .card-header {
            border-bottom: 1px solid #dc3545;
        }