.app-site-container {
    width: 100%;
    max-width: calc(88rem + 40px);
    margin-inline: auto;
}

.app-shell,
html {
    scrollbar-gutter: stable;
}

html {
    overflow-y: scroll;
}

.app-shell {
    background: var(--cs-bg);
    color: var(--cs-text);
}

/**
 * Paineis autenticados (admin/sis): coluna minima 100vh com main expansivel
 * para o footer ficar colado ao fundo da viewport quando o conteudo e curto.
 */
.app-shell.app-shell-panel {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.app-shell.app-shell-panel > main {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.app-header-shell {
    border-color: var(--cs-border);
    background: var(--cs-surface-elevated);
}

.app-footer-shell {
    border-color: var(--cs-border);
    background: var(--cs-surface-elevated);
}

.app-card {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-text);
}

.app-muted {
    color: var(--cs-text-muted);
}

.app-btn-primary,
.app-btn-secondary,
.app-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.1rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.app-btn-primary {
    background: var(--cs-btn-primary-bg);
    color: var(--cs-btn-primary-text);
    border-color: color-mix(in srgb, var(--cs-btn-primary-bg) 65%, var(--cs-border));
}

.app-btn-primary:hover {
    background: var(--cs-btn-primary-hover);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--cs-btn-primary-bg) 26%, transparent);
}

.app-btn-secondary {
    border: 1px solid var(--cs-border);
    background: var(--cs-btn-secondary-bg);
    color: var(--cs-btn-secondary-text);
}

.app-btn-secondary:hover {
    background: var(--cs-btn-secondary-hover);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--cs-text) 12%, transparent);
}

.app-btn-danger {
    background: var(--cs-btn-danger-bg);
    color: var(--cs-btn-danger-text);
    border-color: color-mix(in srgb, var(--cs-btn-danger-bg) 65%, var(--cs-border));
}

.app-btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.1rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, #16a34a 65%, var(--cs-border));
    background: #16a34a;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.app-btn-success:hover {
    background: #15803d;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px color-mix(in srgb, #16a34a 28%, transparent);
}

.app-btn-danger:hover {
    background: var(--cs-btn-danger-hover);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--cs-btn-danger-bg) 28%, transparent);
}

.app-btn-primary:active,
.app-btn-secondary:active,
.app-btn-danger:active,
.app-btn-success:active {
    transform: translateY(0) scale(0.99);
}

.app-btn-primary:focus-visible,
.app-btn-secondary:focus-visible,
.app-btn-danger:focus-visible,
.app-btn-success:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cs-btn-primary-bg) 45%, white);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .app-btn-primary,
    .app-btn-secondary,
    .app-btn-danger,
    .app-btn-success {
        transition: background 0ms linear, box-shadow 0ms linear, transform 0ms linear;
    }

    .app-btn-primary:hover,
    .app-btn-secondary:hover,
    .app-btn-danger:hover,
    .app-btn-success:hover,
    .app-btn-primary:active,
    .app-btn-secondary:active,
    .app-btn-danger:active,
    .app-btn-success:active {
        transform: none;
    }
}

.app-input {
    border: 1px solid var(--cs-border);
    background: var(--cs-input-bg);
    color: var(--cs-text);
}

.app-input::placeholder {
    color: var(--cs-text-muted);
}

.app-icon-btn {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cs-border);
    border-radius: 0.5rem;
    background: var(--cs-btn-secondary-bg);
    color: var(--cs-btn-secondary-text);
    transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.app-icon-btn:hover {
    background: var(--cs-btn-secondary-hover);
}

.app-icon-btn:active {
    transform: translateY(1px);
}

.app-icon-btn svg {
    height: 1.25rem;
    width: 1.25rem;
}

.app-icon-btn [data-theme-icon] {
    font-size: 1.1rem;
    line-height: 1;
}

.app-icon-btn--lang {
    color: #2563eb;
}

.app-icon-btn--site {
    color: #0f766e;
}

.app-icon-btn--alerts {
    color: #ca8a04;
}

.app-icon-btn--favorites {
    color: #dc2626;
}

.app-icon-btn--favorites svg {
    height: 1.38rem;
    width: 1.38rem;
}

.app-icon-btn--favorites svg path {
    fill: currentColor;
}

.hp-locale-picker {
    z-index: 80;
}

.hp-locale-picker[open] {
    z-index: 90;
}

.hp-locale-picker__panel {
    min-width: 10.5rem;
    z-index: 95;
}

.hp-locale-picker__current-flag {
    width: 1.1rem;
    height: 0.8rem;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

.hp-locale-picker__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.78rem;
}

.hp-locale-picker__label {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}

.hp-locale-picker__link.is-active {
    background: color-mix(in srgb, var(--cs-btn-primary-bg) 14%, var(--cs-surface));
    color: var(--cs-text);
}

.hp-locale-picker__flag {
    width: 1.1rem;
    height: 0.8rem;
    border-radius: 2px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    margin-left: auto;
}

.app-main-nav {
    border-top: 1px solid var(--cs-border);
    background: color-mix(in srgb, var(--cs-surface-elevated) 92%, transparent);
}

.app-main-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-text-muted);
}

.app-main-nav-link:hover {
    background: var(--cs-btn-secondary-hover);
    color: var(--cs-text);
}

.app-main-nav-link.is-active {
    background: var(--cs-btn-secondary-hover);
    color: var(--cs-text);
}

.app-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cs-text);
}

.app-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.app-filter-field {
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.app-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-text-muted);
}

.app-table {
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    border-bottom: 1px solid var(--cs-border);
    padding: 0.7rem 0.75rem;
    text-align: left;
    font-size: 0.83rem;
}

.app-table th {
    color: var(--cs-text-muted);
    font-weight: 700;
}

.app-badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.app-badge-success {
    background: color-mix(in srgb, #16a34a 20%, transparent);
    color: #22c55e;
}

.app-badge-muted {
    background: color-mix(in srgb, var(--cs-text-muted) 20%, transparent);
    color: var(--cs-text-muted);
}

.app-empty-state {
    border: 1px dashed var(--cs-border);
    border-radius: 0.8rem;
    padding: 1.2rem;
    text-align: center;
    color: var(--cs-text-muted);
}

.app-empty-state svg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 auto 0.4rem auto;
}

.app-empty-state p {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cs-text);
}

.app-empty-state span {
    font-size: 0.8rem;
}

.app-form-hint {
    margin-bottom: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--cs-btn-primary-bg) 30%, var(--cs-border));
    background: color-mix(in srgb, var(--cs-btn-primary-bg) 9%, var(--cs-surface));
    color: var(--cs-text);
    border-radius: 0.6rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.app-account-panel {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}

.app-account-head {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--cs-border);
}

.app-account-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    background: color-mix(in srgb, var(--cs-btn-primary-bg) 18%, var(--cs-surface));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.app-account-avatar.app-account-avatar--wa {
    background: #ecfdf5;
    border-color: #86efac;
    color: #15803d;
}

.app-account-title {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--cs-text);
}

.app-account-subtitle {
    font-size: 0.72rem;
    color: var(--cs-text-muted);
}

.app-account-actions {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    gap: 0.45rem;
}

/**
 * Fileira de icones rapidos dentro do menu de conta nos paineis (admin/sis).
 * No desktop os icones ficam no header; esta faixa so existe abaixo do breakpoint md.
 * Classe dedicada evita conflito de cascata com .app-account-actions { display:flex }
 * que sobrescrevia utilitarios Tailwind como md:hidden.
 */
.app-account-quick-actions {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

@media (min-width: 48rem) {
    .app-account-quick-actions {
        display: none;
    }
}

.app-account-links {
    padding: 0.55rem 0.5rem;
}

.app-account-link {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--cs-border);
    border-radius: 0.45rem;
    background: var(--cs-btn-secondary-bg);
    color: var(--cs-btn-secondary-text);
    padding: 0.42rem 0.6rem;
    font-size: 0.73rem;
    font-weight: 600;
    text-decoration: none;
}

.app-account-link svg {
    width: 1.18rem;
    height: 1.18rem;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

.app-account-link + .app-account-link {
    margin-top: 0.35rem;
}

.app-account-link:hover {
    background: var(--cs-btn-secondary-hover);
}

.app-main-nav-link svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.38rem;
    vertical-align: -0.1rem;
}

.app-account-links .app-account-link:nth-child(1) svg,
.app-main-nav .app-main-nav-link:nth-child(1) svg {
    color: #2563eb;
}

.app-account-links .app-account-link:nth-child(2) svg,
.app-main-nav .app-main-nav-link:nth-child(2) svg {
    color: #0ea5e9;
}

.app-account-links .app-account-link:nth-child(3) svg,
.app-main-nav .app-main-nav-link:nth-child(3) svg {
    color: #7c3aed;
}

.app-account-links .app-account-link:nth-child(4) svg,
.app-main-nav .app-main-nav-link:nth-child(4) svg {
    color: #ea580c;
}

.app-main-nav .app-main-nav-link:nth-child(5) svg {
    color: #0f766e;
}

.app-main-nav .app-main-nav-link:nth-child(6) svg {
    color: #b45309;
}

.app-main-nav .app-main-nav-link:nth-child(7) svg {
    color: #db2777;
}

.app-main-nav .app-main-nav-link:nth-child(8) svg {
    color: #059669;
}

.app-main-nav .app-main-nav-link:nth-child(9) svg {
    color: #7c2d12;
}

.app-main-nav .app-main-nav-link.is-active svg {
    color: var(--cs-btn-primary-bg);
}

[data-crud-start="form"] [data-crud-open],
[data-crud-state="form"] [data-crud-open] {
    display: none;
}

.hp-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.22rem 0.58rem;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.hp-status-pill.is-active,
.hp-status-pill.is-paid,
.hp-status-pill.is-verified {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}

.hp-status-pill.is-pending,
.hp-status-pill.is-paused,
.hp-status-pill.is-review {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.hp-status-pill.is-inactive,
.hp-status-pill.is-canceled {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.3);
}

.hp-status-pill.is-neutral {
    background: rgba(148, 163, 184, 0.14);
    color: var(--cs-text-muted);
    border-color: rgba(148, 163, 184, 0.28);
}

.app-account-logout {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-account-logout svg {
    width: 1rem;
    height: 1rem;
}