/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-raxxps3jfy] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-raxxps3jfy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Styles specific to the Home page */

:root[rc250411a] {
    /* Base Theme Colors (Screenshot Inspired) */
    --background-color: hsl(72, 12%, 92%); /* Light background like screenshot */
    --text-color: #333333;       /* Dark text for light background */
    --text-muted-color: #777777; 
    --card-background: #f8f9fa;  /* Light card background */
    --primary-button-bg: #6c757d; /* Default button gray */
    --primary-button-hover-bg: #5a6268;
    --secondary-button-bg: #e9ecef; /* Light gray */
    --secondary-button-hover-bg: #ced4da;
    --border-color: #dee2e6; 
    --info-bg: #e7f3fe;
    --info-text: #0c5460;
    --success-bg: #d4edda;
    --success-text: #155724;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Font */
    --font-family-main: 'Oregano', cursive;
    --font-family-accent: 'Limelight', cursive;

    /* Dynamic Palette Variables (Defaults; overridden by inline styles when theme applied) */
    --palette-color-1: var(--primary-button-bg); 
    --palette-color-2: #d39b9b;
    --palette-color-3: #b3ba92;
    --palette-color-4: #a6b1be;
    --palette-color-5: #f5bef2;
}

*[rc250411a] {
    font-family: var(--font-family-main);
    box-sizing: border-box;
}

/* Set body background if this is the only page, otherwise move to app.css */
/* Assumes Home.razor is wrapped in a container that needs this background */
.container-fluid[rc250411a] { /* Apply background to the main container */
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh; /* Ensure it covers viewport height */
    padding: 2rem 3rem; /* More padding */
    max-width: 1140px; /* Add back max-width for typical container */
    margin-left: auto;
    margin-right: auto;
}

h1[rc250411a] {
    color: var(--text-color);
    font-weight: 700;
    font-size: 2.2rem; /* Slightly smaller */
    margin-bottom: 0.25rem; /* Less space below */
    /* Apply dynamic color when theme is active */
    color: var(--palette-color-1);
}

/* Subtitle */
.mb-4[rc250411a] {
    color: var(--text-muted-color);
    font-size: 1rem;
    margin-bottom: 2rem !important; /* More space below subtitle */
}

/* Palette Name */
h2[rc250411a] {
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.5rem;
    /* Apply dynamic color when theme is active */
    color: var(--palette-color-2);
}

h5[rc250411a] {
    color: var(--text-color);
    font-weight: 600;
    /* Apply dynamic color when theme is active */
    color: var(--palette-color-3);
}

/* Buttons */
.btn[rc250411a] {
    border-radius: 8px; /* Less rounded than pill */
    padding: 0.75em 1.5em;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid transparent; /* Base border */
    box-shadow: 0 1px 3px var(--shadow-color);
    color: var(--text-color); /* Ensure text color contrasts with default/light bg */
}

.btn:hover[rc250411a] {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px var(--shadow-color);
}

.btn-primary[rc250411a] {
    /* Apply dynamic color when theme is active */
    background-color: var(--palette-color-1); 
    border-color: var(--palette-color-1);
    color: white; /* Explicitly white text */
}

.btn-primary:hover[rc250411a], .btn-primary:focus[rc250411a] {
    /* Slightly darker version of dynamic color 1 */
    filter: brightness(90%);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-primary:disabled[rc250411a] {
    background-color: var(--palette-color-1);
    border-color: var(--palette-color-1);
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Apply Theme / Secondary Button */
.btn-secondary[rc250411a] {
    /* Apply dynamic color when theme is active */
    background-color: var(--palette-color-3);
    border-color: var(--palette-color-3);
    color: white; /* Explicitly white text */
}

.btn-secondary:hover[rc250411a], .btn-secondary:focus[rc250411a] {
    filter: brightness(90%);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Clear All Button */
.btn-outline-danger[rc250411a] {
    border: 1px solid var(--border-color); /* Use theme border */
    color: var(--text-muted-color);
    background-color: transparent;
    padding: 0.4em 1em; /* Smaller */
    font-size: 0.9rem;
    box-shadow: none;
}

.btn-outline-danger:hover[rc250411a] {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    transform: none; /* No lift */
    box-shadow: none;
}


/* Text & Info */
p.small[rc250411a] {
    color: var(--text-muted-color);
    font-size: 0.9rem; /* Slightly larger small text */
    margin-top: 1rem;
}

.text-muted[rc250411a] {
    color: var(--text-muted-color) !important;
}

.alert[rc250411a] {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.8rem 1.25rem;
    box-shadow: 0 1px 3px var(--shadow-color);
    background-color: white; /* Default alert background */
}

.alert-info[rc250411a] {
    background-color: var(--info-bg);
    color: var(--info-text);
    border-color: darken(var(--info-bg), 10%);
}

.alert-success[rc250411a] {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: darken(var(--success-bg), 10%);
}

.alert-danger[rc250411a] {
    background-color: #f8d7da; /* Standard Bootstrap light red */
    color: #721c24;
    border-color: #f5c6cb;
}

.alert .btn-close[rc250411a] {
    filter: none; /* Reset filter for light theme */
}

/* Divider */
hr[rc250411a] {
    border-color: var(--border-color);
    opacity: 0.6;
}


/* Deep overrides for components */
[rc250411a] .palette-container {
    height: 200px; /* Adjust height */
    border-radius: 10px; 
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
}

[rc250411a] .color-block:hover {
    transform: none; 
    filter: brightness(1.05); /* Subtle brightness */
    z-index: auto; 
}

[rc250411a] .color-block.placeholder {
    background-color: #e9ecef; /* Light gray placeholder */
}

[rc250411a] .color-label {
    background-color: rgba(255, 255, 255, 0.8); /* Lighter label background */
    color: #333; /* Darker text for light bg */
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-bottom: 10px; 
    opacity: 0; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

[rc250411a] .color-block:hover .color-label {
    opacity: 1; 
}


[rc250411a] .history-section h2 {
    font-size: 1.3rem;
    color: var(--text-color);
}

[rc250411a] .history-section h2 {
    margin-bottom: 1rem;
}

[rc250411a] .history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Components/PaletteDisplay.razor.rz.scp.css */
.palette-container[b-gq2zsl6wxv] {
    display: flex;
    /* Height, border-radius, shadow managed by Home.razor.css via ::deep */
    overflow: hidden;
}

.color-block[b-gq2zsl6wxv] {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: flex-end; 
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
    position: relative; 
}

/* Hover effect managed by Home.razor.css via ::deep */

.color-block.placeholder[b-gq2zsl6wxv] {
    /* Placeholder background managed by Home.razor.css via ::deep */
    cursor: default;
}

.color-label[b-gq2zsl6wxv] {
    /* Style managed by Home.razor.css via ::deep */
}

/* Remove :hover styles here as they are handled in Home.razor.css */ 
/* /Components/PaletteHistoryItem.razor.rz.scp.css */
.history-item[b-f2derrnnfn] {
    background-color: var(--card-background, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.history-palette-container[b-f2derrnnfn] {
    display: flex;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.history-color-block[b-f2derrnnfn] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
    position: relative;
}

.history-color-block:hover[b-f2derrnnfn] {
    filter: brightness(1.05);
}

.history-color-label[b-f2derrnnfn] {
    background-color: rgba(255, 255, 255, 0.85);
    color: #333;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7em;
    margin-bottom: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-color-block:hover .history-color-label[b-f2derrnnfn] {
    opacity: 1;
}