/**
 * Estilos do Base Plugin - DPS
 * Material Design 3 Expressive
 *
 * Este arquivo segue o sistema de design M3 Expressive do DPS:
 * - Todas as cores via var(--dps-color-*) / var(--dps-*) tokens
 * - Formas via var(--dps-shape-*) tokens
 * - Elevação via var(--dps-elevation-*) tokens
 * - Movimento via var(--dps-motion-*) tokens
 * - Tipografia via var(--dps-font-*) / var(--dps-typescale-*) tokens
 *
 * Perfil: Expressive (formulário público)
 * - Fontes expressivas (Outfit / Source Sans 3)
 *
 * Requer: dps-design-tokens.css carregado antes deste arquivo.
 *
 * Compatibilidade:
 * - Suporta navegadores modernos (Chrome 88+, Firefox 78+, Safari 14+, Edge 88+)
 * - Fallbacks incluídos para Edge Legacy e versões mais antigas
 * - Seletores :has() possuem fallback via classes JS (.is-selected, .is-checked)
 * - accent-color tem fallback para aparência nativa do navegador
 *
 * Breakpoints:
 * - 1200px: Desktop grande
 * - 1024px: Tablet grande
 * - 768px: Tablet (prioridade)
 * - 640px: Mobile
 * - 480px: Mobile pequeno
 *
 * @package Desi_Pet_Shower_Base
 * @since 1.0.0
 * @version 2.0.0 Migração completa para Material 3 Expressive design tokens
 */

.dps-base-wrapper {
    margin: 20px 0;
    font-family: var(--dps-font-body);
    max-width: 100%;
    box-sizing: border-box;
}
/* Container de navegação - inclui abas e seletor mobile */
.dps-nav-container {
    position: relative;
    margin-bottom: 0;
}

/* Toggle mobile: oculto por padrão em desktop (display: block via media query < 768px).
   Especificidade aumentada (.dps-base-wrapper .dps-nav-container) para evitar sobrescrita por temas. */
.dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle {
    display: none;
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
    cursor: pointer;
    text-align: left;
    position: relative;
}

.dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--dps-color-on-surface-variant);
    transition: transform var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}

.dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

.dps-base-wrapper .dps-nav-container .dps-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--dps-color-outline-variant);
}
.dps-base-wrapper .dps-nav-container .dps-nav li {
    margin: 0;
}
.dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--dps-color-outline-variant);
    border-bottom: none;
    background: var(--dps-color-surface-container-low);
    text-decoration: none;
    color: var(--dps-color-on-surface-variant);
    border-top-left-radius: var(--dps-shape-extra-small);
    border-top-right-radius: var(--dps-shape-extra-small);
    font-weight: 500;
    font-size: 14px;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    white-space: nowrap;
}
.dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link:hover {
    background: var(--dps-color-surface-container-lowest);
    color: var(--dps-color-on-surface);
    border-color: var(--dps-color-outline-variant);
}
.dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link.active {
    background: var(--dps-color-surface-container-lowest);
    border-color: var(--dps-color-outline-variant);
    color: var(--dps-color-primary);
    font-weight: 500;
}

/* === NAVEGAÇÃO RESPONSIVA - DESKTOP (min-width: 769px) === */
/* Garantir que em desktop: toggle oculto, abas visíveis */
@media (min-width: 769px) {
    /* Ocultar toggle em desktop - !important para evitar overrides de temas WordPress */
    .dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle {
        display: none !important;
    }
    
    /* Garantir que abas estejam visíveis em desktop */
    .dps-base-wrapper .dps-nav-container .dps-nav {
        display: flex !important;
    }
}
.dps-section {
    display: none;
    border: 1px solid var(--dps-color-outline-variant);
    border-top: none;
    padding: 24px;
    background: var(--dps-color-surface-container-lowest);
    border-radius: 0 0 var(--dps-shape-small) var(--dps-shape-small);
}
.dps-section.active {
    display: block;
}

/* Containers reutilizáveis para manter o padrão visual da aba Agendamentos em todo o sistema */
.dps-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.dps-surface {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 4px solid var(--dps-color-primary);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
    box-shadow: var(--dps-elevation-1);
}

.dps-surface--neutral {
    border-left-color: var(--dps-color-outline-variant);
    background: var(--dps-color-surface-container-low);
}

.dps-surface--info {
    border-left-color: var(--dps-color-primary);
    background: var(--dps-color-surface-container-low);
}

.dps-surface--success {
    border-left-color: var(--dps-color-success);
    background: var(--dps-color-surface-container-low);
}

.dps-surface--warning {
    border-left-color: var(--dps-color-warning);
    background: var(--dps-color-surface-container-low);
}

.dps-surface--danger {
    border-left-color: var(--dps-color-error);
    background: var(--dps-color-surface-container-low);
}

.dps-surface__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-surface__description {
    margin: 0 0 16px 0;
    color: var(--dps-color-on-surface-variant);
    font-size: 14px;
}

@media (min-width: 1024px) {
    .dps-section-grid {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

/* ================================================
   SISTEMA DE DESIGN MODERNO - TÍTULOS E SUBTÍTULOS
   ================================================ */

/* Título principal de seção (H2) - Estilo moderno e elegante */
.dps-section-header {
    margin-bottom: 24px;
}

.dps-section-header__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dps-color-outline-variant);
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    line-height: 1.3;
}

.dps-section-header__subtitle {
    font-size: 14px;
    color: var(--dps-color-on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

/* Subtítulos de seção (H3, H4) - Estilo moderno */
.dps-section h3,
.dps-subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    margin: 32px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-section h4,
.dps-subsection-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    margin: 24px 0 12px 0;
}

/* ================================================
   SISTEMA DE DESIGN MODERNO - BOTÕES
   ================================================ */

/* Botão Principal (Primary) - Gradiente azul moderno */
.dps-btn-primary,
.dps-section .button-primary,
.dps-base-wrapper .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border: none;
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dps-color-primary) 25%, transparent);
    text-shadow: none;
}

.dps-btn-primary:hover,
.dps-section .button-primary:hover,
.dps-base-wrapper .button-primary:hover {
    background: var(--dps-color-primary-hover);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-primary) 35%, transparent);
    transform: translateY(-1px);
    color: var(--dps-color-on-primary);
    text-decoration: none;
}

.dps-btn-primary:active,
.dps-section .button-primary:active,
.dps-base-wrapper .button-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--dps-color-primary) 20%, transparent);
}

.dps-btn-primary:focus,
.dps-section .button-primary:focus,
.dps-base-wrapper .button-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--dps-color-primary) 25%, transparent);
}

/* Botão Secundário (Secondary) - Gradiente elegante cinza/azul */
.dps-btn-secondary,
.dps-section .button-secondary,
.dps-base-wrapper .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--dps-color-surface-container-low);
    color: var(--dps-color-on-surface-variant);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), transform var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    text-shadow: none;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--dps-color-on-surface) 8%, transparent);
}

.dps-btn-secondary:hover,
.dps-section .button-secondary:hover,
.dps-base-wrapper .button-secondary:hover {
    background: var(--dps-color-surface-container-high);
    border-color: var(--dps-color-outline);
    color: var(--dps-color-on-surface);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--dps-color-on-surface) 12%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.dps-btn-secondary:active,
.dps-section .button-secondary:active,
.dps-base-wrapper .button-secondary:active {
    transform: translateY(0);
    box-shadow: var(--dps-elevation-1);
}

.dps-btn-secondary:focus,
.dps-section .button-secondary:focus,
.dps-base-wrapper .button-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-secondary) 20%, transparent), 0 1px 3px color-mix(in srgb, var(--dps-color-on-surface) 8%, transparent);
}

/* Botão de Sucesso (Success) - Gradiente verde moderno */
.dps-btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--dps-color-success);
    color: var(--dps-color-on-success);
    border: none;
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dps-color-success) 25%, transparent);
}

.dps-btn-success:hover {
    background: var(--dps-color-success);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-success) 35%, transparent);
    transform: translateY(-1px);
    color: var(--dps-color-on-success);
}

.dps-btn-success:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--dps-color-success) 20%, transparent);
}

.dps-btn-success:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-success) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--dps-color-success) 25%, transparent);
}

/* Botão com ícone - wrapper para ícone decorativo */
.dps-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: color-mix(in srgb, var(--dps-color-on-primary) 20%, transparent);
    border-radius: var(--dps-shape-small);
    font-size: 14px;
}

/* Tamanhos de botão alternativos */
.dps-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: var(--dps-shape-small);
}

.dps-btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

/* Botão desabilitado */
.dps-btn-primary:disabled,
.dps-btn-secondary:disabled,
.dps-btn-success:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Container de ações com espaçamento consistente */
.dps-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

/* === SEÇÃO DE AGENDAMENTOS - CABEÇALHO VISUAL === */
#dps-section-agendas > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dps-color-outline-variant);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

#dps-section-agendas > h2 .dps-section-title__icon {
    font-size: 1.2em;
    line-height: 1;
}

.dps-form p {
    margin-bottom: var(--dps-space-4);
}
.dps-form input[type="text"],
.dps-form input[type="email"],
.dps-form input[type="tel"],
.dps-form input[type="date"],
.dps-form input[type="time"],
.dps-form input[type="number"],
.dps-form select,
.dps-form textarea {
    width: 100%;
    padding: var(--dps-space-4);
    min-height: 48px;
    box-sizing: border-box;
    border: 1px solid var(--dps-color-outline);
    border-radius: var(--dps-shape-input);
    font-size: var(--dps-typescale-body-large-size);
    line-height: var(--dps-typescale-body-large-line);
    color: var(--dps-color-on-surface);
    background: var(--dps-color-surface-container-lowest);
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form input[type="text"]:hover,
.dps-form input[type="email"]:hover,
.dps-form input[type="tel"]:hover,
.dps-form input[type="date"]:hover,
.dps-form input[type="time"]:hover,
.dps-form input[type="number"]:hover,
.dps-form select:hover,
.dps-form textarea:hover {
    border-color: var(--dps-color-on-surface);
}

.dps-form input[type="text"]:focus,
.dps-form input[type="email"]:focus,
.dps-form input[type="tel"]:focus,
.dps-form input[type="date"]:focus,
.dps-form input[type="time"]:focus,
.dps-form input[type="number"]:focus,
.dps-form select:focus,
.dps-form textarea:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    border-width: 2px;
    /* Compensate 1px increase (2px - 1px border) to maintain consistent element dimensions */
    padding: calc(var(--dps-space-4) - 1px);
    box-shadow: none;
}

.dps-form input::placeholder,
.dps-form textarea::placeholder {
    color: var(--dps-color-on-surface-variant);
}

/* Largura máxima para campos específicos - evita inputs muito largos em telas grandes */
.dps-form .dps-client-select,
.dps-form #appointment_date,
.dps-form #appointment_time {
    max-width: 480px;
    width: 100%;
}
.dps-form textarea {
    resize: vertical;
}
.dps-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    margin-bottom: 0;
}
.dps-table th,
.dps-table td {
    border: 1px solid var(--dps-color-outline-variant);
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
}
.dps-table th {
    background: var(--dps-color-surface-container-low);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--dps-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.dps-table td {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dps-color-on-surface);
}

.dps-table tbody tr {
    transition: background-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-table tbody tr:hover,
.dps-table tbody tr.status-pendente:hover,
.dps-table tbody tr.status-finalizado:hover,
.dps-table tbody tr.status-finalizado_pago:hover,
.dps-table tbody tr.status-cancelado:hover {
    background-color: color-mix(in srgb, var(--dps-color-on-surface) 2%, transparent);
}

/* Wrapper para prevenir overflow horizontal em tabelas */
.dps-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
    border-radius: var(--dps-shape-small);
    border: 1px solid var(--dps-color-outline-variant);
    background: var(--dps-color-surface-container-lowest);
}

.dps-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.dps-table-wrapper::-webkit-scrollbar-track {
    background: var(--dps-color-surface-container-low);
    border-radius: var(--dps-shape-extra-small);
}

.dps-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
}

.dps-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--dps-color-outline);
}

.dps-table-wrapper .dps-table {
    margin: 0;
    border: 0;
}

.dps-table-wrapper .dps-table th:first-child,
.dps-table-wrapper .dps-table td:first-child {
    border-left: 0;
}

.dps-table-wrapper .dps-table th:last-child,
.dps-table-wrapper .dps-table td:last-child {
    border-right: 0;
}

.dps-table-wrapper .dps-table thead tr:first-child th {
    border-top: 0;
}

.dps-table-wrapper .dps-table tbody tr:last-child td {
    border-bottom: 0;
}

/* === AÇÕES NA TABELA (EDITAR, DUPLICAR, EXCLUIR) === */
.dps-table td a {
    color: var(--dps-color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 4px 6px;
    border-radius: var(--dps-shape-extra-small);
    transition: background-color var(--dps-motion-duration-short-3) var(--dps-motion-easing-standard), color var(--dps-motion-duration-short-3) var(--dps-motion-easing-standard);
}

.dps-table td a:hover {
    background-color: var(--dps-color-primary-container);
    color: var(--dps-color-primary-pressed);
    text-decoration: none;
}

/* Link de Excluir com cor vermelha 
   Nota: Usa seletor de onclick como fallback para templates existentes.
   Preferir usar a classe .dps-action-delete quando possível. */
.dps-table td a[onclick*="confirm"],
.dps-table td a.dps-action-delete {
    color: var(--dps-color-error);
}

.dps-table td a[onclick*="confirm"]:hover,
.dps-table td a.dps-action-delete:hover {
    background-color: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

/* Separadores mais sutis */
.dps-table td:last-child {
    white-space: nowrap;
}

.dps-search {
    width: 100%;
    padding: 6px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.dps-history-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}
/* Filtros de período rápido */
.dps-history-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}
.dps-history-quick-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    margin-right: 4px;
}
.dps-history-quick-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: var(--dps-shape-extra-small) !important;
}
.dps-history-quick-btn.active {
    background: var(--dps-color-primary) !important;
    border-color: var(--dps-color-primary) !important;
    color: var(--dps-color-on-primary) !important;
}
.dps-history-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.dps-history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dps-history-filter label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}
.dps-history-filter input,
.dps-history-filter select {
    min-width: 170px;
}
.dps-history-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dps-history-summary {
    background: var(--dps-color-primary-container);
    border-left: 4px solid var(--dps-color-primary);
    padding: 12px 16px;
    border-radius: 0 var(--dps-shape-small) var(--dps-shape-small) 0;
    margin-bottom: 16px;
}

.dps-history-summary strong {
    color: var(--dps-color-primary-hover);
    font-size: 14px;
    font-weight: 500;
}
/* Estilos para ordenação de tabelas */
.dps-table-sortable .dps-sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}
.dps-table-sortable .dps-sortable:hover {
    background-color: var(--dps-color-outline-variant);
}
.dps-sort-icon {
    font-size: 10px;
    color: var(--dps-color-outline);
    margin-left: 4px;
}
.dps-sortable.asc .dps-sort-icon::after {
    content: '↑';
}
.dps-sortable.desc .dps-sort-icon::after {
    content: '↓';
}
.dps-sortable.asc .dps-sort-icon,
.dps-sortable.desc .dps-sort-icon {
    color: var(--dps-color-primary);
}
/* === PET PICKER MELHORADO === */
.dps-pet-picker {
    border: 2px solid var(--dps-color-outline-variant);
    background: var(--dps-color-surface-container-lowest);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    margin-bottom: 16px;
    margin-top: 8px;
}

.dps-pet-picker--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.dps-pet-picker--warning {
    border-color: var(--dps-color-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-error) 15%, transparent);
}

/* Título do pet picker */
.dps-pet-picker > p:first-child {
    margin-top: 0;
    margin-bottom: 8px;
}

.dps-pet-picker .dps-selection-counter {
    margin-left: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dps-color-primary);
    background: var(--dps-color-primary-container);
    padding: 2px 8px;
    border-radius: var(--dps-shape-medium);
}

/* Barra de busca de pets */
.dps-pet-picker .dps-pet-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 0.9rem;
    background: var(--dps-color-surface-container-low) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 10px center;
    background-size: 16px;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-pet-picker .dps-pet-search input:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 15%, transparent);
    background-color: var(--dps-color-surface-container-lowest);
}

.dps-pet-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dps-color-surface-container);
}

.dps-pet-picker-actions .button {
    font-size: 0.8rem;
}

.dps-pet-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.dps-pet-list::-webkit-scrollbar {
    width: 6px;
}

.dps-pet-list::-webkit-scrollbar-thumb {
    background: var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
}

.dps-pet-list::-webkit-scrollbar-track {
    background: var(--dps-color-surface-container);
}

.dps-pet-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border: 2px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    background: var(--dps-color-surface-container-lowest);
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-pet-option:hover {
    border-color: var(--dps-color-primary);
    background: var(--dps-color-primary-container);
}

/* Pet selecionado - fallback usando classe .is-selected adicionada via JS */
.dps-pet-option.is-selected,
.dps-pet-option:has(input:checked) {
    border-color: var(--dps-color-primary);
    background: var(--dps-color-surface-container-low);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 15%, transparent);
}

/* Fallback adicional para browsers antigos usando input:checked + labels */
.dps-pet-option input[type="checkbox"]:checked ~ .dps-pet-name {
    color: var(--dps-color-primary-pressed);
}

.dps-pet-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    accent-color: var(--dps-color-primary);
}

.dps-pet-option .dps-pet-name {
    font-weight: 500;
    color: var(--dps-color-on-surface);
    font-size: 0.95rem;
}

.dps-pet-option .dps-pet-owner,
.dps-pet-option .dps-pet-breed,
.dps-pet-option .dps-pet-size {
    font-size: 0.8rem;
    color: var(--dps-color-on-surface-variant);
}

.dps-pet-option .dps-pet-breed::before,
.dps-pet-option .dps-pet-owner::before,
.dps-pet-option .dps-pet-size::before {
    content: '';
}

/* === CONTAINER PRINCIPAL DE AGENDAMENTOS - LAYOUT LIMPO === */
.dps-appointments {
    margin-top: 24px;
    padding: 0;
}

.dps-appointments > h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--dps-color-outline-variant);
}

.dps-appointments > h3::before {
    content: '📋';
    font-size: 1.2em;
}

/* Campo de busca estilizado */
.dps-appointments .dps-appointments-search {
    margin-bottom: 20px;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 0.95rem;
    background: var(--dps-color-surface-container-lowest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 12px center;
    background-size: 18px;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-appointments .dps-appointments-search:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 15%, transparent);
}

.dps-appointments .dps-appointments-search::placeholder {
    color: var(--dps-color-outline);
}

.dps-appointments-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--dps-color-on-surface-variant);
    background: var(--dps-color-surface-container-low);
    border: 1px dashed var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    margin-top: 20px;
}

/* Empty state melhorado */
.dps-empty-state {
    padding: 40px 24px;
    text-align: center;
    background: var(--dps-color-surface-container-low);
    border: 1px dashed var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    margin: 20px 0;
}

.dps-empty-state__icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.7;
}

.dps-empty-state__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    margin: 0 0 8px 0;
}

.dps-empty-state__description {
    font-size: 14px;
    color: var(--dps-color-on-surface-variant);
    margin: 0 0 16px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.dps-empty-state__action {
    display: inline-block;
    margin-top: 8px;
}

/* === GRUPOS DE AGENDAMENTOS - LAYOUT MELHORADO === */
.dps-appointments-group {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: var(--dps-shape-small);
    border-left: 4px solid var(--dps-color-primary);
    background: var(--dps-color-surface-container-lowest);
    box-shadow: var(--dps-elevation-1);
}

.dps-appointments-group h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Badge de contagem nos grupos */
.dps-group-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--dps-shape-medium);
    background: var(--dps-color-outline-variant);
    color: var(--dps-color-on-surface);
}

/* Grupo: Agendamentos Pendentes (dias anteriores) - ALERTA */
.dps-appointments-group--overdue {
    border-left-color: var(--dps-color-error);
    background: var(--dps-color-surface-container-low);
}

.dps-appointments-group--overdue h4 {
    color: var(--dps-color-on-error-container);
}

.dps-appointments-group--overdue h4::before {
    content: '⚠️';
    font-size: 1.1em;
}

.dps-appointments-group--overdue .dps-group-badge {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

/* Grupo: Atendimentos finalizados hoje */
.dps-appointments-group--finalized {
    border-left-color: var(--dps-color-success);
    background: var(--dps-color-surface-container-low);
}

.dps-appointments-group--finalized h4 {
    color: var(--dps-color-on-success-container);
}

.dps-appointments-group--finalized .dps-group-badge {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-appointments-group--finalized h4::before {
    content: '✅';
    font-size: 1em;
}

/* Grupo: Próximos atendimentos */
.dps-appointments-group--upcoming {
    border-left-color: var(--dps-color-primary);
    background: var(--dps-color-surface-container-low);
}

.dps-appointments-group--upcoming h4 {
    color: var(--dps-color-primary-pressed);
}

.dps-appointments-group--upcoming .dps-group-badge {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-primary-pressed);
}

.dps-appointments-group--upcoming h4::before {
    content: '📅';
    font-size: 1em;
}

/* === TABELA DE AGENDAMENTOS === */
/* Nota: border-collapse: separate é necessário para que as bordas laterais coloridas
   nas células funcionem corretamente. border-spacing: 0 mantém o visual sem gaps. */
.dps-appointments .dps-table {
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
}

.dps-appointments .dps-table th,
.dps-appointments .dps-table td {
    padding: 10px 12px;
}

.dps-appointments .dps-table th {
    background: var(--dps-color-surface-container-low);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === CORES DE STATUS DAS LINHAS === */
/* Nota: border-left aplicada apenas na primeira célula para melhor compatibilidade
   com border-collapse e temas que possam sobrescrever estilos de linha */

/* Pendente: laranja/amarelo com borda laranja */
.dps-table tr.status-pendente {
    background: var(--dps-color-warning-container);
}

.dps-table tr.status-pendente td:first-child {
    border-left: 4px solid var(--dps-color-warning);
}

/* Finalizado: cinza neutro com borda azul */
.dps-table tr.status-finalizado {
    background: var(--dps-color-surface-container-low);
}

.dps-table tr.status-finalizado td:first-child {
    border-left: 4px solid var(--dps-color-primary);
}

/* Finalizado e Pago: verde claro com borda verde */
.dps-table tr.status-finalizado_pago,
.dps-table tr.status-finalizado\ e\ pago {
    background: var(--dps-color-success-container);
}

.dps-table tr.status-finalizado_pago td:first-child,
.dps-table tr.status-finalizado\ e\ pago td:first-child {
    border-left: 4px solid var(--dps-color-success);
}

/* Cancelado: estilo esmaecido com borda vermelha */
.dps-table tr.status-cancelado {
    background: var(--dps-color-error-container);
    opacity: 0.7;
}

.dps-table tr.status-cancelado td:first-child {
    border-left: 4px solid var(--dps-color-error);
}

.dps-table tr.status-cancelado td {
    text-decoration: line-through;
    color: var(--dps-color-outline);
}
/* === FORMULÁRIO DE STATUS INLINE === */
.dps-inline-status-form {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dps-inline-status-form select {
    min-width: 150px;
    padding: 6px 10px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    background: var(--dps-color-surface-container-lowest);
}

.dps-inline-status-form select:hover {
    border-color: var(--dps-color-primary);
}

.dps-inline-status-form select:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 15%, transparent);
}

.dps-inline-status-form.is-updating select {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

.dps-inline-status-form.is-updating::after {
    content: '⏳';
    font-size: 0.9rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === ALERTAS === */
.dps-alert {
    padding: 16px 20px;
    border-left: 4px solid var(--dps-color-warning);
    background: var(--dps-color-surface-container-lowest);
    margin: 20px 0;
    border-radius: var(--dps-shape-small);
    color: var(--dps-color-on-surface);
    box-shadow: var(--dps-elevation-1);
}
.dps-alert--danger {
    border-left-color: var(--dps-color-error);
}
.dps-alert--pending {
    border-left-color: var(--dps-color-warning);
}
.dps-alert--info {
    border-left-color: var(--dps-color-primary);
}
.dps-alert--success {
    border-left-color: var(--dps-color-success);
}
.dps-alert strong {
    display: inline-block;
    margin-bottom: 6px;
}
.dps-client-select--warning {
    border-color: var(--dps-color-warning) !important; /* Override default border regardless of state */
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-surface);
}

/* Responsividade para tablets e mobile */
@media (max-width: 1024px) {
    .dps-history-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .dps-history-quick-filters {
        flex-wrap: wrap;
        gap: 6px;
    }
    .dps-history-quick-btn {
        flex: 1 1 auto;
        min-width: 70px;
    }
    .dps-history-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .dps-history-filters input,
    .dps-history-filters select {
        min-width: 0;
        width: 100%;
    }

    /* Garantir que tabelas tenham largura mínima em tablets */
    .dps-table-wrapper .dps-table {
        min-width: 620px;
    }
    
    /* Ajustar espaçamento em grupos de agendamentos */
    .dps-appointments-group {
        margin-top: 16px;
        margin-bottom: 16px;
        padding: 14px;
        border-radius: var(--dps-shape-small);
    }
    
    .dps-appointments-group h4 {
        font-size: 1.05rem;
        margin-bottom: 12px;
    }
    
    /* Campo de busca em telas menores */
    .dps-appointments .dps-appointments-search {
        padding-left: 36px;
        background-size: 16px;
    }
}

@media (max-width: 768px) {
    /* Prevenir overflow horizontal */
    .dps-base-wrapper {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .dps-section {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .dps-form {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .dps-surface {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .dps-section-grid {
        max-width: 100%;
    }
    
    /* === NAVEGAÇÃO RESPONSIVA - DROPDOWN EM MOBILE === */
    /* Mostrar o botão toggle em mobile - !important para garantir sobrescrita de temas */
    .dps-base-wrapper .dps-nav-container .dps-nav-mobile-toggle {
        display: block !important;
        margin-bottom: 0;
    }
    
    /* Ocultar abas por padrão em mobile (apenas mostrar quando toggle está aberto) */
    /* !important para garantir que sobrescreva estilos base e de temas */
    .dps-base-wrapper .dps-nav-container .dps-nav {
        display: none !important;
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        border: 1px solid var(--dps-color-outline-variant);
        border-top: none;
        border-radius: 0 0 var(--dps-shape-extra-small) var(--dps-shape-extra-small);
        background: var(--dps-color-surface-container-lowest);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-on-surface) 10%, transparent);
        /* 300px permite exibir ~6-7 itens de 44px cada (padrão de altura de toque em mobile)
           Se houver mais itens, scroll vertical é habilitado */
        max-height: 300px;
        overflow-y: auto;
    }
    
    /* Mostrar abas quando container está aberto */
    .dps-base-wrapper .dps-nav-container.is-open .dps-nav {
        display: flex !important;
    }
    
    .dps-base-wrapper .dps-nav-container.is-open .dps-nav-mobile-toggle {
        border-radius: var(--dps-shape-extra-small) var(--dps-shape-extra-small) 0 0;
        border-bottom: none;
    }
    
    .dps-base-wrapper .dps-nav-container .dps-nav li {
        margin: 0;
        width: 100%;
    }
    
    .dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link {
        display: block;
        width: 100%;
        padding: 12px 16px;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--dps-color-surface-container);
        background: var(--dps-color-surface-container-lowest);
        text-align: left;
        font-size: 15px;
    }
    
    .dps-base-wrapper .dps-nav-container .dps-nav li:last-child .dps-tab-link {
        border-bottom: none;
    }
    
    .dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link:hover,
    .dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link:focus {
        background: var(--dps-color-surface-container-low);
        color: var(--dps-color-primary);
    }
    
    .dps-base-wrapper .dps-nav-container .dps-nav .dps-tab-link.active {
        background: var(--dps-color-primary-container);
        color: var(--dps-color-primary);
        font-weight: 500;
    }
    /* === FIM NAVEGAÇÃO RESPONSIVA === */
    
    /* Ajustar padding das células em mobile */
    .dps-table th,
    .dps-table td {
        padding: 8px 6px;
        font-size: 0.875rem;
    }
    
    /* Esconder colunas menos importantes em mobile */
    .dps-table .hide-mobile {
        display: none;
    }
    
    /* Ajustar tabela dentro do wrapper */
    .dps-table-wrapper .dps-table {
        min-width: 600px;
        white-space: nowrap;
    }
    
    /* Grid de formulários empilha em coluna única */
    .dps-form-row--2col,
    .dps-form-row--3col {
        grid-template-columns: 1fr;
    }
    
    /* Ajustes para fieldsets */
    .dps-fieldset {
        padding: var(--dps-space-4);
        margin-bottom: var(--dps-space-4);
    }
    
    /* Reduzir padding em inputs e selects para mobile */
    .dps-form input[type="text"],
    .dps-form input[type="email"],
    .dps-form input[type="tel"],
    .dps-form input[type="date"],
    .dps-form input[type="time"],
    .dps-form input[type="number"],
    .dps-form select,
    .dps-form textarea {
        padding: var(--dps-space-3);
        font-size: 16px; /* iOS: prevents auto-zoom on input focus (Apple HIG requires ≥16px) */
        min-height: 44px;
    }
    
    /* Inputs de valor em mobile */
    .dps-form input.dps-input-money {
        width: 100%;
        max-width: 180px;
    }
    
    /* Compactar grupos de agendamentos em mobile */
    .dps-appointments-group {
        padding: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    /* Tabelas ainda mais compactas em mobile pequeno */
    .dps-table th,
    .dps-table td {
        padding: 6px 4px;
        font-size: 0.8125rem;
    }
    
    .dps-table-wrapper .dps-table {
        min-width: 450px;
    }
    
    /* Reduzir ainda mais o espaçamento dos grupos */
    .dps-appointments-group {
        padding: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
        border-radius: var(--dps-shape-extra-small);
    }
    
    .dps-appointments-group h4 {
        font-size: 0.95rem;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    
    .dps-appointments-group h4::before {
        font-size: 0.9em;
    }
    
    .dps-group-badge {
        font-size: 0.7rem;
        min-width: 18px;
        height: 18px;
    }
    
    /* Campo de busca em mobile pequeno */
    .dps-appointments .dps-appointments-search {
        padding: 10px 12px 10px 34px;
        font-size: 16px; /* Evita zoom no iOS */
        background-size: 14px;
        background-position: 10px center;
    }
    
    /* Título principal em mobile */
    .dps-appointments > h3 {
        font-size: 1.15rem;
        padding-bottom: 10px;
    }
    
    .dps-appointments > h3::before {
        font-size: 1em;
    }
}

/* Grid responsivo para formulários */
.dps-form-row {
    display: grid;
    gap: var(--dps-space-4);
    margin-bottom: var(--dps-space-4);
}

.dps-form-row--2col {
    grid-template-columns: 1fr 1fr;
}

.dps-form-row--3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.dps-form-row--2col .dps-form-field,
.dps-form-row--3col .dps-form-field {
    min-width: 0;
}

.dps-form-col {
    margin: 0;
}

/* === FORMULÁRIO DE AGENDAMENTO - LAYOUT MELHORADO === */

/* Fieldsets padronizados — M3 field-group pattern */
.dps-fieldset {
    border: none;
    border-left: 3px solid var(--dps-color-primary);
    padding: var(--dps-space-5) var(--dps-space-6);
    margin: 0 0 var(--dps-space-6);
    border-radius: 0 var(--dps-shape-medium) var(--dps-shape-medium) 0;
    background: var(--dps-color-surface-container-low);
}

.dps-fieldset__legend {
    font-weight: var(--dps-typescale-title-medium-weight);
    color: var(--dps-color-on-surface);
    padding: 0;
    margin: 0 0 var(--dps-space-4);
    float: none;
    width: 100%;
    font-size: var(--dps-typescale-title-medium-size);
    line-height: var(--dps-typescale-title-medium-line);
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
}

/* Ícones para cada seção do formulário */
.dps-fieldset__legend::before {
    font-size: 1.1em;
}

/* Descrição do fieldset */
.dps-fieldset__description {
    font-size: var(--dps-typescale-body-medium-size);
    line-height: var(--dps-typescale-body-medium-line);
    color: var(--dps-color-on-surface-variant);
    margin: 0 0 var(--dps-space-4);
}

/* Labels de formulário — M3 Label Large */
.dps-form label {
    display: block;
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    line-height: var(--dps-typescale-label-large-line);
    color: var(--dps-color-on-surface-variant);
    margin-bottom: var(--dps-space-2);
}

.dps-form label.dps-checkbox-label {
    display: inline-flex;
    font-weight: 400;
    color: var(--dps-color-on-surface);
    margin-bottom: 0;
}

/* ---- Appointment form section colorization (scoped to .dps-surface context) ---- */

/* Seção 1: Tipo de Agendamento */
.dps-surface .dps-fieldset:nth-of-type(1) {
    border-left-color: var(--dps-color-tertiary);
}

.dps-surface .dps-fieldset:nth-of-type(1) .dps-fieldset__legend {
    color: var(--dps-color-on-tertiary-container);
}

/* Seção 2: Cliente e Pet(s) */
.dps-surface .dps-fieldset:nth-of-type(2) {
    border-left-color: var(--dps-color-primary);
}

.dps-surface .dps-fieldset:nth-of-type(2) .dps-fieldset__legend {
    color: var(--dps-color-primary-pressed);
}

/* Seção 3: Data e Horário */
.dps-surface .dps-fieldset:nth-of-type(3) {
    border-left-color: var(--dps-color-warning);
}

.dps-surface .dps-fieldset:nth-of-type(3) .dps-fieldset__legend {
    color: var(--dps-color-on-warning-container);
}

/* Seção 4: Serviços e Extras */
.dps-surface .dps-fieldset:nth-of-type(4) {
    border-left-color: var(--dps-color-success);
}

.dps-surface .dps-fieldset:nth-of-type(4) .dps-fieldset__legend {
    color: var(--dps-color-on-success-container);
}

/* Seção 5: Pagamento (agendamentos passados) */
#dps-past-payment-wrapper {
    border-left-color: var(--dps-color-error);
}

#dps-past-payment-wrapper .dps-fieldset__legend {
    color: var(--dps-color-on-error-container);
}

/* Seção 6: Observações */
.dps-surface .dps-fieldset:last-of-type {
    border-left-color: var(--dps-color-on-surface-variant);
}

.dps-surface .dps-fieldset:last-of-type .dps-fieldset__legend {
    color: var(--dps-color-on-surface);
}

/* Indicador de campo obrigatório */
.dps-required {
    color: var(--dps-color-error);
    font-weight: 500;
}

/* Checkbox melhorado — M3: inline-flex, 18px, accent-color, weight 400 */
.dps-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    cursor: pointer;
    font-weight: 400;
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-color-on-surface);
    padding: var(--dps-space-1) 0;
    background: none;
    border: none;
    transition: color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-checkbox-label:hover {
    color: var(--dps-color-primary);
}

.dps-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dps-color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.dps-checkbox-text {
    flex: 1;
}

/* Upload de arquivo estilizado — M3 card-like container */
.dps-file-upload {
    margin-bottom: var(--dps-space-4);
}

.dps-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.dps-file-upload__label {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-3) var(--dps-space-5);
    background: var(--dps-color-surface-container-low);
    border: 2px dashed var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-medium);
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    color: var(--dps-color-on-surface-variant);
}

.dps-file-upload__label:hover {
    border-color: var(--dps-color-primary);
    background: var(--dps-color-primary-container);
    color: var(--dps-color-on-primary-container);
}

.dps-file-upload__text {
    display: inline-block;
}

.dps-file-upload__preview {
    margin-top: var(--dps-space-3);
    max-width: 200px;
}

.dps-file-upload__preview img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dps-shape-medium);
    border: 1px solid var(--dps-color-outline-variant);
}

/* Botão de submit — M3 filled button (pill) */
.dps-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dps-space-2);
    min-width: 160px;
    min-height: 40px;
    padding: var(--dps-space-3) var(--dps-space-6);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border: none;
    border-radius: var(--dps-shape-button);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    cursor: pointer;
    box-shadow: var(--dps-elevation-button);
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    text-shadow: none;
}

.dps-submit-btn:hover {
    background: var(--dps-color-primary-hover);
    box-shadow: var(--dps-elevation-2);
    transform: translateY(-1px);
    color: var(--dps-color-on-primary);
}

.dps-submit-btn:active {
    background: var(--dps-color-primary-pressed);
    transform: translateY(0);
    box-shadow: var(--dps-elevation-1);
}

.dps-submit-btn:disabled {
    opacity: var(--dps-state-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Variante secundária — M3 outlined/tonal */
.dps-submit-btn--secondary {
    background: var(--dps-color-surface-container-high);
    color: var(--dps-color-on-surface);
}

.dps-submit-btn--secondary:hover {
    background: var(--dps-color-surface-container-highest);
}

/* Dicas de preenchimento de campos */
.dps-field-hint {
    font-size: var(--dps-typescale-body-small-size);
    color: var(--dps-color-on-surface-variant);
    margin-top: var(--dps-space-1);
    margin-bottom: 0;
}

/* Campos condicionais */
.dps-conditional-field {
    margin-top: 12px;
    padding-left: 24px;
}

/* Form field wrapper */
.dps-form-field {
    margin-bottom: 12px;
}

/* Indicador visual de valor */
.dps-value-indicator {
    display: inline-flex;
    align-items: center;
}

.dps-value-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
    font-weight: 500;
    font-size: 13px;
    border-radius: var(--dps-shape-large);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Input com prefixo R$ */
.dps-input-with-prefix {
    display: inline-flex;
    align-items: center;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
    overflow: hidden;
}

/* Estilo para .dps-input-prefix como span DENTRO de .dps-input-with-prefix */
.dps-input-with-prefix .dps-input-prefix {
    padding: 8px 8px 8px 12px;
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface-variant);
    font-size: 14px;
    font-weight: 500;
    border-right: 1px solid var(--dps-color-outline-variant);
}

.dps-input-with-prefix input {
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 12px 8px 8px !important;
    box-shadow: none !important;
}

.dps-input-with-prefix input:focus {
    outline: none;
}

.dps-input-with-prefix:focus-within {
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dps-color-primary) 20%, transparent);
}

/* === SEÇÃO TAXIDOG INDEPENDENTE === */
.dps-taxidog-section {
    margin: 24px 0;
}

.dps-taxidog-card {
    padding: 20px 24px;
    background: var(--dps-color-warning-container);
    border: 2px solid var(--dps-color-warning);
    border-radius: var(--dps-shape-large);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-warning) 12%, transparent);
    transition: all var(--dps-motion-duration-medium-1) var(--dps-motion-easing-standard);
}

.dps-taxidog-card[data-taxidog-active="1"] {
    background: var(--dps-color-success-container);
    border-color: var(--dps-color-success);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-success) 15%, transparent);
}

.dps-taxidog-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dps-taxidog-card__icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dps-taxidog-icon {
    font-size: 28px;
    line-height: 1;
}

.dps-taxidog-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-warning-container);
}

.dps-taxidog-card[data-taxidog-active="1"] .dps-taxidog-title {
    color: var(--dps-color-on-success-container);
}

.dps-taxidog-description {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: var(--dps-color-on-warning-container);
    opacity: 0.9;
}

.dps-taxidog-card[data-taxidog-active="1"] .dps-taxidog-description {
    color: var(--dps-color-success);
}

/* Toggle Switch */
.dps-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.dps-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dps-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dps-color-outline-variant);
    transition: var(--dps-motion-duration-medium-1) var(--dps-motion-easing-standard);
    border-radius: var(--dps-shape-full);
}

.dps-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: var(--dps-color-surface-container-lowest);
    transition: var(--dps-motion-duration-medium-1) var(--dps-motion-easing-standard);
    border-radius: 50%;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--dps-color-on-surface) 20%, transparent);
}

.dps-toggle-switch input:checked + .dps-toggle-slider {
    background-color: var(--dps-color-success);
}

.dps-toggle-switch input:checked + .dps-toggle-slider:before {
    transform: translateX(24px);
}

.dps-toggle-switch input:focus + .dps-toggle-slider {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-success) 30%, transparent);
}

.dps-taxidog-card__value {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed color-mix(in srgb, var(--dps-color-on-surface) 10%, transparent);
}

.dps-taxidog-value-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    white-space: nowrap;
}

.dps-taxidog-card__value .dps-input-with-prefix {
    flex-shrink: 0;
}

.dps-taxidog-price-input {
    width: 80px !important;
    text-align: right;
}

/* === SEÇÃO DE TOSA (para assinaturas) === */
.dps-tosa-section {
    margin: 16px 0;
}

.dps-tosa-card {
    padding: 20px 24px;
    background: var(--dps-color-warning-container);
    border: 2px solid var(--dps-color-warning);
    border-radius: var(--dps-shape-large);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-warning) 12%, transparent);
    transition: all var(--dps-motion-duration-medium-1) var(--dps-motion-easing-standard);
}

.dps-tosa-card[data-tosa-active="1"] {
    background: var(--dps-color-tertiary-container);
    border-color: var(--dps-color-tertiary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-tertiary) 20%, transparent);
}

.dps-tosa-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dps-tosa-card__icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dps-tosa-icon {
    font-size: 28px;
    line-height: 1;
}

.dps-tosa-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-warning-container);
}

.dps-tosa-card[data-tosa-active="1"] .dps-tosa-title {
    color: var(--dps-color-on-tertiary-container);
}

.dps-tosa-description {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: var(--dps-color-on-warning-container);
    opacity: 0.9;
}

.dps-tosa-card[data-tosa-active="1"] .dps-tosa-description {
    color: var(--dps-color-on-tertiary-container);
}

.dps-tosa-card__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed color-mix(in srgb, var(--dps-color-on-surface) 10%, transparent);
}

.dps-tosa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dps-tosa-field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-tosa-price-input {
    width: 100px !important;
    text-align: right;
}

.dps-tosa-occurrence-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    background: var(--dps-color-surface-container-lowest);
    font-size: 14px;
}

.dps-tosa-field-hint {
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
    margin: 4px 0 0 0;
}

/* Responsividade para o card de tosa */
@media (max-width: 600px) {
    .dps-tosa-card {
        padding: 16px;
    }
    
    .dps-tosa-card__fields {
        grid-template-columns: 1fr;
    }
    
    .dps-tosa-title {
        font-size: 16px;
    }
}

/* === SEÇÃO DE ATRIBUIÇÃO === */
.dps-assignment-fieldset {
    border-left-color: var(--dps-color-tertiary) !important;
    background: var(--dps-color-tertiary-container) !important;
}

.dps-assignment-fieldset .dps-fieldset__legend {
    color: var(--dps-color-tertiary) !important;
}

.dps-groomers-field {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-groomers-field label {
    font-weight: 500;
    color: var(--dps-color-on-surface);
    display: block;
    margin-bottom: 8px;
}

.dps-groomers-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
    background: var(--dps-color-surface-container-lowest);
}

.dps-groomers-select:focus {
    border-color: var(--dps-color-tertiary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dps-color-tertiary) 20%, transparent);
}

/* Inputs de valores monetários */
.dps-form input.dps-input-money {
    width: 120px;
    max-width: 100%;
    text-align: right;
    box-sizing: border-box;
}
.dps-form .dps-service-price,
.dps-form #dps-appointment-total,
.dps-form #dps-subscription-total,
.dps-form #dps-subscription-base,
.dps-form #dps-simple-extra-value,
.dps-form #dps-subscription-extra-value {
    width: 140px;
    max-width: 100%;
    display: inline-block;
}

/* === RESUMO DO AGENDAMENTO - DESTAQUE VISUAL === */
.dps-appointment-summary {
    background: var(--dps-color-success-container);
    border: 2px solid var(--dps-color-success);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
    margin: 32px 0 24px 0;
    position: relative;
}

.dps-appointment-summary__icon {
    font-size: 1.2em;
    line-height: 1;
}

.dps-appointment-summary h3 {
    margin: 0 0 16px 0;
    color: var(--dps-color-on-success-container);
    font-size: 1.15rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-appointment-summary__empty {
    color: var(--dps-color-on-surface-variant);
    font-size: 14px;
    margin: 0;
    padding: 16px;
    text-align: center;
    background: color-mix(in srgb, var(--dps-color-surface-container-lowest) 60%, transparent);
    border-radius: var(--dps-shape-small);
    border: 1px dashed var(--dps-color-outline-variant);
}

.dps-appointment-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 16px;
}

.dps-appointment-summary__list li {
    padding: 10px 12px;
    background: color-mix(in srgb, var(--dps-color-surface-container-lowest) 70%, transparent);
    border-radius: var(--dps-shape-small);
    color: var(--dps-color-on-surface);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.dps-appointment-summary__list li:last-child,
.dps-appointment-summary__list .dps-appointment-summary__notes {
    grid-column: 1 / -1;
}

/* Item de serviços ocupa toda a largura para melhor visualização */
.dps-appointment-summary__list li.dps-summary-services-item {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
}

.dps-appointment-summary__list strong {
    display: inline-block;
    color: var(--dps-color-on-surface-variant);
    font-weight: 500;
    font-size: 0.85rem;
}

.dps-appointment-summary__list [data-summary="price"] {
    color: var(--dps-color-success);
    font-weight: 500;
    font-size: 1.25rem;
}

/* Detalhamento de valores por pet (para agendamentos multi-pet) */
.dps-pet-breakdown {
    display: block;
    color: var(--dps-color-on-surface-variant);
    font-weight: 400;
    font-size: 0.875rem;
    margin-top: 4px;
    font-style: italic;
}

.dps-appointment-summary__notes {
    display: none; /* Hidden by default, shown via JS when notes exist */
}

.dps-appointment-summary__notes [data-summary="notes"] {
    display: block;
    margin-top: 4px;
    color: var(--dps-color-on-surface-variant);
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lista de serviços no resumo - formato visual melhorado */
.dps-summary-services-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dps-summary-services-list li {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-primary-container);
    border-radius: var(--dps-shape-large);
    font-size: 12px;
    font-weight: 500;
    color: var(--dps-color-primary-pressed);
    white-space: nowrap;
}

.dps-summary-services-list li.dps-service-badge--discount {
    background: var(--dps-color-warning-container);
    border-color: var(--dps-color-warning);
    color: var(--dps-color-on-warning-container);
}

/* Mensagens de erro do formulário */
.dps-form-error {
    background: var(--dps-color-error-container);
    border: 1px solid var(--dps-color-error-container);
    border-left: 4px solid var(--dps-color-error);
    border-radius: var(--dps-shape-extra-small);
    padding: 16px;
    margin: 20px 0;
    color: var(--dps-color-on-error-container);
}

.dps-form-error strong {
    display: block;
    margin-bottom: 8px;
    color: var(--dps-color-on-error-container);
}

.dps-form-error ul {
    margin: 0;
    padding-left: 20px;
}

.dps-form-error li {
    margin: 4px 0;
}

.dps-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.dps-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dps-summary-label {
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.dps-summary-value {
    font-size: 16px;
    color: var(--dps-color-on-surface);
    font-weight: 500;
}

.dps-summary-item--highlight .dps-summary-value {
    font-size: 20px;
    color: var(--dps-color-primary);
}

/* Tooltips */
.dps-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: var(--dps-color-on-surface-variant);
    font-size: 14px;
    margin-left: 4px;
}

.dps-tooltip[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dps-color-inverse-surface);
    color: var(--dps-color-inverse-on-surface);
    padding: 8px 12px;
    border-radius: var(--dps-shape-extra-small);
    font-size: 12px;
    white-space: normal;
    max-width: 250px;
    z-index: 10;
    line-height: 1.4;
    font-weight: 400;
}

.dps-tooltip[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--dps-color-inverse-surface);
    z-index: 10;
}

/* === AÇÕES DO FORMULÁRIO - DESTAQUE === */
.dps-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    padding: 24px;
    background: var(--dps-color-surface-container-low);
    border-radius: var(--dps-shape-medium);
    border: 2px solid var(--dps-color-outline-variant);
}

.dps-form-actions .dps-btn {
    min-width: 180px;
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: var(--dps-shape-small);
}

.dps-form-actions .dps-btn--primary {
    background: var(--dps-color-primary);
    border: none;
    color: var(--dps-color-on-primary);
    font-weight: 500;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dps-color-primary) 30%, transparent);
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form-actions .dps-btn--primary:hover {
    background: var(--dps-color-primary-hover);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--dps-color-primary) 40%, transparent);
    transform: translateY(-1px);
}

.dps-form-actions .dps-btn--secondary {
    background: var(--dps-color-surface-container-lowest);
    border: 2px solid var(--dps-color-outline-variant);
    color: var(--dps-color-on-surface-variant);
    font-weight: 500;
}

.dps-form-actions .dps-btn--secondary:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline-variant);
    color: var(--dps-color-on-surface);
}

/* === RADIO BUTTONS ESTILIZADOS - LAYOUT COMPACTO === */
.dps-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.dps-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 2px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    background: var(--dps-color-surface-container-lowest);
    position: relative;
}

.dps-radio-option:hover {
    border-color: var(--dps-color-primary);
    background: var(--dps-color-primary-container);
}

/* Estado selecionado - com fallback usando classe .is-selected para browsers antigos
   Nota: O checkmark visual (✓) é decorativo; o estado selecionado é comunicado
   pelo input radio nativo que é acessível por screen readers */
.dps-radio-option.is-selected,
.dps-radio-option:has(input:checked) {
    border-color: var(--dps-color-primary);
    background: var(--dps-color-surface-container-low);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 15%, transparent);
}

.dps-radio-option.is-selected::before,
.dps-radio-option:has(input:checked)::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 12px;
    color: var(--dps-color-primary);
    font-weight: 500;
    /* aria-hidden via CSS não é possível, mas o input radio nativo
       já comunica o estado selecionado para screen readers */
}

/* Fallback adicional para browsers antigos */
.dps-radio-option input[type="radio"]:checked + .dps-radio-label strong {
    color: var(--dps-color-primary-pressed);
}

.dps-radio-option input[type="radio"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--dps-color-primary);
}

.dps-radio-label {
    flex: 1;
}

.dps-radio-label strong {
    display: block;
    color: var(--dps-color-on-surface);
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.dps-radio-label p {
    margin: 0;
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .dps-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dps-form-actions .dps-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dps-pet-list {
        grid-template-columns: 1fr;
    }
    
    /* Ajustar todos os inputs de formulário em mobile pequeno */
    .dps-form input[type="text"],
    .dps-form input[type="email"],
    .dps-form input[type="date"],
    .dps-form input[type="time"],
    .dps-form input[type="number"],
    .dps-form select {
        font-size: 16px;
        padding: 10px 8px;
    }
    
    /* Textarea também precisa de ajuste */
    .dps-form textarea {
        font-size: 16px;
        padding: 10px 8px;
    }
    
    .dps-alert {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .dps-submit-btn {
        width: 100%;
    }
    
    .dps-conditional-field {
        padding-left: 12px;
    }
    
    .dps-appointment-summary {
        padding: 16px;
        margin: 24px auto 16px auto;
    }
    
    .dps-appointment-summary__list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    /* Reduzir largura mínima dos labels em telas pequenas */
    .dps-appointment-summary__list strong {
        min-width: 100px;
        font-size: 13px;
    }
    
    .dps-appointment-summary__list li {
        font-size: 13px;
        justify-content: flex-start;
    }
    
    .dps-appointment-summary h3 {
        font-size: 16px;
    }
    
    /* Inputs de valor em mobile pequeno */
    .dps-form input.dps-input-money {
        width: 100%;
        max-width: 150px;
        font-size: 16px; /* Evita zoom automático no iOS */
    }
    
    /* Reduzir padding em fieldsets para aproveitar espaço */
    .dps-fieldset {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    /* Labels e textos menores em telas muito pequenas */
    .dps-fieldset__legend {
        font-size: 15px;
    }
}

/* Pet Picker com scroll vertical em mobile/tablet */
@media (max-width: 768px) {
    .dps-pet-list {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--dps-color-outline-variant);
        border-radius: var(--dps-shape-extra-small);
        padding: 8px;
        margin-top: 8px;
    }
    
    .dps-pet-list::-webkit-scrollbar {
        width: 8px;
    }
    
    .dps-pet-list::-webkit-scrollbar-thumb {
        background: var(--dps-color-outline-variant);
        border-radius: var(--dps-shape-extra-small);
    }
    
    .dps-pet-list::-webkit-scrollbar-track {
        background: var(--dps-color-surface-container-low);
    }
}

/* ================================================
   PÁGINA DE DETALHES DO CLIENTE
   ================================================ */

/* Container principal */
.dps-client-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Barra de navegação superior */
.dps-client-nav {
    margin-bottom: 16px;
}

.dps-client-nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dps-color-on-surface-variant);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-client-nav__back:hover {
    color: var(--dps-color-primary);
}

/* Header principal com título e ações primárias */
.dps-client-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.dps-client-header__info {
    flex: 1;
    min-width: 200px;
}

.dps-client-header__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-client-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dps-client-header__primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Painel de Ações Rápidas */
.dps-quick-actions-panel {
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-primary-container);
    border-radius: var(--dps-shape-small);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.dps-quick-actions-panel__header {
    margin-bottom: 16px;
}

.dps-quick-actions-panel__title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-color-primary-pressed);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dps-quick-actions-panel__description {
    margin: 0;
    font-size: 13px;
    color: var(--dps-color-on-surface);
}

.dps-quick-actions-panel__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grupo de ações dentro do painel */
.dps-quick-action-group {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-primary-container);
    border-radius: var(--dps-shape-small);
    padding: 12px 16px;
}

.dps-quick-action-group__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-quick-action-group__icon {
    font-size: 18px;
    line-height: 1;
}

.dps-quick-action-group__title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-quick-action-group__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Ajustes para elementos dentro do painel de ações rápidas */
.dps-quick-actions-panel .dps-consent-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    flex-shrink: 0;
}

.dps-quick-actions-panel .dps-consent-link-container,
.dps-quick-actions-panel .dps-profile-update-link-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-quick-actions-panel .dps-link-expires {
    font-size: 11px;
    color: var(--dps-color-on-surface-variant);
    white-space: nowrap;
}

/* Responsividade do painel de ações rápidas */
@media (max-width: 600px) {
    .dps-quick-action-group__content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dps-quick-action-group__content .dps-btn-action {
        width: 100%;
        justify-content: center;
    }
    
    .dps-quick-action-group__content .dps-consent-link-container,
    .dps-quick-action-group__content .dps-profile-update-link-container {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Legacy: manter compatibilidade com header antigo */
.dps-client-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dps-color-on-surface-variant);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-client-header__back:hover {
    color: var(--dps-color-primary);
}

.dps-client-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cards de resumo/métricas */
.dps-client-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dps-summary-card {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-summary-card--highlight {
    border-left: 4px solid var(--dps-color-primary);
}

.dps-summary-card--warning {
    border-left: 4px solid var(--dps-color-warning);
    background: var(--dps-color-warning-container);
}

.dps-summary-card--success {
    border-left: 4px solid var(--dps-color-success);
}

.dps-summary-card__icon {
    font-size: 24px;
    line-height: 1;
}

.dps-summary-card__value {
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-summary-card__label {
    font-size: 13px;
    color: var(--dps-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Seções de informações */
.dps-client-section {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    margin-bottom: 20px;
    overflow: hidden;
}

.dps-client-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--dps-color-surface-container-low);
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-client-section__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-client-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-medium);
    font-size: 12px;
    font-weight: 500;
    color: var(--dps-color-on-surface-variant);
}

.dps-client-section__actions {
    display: flex;
    gap: 8px;
}

.dps-client-section__content {
    padding: 20px;
}

/* Seção com estilo alternativo para notas */
.dps-client-section--notes {
    background: var(--dps-color-warning-container);
    border-color: var(--dps-color-warning-container);
}

.dps-client-section--notes .dps-client-section__header {
    background: var(--dps-color-warning-container);
    border-bottom-color: var(--dps-color-warning-container);
}

.dps-client-section__subtitle {
    margin: 4px 0 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--dps-color-on-surface-variant);
}

/* Formulário de notas internas */
.dps-notes-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dps-notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 14px;
    font-family: var(--dps-font-body);
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-notes-textarea:focus {
    border-color: var(--dps-color-primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

.dps-notes-textarea::placeholder {
    color: var(--dps-color-outline);
}

.dps-notes-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dps-notes-status {
    font-size: 13px;
    font-weight: 500;
}

.dps-notes-status--success {
    color: var(--dps-color-success);
}

.dps-notes-status--error {
    color: var(--dps-color-error);
}

/* Grid de informações do cliente */
.dps-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.dps-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dps-info-item__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--dps-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.dps-info-item__value {
    font-size: 14px;
    color: var(--dps-color-on-surface);
}

.dps-info-item__value a {
    color: var(--dps-color-primary);
    text-decoration: none;
}

.dps-info-item__value a:hover {
    text-decoration: underline;
}

.dps-info-item--empty .dps-info-item__value {
    color: var(--dps-color-outline);
    font-style: italic;
}

/* Cards de pets */
.dps-pet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.dps-pet-card {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
    transition: box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-pet-card:hover {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dps-color-on-surface) 8%, transparent);
}

.dps-pet-card--aggressive {
    border-left: 4px solid var(--dps-color-error);
}

.dps-pet-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--dps-color-surface-container-low);
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-pet-card__photo {
    width: 64px;
    height: 64px;
    border-radius: var(--dps-shape-small);
    object-fit: cover;
    background: var(--dps-color-outline-variant);
    flex-shrink: 0;
}

.dps-pet-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--dps-color-outline);
}

.dps-pet-card__title {
    flex: 1;
}

.dps-pet-card__name {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-pet-card__subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--dps-color-on-surface-variant);
}

.dps-pet-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--dps-color-error-container);
    color: var(--dps-color-error);
    border-radius: var(--dps-shape-extra-small);
    font-size: 11px;
    font-weight: 500;
}

.dps-pet-card__body {
    padding: 16px;
}

.dps-pet-card__info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dps-pet-card__info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-pet-card__info-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--dps-color-outline);
    text-transform: uppercase;
}

.dps-pet-card__info-value {
    font-size: 13px;
    color: var(--dps-color-on-surface);
}

.dps-pet-card__notes {
    padding: 12px;
    background: var(--dps-color-warning-container);
    border-radius: var(--dps-shape-extra-small);
    font-size: 13px;
    color: var(--dps-color-on-warning-container);
    margin-bottom: 16px;
}

.dps-pet-card__notes::before {
    content: '📋 ';
}

.dps-pet-card__actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--dps-color-outline-variant);
}

.dps-pet-card__actions .button {
    flex: 1;
    text-align: center;
}

/* Tabela de atendimentos melhorada */
.dps-client-section .dps-table-wrapper {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.dps-client-section .dps-table th,
.dps-client-section .dps-table td {
    padding: 12px 16px;
}

/* Status badges em atendimentos */
.dps-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--dps-shape-extra-small);
    font-size: 12px;
    font-weight: 500;
}

.dps-status-badge--paid {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-status-badge--pending {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.dps-status-badge--cancelled {
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface-variant);
}

.dps-status-badge--scheduled {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-on-primary-container);
}

/* Badge de consentimento de tosa */
.dps-consent-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.dps-consent-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--dps-shape-full);
    font-size: 12px;
    font-weight: 500;
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface-variant);
}

.dps-consent-badge--ok {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-consent-badge--missing {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.dps-consent-badge--danger {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

.dps-consent-status__note {
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
}

.dps-consent-warning {
    margin-top: 12px;
}

/* Ações na tabela de atendimentos */
.dps-table .dps-actions-cell {
    white-space: nowrap;
}

.dps-table .dps-actions-cell a {
    color: var(--dps-color-on-surface-variant);
    text-decoration: none;
    font-size: 13px;
}

.dps-table .dps-actions-cell a:hover {
    color: var(--dps-color-primary);
}

/* Botões de ação no header */
.dps-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    color: var(--dps-color-on-surface);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-btn-action:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline-variant);
    color: var(--dps-color-on-surface);
}

.dps-btn-action--primary {
    background: var(--dps-color-primary);
    border-color: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
}

.dps-btn-action--primary:hover {
    background: var(--dps-color-primary-hover);
    border-color: var(--dps-color-primary-hover);
    color: var(--dps-color-on-primary);
}

.dps-btn-action--secondary {
    background: var(--dps-color-primary-container);
    border-color: var(--dps-color-primary);
    color: var(--dps-color-primary-pressed);
}

.dps-btn-action--secondary:hover {
    background: var(--dps-color-primary-container);
    border-color: var(--dps-color-primary-hover);
    color: var(--dps-color-on-surface);
}

.dps-btn-action--danger {
    background: var(--dps-color-error-container);
    border-color: var(--dps-color-error);
    color: var(--dps-color-on-error-container);
}

.dps-btn-action--danger:hover {
    background: var(--dps-color-error-container);
    border-color: var(--dps-color-error);
    color: var(--dps-color-on-error-container);
}

/* Container para link de atualização de perfil */
.dps-profile-update-link-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-link-expires {
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
}

/* Responsividade da página de detalhes */
@media (max-width: 768px) {
    .dps-client-detail {
        padding: 0 12px;
    }
    
    .dps-client-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dps-client-header__title {
        order: -1;
        width: 100%;
    }
    
    .dps-client-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .dps-client-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dps-pet-cards {
        grid-template-columns: 1fr;
    }
    
    .dps-info-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-client-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .dps-client-section__actions {
        width: 100%;
    }
    
    .dps-client-section__actions .button {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .dps-client-summary {
        grid-template-columns: 1fr;
    }
    
    .dps-summary-card {
        padding: 12px;
    }
    
    .dps-pet-card__info {
        grid-template-columns: 1fr;
    }
    
    .dps-pet-card__actions {
        flex-direction: column;
    }
    
    .dps-btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================
   ABA HISTÓRICO - LAYOUT REDESENHADO
   ================================================ */

/* Grid da seção de histórico - sempre uma coluna para melhor legibilidade */
#dps-section-historico .dps-section-grid {
    grid-template-columns: 1fr;
}

/* Header da seção de histórico */
.dps-history-header {
    margin-bottom: 24px;
}

.dps-history-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-history-header__description {
    margin: 0;
    font-size: 14px;
    color: var(--dps-color-on-surface-variant);
}

/* Container de visão geral */
.dps-history-overview {
    margin-bottom: 32px;
}

/* Cards de métricas */
.dps-history-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dps-history-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    transition: box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-history-card:hover {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--dps-color-on-surface) 6%, transparent);
}

.dps-history-card__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dps-color-surface-container-low);
    border-radius: var(--dps-shape-small);
}

.dps-history-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-history-card__value {
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    line-height: 1.2;
}

.dps-history-card__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Variações de cores para cada card */
.dps-history-card--today {
    border-left: 4px solid var(--dps-color-primary);
}

.dps-history-card--today .dps-history-card__icon {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-primary);
}

.dps-history-card--upcoming {
    border-left: 4px solid var(--dps-color-success);
}

.dps-history-card--upcoming .dps-history-card__icon {
    background: var(--dps-color-success-container);
    color: var(--dps-color-success);
}

.dps-history-card--past {
    border-left: 4px solid var(--dps-color-on-surface-variant);
}

.dps-history-card--past .dps-history-card__icon {
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface-variant);
}

.dps-history-card--total {
    border-left: 4px solid var(--dps-color-warning);
}

.dps-history-card--total .dps-history-card__icon {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-warning);
}

.dps-history-card--total .dps-history-card__value {
    color: var(--dps-color-primary);
}

/* Toolbar de filtros redesenhada */
.dps-history-toolbar {
    background: var(--dps-color-surface-container-low);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    padding: 20px;
    margin-bottom: 20px;
}

.dps-history-toolbar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-history-toolbar__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-history-toolbar__actions {
    display: flex;
    gap: 8px;
}

/* Filtros organizados */
.dps-history-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dps-history-filters__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dps-history-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dps-history-filter label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-history-filter input[type="search"],
.dps-history-filter input[type="date"],
.dps-history-filter select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    font-size: 14px;
    color: var(--dps-color-on-surface);
    background: var(--dps-color-surface-container-lowest);
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-history-filter input:focus,
.dps-history-filter select:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

.dps-history-filter--search {
    grid-column: 1 / -1;
}

.dps-history-filter--checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-top: 28px;
}

.dps-history-filter--checkbox .dps-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    cursor: pointer;
}

.dps-history-filter--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

/* Botões de período rápido */
.dps-history-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-history-quick-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    margin-right: 4px;
}

.dps-history-quick-btn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    border-radius: var(--dps-shape-small) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.dps-history-quick-btn:hover {
    background: var(--dps-color-outline-variant) !important;
}

.dps-history-quick-btn.active {
    background: var(--dps-color-primary) !important;
    border-color: var(--dps-color-primary) !important;
    color: var(--dps-color-on-primary) !important;
}

/* Responsividade da aba Histórico */
@media (max-width: 1024px) {
    .dps-history-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dps-history-filters__row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dps-history-filter--checkbox {
        grid-column: 1 / -1;
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .dps-history-cards {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .dps-history-card {
        padding: 16px;
        gap: 12px;
    }
    
    .dps-history-card__icon {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    
    .dps-history-card__value {
        font-size: 20px;
    }
    
    .dps-history-card__label {
        font-size: 11px;
    }
    
    .dps-history-toolbar {
        padding: 16px;
    }
    
    .dps-history-toolbar__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .dps-history-toolbar__actions {
        width: 100%;
    }
    
    .dps-history-toolbar__actions .button {
        flex: 1;
    }
    
    .dps-history-filters__row {
        grid-template-columns: 1fr;
    }
    
    .dps-history-quick-filters {
        flex-wrap: wrap;
    }
    
    .dps-history-quick-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 80px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dps-history-cards {
        grid-template-columns: 1fr;
    }
    
    .dps-history-card {
        padding: 14px;
    }
    
    .dps-history-card__value {
        font-size: 18px;
    }
    
    .dps-history-quick-btn {
        flex: 1 1 100%;
    }
}

/* ================================================
   LISTAGEM DE CLIENTES E PETS - LAYOUT MELHORADO
   ================================================ */

/* Header de listas */
.dps-list-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 20px 0;
    padding-top: 16px;
    border-top: 1px solid var(--dps-color-outline-variant);
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

.dps-list-header__icon {
    font-size: 1.2em;
}

.dps-list-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-medium);
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-color-on-surface-variant);
}

/* Toolbar de listas */
.dps-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.dps-list-toolbar .dps-search {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}

.dps-filter-control select {
    min-width: 180px;
}

.dps-inline-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: grid;
    gap: 10px;
}

.dps-inline-stats li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dps-color-on-surface);
}

.dps-inline-stats li strong {
    font-size: 16px;
}

/* Variante de painel para cards de informação - usado em seções Clientes e Pets */
.dps-inline-stats--panel {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 16px;
}

.dps-inline-stats--panel li {
    align-items: flex-start;
    justify-content: space-between;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    padding: 14px 16px;
    gap: 12px;
}

.dps-inline-stats__label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
}

.dps-inline-stats__value {
    font-size: 22px;
    color: var(--dps-color-on-surface);
    line-height: 1;
}

/* Ajustes específicos da aba Clientes */
#dps-section-clientes .dps-section-grid {
    grid-template-columns: 1fr;
}

#dps-section-clientes .dps-surface {
    padding: 24px;
}

#dps-section-clientes .dps-actions__note {
    margin: 0;
    color: var(--dps-color-on-surface-variant);
    font-size: 13px;
}

#dps-section-clientes .dps-clients-list-card {
    gap: 16px;
}

#dps-section-clientes .dps-clients-list-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#dps-section-clientes .dps-clients-list-card .dps-surface__description {
    margin-bottom: 4px;
}

#dps-section-clientes .dps-list-header {
    margin: 0;
    padding-top: 0;
}

#dps-section-clientes .dps-list-toolbar {
    margin-bottom: 0;
    padding: 12px;
    background: var(--dps-color-surface-container-low);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
}

#dps-section-clientes .dps-table-wrapper {
    margin-top: 4px;
}

#dps-section-clientes .dps-table--clients th,
#dps-section-clientes .dps-table--clients td {
    vertical-align: middle;
}

#dps-section-clientes .dps-table--clients th {
    color: var(--dps-color-on-surface-variant);
    font-weight: 500;
}

#dps-section-clientes .dps-table--clients td {
    color: var(--dps-color-on-surface);
    font-size: 14px;
}

#dps-section-clientes .dps-table__col--actions {
    text-align: right;
}

#dps-section-clientes .dps-table__col--actions .dps-actions {
    justify-content: flex-end;
    gap: 8px;
}

#dps-section-clientes .dps-table__col--name .dps-status-badge {
    margin-left: 8px;
}

/* Card de edição de cliente */
#dps-section-clientes .dps-clients-edit-card {
    max-width: 800px;
}

#dps-section-clientes .dps-clients-edit-card .dps-surface__description {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#dps-section-clientes .dps-cancel-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dps-color-on-surface-variant);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 10px;
    background: var(--dps-color-surface-container);
    border-radius: var(--dps-shape-extra-small);
    transition: all var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

#dps-section-clientes .dps-cancel-edit:hover {
    color: var(--dps-color-error);
    background: var(--dps-color-error-container);
}

/* Título da seção */
.dps-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dps-color-outline-variant);
    font-size: 24px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    line-height: 1.3;
}

.dps-section-title__icon {
    font-size: 1.1em;
}

/* Ajustes específicos da aba Pets */
#dps-section-pets .dps-section-title__icon {
    font-size: 1.2em;
}

#dps-section-pets .dps-section-header__subtitle {
    margin: -6px 0 22px 0;
    max-width: 920px;
    line-height: 1.6;
}

/* Layout empilhado como na aba Clientes */
#dps-section-pets .dps-section-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

#dps-section-pets .dps-surface {
    padding: 24px;
}

/* Seção do formulário ao final */
#dps-section-pets .dps-pets-form-section {
    margin-top: 24px;
}

/* Card de edição de pet */
#dps-section-pets .dps-pets-edit-card .dps-surface__description {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Estatísticas de agendamentos na lista de pets */
.dps-pet-appointments-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-pet-appointments-count {
    font-weight: 500;
    color: var(--dps-color-on-surface);
    font-size: 14px;
}

.dps-pet-last-appointment {
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
}

.dps-pet-no-appointments {
    font-size: 13px;
}

/* Card de lista de pets */
#dps-section-pets .dps-pets-list-card .dps-surface__description {
    margin-bottom: 4px;
}

@media (min-width: 1200px) {
    #dps-section-pets .dps-section-header__subtitle {
        margin-bottom: 26px;
    }

    #dps-section-pets .dps-section-grid {
        gap: 24px;
    }
}

/* Células especiais na tabela */
.dps-pet-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dps-pet-cell__badge {
    font-size: 14px;
}

.dps-pet-cell__name {
    font-weight: 500;
}

/* Badge de espécie */
.dps-species-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

/* Badge de porte/tamanho */
.dps-size-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--dps-shape-extra-small);
    font-size: 12px;
    font-weight: 500;
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface-variant);
}

.dps-size-badge--pequeno {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-on-primary-container);
}

.dps-size-badge--medio {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.dps-size-badge--grande {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

/* Badge de pets (contagem) */
.dps-pets-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
    border-radius: var(--dps-shape-extra-small);
    font-size: 13px;
    font-weight: 500;
}

/* Link para adicionar pet */
.dps-add-pet-link {
    color: var(--dps-color-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.dps-add-pet-link:hover {
    color: var(--dps-color-primary-pressed);
    text-decoration: underline;
}

/* Linha de pet agressivo */
.dps-pet-row--aggressive {
    background: var(--dps-color-error-container);
}

.dps-pet-row--aggressive td:first-child {
    border-left: 4px solid var(--dps-color-error);
}

/* Ações na tabela */
.dps-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Variante empilhada para cards de informação */
.dps-actions--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.dps-actions--stacked .button {
    width: 100%;
    justify-content: center;
}

/* Variante inline para botões de ação compactos e elegantes */
.dps-actions--inline {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.dps-actions--inline .button {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
}

.dps-action-separator {
    color: var(--dps-color-outline-variant);
    font-size: 12px;
}

.dps-action-link {
    color: var(--dps-color-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: var(--dps-shape-extra-small);
    transition: background-color 0.15s ease;
}

.dps-action-link:hover {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-primary-pressed);
}

.dps-action-link--primary {
    color: var(--dps-color-success);
}

.dps-action-link--primary:hover {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-action-delete {
    color: var(--dps-color-error);
}

.dps-action-delete:hover {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

/* Texto esmaecido */
.dps-text-muted {
    color: var(--dps-color-outline);
    font-style: italic;
}

/* Link de cliente */
.dps-client-link {
    color: var(--dps-color-on-surface);
    text-decoration: none;
    font-weight: 500;
}

.dps-client-link:hover {
    color: var(--dps-color-primary);
    text-decoration: underline;
}

/* Link de telefone */
.dps-phone-link {
    color: var(--dps-color-primary);
    text-decoration: none;
}

.dps-phone-link:hover {
    text-decoration: underline;
}

/* Link de email */
.dps-email-link {
    color: var(--dps-color-on-surface-variant);
    text-decoration: none;
    font-size: 13px;
}

.dps-email-link:hover {
    color: var(--dps-color-primary);
    text-decoration: underline;
}

/* Responsividade para listas */
@media (max-width: 768px) {
    .dps-list-header {
        margin: 24px 0 16px 0;
        padding-top: 16px;
        font-size: 16px;
    }
    
    .dps-list-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dps-list-toolbar .dps-search {
        min-width: 0;
        width: 100%;
    }
    
    .dps-list-toolbar .button {
        width: 100%;
        text-align: center;
    }
    
    .dps-actions {
        flex-wrap: nowrap;
    }
    
    .dps-action-link {
        font-size: 12px;
        padding: 2px 2px;
    }
    
    /* Botões de ação inline em mobile - manter tamanho adequado para toque */
    .dps-actions--inline .button {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px; /* Área mínima de toque recomendada */
    }
    
    /* Cards de estatísticas em 2 colunas para tablet */
    .dps-inline-stats--panel {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Surface cards ajustados */
    .dps-surface {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    /* Reforço de prevenção de overflow para mobile pequeno */
    /* box-sizing é adicionado aqui pois não está no breakpoint 768px */
    .dps-base-wrapper,
    .dps-section,
    .dps-surface,
    .dps-section-grid {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .dps-section-title {
        font-size: 18px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    
    .dps-list-header {
        font-size: 15px;
    }
    
    .dps-size-badge,
    .dps-pets-badge {
        font-size: 11px;
        padding: 2px 6px;
    }
    
    /* === CORREÇÕES DE RESPONSIVIDADE PARA MOBILE === */
    
    /* Cards de estatísticas empilhados verticalmente em mobile */
    .dps-inline-stats--panel {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .dps-inline-stats--panel li {
        flex-direction: row;
        padding: 12px 14px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .dps-inline-stats__value {
        font-size: 18px;
    }
    
    .dps-inline-stats__label small {
        display: none;
    }
    
    /* Ações de tabela mais compactas */
    .dps-action-separator {
        display: none;
    }
    
    .dps-actions {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    
    .dps-action-link {
        padding: 4px 0;
        font-size: 12px;
    }
    
    /* Surface cards com menos padding */
    .dps-surface {
        padding: 16px;
    }
    
    .dps-surface__title {
        font-size: 14px;
    }
    
    /* Lista de toolbar empilhada */
    .dps-list-toolbar {
        gap: 8px;
    }
    
    .dps-list-toolbar .dps-search,
    .dps-list-toolbar .dps-filter-control,
    .dps-list-toolbar .button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* === Card Component para Formulários === */
.dps-card {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-medium);
    box-shadow: var(--dps-elevation-2);
    overflow: hidden;
    margin-bottom: 24px;
}

.dps-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
    background: var(--dps-color-surface-container-low);
}

.dps-card__title {
    margin: 6px 0 2px;
    font-size: 20px;
    color: var(--dps-color-on-surface);
}

.dps-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: var(--dps-color-on-surface-variant);
    margin: 0;
}

.dps-card__hint {
    margin: 4px 0 0;
    color: var(--dps-color-on-surface-variant);
    font-size: 13px;
}

.dps-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dps-card__body {
    padding: 20px 24px 24px;
}

.dps-card--form .dps-form {
    max-width: 100%;
    margin: 0;
}

/* Responsividade do Card */
@media (max-width: 768px) {
    .dps-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
    }
    
    .dps-card__actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .dps-card__body {
        padding: 16px 20px 20px;
    }
}

@media (max-width: 480px) {
    .dps-card__header {
        padding: 12px 16px;
    }
    
    .dps-card__body {
        padding: 12px 16px 16px;
    }
    
    .dps-card__title {
        font-size: 18px;
    }
}

/* ================================================
   HISTÓRICO - MELHORIAS DE LAYOUT v2.0
   ================================================ */

/* Container de métricas fora do grid */
.dps-history-metrics {
    margin-bottom: 24px;
}

/* Grid de 5 cards */
.dps-history-cards--five {
    grid-template-columns: repeat(5, 1fr);
}

/* Card de pendências (a receber) */
.dps-history-card--pending {
    border-left: 4px solid var(--dps-color-warning);
}

.dps-history-card--pending .dps-history-card__icon {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-warning);
}

.dps-history-card--pending .dps-history-card__value {
    color: var(--dps-color-warning);
}

/* Card de pagos (recebido) */
.dps-history-card--paid {
    border-left: 4px solid var(--dps-color-success);
}

.dps-history-card--paid .dps-history-card__icon {
    background: var(--dps-color-success-container);
    color: var(--dps-color-success);
}

.dps-history-card--paid .dps-history-card__value {
    color: var(--dps-color-success);
}

/* Valor na tabela com destaque */
.dps-history-value {
    font-weight: 500;
    color: var(--dps-color-success);
}

/* Links de ação na tabela de histórico */
.dps-history-actions {
    white-space: nowrap;
}

.dps-action-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    margin: 0 2px;
    border-radius: var(--dps-shape-extra-small);
    text-decoration: none;
    font-size: 13px;
    transition: background-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-action-link .dps-action-icon {
    font-size: 14px;
    line-height: 1;
}

.dps-action-link .dps-action-text {
    display: none;
}

.dps-action-link--edit {
    color: var(--dps-color-primary-hover);
}

.dps-action-link--edit:hover {
    background: var(--dps-color-primary-container);
    color: var(--dps-color-primary-pressed);
}

.dps-action-link--duplicate {
    color: var(--dps-color-tertiary);
}

.dps-action-link--duplicate:hover {
    background: var(--dps-color-tertiary-container);
    color: var(--dps-color-on-tertiary-container);
}

.dps-action-link--delete {
    color: var(--dps-color-error);
}

.dps-action-link--delete:hover {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

/* Tooltip para ícones em desktop */
@media (min-width: 1200px) {
    .dps-action-link .dps-action-text {
        display: inline;
    }
    
    .dps-action-link .dps-action-icon {
        display: none;
    }
}

/* Responsividade dos 5 cards */
@media (max-width: 1200px) {
    .dps-history-cards--five {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dps-history-cards--five {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dps-history-cards--five {
        grid-template-columns: 1fr;
    }
    
    .dps-action-link .dps-action-text {
        display: none !important;
    }
    
    .dps-action-link .dps-action-icon {
        display: inline !important;
    }
}

/* Resumo dinâmico melhorado */
.dps-history-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 4px solid var(--dps-color-primary);
    padding: 14px 18px;
    border-radius: var(--dps-shape-small);
    margin-bottom: 16px;
}

.dps-history-summary__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dps-color-on-surface);
}

.dps-history-summary__separator {
    color: var(--dps-color-outline);
}

.dps-history-summary__count strong,
.dps-history-summary__total strong {
    color: var(--dps-color-primary-hover);
}

.dps-history-summary__pending {
    color: var(--dps-color-warning);
}

.dps-history-summary__pending strong {
    color: var(--dps-color-on-warning-container);
}

.dps-history-summary__filtered {
    display: flex;
    align-items: center;
}

.dps-history-summary__filtered-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--dps-color-warning-container);
    border: 1px solid var(--dps-color-warning-container);
    border-radius: var(--dps-shape-medium);
    font-size: 12px;
    font-weight: 500;
    color: var(--dps-color-on-warning-container);
}

/* Título da toolbar com ícone */
.dps-history-toolbar__title .dps-section-title__icon {
    margin-right: 6px;
}

/* Botões na toolbar com ícone */
.dps-history-toolbar__actions .button span {
    margin-right: 4px;
}

@media (max-width: 768px) {
    .dps-history-summary {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dps-history-summary__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .dps-history-summary__separator {
        display: none;
    }
}

/* Destaque para linhas com pagamento pendente */
#dps-history-table tbody tr[data-paid="0"] {
    background: var(--dps-color-warning-container);
}

#dps-history-table tbody tr[data-paid="0"]:hover {
    background: var(--dps-color-warning-container);
}

/* Linha de status cancelado */
#dps-history-table tbody tr[data-status="cancelado"] {
    opacity: 0.7;
}

#dps-history-table tbody tr[data-status="cancelado"] .dps-history-value {
    text-decoration: line-through;
    color: var(--dps-color-outline);
}

/* Seção de timeline de histórico */
.dps-history-timeline-section {
    margin-bottom: 24px;
}

.dps-history-timeline-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dps-color-outline-variant);
}

.dps-history-timeline-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dps-history-timeline-description {
    margin: 0;
    font-size: 13px;
    color: var(--dps-color-on-surface-variant);
}

/* ================================================
   PÁGINA DE CONFIGURAÇÕES - FRONTEND
   ================================================ */

/* Container principal da página de configurações */
.dps-settings-wrapper {
    max-width: 960px;
    margin: 0 auto;
}

.dps-settings-wrapper .dps-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: 500;
    color: var(--dps-color-on-surface);
}

/* Navegação de configurações */
.dps-settings-nav {
    margin-bottom: 0;
}

/* Seção de configurações */
.dps-settings-section {
    border: 1px solid var(--dps-color-outline-variant);
    border-top: none;
    padding: 24px;
    background: var(--dps-color-surface-container-lowest);
    border-radius: 0 0 var(--dps-shape-small) var(--dps-shape-small);
}

.dps-settings-section.active {
    display: block;
}

/* Formulário de configurações */
.dps-settings-form {
    max-width: 100%;
}

.dps-settings-form .dps-surface {
    margin-bottom: 24px;
}

/* Fieldset dentro de configurações */
.dps-settings-section .dps-fieldset {
    margin: 0 0 24px 0;
    padding: 20px;
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 3px solid var(--dps-color-primary);
    border-radius: 0 var(--dps-shape-medium) var(--dps-shape-medium) 0;
    background: var(--dps-color-surface-container-low);
}

.dps-settings-section .dps-fieldset legend {
    padding: 0;
    font-size: var(--dps-typescale-title-medium-size);
    font-weight: var(--dps-typescale-title-medium-weight);
    color: var(--dps-color-on-surface);
    background: transparent;
    float: none;
    width: 100%;
    margin-bottom: var(--dps-space-4);
}

/* Linhas de formulário — Settings context */
.dps-settings-section .dps-form-row {
    margin-bottom: 20px;
}

.dps-settings-section .dps-form-row:last-child {
    margin-bottom: 0;
}

.dps-settings-section .dps-form-row label {
    display: block;
    margin-bottom: var(--dps-space-2);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    color: var(--dps-color-on-surface);
}

.dps-settings-section .dps-form-row input[type="text"],
.dps-settings-section .dps-form-row input[type="password"],
.dps-settings-section .dps-form-row input[type="email"],
.dps-settings-section .dps-form-row input[type="url"],
.dps-settings-section .dps-form-row input[type="number"],
.dps-settings-section .dps-form-row select,
.dps-settings-section .dps-form-row textarea {
    width: 100%;
    max-width: 400px;
    padding: var(--dps-space-3) var(--dps-space-4);
    border: 1px solid var(--dps-color-outline);
    border-radius: var(--dps-shape-input);
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-color-on-surface);
    background: var(--dps-color-surface-container-lowest);
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-settings-section .dps-form-row input:focus,
.dps-settings-section .dps-form-row select:focus,
.dps-settings-section .dps-form-row textarea:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

.dps-form-row textarea {
    max-width: 100%;
    min-height: 80px;
    resize: vertical;
}

.dps-form-row .description {
    margin-top: 6px;
    font-size: 13px;
    color: var(--dps-color-on-surface-variant);
    line-height: 1.4;
}

/* Ações do formulário */
.dps-form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dps-color-outline-variant);
}

.dps-form-actions .button-large {
    padding: 12px 28px !important;
    height: auto !important;
    font-size: 15px !important;
}

.dps-form-actions .button-large .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

/* Notice dentro de configurações */
.dps-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--dps-shape-small);
    font-size: 14px;
    line-height: 1.5;
}

.dps-notice .dashicons {
    flex-shrink: 0;
    margin-top: 2px;
}

.dps-notice--info {
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-primary-container);
    color: var(--dps-color-primary-pressed);
}

.dps-notice--info .dashicons {
    color: var(--dps-color-primary);
}

.dps-notice--warning {
    background: var(--dps-color-warning-container);
    border: 1px solid var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.dps-notice--warning .dashicons {
    color: var(--dps-color-warning);
}

.dps-notice--success {
    background: var(--dps-color-success-container);
    border: 1px solid var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-notice--success .dashicons {
    color: var(--dps-color-success);
}

.dps-notice--danger {
    background: var(--dps-color-error-container);
    border: 1px solid var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

.dps-notice--danger .dashicons {
    color: var(--dps-color-error);
}

/* Responsividade para configurações */
@media (max-width: 768px) {
    .dps-settings-wrapper {
        padding: 0 16px;
    }
    
    .dps-settings-wrapper .dps-page-title {
        font-size: 22px;
    }
    
    .dps-settings-section {
        padding: 16px;
    }
    
    .dps-settings-section .dps-fieldset {
        padding: 16px;
    }
    
    .dps-settings-section .dps-form-row input[type="text"],
    .dps-settings-section .dps-form-row input[type="password"],
    .dps-settings-section .dps-form-row input[type="email"],
    .dps-settings-section .dps-form-row select {
        max-width: 100%;
    }
}

/* Checkbox label para configurações — scoped */
.dps-settings-section .dps-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    font-weight: 400;
    color: var(--dps-color-on-surface);
    cursor: pointer;
}

.dps-settings-section .dps-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--dps-color-primary);
    cursor: pointer;
}

/* Color picker melhorado */
.dps-settings-section .dps-form-row input[type="color"] {
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-input);
    cursor: pointer;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form-row input[type="color"]:hover {
    border-color: var(--dps-color-primary);
}

.dps-form-row input[type="color"]:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

/* ========================================
 * FASE 4: Estilos para abas de automação
 * ======================================== */

/* Badge de próximo agendamento */
.dps-next-schedule {
    display: inline-block;
    margin-left: 12px;
    padding: 4px 10px;
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--dps-shape-extra-small);
    border-left: 3px solid var(--dps-color-success);
}

/* Campos de horário e número */
.dps-form-row input[type="time"],
.dps-form-row input[type="number"] {
    font-family: var(--dps-font-body);
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form-row input[type="time"]:focus,
.dps-form-row input[type="number"]:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

/* Select dropdown melhorado */
.dps-form-row select {
    font-family: var(--dps-font-body);
    font-size: 14px;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    background: var(--dps-color-surface-container-lowest) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 8px center;
    background-size: 16px;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form-row select:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

/* Espaçamento entre surfaces */
.dps-settings-section .dps-surface + .dps-surface {
    margin-top: 20px;
}

/* Textarea melhorado */
.dps-form-row textarea {
    font-family: var(--dps-font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    resize: vertical;
    min-height: 100px;
    transition: border-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard), box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-form-row textarea:focus {
    outline: none;
    border-color: var(--dps-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dps-color-primary) 10%, transparent);
}

/* Notice de informação */
.dps-notice--info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-primary-container);
    border-radius: var(--dps-shape-small);
    color: var(--dps-color-primary-pressed);
    font-size: 13px;
}

.dps-notice--info .dashicons {
    flex-shrink: 0;
    margin-top: 2px;
}