/* Override Pico CSS variables — single source of truth for theme customization */
:root {
    --pico-background-color: #f0f0f0;
}

body {
    min-height: 100vh;
}

details {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    background: white;
}

details summary {
    cursor: pointer;
}

details summary label {
    display: inline;
    cursor: pointer;
}

details > .grid,
details > label,
details > fieldset {
    margin-bottom: 1.5rem;
}

details > label {
    /* padding-left: 1.5rem; */
    margin-top: -0.5rem;
}

article header h2 {
    margin-bottom: 0;
}

/* --- Alert / notification styles --- */
.alert-info,
.alert-warning,
.alert-error {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: bold;
}

.alert-info {
    background: #e8f4f8;
    color: #0c5460;
    border: 1px solid #bee5eb;
    border-left: 4px solid #17a2b8;
}

.alert-warning {
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffc107;
    border-left: 4px solid #e6a800;
}

.alert-error {
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    border-left: 4px solid #dc3545;
}

.alert-info::before,
.alert-warning::before,
.alert-error::before {
    margin-right: 0.4em;
}

.alert-info::before {
    content: "\2139\FE0F";
}

.alert-warning::before {
    content: "\26A0\FE0F";
}

.alert-error::before {
    content: "\2716";
}

.alert-info p,
.alert-warning p,
.alert-error p {
    margin: 0;
    display: inline;
}

/* Non-bold variant for informational notes */
.alert-info.alert-light,
.alert-warning.alert-light {
    font-weight: normal;
}

/* --- Utility classes --- */
.text-muted {
    color: #666;
}

.group-label {
    font-weight: 600;
    font-size: 0.95em;
    color: #666;
    margin-bottom: 0.25rem;
}

.info-box {
    background: #f0f4f8;
    border: 1px solid #c8d8e8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.input-readonly {
    background: #f0f4f8;
    cursor: default;
    color: #666;
}

.btn-mini {
    padding: 0.15rem 0.5rem;
    font-size: 0.8em;
}

.btn-inline {
    white-space: nowrap;
    width: auto;
    margin: 0;
}

@media print {
    button, a[role="button"], .no-print {
        display: none !important;
    }

    article {
        break-inside: avoid;
    }
}