/*
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/assets/styles.scss
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
*/

/* ── Imports ─────────────────────────── */
@use 'primeicons/primeicons.css';
@use '@/assets/layout/layout.scss';

/* ── Design Tokens (Tailwind override) ─ */
:root {
    --text-xs: 0.8rem;
}

/* ── Dark mode (opcional) ───────────── */
.app-dark {
    --text-xs: 0.82rem;
}

/* ── Responsivo (opcional) ─────────── */
@media (min-width: 768px) {
    :root {
        --text-xs: 0.85rem;
    }
}

/* Custom PrimeVue */

.p-floatlabel-on:has(input.p-filled) label,
.p-floatlabel-on:has(.p-inputwrapper-filled) label,
.p-floatlabel-on:has(textarea.p-filled) label {
    padding: 2px 4px !important;
    border: 1px solid var(--p-inputtext-border-color);
    border-radius: 4px !important;
    left: 10px !important;
    top: -2px !important;
}

.p-floatlabel > label[for="f_nasc"] {
	left: 44px !important;
}

.p-floatlabel:has(input.p-filled) label, .p-floatlabel:has(textarea.p-filled) label, .p-floatlabel:has(.p-inputwrapper-filled) label {
    color: var(--p-floatlabel-focus-color) !important;
}

.p-dialog-header {
    padding: 1rem !important;
}

.p-dialog-footer {
    padding: 0.6rem !important;
}

/* Highlight pulse (acionado externamente via classe JS) */
@keyframes highlight-pulse {
    0% {
        box-shadow:
            0 0 0 0 rgba(99, 102, 241, 0.7),
            0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    40% {
        box-shadow:
            0 0 0 8px rgba(99, 102, 241, 0.3),
            0 0 0 16px rgba(99, 102, 241, 0.1);
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(99, 102, 241, 0),
            0 0 0 0 rgba(99, 102, 241, 0);
    }
}
.notif-card--highlight {
    animation: highlight-pulse 1s ease-out 3;
    border-color: rgba(99, 102, 241, 0.6) !important;
}
.agenda-altura {
    height: calc(90vh - 150px);
    overflow-y: auto;
}
.fade-up-enter-active {
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}
.fade-up-enter-from {
    opacity: 0;
    transform: translateY(16px);
}
.fade-up-enter-active .anim-child {
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
    transition-delay: var(--delay, 0ms);
}
.fade-up-enter-from .anim-child {
    opacity: 0;
    transform: translateY(16px);
}
.menu-enter-from {
    opacity: 0;
    transform: translateY(4px) scale(1.5);
}

.menu-enter-active {
    transition:
        opacity 140ms ease,
        transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-enter-to {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── LoadedPhraseBlock ───────────────── */
.loaded-phrase-block {
    border: 2px dashed var(--surface-border);
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 3%, var(--surface-card));
}
.loaded-phrase-block__header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.loaded-phrase-block__icon {
    font-size: 0.9rem;
    color: var(--green-500, #22c55e);
}
.loaded-phrase-block__title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color-secondary);
}
.loaded-phrase-block__text {
    font-size: 0.88rem;
    color: var(--text-color);
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}
.loaded-phrase-in-enter-active {
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.loaded-phrase-in-enter-from {
    opacity: 0;
    transform: translateY(10px);
}

.cfg-card__icon-wrap {
    border: 1px solid var(--surface-border);
    background: var(--surface-ground);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
/* ── Dash cards ───────────────────────────────────── */

.dash-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.dash-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}
.dash-card__head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-ground);
}
.dash-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.dash-card__sub {
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    margin-top: 1px;
}
.dash-card__badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}
.dash-card__body {
    flex: 1;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 88px;
}
.dash-card__foot {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--surface-border);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-color, #6366f1);
    cursor: pointer;
    transition: background 0.1s;
}
.dash-card__foot:hover {
    background: var(--surface-ground);
}

/* ── Dash items (dentro dos cards) ───────────────── */
.dash-item {
    display: flex;
    align-items: center;
}
.dash-item__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
.dash-item__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-color);
}
.dash-item__sub {
    font-size: 0.8125rem;
    color: var(--text-color-secondary);
    margin-top: 1px;
}
.dash-item__actions {
    display: flex;
    gap: 0.375rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Empty state dos cards ────────────────────────── */
.dash-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-secondary);
    padding: 0.5rem 0;
}

/* ── Tabela ────────────────────────── */
.p-datatable .p-datatable-table-container {
    border-radius: 0;
}

.p-datatable th {
    background: var(--surface-ground) !important;
    font-size: 0.82rem;
}

.p-datatable td {
    font-size: 0.85rem;
}

.p-datatable tr.row-new-highlight td {
    background-color: #f0fdf4 !important;
}

.app-dark .p-datatable tr.row-new-highlight td {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
}

/* ── Agenda Preview ────────────────────────── */
.app-dark .fc-scrollgrid-section-sticky > * {
    background: var(--surface-hover);
}

/* Bordas do FullCalendar — solução pra "borda dupla":
   - células (td/th) MANTÊM a borda → forma a grade visual
   - contêiner .fc-scrollgrid ZERA → sem isso, a borda externa fica
     dobrada (1px do contêiner + 1px da célula da ponta = 2px na borda) */
.app-dark .fc-theme-standard td,
.app-dark .fc-theme-standard th {
    border: 1px solid var(--surface-border);
}

.fc-theme-standard .fc-scrollgrid,
.app-dark .fc-theme-standard .fc-scrollgrid {
    border: none;
}

.app-dark .fc-timegrid-event-harness-inset .fc-timegrid-event,
.app-dark .fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: 0 0 0 1px #000000;
}

/* ── Subheader padrão (cfg-subheader) ───────────────────────────
   Header canônico usado nas páginas SaaS e de configurações.
   Referência: SaasAddonsPage, SaasNotificationTemplatesPage. */
.cfg-subheader {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.875rem 1rem;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
    position: relative;
    overflow: hidden;
}
.cfg-subheader::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
    filter: blur(20px);
    pointer-events: none;
}
.cfg-subheader__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
    color: var(--primary-color, #6366f1);
    font-size: 0.85rem;
}
.cfg-subheader__title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
    font-size: 0.75rem;
    color: var(--text-color-secondary);
    opacity: 0.85;
}
