/* Auth Playground Custom Styles */

/* Orange color theme */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --pico-primary: var(--pico-color-orange-500);
    --pico-primary-background: var(--pico-color-orange-500);
    --pico-primary-hover: var(--pico-color-orange-600);
    --pico-primary-hover-background: var(--pico-color-orange-600);
    --pico-primary-focus: var(--pico-color-orange-200);
    --pico-primary-inverse: #fff;
    --pico-primary-underline: var(--pico-color-orange-500);
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-primary: var(--pico-color-orange-400);
        --pico-primary-background: var(--pico-color-orange-400);
        --pico-primary-hover: var(--pico-color-orange-300);
        --pico-primary-hover-background: var(--pico-color-orange-300);
        --pico-primary-focus: var(--pico-color-orange-800);
        --pico-primary-inverse: #000;
        --pico-primary-underline: var(--pico-color-orange-400);
    }
}

[data-theme="dark"] {
    --pico-primary: var(--pico-color-orange-400);
    --pico-primary-background: var(--pico-color-orange-400);
    --pico-primary-hover: var(--pico-color-orange-300);
    --pico-primary-hover-background: var(--pico-color-orange-300);
    --pico-primary-focus: var(--pico-color-orange-800);
    --pico-primary-inverse: #000;
    --pico-primary-underline: var(--pico-color-orange-400);
}

/* Force orange hover on primary buttons */
button.primary:hover,
button.primary:focus,
[role="button"].primary:hover,
[role="button"].primary:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: var(--pico-primary-hover) !important;
    border-color: var(--pico-primary-hover) !important;
}

@media only screen and (prefers-color-scheme: dark) {
    button.primary:hover,
    button.primary:focus,
    [role="button"].primary:hover,
    [role="button"].primary:focus,
    input[type="submit"]:hover,
    input[type="submit"]:focus {
        background-color: var(--pico-primary-hover) !important;
        border-color: var(--pico-primary-hover) !important;
    }
}

/* Reduce margin bottom for titles in article headers */
article header h2,
article header h3,
article header h4 {
    margin-bottom: 0;
}

/* Header title link styling */
header h1 a {
    color: inherit;
    text-decoration: none;
}

header h1 a:hover {
    text-decoration: underline;
}

/* Align Identity Provider to the right in header */
header .grid > hgroup:last-child {
    text-align: right;
}

/* Center footer content */
footer p {
    text-align: center;
}

/* User avatar styling */
.user-avatar {
    max-width: 150px;
    border-radius: 50%;
}

/* Flash messages styling */
article[role="alert"] {
    border-left: 4px solid;
    padding: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
}

/* Light mode */
article[role="alert"][data-type="success"] {
    border-color: #22c55e;
    background-color: #f0fdf4;
    color: #14532d;
}

article[role="alert"][data-type="error"] {
    border-color: #ef4444;
    background-color: #fef2f2;
    color: #7f1d1d;
}

article[role="alert"][data-type="info"] {
    border-color: #3b82f6;
    background-color: #eff6ff;
    color: #1e3a8a;
}

article[role="alert"][data-type="warning"] {
    border-color: #f59e0b;
    background-color: #fffbeb;
    color: #78350f;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    article[role="alert"][data-type="success"] {
        border-color: #4ade80;
        background-color: #14532d;
        color: #bbf7d0;
    }

    article[role="alert"][data-type="error"] {
        border-color: #f87171;
        background-color: #7f1d1d;
        color: #fecaca;
    }

    article[role="alert"][data-type="info"] {
        border-color: #60a5fa;
        background-color: #1e3a8a;
        color: #bfdbfe;
    }

    article[role="alert"][data-type="warning"] {
        border-color: #fbbf24;
        background-color: #78350f;
        color: #fef3c7;
    }
}

[data-theme="dark"] article[role="alert"][data-type="success"] {
    border-color: #4ade80;
    background-color: #14532d;
    color: #bbf7d0;
}

[data-theme="dark"] article[role="alert"][data-type="error"] {
    border-color: #f87171;
    background-color: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] article[role="alert"][data-type="info"] {
    border-color: #60a5fa;
    background-color: #1e3a8a;
    color: #bfdbfe;
}

[data-theme="dark"] article[role="alert"][data-type="warning"] {
    border-color: #fbbf24;
    background-color: #78350f;
    color: #fef3c7;
}

.buttons-right {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.buttons-right > * {
    width: auto;
}

/* Reduce button size in button bars */
.buttons-right [role="button"],
.buttons-right button,
.buttons-right input[type="submit"] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buttons-right [role="group"] [role="button"],
.buttons-right [role="group"] button,
.buttons-right [role="group"] input[type="submit"] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}