/*
 * Primitivas visuais do app interno (admin/cliente) — redesign de layout sobre o design system
 * (docs/knowledge-base/design-system): mesmos tokens de cor/tipografia/espaçamento, composição nova.
 * Prefixo `ui-` para classes reaproveitáveis; telas só acrescentam o que é específico delas em CSS isolado.
 *
 * Princípios: superfícies em camadas (sem tabela, sem borda em tudo), título em display grande,
 * ação primária em pílula, o vermelho do poste (`--accent`) só para "novo"/"agora".
 */

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Página ---------- */

/* Escopado em .shell: a Landing da plataforma também usa `.pagina` (wrapper próprio, sem grid). */
.shell .pagina {
    display: grid;
    /* minmax(0, 1fr): sem isso a coluna implícita (auto) cresce até o min-content do filho mais largo
       (grade da Agenda, chips, tabelas) e estoura a viewport no mobile. */
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
    gap: var(--space-24);
    padding-top: var(--space-8);
}

.pagina-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-16);
}

.pagina-cab__texto {
    min-width: 0;
}

.shell .pagina-cab__titulo {
    margin: 0;
    font-size: clamp(34px, 6vw, 52px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-wrap: balance;
}

.pagina-cab__sub {
    margin: var(--space-8) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.pagina-cab__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

/* ---------- Botões ---------- */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 44px;
    padding: 0 var(--space-16);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--ease-out);
}

.ui-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.ui-btn:disabled,
.ui-btn[aria-disabled='true'] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ui-btn--primario {
    background-color: var(--primary);
    color: #FFFFFF;
}

.ui-btn--primario:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.ui-btn--secundario {
    background-color: var(--bg);
    border-color: var(--border);
}

.ui-btn--secundario:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.ui-btn--perigo {
    border-color: var(--danger);
    color: var(--danger);
}

.ui-btn--perigo:hover:not(:disabled) {
    background-color: var(--danger);
    color: var(--bg);
}

.ui-btn--fantasma:hover:not(:disabled) {
    background-color: var(--bg-subtle);
}

.ui-btn--whatsapp {
    background-color: var(--success);
    color: var(--bg);
}

.ui-btn--whatsapp:hover:not(:disabled) {
    filter: brightness(1.08);
}

.ui-btn--sm {
    min-height: 36px;
    padding: 0 var(--space-12);
}

.ui-btn--icone {
    width: 44px;
    padding: 0;
}

/* ---------- Superfícies ---------- */

.ui-card {
    padding: var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background-color: var(--bg-subtle);
}

.ui-card--elevado {
    background-color: var(--bg);
    border-color: transparent;
    box-shadow: var(--shadow-1);
}

.ui-card--destaque {
    border-color: transparent;
    background-color: var(--primary-subtle);
}

.ui-grade {
    display: grid;
    gap: var(--space-16);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ui-grade--2,
    .ui-grade--3,
    .ui-grade--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ui-grade--3 { grid-template-columns: repeat(3, 1fr); }
    .ui-grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Lista em linhas (no lugar de tabela) ---------- */

.ui-lista {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-linha {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-m);
    background-color: var(--bg-subtle);
    min-width: 0;
}

.ui-linha__corpo {
    flex: 1;
    min-width: 0;
}

.ui-linha__titulo {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-linha__meta {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.ui-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-subtle);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    object-fit: cover;
}

/* ---------- Badges e chips ---------- */

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.ui-badge--agendado { background-color: var(--primary-subtle); color: color-mix(in srgb, var(--primary) 65%, var(--text)); }
.ui-badge--concluido { background-color: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.ui-badge--cancelado { background-color: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ui-badge--novo { background-color: var(--accent); color: #FFFFFF; }

.ui-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.ui-chip[aria-pressed='true'],
.ui-chip.ativo {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
    color: var(--primary);
}

/* ---------- Campos ---------- */

.ui-campo {
    display: grid;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-input {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background-color: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
}

.ui-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

/* ---------- Estado vazio ---------- */

.ui-vazio {
    display: grid;
    justify-items: center;
    gap: var(--space-8);
    padding: var(--space-32) var(--space-16);
    border: 1px dashed var(--border);
    border-radius: var(--radius-m);
    color: var(--text-muted);
    text-align: center;
}

.ui-vazio__icone {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bg-subtle);
}

.ui-vazio p {
    margin: 0;
    max-width: 36ch;
}

/* ---------- Skeleton ---------- */

.ui-skeleton {
    border-radius: var(--radius-m);
    background-color: var(--bg-subtle);
    animation: ui-pulso 1.2s ease-in-out infinite;
}

@keyframes ui-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ---------- Listra de poste (motivo da marca): só para "novo" ---------- */

.ui-listra {
    background-image: repeating-linear-gradient(
        135deg,
        var(--accent) 0 6px,
        #FFFFFF 6px 12px,
        var(--primary) 12px 18px,
        #FFFFFF 18px 24px
    );
    background-size: 34px 34px;
    animation: ui-listra-gira 1.6s linear infinite;
}

@keyframes ui-listra-gira {
    to { background-position: 34px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-listra,
    .ui-skeleton {
        animation: none;
    }

    .ui-btn {
        transition: none;
    }
}

/* ---------- Alvos de toque no mobile: botões pequenos e chips chegam a 44px ---------- */

@media (max-width: 639px) {
    .ui-btn--sm,
    .ui-chip {
        min-height: 44px;
    }
}