/* buttons.css */
/* Styles for all buttons, including general, specific types, and grids */

/* General button styling within #controls */
/* This can become a more generic .btn class if you prefer */
#controls button,
.btn { /* Added .btn class for wider use */
    padding: var(--button-padding);
    border: 1px solid var(--button-default-border);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    transition: background-color 0.15s ease-out, transform 0.1s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
    width: 100%; /* Default to full-width, can be overridden */
    margin-top: 0.3rem; /* Contextual margin, might remove from generic .btn */
    background-color: var(--button-default-bg);
    color: var(--button-default-text);
    box-shadow: 0 2.5px 7px rgba(0,0,0,0.16), inset 0 0.5px 0px rgba(255,255,255,0.05);
    box-sizing: border-box;
    display: flex; /* Added for icon alignment if needed */
    align-items: center; /* Added for icon alignment */
    justify-content: center; /* Added for icon alignment */
    text-shadow: 0 1px 1px rgba(0,0,0,0.08); /* Added from auth-panel buttons */
}

#controls button:not(:disabled):hover,
.btn:not(:disabled):hover {
    background-color: rgba(70, 80, 105, 0.45); /* Consider making this a --button-hover-bg variable */
    border-color: rgba(255,255,255,0.2);    /* --button-hover-border */
    box-shadow: 0 3.5px 10px rgba(0,0,0,0.22), inset 0 0.5px 1px rgba(255,255,255,0.08);
    transform: translateY(-1px);
    color: white; /* --button-hover-text */
}

#controls button:not(:disabled):active,
.btn:not(:disabled):active {
    transform: translateY(0px) scale(0.97);
    background-color: rgba(45, 55, 80, 0.40); /* --button-active-bg */
    box-shadow: 0 1.5px 5px rgba(0,0,0,0.14), inset 0 1px 1.5px rgba(0,0,0,0.07);
}

/* Specific button color classes - can be applied to any .btn or #controls button */
.btn-primary, #controls .btn-primary {
    background-color: rgba(0, 122, 255, 0.45); /* Slightly adjusted alpha */
    border-color: rgba(0, 122, 255, 0.35);
    color:white;
}
.btn-primary:hover, #controls .btn-primary:hover {
    background-color: rgba(0, 122, 255, 0.60);
    border-color: rgba(0, 122, 255, 0.5);
}

.btn-success, #controls .btn-success {
    background-color: rgba(52, 199, 89, 0.45);
    border-color: rgba(52, 199, 89, 0.35);
    color:white;
}
.btn-success:hover, #controls .btn-success:hover {
    background-color: rgba(52, 199, 89, 0.60);
    border-color: rgba(52, 199, 89, 0.5);
}

.btn-warning, #controls .btn-warning {
    background-color: rgba(255, 149, 0, 0.45);
    border-color: rgba(255, 149, 0, 0.35);
    color:white;
}
.btn-warning:hover, #controls .btn-warning:hover {
    background-color: rgba(255, 149, 0, 0.60);
    border-color: rgba(255, 149, 0, 0.5);
}

.btn-danger, #controls .btn-danger {
    background-color: rgba(255, 59, 48, 0.45);
    border-color: rgba(255, 59, 48, 0.35);
    color:white;
}
.btn-danger:hover, #controls .btn-danger:hover {
    background-color: rgba(255, 59, 48, 0.60);
    border-color: rgba(255, 59, 48, 0.5);
}

.btn-purple, #controls .btn-purple { /* Assuming .btn-purple is needed */
    background-color: rgba(88, 86, 214, 0.45);
    border-color: rgba(88, 86, 214, 0.35);
    color:white;
}
.btn-purple:hover, #controls .btn-purple:hover {
    background-color: rgba(88, 86, 214, 0.60);
    border-color: rgba(88, 86, 214, 0.5);
}

.btn-step, #controls .btn-step { /* Assuming .btn-step is needed */
    background-color: rgba(90, 200, 250, 0.45);
    border-color: rgba(90, 200, 250, 0.35);
    color:white;
}
.btn-step:hover, #controls .btn-step:hover {
    background-color: rgba(90, 200, 250, 0.60);
    border-color: rgba(90, 200, 250, 0.5);
}


#controls button:disabled,
.btn:disabled {
    background-color: rgba(142, 142, 147, 0.18);
    color: rgba(235, 235, 245, 0.30);
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.05);
    box-shadow: none;
    transform: none;
}

/* Grids for laying out multiple buttons */
.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.preset-grid,
.pattern-grid,
.view-grid,
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.preset-button,
.pattern-button,
.view-button,
.theme-button {
    /* These are specific variants, so they might not use all --button variables directly */
    background-color: rgba(65, 75, 100, 0.22);
    color: var(--text-secondary);
    font-size: 0.88rem;
    padding: 0.55rem;
    min-height: 42px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 1.5px 2.5px rgba(0,0,0,0.09);
    border-radius: 9px; /* Slightly different from --button-border-radius */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%; /* Ensure they fill grid cells */
    margin-top: 0; /* Reset margin from #controls button */
}

.preset-button:not(:disabled):hover,
.pattern-button:not(:disabled):hover,
.view-button:not(:disabled):hover,
.theme-button:not(:disabled):hover {
    background-color: rgba(80, 90, 115, 0.38);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.pattern-button.selected,
.view-button.active,
.theme-button.active {
    color: white;
    box-shadow: inset 0 0 0 1.8px rgba(255, 255, 255, 0.6), 0 1.5px 3px rgba(0,0,0,0.14);
    transform: translateY(0px);
}
.pattern-button.selected { background-color: rgba(0, 122, 255, 0.35); border-color: rgba(0, 122, 255, 0.45); }
.view-button.active { background-color: rgba(255, 149, 0, 0.35); border-color: rgba(255, 149, 0, 0.45); }
.theme-button.active { background-color: rgba(88, 86, 214, 0.35); border-color: rgba(88, 86, 214, 0.45); }