/* Fluent 2 Design System - Global Styles */

/* SfSidebar – modo Push: sidebar ocupa espaço no fluxo (não sobrepõe) */
.layout-body .e-sidebar {
    position: relative !important;
    flex: 0 0 auto;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

.layout-body .e-sidebar::-webkit-scrollbar {
    display: none !important;
}

/* Esconde scrollbar de qualquer elemento interno do sidebar */
.layout-body .e-sidebar *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

.layout-body .e-sidebar * {
    scrollbar-width: none !important;
}

/* Quando o sidebar está fechado, colapsa sem ocupar espaço */
.layout-body .e-sidebar.e-close {
    width: 0 !important;
    overflow: hidden !important;
}

/* Modo Over (mobile): sidebar fixo no viewport, cobre o header sem espremer o conteúdo.
   Classe correta do Syncfusion é .e-over, não .e-sidebar-type-over. */
.layout-body .e-sidebar.e-over {
    position: fixed !important;
    height: 100dvh !important;
    top: 0 !important;
}

/* Backdrop cobre tudo incluindo o header */
.e-sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    height: 100dvh !important;
}

/* Neutraliza o margin-left inline que o Syncfusion aplica ao conteúdo em modo Push.
   O espaço já é gerenciado pelo flexbox (sidebar position: relative no fluxo). */
.layout-body .main-content {
    margin-left: 0 !important;
}


html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    /* Desabilita pull-to-refresh e bounce scroll no mobile */
    overscroll-behavior: none;
}

a {
    transition: color 0.2s ease;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Fluent 2 Focus Styles */
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Remove default focus for mouse users */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Fluent 2 Typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 16px 0;
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

h4 {
    font-size: 16px;
    font-weight: 600;
}

h1:focus, h2:focus, h3:focus, h4:focus {
    outline: none;
}

/* Fluent 2 Form Validation */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--success-color, #107c10);
    outline-offset: 2px;
}

.invalid {
    outline: 2px solid var(--error-color, #d13438);
    outline-offset: 2px;
}

.validation-message {
    color: var(--error-color, #d13438);
    font-size: 12px;
    margin-top: 4px;
}

/* Fluent 2 Error Boundary */
.blazor-error-boundary {
    background: linear-gradient(135deg, #d13438 0%, #a4262c 100%);
    padding: 16px 20px 16px 60px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 4px;
}

.blazor-error-boundary::before {
    content: '?';
    position: absolute;
    left: 20px;
    font-size: 28px;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

input::placeholder,
textarea::placeholder {
    opacity: 0.6;
}

/* Fluent 2-style utility classes */
.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

/* Gap utilities */
.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

/* Grid gap utilities (for row) */
.g-3 > * {
    padding-right: calc(1rem * .5);
    padding-left: calc(1rem * .5);
    margin-top: 1rem;
}

/* More margin utilities */
.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

/* Justify content */
.justify-content-between {
    justify-content: space-between;
}

/* Font weight */
.fw-bold {
    font-weight: 600;
}

/* Padding utilities */
.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 1rem;
}

.p-4 {
    padding: 1.5rem;
}

/* Text decoration */
.text-decoration-none {
    text-decoration: none;
}

/* Fix Syncfusion components - prevent cursor blinking on non-editable areas */
.e-card-header,
.e-card-header-caption,
.e-card-header-title,
.e-card-content,
.e-card,
div:not([contenteditable="true"]):not(input):not(textarea),
span:not([contenteditable="true"]) {
    -webkit-user-modify: read-only !important;
    caret-color: transparent !important;
}

/* Allow caret only on actual input elements */
input,
textarea,
[contenteditable="true"],
.e-input-group input,
.e-textbox,
.e-float-input input {
    -webkit-user-modify: read-write !important;
    caret-color: auto !important;
}

/* Restore editability for spans inside contenteditable (e.g. RichTextEditor font-size spans) */
[contenteditable="true"] span {
    -webkit-user-modify: read-write !important;
    caret-color: auto !important;
}

/* Syncfusion Grid - Clickable rows */
.e-grid .e-row {
    cursor: pointer;
}

/* Dashboard */
.dashboard-summary-card {
    width: 100%;
    min-height: 260px;
    border: 0;
    border-radius: 18px;
    padding: 24px;
    color: #1f1f1f;
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-summary-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.14);
}

.dashboard-summary-card:disabled {
    cursor: default;
    opacity: 0.85;
}

.dashboard-summary-card-warning {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 38%),
        linear-gradient(135deg, #fff7df 0%, #ffd36a 100%);
}

.dashboard-summary-card-danger {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 38%),
        linear-gradient(135deg, #fff1f0 0%, #ff8f7e 100%);
}

.dashboard-summary-card-info {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.68), transparent 38%),
        linear-gradient(135deg, #edf7ff 0%, #75c7ff 100%);
}

.dashboard-summary-card-purple {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 38%),
        linear-gradient(135deg, #f3eeff 0%, #b48aff 100%);
}

.dashboard-summary-kicker {
    color: #8a4b00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-summary-title {
    margin: 8px 0;
    font-size: 24px;
}

.dashboard-summary-text {
    margin: 0;
    color: #6f4a00;
}

.dashboard-summary-icon {
    color: #b45f00;
    font-size: 28px;
}

.dashboard-summary-number {
    margin-top: 28px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-summary-action {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #6f3d00;
    font-weight: 700;
}

.dashboard-patient-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-patient-preview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dashboard-patient-preview-item:last-child {
    border-bottom: 0;
}

.dashboard-patient-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.dashboard-metric-card {
    min-height: 150px;
    border-radius: 16px;
    padding: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f8fb 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.dashboard-metric-card strong {
    display: block;
    margin-top: 14px;
    font-size: 44px;
    line-height: 1;
}

.dashboard-metric-card small {
    color: #6b7280;
}

.dashboard-metric-label {
    color: #52616f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-card-icon {
    color: #52616f;
    font-size: 24px;
}

.dashboard-convenio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.dashboard-convenio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.dashboard-days-critical {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fde7e9;
    color: #a4262c;
    font-weight: 800;
}

/* ══════════════════════════════════════════════════════
   WhatsApp Histórico — lista de conversas
   ══════════════════════════════════════════════════════ */

.wpp-historico-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.wpp-historico-lista::-webkit-scrollbar {
    width: 5px;
}

.wpp-historico-lista::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

.wpp-historico-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: default;
    transition: background .15s;
}

.wpp-historico-item:hover {
    background: #f5f5f5;
}

.wpp-historico-item[role="button"] {
    cursor: pointer;
}

.wpp-historico-item.wpp-ativa {
    border-left: 3px solid #25d366;
    padding-left: 9px;
}

.wpp-historico-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e8f5e9;
    color: #388e3c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.wpp-historico-corpo {
    flex: 1;
    min-width: 0;
}

.wpp-historico-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wpp-historico-nome {
    font-weight: 600;
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.wpp-historico-hora {
    font-size: .75rem;
    color: #888;
    white-space: nowrap;
    margin-left: auto;
}

.wpp-historico-subtitulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.wpp-historico-preview {
    font-size: .8rem;
    color: #666;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpp-preview-icon {
    font-size: 10px;
    color: #888;
    margin-right: 2px;
}

.wpp-historico-msgs {
    font-size: .75rem;
    color: #999;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Badges de fluxo */
.wpp-fluxo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}

.wpp-fluxo-confirmacao-agendamento { background: #e3f2fd; color: #1565c0; }
.wpp-fluxo-menu-paciente           { background: #e8f5e9; color: #2e7d32; }
.wpp-fluxo-destravar-porta         { background: #fff3e0; color: #e65100; }
.wpp-fluxo-menu-desconhecido       { background: #f3e5f5; color: #6a1b9a; }

.wpp-ativa-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    background: #c8e6c9;
    color: #1b5e20;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Thread (mensagens expandidas) ── */

.wpp-thread {
    margin: 4px 0 8px 46px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpp-thread-msg {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.wpp-msg-saida {
    flex-direction: row-reverse;
}

.wpp-thread-balao {
    max-width: 75%;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: .8rem;
    line-height: 1.4;
    word-break: break-word;
}

.wpp-msg-saida .wpp-thread-balao {
    background: #dcf8c6;
    color: #111;
    border-bottom-right-radius: 2px;
}

.wpp-msg-entrada .wpp-thread-balao {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #111;
    border-bottom-left-radius: 2px;
}

.wpp-opcao-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: .75rem;
    font-weight: 600;
}

.wpp-thread-hora {
    font-size: .68rem;
    color: #aaa;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   Próximos Aniversariantes — lista no dashboard
   ══════════════════════════════════════════════════════ */

.dashboard-aniversariantes-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.dashboard-aniversariantes-lista::-webkit-scrollbar {
    width: 5px;
}

.dashboard-aniversariantes-lista::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

.dashboard-aniversariante-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}

.dashboard-aniversariante-item:hover {
    background: #f5f5f5;
}

.dashboard-aniversariante-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffd36a 100%);
    border: 1px solid #f5c04a;
}

.dashboard-aniversariante-dia {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    color: #7a4700;
}

.dashboard-aniversariante-mes {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9a6200;
}

.dashboard-aniversariante-info {
    flex: 1;
    min-width: 0;
}

.dashboard-aniversariante-info .fw-semibold {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
}

.dashboard-aniversariante-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f0f0f0;
    color: #555;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-aniversariante-countdown.dashboard-aniversariante-hoje {
    background: linear-gradient(135deg, #fff3cd 0%, #ffd36a 100%);
    color: #7a4700;
    font-size: .8rem;
}

.dashboard-paciente-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    background: #e9ecef;
    color: #495057;
}