src/components/custom-procedures/custom-procedures.css

@import "../../css/colors.css";
@import "../../css/units.css";

.modal-content {
    width: min(700px, 90vw);
    max-width: 900px;
    min-width: 400px;
    max-height: 90vh;
    margin: 50px auto; /* This modal is taller than most, reduce top margin */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.body {
    background: $ui-modal-background;
    padding: 1.5rem 2.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.body input[type="checkbox"],
.body input[type="radio"] {
    margin: 3px;
}

/* Blocks workspace for custom procedure declaration editor */
.workspace {
    min-height: 200px;
    height: 300px;
    max-height: 50vh;
    position: relative;
    border: 1px solid $ui-black-transparent;
    border-radius: $space;
    overflow: hidden;
    resize: vertical;
    margin-bottom: 1rem;
    background-color: $ui-primary;
}

.workspace :global(.injectionDiv){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.workspace :global(.blocklySvg) {
    background-color: $ui-primary;
    width: 100% !important;
    height: 100% !important;
    display: block;
    overflow: visible;
}

.workspace :global(.blocklyBlockCanvas) {
    overflow: visible;
}

.workspace :global(.blocklyScrollbarHorizontal),
.workspace :global(.blocklyScrollbarVertical) {
    opacity: 0.8;
    z-index: 10;
}

.workspace :global(.blocklyScrollbarVertical) {
    right: 1px !important;
    top: 0 !important;
    height: calc(100% - 15px) !important;
}

.workspace :global(.blocklyScrollbarHorizontal) {
    bottom: 1px !important;
    left: 0 !important;
    width: calc(100% - 15px) !important;
}

.workspace :global(.blocklyScrollbarCorner) {
    right: 1px !important;
    bottom: 1px !important;
}

.workspace :global(.blocklyMainBackground) {
    stroke-width: 0;
}

.workspace :global(.blocklyWorkspace) {
    overflow: visible;
}

.workspace :global(.blocklyFlyoutBackground) {
    fill-opacity: 0.8;
}

/* Ensure blockly toolbox and workspace use full space */
.workspace :global(.blocklyToolboxDiv) {
    background: transparent;
}

/* Row of "card" buttons for modifying custom procedures */
.options-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.option-card {
    background: $ui-white;
    border: 2px solid $ui-black-transparent;
    border-radius: $space;
    padding: calc($space * 2);
    text-align: center;
    flex: 1 1 160px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
}

.option-card:hover {
    border: 2px solid $looks-secondary;
    box-shadow: 0px 0px 0px 4px $looks-transparent;
}

.option-card + .option-card {
    margin-left: 0;
}

.option-icon {
    max-height: 48px;
    margin-bottom: 0.5rem;
}

.option-title {
    font-weight: bold;
}

/* "Run without screen refresh" row */
.checkbox-row {
    margin-top: 1rem;
}

/* Color picker row */
.color-picker-row {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Color picker styles */
.color-picker-label {
    font-weight: bold;
    color: $text-primary;
}

.color-picker-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-picker-input {
    width: 50px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.color-preview {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid $ui-black-transparent;
}

.color-value {
    font-family: monospace;
    font-size: 12px;
    color: $text-primary;
}

/* Color grid styles */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
}

.color-grid-item {
    width: 100%;
    aspect-ratio: 1;
    min-width: 35px;
    min-height: 35px;
    max-width: 45px;
    max-height: 45px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.color-grid-item:hover {
    transform: scale(1.1);
    border: 2px solid $ui-black-transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.color-grid-item:focus {
    outline: none;
    transform: scale(1.1);
    border: 2px solid $looks-secondary;
    box-shadow: 0 0 0 2px $looks-transparent;
}

.color-grid-item-selected {
    border: 3px solid $looks-secondary !important;
    box-shadow: 0 0 0 2px $looks-transparent;
}

.color-grid-item-selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Confirmation buttons at the bottom of the modal */
.button-row {
    margin-top: 1rem;
    font-weight: bolder;
    text-align: right;
}

.button-row button {
    border: 1px solid $ui-black-transparent;
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
    background: white;
    color: black;
    font-weight: bold;
    font-size: 0.85rem;
}

.button-row button.ok-button {
    background: $looks-secondary;
    border: $looks-secondary;
    color: white;
}

[dir="ltr"] .button-row button + button {
    margin-left: 0.5rem;
}

[dir="rtl"] .button-row button + button {
    margin-right: 0.5rem;
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    .modal-content {
        width: 95vw;
        max-height: 95vh;
        margin: 10px auto;
    }
    
    .body {
        padding: 1rem;
    }
    
    .options-row {
        flex-direction: column;
    }
    
    .option-card {
        min-width: unset;
    }
    
    /* Responsive color grid for mobile */
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
        gap: 0.375rem;
    }
    
    .color-grid-item {
        min-width: 30px;
        min-height: 30px;
        max-width: 35px;
        max-height: 35px;
    }
    
    /* Make color picker components more mobile friendly */
    .color-picker-container {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .color-picker-input {
        width: 60px;
        height: 35px;
    }
    
    .color-preview {
        width: 35px;
        height: 35px;
    }
}

/* Medium screens - tablets */
@media (min-width: 601px) and (max-width: 900px) {
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    }
    
    .color-grid-item {
        min-width: 38px;
        min-height: 38px;
        max-width: 42px;
        max-height: 42px;
    }
}

/* Large screens - desktops */
@media (min-width: 901px) {
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
        max-width: 480px; /* Allow more room on large screens */
    }
}

/* Progressive enhancement with container queries for modern browsers */
@supports (container-type: inline-size) {
    /* When the container is very narrow (< 200px), use smaller items */
    @container (max-width: 200px) {
        .color-grid {
            grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
            gap: 0.25rem;
        }
        
        .color-grid-item {
            min-width: 25px;
            min-height: 25px;
            max-width: 30px;
            max-height: 30px;
        }
    }
    
    /* When the container is narrow (200px - 300px) */
    @container (min-width: 200px) and (max-width: 300px) {
        .color-grid {
            grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
            gap: 0.375rem;
        }
        
        .color-grid-item {
            min-width: 30px;
            min-height: 30px;
            max-width: 35px;
            max-height: 35px;
        }
    }
    
    /* When the container is medium (300px - 450px) */
    @container (min-width: 300px) and (max-width: 450px) {
        .color-grid {
            grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
            gap: 0.5rem;
        }
        
        .color-grid-item {
            min-width: 35px;
            min-height: 35px;
            max-width: 40px;
            max-height: 40px;
        }
    }
    
    /* When the container is wide (> 450px) */
    @container (min-width: 450px) {
        .color-grid {
            grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
            gap: 0.5rem;
        }
        
        .color-grid-item {
            min-width: 40px;
            min-height: 40px;
            max-width: 45px;
            max-height: 45px;
        }
    }
}