/*
ARQUIVO: estados vazios, notices e mensagens.

POR QUE ELE EXISTE:
- isola feedbacks visuais do sistema para que mudancas em alertas nao afetem cards e tabelas.
*/

:root {
    --notice-surface: color-mix(in srgb, var(--theme-surface-panel) 88%, transparent);
    --notice-surface-strong: color-mix(in srgb, var(--theme-surface-panel-strong) 90%, transparent);
    --notice-border: color-mix(in srgb, var(--theme-border-soft) 92%, transparent);
    --notice-shadow: var(--theme-shadow-soft);
    --notice-title: var(--theme-text-primary);
    --notice-copy: var(--theme-text-secondary);
    --notice-rail: color-mix(in srgb, var(--theme-text-muted) 30%, transparent);
}

.state-empty,
.notice-panel,
.state-notice,
.note-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-card);
    border: 1px solid var(--notice-border);
    background: var(--notice-surface);
    box-shadow: var(--notice-shadow);
}

.state-empty.is-compact,
.notice-panel.is-compact,
.state-notice.is-compact,
.note-panel.is-compact {
    padding: 14px 16px;
    border-radius: 16px;
    gap: 10px;
}

.state-empty-head,
.notice-panel-head,
.state-notice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}


.state-empty-title,
.notice-panel-title,
.state-notice-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--notice-title);
}

.state-empty-copy,
.notice-panel-copy,
.state-notice-copy,
.state-empty-hint,
.notice-panel-hint,
.state-notice-hint {
    margin: 6px 0 0;
    color: var(--notice-copy);
    line-height: 1.6;
}

.state-empty-hint,
.notice-panel-hint,
.state-notice-hint {
    margin-top: 0;
    font-size: 0.95rem;
}

.state-empty {
    border-color: color-mix(in srgb, var(--theme-border-soft) 95%, transparent);
    background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
}

body[data-theme="dark"] .state-empty,
body[data-theme="dark"] .state-empty.is-compact {
    border-color: color-mix(in srgb, var(--theme-glass-border) 94%, transparent);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-support-alpha) 10%, transparent), transparent 32%),
        var(--theme-surface-glass-strong);
    box-shadow:
        inset 0 1px 0 var(--theme-glass-highlight),
        0 16px 36px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .state-empty-title,
body[data-theme="dark"] .state-empty-copy,
body[data-theme="dark"] .state-empty-hint {
    color: var(--theme-text-primary);
}

body[data-theme="dark"] .state-empty-copy,
body[data-theme="dark"] .state-empty-hint {
    color: var(--theme-text-secondary);
}

.notice-panel,
.state-notice {
    position: relative;
    overflow: hidden;
}

.notice-panel::before,
.state-notice::before,
.note-panel::before,
.message::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 10px;
    width: 4px;
    border-radius: 999px;
    background: var(--notice-rail);
}

.notice-panel--info,
.state-notice-info {
    border-color: color-mix(in srgb, var(--theme-accent-support) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-surface-panel) 82%, transparent);
}

.notice-panel--info::before,
.state-notice-info::before {
    background: color-mix(in srgb, var(--theme-accent-support) 86%, white 14%);
}

.notice-panel--warning,
.note-panel-warm,
.note-panel-cream,
.state-notice-warning {
    border-color: color-mix(in srgb, var(--theme-accent-warning) 30%, var(--theme-border-soft) 70%);
    background: color-mix(in srgb, var(--theme-accent-warning-alpha) 46%, var(--theme-surface-panel) 54%);
}

.notice-panel--warning::before,
.note-panel-warm::before,
.note-panel-cream::before,
.state-notice-warning::before {
    background: var(--theme-accent-warning);
}

.notice-panel--success,
.note-panel-success,
.note-panel-success-soft,
.state-notice-success {
    border-color: color-mix(in srgb, var(--theme-accent-success) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-accent-success-alpha) 40%, var(--theme-surface-panel) 60%);
}

.notice-panel--success::before,
.note-panel-success::before,
.note-panel-success-soft::before,
.state-notice-success::before {
    background: var(--theme-accent-success);
}

.notice-panel--danger,
.note-panel-danger,
.state-notice-danger {
    border-color: color-mix(in srgb, var(--theme-accent-danger) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-accent-danger-alpha) 40%, var(--theme-surface-panel) 60%);
}

.notice-panel--danger::before,
.note-panel-danger::before,
.state-notice-danger::before {
    background: var(--theme-accent-danger);
}

.note-panel-cream {
    color: var(--theme-text-secondary);
}

.note-panel-danger {
    color: var(--theme-text-primary);
}

.message-stack {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 8px;
}

.message {
    position: relative;
    padding: 15px 18px 15px 22px;
    border-radius: var(--radius-panel);
    border: 1px solid var(--notice-border);
    background: var(--notice-surface);
    box-shadow: var(--notice-shadow);
}

.message-notice {
    padding-left: 6px;
}

.message :is(.notice-panel, .state-notice, .note-panel) {
    padding-left: 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.message :is(.notice-panel, .state-notice, .note-panel)::before {
    display: none;
}

.message.success {
    border-color: color-mix(in srgb, var(--theme-accent-success) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-accent-success-alpha) 40%, var(--theme-surface-panel) 60%);
}

.message.success::before {
    background: var(--theme-accent-success);
}

.message.error {
    border-color: color-mix(in srgb, var(--theme-accent-danger) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-accent-danger-alpha) 40%, var(--theme-surface-panel) 60%);
}

.message.error::before {
    background: var(--theme-accent-danger);
}

.message.warning {
    border-color: color-mix(in srgb, var(--theme-accent-warning) 30%, var(--theme-border-soft) 70%);
    background: color-mix(in srgb, var(--theme-accent-warning-alpha) 46%, var(--theme-surface-panel) 54%);
}

.message.warning::before {
    background: var(--theme-accent-warning);
}

.message.info {
    border-color: color-mix(in srgb, var(--theme-accent-support) 28%, var(--theme-border-soft) 72%);
    background: color-mix(in srgb, var(--theme-accent-support-alpha) 40%, var(--theme-surface-panel) 60%);
}

.message.info::before {
    background: var(--theme-accent-support);
}

body[data-theme="dark"] .message {
    border-color: color-mix(in srgb, var(--theme-border-soft) 72%, transparent);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-support-alpha) 10%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(11, 18, 30, 0.98), rgba(10, 17, 28, 0.95));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .message.success {
    border-color: color-mix(in srgb, var(--theme-accent-success) 34%, var(--theme-border-soft) 66%);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-success-alpha) 18%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(8, 20, 22, 0.98), rgba(8, 17, 24, 0.95));
}

body[data-theme="dark"] .message.error {
    border-color: color-mix(in srgb, var(--theme-accent-danger) 34%, var(--theme-border-soft) 66%);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-danger-alpha) 18%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(24, 10, 18, 0.98), rgba(18, 10, 17, 0.95));
}

body[data-theme="dark"] .message.warning {
    border-color: color-mix(in srgb, var(--theme-accent-warning) 36%, var(--theme-border-soft) 64%);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-warning-alpha) 18%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(24, 18, 8, 0.98), rgba(18, 14, 8, 0.95));
}

body[data-theme="dark"] .message.info {
    border-color: color-mix(in srgb, var(--theme-accent-support) 34%, var(--theme-border-soft) 66%);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent-support-alpha) 18%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(8, 16, 28, 0.98), rgba(8, 13, 22, 0.95));
}

body[data-theme="dark"] .message :is(.notice-panel-title, .state-notice-title, .notice-panel-copy, .state-notice-copy, .notice-panel-hint, .state-notice-hint) {
    color: var(--theme-text-primary);
}

body[data-theme="dark"] .message :is(.notice-panel-copy, .state-notice-copy, .notice-panel-hint, .state-notice-hint) {
    color: var(--theme-text-secondary);
}

.state-payment-success {
    gap: 18px;
}

.state-payment-success-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
}

.state-payment-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding-inline: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent-success-alpha) 72%, transparent);
    color: var(--theme-accent-success);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.state-payment-success-copy {
    display: grid;
    gap: 4px;
}

.state-payment-success-title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.2;
    color: var(--theme-text-primary);
}

.state-payment-success-text {
    margin: 0;
    color: var(--theme-text-secondary);
    line-height: 1.6;
}

.state-payment-success-actions {
    display: flex;
    justify-content: flex-start;
}

.state-payment-success--compact {
    gap: 14px;
    padding: 14px 16px;
}

.state-payment-success--compact .state-payment-success-title {
    font-size: 1rem;
}

.state-payment-success--compact .state-payment-success-text {
    line-height: 1.45;
}

@media (max-width: 720px) {
    .state-empty-head,
    .notice-panel-head,
    .state-notice-head,
    .state-payment-success-head {
        flex-direction: column;
        align-items: stretch;
    }
}