@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');


/* =========================================================
   STYLE.CSS — PAINEL DE AGENDAMENTOS
   PADRÃO VISUAL ÚNICO — PROFISSIONAIS
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS
   ========================================================= */

:root {
    --primary: #f47721;
    --primary-dark: #e16412;
    --primary-light: #DCEBF8;
    --primary-soft: #FFFFFF;

    --background: #F8FAFC;

    --surface: #FFFFFF;
    --surface-soft: #F7FAFC;

    --text: #e16412;
    --text-secondary: #e16412;
    --text-light: #6B7280;

    --border: #E5E7EB;
    --border-light: #F3F4F6;

    --success: #16A34A;
    --success-bg: #DCFCE7;

    --warning: #EBF1F7;
    --warning-bg: #FEF3C7;

    --danger: #DC2626;
    --danger-bg: #FEE2E2;

    --info: #f47721;
    --info-bg: #DCEBF8;

    --sidebar-width: 255px;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 3px rgba(225,100,18,0.06);
    --shadow: 0 4px 14px rgba(225,100,18,0.07);
    --shadow-lg: 0 12px 30px rgba(225,100,18,0.10);

    --transition: 0.2s ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    min-height: 100%;
    font-size: 17px;
}

body {
    width: 100%;
    min-height: 100vh;

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        "Segoe UI",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   3. ESTRUTURA
   ========================================================= */

.app,
.main-layout {
    width: 100%;
    min-height: 100vh;
    display: flex;
}


/* =========================================================
   4. SIDEBAR — PADRÃO ÚNICO
   ========================================================= */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--surface);

    border-right: 1px solid var(--border);

    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
}


/* =========================================================
   5. LOGO — TODAS AS PÁGINAS
   ========================================================= */

.logo {
    height: 82px;

    padding: 18px 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-bottom: 1px solid var(--border-light);
}

.logo-icon,
.logo-mark {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--primary);
    color: #FFFFFF;

    font-size: 0;
    font-weight: 400;

    box-shadow:
        0 5px 12px rgba(235, 242, 249, 0.24);
}

.logo-icon::before,
.logo-mark::before {
    content: "▦";

    font-size: 19px;
    line-height: 1;
    color: #FFFFFF;
}

.logo-icon *,
.logo-mark * {
    display: none;
}

.logo-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-text strong,
.logo-title {
    display: block;

    color: var(--text);

    font-size: 16px;
    line-height: 20px;

    font-weight: 400;
}

.logo-text span,
.logo-subtitle {
    display: block;

    margin-top: 2px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 15px;

    font-weight: 400;
}


/* =========================================================
   6. MENU
   ========================================================= */

.sidebar-menu,
.menu {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 18px 12px;
    flex: 0 0 auto;
}

.menu-label {
    padding: 0 10px;
    margin-bottom: 7px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 16px;

    font-weight: 400;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* =========================================================
   7. ITEM DO MENU
   ========================================================= */

.menu-item {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 11px;

    border-radius: 9px;

    color: var(--text-secondary);

    font-size: 14px;
    font-weight: 400;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.menu-item:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.menu-item.active {
    background: var(--primary-light);
    color: var(--primary);

    font-weight: 400;
}


/* =========================================================
   8. ÍCONES DO MENU — PADRÃO ÚNICO
   ========================================================= */

.menu-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0;
    line-height: 1;

    color: currentColor;
}

.menu-item[href="index.html"] .menu-icon::before,
.menu-item[href="Visão geral"] .menu-icon::before {
    content: "⌂";
}

.menu-item[href="agendamentos.html"] .menu-icon::before {
    content: "◷";
}

.menu-item[href="calendario.html"] .menu-icon::before {
    content: "▣";
}

.menu-item[href="servicos.html"] .menu-icon::before {
    content: "▦";
}

.menu-item[href="profissionais.html"] .menu-icon::before {
    content: "♙";
}

.menu-item[href="clientes.html"] .menu-icon::before {
    content: "♙";
}

.menu-item[href="configuracoes.html"] .menu-icon::before {
    content: "⚙";
}

.menu-icon::before {
    font-size: 15px;
    line-height: 1;
}


/* =========================================================
   9. TEXTO DO MENU
   ========================================================= */

.menu-text {
    flex: 1;
    min-width: 0;
}


/* =========================================================
   10. BADGE DO MENU
   ========================================================= */

.menu-badge {
    min-width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 10px;

    background: var(--primary);
    color: #FFFFFF;

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   11. SEPARADOR
   ========================================================= */

.sidebar-separator,
.menu-separator {
    height: 1px;

    margin: 10px 8px;

    background: var(--border);
}


/* =========================================================
   12. FOOTER DA SIDEBAR
   ========================================================= */

.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 12px;
    border-top: 1px solid var(--border-light);
}


/* =========================================================
   13. ACESSO INDIVIDUAL
   ========================================================= */

.access-card,
.sidebar-access {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--primary-soft);
    flex-shrink: 0;
}

.access-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.check-icon,
.access-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 12px;
    font-weight: 400;
}

.access-card strong,
.sidebar-access strong,
.access-card-title {
    display: block;

    color: var(--text);

    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
}

.access-card span,
.sidebar-access span,
.sidebar-access p,
.access-card-text {
    display: block;

    margin-top: 2px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 14px;
}


/* =========================================================
   14. PERFIL
   ========================================================= */

.profile-mini,
.sidebar-profile {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 5px 3px;
    flex-shrink: 0;
}

.profile-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--primary);
    color: #FFFFFF;

    font-size: 12px;
    font-weight: 400;
}

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

.profile-name,
.profile-status {
    display: block;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--text);

    font-size: 12px;
    font-weight: 400;
}

.profile-info span {
    display: block;

    margin-top: 1px;

    color: var(--text-light);

    font-size: 11px;
}

.profile-more {
    width: 28px;
    height: 28px;
    min-width: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: 7px;

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 14px;
    font-weight: 400;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.profile-more:hover {
    background: var(--primary-soft);
    border-color: var(--primary-light);
    color: var(--primary);
}


/* =========================================================
   15. ÁREA PRINCIPAL
   ========================================================= */

main,
main.main {
    flex: 1;
    min-width: 0;

    margin-left: var(--sidebar-width);

    min-height: 100vh;

    background: var(--background);

    display: flex;
    flex-direction: column;
}


/* =========================================================
   16. TOPBAR
   ========================================================= */

/* =========================================================
   TOPBAR — PADRÃO ÚNICO DO SISTEMA
   ========================================================= */

header.topbar,
.topbar {
    width: 100%;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 0 30px;

    background: var(--surface);
    border-bottom: 1px solid var(--border);

    position: sticky;
    top: 0;
    z-index: 50;

    box-sizing: border-box;
}


/* =========================================================
   BARRA DE PESQUISA — POSIÇÃO FIXA
   ========================================================= */

.topbar .search-box,
.topbar .global-search {
    position: relative;

    width: 320px;
    min-width: 320px;
    max-width: 320px;

    height: 38px;

    display: flex;
    align-items: center;

    margin: 0;

    flex-shrink: 0;
}


/* Campo */

.topbar .search-box input,
.topbar .global-search input {
    width: 100%;
    height: 38px;

    padding: 0 12px 0 36px;

    border: 1px solid var(--border);
    border-radius: 9px;

    outline: none;

    background: var(--surface-soft);
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}


/* Placeholder */

.topbar .search-box input::placeholder,
.topbar .global-search input::placeholder {
    color: var(--text-light);
}


/* Foco */

.topbar .search-box input:focus,
.topbar .global-search input:focus {
    border-color: var(--primary);

    background: var(--surface);

    box-shadow:
        0 0 0 3px rgba(235, 242, 249, 0.14);
}


/* Ícone */

.topbar .search-box .search-icon,
.topbar .global-search .search-icon {
    position: absolute;

    left: 11px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

    font-size: 15px;
    line-height: 1;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   AÇÕES — SEMPRE NO CANTO DIREITO
   ========================================================= */

.topbar .topbar-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   BOTÃO PRINCIPAL DA TOPBAR
   ========================================================= */

.topbar .btn-primary,
.topbar .primary-button {
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 15px;

    border: 1px solid var(--primary);
    border-radius: 9px;

    background: var(--primary);
    color: #FFFFFF;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;

    white-space: nowrap;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.topbar .btn-primary:hover,
.topbar .primary-button:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);

    box-shadow:
        0 4px 10px rgba(235, 242, 249, 0.22);
}


/* =========================================================
   BOTÃO DE NOTIFICAÇÃO
   ========================================================= */

.topbar .btn-icon,
.topbar .icon-button,
.topbar .notification-button {
    width: 38px;
    height: 38px;

    min-width: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--surface);
    color: var(--text-secondary);

    box-sizing: border-box;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.topbar .notification-button:hover {
    background: var(--primary-soft);
    border-color: var(--primary-light);
    color: var(--primary);
}


/* =========================================================
   CONTADOR
   ========================================================= */

.topbar .notification-count {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border-radius: 50%;

    background: var(--primary);
    color: #FFFFFF;

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   17. BUSCA
   ========================================================= */

.global-search,
.topbar .search-box {
    width: 100%;
    max-width: 320px;
    height: 38px;

    position: relative;

    display: flex;
    align-items: center;
    margin: 0;
}

.global-search input,
.topbar .search-box input {
    width: 100%;
    height: 38px;

    padding: 0 12px 0 36px;

    border: 1px solid var(--border);

    border-radius: 9px;

    outline: none;

    background: var(--surface-soft);
    color: var(--text);

    font-size: 13px;
    box-sizing: border-box;

    transition: border-color var(--transition), box-shadow var(--transition);
}

.global-search input::placeholder,
.topbar .search-box input::placeholder {
    color: var(--text-light);
}

.global-search input:focus,
.topbar .search-box input:focus {
    border-color: var(--primary);

    background: var(--surface);

    box-shadow:
        0 0 0 3px rgba(235, 242, 249, 0.14);
}

.search-icon,
.topbar .search-box .search-icon {
    position: absolute;

    left: 11px;

    color: var(--text-light);

    font-size: 15px;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   18. NOTIFICAÇÕES
   ========================================================= */

.notification-button {
    width: 38px;
    height: 38px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 9px;

    background: var(--surface);

    color: var(--text-secondary);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.notification-button:hover {
    background: var(--primary-soft);

    border-color: var(--primary-light);

    color: var(--primary);
}

.notification-count {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--primary);
    color: #FFFFFF;

    font-size: 10px;
    font-weight: 400;
}


/* =========================================================
   19. CONTEÚDO
   ========================================================= */

.page-content,
.content {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 30px;
    flex: 1;
}


/* =========================================================
   20. CABEÇALHO DA PÁGINA
   ========================================================= */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}

.page-title-area {
    min-width: 0;
}

.page-eyebrow,
.page-overline {
    display: block;

    margin-bottom: 6px;

    color: var(--primary);

    font-size: 11px;
    line-height: 15px;

    font-weight: 400;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}

.page-title,
.page-header h1 {
    color: var(--text);

    font-size: 26px;
    line-height: 32px;

    font-weight: 400;

    letter-spacing: -0.025em;
}

.page-description,
.page-header p {
    max-width: 680px;

    margin-top: 5px;

    color: var(--text-secondary);

    font-size: 14px;
    line-height: 20px;
}

.page-date {
    flex-shrink: 0;

    padding: 10px 14px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--surface);

    text-align: right;
}

.page-date span {
    display: block;

    color: var(--text-light);

    font-size: 11px;
}

.page-date strong {
    display: block;

    margin-top: 2px;

    color: var(--text);

    font-size: 13px;
}


/* =========================================================
   21. BOTÕES
   ========================================================= */

.btn,
.primary-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 9px 15px;

    border: 1px solid transparent;

    border-radius: 9px;

    font-size: 13px;
    line-height: 18px;

    font-weight: 400;

    white-space: nowrap;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.btn:active,
.primary-button:active {
    transform: translateY(1px);
}

.btn-primary,
.primary-button {
    background: var(--primary);

    color: #FFFFFF;

    border-color: var(--primary);

    box-shadow:
        0 3px 8px rgba(235, 242, 249, 0.20);
}

.btn-primary:hover,
.primary-button:hover {
    background: var(--primary-dark);

    border-color: var(--primary-dark);

    box-shadow:
        0 5px 12px rgba(235, 242, 249, 0.26);
}

.btn-secondary {
    background: var(--surface);

    color: var(--text-secondary);

    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--primary-soft);

    color: var(--primary);

    border-color: var(--primary-light);
}

.btn-danger {
    background: var(--danger-bg);

    color: var(--danger);

    border-color: #FECACA;
}

.btn-danger:hover {
    background: #FECACA;
}

.btn-success {
    background: var(--success-bg);

    color: var(--success);

        border-color: #DDE8F0;
}

.btn-sm {
    min-height: 32px;

    padding: 7px 11px;

    font-size: 12px;
}


/* =========================================================
   22. CARDS
   ========================================================= */

.card,
.panel {
    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);
}

.card-header,
.panel-header {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    border-bottom: 1px solid var(--border-light);
}

.card-title,
.panel-header h2 {
    color: var(--text);

    font-size: 14px;
    line-height: 19px;

    font-weight: 400;
}

.card-subtitle,
.panel-header p {
    margin-top: 3px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 15px;
}

.panel-link {
    color: var(--primary);

    font-size: 11px;

    font-weight: 400;
}

.panel-link:hover {
    color: var(--primary-dark);

    text-decoration: underline;
}


/* =========================================================
   23. MÉTRICAS
   ========================================================= */

.metrics-grid,
.metrics {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}

.metric-card {
    padding: 17px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.metric-card:hover {
    transform: translateY(-1px);

    border-color: #BBD5EA;

    box-shadow: var(--shadow);
}

.metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.metric-label,
.metric-top > span {
    color: var(--text-secondary);

    font-size: 11px;
    line-height: 15px;

    font-weight: 400;
}

.metric-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 13px;
}

.metric-value,
.metric-card > strong {
    margin-top: 10px;

    color: var(--text);

    font-size: 26px;
    line-height: 30px;

    font-weight: 400;

    letter-spacing: -0.02em;
}

.metric-note,
.metric-card > p {
    margin-top: 4px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 15px;
}


/* =========================================================
   24. ESTADO VAZIO
   ========================================================= */

.empty-state {
    padding: 42px 20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.empty-state.compact {
    padding: 28px 20px;
}

.empty-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 14px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 20px;
}

.empty-title,
.empty-state h3 {
    color: var(--text);

    font-size: 14px;
    line-height: 19px;

    font-weight: 400;
}

.empty-text,
.empty-state p {
    max-width: 420px;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 12px;
    line-height: 17px;
}


/* =========================================================
   25. FILTROS
   ========================================================= */

.filters,
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;

    padding: 14px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;
}

.filter-group {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.filter-label {
    color: var(--text-secondary);

    font-size: 11px;

    font-weight: 400;
}


/* =========================================================
   26. FORMULÁRIOS
   ========================================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    padding: 18px;
}

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.form-group {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.form-group.full,
.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label,
.form-group label {
    color: var(--text);

    font-size: 12px;
    line-height: 16px;

    font-weight: 400;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    min-height: 39px;

    padding: 9px 11px;

    border: 1px solid var(--border);

    border-radius: 9px;

    outline: none;

    background: var(--surface);

    color: var(--text);

    font-size: 13px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-group textarea {
    min-height: 90px;

    resize: vertical;
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(235, 242, 249, 0.14);
}

.form-actions,
.modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding: 16px 18px;

    border-top: 1px solid var(--border-light);
}


/* =========================================================
   27. TABELAS
   ========================================================= */

.table-wrapper,
.clients-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.table,
.clients-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.table th,
.clients-table th {
    padding: 11px 14px;

    background: var(--surface-soft);

    border-bottom: 1px solid var(--border);

    color: var(--text-secondary);

    text-align: left;

    font-size: 11px;

    font-weight: 400;

    white-space: nowrap;
}

.table td,
.clients-table td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-secondary);

    vertical-align: middle;
}

.table tbody tr:hover,
.clients-table tbody tr:hover {
    background: var(--primary-soft);
}

.table tbody tr:last-child td,
.clients-table tbody tr:last-child td {
    border-bottom: 0;
}


/* =========================================================
   28. STATUS
   ========================================================= */

.status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 10px;
    line-height: 13px;

    font-weight: 400;
}

.status-success,
.status-confirmed {
    background: var(--success-bg);
    color: var(--success);
}

.status-warning,
.status-pending {
    background: var(--warning-bg);
    color: var(--warning);
}

.status-danger,
.status-cancelled {
    background: var(--danger-bg);
    color: var(--danger);
}

.status-info {
    background: var(--info-bg);
    color: var(--info);
}

.status-neutral {
    background: #F3F4F6;
    color: #6B7280;
}


/* =========================================================
   29. PROFISSIONAIS
   ========================================================= */

.professional-grid,
.service-list,
.service-grid,
.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.professional-card {
    padding: 16px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.professional-card:hover {
    transform: translateY(-2px);

    border-color: #BBD5EA;

    box-shadow: var(--shadow);
}

.professional-header {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}

.professional-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 15px;

    font-weight: 400;
}

.professional-name {
    color: var(--text);

    font-size: 14px;
    line-height: 18px;

    font-weight: 400;
}

.professional-role {
    margin-top: 2px;

    color: var(--text-light);

    font-size: 11px;
    line-height: 15px;
}

.professional-info {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding-top: 13px;

    border-top: 1px solid var(--border-light);
}

.professional-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: var(--text-secondary);

    font-size: 11px;
}

.professional-info-label {
    color: var(--text-light);
}

.professional-actions {
    display: flex;

    gap: 7px;

    margin-top: 14px;

    padding-top: 13px;

    border-top: 1px solid var(--border-light);
}


/* =========================================================
   30. SERVIÇOS
   ========================================================= */

.service-card {
    padding: 16px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-card:hover {
    transform: translateY(-2px);

    border-color: #BBD5EA;

    box-shadow: var(--shadow);
}

.service-name {
    color: var(--text);

    font-size: 14px;

    font-weight: 400;
}

.service-description {
    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 11px;
    line-height: 15px;
}

.service-price {
    margin-top: 12px;

    color: var(--primary);

    font-size: 15px;

    font-weight: 400;
}


/* =========================================================
   31. CLIENTES
   ========================================================= */


   /* =========================================================
   CLIENTES — CARDS
   ========================================================= */

#clientes-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#clientes-lista .client-item {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background-color 0.16s ease;
}

#clientes-lista .client-item:hover {
    transform: translateY(-1px);

    border-color: #F3F8FC;

    box-shadow: var(--shadow-md);

    background: #F7FAFC;
}


/* =========================================================
   AVATAR
   ========================================================= */

#clientes-lista .client-avatar {
    width: 42px;
    height: 42px;

    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 12px;
    font-weight: 400;

    letter-spacing: 0.2px;
}


/* =========================================================
   INFORMAÇÕES
   ========================================================= */

#clientes-lista .client-info {
    min-width: 0;

    flex: 1;
}

#clientes-lista .client-name {
    color: var(--text);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

#clientes-lista .client-contact {
    margin-top: 4px;

    color: var(--text-light);

    font-size: 11px;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   AÇÕES
   ========================================================= */

#clientes-lista .client-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


/* =========================================================
   STATUS
   ========================================================= */

#clientes-lista .status {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 24px;

    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 400;

    white-space: nowrap;
}

#clientes-lista .status-active {
    background: #ECFDF3;

    color: var(--success);
}

#clientes-lista .status-inactive {
    background: #FEF2F2;

    color: var(--danger);
}


/* =========================================================
   BOTÃO EXCLUIR
   ========================================================= */

#clientes-lista .btn-excluir-cliente {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: #FFFFFF;

    color: var(--text-light);

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

#clientes-lista .btn-excluir-cliente:hover {
    transform: scale(1.04);

    background: #FEF2F2;

    border-color: #FECACA;

    color: var(--danger);
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {

    #clientes-lista {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    #clientes-lista {
        grid-template-columns: 1fr;
    }

    #clientes-lista .client-item {
        padding: 13px;
    }

    #clientes-lista .client-actions {
        gap: 5px;
    }

    #clientes-lista .status {
        display: none;
    }

}
.client-card {
    padding: 16px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 13px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.client-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow);
}

.client-header {
    display: flex;
    align-items: center;

    gap: 12px;
}

.client-avatar {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 14px;

    font-weight: 400;
}

.client-name {
    color: var(--text);

    font-size: 14px;

    font-weight: 400;
}

.client-info {
    margin-top: 14px;

    padding-top: 13px;

    border-top: 1px solid var(--border-light);
}

.client-info-row {
    display: flex;

    justify-content: space-between;

    padding: 5px 0;

    color: var(--text-secondary);

    font-size: 11px;
}


/* =========================================================
   32. AGENDAMENTOS
   ========================================================= */

.appointment-list {
    display: flex;
    flex-direction: column;
}

.appointment-item {
    padding: 14px 16px;

    border-bottom: 1px solid var(--border-light);

    transition: background var(--transition);
}

.appointment-item:hover {
    background: var(--primary-soft);
}

.appointment-item:last-child {
    border-bottom: 0;
}

.appointment-main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.appointment-client {
    color: var(--text);

    font-size: 13px;

    font-weight: 400;
}

.appointment-service {
    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 11px;
}

.appointment-time {
    color: var(--primary);

    font-size: 13px;

    font-weight: 400;
}

.appointment-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 8px;

    color: var(--text-light);

    font-size: 11px;
}


/* =========================================================
   33. DASHBOARD
   ========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 14px;
}

.dashboard-column,
.right-column {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.overview-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.quick-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 16px;
}

.quick-action {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px;

    border: 1px solid var(--border);

    border-radius: 9px;

    color: var(--text-secondary);

    font-size: 11px;

    font-weight: 400;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.quick-action:hover {
    background: var(--primary-soft);

    border-color: var(--primary-light);

    color: var(--primary);
}


/* =========================================================
   34. AGENDA / CALENDÁRIO
   ========================================================= */

.calendar-toolbar {
    margin-bottom: 14px;
}

.calendar-navigation {
    display: flex;
    align-items: center;

    gap: 7px;
}

.calendar-navigation .btn {
    min-width: 36px;
}

.calendar-current {
    min-width: 130px;

    color: var(--text);

    font-size: 13px;

    font-weight: 400;

    text-align: center;
}

.calendar-panel {
    overflow: hidden;

    border-radius: 13px;
}

.calendar-weekdays {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    border-bottom: 1px solid var(--border);
}

.calendar-weekdays > div {
    padding: 10px 6px;

    background: var(--surface-soft);

    color: var(--text-light);

    font-size: 10px;

    font-weight: 400;

    text-align: center;

    text-transform: uppercase;
}

.calendar-grid {
    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}

.calendar-day {
    min-height: 110px;

    padding: 8px;

    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);

    background: var(--surface);

    transition: background var(--transition);
}

.calendar-day:hover {
    background: var(--primary-soft);
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day-number {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;

    border-radius: 50%;

    color: var(--text-secondary);

    font-size: 11px;

    font-weight: 400;
}

.calendar-day.today .calendar-day-number {
    background: var(--primary);

    color: #FFFFFF;
}

.calendar-day.other-month {
    background: #FBFBFD;
}

.calendar-day.other-month .calendar-day-number {
    color: var(--text-light);
}

.calendar-event {
    margin-top: 4px;

    padding: 4px 5px;

    border-radius: 5px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: 9px;
    line-height: 11px;

    font-weight: 400;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-legend {
    margin-top: 14px;
}

.legend-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    padding: 15px 18px;
}

.legend-item {
    display: flex;
    align-items: center;

    gap: 6px;

    color: var(--text-secondary);

    font-size: 11px;
}

.legend-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}


/* =========================================================
   35. CONFIGURAÇÕES
   ========================================================= */

.settings-section {
    margin-bottom: 14px;
}

.settings-list {
    display: flex;
    flex-direction: column;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 18px;

    border-bottom: 1px solid var(--border-light);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-label {
    color: var(--text);

    font-size: 12px;

    font-weight: 400;
}

.settings-description {
    margin-top: 3px;

    color: var(--text-light);

    font-size: 11px;
}


/* =========================================================
   36. TOGGLE
   ========================================================= */

.toggle {
    width: 40px;
    height: 22px;

    position: relative;

    flex-shrink: 0;

    border: 0;

    border-radius: 11px;

        background: #FFFFFF;

    transition: background var(--transition);
}

.toggle::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: #FFFFFF;

    box-shadow: 0 7px 22px rgba(244,119,33,.055);

    transition: transform var(--transition);
}

.toggle.active {
    background: var(--primary);
}

.toggle.active::after {
    transform: translateX(18px);
}


/* =========================================================
   37. MODAL
   ========================================================= */

.modal {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

        background: #FFFFFF;

    z-index: 1000;
}

.modal.active,
.modal.show {
    display: flex;
}

.modal-content {
    width: 100%;

    max-width: 560px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 16px;

    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 16px 18px;

    border-bottom: 1px solid var(--border-light);
}

.modal-title,
.modal-header h2 {
    color: var(--text);

    font-size: 15px;

    font-weight: 400;
}

.modal-close {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--text-light);

    font-size: 19px;

    transition:
        background var(--transition),
        color var(--transition);
}

.modal-close:hover {
    background: var(--primary-soft);

    color: var(--primary);
}

.modal-body {
    padding: 18px;
}

.modal-footer,
.modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    padding: 14px 18px;

    border-top: 1px solid var(--border-light);
}


/* =========================================================
   38. ALERTAS
   ========================================================= */

.alert {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 11px 13px;

    margin-bottom: 14px;

    border: 1px solid transparent;

    border-radius: 9px;

    font-size: 12px;
    line-height: 16px;
}

.alert-success {
    background: var(--success-bg);
        border-color: #DDE8F0;
    color: var(--success);
}

.alert-warning {
    background: var(--warning-bg);
    border-color: #FDE68A;
    color: var(--warning);
}

.alert-danger {
    background: var(--danger-bg);
    border-color: #FECACA;
    color: var(--danger);
}

.alert-info {
    background: var(--info-bg);
    border-color: #BBD5EA;
    color: var(--info);
}


/* =========================================================
   39. PAGINAÇÃO
   ========================================================= */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 16px;
}

.pagination button {
    min-width: 30px;
    height: 30px;

    padding: 0 8px;

    border: 1px solid var(--border);

    border-radius: 7px;

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 11px;
}

.pagination button:hover,
.pagination button.active {
    background: var(--primary);

    border-color: var(--primary);

    color: #FFFFFF;
}


/* =========================================================
   40. GRÁFICO
   ========================================================= */

.analytics-panel {
    overflow: hidden;
}

.period-select {
    width: auto;

    min-width: 120px;

    min-height: 34px;

    padding: 7px 10px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 11px;

    outline: none;
}

.chart {
    min-height: 240px;

    display: flex;

    padding: 20px 20px 18px;
}

.chart-y {
    width: 30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 2px 0 25px;

    color: var(--text-light);

    font-size: 10px;

    text-align: right;
}

.chart-area {
    flex: 1;

    position: relative;

    min-height: 200px;

    border-bottom: 1px solid var(--border);
}

.chart-grid-lines {
    position: absolute;

    inset: 0 0 25px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-grid-lines span {
    width: 100%;

    height: 1px;

    background: var(--border-light);
}

.chart-bars {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

    gap: 12px;

    padding: 0 10px 0;
}

.bar-group {
    height: 100%;

    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    color: var(--text-light);

    font-size: 10px;
}

.bar {
    width: min(28px, 65%);

    min-height: 2px;

    height: 0;

    border-radius: 6px 6px 0 0;

    background: var(--primary);

    transition:
        height 0.3s ease;
}


/* =========================================================
   41. FOOTER
   ========================================================= */

.footer {
    padding: 20px 30px 25px;

    color: var(--text-light);

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   42. LOADING
   ========================================================= */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    color: var(--text-light);

    font-size: 12px;
}

.spinner {
    width: 22px;
    height: 22px;

    margin-right: 8px;

    border: 2px solid var(--primary-light);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.7s linear infinite;
}

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


/* =========================================================
   43. UTILITÁRIOS
   ========================================================= */

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-muted {
    color: var(--text-light) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

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

.text-right {
    text-align: right !important;
}

.font-bold {
    font-weight: 400 !important;
}

.hidden {
    display: none !important;
}

.w-full {
    width: 100% !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 6px !important;
}

.mt-2 {
    margin-top: 12px !important;
}

.mt-3 {
    margin-top: 18px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 6px !important;
}

.mb-2 {
    margin-bottom: 12px !important;
}

.mb-3 {
    margin-bottom: 18px !important;
}


/* =========================================================
   44. RESPONSIVIDADE
   ========================================================= */

@media (max-width: 1100px) {

    .metrics-grid,
    .metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .professional-grid,
    .service-list,
    .service-grid,
    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 800px) {

    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        position: relative;

        width: 100%;
        min-width: 100%;

        min-height: auto;

        border-right: 0;

        border-bottom: 1px solid var(--border);
    }

    .app,
    .main-layout {
        display: block;
    }

    main,
    main.main {
        margin-left: 0;
    }

    .sidebar-menu,
    .menu {
        padding: 10px;
    }

    .sidebar-footer {
        display: none;
    }

    .page-content,
    .content {
        padding: 22px 18px;
    }

    header.topbar,
    .topbar {
        padding: 0 18px;
    }

    .global-search,
    .topbar .search-box {
        width: 210px;
    }

    .page-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .page-date {
        text-align: left;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

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

    .form-group.full,
    .form-group.full-width {
        grid-column: auto;
    }

    .calendar-grid {
        overflow-x: auto;
    }

    .calendar-day {
        min-width: 95px;
    }
}


@media (max-width: 600px) {

    .metrics-grid,
    .metrics,
    .professional-grid,
    .service-list,
    .service-grid,
    .services-grid,
    .overview-grid,
    .quick-actions {
        grid-template-columns: 1fr;
    }

    .page-title,
    .page-header h1 {
        font-size: 23px;
        line-height: 28px;
    }

    .page-content,
    .content {
        padding: 18px 14px;
    }

    header.topbar,
    .topbar {
        height: auto;
        min-height: 68px;

        padding: 12px 14px;
    }

    .topbar-actions {
        width: 100%;
    }

    .global-search,
    .topbar .search-box {
        flex: 1;
        width: auto;
    }

    .card-header,
    .panel-header {
        padding: 14px;
    }

    .calendar-day {
        min-height: 85px;
        min-width: 82px;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 574px;
    }

    .appointment-main {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }

    .modal {
        padding: 10px;
    }

    .modal-content {
        max-height: calc(100vh - 20px);
    }

    .modal-header {
        padding: 14px;
    }

    .modal-body {
        padding: 14px;
    }
}
/* Contêiner que envolve o campo de busca */
.search-container, 
.busca-wrapper, 
#container-busca {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 400px; /* Ajuste a largura desejada */
    margin: 10px 0;
    position: relative;
}

/* O campo de texto da busca */
.search-container input,
#input-busca,
#buscar-cliente {
    width: 100%;
    padding: 10px 14px 10px 40px; /* Espaço para o ícone na esquerda */
        border: #DDE8F0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

/* Ícone de lupa dentro do campo (se houver) */
.search-container i,
.search-container svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}
#clientes-lista .client-item {
    cursor: pointer;
}

#clientes-lista .client-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

#clientes-lista .client-item .btn-excluir-cliente {
    cursor: pointer;
}
#clientes-lista .client-item {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#clientes-lista .client-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

#clientes-lista .btn-excluir-cliente {
    cursor: pointer;
}
#lista-servicos .service-item {
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

#lista-servicos .service-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

#lista-servicos .btn-excluir-servico {
    cursor: pointer;
}
/* =========================================================
   SERVIÇOS — CARDS SALVOS
   ========================================================= */

#lista-servicos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* CARD */

#lista-servicos .service-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

/* EFEITO AO PASSAR O MOUSE */

#lista-servicos .service-item:hover {
    transform: translateY(-1px);
    border-color: #BBD5EA;
    box-shadow: var(--shadow);
}

/* =========================================================
   ÍCONE DO SERVIÇO
   ========================================================= */

#lista-servicos .service-item::before {
    content: "▦";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 12px;
    font-size: 18px;
    font-weight: 400;
}

/* =========================================================
   INFORMAÇÕES
   ========================================================= */

#lista-servicos .service-info {
    min-width: 0;
    flex: 1;
}

#lista-servicos .service-name {
    margin-bottom: 5px;
    color: var(--text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    word-break: break-word;
}

#lista-servicos .service-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

#lista-servicos .service-meta span {
    display: inline-flex;
    align-items: center;
}

#lista-servicos .service-meta span + span::before {
    content: "•";
    margin-right: 6px;
    color: var(--text-light);
}

/* =========================================================
   PREÇO
   ========================================================= */

#lista-servicos .service-price {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

/* =========================================================
   AÇÕES
   ========================================================= */

#lista-servicos .service-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#lista-servicos .service-actions .status {
    white-space: nowrap;
}

/* =========================================================
   BOTÃO EXCLUIR
   ========================================================= */

#lista-servicos .btn-excluir-servico {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-light);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

#lista-servicos .btn-excluir-servico:hover {
    background: #FEF2F2;
    color: var(--danger);
    border-color: #FECACA;
}

/* =========================================================
   STATUS
   ========================================================= */

#lista-servicos .status-active {
    background: #ECFDF3;
    color: var(--success);
}

#lista-servicos .status-inactive {
    background: #FEF2F2;
    color: var(--danger);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1000px) {

    #lista-servicos {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    #lista-servicos .service-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #lista-servicos .service-info {
        flex: 1 1 calc(100% - 56px);
    }

    #lista-servicos .service-price {
        margin-left: 56px;
        margin-top: -4px;
    }

    #lista-servicos .service-actions {
        margin-left: auto;
    }

}

@media (max-width: 500px) {

    #lista-servicos .service-item {
        gap: 12px;
        padding: 14px;
    }

    #lista-servicos .service-price {
        margin-left: 0;
        width: 100%;
    }

    #lista-servicos .service-actions {
        width: 100%;
        justify-content: flex-end;
    }

}
/* =========================================================
   PROFISSIONAIS — CARDS SALVOS
   ========================================================= */

#profissionais-lista .professional-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

#profissionais-lista .professional-item:hover {
    transform: translateY(-1px);
    border-color: #BBD5EA;
    box-shadow: var(--shadow);
}

/* =========================================================
   AVATAR
   ========================================================= */

#profissionais-lista .professional-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 400;
}

/* =========================================================
   INFORMAÇÕES
   ========================================================= */

#profissionais-lista .professional-info {
    min-width: 0;
    flex: 1;
}

#profissionais-lista .professional-name {
    margin-bottom: 4px;
    color: var(--text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}

#profissionais-lista .professional-specialty {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

#profissionais-lista .professional-contact {
    margin-top: 3px;
    color: var(--text-light);
    font-size: 12px;
}

/* =========================================================
   AÇÕES
   ========================================================= */

#profissionais-lista .professional-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* =========================================================
   EXCLUIR
   ========================================================= */

#profissionais-lista .btn-excluir-profissional {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-light);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

#profissionais-lista .btn-excluir-profissional:hover {
    background: #FEF2F2;
    color: var(--danger);
    border-color: #FECACA;
}

/* =========================================================
   STATUS
   ========================================================= */

#profissionais-lista .status-active {
    background: #ECFDF3;
    color: var(--success);
}

#profissionais-lista .status-inactive {
    background: #FEF2F2;
    color: var(--danger);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {

    #profissionais-lista {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    #profissionais-lista .professional-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #profissionais-lista .professional-info {
        flex: 1 1 calc(100% - 60px);
    }

    #profissionais-lista .professional-actions {
        width: 100%;
        justify-content: flex-end;
    }

}

/* =========================================================
   DIAS DE TRABALHO DO PROFISSIONAL
   ========================================================= */

.dias-trabalho-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.dia-trabalho {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.dia-trabalho:hover {
    border-color: #BBD5EA;
    background: var(--primary-soft);
}

.dia-trabalho input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.dia-trabalho span {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

.form-help {
    margin-top: 7px;
    color: var(--text-light);
    font-size: 12px;
}

@media (max-width: 700px) {
    .dias-trabalho-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .dias-trabalho-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   DIAS DE TRABALHO DO PROFISSIONAL
   ========================================================= */

.dias-trabalho-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.dia-trabalho {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.dia-trabalho:hover {
    border-color: #BBD5EA;
    background: var(--primary-soft);
}

.dia-trabalho input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.dia-trabalho span {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

.form-help {
    margin-top: 7px;
    color: var(--text-light);
    font-size: 12px;
}

@media (max-width: 700px) {
    .dias-trabalho-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .dias-trabalho-grid {
        grid-template-columns: 1fr;
    }
}

#agendamento-hora {
    letter-spacing: 0.5px;
    font-weight: 400;
}

#agendamento-hora::placeholder {
    color: var(--text-light);
    font-weight: 400;
}
/* =========================================================
   CALENDÁRIO
   ========================================================= */

.calendar-toolbar {
    margin-bottom: 16px;
}

.calendar-toolbar .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   NAVEGAÇÃO
   --------------------------------------------------------- */

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-navigation .btn {
    min-width: 42px;
    min-height: 38px;
    justify-content: center;
}

.calendar-navigation #btn-calendario-hoje {
    min-width: 58px;
}

/* ---------------------------------------------------------
   TÍTULO DO MÊS
   --------------------------------------------------------- */

.calendar-title {
    flex: 1;
    text-align: center;
    min-width: 180px;
}

.calendar-title .card-title {
    margin: 0;
    text-transform: capitalize;
}

/* ---------------------------------------------------------
   OPÇÕES MÊS / SEMANA / DIA
   --------------------------------------------------------- */

.calendar-view-options {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.calendar-view-options .btn {
    min-height: 36px;
}

.calendar-view-options .calendar-view-active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 400;
}

/* ---------------------------------------------------------
   CABEÇALHO DOS DIAS
   --------------------------------------------------------- */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-weekdays > div {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--text-secondary);
    background: var(--surface-soft);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   GRADE
   --------------------------------------------------------- */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

/* ---------------------------------------------------------
   CÉLULA DO DIA
   --------------------------------------------------------- */

.calendar-day-cell {
    position: relative;
    min-height: 145px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        background .18s ease;
}

.calendar-day-cell:hover {
    border-color: #DCEBF8;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

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

/* ---------------------------------------------------------
   DIAS DE OUTRO MÊS
   --------------------------------------------------------- */

.calendar-day-other {
    background: var(--surface-soft);
    opacity: .58;
}

/* ---------------------------------------------------------
   DIA ATUAL
   --------------------------------------------------------- */

.calendar-day-today {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.calendar-day-today .calendar-day-number {
    background: var(--primary);
    color: #fff;
}

/* ---------------------------------------------------------
   NÚMERO DO DIA
   --------------------------------------------------------- */

.calendar-day-number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 50%;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

/* ---------------------------------------------------------
   ÁREA DOS AGENDAMENTOS
   --------------------------------------------------------- */

.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* ---------------------------------------------------------
   AGENDAMENTO
   --------------------------------------------------------- */

.calendar-appointment {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.calendar-appointment:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 22px rgba(244,119,33,.055);
}

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

/* ---------------------------------------------------------
   HORÁRIO
   --------------------------------------------------------- */

.calendar-appointment-time {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   CLIENTE
   --------------------------------------------------------- */

.calendar-appointment-name {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   SERVIÇO
   --------------------------------------------------------- */

.calendar-appointment-service {
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .85;
}

/* ---------------------------------------------------------
   CORES DOS STATUS
   --------------------------------------------------------- */

.calendar-appointment.pending {
    background: #FFFFFF;
    border-color: #BBD5EA;
    color: #B8CADC;
}

.calendar-appointment.confirmed {
    background: #EFF6FF;
    border-color: #BBD5EA;
    color: #e16412;
}

.calendar-appointment.completed {
    background: #ECFDF5;
        border-color: #DDE8F0;
    color: #15803D;
}

.calendar-appointment.cancelled {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}

/* ---------------------------------------------------------
   DIA SEM AGENDAMENTO
   --------------------------------------------------------- */

.calendar-no-events {
    padding: 10px 4px;
    color: var(--text-light);
    text-align: center;
    font-size: 11px;
    font-weight: 400;
}

/* ---------------------------------------------------------
   LEGENDA
   --------------------------------------------------------- */

.calendar-legend {
    margin-top: 16px;
}

.legend-list {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
}

.legend-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.legend-dot.pending {
    background: #E1EBF5;
}

.legend-dot.confirmed {
    background: #f47721;
}

.legend-dot.completed {
        background: #FFFFFF;
}

.legend-dot.cancelled {
    background: #FFFFFF;
}

/* ---------------------------------------------------------
   ESTADO VAZIO
   --------------------------------------------------------- */

.calendar-empty {
    margin-top: 16px;
}

.calendar-empty .empty-state {
    padding: 46px 20px;
}

.calendar-empty .empty-icon {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------
   VISUALIZAÇÃO SEMANAL
   --------------------------------------------------------- */

.calendar-week-view {
    width: 100%;
}

.calendar-week-column {
    min-width: 0;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.calendar-week-column:hover {
    border-color: #DCEBF8 !important;
    box-shadow: var(--shadow-sm);
}

.calendar-week-column .calendar-appointment {
    min-width: 0;
}

/* ---------------------------------------------------------
   VISUALIZAÇÃO DIÁRIA
   --------------------------------------------------------- */

.calendar-day-view {
    width: 100%;
}

.calendar-day-view .calendar-appointment {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .calendar-toolbar .card-header {
        align-items: flex-start;
    }

    .calendar-title {
        order: -1;
        width: 100%;
        flex: 0 0 100%;
        text-align: left;
    }

    .calendar-grid {
        gap: 6px;
    }

    .calendar-day-cell {
        min-height: 125px;
        padding: 8px;
    }

    .calendar-day-number {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 850px) {

    .calendar-toolbar .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-navigation,
    .calendar-view-options {
        justify-content: center;
    }

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

    .calendar-weekdays {
        gap: 5px;
    }

    .calendar-grid {
        gap: 5px;
    }

    .calendar-day-cell {
        min-height: 105px;
        padding: 6px;
    }

    .calendar-day-number {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .calendar-appointment {
        padding: 5px 6px;
    }

    .calendar-appointment-name {
        font-size: 11px;
    }

    .calendar-appointment-service {
        display: none;
    }
}

@media (max-width: 620px) {

    .calendar-weekdays {
        gap: 3px;
    }

    .calendar-weekdays > div {
        min-height: 32px;
        padding: 5px 2px;
        font-size: 10px;
    }

    .calendar-grid {
        gap: 3px;
    }

    .calendar-day-cell {
        min-height: 84px;
        padding: 5px;
        border-radius: 8px;
    }

    .calendar-day-number {
        width: 23px;
        height: 23px;
        margin-bottom: 5px;
        font-size: 11px;
    }

    .calendar-day-events {
        gap: 3px;
    }

    .calendar-appointment {
        padding: 4px;
        border-radius: 6px;
    }

    .calendar-appointment-time {
        font-size: 10px;
    }

    .calendar-appointment-name {
        font-size: 10px;
    }

    .legend-list {
        gap: 10px;
    }
}

@media (max-width: 480px) {

    .calendar-navigation .btn {
        min-width: 38px;
        min-height: 36px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .calendar-navigation #btn-calendario-hoje {
        min-width: 52px;
    }

    .calendar-view-options .btn {
        min-height: 34px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
    }

    .calendar-day-cell {
        min-height: 72px;
    }

    .calendar-appointment-service {
        display: none;
    }

    .calendar-no-events {
        font-size: 9px;
        padding: 6px 2px;
    }
}
/* =========================================================
   CORREÇÃO DEFINITIVA — CALENDÁRIO SEMANA E DIA
   ========================================================= */

/* ---------------------------------------------------------
   SEMANA E DIA NÃO DEVEM FICAR PRESOS NA GRADE MENSAL
   --------------------------------------------------------- */

.calendar-grid:has(.calendar-week-view),
.calendar-grid:has(.calendar-day-view) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   VISUALIZAÇÃO SEMANA
   ========================================================= */

.calendar-grid .calendar-week-view {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Cada dia da semana */

.calendar-grid .calendar-week-column {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 420px !important;

    box-sizing: border-box !important;

    padding: 10px !important;

    overflow: hidden !important;

    border: 1px solid var(--border) !important;
    border-radius: 12px !important;

    background: var(--surface) !important;
}

/* Cabeçalho do dia */

.calendar-grid .calendar-week-column > div:first-child {
    width: 100% !important;
    min-width: 0 !important;

    margin-bottom: 10px !important;

    text-align: center !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    color: var(--text) !important;
}

/* Agendamentos dentro da semana */

.calendar-grid .calendar-week-column .calendar-appointment {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    margin-bottom: 6px !important;
    padding: 7px 8px !important;

    text-align: left !important;

    overflow: hidden !important;
}

/* =========================================================
   VISUALIZAÇÃO DIA
   ========================================================= */

.calendar-grid .calendar-day-view {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 10px !important;
}

/* Título da visualização diária */

.calendar-grid .calendar-day-view > div:first-child {
    width: 100% !important;

    margin-bottom: 16px !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    color: var(--text) !important;
}

/* Agendamentos do dia */

.calendar-grid .calendar-day-view .calendar-appointment {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    gap: 14px !important;

    margin-bottom: 8px !important;
    padding: 12px 14px !important;

    text-align: left !important;
}

/* =========================================================
   CONTEÚDO DOS AGENDAMENTOS
   ========================================================= */

.calendar-grid .calendar-appointment-time {
    flex: 0 0 auto !important;

    white-space: nowrap !important;

    font-size: 11px !important;
    font-weight: 400 !important;
}

.calendar-grid .calendar-appointment-name {
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 11px !important;
    font-weight: 400 !important;
}

.calendar-grid .calendar-appointment-service {
    min-width: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 10px !important;
}

/* =========================================================
   SEMANA — ÁREA INTERNA
   ========================================================= */

.calendar-week-column .calendar-appointment + .calendar-appointment {
    margin-top: 2px !important;
}

/* =========================================================
   TELAS MENORES
   ========================================================= */

@media (max-width: 900px) {

    .calendar-grid .calendar-week-view {
        grid-template-columns: repeat(
            7,
            minmax(110px, 1fr)
        ) !important;

        overflow-x: auto !important;
        padding-bottom: 8px !important;
    }

    .calendar-grid .calendar-week-column {
        min-width: 110px !important;
    }
}

@media (max-width: 650px) {

    .calendar-grid .calendar-week-view {
        grid-template-columns: repeat(
            7,
            minmax(140px, 1fr)
        ) !important;

        overflow-x: auto !important;
    }

    .calendar-grid .calendar-week-column {
        min-width: 140px !important;
    }

    .calendar-grid .calendar-day-view {
        padding: 6px !important;
    }

    .calendar-grid .calendar-day-view .calendar-appointment {
        flex-wrap: wrap !important;
    }
}
/* =========================================================
   CORREÇÃO — PESQUISA E FILTROS
   CLIENTES / PROFISSIONAIS / SERVIÇOS
   ========================================================= */

/* ---------------------------------------------------------
   BARRA DE PESQUISA DO TOPO
   --------------------------------------------------------- */

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 320px;
}

.search-box .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    color: var(--text-light);
    font-size: 14px;
    pointer-events: none;
}

.search-box input,
.global-search input,
.topbar input[type="search"] {
    width: 100%;
    height: 40px;

    padding: 0 14px 0 36px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;

    color: var(--text);
    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.search-box input::placeholder,
.global-search input::placeholder,
.topbar input[type="search"]::placeholder {
    color: var(--text-light);
}

.search-box input:hover,
.global-search input:hover,
.topbar input[type="search"]:hover {
    border-color: #f47721;
}

.search-box input:focus,
.global-search input:focus,
.topbar input[type="search"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
    background: var(--surface);
}

/* ---------------------------------------------------------
   ÁREA DOS FILTROS
   --------------------------------------------------------- */

.filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    width: 100%;

    margin-bottom: 16px;

    padding: 14px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    box-sizing: border-box;
}

.appointments-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    width: 100%;
    box-sizing: border-box;
}

.services-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* ---------------------------------------------------------
   CADA FILTRO
   --------------------------------------------------------- */

.filter-item,
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 0;
    flex: 1;
}

.filter-action {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   LABELS
   --------------------------------------------------------- */

.filter-item label,
.filter-group label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
}

/* ---------------------------------------------------------
   INPUT DE PESQUISA
   --------------------------------------------------------- */

.filter-input,
.filter-search,
.filter-group input[type="search"],
.filter-group input[type="text"] {
    width: 100%;
    height: 38px;

    padding: 0 12px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);
    font-family: inherit;
    font-size: 13px;

    outline: none;
    box-sizing: border-box;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.filter-input::placeholder,
.filter-search::placeholder {
    color: var(--text-light);
}

.filter-input:hover,
.filter-search:hover,
.filter-group input[type="search"]:hover {
    border-color: #f47721;
}

.filter-input:focus,
.filter-search:focus,
.filter-group input[type="search"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}

/* ---------------------------------------------------------
   SELECT
   --------------------------------------------------------- */

.filter-select,
.filter-group select,
.filter-item select {
    width: 100%;
    height: 38px;

    padding: 0 34px 0 12px;

    background-color: var(--surface);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 16px,
        calc(100% - 11px) 16px;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);
    font-family: inherit;
    font-size: 13px;

    outline: none;
    appearance: none;
    cursor: pointer;

    box-sizing: border-box;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.filter-select:hover,
.filter-group select:hover,
.filter-item select:hover {
    border-color: #f47721;
}

.filter-select:focus,
.filter-group select:focus,
.filter-item select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}

/* ---------------------------------------------------------
   BOTÃO LIMPAR FILTROS
   --------------------------------------------------------- */

.filter-action .btn,
.filter-action .secondary-button {
    height: 38px;

    white-space: nowrap;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border-radius: 8px;
}

/* ---------------------------------------------------------
   CLIENTES
   --------------------------------------------------------- */

#buscar-cliente,
#filtro-status-cliente {
    height: 38px;
}

/* ---------------------------------------------------------
   PROFISSIONAIS
   --------------------------------------------------------- */

#buscar-profissional,
#filtro-status-profissional,
#filtro-especialidade-profissional {
    height: 38px;
}

/* ---------------------------------------------------------
   SERVIÇOS
   --------------------------------------------------------- */

#buscar-servico,
#filtro-categoria,
#filtro-status-servico {
    height: 38px;
}

/* ---------------------------------------------------------
   ESPAÇAMENTO DOS FILTROS
   --------------------------------------------------------- */

.filters + .card,
.appointments-filters + .card,
.services-filters + .card {
    margin-top: 0;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media (max-width: 950px) {

    .filters,
    .appointments-filters,
    .services-filters {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .filter-item,
    .filter-group {
        flex: 1 1 calc(50% - 10px);
        min-width: 180px;
    }

    .filter-action {
        flex: 0 0 auto;
    }
}

@media (max-width: 620px) {

    .filters,
    .appointments-filters,
    .services-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .filter-item,
    .filter-group,
    .filter-action {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    .filter-input,
    .filter-search,
    .filter-select,
    .filter-group input[type="search"],
    .filter-group select,
    .filter-action .btn,
    .filter-action .secondary-button {
        width: 100%;
    }

    .search-box {
        max-width: 100%;
    }
}

/* =========================================================
   AGENDAMENTOS — MELHORAR VISUALIZAÇÃO DO CLIENTE
   ========================================================= */

/* Card de cada agendamento */
#lista-agendamentos .appointment-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 92px;
    padding: 16px 18px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    box-sizing: border-box;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

#lista-agendamentos .appointment-item:hover {
    border-color: #D9D0F8;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* =========================================================
   HORÁRIO
   ========================================================= */

#lista-agendamentos .appointment-time {
    flex: 0 0 58px;

    color: var(--primary);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.2;
}

/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

#lista-agendamentos .appointment-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* =========================================================
   NOME DO CLIENTE — DESTAQUE PRINCIPAL
   ========================================================= */

#lista-agendamentos .appointment-client {
    color: var(--text);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.25;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   SERVIÇO
   ========================================================= */

#lista-agendamentos .appointment-service {
    color: var(--text-secondary);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   PROFISSIONAL
   ========================================================= */

#lista-agendamentos .appointment-professional {
    color: var(--text-light);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   DATA
   ========================================================= */

#lista-agendamentos .appointment-date {
    margin-top: 2px;

    color: var(--text-light);

    font-size: 12px;
    font-weight: 400;
}

/* =========================================================
   AÇÕES
   ========================================================= */

#lista-agendamentos .appointment-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 10px;
}

/* =========================================================
   STATUS
   ========================================================= */

#lista-agendamentos .appointment-actions .status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 400;

    white-space: nowrap;
}

/* =========================================================
   BOTÃO EXCLUIR
   ========================================================= */

#lista-agendamentos .btn-excluir-agendamento {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text-light);

    font-size: 17px;
    line-height: 1;

    cursor: pointer;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

#lista-agendamentos .btn-excluir-agendamento:hover {
    color: var(--danger);
    border-color: #FECACA;
    background: #FEF2F2;
}

/* =========================================================
   SEPARAÇÃO ENTRE AGENDAMENTOS
   ========================================================= */

#lista-agendamentos {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#lista-agendamentos .appointment-item + .appointment-item {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1px;
}

#lista-agendamentos .appointment-item:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#lista-agendamentos .appointment-item:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 700px) {

    #lista-agendamentos .appointment-item {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    #lista-agendamentos .appointment-time {
        flex-basis: 50px;
        font-size: 14px;
    }

    #lista-agendamentos .appointment-client {
        font-size: 15px;
    }

    #lista-agendamentos .appointment-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
}

@media (max-width: 520px) {

    #lista-agendamentos .appointment-item {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 10px 12px;
    }

    #lista-agendamentos .appointment-actions {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
    }

    #lista-agendamentos .appointment-professional,
    #lista-agendamentos .appointment-date {
        font-size: 11px;
    }
}
/* =========================================================
   VISÃO GERAL — AJUSTE VISUAL DO DASHBOARD
   ========================================================= */

/* ---------------------------------------------------------
   CONTEÚDO PRINCIPAL
   --------------------------------------------------------- */

.page-content {
    width: 100%;
    box-sizing: border-box;
}

.page-header {
    margin-bottom: 18px;
}

.page-title {
    margin: 3px 0 5px;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--text);
}

.page-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   DATA DE HOJE
   --------------------------------------------------------- */

.page-date {
    min-width: 86px;
    padding: 10px 12px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;

    text-align: right;
    box-sizing: border-box;
}

.page-date span {
    display: block;
    margin-bottom: 3px;

    color: var(--text-light);
    font-size: 11px;
}

.page-date strong {
    display: block;

    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

/* =========================================================
   MÉTRICAS
   ========================================================= */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 16px;
}

.metrics-grid .metric-card {
    min-width: 0;
    min-height: 108px;

    padding: 15px 16px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: var(--shadow-sm);

    box-sizing: border-box;
}

.metrics-grid .metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.metrics-grid .metric-label {
    min-width: 0;

    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

.metrics-grid .metric-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary-light);
    color: var(--primary);

    border-radius: 8px;

    font-size: 11px;
    font-weight: 400;
}

.metrics-grid .metric-value {
    margin-top: 12px;

    color: var(--text);
    font-size: 22px;
    line-height: 1;

    font-weight: 400;
}

.metrics-grid .metric-note {
    margin-top: 7px;

    color: var(--text-light);
    font-size: 9px;
    line-height: 1.4;
}

/* =========================================================
   GRID DO DASHBOARD
   ========================================================= */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, .95fr);

    gap: 12px;

    width: 100%;
    align-items: start;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 12px;

    min-width: 0;
}

/* =========================================================
   CARDS DO DASHBOARD
   ========================================================= */

.dashboard-column > .card {
    width: 100%;
    min-width: 0;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: var(--shadow-sm);

    box-sizing: border-box;
    overflow: hidden;
}

.dashboard-column .card-header {
    min-height: 58px;

    padding: 13px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid var(--border-light);
    box-sizing: border-box;
}

.dashboard-column .card-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
}

.dashboard-column .card-subtitle {
    margin-top: 3px;

    color: var(--text-light);
    font-size: 10px;
    line-height: 1.35;
}

/* =========================================================
   BOTÕES PEQUENOS DO DASHBOARD
   ========================================================= */

.dashboard-column .btn-sm {
    min-height: 32px;

    padding: 0 11px;

    border-radius: 8px;

    font-size: 11px;
}

/* =========================================================
   AGENDA DE HOJE
   ========================================================= */

#agenda-hoje {
    width: 100%;
}

#agenda-hoje .schedule-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;

    gap: 12px;

    min-height: 68px;
    padding: 11px 14px;

    border-bottom: 1px solid var(--border-light);

    box-sizing: border-box;
}

#agenda-hoje .schedule-item:last-child {
    border-bottom: 0;
}

#agenda-hoje .schedule-time {
    color: var(--primary);

    font-size: 15px;
    font-weight: 400;
}

#agenda-hoje .schedule-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

#agenda-hoje .schedule-info strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 400;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#agenda-hoje .schedule-info span {
    color: var(--text-secondary);

    font-size: 11px;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#agenda-hoje .schedule-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;
    padding: 4px 8px;

    border-radius: 999px;

    background: #FFFFFF;
    color: #e16412;

    font-size: 10px;
    font-weight: 400;

    white-space: nowrap;
}

/* ---------------------------------------------------------
   BOTÃO EXCLUIR DA AGENDA
   --------------------------------------------------------- */

#agenda-hoje .btn-excluir-agendamento {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--surface);
    color: var(--text-light);

    font-size: 15px;
    line-height: 1;

    cursor: pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

#agenda-hoje .btn-excluir-agendamento:hover {
    background: #FEF2F2;
    border-color: #FECACA;
    color: var(--danger);
}

/* ---------------------------------------------------------
   CASO O SCRIPT GERE O BOTÃO COM OUTRA CLASSE
   --------------------------------------------------------- */

#agenda-hoje button {
    font-family: inherit;
}

/* =========================================================
   PRÓXIMO ATENDIMENTO
   ========================================================= */

#proximo-atendimento {
    width: 100%;
}

#proximo-atendimento .next-appointment {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 18px;

    box-sizing: border-box;
}

#proximo-atendimento .next-time {
    display: inline-flex;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 21px;
    font-weight: 400;
}

#proximo-atendimento .next-appointment strong {
    color: var(--text);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.3;
}

#proximo-atendimento .next-appointment span:last-child {
    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 11px;
}

/* =========================================================
   PROFISSIONAIS
   ========================================================= */

#profissionais-resumo {
    width: 100%;
}

#profissionais-resumo .professional-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 60px;

    padding: 10px 14px;

    border-bottom: 1px solid var(--border-light);

    box-sizing: border-box;
}

#profissionais-resumo .professional-item:last-child {
    border-bottom: 0;
}

#profissionais-resumo .professional-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary-light);
    color: var(--primary);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 400;
}

#profissionais-resumo .professional-item > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

#profissionais-resumo .professional-item strong {
    color: var(--text);

    font-size: 12px;
    font-weight: 400;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profissionais-resumo .professional-item span {
    color: var(--text-secondary);

    font-size: 10px;
}

/* =========================================================
   GRÁFICO
   ========================================================= */

.analytics-panel {
    min-height: 240px;
}

.analytics-panel .card-header {
    gap: 15px;
}

#periodo-grafico {
    width: 130px;
    height: 34px;

    font-size: 11px;
}

/* Área geral do gráfico */

.analytics-panel .chart {
    display: flex;
    gap: 10px;

    min-height: 170px;

    padding: 14px 14px 8px;

    box-sizing: border-box;
}

/* Eixo Y */

.analytics-panel .chart-y {
    width: 20px;
    flex: 0 0 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 2px 0 25px;

    color: var(--text-light);

    font-size: 9px;
    text-align: right;
}

/* Área do gráfico */

.analytics-panel .chart-area {
    position: relative;

    flex: 1;
    min-width: 0;

    min-height: 165px;

    box-sizing: border-box;
}

/* Linhas */

.analytics-panel .chart-grid-lines {
    position: absolute;
    inset: 0 0 25px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.analytics-panel .chart-grid-lines span {
    display: block;

    width: 100%;
    height: 1px;

    background: var(--border-light);
}

/* Barras */

.analytics-panel .chart-bars {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;

    padding: 0 4px 0;

    box-sizing: border-box;
}

.analytics-panel .bar-group {
    height: 100%;
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    gap: 6px;
}

.analytics-panel .bar {
    width: min(28px, 70%);

    min-height: 4px;

    background: var(--primary);

    border-radius: 7px 7px 3px 3px;

    transition:
        height .25s ease,
        transform .18s ease;
}

.analytics-panel .bar:hover {
    transform: translateY(-2px);
}

.analytics-panel .bar-group > span {
    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 400;
}

.analytics-panel .chart-value {
    margin-bottom: 2px;

    color: var(--text);

    font-size: 10px;
    font-weight: 400;
}

/* =========================================================
   CLIENTES RECENTES
   ========================================================= */

.clients-panel .table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.clients-panel .clients-table {
    width: 100%;

    border-collapse: collapse;
}

.clients-panel .clients-table th {
    padding: 10px 12px;

    background: var(--surface-soft);

    border-bottom: 1px solid var(--border-light);

    color: var(--text-light);

    font-size: 9px;
    font-weight: 400;

    text-align: left;
    white-space: nowrap;
}

.clients-panel .clients-table td {
    padding: 11px 12px;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-secondary);

    font-size: 11px;
}

.clients-panel .clients-table tr:last-child td {
    border-bottom: 0;
}

.clients-panel .clients-table td:first-child {
    color: var(--text);
    font-weight: 400;
}

/* =========================================================
   ESTADO VAZIO
   ========================================================= */

.dashboard-column .empty-state {
    padding: 26px 18px;
}

.dashboard-column .empty-icon {
    margin-bottom: 9px;

    font-size: 22px;
}

.dashboard-column .empty-title {
    color: var(--text);

    font-size: 13px;
    font-weight: 400;
}

.dashboard-column .empty-text {
    max-width: 320px;
    margin: 5px auto 0;

    color: var(--text-light);

    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1100px) {

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(280px, 1fr);
    }

    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-header {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    #agenda-hoje .schedule-item {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    #agenda-hoje .schedule-status {
        grid-column: 2;
        justify-self: start;
    }

    .analytics-panel .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #periodo-grafico {
        width: 100%;
    }

    .page-date {
        width: 100%;
        text-align: left;
    }
}
/* =========================================================
   VISÃO GERAL — ATENDIMENTOS COM CLIENTE E HORÁRIO
   ========================================================= */

.analytics-panel .chart-bars {
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    padding: 0 4px 8px;
}

.analytics-panel .chart-day.dashboard-chart-day {
    flex: 1 1 0;
    min-width: 105px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    height: 100%;

    padding: 8px;

    border: 1px solid var(--border-light);
    border-radius: 10px;

    background: var(--surface-soft);

    box-sizing: border-box;
}

.dashboard-chart-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 7px;
}

.dashboard-chart-day-name {
    color: var(--text);

    font-size: 11px;
    font-weight: 400;
}

.dashboard-chart-day-header strong {
    min-width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--primary-light);
    color: var(--primary);

    font-size: 10px;
    font-weight: 400;
}

/* ---------------------------------------------------------
   BARRA
   --------------------------------------------------------- */

.dashboard-chart-bar-wrap {
    height: 52px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    margin-bottom: 8px;

    border-bottom: 1px solid var(--border-light);
}

.dashboard-chart-bar-wrap .chart-bar {
    width: 24px;
    min-height: 4px;

    background: var(--primary);

    border-radius: 6px 6px 2px 2px;

    transition: height .25s ease;
}

/* ---------------------------------------------------------
   LISTA DE ATENDIMENTOS
   --------------------------------------------------------- */

.dashboard-chart-list {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;

    max-height: 105px;

    overflow-y: auto;
}

.dashboard-chart-appointment {
    display: flex;
    align-items: flex-start;

    gap: 6px;

    padding: 6px;

    background: var(--surface);

    border: 1px solid var(--border-light);
    border-radius: 7px;

    box-sizing: border-box;
}

.dashboard-chart-time {
    flex: 0 0 auto;

    color: var(--primary);

    font-size: 9px;
    font-weight: 400;

    white-space: nowrap;
}

.dashboard-chart-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-chart-info strong {
    color: var(--text);

    font-size: 9px;
    font-weight: 400;

    line-height: 1.25;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-chart-info span {
    color: var(--text-light);

    font-size: 8px;
    line-height: 1.25;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-chart-empty {
    padding: 6px 2px;

    color: var(--text-light);

    font-size: 8px;
    text-align: center;
}

/* ---------------------------------------------------------
   SCROLL DA LISTA
   --------------------------------------------------------- */

.dashboard-chart-list::-webkit-scrollbar {
    width: 4px;
}

.dashboard-chart-list::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-chart-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .analytics-panel .chart-bars {
        overflow-x: auto;
    }

    .analytics-panel .chart-day.dashboard-chart-day {
        min-width: 115px;
    }
}

@media (max-width: 620px) {

    .analytics-panel .chart-day.dashboard-chart-day {
        min-width: 130px;
    }

    .dashboard-chart-list {
        max-height: 130px;
    }
}

/* =========================================================
   RESPONSIVIDADE GLOBAL — CRM SALÃO
   ---------------------------------------------------------
   Este bloco deve ficar POR ÚLTIMO no style.css.
   Ele sobrescreve as regras anteriores e adapta:
   - Desktop
   - Notebook
   - Tablet
   - Celular
   - Celulares pequenos
   ========================================================= */


/* =========================================================
   1. NOTEBOOK / TELAS MÉDIAS
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --sidebar-width: 230px;
    }

    main,
    main.main {
        margin-left: var(--sidebar-width);
    }

    .page-content,
    .content {
        padding: 24px;
    }

    header.topbar,
    .topbar {
        padding-left: 24px;
        padding-right: 24px;
    }

    .topbar .search-box,
    .topbar .global-search {
        width: 270px;
        min-width: 270px;
        max-width: 270px;
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(280px, 1fr);
    }

    .metrics-grid,
    .metrics {
        gap: 12px;
    }

    .professional-grid,
    .service-list,
    .service-grid,
    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   2. TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1000px) {

    :root {
        --sidebar-width: 215px;
    }

    main,
    main.main {
        margin-left: var(--sidebar-width);
    }

    .logo {
        padding-left: 14px;
        padding-right: 14px;
        gap: 9px;
    }

    .logo-title {
        font-size: 14px;
    }

    .logo-subtitle {
        font-size: 10px;
    }

    .sidebar-menu,
    .menu {
        padding-left: 8px;
        padding-right: 8px;
    }

    .menu-item {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 13px;
    }

    .page-content,
    .content {
        padding: 22px;
    }

    .page-header {
        gap: 16px;
    }

    .page-title,
    .page-header h1 {
        font-size: 24px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .professional-grid,
    .service-list,
    .service-grid,
    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        gap: 12px;
    }

    .calendar-toolbar .card-header {
        flex-wrap: wrap;
    }

    .calendar-title {
        flex: 1 1 100%;
        order: -1;
    }
}


/* =========================================================
   3. TABLET / MOBILE
   ========================================================= */

@media (max-width: 800px) {

    :root {
        --sidebar-width: 0px;
    }

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        min-height: 100vh;
    }

    .app,
    .main-layout {
        width: 100%;
        min-width: 0;
        display: block;
    }


    /* -----------------------------------------------------
       SIDEBAR MOBILE
       ----------------------------------------------------- */

    .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        bottom: auto;

        width: 100%;
        min-width: 0;
        min-height: auto;

        height: auto;
        max-height: none;

        display: block;

        overflow: visible;

        border-right: 0;
        border-bottom: 1px solid var(--border);

        background: var(--surface);

        z-index: 100;
    }


    /* Logo */

    .logo {
        width: 100%;
        height: 64px;

        padding: 11px 14px;

        display: flex;
        align-items: center;
    }

    .logo-icon,
    .logo-mark {
        width: 38px;
        height: 38px;
        min-width: 38px;

        border-radius: 10px;
    }

    .logo-icon::before,
    .logo-mark::before {
        font-size: 17px;
    }

    .logo-title {
        font-size: 14px;
        line-height: 18px;
    }

    .logo-subtitle {
        font-size: 9px;
        line-height: 13px;
    }


    /* -----------------------------------------------------
       MENU MOBILE
       ----------------------------------------------------- */

    .sidebar-menu,
    .menu {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 6px;

        padding: 8px 10px 10px;
    }

    .menu-label {
        display: none;
    }

    .sidebar-separator,
    .menu-separator {
        display: none;
    }

    .menu-item {
        width: 100%;
        min-height: 42px;

        justify-content: center;

        gap: 6px;

        padding: 8px 6px;

        border-radius: 8px;

        font-size: 11px;
        text-align: center;
    }

    .menu-icon {
        width: 18px;
        min-width: 18px;
        height: 18px;
    }

    .menu-icon::before {
        font-size: 14px;
    }

    .menu-text {
        flex: 0 1 auto;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-badge {
        position: absolute;

        top: 3px;
        right: 4px;

        min-width: 17px;
        height: 17px;

        padding: 0 4px;

        font-size: 8px;
    }

    .menu-item {
        position: relative;
    }


    /* -----------------------------------------------------
       FOOTER DA SIDEBAR
       ----------------------------------------------------- */

    .sidebar-footer {
        display: none;
    }


    /* -----------------------------------------------------
       ÁREA PRINCIPAL
       ----------------------------------------------------- */

    main,
    main.main {
        width: 100%;
        min-width: 0;

        margin-left: 0;

        min-height: calc(100vh - 64px);

        display: flex;
    }


    /* -----------------------------------------------------
       TOPBAR
       ----------------------------------------------------- */

    header.topbar,
    .topbar {
        position: sticky;
        top: 64px;

        width: 100%;
        height: auto;
        min-height: 60px;

        padding: 10px 12px;

        z-index: 90;
    }

    .topbar .topbar-actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;

        gap: 7px;

        margin-left: 0;
    }

    .topbar .search-box,
    .topbar .global-search {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .topbar .search-box input,
    .topbar .global-search input {
        width: 100%;
        height: 38px;
    }

    .topbar .btn-primary,
    .topbar .primary-button {
        min-height: 38px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 11px;
    }

    .topbar .notification-button,
    .topbar .btn-icon,
    .topbar .icon-button {
        width: 38px;
        min-width: 38px;
    }


    /* -----------------------------------------------------
       CONTEÚDO
       ----------------------------------------------------- */

    .page-content,
    .content {
        width: 100%;
        max-width: none;

        padding: 18px 14px;
    }

    .page-header {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        margin-bottom: 18px;
    }

    .page-title,
    .page-header h1 {
        font-size: 23px;
        line-height: 28px;
    }

    .page-description,
    .page-header p {
        max-width: none;

        font-size: 12px;
        line-height: 17px;
    }

    .page-date {
        width: max-content;

        text-align: left;
    }


    /* -----------------------------------------------------
       MÉTRICAS
       ----------------------------------------------------- */

    .metrics-grid,
    .metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;

        margin-bottom: 14px;
    }

    .metric-card {
        min-width: 0;

        padding: 13px;
    }

    .metric-value,
    .metric-card > strong {
        font-size: 22px;
        line-height: 26px;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .dashboard-grid,
    .overview-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .dashboard-column,
    .right-column {
        width: 100%;
        min-width: 0;

        gap: 12px;
    }

    .dashboard-column > .card,
    .card,
    .panel {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       CABEÇALHO DOS CARDS
       ----------------------------------------------------- */

    .card-header,
    .panel-header {
        min-height: 56px;

        padding: 12px 14px;

        gap: 10px;
    }

    .card-title,
    .panel-header h2 {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       FORMULÁRIOS
       ----------------------------------------------------- */

    .form-grid,
    .form-row {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 14px;
    }

    .form-group.full,
    .form-group.full-width {
        grid-column: auto;
    }


    /* -----------------------------------------------------
       FILTROS
       ----------------------------------------------------- */

    .filters,
    .filter-bar,
    .appointments-filters,
    .services-filters {
        width: 100%;

        flex-direction: column;
        align-items: stretch;

        gap: 9px;

        padding: 12px;
    }

    .filter-group,
    .filter-item,
    .filter-action {
        width: 100%;
        min-width: 0;
    }

    .filter-group input,
    .filter-group select,
    .filter-item input,
    .filter-item select,
    .filter-action .btn {
        width: 100%;
        max-width: none;
    }


    /* -----------------------------------------------------
       TABELAS
       ----------------------------------------------------- */

    .table-wrapper,
    .clients-table-wrapper {
        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .table,
    .clients-table {
        min-width: 600px;
    }


    /* -----------------------------------------------------
       CLIENTES
       ----------------------------------------------------- */

    #clientes-lista {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    #clientes-lista .client-item {
        width: 100%;

        min-width: 0;

        padding: 12px;
    }

    #clientes-lista .client-actions {
        gap: 5px;
    }


    /* -----------------------------------------------------
       SERVIÇOS
       ----------------------------------------------------- */

    #lista-servicos {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    #lista-servicos .service-item {
        width: 100%;
        min-width: 0;

        padding: 13px;
    }


    /* -----------------------------------------------------
       PROFISSIONAIS
       ----------------------------------------------------- */

    #profissionais-lista {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }

    #profissionais-lista .professional-item {
        width: 100%;

        min-width: 0;

        padding: 13px;
    }


    /* -----------------------------------------------------
       AGENDAMENTOS
       ----------------------------------------------------- */

    #lista-agendamentos {
        width: 100%;
    }

    #lista-agendamentos .appointment-item {
        width: 100%;

        min-width: 0;

        padding: 13px;
    }


    /* -----------------------------------------------------
       CALENDÁRIO
       ----------------------------------------------------- */

    .calendar-toolbar .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-title {
        width: 100%;

        order: -1;

        text-align: center;
    }

    .calendar-navigation,
    .calendar-view-options {
        width: 100%;

        justify-content: center;
    }

    .calendar-grid {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .calendar-weekdays {
        min-width: 574px;
    }

    .calendar-grid {
        min-width: 574px;
    }

    .calendar-day-cell {
        min-width: 82px;
    }


    /* -----------------------------------------------------
       MODAIS
       ----------------------------------------------------- */

    .modal {
        padding: 10px;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;

        max-height:
            calc(100vh - 20px);

        border-radius: 13px;
    }

    .modal-header {
        padding: 13px 14px;
    }

    .modal-body {
        padding: 14px;
    }

    .modal-footer,
    .modal-actions,
    .form-actions {
        padding: 12px 14px;

        flex-wrap: wrap;
    }

    .modal-footer .btn,
    .modal-actions .btn,
    .form-actions .btn {
        flex: 1 1 auto;
    }


    /* -----------------------------------------------------
       GRÁFICO
       ----------------------------------------------------- */

    .analytics-panel .chart {
        min-height: 210px;

        padding: 14px 10px;
    }

    .analytics-panel .chart-bars {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        justify-content: flex-start;

        gap: 8px;
    }

    .analytics-panel .chart-day.dashboard-chart-day {
        flex: 0 0 105px;

        min-width: 105px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer {
        padding:
            16px
            14px
            20px;
    }
}


/* =========================================================
   4. CELULAR
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       MENU
       ----------------------------------------------------- */

    .sidebar-menu,
    .menu {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding:
            7px
            8px
            9px;

        gap: 5px;
    }

    .menu-item {
        min-height: 40px;

        padding: 7px 5px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       TOPBAR
       ----------------------------------------------------- */

    header.topbar,
    .topbar {
        top: 64px;

        padding:
            8px 10px;
    }

    .topbar .topbar-actions {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .topbar .notification-button,
    .topbar .btn-icon,
    .topbar .icon-button {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    .topbar .btn-primary,
    .topbar .primary-button {
        grid-column: 1 / -1;

        width: 100%;

        min-height: 38px;
    }


    /* -----------------------------------------------------
       CONTEÚDO
       ----------------------------------------------------- */

    .page-content,
    .content {
        padding:
            15px
            10px
            18px;
    }

    .page-title,
    .page-header h1 {
        font-size: 21px;
        line-height: 26px;
    }


    /* -----------------------------------------------------
       MÉTRICAS
       ----------------------------------------------------- */

    .metrics-grid,
    .metrics {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }

    .metric-card {
        padding: 11px;
        border-radius: 10px;
    }

    .metric-label,
    .metric-top > span {
        font-size: 10px;
    }

    .metric-icon {
        width: 26px;
        height: 26px;
    }

    .metric-value,
    .metric-card > strong {
        margin-top: 8px;

        font-size: 20px;
        line-height: 23px;
    }

    .metric-note {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .card,
    .panel {
        border-radius: 11px;
    }

    .card-header,
    .panel-header {
        padding:
            11px
            12px;
    }


    /* -----------------------------------------------------
       AGENDA
       ----------------------------------------------------- */

    #agenda-hoje .schedule-item {
        grid-template-columns:
            48px minmax(0, 1fr);

        gap: 8px;

        padding:
            10px
            11px;
    }

    #agenda-hoje .schedule-status {
        grid-column: 2;

        justify-self: start;
    }

    #agenda-hoje .schedule-time {
        font-size: 13px;
    }

    #agenda-hoje .schedule-info strong {
        font-size: 12px;
    }

    #agenda-hoje .schedule-info span {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       PROFISSIONAIS
       ----------------------------------------------------- */

    #profissionais-lista .professional-item {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    #profissionais-lista .professional-info {
        flex: 1 1
            calc(100% - 58px);
    }

    #profissionais-lista .professional-actions {
        width: 100%;

        justify-content: flex-end;
    }


    /* -----------------------------------------------------
       SERVIÇOS
       ----------------------------------------------------- */

    #lista-servicos .service-item {
        align-items: flex-start;

        flex-wrap: wrap;

        gap: 10px;
    }

    #lista-servicos .service-info {
        flex:
            1 1
            calc(100% - 54px);
    }

    #lista-servicos .service-price {
        width: 100%;

        margin-left: 52px;
    }

    #lista-servicos .service-actions {
        width: 100%;

        justify-content: flex-end;
    }


    /* -----------------------------------------------------
       CLIENTES
       ----------------------------------------------------- */

    #clientes-lista .client-item {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    #clientes-lista .client-info {
        flex:
            1 1
            calc(100% - 54px);
    }

    #clientes-lista .client-actions {
        width: 100%;

        justify-content: flex-end;
    }


    /* -----------------------------------------------------
       AGENDAMENTOS
       ----------------------------------------------------- */

    #lista-agendamentos .appointment-item {
        display: grid;

        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 8px 10px;
    }

    #lista-agendamentos .appointment-time {
        grid-column: 1;

        font-size: 14px;
    }

    #lista-agendamentos .appointment-info {
        grid-column: 2;
    }

    #lista-agendamentos .appointment-actions {
        grid-column: 2;

        width: 100%;

        justify-content: flex-start;
    }


    /* -----------------------------------------------------
       FORMULÁRIO
       ----------------------------------------------------- */

    .form-control,
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 42px;

        font-size: 13px;
    }

    .form-group textarea {
        min-height: 90px;
    }


    /* -----------------------------------------------------
       DIAS DE TRABALHO
       ----------------------------------------------------- */

    .dias-trabalho-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .dia-trabalho {
        padding:
            8px
            9px;

        min-height: 40px;
    }

    .dia-trabalho span {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       CALENDÁRIO
       ----------------------------------------------------- */

    .calendar-navigation {
        gap: 5px;
    }

    .calendar-navigation .btn {
        min-width: 36px;

        padding-left: 8px;
        padding-right: 8px;
    }

    .calendar-navigation #btn-calendario-hoje {
        min-width: 52px;
    }

    .calendar-view-options {
        gap: 4px;
    }

    .calendar-view-options .btn {
        flex: 1;

        min-height: 35px;

        padding:
            6px
            8px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       PRÓXIMO ATENDIMENTO
       ----------------------------------------------------- */

    #proximo-atendimento .next-appointment {
        min-height: 100px;

        padding: 14px;
    }

    #proximo-atendimento .next-time {
        font-size: 19px;
    }


    /* -----------------------------------------------------
       GRÁFICO
       ----------------------------------------------------- */

    .analytics-panel .chart {
        min-height: 190px;

        padding:
            10px
            8px;
    }

    .analytics-panel .chart-y {
        width: 18px;

        flex-basis: 18px;

        font-size: 8px;
    }

    .analytics-panel .chart-day.dashboard-chart-day {
        min-width: 100px;
    }


    /* -----------------------------------------------------
       MODAL
       ----------------------------------------------------- */

    .modal {
        align-items: flex-end;

        padding:
            0;
    }

    .modal-content {
        width: 100%;

        max-height:
            92vh;

        border-radius:
            16px
            16px
            0
            0;
    }

    .modal-footer,
    .modal-actions,
    .form-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }

    .modal-footer .btn,
    .modal-actions .btn,
    .form-actions .btn {
        width: 100%;
    }
}


/* =========================================================
   5. CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 420px) {

    .logo {
        height: 58px;
    }

    .logo-icon,
    .logo-mark {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .logo-title {
        font-size: 13px;
    }

    .logo-subtitle {
        display: none;
    }

    header.topbar,
    .topbar {
        top: 58px;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 96px;
    }

    .page-title,
    .page-header h1 {
        font-size: 20px;
    }

    .page-description,
    .page-header p {
        font-size: 11px;
    }

    .dias-trabalho-grid {
        grid-template-columns: 1fr;
    }

    .modal-footer,
    .modal-actions,
    .form-actions {
        grid-template-columns: 1fr;
    }

    .calendar-weekdays,
    .calendar-grid {
        min-width: 560px;
    }

    .footer {
        font-size: 10px;
    }
}


/* =========================================================
   6. AJUSTES DE ORIENTAÇÃO
   ========================================================= */

@media (max-width: 800px)
    and (orientation: landscape) {

    .sidebar {
        position: relative;
    }

    .sidebar-menu,
    .menu {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .page-content,
    .content {
        padding:
            16px
            14px;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(240px, 1fr);
    }

    .modal-content {
        max-height: 90vh;
    }
}


/* =========================================================
   7. EVITAR ELEMENTOS ESTOURANDO A TELA
   ========================================================= */

@media (max-width: 800px) {

    .card,
    .panel,
    .metric-card,
    .appointment-item,
    .professional-card,
    .professional-item,
    .service-card,
    .service-item,
    .client-card,
    .client-item,
    .form-grid,
    .form-row,
    .filters,
    .filter-bar,
    .dashboard-grid,
    .dashboard-column,
    .right-column {
        max-width: 100%;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   TEMA 2026 — AGENDA AZUL CINZENTO
   Camada visual global para todas as páginas do CRM.
   Mantém a estrutura e a lógica existentes.
   ========================================================= */

:root {
    --primary: #f47721;
    --primary-dark: #f47721;
    --primary-light: #DCEBF8;
    --primary-soft: #EDF5FF;

    --background: #e16412;
    --surface: #F7FAFC;
    --surface-soft: #F7FAFC;

    --text: #e16412;
    --text-secondary: #e16412;
    --text-light: #7B8998;

    --border: #D9E4EC;
    --border-light: #DDE6ED;

    --success: #15956F;
    --success-bg: #DDF7EE;
    --warning: #ffe1cc;
    --warning-bg: #FFFFFF;
    --danger: #D35462;
    --danger-bg: #FDE6E9;
    --info: #f47721;
    --info-bg: #E0EFFF;

    --accent-teal: #f47721;
    --accent-violet: #f47721;
    --accent-coral: #ffe1cc;
    --accent-gold: #efb48d;

    --sidebar-width: 258px;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;

    --shadow-sm: 0 1px 2px rgba(225,100,18,0.06), 0 6px 18px rgba(225,100,18,0.05);
    --shadow: 0 10px 28px rgba(225,100,18,0.09);
    --shadow-lg: 0 18px 50px rgba(225,100,18,0.14);
}

html {
    background: var(--background);
}

body {
    background: #FFFFFF;
    color: var(--text);
}

::selection {
        background: #FFFFFF;
    color: var(--text);
}

/* Sidebar */
.sidebar {
        background: #FFFFFF;
    border-right: 1px solid rgba(255,255,255,0.07);
    box-shadow: 12px 0 36px rgba(225,100,18,0.10);
}

.logo {
    min-height: 84px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logo-icon,
.logo-mark {
        background: #FFFFFF;
    color: #fff;
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(244,119,33,0.28);
}

.logo-icon::before,
.logo-mark::before {
    content: "▦" !important;
    font-size: 22px !important;
    color: #fff !important;
}

.logo-text strong,
.logo-title {
    color: #FFFFFF;
}

.logo-text span,
.logo-subtitle {
    color: #9FB1C1;
}

.menu-label {
    color: #f47721;
}

.menu-item {
    color: #C2CED8;
    border: 1px solid transparent;
}

.menu-item:hover {
        background: #FFFFFF;
        border-color: #DDE8F0;
    color: #fff;
}

.menu-item.active {
        background: #FFFFFF;
        border-color: #DDE8F0;
    color: #fff;
    box-shadow: inset 3px 0 0 #efb48d;
}

.menu-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
}

.menu-item.active .menu-icon,
.menu-item:hover .menu-icon {
        background: #FFFFFF;
}

.menu-icon::before {
    font-size: 14px;
}

.menu-item[href="index.html"] .menu-icon::before,
.menu-item[href="Visão geral"] .menu-icon::before { content: "⌂"; }
.menu-item[href="agendamentos.html"] .menu-icon::before { content: "◷"; }
.menu-item[href="calendario.html"] .menu-icon::before { content: "▦"; }
.menu-item[href="servicos.html"] .menu-icon::before { content: "◇"; }
.menu-item[href="profissionais.html"] .menu-icon::before { content: "♙"; }
.menu-item[href="clientes.html"] .menu-icon::before { content: "◎"; }
.menu-item[href="configuracoes.html"] .menu-icon::before { content: "⚙"; }

.menu-badge {
    background: #EEF5FB;
    box-shadow: 0 0 0 3px rgba(244,119,33,0.12);
}

.sidebar-separator,
.menu-separator {
    background: rgba(255,255,255,0.08);
}

.access-card,
.sidebar-access {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}

.access-card strong,
.sidebar-access strong,
.access-card-title,
.profile-name,
.profile-status {
    color: #EDF5FB;
}

.access-card span,
.sidebar-access span,
.sidebar-access p,
.access-card-text,
.profile-info span {
    color: #94A8B9;
}

.profile-avatar {
        background: #FFFFFF;
    box-shadow: 0 7px 22px rgba(244,119,33,.055);
}

.sidebar-footer {
    border-top-color: rgba(255,255,255,0.08);
}

/* Área principal e topbar */
main,
main.main {
    background: transparent;
}

header.topbar,
.topbar {
    height: 72px;
    background: rgba(239, 244, 248, 0.94);
    border-bottom: 1px solid #CFDBE5;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(225,100,18,0.05);
}

.topbar .global-search,
.topbar .search-box {
    width: min(420px, 42vw);
    max-width: 420px;
}

.topbar .global-search input,
.topbar .search-box input,
.global-search input {
    height: 42px;
    background: #FFFFFF;
        border: #DDE8F0;
    border-radius: 12px;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}

.topbar .global-search input:hover,
.topbar .search-box input:hover,
.global-search input:hover {
        border-color: #DDE8F0;
    background: #F7FAFC;
}

.topbar .global-search input:focus,
.topbar .search-box input:focus,
.global-search input:focus {
        border-color: #DDE8F0;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(244,119,33,0.12);
}

.search-icon,
.topbar .search-box .search-icon {
    color: #f47721;
}

.topbar .notification-button,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button {
    background: #f47721;
        border-color: #DDE8F0;
    color: #e16412;
    border-radius: 12px;
}

.topbar .notification-button:hover,
.notification-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover {
    background: #DCEBF8;
        border-color: #DDE8F0;
    color: #e16412;
}

/* Conteúdo */
.page-content,
.content {
    max-width: 1500px;
    padding: 32px;
}

.page-eyebrow,
.page-overline {
    color: #f47721;
    letter-spacing: .12em;
}

.page-title,
.page-header h1 {
    font-size: 29px;
    line-height: 36px;
    color: #e16412;
}

.page-description,
.page-header p {
    color: #f47721;
}

.page-date {
    background: #F7FAFC;
        border-color: #DDE8F0;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

/* Botões */
.btn,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button {
    border-radius: 11px;
}

.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button {
        background: #FFFFFF;
        border-color: #DDE8F0;
    box-shadow: 0 7px 16px rgba(244,119,33,0.20);
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover {
        background: #FFFFFF;
    border-color: #e16412;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #F7FAFC;
    color: #e16412;
        border-color: #DDE8F0;
}

.btn-secondary:hover {
    background: #FFFFFF;
        border-color: #DDE8F0;
    color: #e16412;
}

/* Cards e painéis */
.card,
.panel,
.metric-card,
.professional-card,
.service-card,
.client-card,
#clientes-lista .client-item {
    background: rgba(247, 250, 252, 0.92);
        border: #DDE8F0;
    box-shadow: var(--shadow-sm);
}

.card,
.panel,
.metric-card {
    border-radius: 16px;
}

.card:hover,
.panel:hover {
        border-color: #DDE8F0;
}

.card-header,
.panel-header {
        background: #FFFFFF;
    border-bottom-color: #DBE4EB;
}

.card-title,
.panel-header h2 {
    color: #2F241F;
    font-size: 15px;
}

.card-subtitle,
.panel-header p {
    color: #7A8B9A;
}

/* Métricas com vida e cor */
.metrics-grid,
.metrics {
    gap: 16px;
}

.metric-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
}

.metric-card::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    right: -30px;
    top: -30px;
    border-radius: 50%;
    opacity: .15;
    background: currentColor;
}

.metric-card:nth-child(1) { color: #f47721; background: #FFFFFF; }
.metric-card:nth-child(2) { color: #15956F; background: #FFFFFF; }
.metric-card:nth-child(3) { color: #f47721; background: #FFFFFF; }
.metric-card:nth-child(4) { color: #f47721; background: #FFFFFF; }

.metric-label,
.metric-top > span,
.metric-value,
.metric-card > strong,
.metric-note,
.metric-card > p {
    color: inherit;
}

.metric-label,
.metric-top > span { opacity: .76; }
.metric-note,
.metric-card > p { opacity: .64; }

.metric-icon {
    background: rgba(255,255,255,0.70);
    color: currentColor;
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 5px 14px rgba(225,100,18,0.08);
}

/* Agenda / atendimentos */
.appointment-list {
    padding: 8px;
    gap: 8px;
}

.appointment-item {
    position: relative;
    margin: 0;
    padding: 14px 15px 14px 18px;
    background: #F7FAFC;
    border: 1px solid #e16412;
    border-bottom: 1px solid #e16412;
    border-radius: 12px;
}

.appointment-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 5px 5px 0;
        background: #FFFFFF;
}

.appointment-item:hover {
    background: #FFFFFF;
        border-color: #DDE8F0;
    transform: translateY(-1px);
}

.appointment-time {
    color: #e16412;
    background: #DCEBF8;
    padding: 6px 9px;
    border-radius: 8px;
}

.status {
    border-radius: 999px;
    padding: 5px 9px;
}

.status-neutral {
    background: #e16412;
    color: #e16412;
}

/* Tabelas */
.table,
.clients-table {
    background: transparent;
}

.table th,
.clients-table th {
    background: #f47721;
    color: #e16412;
    border-bottom-color: #D9E4EC;
}

.table td,
.clients-table td {
    border-bottom-color: #e16412;
}

.table tbody tr:hover,
.clients-table tbody tr:hover {
    background: #FFFFFF;
}

/* Clientes / profissionais / serviços */
.professional-avatar,
.client-avatar,
#clientes-lista .client-avatar {
        background: #FFFFFF;
    color: #e16412;
        border: #DDE8F0;
}

.professional-card:hover,
.service-card:hover,
.client-card:hover,
#clientes-lista .client-item:hover {
        border-color: #DDE8F0;
    box-shadow: var(--shadow);
}

.service-price {
    color: #f47721;
}

/* Formulários e barras de busca/filtro */
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.filters,
.filter-bar,
.search-box input,
input[type="search"] {
    background: #F7FAFC;
        border-color: #DDE8F0;
    color: #2F241F;
}

.form-control:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.search-box input:hover,
input[type="search"]:hover {
        border-color: #DDE8F0;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-box input:focus,
input[type="search"]:focus {
    background: #FFFFFF;
        border-color: #DDE8F0;
    box-shadow: 0 0 0 4px rgba(244,119,33,0.12);
}

/* Calendário */
.calendar-panel {
    background: #F7FAFC;
        border: #DDE8F0;
    box-shadow: var(--shadow-sm);
}

.calendar-weekdays > div {
    background: #DFE9F1;
    color: #f47721;
}

.calendar-day {
    background: #F7FAFC;
    border-right-color: #e16412;
    border-bottom-color: #e16412;
}

.calendar-day:hover {
    background: #FFFFFF;
}

.calendar-day.today .calendar-day-number {
        background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(244,119,33,0.22);
}

.calendar-event {
    background: #DCEBF8;
    color: #e16412;
    border-left: 3px solid #f47721;
}

/* Modais */
.modal {
        background: #FFFFFF;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: #F7FAFC;
        border: #DDE8F0;
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    background: #f47721;
        border-color: #DDE8F0;
}

/* Gráficos */
.chart-bar,
.bar {
        background: #FFFFFF !important;
    border-radius: 8px 8px 4px 4px;
}

.dashboard-chart-day {
    background: #F7FAFC;
        border: #DDE8F0;
    border-radius: 12px;
}

/* Estados vazios */
.empty-state {
    color: #f47721;
}

.empty-icon {
        background: #FFFFFF;
    color: #e16412;
        border: #DDE8F0;
}

/* Footer */
.footer {
    color: #f47721;
    border-top-color: #CAD7E1;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #e16412 transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
        background: #FFFFFF;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* Mobile */
@media (max-width: 800px) {
    .sidebar {
        background: #e16412;
    }

    .page-content,
    .content {
        padding: 18px 14px;
    }

    .topbar {
        background: #FFFFFF;
    }

    .topbar .global-search,
    .topbar .search-box {
        width: 100%;
        max-width: none;
    }
}


/* =========================================================
   AJUSTE FINAL 2026 — VISÃO GERAL / AGENDA AZUL CINZENTO
   ========================================================= */

:root {
    --sidebar-width: 276px;
    --background: #e16412;
    --surface: #F1F5F7;
    --surface-soft: #EAF0F4;
    --text: #2F241F;
    --text-secondary: #e16412;
    --text-light: #e16412;
    --border: #D9E4EC;
    --border-light: #e16412;
    --primary: #e16412;
    --primary-dark: #e16412;
    --primary-light: #DCEBF8;
    --primary-soft: #FFFFFF;
}

body {
    background: #FFFFFF;
}

/* Marca */
.logo {
    min-height: 88px;
    height: auto;
    padding: 18px 18px;
}

.logo-icon,
.logo-mark {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 13px;
}

.logo-icon::before,
.logo-mark::before {
    content: "▦" !important;
    font-size: 22px !important;
}

.logo-text {
    flex: 1;
    min-width: 0;
}

.logo-title {
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    white-space: nowrap;
}

.logo-subtitle {
    color: #9EB1C1 !important;
    font-size: 10px !important;
    line-height: 14px !important;
}

/* Topo e conteúdo */
header.topbar,
.topbar {
    min-height: 74px;
    height: 74px;
    padding: 0 30px;
    background: rgba(229, 237, 243, .92);
    border-bottom: 1px solid #D9E4EC;
}

.page-content,
.content {
    max-width: 1540px;
    padding: 26px 30px 34px;
}

.page-header {
    margin-bottom: 20px;
    align-items: center;
}

.page-title,
.page-header h1 {
    margin: 2px 0 4px;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -.025em;
}

.page-description,
.page-header p {
    font-size: 13px;
    line-height: 18px;
}

/* Métricas */
.metrics-grid,
.metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.metric-card {
    min-height: 116px;
    padding: 18px 18px 16px;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(225,100,18,.06);
}

.metric-value,
.metric-card > strong {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.02em;
}

/* Grade principal */
.dashboard-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, .88fr);
    gap: 18px;
    align-items: start;
}

.dashboard-column {
    gap: 18px;
}

.card,
.panel {
    overflow: hidden;
    border-radius: 15px;
    background: rgba(241, 246, 249, .94);
        border-color: #DDE8F0;
    box-shadow: 0 7px 22px rgba(225,100,18,.055);
}

.card-header,
.panel-header {
    padding: 15px 16px;
        background: #FFFFFF;
}

.card-title,
.panel-header h2 {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.01em;
}

.card-subtitle,
.panel-header p {
    margin-top: 2px;
    font-size: 11px;
}

/* Agenda de hoje */
#agenda-hoje {
    padding: 9px;
}

#agenda-hoje .appointment-item.dashboard-appointment {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    margin: 0 0 8px;
    padding: 12px 13px 12px 17px;
    background: #F7FAFC;
        border: #DDE8F0;
    border-radius: 12px;
}

#agenda-hoje .appointment-item.dashboard-appointment:last-child {
    margin-bottom: 0;
}

#agenda-hoje .appointment-item.dashboard-appointment::before {
    top: 11px;
    bottom: 11px;
        background: #FFFFFF;
}

#agenda-hoje .appointment-item.dashboard-appointment.is-completed {
    background: #EDF6F2;
        border-color: #DDE8F0;
}

#agenda-hoje .appointment-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    min-height: 34px;
    padding: 6px 8px;
    color: #e16412;
    background: #DCEBF8;
    border: 1px solid #C6DCEF;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 400;
}

#agenda-hoje .appointment-name {
    margin-bottom: 4px;
    color: #e16412;
    font-size: 15px;
    font-weight: 400;
}

#agenda-hoje .appointment-service {
    color: #f47721;
    font-size: 12px;
    line-height: 16px;
}

.appointment-actions-dashboard {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.appointment-status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .025em;
    white-space: nowrap;
}

.appointment-status.is-scheduled {
    color: #efb48d;
    background: #FFFFFF;
    border: 1px solid #efb48d;
}

.appointment-status.is-done {
    color: #177257;
    background: #DFF3E9;
        border: #DDE8F0;
}

.appointment-status.is-cancelled {
    color: #A64040;
    background: #F9E2E2;
    border: 1px solid #EDC2C2;
}

.btn-concluir-atendimento {
    min-height: 30px;
    padding: 6px 10px;
        border: #DDE8F0;
    border-radius: 9px;
    background: #E1F4EA;
    color: #167154;
    font-family: inherit;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.btn-concluir-atendimento:hover {
    transform: translateY(-1px);
    background: #D3EFDF;
        border-color: #DDE8F0;
}

.btn-concluir-atendimento:disabled {
    cursor: wait;
    opacity: .62;
    transform: none;
}

/* Próximo atendimento */
#proximo-atendimento {
    padding: 10px;
}

#proximo-atendimento .next-appointment {
    min-height: 220px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #FFFFFF;
        border: #DDE8F0;
    border-radius: 14px;
}

#proximo-atendimento .next-appointment.is-overdue {
        border-color: #DDE8F0;
    background: #FFFFFF;
}

.next-appointment-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.next-appointment-label {
    margin-bottom: 3px;
    color: #f47721;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#proximo-atendimento .next-appointment-time {
    color: #e16412;
    font-size: 29px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: -.025em;
}

.next-appointment-date {
    padding: 6px 9px;
    color: #e16412;
    background: rgba(255,255,255,.48);
        border: #DDE8F0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 400;
}

#proximo-atendimento .next-appointment-name {
    color: #e16412;
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
}

#proximo-atendimento .next-appointment-service {
    margin-top: 4px;
    color: #e16412;
    font-size: 13px;
    font-weight: 400;
}

#proximo-atendimento .next-appointment-professional {
    margin-top: 3px;
    color: #f47721;
    font-size: 12px;
}

#proximo-atendimento .btn-concluir-principal {
    width: 100%;
    min-height: 38px;
    margin-top: auto;
    padding: 8px 12px;
    font-size: 12px;
}

#proximo-atendimento .next-empty {
    min-height: 220px;
}

/* Profissionais — corrige nome/especialidade espremidos */
#profissionais-resumo {
    padding: 4px 10px 10px;
}

#profissionais-resumo .professional-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 9px 8px;
    border-bottom: 1px solid #D8E2E8;
}

#profissionais-resumo .professional-summary:last-child {
    border-bottom: 0;
}

#profissionais-resumo .professional-summary-info {
    min-width: 0;
}

#profissionais-resumo .professional-name {
    display: block;
    color: #2F241F;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profissionais-resumo .professional-specialty {
    display: block;
    margin-top: 2px;
    color: #f47721;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profissionais-resumo .professional-count {
    justify-self: end;
    padding: 5px 8px;
    color: #e16412;
    background: #FFFFFF;
    border: 1px solid #CCDEED;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

/* Toast */
.dashboard-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    max-width: 360px;
    padding: 12px 15px;
        border: #DDE8F0;
    border-radius: 11px;
    background: #E2F3EA;
    color: #17674E;
    box-shadow: 0 14px 34px rgba(225,100,18,.16);
    font-size: 13px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.dashboard-toast.error {
        border-color: #DDE8F0;
    background: #F8E7E7;
    color: #9A3B3B;
}

.dashboard-toast.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1120px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    :root {
        --sidebar-width: 0px;
    }

    .logo-title {
        white-space: normal;
    }

    header.topbar,
    .topbar {
        height: auto;
        min-height: 68px;
        padding: 12px 14px;
    }

    .page-content,
    .content {
        padding: 18px 14px 28px;
    }

    #agenda-hoje .appointment-item.dashboard-appointment {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .appointment-actions-dashboard {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .metrics-grid,
    .metrics {
        grid-template-columns: 1fr;
    }

    #agenda-hoje .appointment-item.dashboard-appointment {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #agenda-hoje .appointment-time {
        width: fit-content;
    }

    .appointment-actions-dashboard {
        grid-column: 1;
        justify-content: flex-start;
    }
}


/* =========================================================
   PADRÃO GLOBAL FINAL — AGENDA MULTICLIENTE
   Camada visual compartilhada por todas as páginas.
   ========================================================= */

:root {
    --sidebar-width: 276px;
    --background: #e16412;
    --surface: #F1F5F7;
    --surface-soft: #EAF0F4;
    --text: #2F241F;
    --text-secondary: #e16412;
    --text-light: #e16412;
    --border: #D9E4EC;
    --border-light: #e16412;
    --primary: #e16412;
    --primary-dark: #e16412;
    --primary-light: #DCEBF8;
    --primary-soft: #FFFFFF;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 15px;
    --radius-xl: 18px;
    --shadow-sm: 0 2px 8px rgba(225,100,18,.045);
    --shadow: 0 7px 22px rgba(225,100,18,.055);
    --shadow-lg: 0 18px 44px rgba(225,100,18,.12);
}

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    background: #FFFFFF;
}

.app,
.main-layout {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
}

.logo {
    width: 100%;
    height: 82px;
    min-height: 82px;
    padding: 16px 18px;
    gap: 12px;
}

.logo-icon,
.logo-mark {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 13px;
    background: var(--primary);
    box-shadow: 0 7px 18px rgba(244,119,33,.22);
}

.logo-icon::before,
.logo-mark::before {
    content: "▦" !important;
    font-size: 21px !important;
}

.logo-text {
    min-width: 0;
    justify-content: center;
}

.logo-title,
.logo-text strong {
    color: #FFFFFF !important;
    font-size: 17px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    letter-spacing: .08em;
    white-space: nowrap;
}

.logo-subtitle,
.logo-text > span {
    display: none !important;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
}

main,
main.main {
    min-width: 0;
    margin-left: var(--sidebar-width);
}

header.topbar,
.topbar {
    width: 100%;
    height: 74px;
    min-height: 74px;
    padding: 0 30px;
    background: rgba(229, 237, 243, .94);
    border-bottom: 1px solid #D9E4EC;
    backdrop-filter: blur(10px);
}

.topbar .search-box,
.topbar .global-search {
    width: min(360px, 42vw);
    min-width: 220px;
    max-width: 360px;
}

.topbar .search-box input,
.topbar .global-search input,
.global-search input {
    height: 40px;
    border-color: var(--border);
    background: rgba(241, 245, 247, .94);
}

.page-content,
.content {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 26px 30px 34px;
}

.page-header {
    gap: 20px;
    margin-bottom: 20px;
}

.page-title,
.page-header h1 {
    font-size: clamp(24px, 2.1vw, 28px);
    line-height: 1.25;
}

.page-description,
.page-header p {
    max-width: 760px;
    font-size: 13px;
    line-height: 18px;
}

.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card {
        border-color: #DDE8F0;
    border-radius: var(--radius-lg);
    background: rgba(241, 246, 249, .95);
    box-shadow: var(--shadow);
}

.card-header,
.panel-header {
    min-height: 60px;
    padding: 15px 16px;
}

.card-title,
.panel-header h2 {
    font-size: 15px;
    line-height: 20px;
}

.card-subtitle,
.panel-header p {
    font-size: 11px;
    line-height: 15px;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

input,
select,
textarea,
.form-control,
.form-input,
.form-select {
    border-color: var(--border);
    border-radius: 10px;
}

.btn,
.btn-primary,
.btn-secondary,
.primary-button {
    border-radius: 10px;
}

.table-wrapper,
.clients-table-wrapper,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table,
img,
svg,
canvas {
    max-width: 100%;
}

.modal,
.modal-overlay {
    padding: 18px;
}

.modal-content,
.modal-card {
    max-width: min(720px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}

@media (max-width: 1120px) {
    .page-content,
    .content {
        padding: 22px;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    :root {
        --sidebar-width: 0px;
    }

    .app,
    .main-layout {
        display: block;
    }

    .sidebar {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        min-height: auto;
        height: auto;
        max-height: none;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .logo {
        height: 60px;
        min-height: 60px;
        padding: 9px 14px;
    }

    .logo-icon,
    .logo-mark {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
    }

    .logo-title,
    .logo-text strong {
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .sidebar-menu,
    .menu {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 7px 10px 9px;
    }

    .menu-label,
    .sidebar-separator,
    .menu-separator,
    .sidebar-footer {
        display: none !important;
    }

    .menu-item {
        position: relative;
        justify-content: center;
        min-height: 40px;
        padding: 7px 5px;
        gap: 5px;
        font-size: 11px;
        text-align: center;
    }

    .menu-text {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    main,
    main.main {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    header.topbar,
    .topbar {
        position: sticky;
        top: 0;
        min-height: 62px;
        height: auto;
        padding: 10px 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .topbar .search-box,
    .topbar .global-search {
        width: min(100%, 320px);
        min-width: 0;
        max-width: 320px;
        flex: 1 1 210px;
    }

    .topbar .topbar-actions {
        width: auto;
        display: flex;
        grid-template-columns: none;
        align-items: center;
        gap: 7px;
        margin-left: auto;
    }

    .page-content,
    .content {
        padding: 18px 14px 28px;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .page-date {
        width: 100%;
        text-align: left;
    }

    .form-grid,
    .form-row,
    .dashboard-grid,
    .professional-grid,
    .service-list,
    .service-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .sidebar-menu,
    .menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    header.topbar,
    .topbar {
        align-items: stretch;
    }

    .topbar .search-box,
    .topbar .global-search {
        order: 1;
        width: 100%;
        max-width: none;
        flex-basis: 100%;
    }

    .topbar .topbar-actions {
        order: 2;
        width: 100%;
        justify-content: flex-end;
    }

    .metrics-grid,
    .metrics {
        grid-template-columns: 1fr;
    }

    .page-title,
    .page-header h1 {
        font-size: 24px;
    }

    .modal,
    .modal-overlay {
        padding: 10px;
    }

    .modal-content,
    .modal-card {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }
}


/* Configurações — regras antes locais, agora no CSS compartilhado */
.perfil-configuracao {
            padding: 4px 0 2px;
        }

        .perfil-foto-area {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        .perfil-foto-preview {
            width: 92px;
            height: 92px;
            border-radius: 22px;
            background: var(--primary-light, #DCEBF8);
            color: var(--primary, #f47721);
            border: 1px solid var(--border, #E5E7EB);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex: 0 0 92px;
            font-size: 31px;
            font-weight: 400;
        }

        .perfil-foto-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .perfil-foto-acoes {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .perfil-foto-acoes .form-help {
            width: 100%;
        }

        #config-descricao {
            min-height: 110px;
            resize: vertical;
        }

        @media (max-width: 700px) {
            .perfil-foto-area {
                align-items: flex-start;
            }
        }


/* =========================================================
   AJUSTE VISUAL FINO — MESMO ESTILO, MAIS BONITO
   ========================================================= */

body {
        background: #FFFFFF;
}

.sidebar,
.topbar,
.card,
.metric-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.form-control,
.modal-content,
.access-card,
.profile-mini,
.notification-button,
.search-box input,
.global-search input,
.table,
.clients-table {
    border-radius: 18px;
}

.card,
.metric-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.access-card,
.profile-mini,
.modal-content {
    box-shadow: 0 7px 22px rgba(244,119,33,.055);
}

.logo-icon,
.logo-mark,
.metric-icon,
.empty-icon,
.profile-avatar {
    border-radius: 16px;
}

.menu-item,
.btn,
.btn-primary,
.btn-secondary,
.form-control,
.filter-input,
.filter-select,
.filter-search,
.menu-badge,
.status,
.status-badge,
.appointment-status {
    border-radius: 999px;
}

.btn,
.btn-primary,
.btn-secondary {
    font-weight: 400;
}

.page-title {
    letter-spacing: -0.02em;
}

.page-description,
.card-subtitle,
.metric-note,
.table td,
.clients-table td,
.form-help {
    color: #66687A;
}

.card-title,
.logo-title,
.metric-value,
.profile-name {
    letter-spacing: -0.015em;
}

/* Status coloridos */
.status-success,
.status-confirmed,
.appointment-status.is-done {
    color: #176C4B !important;
    background: #DCF7E9 !important;
        border: #DDE8F0 !important;
}

.status-warning,
.status-pending {
    color: #efb48d !important;
    background: #FFFFFF !important;
    border: 1px solid #efb48d !important;
}

.status-danger,
.status-cancelled,
.appointment-status.is-cancelled {
    color: #B43B4D !important;
    background: #FDE6EA !important;
        border: #DDE8F0 !important;
}

.status-info,
.appointment-status.is-scheduled {
    color: #e16412 !important;
    background: #DCEBF8 !important;
        border: #DDE8F0 !important;
}

.status-neutral {
    color: #666F82 !important;
    background: #FFFFFF !important;
    border: 1px solid #DFE4EE !important;
}

.appointment-item,
.next-appointment,
.professional-summary {
    border-radius: 18px;
}

.appointment-item {
    border: 1px solid #FFFFFF;
    padding: 14px 16px;
}

.appointment-time {
    min-width: 66px;
    font-weight: 400;
}

.next-appointment {
    border: 1px solid #FFFFFF;
    box-shadow: 0 7px 22px rgba(244,119,33,.055);
}

.metric-card::before {
    border-radius: 20px;
}


/* =========================================================
   CRM FLUIDEZ E PERFORMANCE
   ========================================================= */
html {
    scroll-behavior: smooth;
}

body,
.main-content,
.page-content,
.card,
.metric-card,
.menu-item,
.btn,
.form-control,
.appointment-item,
.professional-summary,
.table tbody tr {
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease,
        opacity 140ms ease;
}

.btn:active,
.menu-item:active,
.notification-button:active,
.icon-button:active {
    transform: scale(.98);
}

.card:hover,
.metric-card:hover {
    transform: translateY(-1px);
}

.crm-page-leaving body {
    opacity: .985;
}

/* Evita renderizar conteúdo distante da tela até ser necessário. */
.card,
.table-wrapper,
.analytics-panel,
.clients-panel {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* Sidebar inteira cabe na altura de notebooks menores sem ficar apertada. */
@media (min-width: 901px) and (max-height: 820px) {
    .logo {
        height: 68px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .sidebar-menu,
    .menu {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .menu-item {
        min-height: 42px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .sidebar-footer {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .access-card {
        padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   V5 — NAVEGAÇÃO FLUIDA NO MESMO PAINEL
   ========================================================= */
#crm-spa-frame {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
    height: 100dvh;
    border: 0;
    background: var(--background);
    z-index: 80;
    opacity: 1;
    transition: opacity 120ms ease;
}

#crm-spa-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-width);
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(223, 231, 237, .72);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

#crm-spa-loader.is-visible {
    display: flex;
}

.crm-spa-loader-dot {
    width: 15px;
    height: 15px;
        border: #DDE8F0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: crmSpaSpin .55s linear infinite;
}

@keyframes crmSpaSpin {
    to { transform: rotate(360deg); }
}

.main-layout > main[data-crm-spa-hidden="1"],
.main-layout > .main[data-crm-spa-hidden="1"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

html.crm-embedded,
html.crm-embedded body {
    min-height: 100%;
    background: var(--background);
}

html.crm-embedded .sidebar {
    display: none !important;
}

html.crm-embedded .app,
html.crm-embedded .main-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
}

html.crm-embedded main,
html.crm-embedded main.main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

html.crm-embedded .topbar {
    top: 0;
}

@media (max-width: 800px) {
    #crm-spa-frame,
    #crm-spa-loader {
        left: 0;
        width: 100vw;
    }
}

/* =========================================================
   V5 — CONFIGURAÇÕES > WHATSAPP
   ========================================================= */
.whatsapp-connect-card {
    position: relative;
    overflow: hidden;
}

.whatsapp-connect-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -85px;
    border-radius: 50%;
        background: #FFFFFF;
    pointer-events: none;
}

.whatsapp-connect-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.whatsapp-status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.whatsapp-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 400;
}

.whatsapp-status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
        background: #FFFFFF;
}

.whatsapp-status-badge.is-connected {
        border-color: #DDE8F0;
    background: #DCF7E9;
    color: #176C4B;
}

.whatsapp-status-badge.is-connected::before {
        background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(21, 149, 111, .10);
}

.whatsapp-status-badge.is-disconnected {
        border-color: #DDE8F0;
    background: #F6EEF0;
    color: #8A5962;
}

.whatsapp-status-detail {
    color: var(--text-secondary);
    font-size: 13px;
}

.whatsapp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.whatsapp-message {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.whatsapp-message[data-tipo="success"] {
        border-color: #DDE8F0;
    background: #E5F8EF;
    color: #176C4B;
}

.whatsapp-message[data-tipo="warning"] {
    border-color: #efb48d;
    background: #FFFFFF;
    color: #efb48d;
}

.whatsapp-message[data-tipo="error"] {
    border-color: #F1C4CC;
    background: #FDECEF;
    color: #A13F50;
}

.whatsapp-qr-wrap {
    margin-top: 16px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.45);
    text-align: center;
}

.whatsapp-qr-wrap img {
    width: min(220px, 100%);
    aspect-ratio: 1;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: #fff;
}

.whatsapp-pairing-code {
    margin-top: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .03em;
}

@media (max-width: 760px) {
    .whatsapp-connect-body {
        grid-template-columns: 1fr;
    }

    .whatsapp-actions {
        justify-content: flex-start;
    }
}

body.crm-spa-active {
    overflow: hidden !important;
}

/* =========================================================
   V5 RESPONSIVO — MENU MOBILE EM GAVETA (HAMBÚRGUER)
   Mantém o desktop e a navegação fluida atuais intactos.
   ========================================================= */
.crm-mobile-menu-button,
.crm-mobile-nav-backdrop {
    display: none;
}

@media (max-width: 800px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        position: relative;
    }

    body.crm-mobile-nav-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    /* Botão de três barras: permanece disponível também sobre o iframe SPA. */
    .crm-mobile-menu-button {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
        z-index: 1203;
        width: 42px;
        height: 42px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: rgba(255, 255, 255, .96);
        color: var(--text);
        box-shadow: 0 7px 22px rgba(244,119,33,.055);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .crm-mobile-menu-button span {
        display: block;
        width: 19px;
        height: 2px;
        flex: 0 0 2px;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition: transform 160ms ease, opacity 120ms ease;
    }

    body.crm-mobile-nav-open .crm-mobile-menu-button span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.crm-mobile-nav-open .crm-mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    body.crm-mobile-nav-open .crm-mobile-menu-button span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .crm-mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1198;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
                background: #FFFFFF;
        backdrop-filter: blur(2px);
        transition: opacity 160ms ease, visibility 160ms ease;
    }

    body.crm-mobile-nav-open .crm-mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* A antiga coluna lateral vira uma gaveta, sem alterar seu conteúdo. */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 1200 !important;
        width: min(86vw, 320px) !important;
        min-width: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid var(--border) !important;
        border-bottom: 0 !important;
        background: var(--surface) !important;
        box-shadow: 0 7px 22px rgba(244,119,33,.055);
        transform: translate3d(-104%, 0, 0);
        transition: transform 180ms ease;
        will-change: transform;
    }

    body.crm-mobile-nav-open .sidebar {
        transform: translate3d(0, 0, 0);
    }

    .sidebar .logo {
        width: 100%;
        min-height: 66px;
        height: auto;
        padding: max(12px, env(safe-area-inset-top)) 16px 12px 64px;
        flex: 0 0 auto;
    }

    .sidebar .logo-title,
    .sidebar .logo-subtitle {
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-menu,
    .menu {
        width: 100% !important;
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 5px !important;
        padding: 12px 10px 16px !important;
    }

    .sidebar .menu-label {
        display: block;
        padding: 4px 10px 6px;
    }

    .sidebar .sidebar-separator,
    .sidebar .menu-separator {
        display: block;
        width: calc(100% - 20px);
        margin: 7px 10px;
    }

    .sidebar .menu-item {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 10px 11px !important;
        border-radius: 10px;
        font-size: 13px !important;
        text-align: left !important;
        white-space: nowrap;
    }

    .sidebar .menu-icon {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
    }

    .sidebar .menu-icon::before {
        font-size: 15px !important;
    }

    .sidebar .menu-text {
        display: block !important;
        min-width: 0;
        flex: 1 1 auto !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar .menu-badge {
        position: static !important;
        flex: 0 0 auto;
        min-width: 20px;
        height: 20px;
        margin-left: auto;
        font-size: 9px;
    }

    .sidebar-footer {
        display: block !important;
        margin-top: auto;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* O conteúdo ocupa toda a tela; o botão reserva o canto superior esquerdo. */
    main,
    main.main {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    header.topbar,
    .topbar,
    html.crm-embedded .topbar {
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 62px !important;
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .topbar-actions,
    .page-content,
    .content,
    .page-header,
    .card,
    .panel,
    .dashboard-grid,
    .dashboard-column,
    .right-column,
    .form-grid,
    .form-row {
        min-width: 0 !important;
        max-width: 100%;
    }

    .page-content,
    .content {
        overflow-x: clip;
    }

    .page-title,
    .page-header h1,
    .page-description,
    .page-header p,
    .card-title,
    .panel-header h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .table-wrapper,
    .clients-table-wrapper,
    .calendar-grid {
        max-width: 100%;
        overscroll-behavior-inline: contain;
    }

    #crm-spa-frame,
    #crm-spa-loader {
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* O menu do documento embutido continua oculto: só existe uma gaveta visível. */
    html.crm-embedded .sidebar {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .crm-mobile-menu-button {
        width: 40px;
        height: 40px;
    }

    header.topbar,
    .topbar,
    html.crm-embedded .topbar {
        padding-left: 58px !important;
    }

    .topbar .topbar-actions {
        min-width: 0;
    }

    .topbar .search-box,
    .topbar .global-search,
    .topbar .search-box input,
    .topbar .global-search input {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .page-content,
    .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* =========================================================
   TEMA FINAL — LARANJA + BRANCO | TIPOGRAFIA NÍTIDA
   Referência visual: interface limpa, espaçada e legível.
   ========================================================= */
:root {
    --primary: #f47721;
    --primary-dark: #e16412;
    --primary-light: #DCEBF8;
    --primary-soft: #FFFFFF;
    --background: #F8FAFC;
    --surface: #FFFFFF;
    --surface-soft: #F7FAFC;
    --text: #e16412;
    --text-secondary: #e16412;
    --text-light: #6B7280;
    --border: #E5E7EB;
    --border-light: #F1F5F9;
    --shadow-sm: 0 1px 4px rgba(225,100,18,.06);
    --shadow: 0 8px 22px rgba(225,100,18,.08);
    --shadow-lg: 0 16px 40px rgba(225,100,18,.12);
    --transition: .28s cubic-bezier(.2,.8,.2,1);
}

html { font-size: 17px; }
body {
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* tamanhos mais próximos da referência e 100% legíveis */
.menu-item { font-size: 15px; min-height: 46px; }
.menu-label { font-size: 12px; }
.logo-text strong, .logo-title { font-size: 17px; }
.logo-text span, .logo-subtitle { font-size: 12px; }
.page-title, .page-header h1 { font-size: 29px; line-height: 1.2; }
.page-description, .page-header p { font-size: 15px; line-height: 1.55; }
.card-title, .panel-header h2, .professional-name, .service-name, .client-name { font-size: 15px; }
.card-subtitle, .panel-header p, .service-description, .professional-role { font-size: 13px; }
.metric-label, .metric-top > span, .metric-note, .metric-card > p { font-size: 13px; }
.metric-value, .metric-card > strong { font-size: 28px; }
.form-label, .form-group label, .filter-label { font-size: 13px; }
.form-control, .form-group input, .form-group select, .form-group textarea,
.global-search input, .topbar .search-box input { font-size: 15px; }
.table, .clients-table { font-size: 14px; }
.table th, .clients-table th { font-size: 13px; }
.status { font-size: 12px; }
.btn, .primary-button, .topbar .btn-primary, .topbar .primary-button { font-size: 14px; font-weight: 400; }

/* controles e cards mais confortáveis */
.btn, .primary-button, button,
a, .menu-item, .quick-action, .profile-more, .notification-button,
.metric-card, .professional-card, .service-card, .client-card,
#clientes-lista .client-item, .calendar-day-cell, .calendar-appointment {
    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        opacity var(--transition);
}

/* efeito clicável suave */
@media (hover:hover) and (pointer:fine) {
    .btn:hover, .primary-button:hover, button:hover,
    .menu-item:hover, .quick-action:hover, .profile-more:hover,
    .notification-button:hover, .topbar .btn-icon:hover,
    .topbar .icon-button:hover, .topbar .notification-button:hover {
        transform: translateY(-1px) scale(1.025);
    }

    .metric-card:hover, .professional-card:hover, .service-card:hover,
    .client-card:hover, #clientes-lista .client-item:hover,
    .calendar-appointment:hover, .calendar-day-cell:hover {
        transform: translateY(-2px) scale(1.012);
        border-color: #F3F8FC;
        box-shadow: 0 12px 28px rgba(235, 242, 249, .10);
    }
}

/* estados ativos em laranja */
.menu-item.active,
.menu-item[aria-current="page"] {
    background: #DCEBF8;
    color: #e16412;
    box-shadow: inset 3px 0 0 #f47721;
}
.menu-item:hover, .quick-action:hover {
    background: #FFFFFF;
    color: #e16412;
}

/* botões principais */
.btn-primary, .primary-button, .topbar .btn-primary, .topbar .primary-button {
    background: #f47721;
    border-color: #f47721;
    color: #fff;
    box-shadow: 0 5px 14px rgba(235, 242, 249, .20);
}
.btn-primary:hover, .primary-button:hover, .topbar .btn-primary:hover, .topbar .primary-button:hover {
    background: #e16412;
    border-color: #e16412;
    box-shadow: 0 8px 18px rgba(235, 242, 249, .26);
}

/* inputs: foco claro sem brilho exagerado */
.form-control:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.global-search input:focus, .topbar .search-box input:focus, .topbar .global-search input:focus {
    border-color: #f47721;
    box-shadow: 0 0 0 3px rgba(235, 242, 249, .14);
    background: #fff;
}

/* cartões, painéis e tabelas */
.card, .panel, .metric-card, .professional-card, .service-card, .client-card,
#clientes-lista .client-item, .filters, .filter-bar {
    background: #fff;
    border-color: #E5E7EB;
}
.table tbody tr:hover, .clients-table tbody tr:hover, .appointment-item:hover {
    background: #FFFFFF;
}

/* acentos */
.logo-icon, .logo-mark, .profile-avatar, .menu-badge, .notification-count {
    background: #f47721;
}
.metric-icon, .empty-icon, .professional-avatar, .client-avatar,
#clientes-lista .client-avatar, .check-icon, .access-icon {
    background: #DCEBF8;
    color: #e16412;
}
.page-eyebrow, .page-overline, .service-price, .appointment-time, .panel-link {
    color: #e16412;
}

/* bordas arredondadas limpas */
.card, .panel, .filters, .filter-bar, .metric-card, .professional-card, .service-card, .client-card,
#clientes-lista .client-item { border-radius: 14px; }
.btn, .primary-button, button, input, select, textarea { border-radius: 10px; }

/* acessibilidade de teclado */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.menu-item:focus-visible, .quick-action:focus-visible {
    outline: 3px solid rgba(235, 242, 249, .28);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   AJUSTE FINAL — TIPOGRAFIA NO PADRÃO VISUAL TIPO ASAAS
   Fonte mais limpa, tamanhos maiores, pesos mais equilibrados
   e melhor nitidez geral em toda a interface.
   ========================================================= */

:root {
    --font-sans: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease-smooth: 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    font-size: 17px;
}

body,
button,
input,
select,
textarea,
option {
    font-family: var(--font-sans);
    font-feature-settings: "cv01" 1, "cv02" 1, "cv03" 1, "cv04" 1;
}

body {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: #2F241F;
}

.sidebar,
.topbar,
.card,
.panel,
.metric-card,
.professional-card,
.service-card,
.client-card,
.calendar-panel,
.filters,
.filter-bar,
.page-date,
.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo {
    padding: 20px 22px;
}

.logo-text strong,
.logo-title {
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.logo-text span,
.logo-subtitle {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 400;
    color: #8A94A6;
}

.menu-label {
    font-size: 0.74rem;
    line-height: 1.1;
    letter-spacing: 0.12em;
    font-weight: 400;
}

.menu-item {
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -0.01em;
    transition:
        background-color var(--ease-smooth),
        color var(--ease-smooth),
        transform var(--ease-smooth),
        box-shadow var(--ease-smooth),
        border-color var(--ease-smooth);
}

.menu-item:hover,
.menu-item:focus-visible {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 24px rgba(235, 242, 249, 0.12);
}

.menu-item.active {
    font-weight: 400;
}

.menu-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
}

.menu-icon::before {
    font-size: 16px;
}

.menu-badge {
    min-width: 22px;
    height: 22px;
    font-size: 0.72rem;
}

.access-card strong,
.sidebar-access strong,
.access-card-title,
.profile-name,
.profile-status {
    font-size: 0.86rem;
    line-height: 1.3;
}

.access-card span,
.sidebar-access span,
.sidebar-access p,
.access-card-text,
.profile-info span {
    font-size: 0.76rem;
    line-height: 1.35;
}

header.topbar,
.topbar {
    height: 76px;
    padding: 0 32px;
}

.topbar .search-box,
.topbar .global-search,
.global-search {
    width: 100%;
    max-width: 360px;
    height: 44px;
}

.topbar .search-box input,
.topbar .global-search input,
.global-search input {
    height: 44px;
    padding: 0 14px 0 42px;
    border-radius: 12px;
    font-size: 0.94rem;
    font-weight: 400;
}

.topbar .search-box .search-icon,
.topbar .global-search .search-icon,
.search-icon {
    left: 14px;
    font-size: 1rem;
}

.topbar .btn-primary,
.topbar .primary-button,
.topbar .btn-icon,
.topbar .icon-button,
.topbar .notification-button,
.btn,
.primary-button,
.profile-more,
#clientes-lista .btn-excluir-cliente,
.quick-action {
    transition:
        background-color var(--ease-smooth),
        border-color var(--ease-smooth),
        color var(--ease-smooth),
        transform var(--ease-smooth),
        box-shadow var(--ease-smooth);
}

.topbar .btn-primary,
.topbar .primary-button,
.btn,
.primary-button {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.topbar .btn-primary:hover,
.topbar .primary-button:hover,
.btn-primary:hover,
.primary-button:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-success:hover {
    transform: translateY(-1px) scale(1.02);
}

.topbar .btn-icon,
.topbar .icon-button,
.topbar .notification-button,
.notification-button,
.profile-more {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
}

.page-content,
.content {
    max-width: 1460px;
    padding: 32px;
}

.page-eyebrow,
.page-overline {
    font-size: 0.76rem;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0.11em;
}

.page-title,
.page-header h1 {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.page-description,
.page-header p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #e16412;
}

.page-date span {
    font-size: 0.78rem;
}

.page-date strong {
    font-size: 0.95rem;
    font-weight: 400;
}

.card,
.panel,
.metric-card,
.professional-card,
.service-card,
.client-card,
.filters,
.filter-bar,
.page-date {
    border-radius: 18px;
}

.card-header,
.panel-header {
    min-height: 72px;
    padding: 18px 20px;
}

.card-title,
.panel-header h2 {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.card-subtitle,
.panel-header p,
.empty-text,
.empty-state p,
.panel-link,
.metric-note,
.metric-card > p {
    font-size: 0.84rem;
    line-height: 1.5;
}

.metrics-grid,
.metrics,
.professional-grid,
.service-list,
.service-grid,
.services-grid,
.dashboard-grid,
.overview-grid {
    gap: 16px;
}

.metric-card,
.professional-card,
.service-card,
.client-card {
    padding: 18px;
}

.metric-label,
.metric-top > span,
.professional-role,
.professional-info-row,
.professional-info-label,
.service-description,
.appointment-service,
.appointment-details,
.quick-action,
.filter-label,
.form-label,
.form-group label {
    font-size: 0.84rem;
    line-height: 1.45;
}

.metric-value,
.metric-card > strong {
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 400;
}

.professional-name,
.service-name,
.client-name,
.appointment-client,
.calendar-current {
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 400;
}

.service-price,
.appointment-time {
    font-size: 1rem;
    font-weight: 400;
}

.form-grid {
    gap: 18px;
    padding: 20px;
}

.form-row {
    gap: 18px;
}

.form-label,
.form-group label {
    font-weight: 400;
    color: #e16412;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.94rem;
    line-height: 1.4;
    font-weight: 400;
    color: #2F241F;
}

.form-group textarea {
    min-height: 110px;
}

.table,
.clients-table {
    font-size: 0.92rem;
}

.table th,
.clients-table th {
    padding: 13px 16px;
    font-size: 0.77rem;
    line-height: 1.3;
    letter-spacing: 0.03em;
}

.table td,
.clients-table td {
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 400;
    color: #e16412;
}

.status,
#clientes-lista .status {
    min-height: 26px;
    padding: 5px 10px;
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.appointment-item {
    padding: 16px 18px;
}

.quick-action {
    padding: 13px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 400;
}

.quick-action:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 20px rgba(235, 242, 249, 0.10);
}

.calendar-weekdays > div {
    padding: 12px 8px;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.calendar-day,
.calendar-week-column {
    font-size: 0.9rem;
}

.calendar-week-title {
    font-size: 0.83rem;
    font-weight: 400;
}

.calendar-day-view-title {
    font-size: 1rem;
    font-weight: 400;
}

.calendar-toast {
    font-size: 0.88rem;
    line-height: 1.4;
}

#clientes-lista .client-name {
    font-size: 0.96rem;
    line-height: 1.35;
}

#clientes-lista .client-contact {
    font-size: 0.83rem;
    line-height: 1.4;
}

#clientes-lista .btn-excluir-cliente {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

#clientes-lista .btn-excluir-cliente:hover {
    transform: translateY(-1px) scale(1.05);
}

.metric-card:hover,
.professional-card:hover,
.service-card:hover,
.client-card:hover,
#clientes-lista .client-item:hover,
.calendar-appointment:hover,
.calendar-day-cell:hover {
    transform: translateY(-2px);
}

@media (max-width: 980px) {
    .page-content,
    .content {
        padding: 24px 20px;
    }

    .page-title,
    .page-header h1 {
        font-size: 1.7rem;
    }

    .menu-item {
        font-size: 0.94rem;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .logo-text strong,
    .logo-title {
        font-size: 1.18rem;
    }

    .topbar .search-box,
    .topbar .global-search,
    .global-search {
        max-width: 100%;
    }

    .page-title,
    .page-header h1 {
        font-size: 1.45rem;
    }

    .menu-item,
    .topbar .btn-primary,
    .topbar .primary-button,
    .btn,
    .primary-button,
    .form-control,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .table td,
    .clients-table td {
        font-size: 0.9rem;
    }
}

/* =========================================================
   AJUSTE FINAL — TIPOGRAFIA E ESCALA VISUAL INSPIRADA NO ASAAS
   Mantém a identidade laranja/branco e corrige a leitura geral.
   ========================================================= */

500;600;700;800&display=swap');

:root {
    --font-ui: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    --font-size-base: 15px;
    --line-height-base: 1.45;
}

html {
    font-size: 17px !important;
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea,
table,
th,
td,
a,
span,
p,
label,
small,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-base) !important;
    font-weight: 400;
    letter-spacing: 0;
}

/* Sidebar / navegação */
.logo-text strong,
.logo-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

.logo-text span,
.logo-subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.menu-label {
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: .08em !important;
}

.menu-item {
    min-height: 48px !important;
    padding: 11px 13px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.menu-item:hover {
    transform: translateX(2px) scale(1.012) !important;
}

.menu-icon::before {
    font-size: 17px !important;
}

.menu-badge {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

/* Topbar */
header.topbar,
.topbar {
    min-height: 72px !important;
}

.topbar .search-box,
.topbar .global-search {
    height: 42px !important;
}

.topbar .search-box input,
.topbar .global-search input,
.global-search input {
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 10px !important;
}

.topbar .btn-primary,
.topbar .primary-button,
.topbar .btn-icon,
.topbar .icon-button,
.topbar .notification-button {
    min-height: 42px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 10px !important;
}

/* Cabeçalhos de página */
.page-eyebrow,
.page-overline {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.page-title,
.page-header h1 {
    font-size: 29px !important;
    line-height: 1.22 !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}

.page-description,
.page-header p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Cards / painéis */
.card-title,
.panel-header h2,
.card-header h2,
.card-header h3,
.panel-header h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.card-subtitle,
.panel-header p,
.card-header p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

.card-header,
.panel-header {
    min-height: 70px !important;
}

/* Botões */
.btn,
.primary-button,
button:not(.menu-item) {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

.btn,
.primary-button {
    min-height: 42px !important;
    padding: 10px 17px !important;
    border-radius: 10px !important;
}

.btn:hover,
.primary-button:hover,
button:hover,
a.quick-action:hover,
.panel-link:hover {
    transition: transform .22s cubic-bezier(.2,.8,.2,1),
                box-shadow .22s ease,
                background-color .22s ease,
                border-color .22s ease,
                color .22s ease !important;
}

.btn:hover,
.primary-button:hover {
    transform: translateY(-1px) scale(1.025) !important;
}

/* Formulários */
.form-label,
.form-group label,
label {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea,
input,
select,
textarea {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.form-control,
.form-group input,
.form-group select {
    min-height: 44px !important;
}

.form-group textarea {
    min-height: 110px !important;
}

input::placeholder,
textarea::placeholder {
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: .78;
}

/* Tabelas */
.table,
.clients-table,
table {
    font-size: 15px !important;
}

.table th,
.clients-table th,
table th {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    padding: 13px 15px !important;
}

.table td,
.clients-table td,
table td {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    padding: 14px 15px !important;
}

/* Métricas */
.metric-label,
.metric-top > span {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.metric-value,
.metric-card > strong {
    font-size: 29px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

.metric-note,
.metric-card > p {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Clientes, serviços, profissionais e agenda */
.professional-name,
.service-name,
.client-name,
.appointment-client,
#clientes-lista .client-name {
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.professional-role,
.service-description,
.client-contact,
#clientes-lista .client-contact,
.appointment-service,
.appointment-details,
.professional-info-row,
.client-info-row {
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}

.service-price,
.appointment-time {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

.quick-action {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

/* Configurações e blocos informativos */
.access-card strong,
.sidebar-access strong,
.access-card-title,
.profile-name,
.profile-status {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}

.access-card span,
.sidebar-access span,
.sidebar-access p,
.access-card-text,
.profile-info span {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

.status,
#clientes-lista .status {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    min-height: 25px !important;
    padding: 5px 9px !important;
}

/* Rodapé e textos auxiliares */
.page-date span,
.page-date strong,
small,
.helper-text,
.form-hint,
.footer,
footer {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Responsividade sem encolher excessivamente a tipografia */
@media (max-width: 980px) {
    .menu-item { font-size: 15px !important; }
    .page-title, .page-header h1 { font-size: 26px !important; }
    .page-description, .page-header p { font-size: 15px !important; }
}

@media (max-width: 640px) {
    body { font-size: 15px !important; }
    .menu-item { font-size: 15px !important; min-height: 46px !important; }
    .page-title, .page-header h1 { font-size: 24px !important; }
    .card-title, .panel-header h2 { font-size: 17px !important; }
    .table th, .clients-table th { font-size: 13px !important; }
    .table td, .clients-table td { font-size: 14px !important; }
}


/* =========================================================
   AJUSTE FINAL — REFERÊNCIA VISUAL ASAAS | LARANJA + BRANCO
   Tipografia única, mais limpa e menos pesada.
   ========================================================= */
500;600;700&display=swap');

:root {
    --primary: #f47721 !important;
    --primary-dark: #e16412 !important;
    --primary-light: #DCEBF8 !important;
    --primary-soft: #FFFFFF !important;
    --info: #f47721 !important;
    --info-bg: #DCEBF8 !important;
    --background: #F7FAFC !important;
    --surface: #FFFFFF !important;
    --surface-soft: #F7FAFC !important;
    --text: #242424 !important;
    --text-secondary: #5F6368 !important;
    --text-light: #7A7F85 !important;
    --border: #D9E4EC !important;
    --border-light: #e16412 !important;
}

html, body,
button, input, select, textarea, table {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* Mantém bibliotecas de ícones funcionando */
.fa, .fas, .far, .fal, .fab,
.material-icons, .material-symbols-outlined,
[class^="fa-"], [class*=" fa-"] {
    font-family: inherit;
}

body {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--text) !important;
}

/* Remove o visual azul/navy da navegação e leva tudo para laranja + branco */
.sidebar {
        background: #FFFFFF !important;
    border-right-color: #e16412 !important;
}
.sidebar,
.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .menu-label,
.sidebar .menu-item,
.sidebar .menu-text,
.sidebar .profile-name,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .access-card strong,
.sidebar .sidebar-access strong,
.sidebar .access-card span,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: #FFFFFF !important;
}
.sidebar .menu-item {
    font-size: 15px !important;
    font-weight: 400 !important;
}
.sidebar .menu-item:hover {
    background: rgba(255,255,255,.16) !important;
    color: #FFFFFF !important;
    transform: translateX(3px) scale(1.015) !important;
}
.sidebar .menu-item.active {
    background: #FFFFFF !important;
    color: #e16412 !important;
    font-weight: 400 !important;
}
.sidebar .menu-item.active .menu-icon,
.sidebar .menu-item.active .menu-text { color: #e16412 !important; }
.sidebar .menu-icon,
.sidebar .menu-badge,
.sidebar .profile-avatar,
.sidebar .logo-icon,
.sidebar .logo-mark {
    background: rgba(255,255,255,.18) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.sidebar .menu-badge { background: #FFFFFF !important; color: #e16412 !important; }
.sidebar .sidebar-separator,
.sidebar .menu-separator,
.sidebar .sidebar-footer,
.sidebar .logo { border-color: rgba(255,255,255,.18) !important; }
.sidebar .access-card,
.sidebar .sidebar-access,
.sidebar .profile-more {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.18) !important;
}
.sidebar .profile-more { color: #FFFFFF !important; }

/* Tipografia no estilo da referência: leve, nítida, sem excesso de negrito */
.page-eyebrow,
.page-overline {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #e16412 !important;
    letter-spacing: .05em !important;
}
.page-title,
.page-header h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: -.015em !important;
}
.page-description,
.page-header p {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
}
.card-title,
.panel-header h2,
.card-header h2,
.card-header h3,
.panel-header h3 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
}
.card-subtitle,
.panel-header p,
.card-header p {
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Nomes e textos que estavam muito pesados */
.professional-name,
.service-name,
.client-name,
.appointment-client,
#clientes-lista .client-name,
.profile-name,
.metric-label,
.metric-top > span,
.quick-action,
.btn,
.primary-button,
button:not(.menu-item),
.form-label,
.form-group label,
label,
.table th,
.clients-table th,
table th {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}
.professional-role,
.service-description,
.client-contact,
#clientes-lista .client-contact,
.appointment-service,
.appointment-details,
.professional-info-row,
.client-info-row,
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
input,
select,
textarea,
.table td,
.clients-table td,
table td {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}
.metric-value,
.metric-card > strong,
.service-price,
.appointment-time {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

/* Todo destaque informativo azul passa a ser laranja */
.status-info,
.badge-info,
.info,
.info-badge,
.tag-info,
.chip-info,
.calendar-appointment,
.appointment-time,
.service-price,
.panel-link,
a:not(.menu-item):focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #F3F8FC !important;
}
.status-info,
.badge-info,
.info,
.info-badge,
.tag-info,
.chip-info {
    background: #DCEBF8 !important;
    color: #e16412 !important;
}

/* Cards e áreas antes azuladas passam a branco/laranja suave */
.metric-card:nth-child(1),
.metric-card:nth-child(2),
.metric-card:nth-child(3),
.metric-card:nth-child(4) {
        background: #FFFFFF !important;
    color: #e16412 !important;
    border-color: #BBD5EA !important;
}
.metric-icon,
.empty-icon,
.professional-avatar,
.client-avatar,
#clientes-lista .client-avatar,
.check-icon,
.access-icon {
    background: #DCEBF8 !important;
    color: #e16412 !important;
}

/* Botões e itens clicáveis */
.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button {
    background: #f47721 !important;
    border-color: #f47721 !important;
    color: #FFFFFF !important;
}
.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover {
    background: #e16412 !important;
    border-color: #e16412 !important;
    transform: translateY(-1px) scale(1.025) !important;
    box-shadow: 0 8px 20px rgba(235, 242, 249, .18) !important;
}
.btn-secondary:hover,
.quick-action:hover,
.notification-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.topbar .notification-button:hover,
.table tbody tr:hover,
.clients-table tbody tr:hover,
.appointment-item:hover {
    background: #FFFFFF !important;
    border-color: #F3F8FC !important;
    color: #e16412 !important;
}

/* Topbar e campos em branco, sem tom azul */
.topbar,
header.topbar,
.global-search input,
.topbar .search-box input,
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
input,
select,
textarea {
    background: #FFFFFF !important;
}
.topbar,
header.topbar { border-bottom-color: #D9E4EC !important; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.global-search input:focus,
.topbar .search-box input:focus {
    border-color: #f47721 !important;
    box-shadow: 0 0 0 3px rgba(235, 242, 249, .12) !important;
}

/* Transições suaves */
.menu-item,
.btn,
.primary-button,
.quick-action,
.card,
.panel,
.metric-card,
.professional-card,
.service-card,
.client-card,
#clientes-lista .client-item,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
a,
button {
    transition: transform .24s cubic-bezier(.2,.8,.2,1),
                box-shadow .24s ease,
                background-color .24s ease,
                border-color .24s ease,
                color .24s ease !important;
}
.card:hover,
.panel:hover,
.metric-card:hover,
.professional-card:hover,
.service-card:hover,
.client-card:hover,
#clientes-lista .client-item:hover {
    transform: translateY(-2px) scale(1.008) !important;
    box-shadow: 0 10px 28px rgba(235, 242, 249, .10) !important;
}


/* =========================================================
   V8 — VISÃO GERAL SOMENTE LEITURA
   A tela inicial apenas resume dados vindos das outras áreas.
   ========================================================= */

.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

#btn-atualizar-dashboard:disabled {
    opacity: .68;
    cursor: wait;
}

#proximo-atendimento .btn-next-details {
    width: 100%;
    min-height: 38px;
    margin-top: auto;
    justify-content: center;
}

#servicos-resumo {
    padding: 4px 10px 10px;
}

#servicos-resumo .service-summary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 9px 8px;
    border-bottom: 1px solid #D8E2E8;
}

#servicos-resumo .service-summary:last-child {
    border-bottom: 0;
}

#servicos-resumo .service-summary-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #e16412;
    background: #EFF6FB;
    border: 1px solid #f47721;
    font-size: 15px;
    font-weight: 400;
}

#servicos-resumo .service-summary-info {
    min-width: 0;
}

#servicos-resumo .service-summary-name {
    color: #2F241F;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#servicos-resumo .service-summary-category {
    margin-top: 2px;
    color: #f47721;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#servicos-resumo .service-summary-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: #f47721;
    font-size: 10px;
    line-height: 13px;
    font-weight: 400;
    white-space: nowrap;
}

@media (max-width: 720px) {
    #servicos-resumo .service-summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    #servicos-resumo .service-summary-meta {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* =========================================================
   AV CRM — FINAL DARK ORANGE VISUAL OVERRIDE
   ========================================================= */
:root {
    --primary: #f47721 !important;
    --primary-dark: #C3D5E7 !important;
    --primary-light: #2C2118 !important;
    --primary-soft: #241C16 !important;
    --background: #151515 !important;
    --surface: #202020 !important;
    --surface-soft: #1B1B1B !important;
    --text: #F2F2F2 !important;
    --text-secondary: #B1B1B1 !important;
    --text-light: #7F7F7F !important;
    --border: #323232 !important;
    --border-light: #292929 !important;
    --success: #44D79B !important;
    --warning: #C9DEF2 !important;
    --danger: #FF6F6F !important;
    --info: #f47721 !important;
    --shadow-sm: 0 4px 12px rgba(0,0,0,.16) !important;
    --shadow: 0 8px 28px rgba(0,0,0,.22) !important;
    --shadow-lg: 0 12px 34px rgba(0,0,0,.28) !important;
}

body,
main,
main.main,
.app,
.main-layout {
        background: #FFFFFF !important;
    color: #F2F2F2 !important;
}

.sidebar {
        background: #FFFFFF !important;
    border-right-color: #323232 !important;
    box-shadow: none !important;
}

.topbar,
header.topbar {
        background: #FFFFFF !important;
    border-bottom-color: #323232 !important;
}

.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.modal-content,
.chart-card {
        background: #FFFFFF !important;
        border-color: #DDE8F0 !important;
    box-shadow: 0 7px 22px rgba(244,119,33,.055) !important;
    background-image: none !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.topbar .search-box input,
.topbar .global-search input {
        background: #FFFFFF !important;
        border-color: #DDE8F0 !important;
    color: #F2F2F2 !important;
}

.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button {
    background: #f47721 !important;
    border-color: #f47721 !important;
    color: #171717 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover {
    background: #efb48d !important;
    border-color: #efb48d !important;
}

/* local SVG icon loading */
.menu-item .menu-icon,
.logo-icon,
.logo-mark {
    color: currentColor !important;
    background-image: none !important;
}

/* =========================================================
   AV CRM — STANDALONE FINAL LAYER
   Este bloco deixa o style.css funcional mesmo sem depender
   de outro arquivo de tema.
   ========================================================= */
html,
body,
body * {
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
}

html,
body,
.app,
.main-layout,
main,
main.main {
        background: #FFFFFF !important;
    color: #F2F2F2 !important;
    background-image: none !important;
}

.sidebar {
        background: #FFFFFF !important;
    border-right: 1px solid #323232 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.sidebar .menu-item { color:#B1B1B1 !important; background:transparent !important; border-color:transparent !important; }
.sidebar .menu-item:hover { color:#F2F2F2 !important; background: #FFFFFF; border-color: #DDE8F0; }
.sidebar .menu-item.active { color:#f47721 !important; background: #FFFFFF; border-color:#f47721 !important; box-shadow:none !important; }
.sidebar .menu-item.active .menu-text,
.sidebar .menu-item.active .menu-icon { color:#f47721 !important; }
.sidebar .menu-label,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p,
.sidebar .access-card span,
.sidebar .access-card-text { color:#7F7F7F !important; }
.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .logo-subtitle,
.sidebar .menu-text,
.sidebar .profile-name { color:#F2F2F2 !important; }

.topbar,
header.topbar { background: #FFFFFF; border-bottom:1px solid #323232 !important; background-image:none !important; }

.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.modal-content,
.chart-card {
        background: #FFFFFF !important;
        border-color: #DDE8F0 !important;
    color:#F2F2F2 !important;
    box-shadow: 0 7px 22px rgba(244,119,33,.055) !important;
    background-image:none !important;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.client-card:hover { box-shadow: 0 7px 22px rgba(244,119,33,.055); transform:translateY(-1px) !important; }

input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.form-group input,
.form-group select,
.form-group textarea,
.topbar .search-box input,
.topbar .global-search input {
        background: #FFFFFF !important;
    color:#F2F2F2 !important;
        border-color: #DDE8F0 !important;
    background-image:none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.topbar .search-box input:focus,
.topbar .global-search input:focus { border-color:#f47721 !important; box-shadow:0 0 0 3px rgba(214, 228, 243, .14) !important; outline:none !important; }

.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button { background:#f47721 !important; border-color:#f47721 !important; color:#171717 !important; box-shadow:none !important; background-image:none !important; }
.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover { background:#efb48d !important; border-color:#efb48d !important; color:#171717 !important; }

.btn-secondary,
.btn-outline,
.secondary-button,
.quick-action,
.panel-link { background: #FFFFFF; border-color: #DDE8F0; color:#B1B1B1 !important; background-image:none !important; }
.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.quick-action:hover,
.panel-link:hover { background: #FFFFFF; border-color:#f47721 !important; color:#f47721 !important; }

/* SVGs locais: recoloridos pelo CSS via mask-image. */
.menu-icon::before,
.logo-icon::before,
.logo-mark::before {
    content:"" !important;
    display:inline-block !important;
    width:17px !important;
    height:17px !important;
    background:currentColor !important;
    -webkit-mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    -webkit-mask-size:contain !important;
    mask-repeat:no-repeat !important;
    mask-position:center !important;
    mask-size:contain !important;
    font-size:0 !important;
}
.menu-item[href="index.html"] .menu-icon::before,
.menu-item[href="Visão geral"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/overview.svg") !important; mask-image:url("./assets/icons/overview.svg") !important; }
.menu-item[href="agendamentos.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/appointments.svg") !important; mask-image:url("./assets/icons/appointments.svg") !important; }
.menu-item[href="calendario.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/calendar.svg") !important; mask-image:url("./assets/icons/calendar.svg") !important; }
.menu-item[href="servicos.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/services.svg") !important; mask-image:url("./assets/icons/services.svg") !important; }
.menu-item[href="profissionais.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/professionals.svg") !important; mask-image:url("./assets/icons/professionals.svg") !important; }
.menu-item[href="clientes.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/clients.svg") !important; mask-image:url("./assets/icons/clients.svg") !important; }
.menu-item[href="configuracoes.html"] .menu-icon::before { -webkit-mask-image:url("./assets/icons/settings.svg") !important; mask-image:url("./assets/icons/settings.svg") !important; }
.logo-icon::before,
.logo-mark::before { -webkit-mask-image:url("./assets/icons/grid.svg") !important; mask-image:url("./assets/icons/grid.svg") !important; }

/* Compact motion */
.menu-item,
.btn,
.primary-button,
.quick-action,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.notification-button,
.icon-button { transition:transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* =====================================================================
   TEMA FINAL — A VE / LARANJA SUAVE + BRANCO
   Direção visual baseada na referência: fundo claro com degradê discreto
   branco → laranja pálido; laranja apenas como acento; cartões e dados
   principais com cores suaves e distintas.
   ===================================================================== */

:root {
    --av-orange: #f47721;
    --av-orange-dark: #efb48d;
    --av-orange-soft: #EFF6FB;
    --av-orange-pale: #BED7F0;
    --av-bg: #FFFFFF;
    --av-bg-warm: #FFFFFF;
    --av-surface: #FFFFFF;
    --av-surface-soft: #F8FBFD;
    --av-text: #272321;
    --av-text-secondary: #e16412;
    --av-text-muted: #e16412;
    --av-border: #e16412;
    --av-border-light: #e16412;
    --av-green: #55A36B;
    --av-green-bg: #EDF8F0;
    --av-blue: #f47721;
    --av-blue-bg: #EFF4FF;
    --av-lilac: #8F78B8;
    --av-lilac-bg: #F4EFFA;
    --av-yellow: #D3A72C;
    --av-yellow-bg: #FFF8DF;
    --av-rose: #e16412;
    --av-rose-bg: #FFFFFF;
}

html,
body,
button,
input,
select,
textarea,
table,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
div,
label,
th,
td,
strong,
b,
small {
    font-family: Inter, Inter, Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body,
main,
main.main,
.app,
.main-layout {
    color: var(--av-text) !important;
}

body,
main,
main.main {
        background: #FFFFFF !important;
}

/* Fundo: único degradê principal, muito suave */
body::before {
        background: #FFFFFF !important;
}

/* Sidebar branca, com laranja somente nos pontos de interação */
.sidebar {
    background: rgba(255,255,255,.93) !important;
    border-right: 1px solid var(--av-border) !important;
    box-shadow: 0 7px 22px rgba(244,119,33,.055) !important;
}

.sidebar .logo,
.sidebar-menu,
.sidebar .menu,
.sidebar-footer {
    background: transparent !important;
}

.sidebar .logo {
    border-bottom-color: var(--av-border-light) !important;
}

.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .logo-text span,
.sidebar .logo-subtitle,
.sidebar .menu-label,
.sidebar .menu-item,
.sidebar .menu-text,
.sidebar .profile-name,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .access-card strong,
.sidebar .access-card-title,
.sidebar .sidebar-access strong,
.sidebar .access-card span,
.sidebar .access-card-text,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: var(--av-text) !important;
}

.sidebar .menu-label,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: var(--av-text-muted) !important;
    opacity: 1 !important;
}

.sidebar .logo-icon,
.sidebar .logo-mark,
.sidebar .profile-avatar {
    color: #fff !important;
    background: var(--av-orange) !important;
    border-color: var(--av-orange) !important;
    box-shadow: 0 6px 18px rgba(239,180,141,.16) !important;
}

.sidebar .menu-icon,
.sidebar .access-icon,
.sidebar .check-icon {
    color: #e16412 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .menu-item {
    color: #e16412 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    font-weight: 400 !important;
}

.sidebar .menu-item:hover {
    color: var(--av-orange-dark) !important;
    background: #F0F6FB !important;
    border-color: #f47721 !important;
    transform: translateX(1px) !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active {
    color: var(--av-orange-dark) !important;
        background: #FFFFFF !important;
    border-color: #efb48d !important;
    box-shadow: 0 6px 18px rgba(239,180,141,.07) !important;
    font-weight: 400 !important;
}

.sidebar .menu-item.active .menu-icon,
.sidebar .menu-item.active .menu-text {
    color: var(--av-orange-dark) !important;
}

.sidebar .menu-item.active .menu-icon {
    background: #FFFFFF !important;
    border-radius: 8px !important;
}

.sidebar .menu-badge,
.sidebar .notification-count {
    color: #f47721 !important;
    background: #EFF6FB !important;
    border: 1px solid #efb48d !important;
    font-weight: 400 !important;
}

.sidebar .sidebar-separator,
.sidebar .menu-separator {
    background: var(--av-border-light) !important;
}

.sidebar .access-card,
.sidebar .sidebar-access {
    color: var(--av-text) !important;
    background: #F7FAFC !important;
    border-color: #f47721 !important;
}

.sidebar .profile-mini,
.sidebar .profile-more {
    color: var(--av-text) !important;
    background: #FFFFFF !important;
    border-color: var(--av-border-light) !important;
}

.sidebar .profile-more:hover {
    background: var(--av-orange-soft) !important;
    color: var(--av-orange-dark) !important;
}

.sidebar-footer {
    border-top-color: var(--av-border-light) !important;
}

/* Barra superior */
.topbar,
header.topbar {
    background: rgba(255,255,255,.90) !important;
    border-bottom-color: var(--av-border-light) !important;
    backdrop-filter: blur(10px);
}

.topbar .search-box input,
.topbar .global-search input {
    background: #fff !important;
    border-color: var(--av-border) !important;
    color: var(--av-text) !important;
}

.topbar .search-box input:focus,
.topbar .global-search input:focus {
    border-color: #f47721 !important;
    box-shadow: 0 0 0 3px rgba(239,180,141,.10) !important;
}

.topbar .search-icon {
    color: var(--av-text-muted) !important;
}

/* Superfícies */
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.modal-content {
    background: rgba(255,255,255,.95) !important;
    border-color: var(--av-border-light) !important;
    box-shadow: 0 8px 28px rgba(225,100,18,.055) !important;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.client-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 28px rgba(225,100,18,.075) !important;
}

/* Campos */
input,
select,
textarea,
.form-control,
.form-input,
.form-select {
    background: #FFFFFF !important;
    border-color: var(--av-border) !important;
    color: var(--av-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: #e16412 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus {
    border-color: #f47721 !important;
    box-shadow: 0 0 0 3px rgba(239,180,141,.095) !important;
}

/* Botões */
.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button,
button.btn-primary,
a.btn-primary {
    color: #fff !important;
    background: var(--av-orange) !important;
    border-color: var(--av-orange) !important;
    box-shadow: 0 6px 16px rgba(239,180,141,.13) !important;
    font-weight: 400 !important;
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    color: #fff !important;
    background: var(--av-orange-dark) !important;
    border-color: var(--av-orange-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(239,180,141,.16) !important;
}

.btn-secondary,
.quick-action,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button {
    background: #fff !important;
    border-color: var(--av-border) !important;
    color: #e16412 !important;
    font-weight: 400 !important;
}

.btn-secondary:hover,
.quick-action:hover,
.notification-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover {
    color: var(--av-orange-dark) !important;
    background: #F0F6FB !important;
    border-color: #f47721 !important;
}

/* KPIs: cada indicador recebe uma cor suave própria */
.metric-card {
    border-top: 2px solid #f47721 !important;
}

.metric-card:nth-child(1) { border-top-color: var(--av-orange) !important; }
.metric-card:nth-child(2) { border-top-color: var(--av-blue) !important; }
.metric-card:nth-child(3) { border-top-color: var(--av-green) !important; }
.metric-card:nth-child(4) { border-top-color: var(--av-lilac) !important; }
.metric-card:nth-child(5) { border-top-color: var(--av-yellow) !important; }
.metric-card:nth-child(6) { border-top-color: var(--av-rose) !important; }

.metric-card:nth-child(1) .metric-icon { color: var(--av-orange-dark) !important; background: var(--av-orange-soft) !important; }
.metric-card:nth-child(2) .metric-icon { color: #f47721 !important; background: var(--av-blue-bg) !important; }
.metric-card:nth-child(3) .metric-icon { color: #4D8D5F !important; background: var(--av-green-bg) !important; }
.metric-card:nth-child(4) .metric-icon { color: #f47721 !important; background: var(--av-lilac-bg) !important; }
.metric-card:nth-child(5) .metric-icon { color: #f47721 !important; background: var(--av-yellow-bg) !important; }
.metric-card:nth-child(6) .metric-icon { color: #e16412 !important; background: var(--av-rose-bg) !important; }

.metric-card .metric-value,
.metric-card .value,
.metric-card .number {
    color: var(--av-text) !important;
}

.metric-card .metric-label,
.metric-card .label,
.metric-card .description {
    color: var(--av-text-secondary) !important;
}

/* Classes semânticas, quando disponíveis */
.metric-card.clients .metric-icon,
.metric-card.client .metric-icon { color:#f47721 !important; background:#F4EFFA !important; }
.metric-card.professionals .metric-icon,
.metric-card.people .metric-icon,
.metric-card.attendimentos .metric-icon { color:#f47721 !important; background:#EFF4FF !important; }
.metric-card.revenue .metric-icon,
.metric-card.faturamento .metric-icon { color:#4D8D5F !important; background:#EDF8F0 !important; }
.metric-card.appointments .metric-icon,
.metric-card.agendamentos .metric-icon { color:#f47721 !important; background:#EFF6FB !important; }
.metric-card.services .metric-icon { color:#f47721 !important; background:#FFF8DF !important; }

/* Badges / status */
.status,
.badge,
.tag {
    font-weight: 400 !important;
}

.status-success,
.badge-success,
.status-completed,
.badge-completed,
[data-status="completed"],
[data-status="success"] {
    color: #4D8D5F !important;
    background: var(--av-green-bg) !important;
        border-color: #DDE8F0 !important;
}

.status-warning,
.badge-warning,
.status-ongoing,
.badge-ongoing,
[data-status="ongoing"],
[data-status="pending"] {
    color: #9C7815 !important;
    background: var(--av-yellow-bg) !important;
    border-color: #F0DF9E !important;
}

.status-info,
.badge-info {
    color: #f47721 !important;
    background: var(--av-blue-bg) !important;
    border-color: #D6E0FB !important;
}

.status-danger,
.badge-danger,
[data-status="cancelled"],
[data-status="canceled"] {
    color: #B65F52 !important;
    background: var(--av-rose-bg) !important;
    border-color: #DCE8F0 !important;
}

/* Listas de agendamento */
.appointment-item,
.agendamento-item,
.calendar-appointment {
    background: #fff !important;
        border-color: #DDE8F0 !important;
}

.appointment-item:hover,
.agendamento-item:hover,
.calendar-appointment:hover {
    background: #F7FAFC !important;
        border-color: #DDE8F0 !important;
    box-shadow: 0 8px 20px rgba(239,180,141,.09) !important;
}

/* Calendário */
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment {
    background: #fff !important;
    border-color: var(--av-border) !important;
}

.calendar-week-title,
.calendar-day-view-title,
.calendar-day-title {
    color: var(--av-text) !important;
}

.calendar-day-cell:hover {
    background: #F7FAFC !important;
}

/* Toast */
.calendar-toast[data-tipo="success"] {
    background: var(--av-green-bg) !important;
    color: #4D8D5F !important;
        border-color: #DDE8F0 !important;
}

.calendar-toast[data-tipo="error"] {
    background: var(--av-rose-bg) !important;
    color: #B65F52 !important;
    border-color: #DCE8F0 !important;
}

/* Tabelas */
.table-wrapper table,
table {
    background: #fff !important;
}

thead th,
.table thead th,
.clients-table thead th {
    color: #e16412 !important;
    background: #F8FBFD !important;
    border-color: var(--av-border-light) !important;
    font-weight: 400 !important;
}

tbody td,
.table tbody td,
.clients-table tbody td {
    border-color: var(--av-border-light) !important;
    color: var(--av-text) !important;
}

tbody tr:hover,
.table tbody tr:hover,
.clients-table tbody tr:hover {
    background: #F7FAFC !important;
}

/* Ícones locais — máscara SVG carregada pelo CSS */
.sidebar .menu-item[href="index.html"] .menu-icon::before,
.sidebar .menu-item[href*="Visão geral"] .menu-icon::before,
.sidebar .menu-item[href*="visao"] .menu-icon::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/overview.svg") center / contain no-repeat !important;
    mask: url("assets/icons/overview.svg") center / contain no-repeat !important;
    font-size: 0 !important;
}

.sidebar .menu-item[href*="agendamentos"] .menu-icon::before {
    content: "" !important;
    width: 18px !important; height: 18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/appointments.svg") center / contain no-repeat !important;
    mask: url("assets/icons/appointments.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

.sidebar .menu-item[href*="calendario"] .menu-icon::before {
    content: "" !important;
    width:18px !important; height:18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/calendar.svg") center / contain no-repeat !important;
    mask: url("assets/icons/calendar.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

.sidebar .menu-item[href*="servicos"] .menu-icon::before {
    content: "" !important;
    width:18px !important; height:18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/services.svg") center / contain no-repeat !important;
    mask: url("assets/icons/services.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

.sidebar .menu-item[href*="profissionais"] .menu-icon::before {
    content: "" !important;
    width:18px !important; height:18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/professionals.svg") center / contain no-repeat !important;
    mask: url("assets/icons/professionals.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

.sidebar .menu-item[href*="clientes"] .menu-icon::before {
    content: "" !important;
    width:18px !important; height:18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/clients.svg") center / contain no-repeat !important;
    mask: url("assets/icons/clients.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

.sidebar .menu-item[href*="configuracoes"] .menu-icon::before {
    content: "" !important;
    width:18px !important; height:18px !important; display:block !important;
    background: currentColor !important;
    -webkit-mask: url("assets/icons/settings.svg") center / contain no-repeat !important;
    mask: url("assets/icons/settings.svg") center / contain no-repeat !important;
    font-size:0 !important;
}

/* Acessibilidade / movimento suave e discreto */
.menu-item,
.btn,
.primary-button,
.quick-action,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
a,
button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease,
                border-color .16s ease, color .16s ease !important;
}

.btn:active,
.menu-item:active,
.notification-button:active,
.icon-button:active {
    transform: scale(.985) !important;
}

/* Evita títulos e textos excessivamente pesados */
h1,h2,h3,h4,h5,h6,strong,b,
button,
.btn,
.primary-button,
.menu-item,
.metric-value,
.metric-card .value,
.metric-card .number {
    font-weight: 400 !important;
}

/* Responsive: mantém o mesmo clima claro */
@media (max-width: 800px) {
    body,
    main,
    main.main {
                background: #FFFFFF !important;
    }
    .sidebar {
        background: rgba(255,255,255,.97) !important;
    }
}


/* =====================================================================
   A VE CRM — PADRÃO FINAL: BRANCO + LARANJA SUAVE
   Regra visual: fundo totalmente branco; textos pretos; acentos somente
   em tons de laranja. Sem preto em fundos, sem cores fortes ou gradientes.
   Ícones locais em assets/icons/.
   ===================================================================== */

:root {
    --av-bg: #FFFFFF !important;
    --av-bg-elevated: #FFFFFF !important;
    --av-sidebar: #FFFFFF !important;
    --av-surface: #FFFFFF !important;
    --av-surface-2: #FFFFFF !important;
    --av-surface-3: #FFFFFF !important;
    --av-border: #DDE8F0 !important;
    --av-border-soft: #f47721 !important;
    --av-text: #171717 !important;
    --av-text-secondary: #3F3F3F !important;
    --av-text-muted: #e16412 !important;
    --av-orange: #efb48d !important;
    --av-orange-dark: #e16412 !important;
    --av-orange-mid: #efb48d !important;
    --av-orange-soft: #F2F8FC !important;
    --av-orange-pale: #F7FAFC !important;
    --av-orange-border: #D1E2ED !important;
    --av-orange-light-border: #efb48d !important;
    --av-shadow: 0 7px 22px rgba(239,180,141,.07) !important;
    --av-shadow-hover: 0 10px 26px rgba(239,180,141,.10) !important;
    --av-font: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
}

html,
body,
button,
input,
select,
textarea,
table,
h1,h2,h3,h4,h5,h6,
p,span,a,div,label,th,td,strong,b,small {
    font-family: var(--av-font) !important;
    font-weight: 400 !important;
}

html { background: #FFFFFF !important; }
body {
    background: #FFFFFF !important;
    color: #171717 !important;
    background-image: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* FUNDO PRINCIPAL: BRANCO PURO */
.app,
.main-layout,
main,
main.main,
.content,
.page-content,
.page-container,
.dashboard,
section,
.content-area,
.page,
.workspace {
    background: #FFFFFF !important;
    color: #171717 !important;
    background-image: none !important;
}

/* SIDEBAR BRANCA */
.sidebar {
    background: #FFFFFF !important;
    color: #171717 !important;
    border-right: 1px solid #E1EBF2 !important;
    box-shadow: 8px 0 24px rgba(239,180,141,.035) !important;
    background-image: none !important;
}

.sidebar .logo,
.sidebar-menu,
.sidebar .menu,
.sidebar-footer {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: #f47721 !important;
}

.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .logo-text span,
.sidebar .logo-subtitle,
.sidebar .menu-label,
.sidebar .menu-item,
.sidebar .menu-text,
.sidebar .profile-name,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .access-card strong,
.sidebar .access-card-title,
.sidebar .access-card span,
.sidebar .access-card-text,
.sidebar .sidebar-access strong,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: #171717 !important;
}

.sidebar .menu-label,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: #e16412 !important;
}

/* VISÃO GERAL / ITEM ATIVO: LARANJA SUAVE */
.sidebar .menu-item {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.sidebar .menu-item:hover {
    color: #e16412 !important;
    background: #F2F7FB !important;
    border-color: #f47721 !important;
    transform: translateX(1px) !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active,
.sidebar .menu-item.active:hover {
    color: #e16412 !important;
    background: #EDF5FA !important;
    border-color: #efb48d !important;
    box-shadow: 0 5px 15px rgba(244,119,33,.07) !important;
    transform: none !important;
}

.sidebar .menu-item.active::before {
    content: "" !important;
    width: 3px !important;
    align-self: stretch !important;
    margin: -10px 0 -10px -11px !important;
    border-radius: 0 5px 5px 0 !important;
    background: #efb48d !important;
}

.sidebar .menu-icon,
.sidebar .access-icon,
.sidebar .check-icon {
    color: #e16412 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active .menu-icon,
.sidebar .menu-item.active .menu-text {
    color: #e16412 !important;
}

.sidebar .menu-item.active .menu-icon {
    background: #FFFFFF !important;
    border-radius: 8px !important;
}

.sidebar .menu-badge,
.sidebar .notification-count {
    color: #e16412 !important;
    background: #EDF5FA !important;
    border: 1px solid #efb48d !important;
}

.sidebar .sidebar-separator,
.sidebar .menu-separator {
    background: #f47721 !important;
}

.sidebar .access-card,
.sidebar .sidebar-access,
.sidebar .profile-mini,
.sidebar .profile-more {
    color: #171717 !important;
    background: #FFFFFF !important;
    border: 1px solid #E1EBF2 !important;
    box-shadow: none !important;
}

.sidebar .logo-icon,
.sidebar .logo-mark,
.sidebar .profile-avatar {
    color: #FFFFFF !important;
    background: #efb48d !important;
    border-color: #efb48d !important;
    box-shadow: 0 5px 14px rgba(239,180,141,.14) !important;
}

.sidebar .profile-more:hover {
    color: #e16412 !important;
    background: #EFF6FB !important;
    border-color: #D1E2ED !important;
}

/* TOPBAR */
.topbar,
header.topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #e16412 !important;
    box-shadow: 0 2px 12px rgba(239,180,141,.025) !important;
    backdrop-filter: none !important;
    background-image: none !important;
}

/* BUSCA E CAMPOS */
.topbar .search-box input,
.topbar .global-search input,
.global-search input,
.search-box input,
input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.form-group input,
.form-group select,
.form-group textarea {
    background: #FFFFFF !important;
    color: #171717 !important;
    border: 1px solid #e16412 !important;
    box-shadow: none !important;
}

.topbar .search-box input::placeholder,
.topbar .global-search input::placeholder,
.global-search input::placeholder,
.search-box input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #e16412 !important;
}

.topbar .search-box input:focus,
.topbar .global-search input:focus,
.global-search input:focus,
.search-box input:focus,
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus {
    border-color: #f47721 !important;
    box-shadow: 0 0 0 3px rgba(239,180,141,.10) !important;
    outline: none !important;
}

.topbar .search-icon,
.search-icon {
    color: #e16412 !important;
}

/* BOTÕES */
.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button,
button.btn-primary,
a.btn-primary,
.btn-entrar,
.btn-criar,
.auth-page .btn {
    color: #FFFFFF !important;
    background: #efb48d !important;
    border: 1px solid #efb48d !important;
    box-shadow: 0 6px 15px rgba(239,180,141,.13) !important;
    font-weight: 400 !important;
    background-image: none !important;
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.btn-entrar:hover,
.btn-criar:hover,
.auth-page .btn:hover {
    color: #FFFFFF !important;
    background: #e16412 !important;
    border-color: #e16412 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 17px rgba(188, 206, 224, .14) !important;
}

.btn-secondary,
.btn-outline,
.secondary-button,
.quick-action,
.panel-link,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
.btn-icon,
.icon-button {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border: 1px solid #f47721 !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.quick-action:hover,
.panel-link:hover,
.notification-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.btn-icon:hover,
.icon-button:hover {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border-color: #f47721 !important;
}

/* CARTÕES / PAINÉIS: BRANCOS */
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.modal-content,
.panel-content,
.widget,
.chart-card {
    background: #FFFFFF !important;
    color: #171717 !important;
    border: 1px solid #E0EBF2 !important;
    box-shadow: 0 7px 22px rgba(244,119,33,.055) !important;
    background-image: none !important;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.client-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(239,180,141,.085) !important;
}

/* KPIs — DIFERENCIADOS POR TONS DE LARANJA */
.metric-card {
    position: relative !important;
    border-top: 2px solid #f47721 !important;
}

.metric-card:nth-child(1) { border-top-color: #efb48d !important; }
.metric-card:nth-child(2) { border-top-color: #efb48d !important; }
.metric-card:nth-child(3) { border-top-color: #e16412 !important; }
.metric-card:nth-child(4) { border-top-color: #f47721 !important; }
.metric-card:nth-child(5) { border-top-color: #efb48d !important; }
.metric-card:nth-child(6) { border-top-color: #e16412 !important; }

.metric-card .metric-icon,
.metric-icon,
.empty-icon,
.professional-avatar,
.client-avatar,
#clientes-lista .client-avatar {
    color: #e16412 !important;
    background: #EDF5FA !important;
    border: 1px solid #efb48d !important;
    box-shadow: none !important;
}

.metric-card:nth-child(2) .metric-icon { color: #e16412 !important; background: #EFF6FB !important; border-color:#f47721 !important; }
.metric-card:nth-child(3) .metric-icon { color: #B9CBDD !important; background: #EAF4FB !important; border-color:#efb48d !important; }
.metric-card:nth-child(4) .metric-icon { color: #efb48d !important; background: #FFFFFF !important; border-color:#f47721 !important; }
.metric-card:nth-child(5) .metric-icon { color: #f47721 !important; background: #FFFFFF !important; border-color:#f47721 !important; }
.metric-card:nth-child(6) .metric-icon { color: #e16412 !important; background: #FFFFFF !important; border-color:#f47721 !important; }

.metric-value,
.metric-card .metric-value,
.metric-card .value,
.metric-card .number,
.metric-card > strong {
    color: #171717 !important;
    font-weight: 400 !important;
}

.metric-label,
.metric-card .metric-label,
.metric-card .label,
.metric-card .description,
.metric-note,
.description,
.subtitle {
    color: #e16412 !important;
    font-weight: 400 !important;
}

/* Classes semânticas — somente laranja */
.metric-card.clients .metric-icon,
.metric-card.client .metric-icon { color:#efb48d !important; background:#EDF5FA !important; }
.metric-card.professionals .metric-icon,
.metric-card.people .metric-icon,
.metric-card.attendimentos .metric-icon { color:#e16412 !important; background:#EFF6FB !important; }
.metric-card.revenue .metric-icon,
.metric-card.faturamento .metric-icon { color:#e16412 !important; background:#EAF4FB !important; }
.metric-card.appointments .metric-icon,
.metric-card.agendamentos .metric-icon { color:#efb48d !important; background:#FFFFFF !important; }
.metric-card.services .metric-icon { color:#f47721 !important; background:#FFFFFF !important; }

/* TÍTULOS E TEXTOS */
.card-title,
.panel-header h2,
.card-header h2,
.card-header h3,
.panel-header h3,
.page-title,
.page-header h1,
h1,h2,h3,h4,h5,h6 {
    color: #171717 !important;
    font-weight: 400 !important;
}

.card-subtitle,
.panel-header p,
.card-header p,
.page-description,
.page-header p {
    color: #e16412 !important;
    font-weight: 400 !important;
}

/* AGENDAMENTOS E ITENS PRINCIPAIS */
.appointment-item,
.agendamento-item,
.calendar-appointment,
.appointment-card,
.booking-card {
    background: #FFFFFF !important;
    border: 1px solid #f47721 !important;
    border-left: 3px solid #efb48d !important;
    color: #171717 !important;
    box-shadow: none !important;
}

.appointment-item:hover,
.agendamento-item:hover,
.calendar-appointment:hover,
.appointment-card:hover,
.booking-card:hover {
    background: #F0F6FB !important;
        border-color: #DDE8F0 !important;
    border-left-color: #e16412 !important;
    box-shadow: 0 7px 18px rgba(239,180,141,.075) !important;
}

/* BADGES / STATUS — SOMENTE VARIAÇÕES DE LARANJA */
.status,
.badge,
.tag {
    font-weight: 400 !important;
}

.status-success,
.badge-success,
.status-completed,
.badge-completed,
[data-status="completed"],
[data-status="success"],
.status-warning,
.badge-warning,
.status-ongoing,
.badge-ongoing,
[data-status="ongoing"],
[data-status="pending"],
.status-info,
.badge-info,
.status-danger,
.badge-danger,
[data-status="cancelled"],
[data-status="canceled"] {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border: 1px solid #D4E4EE !important;
}

/* DIFERENCIAÇÃO DE STATUS POR TONS */
.status-success,
.badge-success,
.status-completed,
.badge-completed,
[data-status="completed"],
[data-status="success"] {
    color: #C0CFDE !important;
    background: #FFFFFF !important;
        border-color: #DDE8F0 !important;
}

.status-warning,
.badge-warning,
.status-ongoing,
.badge-ongoing,
[data-status="ongoing"],
[data-status="pending"] {
    color: #ACC3DA !important;
    background: #FFFFFF !important;
    border-color: #f47721 !important;
}

.status-danger,
.badge-danger,
[data-status="cancelled"],
[data-status="canceled"] {
    color: #B9CBDD !important;
    background: #FFFFFF !important;
        border-color: #DDE8F0 !important;
}

/* TABELAS */
table,
.table,
.clients-table,
.table-wrapper table {
    color: #171717 !important;
    background: #FFFFFF !important;
    border-color: #E0EBF2 !important;
}

table thead,
.table thead,
.clients-table thead,
thead {
    background: #FAFCFE !important;
    color: #e16412 !important;
}

table th,
.table th,
.clients-table th,
thead th {
    color: #e16412 !important;
    background: #FAFCFE !important;
    border-color: #E0EBF2 !important;
    font-weight: 400 !important;
}

tbody td,
.table tbody td,
.clients-table tbody td {
    border-color: #f47721 !important;
    color: #171717 !important;
    background: #FFFFFF !important;
}

tbody tr:hover,
.table tbody tr:hover,
.clients-table tbody tr:hover {
    background: #F0F6FB !important;
}

/* CALENDÁRIO */
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment,
.calendar-day-view,
.calendar-week-view {
    background: #FFFFFF !important;
    color: #171717 !important;
    border-color: #f47721 !important;
    background-image: none !important;
}

.calendar-week-title,
.calendar-day-view-title,
.calendar-day-title {
    color: #171717 !important;
    font-weight: 400 !important;
}

.calendar-day-cell:hover,
.calendar-appointment:hover {
    background: #F0F6FB !important;
        border-color: #DDE8F0 !important;
}

/* GRÁFICOS — LARANJA */
.chart,
.chart-card,
.chart-container,
.sales-chart,
.revenue-chart,
.chart-area {
    background: #FFFFFF !important;
    color: #171717 !important;
    border-color: #E0EBF2 !important;
    background-image: none !important;
}

.chart-bar,
.bar,
.revenue-bar,
.sales-bar,
[class*="chart-bar"],
[class*="-bar"] {
    background: #efb48d !important;
    border-color: #efb48d !important;
}

.chart-bar:nth-child(2n),
.bar:nth-child(2n),
[class*="chart-bar"]:nth-child(2n) {
    background: #efb48d !important;
    border-color: #efb48d !important;
}

.chart-line,
.line,
.revenue-line,
.sales-line,
svg [stroke="#16A34A"],
svg [stroke="#e16412"],
svg [stroke="#8B5CF6"],
svg [stroke="#E1EBF5"],
svg [stroke="#EF4444"] {
    stroke: #efb48d !important;
}

.chart-fill,
.area,
.revenue-area,
.sales-area,
svg [fill="#16A34A"],
svg [fill="#e16412"],
svg [fill="#8B5CF6"],
svg [fill="#E1EBF5"],
svg [fill="#EF4444"] {
    fill: rgba(239,180,141,.18) !important;
}

/* PONTOS / LEGENDA DO GRÁFICO */
.chart-dot,
.legend-dot,
.chart-point {
    background: #efb48d !important;
    border-color: #efb48d !important;
}

/* DESTAQUES DE TEXTO / NÚMEROS IMPORTANTES */
.text-primary,
.primary-text,
.accent,
.highlight,
.price,
.revenue,
.amount,
.total,
.kpi-accent {
    color: #B4C9DE !important;
}

/* ALERTAS, TOASTS E MENSAGENS: SEM VERDE OU VERMELHO */
.calendar-toast,
.toast,
.alert,
.notice,
.message {
    background: #FFFFFF !important;
    color: #171717 !important;
    border-color: #D4E4EE !important;
}

.calendar-toast[data-tipo="success"],
.calendar-toast[data-tipo="error"],
.alert-success,
.alert-error,
.alert-danger {
    background: #FFFFFF !important;
    color: #e16412 !important;
    border-color: #D4E4EE !important;
}

/* AUTH / LOGIN — FUNDO TOTALMENTE BRANCO */
body.auth-page,
.auth-page,
.login-page,
.cadastro-page,
.reset-page {
    background: #FFFFFF !important;
    color: #171717 !important;
    background-image: none !important;
}

.login-container,
.cadastro-container,
.reset-page .container {
    background: #FFFFFF !important;
    border: 1px solid #f47721 !important;
    box-shadow: 0 12px 34px rgba(244,119,33,.07) !important;
}

.login-page .logo,
.auth-page .topo {
    color: #171717 !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid #efb48d !important;
    background-image: none !important;
}

.login-page .logo h1,
.login-page .logo h2,
.login-page .logo p,
.auth-page .topo h1,
.auth-page .topo p,
.auth-page .topo .subtitulo {
    color: #171717 !important;
}

.brand-logo { filter: none !important; }

/* BLOQUEIO: TAMBÉM BRANCO + LARANJA */
#crm-bloqueio-overlay {
    --lock-orange: #efb48d !important;
    --lock-orange-strong: #e16412 !important;
    --lock-orange-soft: #f47721 !important;
    --lock-green: #efb48d !important;
    --lock-green-strong: #e16412 !important;
    --lock-bg: #FFFFFF !important;
    --lock-panel: #FFFFFF !important;
    --lock-line: #DDE8F0 !important;
    --lock-text: #171717 !important;
    --lock-muted: #e16412 !important;
    color: #171717 !important;
    background: #FFFFFF !important;
    background-image: none !important;
}

#crm-bloqueio-overlay .crm-lock-card,
#crm-bloqueio-overlay .crm-lock-details,
#crm-bloqueio-overlay .crm-lock-notice {
    background: #FFFFFF !important;
    color: #171717 !important;
    border-color: #D4E4EE !important;
    box-shadow: 0 12px 34px rgba(244,119,33,.07) !important;
}

#crm-bloqueio-overlay .crm-lock-title,
#crm-bloqueio-overlay .crm-lock-value,
#crm-bloqueio-overlay .crm-lock-label,
#crm-bloqueio-overlay .crm-lock-subtitle,
#crm-bloqueio-overlay .crm-lock-notice p {
    color: #171717 !important;
}

#crm-bloqueio-overlay .crm-lock-status,
#crm-bloqueio-overlay .crm-lock-notice {
    color: #e16412 !important;
}

#crm-bloqueio-overlay .crm-lock-btn-refresh,
#crm-bloqueio-overlay .crm-lock-btn-whatsapp {
    color: #FFFFFF !important;
    background: #efb48d !important;
    border-color: #efb48d !important;
    box-shadow: 0 7px 18px rgba(239,180,141,.12) !important;
    background-image: none !important;
}

#crm-bloqueio-overlay #crm-lock-sair {
    color: #e16412 !important;
    background: transparent !important;
}

/* ÍCONES LOCAIS — SEM EMOJIS/GLIFOS */
.sidebar .menu-item[href*="index"],
.sidebar .menu-item[href*="Visão geral"],
.sidebar .menu-item[href*="overview"] { --av-icon: url("assets/icons/overview.svg"); }
.sidebar .menu-item[href*="agendamentos"] { --av-icon: url("assets/icons/appointments.svg"); }
.sidebar .menu-item[href*="calendario"] { --av-icon: url("assets/icons/calendar.svg"); }
.sidebar .menu-item[href*="servicos"] { --av-icon: url("assets/icons/services.svg"); }
.sidebar .menu-item[href*="profissionais"] { --av-icon: url("assets/icons/professionals.svg"); }
.sidebar .menu-item[href*="clientes"] { --av-icon: url("assets/icons/clients.svg"); }
.sidebar .menu-item[href*="configuracoes"] { --av-icon: url("assets/icons/settings.svg"); }

.sidebar .menu-item .menu-icon::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    background: currentColor !important;
    -webkit-mask: var(--av-icon) center / contain no-repeat !important;
    mask: var(--av-icon) center / contain no-repeat !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.sidebar .menu-item .menu-icon {
    font-size: 0 !important;
    background: transparent !important;
}

/* Interações discretas */
.menu-item,
.btn,
.primary-button,
.quick-action,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
button,
a {
    transition: transform .14s ease, box-shadow .14s ease,
                background-color .14s ease, border-color .14s ease,
                color .14s ease !important;
}

.btn:active,
.menu-item:active,
.notification-button:active,
.icon-button:active {
    transform: scale(.99) !important;
}

/* Remove peso excessivo */
strong,
b,
h1,h2,h3,h4,h5,h6,
button,
.btn,
.primary-button,
.menu-item,
.metric-value,
.metric-card .value,
.metric-card .number {
    font-weight: 400 !important;
}

/* Evita qualquer degradê/escuro de regras antigas */
body,
.app,
.main-layout,
main,
main.main,
.sidebar,
.topbar,
header.topbar,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.modal-content,
.chart-card,
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment,
.login-container,
.cadastro-container,
.reset-page .container {
    background-image: none !important;
}

@media (max-width: 800px) {
    body,
    main,
    main.main,
    .app,
    .main-layout {
        background: #FFFFFF !important;
        background-image: none !important;
    }

    .sidebar {
        background: #FFFFFF !important;
    }
}
/* =========================================================
   AV CRM — TEMA DE REFERÊNCIA
   BRANCO + LARANJA SUAVE
   Carregar este arquivo DEPOIS dos demais CSS.
   ========================================================= */

:root {
    --primary: #f47721 !important;
    --primary-dark: #e16412 !important;
    --primary-light: #FFFFFF !important;
    --primary-soft: #F2F7FB !important;
    --background: #FFFFFF !important;
    --surface: #FFFFFF !important;
    --surface-soft: #F8FBFD !important;
    --text: #1F1F1F !important;
    --text-secondary: #595959 !important;
    --text-light: #7A7A7A !important;
    --border: #e16412 !important;
    --border-light: #E8EEF3 !important;

    --success: #f47721 !important;
    --success-bg: #EDF6FD !important;
    --warning: #f47721 !important;
    --warning-bg: #FFFFFF !important;
    --danger: #e16412 !important;
    --danger-bg: #EEF5FA !important;
    --info: #f47721 !important;
    --info-bg: #EDF5FC !important;

    --av-orange: #f47721 !important;
    --av-orange-hover: #f47721 !important;
    --av-orange-soft: #F2F7FB !important;
    --av-orange-light: #FFFFFF !important;
    --av-orange-border: #BDD4E8 !important;

    --shadow-sm: 0 1px 4px rgba(244,119,33,.045) !important;
    --shadow: 0 6px 18px rgba(244,119,33,.065) !important;
    --shadow-lg: 0 12px 28px rgba(244,119,33,.08) !important;

    --font-ui: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
}

/* BASE */
html,
body,
body * {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

html,
body {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
}

body,
.app,
.main-layout,
main,
main.main,
.page-content,
.content {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #1F1F1F !important;
}

/* SIDEBAR — branca como na referência; laranja só no ativo */
.sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid #D7E1E9 !important;
    box-shadow: 2px 0 14px rgba(244,119,33,.035) !important;
}

.sidebar .logo,
.sidebar-menu,
.sidebar .menu,
.sidebar-footer {
    background: #FFFFFF !important;
}

.sidebar .logo {
    border-bottom: 1px solid #DEE7ED !important;
}

.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .logo-subtitle,
.sidebar .logo-text > span,
.sidebar .menu-label,
.sidebar .menu-item,
.sidebar .menu-text,
.sidebar .profile-name,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .access-card strong,
.sidebar .access-card-title,
.sidebar .sidebar-access strong,
.sidebar .access-card span,
.sidebar .access-card-text,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: #1F1F1F !important;
}

.sidebar .menu-label,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p,
.sidebar .access-card span,
.sidebar .access-card-text {
    color: #7A7A7A !important;
}

.sidebar .menu-item {
    color: #3E3E3E !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
}

.sidebar .menu-item:hover {
    color: #e16412 !important;
    background: #F2F7FB !important;
    border-color: #C7DBEC !important;
    transform: translateX(1px) !important;
}

.sidebar .menu-item.active {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border-color: #efb48d !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active .menu-text,
.sidebar .menu-item.active .menu-icon {
    color: #e16412 !important;
}

.sidebar .menu-icon,
.sidebar .logo-icon,
.sidebar .logo-mark,
.sidebar .profile-avatar,
.sidebar .access-icon,
.sidebar .check-icon {
    color: #e16412 !important;
    background: #EDF5FC !important;
    border-color: #C7DBEC !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active .menu-icon {
    background: #FFFFFF !important;
}

.sidebar .menu-badge,
.sidebar .notification-count {
    background: #f47721 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

.sidebar .sidebar-separator,
.sidebar .menu-separator,
.sidebar-footer {
    border-color: #DEE7ED !important;
}

.sidebar .access-card,
.sidebar .sidebar-access,
.sidebar .profile-mini,
.sidebar .profile-more {
    color: #1F1F1F !important;
    background: #F8FBFD !important;
    border: 1px solid #DDE7EF !important;
    box-shadow: none !important;
}

.sidebar .profile-more:hover {
    color: #e16412 !important;
    background: #F2F7FB !important;
    border-color: #C8DBEB !important;
}

/* TOPBAR */
.topbar,
header.topbar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #D7E2EA !important;
    box-shadow: 0 2px 12px rgba(225,100,18,.025) !important;
    backdrop-filter: none !important;
    background-image: none !important;
}

.topbar .search-box input,
.topbar .global-search input,
.global-search input,
.search-box input,
input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.form-group input,
.form-group select,
.form-group textarea {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border: 1px solid #D8E4ED !important;
    box-shadow: none !important;
}

.topbar .search-box input::placeholder,
.topbar .global-search input::placeholder,
.global-search input::placeholder,
.search-box input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #e16412 !important;
}

.topbar .search-box input:focus,
.topbar .global-search input:focus,
.global-search input:focus,
.search-box input:focus,
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus {
    border-color: #efb48d !important;
    box-shadow: 0 0 0 3px rgba(244,119,33,.10) !important;
}

.notification-button,
.topbar .btn-icon,
.topbar .icon-button {
    background: #FFFFFF !important;
    color: #4E4E4E !important;
    border: 1px solid #D8E4ED !important;
    box-shadow: none !important;
}

.notification-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover {
    background: #F2F7FB !important;
    color: #e16412 !important;
    border-color: #BCD5EA !important;
}

/* TEXTOS — NUNCA BRANCO NO CONTEÚDO */
h1,h2,h3,h4,h5,h6,
.page-title,
.page-header h1,
.card-title,
.panel-header h2,
.panel-header h3,
.card-header h2,
.card-header h3,
.metric-value,
.metric-card > strong,
.professional-name,
.professional-card .name,
.service-name,
.service-card .name,
.client-name,
.client-card .name,
.client-item .client-name,
.appointment-client,
.appointment-item .client-name,
.appointment-item .appointment-client,
.professional-info strong,
.professional-info .professional-name {
    color: #1F1F1F !important;
    font-weight: 400 !important;
}

.page-description,
.page-header p,
.card-subtitle,
.panel-header p,
.metric-note,
.metric-label,
.metric-top > span,
.professional-role,
.professional-contact,
.service-description,
.client-contact,
.appointment-service,
.appointment-details,
.professional-info-row,
.professional-info-label {
    color: #777777 !important;
    font-weight: 400 !important;
}

/* CARDS */
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.appointments-filters,
.services-filters,
.modal-content,
.chart-card,
.chart-container,
.dashboard-card {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border: 1px solid #D9E4EC !important;
    box-shadow: 0 6px 18px rgba(225,100,18,.055) !important;
    background-image: none !important;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.client-card:hover {
    border-color: #C2D9EC !important;
    box-shadow: 0 8px 20px rgba(244,119,33,.075) !important;
    transform: translateY(-1px) !important;
}

/* MÉTRICAS — somente variações de laranja */
.metric-card:nth-child(1) {
    background: #F0F6FB !important;
    border-color: #f47721 !important;
}

.metric-card:nth-child(2) {
    background: #F2F8FC !important;
    border-color: #efb48d !important;
}

.metric-card:nth-child(3) {
    background: #EDF6FD !important;
    border-color: #efb48d !important;
}

.metric-card:nth-child(4) {
    background: #F7FAFC !important;
    border-color: #E4EDF4 !important;
}

.metric-icon,
.empty-icon,
.professional-avatar,
.client-avatar,
#clientes-lista .client-avatar {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border: 1px solid #C5DAEE !important;
}

.metric-value,
.price,
.revenue,
.amount,
.total,
.kpi-accent,
.text-primary,
.primary-text,
.accent,
.highlight,
.service-price,
.appointment-time {
    color: #e16412 !important;
}

/* BOTÕES */
.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button {
    background: #f47721 !important;
    color: #FFFFFF !important;
    border-color: #f47721 !important;
    box-shadow: 0 5px 14px rgba(244,119,33,.14) !important;
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover {
    background: #f47721 !important;
    border-color: #f47721 !important;
}

.btn-secondary,
.btn-outline,
.secondary-button,
.quick-action,
.panel-link {
    background: #FFFFFF !important;
    color: #4B4B4B !important;
    border-color: #D6E2EC !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.quick-action:hover,
.panel-link:hover {
    background: #F2F7FB !important;
    color: #e16412 !important;
    border-color: #BCD5EA !important;
}

/* TABELAS */
.table,
.clients-table,
table {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border-color: #D9E4EC !important;
}

table thead,
.table thead,
.clients-table thead,
thead {
    background: #F8FBFD !important;
    color: #555555 !important;
}

table th,
.table th,
.clients-table th,
thead th {
    color: #e16412 !important;
    background: #F8FBFD !important;
    border-color: #D9E4EC !important;
    font-weight: 400 !important;
}

table td,
.table td,
.clients-table td,
tbody td,
.table tbody td,
.clients-table tbody td {
    color: #1F1F1F !important;
    background: #FFFFFF !important;
    border-color: #E1E8EE !important;
}

table tbody tr:hover,
.table tbody tr:hover,
.clients-table tbody tr:hover {
    background: #F7FAFC !important;
}

/* PROFISSIONAIS — NOME PRETO */
.professional-name,
.professional-card .professional-name,
.professional-card h3,
.professional-card h4,
.professional-card strong,
.professional-info .professional-name,
#profissionais-lista .professional-name,
#lista-profissionais .professional-name,
.professional-header .professional-name {
    color: #1F1F1F !important;
    background: transparent !important;
    -webkit-text-fill-color: #1F1F1F !important;
    font-weight: 400 !important;
}

.professional-role,
.professional-card .professional-role {
    color: #777777 !important;
}

.professional-card .professional-actions .btn {
    color: #e16412 !important;
}

/* CLIENTES */
.client-name,
.client-card .client-name,
#clientes-lista .client-name,
.client-item .client-name {
    color: #1F1F1F !important;
    -webkit-text-fill-color: #1F1F1F !important;
    font-weight: 400 !important;
}

.client-contact,
#clientes-lista .client-contact {
    color: #777777 !important;
}

/* AGENDAMENTOS — destaque laranja suave */
.appointment-item {
    background: #FFFFFF !important;
    border-bottom-color: #E1E8EE !important;
}

.appointment-item:hover {
    background: #F0F6FB !important;
}

.appointment-time {
    color: #e16412 !important;
}

.appointment-item .time,
.appointment-item .appointment-time,
.agendamento-hora,
.hora-agendamento {
    color: #e16412 !important;
    background: #FFFFFF !important;
    border: 1px solid #BCD6EC !important;
    border-radius: 9px !important;
}

/* STATUS: somente tons de laranja */
.status,
.badge,
.tag {
    font-weight: 400 !important;
}

.status-success,
.status-confirmed,
.status-active,
.badge-success,
.tag-success {
    background: #EDF6FD !important;
    color: #e16412 !important;
    border: 1px solid #f47721 !important;
}

.status-warning,
.status-pending,
.badge-warning,
.tag-warning {
    background: #FFFFFF !important;
    color: #B1C7DD !important;
    border: 1px solid #f47721 !important;
}

.status-danger,
.status-cancelled,
.status-error,
.badge-danger,
.tag-danger {
    background: #EEF5FA !important;
    color: #B5C9DD !important;
    border: 1px solid #f47721 !important;
}

.status-info,
.badge-info,
.tag-info,
.status-neutral {
    background: #F7FAFC !important;
    color: #e16412 !important;
    border: 1px solid #D9E4EC !important;
}

/* CALENDÁRIO */
.calendar-week-view,
.calendar-week-column,
.calendar-day-view,
.calendar-day-cell,
.calendar-appointment {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border-color: #D9E4EC !important;
    background-image: none !important;
}

.calendar-week-title,
.calendar-day-view-title,
.calendar-day-title {
    color: #1F1F1F !important;
    font-weight: 400 !important;
}

.calendar-appointment:hover,
.calendar-day-cell:hover {
    background: #F0F6FB !important;
    border-color: #C0D8ED !important;
    box-shadow: 0 7px 18px rgba(244,119,33,.075) !important;
}

/* GRÁFICOS — laranja em todos os elementos */
.chart,
.chart-card,
.chart-container,
.sales-chart,
.revenue-chart,
.chart-area {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border-color: #D9E4EC !important;
    background-image: none !important;
}

.chart-bar,
.bar,
.revenue-bar,
.sales-bar,
[class*="chart-bar"],
[class*="-bar"] {
    background: #f47721 !important;
    border-color: #f47721 !important;
}

.chart-bar:nth-child(2n),
.bar:nth-child(2n),
[class*="chart-bar"]:nth-child(2n) {
    background: #f47721 !important;
    border-color: #f47721 !important;
}

.chart-line,
.line,
.revenue-line,
.sales-line,
svg [stroke="#16A34A"],
svg [stroke="#e16412"],
svg [stroke="#8B5CF6"],
svg [stroke="#E1EBF5"],
svg [stroke="#EF4444"] {
    stroke: #f47721 !important;
}

.chart-fill,
.area,
.revenue-area,
.sales-area,
svg [fill="#16A34A"],
svg [fill="#e16412"],
svg [fill="#8B5CF6"],
svg [fill="#E1EBF5"],
svg [fill="#EF4444"] {
    fill: rgba(244,119,33,.16) !important;
}

.chart-dot,
.legend-dot,
.chart-point {
    background: #f47721 !important;
    border-color: #f47721 !important;
}

/* DESTAQUE DA VISÃO GERAL / PAINÉIS PRINCIPAIS */
.sidebar .menu-item.active,
.page-eyebrow,
.page-overline,
.panel-link,
.metric-value,
.service-price,
.appointment-time {
    color: #e16412 !important;
}

/* TOAST / ALERTAS — sem azul, verde ou vermelho vivo */
.calendar-toast,
.toast,
.alert,
.notice,
.message {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border-color: #C9DCEB !important;
}

.calendar-toast[data-tipo="success"],
.calendar-toast[data-tipo="error"],
.alert-success,
.alert-error,
.alert-danger {
    background: #FFFFFF !important;
    color: #e16412 !important;
    border-color: #f47721 !important;
}

/* AUTH */
body.auth-page,
.auth-page,
.login-page,
.cadastro-page,
.reset-page {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    background-image: none !important;
}

.login-container,
.cadastro-container,
.reset-page .container {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border: 1px solid #e16412 !important;
    box-shadow: 0 12px 34px rgba(225,100,18,.07) !important;
}

.login-page .logo,
.auth-page .topo {
    color: #1F1F1F !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid #f47721 !important;
    background-image: none !important;
}

.login-page .logo h1,
.login-page .logo h2,
.login-page .logo p,
.auth-page .topo h1,
.auth-page .topo p,
.auth-page .topo .subtitulo {
    color: #1F1F1F !important;
}

.brand-logo { filter: none !important; }

/* BLOQUEIO */
#crm-bloqueio-overlay {
    --lock-orange: #f47721 !important;
    --lock-orange-strong: #e16412 !important;
    --lock-orange-soft: #ffe1cc !important;
    --lock-green: #efb48d !important;
    --lock-green-strong: #e16412 !important;
    --lock-bg: #FFFFFF !important;
    --lock-panel: #FFFFFF !important;
    --lock-line: #D9E4EC !important;
    --lock-text: #1F1F1F !important;
    --lock-muted: #777777 !important;
    color: #1F1F1F !important;
    background: #FFFFFF !important;
    background-image: none !important;
}

#crm-bloqueio-overlay::before { opacity: .02 !important; }

#crm-bloqueio-overlay .crm-lock-card,
#crm-bloqueio-overlay .crm-lock-details,
#crm-bloqueio-overlay .crm-lock-notice {
    background: #FFFFFF !important;
    color: #1F1F1F !important;
    border-color: #f47721 !important;
    box-shadow: 0 12px 34px rgba(225,100,18,.07) !important;
}

#crm-bloqueio-overlay .crm-lock-title,
#crm-bloqueio-overlay .crm-lock-value,
#crm-bloqueio-overlay .crm-lock-label,
#crm-bloqueio-overlay .crm-lock-subtitle,
#crm-bloqueio-overlay .crm-lock-notice p {
    color: #1F1F1F !important;
}

#crm-bloqueio-overlay .crm-lock-status,
#crm-bloqueio-overlay .crm-lock-notice {
    color: #e16412 !important;
}

#crm-bloqueio-overlay .crm-lock-btn-refresh,
#crm-bloqueio-overlay .crm-lock-btn-whatsapp {
    color: #FFFFFF !important;
    background: #f47721 !important;
    border-color: #f47721 !important;
    box-shadow: 0 7px 18px rgba(244,119,33,.12) !important;
    background-image: none !important;
}

#crm-bloqueio-overlay #crm-lock-sair {
    color: #777777 !important;
    background: transparent !important;
}

/* ÍCONES LOCAIS */
.sidebar .menu-item[href*="index"],
.sidebar .menu-item[href*="Visão geral"],
.sidebar .menu-item[href*="overview"] { --av-icon: url("./assets/icons/overview.svg"); }
.sidebar .menu-item[href*="agendamentos"] { --av-icon: url("./assets/icons/appointments.svg"); }
.sidebar .menu-item[href*="calendario"] { --av-icon: url("./assets/icons/calendar.svg"); }
.sidebar .menu-item[href*="servicos"] { --av-icon: url("./assets/icons/services.svg"); }
.sidebar .menu-item[href*="profissionais"] { --av-icon: url("./assets/icons/professionals.svg"); }
.sidebar .menu-item[href*="clientes"] { --av-icon: url("./assets/icons/clients.svg"); }
.sidebar .menu-item[href*="configuracoes"] { --av-icon: url("./assets/icons/settings.svg"); }

.sidebar .menu-item .menu-icon::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    background: currentColor !important;
    -webkit-mask: var(--av-icon) center / contain no-repeat !important;
    mask: var(--av-icon) center / contain no-repeat !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.sidebar .menu-item .menu-icon {
    font-size: 0 !important;
    background: transparent !important;
}

/* INTERAÇÕES DISCRETAS */
.menu-item,
.btn,
.primary-button,
.quick-action,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
button,
a {
    transition: transform .14s ease, box-shadow .14s ease,
                background-color .14s ease, border-color .14s ease,
                color .14s ease !important;
}

.btn:active,
.menu-item:active,
.notification-button:active,
.icon-button:active {
    transform: scale(.99) !important;
}

strong,
b,
h1,h2,h3,h4,h5,h6,
button,
.btn,
.primary-button,
.menu-item,
.metric-value,
.metric-card .value,
.metric-card .number {
    font-weight: 400 !important;
}

/* DESKTOP/MOBILE: fundo sempre branco */
body,
.app,
.main-layout,
main,
main.main,
.sidebar,
.topbar,
header.topbar,
.card,
.panel,
.metric-card,
.service-card,
.professional-card,
.client-card,
.table-wrapper,
.filters,
.filter-bar,
.modal-content,
.chart-card,
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment,
.login-container,
.cadastro-container,
.reset-page .container {
    background-image: none !important;
}

@media (max-width: 800px) {
    body,
    main,
    main.main,
    .app,
    .main-layout,
    .sidebar {
        background: #FFFFFF !important;
        background-image: none !important;
    }
}


/* =========================================================
   AV CRM — REFERÊNCIA AZUL / BRANCO — CAMADA FINAL
   Mantém estrutura e componentes existentes; altera somente
   apresentação, cor e tipografia para a referência fornecida.
   ========================================================= */
:root {
  --primary:#f47721 !important;
  --primary-dark:#e16412 !important;
  --primary-light:#DCEBF8 !important;
  --primary-soft:#EFF6FB !important;
  --background:#EDF4F8 !important;
  --surface:#FFFFFF !important;
  --surface-soft:#F8FBFD !important;
  --text:#e16412 !important;
  --text-secondary:#e16412 !important;
  --text-light:#7B8A99 !important;
  --border:#D8E3EB !important;
  --border-light:#E9EFF4 !important;
  --font-ui:Inter,"Segoe UI",Arial,sans-serif !important;
}
html,body,body *{font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif !important;}
html,body{background:#EDF4F8 !important;color:#e16412 !important;}
body,.app,.main-layout,main,main.main,.page-content,.content{background:#EDF4F8 !important;background-image:none !important;color:#e16412 !important;}
.sidebar{background:#e16412 !important;border-right:1px solid #e16412 !important;box-shadow:4px 0 16px rgba(225,100,18,.10) !important;}
.sidebar .logo,.sidebar-menu,.sidebar .menu,.sidebar-footer{background:transparent !important;}
.sidebar .logo{border-bottom:1px solid rgba(255,255,255,.10) !important;}
.sidebar .logo-title,.sidebar .logo-text strong,.sidebar .logo-subtitle,.sidebar .logo-text>span,.sidebar .menu-label,.sidebar .menu-item,.sidebar .menu-text,.sidebar .profile-name,.sidebar .profile-status,.sidebar .profile-info span,.sidebar .access-card strong,.sidebar .access-card-title,.sidebar .sidebar-access strong,.sidebar .access-card span,.sidebar .access-card-text,.sidebar .sidebar-access span,.sidebar .sidebar-access p{color:#F2F6FA !important;}
.sidebar .menu-label,.sidebar .profile-status,.sidebar .profile-info span,.sidebar .sidebar-access span,.sidebar .sidebar-access p{color:#AFC0CE !important;}
.sidebar .menu-item{color:#E6EEF5 !important;background:transparent !important;border:1px solid transparent !important;border-radius:12px !important;}
.sidebar .menu-item:hover{background:#e16412 !important;color:#FFFFFF !important;border-color:#e16412 !important;transform:translateX(1px) !important;}
.sidebar .menu-item.active{background:#e16412 !important;color:#FFFFFF !important;border-color:#f47721 !important;box-shadow:inset 3px 0 0 #f47721 !important;}
.sidebar .menu-item.active .menu-text,.sidebar .menu-item.active .menu-icon{color:#FFFFFF !important;}
.sidebar .menu-icon,.sidebar .logo-icon,.sidebar .logo-mark,.sidebar .profile-avatar,.sidebar .access-icon,.sidebar .check-icon{color:#D7E7F4 !important;background:#e16412 !important;border-color:#e16412 !important;box-shadow:none !important;}
.sidebar .menu-item.active .menu-icon{background:#e16412 !important;}
.sidebar .menu-badge,.sidebar .notification-count{background:#f47721 !important;color:#FFFFFF !important;border:0 !important;}
.sidebar .sidebar-separator,.sidebar .menu-separator{background:rgba(255,255,255,.10) !important;}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.10) !important;}
.sidebar .access-card,.sidebar .sidebar-access,.sidebar .profile-mini,.sidebar .profile-more{color:#EAF1F6 !important;background:#e16412 !important;border:1px solid #e16412 !important;box-shadow:none !important;}
.sidebar .profile-more:hover{background:#e16412 !important;color:#FFFFFF !important;border-color:#e16412 !important;}
.topbar,header.topbar{background:#EDF4F8 !important;border-bottom:1px solid #D7E2EA !important;box-shadow:0 2px 10px rgba(225,100,18,.04) !important;background-image:none !important;backdrop-filter:none !important;}
.topbar .search-box input,.topbar .global-search input,.global-search input,.search-box input,input,select,textarea,.form-control,.form-input,.form-select,.form-group input,.form-group select,.form-group textarea{background:#FFFFFF !important;color:#e16412 !important;border:1px solid #C9D8E3 !important;box-shadow:none !important;}
.topbar .search-box input:focus,.topbar .global-search input:focus,.global-search input:focus,.search-box input:focus,input:focus,select:focus,textarea:focus,.form-control:focus,.form-input:focus,.form-select:focus{border-color:#f47721 !important;box-shadow:0 0 0 3px rgba(244,119,33,.12) !important;}
.notification-button,.topbar .btn-icon,.topbar .icon-button{background:#FFFFFF !important;color:#e16412 !important;border:1px solid #C9D8E3 !important;}
.notification-button:hover,.topbar .btn-icon:hover,.topbar .icon-button:hover{background:#EAF3FA !important;color:#e16412 !important;border-color:#B9D0E2 !important;}
.card,.panel,.metric-card,.service-card,.professional-card,.client-card,.table-wrapper,.filters,.filter-bar,.appointments-filters,.services-filters,.modal-content,.chart-card,.chart-container,.dashboard-card{background:#FFFFFF !important;color:#e16412 !important;border:1px solid #D6E1E9 !important;box-shadow:0 4px 16px rgba(225,100,18,.045) !important;background-image:none !important;}
.card:hover,.panel:hover,.metric-card:hover,.service-card:hover,.professional-card:hover,.client-card:hover{border-color:#BED4E5 !important;box-shadow:0 7px 18px rgba(225,100,18,.07) !important;transform:translateY(-1px) !important;}
.page-title,.page-header h1,h1,h2,h3,h4,h5,h6,.card-title,.panel-header h2,.panel-header h3,.card-header h2,.card-header h3,.metric-value,.professional-name,.professional-card .name,.service-name,.service-card .name,.client-name,.client-card .name,.client-item .client-name,.appointment-client,.appointment-item .client-name,.appointment-item .appointment-client,.professional-info strong,.professional-info .professional-name{color:#e16412 !important;-webkit-text-fill-color:#e16412 !important;}
.page-description,.page-header p,.card-subtitle,.panel-header p,.metric-note,.metric-label,.metric-top>span,.professional-role,.professional-contact,.service-description,.client-contact,.appointment-service,.appointment-details,.professional-info-row,.professional-info-label{color:#f47721 !important;}
.metric-card:nth-child(1){background:#EDF5FC !important;border-color:#C5DBEE !important;}
.metric-card:nth-child(2){background:#EEF8F4 !important;border-color:#CBE4D9 !important;}
.metric-card:nth-child(3){background:#F3F0FC !important;border-color:#D8D0EF !important;}
.metric-card:nth-child(4){background:#efb48d !important;border-color:#f47721 !important;}
.metric-icon,.empty-icon,.professional-avatar,.client-avatar,#clientes-lista .client-avatar{color:#e16412 !important;background:#DCEBF7 !important;border:1px solid #C1D9EC !important;}
.metric-value,.price,.revenue,.amount,.total,.kpi-accent,.text-primary,.primary-text,.accent,.highlight,.service-price,.appointment-time{color:#e16412 !important;}
.btn-primary,.primary-button,.topbar .btn-primary,.topbar .primary-button{background:#f47721 !important;color:#FFFFFF !important;border-color:#f47721 !important;box-shadow:0 5px 13px rgba(244,119,33,.16) !important;}
.btn-primary:hover,.primary-button:hover,.topbar .btn-primary:hover,.topbar .primary-button:hover{background:#f47721 !important;border-color:#f47721 !important;}
.btn-secondary,.btn-outline,.secondary-button,.quick-action,.panel-link{background:#FFFFFF !important;color:#e16412 !important;border-color:#CCD9E3 !important;}
.btn-secondary:hover,.btn-outline:hover,.secondary-button:hover,.quick-action:hover,.panel-link:hover{background:#EEF6FC !important;color:#e16412 !important;border-color:#B8D1E4 !important;}
.table,.clients-table,table{background:#FFFFFF !important;color:#e16412 !important;border-color:#D8E3EB !important;}
table thead,.table thead,.clients-table thead,thead{background:#F4F7F9 !important;color:#e16412 !important;}
table th,.table th,.clients-table th,thead th{color:#e16412 !important;background:#F4F7F9 !important;border-color:#D8E3EB !important;}
table td,.table td,.clients-table td,tbody td,.table tbody td,.clients-table tbody td{color:#e16412 !important;background:#FFFFFF !important;border-color:#E1E9EE !important;}
table tbody tr:hover,.table tbody tr:hover,.clients-table tbody tr:hover{background:#F3F8FC !important;}
.professional-name,.professional-card .professional-name,.professional-card h3,.professional-card h4,.professional-card strong,.professional-info .professional-name,#profissionais-lista .professional-name,#lista-profissionais .professional-name,.professional-header .professional-name{color:#e16412 !important;-webkit-text-fill-color:#e16412 !important;}
.client-name,.client-card .client-name,#clientes-lista .client-name,.client-item .client-name{color:#e16412 !important;-webkit-text-fill-color:#e16412 !important;}
.appointment-item{background:#FFFFFF !important;border-bottom-color:#E1E9EE !important;}
.appointment-item:hover{background:#F1F7FC !important;}
.appointment-time,.appointment-item .time,.appointment-item .appointment-time,.agendamento-hora,.hora-agendamento{color:#e16412 !important;background:#E2EFF9 !important;border:1px solid #BBD5EA !important;border-radius:9px !important;}
.calendar-week-view,.calendar-week-column,.calendar-day-view,.calendar-day-cell,.calendar-appointment{background:#FFFFFF !important;color:#e16412 !important;border-color:#D6E1E9 !important;background-image:none !important;}
.calendar-week-title,.calendar-day-view-title,.calendar-day-title{color:#e16412 !important;}
.calendar-appointment:hover,.calendar-day-cell:hover{background:#F0F7FC !important;border-color:#BCD6EA !important;box-shadow:0 7px 18px rgba(244,119,33,.075) !important;}
.chart,.chart-card,.chart-container,.sales-chart,.revenue-chart,.chart-area{background:#FFFFFF !important;color:#e16412 !important;border-color:#D6E1E9 !important;background-image:none !important;}
.chart-bar,.bar,.revenue-bar,.sales-bar,[class*="chart-bar"],[class*="-bar"]{background:#f47721 !important;border-color:#f47721 !important;}
.chart-line,.line,.revenue-line,.sales-line{stroke:#f47721 !important;}
.chart-fill,.area,.revenue-area,.sales-area{fill:rgba(244,119,33,.16) !important;}
.chart-dot,.legend-dot,.chart-point{background:#f47721 !important;border-color:#f47721 !important;}
strong,b,.metric-card .value,.metric-card .number{font-weight:600 !important;}
.menu-item,.btn,.primary-button,.quick-action,.card,.panel,.metric-card,.service-card,.professional-card,.client-card,.notification-button,.topbar .btn-icon,.topbar .icon-button,button,a{transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease !important;}
@media(max-width:800px){body,main,main.main,.app,.main-layout{background:#EDF4F8 !important;}.sidebar{background:#e16412 !important;}}

/* =========================================================
   AJUSTE FINAL — BOTÕES SEM TRAÇOS LARANJAS
   Mantém a cor azul do sistema e altera SOMENTE os botões.
   ========================================================= */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
.btn,
.primary-button,
.secondary-button,
.btn-primary,
.btn-secondary,
.btn-outline,
.quick-action,
.panel-link,
.notification-button,
.icon-button,
.topbar .btn-icon,
.topbar .icon-button,
.btn-entrar,
.btn-criar,
#crm-bloqueio-overlay .crm-lock-btn {
    border-color: #e16412 !important;
    outline-color: #e16412 !important;
    background-image: none !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.btn:hover,
a.button:hover,
.btn:hover,
.primary-button:hover,
.secondary-button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.quick-action:hover,
.panel-link:hover,
.notification-button:hover,
.icon-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.btn-entrar:hover,
.btn-criar:hover,
#crm-bloqueio-overlay .crm-lock-btn:hover {
    border-color: #e16412 !important;
    outline-color: #e16412 !important;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
.btn,
.primary-button,
.secondary-button,
.btn-primary,
.btn-secondary,
.btn-outline,
.quick-action,
.panel-link,
.notification-button,
.icon-button,
.topbar .btn-icon,
.topbar .icon-button,
.btn-entrar,
.btn-criar,
#crm-bloqueio-overlay .crm-lock-btn {
    box-shadow: none !important;
}

/* Preserva sombras neutras quando existirem, sem qualquer brilho laranja. */
.btn-primary,
.primary-button,
.btn-entrar,
.btn-criar {
    box-shadow: 0 3px 10px rgba(225,100,18,0.08) !important;
}

.btn-primary:hover,
.primary-button:hover,
.btn-entrar:hover,
.btn-criar:hover {
    box-shadow: 0 5px 14px rgba(225,100,18,0.12) !important;
}


/* =========================================================
   AV CRM — CORREÇÃO AZUL DEFINITIVA
   1) Tudo que era laranja passa para azul.
   2) Botões principais permanecem azuis.
   3) Nenhum botão recebe contorno laranja/preto por herança.
   4) Nomes e textos de profissionais permanecem pretos.
   ========================================================= */
:root {
  --primary:#f47721 !important;
  --primary-dark:#e16412 !important;
  --primary-light:#DCEBF8 !important;
  --primary-soft:#EFF6FB !important;
  --accent:#f47721 !important;
  --highlight:#f47721 !important;
  --text:#e16412 !important;
}

/* Conversão visual de qualquer destaque ainda quente/laranja */
[class*="accent"], [class*="highlight"], [class*="orange"],
.text-primary, .primary-text, .kpi-accent, .service-price,
.appointment-time, .status, .status-badge, .tag, .chip,
.metric-value, .price, .revenue, .amount, .total {
  color:#e16412 !important;
}

/* Botões de ação: AZUL, sem linhas laranjas ou pretas */
.btn-primary,
.primary-button,
.topbar .btn-primary,
.topbar .primary-button,
.btn-entrar,
.btn-criar,
button.primary,
button[type="submit"],
input[type="submit"],
input[type="button"] {
  background:#f47721 !important;
  color:#FFFFFF !important;
  border-color:#f47721 !important;
  outline-color:#f47721 !important;
  background-image:none !important;
  box-shadow:0 5px 13px rgba(244,119,33,.16) !important;
}

.btn-primary:hover,
.primary-button:hover,
.topbar .btn-primary:hover,
.topbar .primary-button:hover,
.btn-entrar:hover,
.btn-criar:hover,
button.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background:#f47721 !important;
  color:#FFFFFF !important;
  border-color:#f47721 !important;
  outline-color:#f47721 !important;
  box-shadow:0 6px 15px rgba(225,100,18,.15) !important;
}

/* Botões secundários: branco com detalhe azul, como na referência */
.btn-secondary,
.btn-outline,
.secondary-button,
.quick-action,
.panel-link,
a.btn,
a.button {
  background:#FFFFFF !important;
  color:#e16412 !important;
  border-color:#BFD3E4 !important;
  outline-color:#BFD3E4 !important;
  background-image:none !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.quick-action:hover,
.panel-link:hover,
a.btn:hover,
a.button:hover {
  background:#EEF6FC !important;
  color:#e16412 !important;
  border-color:#efb48d !important;
}

/* Botões/controles circulares de navegação continuam brancos */
.notification-button,
.icon-button,
.topbar .btn-icon,
.topbar .icon-button {
  background:#FFFFFF !important;
  color:#e16412 !important;
  border:1px solid #C9D8E3 !important;
  outline:none !important;
  box-shadow:none !important;
}
.notification-button:hover,
.icon-button:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover {
  background:#EAF3FA !important;
  color:#e16412 !important;
  border-color:#B9D0E2 !important;
}

/* Nomes: sempre pretos/grafite */
.page-title,.page-header h1,h1,h2,h3,h4,h5,h6,
.card-title,.panel-header h2,.panel-header h3,
.card-header h2,.card-header h3,
.professional-name,.professional-card .name,
.professional-card h3,.professional-card h4,.professional-card strong,
.professional-info strong,.professional-info .professional-name,
#profissionais-lista .professional-name,#lista-profissionais .professional-name,
.professional-header .professional-name,
.client-name,.client-card .name,#clientes-lista .client-name,
.client-item .client-name,
.appointment-client,.appointment-item .client-name,
.appointment-item .appointment-client {
  color:#e16412 !important;
  -webkit-text-fill-color:#e16412 !important;
}

/* Labels, textos auxiliares e nomes menores: pretos/grafite, um pouco maiores */
.menu-text,.menu-item,.logo-title,.logo-text strong,.profile-name,
.page-description,.page-header p,.card-subtitle,.panel-header p,
.metric-label,.metric-note,.professional-role,.professional-contact,
.service-description,.client-contact,.appointment-service,
.appointment-details,.professional-info-row,.professional-info-label,
.table th,.table td,.clients-table th,.clients-table td,
table th,table td {
  color:#e16412 !important;
}

/* Indicadores e estados que antes usavam laranja */
.badge-primary,.badge-accent,.status-primary,.status-accent,
[style*="#f97316"],[style*="#F97316"],[style*="rgb(249, 115, 22)"],
[style*="rgb(249,115,22)"] {
  color:#e16412 !important;
  border-color:#BBD5EA !important;
  background:#EAF3FA !important;
}

/* Gráficos sempre em azul */
.chart-bar,.bar,.revenue-bar,.sales-bar,
[class*="chart-bar"],[class*="-bar"] {
  background:#f47721 !important;
  border-color:#f47721 !important;
}
.chart-line,.line,.revenue-line,.sales-line { stroke:#f47721 !important; }
.chart-fill,.area,.revenue-area,.sales-area { fill:rgba(244,119,33,.16) !important; }
.chart-dot,.legend-dot,.chart-point { background:#f47721 !important; border-color:#f47721 !important; }

/* +1 ponto de legibilidade nas áreas textuais principais */
body,.topbar,.page-content,.content,
.menu-item,.menu-text,.card,.panel,.metric-card,
.service-card,.professional-card,.client-card,
table,.table,.clients-table,.appointment-item,
.calendar-appointment,.calendar-day-cell,
input,select,textarea,button {
  font-size:calc(1em + 1px) !important;
}


/* =========================================================
   REFINO VISUAL — TIPOGRAFIA, ÍCONES E NUMERAÇÕES
   Mantém integralmente paleta, fundos, bordas e estrutura.
   ========================================================= */

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-optical-sizing: auto;
    font-kerning: normal;
}

/* Títulos: mais presença sem aspecto pesado */
.page-title,
.page-header h1,
.modal-title,
.card-title,
.panel-header h2,
.calendar-title,
.calendar-day-title,
.calendar-day-view-title,
.calendar-week-title,
.empty-title,
.settings-title,
.logo-title,
.logo-text strong {
    font-weight: 500 !important;
    letter-spacing: -0.018em;
    text-rendering: optimizeLegibility;
}

.page-title,
.page-header h1 {
    letter-spacing: -0.028em;
}

/* Descrições: leitura mais limpa e respirada */
.page-description,
.page-header p,
.card-subtitle,
.panel-header p,
.description,
.service-description,
.settings-description,
.metric-note,
.next-appointment-label,
.professional-info-label,
.whatsapp-status-detail,
.empty-state p,
.subtitle,
small {
    line-height: 1.55 !important;
    letter-spacing: 0.004em;
    text-wrap: pretty;
}

/* Números e valores: mais definidos e consistentes */
.metric-value,
.metric-card > strong,
.chart-value,
.number,
.value,
.total,
.amount,
.price,
.service-price,
.professional-count,
.menu-badge,
.notification-count,
.calendar-day-number,
.info-badge,
.badge,
.status-badge {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 500 !important;
    letter-spacing: -0.012em;
}

.metric-value,
.metric-card > strong,
.chart-value,
.total,
.amount,
.price,
.service-price {
    line-height: 1.08 !important;
}

/* Rótulos e textos curtos */
.metric-label,
.metric-top > span,
.form-label,
.filter-label,
.settings-label,
.label,
.menu-label,
.professional-info-label,
.next-appointment-label {
    font-weight: 500 !important;
    letter-spacing: 0.018em;
}

.menu-text,
.sidebar .profile-name,
.sidebar .access-card-title,
.sidebar .sidebar-access strong {
    font-weight: 500 !important;
    letter-spacing: -0.006em;
}

/* Ícones: mais nítidos e vivos, sem trocar cor ou fundo */
.menu-icon,
.metric-icon,
.btn-icon,
.icon-button,
.search-icon,
.empty-icon,
.access-icon,
.check-icon,
.service-summary-icon,
.logo-icon,
.logo-mark,
.material-icons {
    font-weight: 500 !important;
    line-height: 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    transition: transform .18s ease, opacity .18s ease;
}

@media (hover:hover) and (pointer:fine) {
    .menu-item:hover .menu-icon,
    .metric-card:hover .metric-icon,
    .icon-button:hover,
    .btn-icon:hover,
    .service-summary-icon:hover {
        transform: translateY(-1px) scale(1.045);
    }
}

/* Estados e badges: texto mais definido, sem alterar cores */
.badge,
.status,
.status-badge,
.appointment-status,
.schedule-status,
.whatsapp-status-badge,
.info-badge {
    font-weight: 500 !important;
    letter-spacing: 0.012em;
}

/* Inputs e tabelas: melhora a leitura sem mudar dimensões */
input,
select,
textarea,
td,
th {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

th {
    font-weight: 500 !important;
    letter-spacing: 0.012em;
}

/* Evita exagero visual em telas pequenas */
@media (max-width: 640px) {
    .page-title,
    .page-header h1 {
        letter-spacing: -0.022em;
    }

    .metric-value,
    .metric-card > strong,
    .chart-value {
        letter-spacing: -0.008em;
    }
}



/* =========================================================
   CAMADA EXTRA — UI MAIS VIVA (TIPOGRAFIA, BOTÕES E ÍCONES)
   Mantém a paleta e o layout; intensifica apenas presença visual.
   ========================================================= */
:root {
    --ui-vivo-font: "Manrope", Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

html, body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.card-title,
.panel-header h2,
.dashboard-column .card-title,
.section-title,
.modal-title,
.calendar-title,
.professional-name,
.service-name,
.client-name,
.clients-panel h2,
.topbar-title,
.topbar h1,
.topbar h2 {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.18 !important;
    color: var(--text, #e16412) !important;
}

.card-title,
.panel-header h2,
.dashboard-column .card-title,
.clients-panel h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title::before,
.panel-header h2::before,
.dashboard-column .card-title::before,
.clients-panel h2::before {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary, #f47721), var(--primary-dark, #e16412));
    box-shadow: 0 0 0 4px rgba(244,119,33,.10);
}

.metric-card > strong,
.metric-value,
.metric-card .value,
.metric-card .number,
.chart-value,
.kpi-value,
.stat-value,
.clients-table td:nth-child(2),
.clients-table td:nth-child(3),
.clients-table td:nth-child(4) {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.02 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
}

.metric-card > p,
.metric-label,
.metric-note,
.metric-top > span,
.description,
.card-subtitle,
.panel-subtitle,
.empty-state p,
.empty-state small,
.clients-panel p,
.table-subtitle,
.service-card p,
.professional-card p,
.client-card p {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.008em !important;
    line-height: 1.48 !important;
    color: var(--text-secondary, #e16412) !important;
}

.clients-table th,
.table th,
thead th,
.data-table th {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.clients-table td,
.table td,
.data-table td,
label,
.form-label {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 500 !important;
    letter-spacing: -0.008em !important;
}

.status,
.status-badge,
.badge,
.appointment-status {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-width: 1.5px !important;
}

.btn,
button,
a.btn,
.btn-primary,
.primary-button,
.btn-secondary,
.btn-outline,
.secondary-button,
.btn-entrar,
.btn-criar,
.auth-page .btn,
.crm-lock-btn,
.topbar .btn-icon,
.topbar .icon-button,
.notification-button,
.calendar-view-options .btn {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    border-radius: 14px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.btn,
button,
a.btn,
.btn-primary,
.primary-button,
.btn-secondary,
.btn-outline,
.secondary-button,
.btn-entrar,
.btn-criar,
.auth-page .btn,
.crm-lock-btn,
.calendar-view-options .btn {
    box-shadow: 0 10px 20px rgba(244,119,33,.08) !important;
}

.btn:hover,
button:hover,
a.btn:hover,
.btn-primary:hover,
.primary-button:hover,
.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.btn-entrar:hover,
.btn-criar:hover,
.auth-page .btn:hover,
.crm-lock-btn:hover,
.calendar-view-options .btn:hover {
    transform: translateY(-1px) !important;
    filter: saturate(1.08) !important;
    box-shadow: 0 14px 26px rgba(244,119,33,.12) !important;
}

.btn-primary,
.primary-button,
.btn-entrar,
.btn-criar,
.auth-page .btn {
    background-image: linear-gradient(180deg, var(--primary, #f47721), var(--primary-dark, #e16412)) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.btn-secondary,
.btn-outline,
.secondary-button,
.crm-lock-btn,
.calendar-view-options .btn {
    background: color-mix(in srgb, var(--primary-soft, #F2F7FB) 65%, #FFFFFF 35%) !important;
    border-color: color-mix(in srgb, var(--primary, #f47721) 34%, #FFFFFF 66%) !important;
    color: var(--primary-dark, #e16412) !important;
}

.btn-primary::before,
.primary-button::before,
.btn-entrar::before,
.btn-criar::before,
.auth-page .btn::before,
a.btn-primary::before,
button.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.secondary-button::before,
.crm-lock-btn::before,
.calendar-view-options .btn::before {
    display: inline-block;
    margin-right: .58em;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-.02em);
}

.btn-primary::before,
.primary-button::before,
.btn-entrar::before,
.btn-criar::before,
.auth-page .btn::before,
a.btn-primary::before,
button.btn-primary::before {
    content: "✦";
}

.btn-secondary::before,
.btn-outline::before,
.secondary-button::before,
.crm-lock-btn::before,
.calendar-view-options .btn::before {
    content: "→";
}

.topbar .btn-icon,
.topbar .icon-button,
.notification-button,
.icon-button,
.btn-icon {
    border-width: 1.5px !important;
    box-shadow: 0 8px 18px rgba(244,119,33,.10) !important;
    color: var(--primary-dark, #e16412) !important;
}

.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.notification-button:hover,
.icon-button:hover,
.btn-icon:hover,
.metric-icon:hover,
.empty-icon:hover {
    transform: translateY(-1px) scale(1.04) !important;
}

.metric-icon,
.empty-icon,
.service-summary-icon,
.calendar-empty .empty-icon,
.auth-page .topo .logo,
.crm-lock-notice-icon {
    border-width: 1.5px !important;
    box-shadow: 0 10px 20px rgba(244,119,33,.10) !important;
}

.metric-card,
.service-card,
.professional-card,
.client-card,
.card,
.chart-card,
.clients-panel,
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.client-card:hover,
.card:hover,
.chart-card:hover,
.calendar-week-column:hover,
.calendar-day-cell:hover,
.calendar-appointment:hover {
    transform: translateY(-2px) !important;
}

.metric-card {
    overflow: hidden;
    position: relative;
}

.metric-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary, #f47721) 82%, #FFFFFF 18%), color-mix(in srgb, var(--primary-dark, #e16412) 72%, #FFFFFF 28%));
    opacity: .96;
}

.metric-card > strong,
.metric-value,
.metric-card .value,
.metric-card .number {
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.empty-state h3,
.empty-title,
.calendar-empty h3 {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
}

.menu-item,
.sidebar .menu-item,
.sidebar .menu-text {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 600 !important;
    letter-spacing: -0.008em !important;
}

.logo-text strong,
.logo-title {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.logo-text span,
.logo-subtitle,
.profile-status,
.access-card-text,
.access-card span {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 500 !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.form-select {
    font-family: var(--ui-vivo-font) !important;
    font-weight: 500 !important;
}

input::placeholder,
textarea::placeholder {
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--text-secondary, #e16412) 74%, #FFFFFF 26%) !important;
}

@media (max-width: 768px) {
    .card-title,
    .panel-header h2,
    .dashboard-column .card-title,
    .clients-panel h2 {
        gap: 8px;
    }

    .card-title::before,
    .panel-header h2::before,
    .dashboard-column .card-title::before,
    .clients-panel h2::before {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }
}


/* =========================================================
   AJUSTE PONTUAL — CARD DE PROFISSIONAL
   Mantém cores, card, botões e estrutura; corrige apenas proporção
   de avatar/iniciais, nome e textos pequenos.
   ========================================================= */
#profissionais-lista .professional-item {
    align-items: center !important;
}

#profissionais-lista .professional-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    font-family: "Manrope", Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

#profissionais-lista .professional-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

#profissionais-lista .professional-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#profissionais-lista .professional-name {
    margin: 0 0 5px !important;
    font-family: "Manrope", Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.018em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#profissionais-lista .professional-specialty {
    margin: 0 !important;
    font-family: "Manrope", Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
}

#profissionais-lista .professional-contact {
    margin-top: 5px !important;
    font-family: "Manrope", Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.004em !important;
}

#profissionais-lista .professional-actions {
    margin-left: 8px !important;
    flex: 0 0 auto !important;
}

#profissionais-lista .professional-actions .status,
#profissionais-lista .professional-actions .badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

#profissionais-lista .btn-excluir-profissional {
    font-size: 17px !important;
    font-weight: 500 !important;
}

@media (max-width: 600px) {
    #profissionais-lista .professional-name {
        white-space: normal !important;
    }

    #profissionais-lista .professional-contact {
        font-size: 10.5px !important;
    }
}

/* =====================================================================
   PADRÃO VISUAL OFICIAL — BASEADO EM styles(4).css
   Fonte: DM Sans + Manrope | Paleta: laranja, preto, cinza e branco.
   Camada final de override para unificar todas as páginas do CRM.
   ===================================================================== */
:root {
    --orange: #f47721 !important;
    --orange-dark: #e16412 !important;
    --orange-soft: #fff1e8 !important;
    --ink: #171819 !important;
    --muted: #73777c !important;
    --line: #e9eaec !important;
    --card: #ffffff !important;
    --good: #318653 !important;
    --warn: #b56820 !important;
    --danger: #b83933 !important;

    --primary: #f47721 !important;
    --primary-dark: #e16412 !important;
    --primary-light: #fff1e8 !important;
    --primary-soft: #fff1e8 !important;
    --background: #f5f6f7 !important;
    --surface: #ffffff !important;
    --surface-soft: #fafafa !important;
    --text: #262626 !important;
    --text-secondary: #73777c !important;
    --text-light: #8a8d91 !important;
    --border: #e9eaec !important;
    --border-light: #f0f1f2 !important;
    --success: #318653 !important;
    --success-bg: #edf8f1 !important;
    --warning: #b56820 !important;
    --warning-bg: #fff4e8 !important;
    --danger-bg: #fff5f4 !important;
    --info: #f47721 !important;
    --info-bg: #fff1e8 !important;

    --av-orange: #f47721 !important;
    --av-orange-dark: #e16412 !important;
    --av-orange-hover: #e16412 !important;
    --av-orange-soft: #fff1e8 !important;
    --av-orange-pale: #ffe1cc !important;
    --av-orange-light: #fff8f2 !important;
    --av-orange-border: #efb48d !important;
    --av-bg: #f5f6f7 !important;
    --av-bg-warm: #f5f6f7 !important;
    --av-surface: #ffffff !important;
    --av-surface-soft: #fafafa !important;
    --av-text: #262626 !important;
    --av-text-secondary: #73777c !important;
    --av-text-muted: #8a8d91 !important;
    --av-border: #e9eaec !important;
    --av-border-light: #f0f1f2 !important;
    --av-green: #318653 !important;
    --av-green-bg: #edf8f1 !important;
    --av-blue: #f47721 !important;
    --av-blue-bg: #fff1e8 !important;
    --av-lilac: #e16412 !important;
    --av-lilac-bg: #fff3eb !important;
    --av-yellow: #b56820 !important;
    --av-yellow-bg: #fff4e8 !important;
    --av-rose: #b83933 !important;
    --av-rose-bg: #fff5f4 !important;

    --font-ui: 'DM Sans', Arial, sans-serif !important;
    --ui-vivo-font: 'DM Sans', Arial, sans-serif !important;
}

html,
body,
button,
input,
select,
textarea,
table,
p,
span,
a,
div,
label,
th,
td,
small,
strong,
b {
    font-family: 'DM Sans', Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.top-title,
.card-title,
.panel-title,
.panel-header h2,
.modal-title,
.dialog-head h2,
.professional-name,
.service-name,
.client-name,
.metric-value,
.metric-card > strong,
.logo-title,
.logo-text strong,
.brand-mark {
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
}

html,
body {
    background: #f5f6f7 !important;
    color: #262626 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

body,
.app,
.main-layout,
.main-area,
main,
main.main,
.page-content,
.content {
    background: #f5f6f7 !important;
    color: #262626 !important;
}

/* SIDEBAR — exatamente na linguagem escura do arquivo de referência */
.sidebar {
    background: #171819 !important;
    color: #f6f6f6 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

.sidebar .logo,
.sidebar-menu,
.sidebar .menu,
.sidebar-footer {
    background: transparent !important;
    border-color: rgba(255,255,255,.06) !important;
}

.sidebar .logo-title,
.sidebar .logo-text strong,
.sidebar .profile-name,
.sidebar .access-card strong,
.sidebar .access-card-title,
.sidebar .sidebar-access strong {
    color: #f6f6f6 !important;
    font-weight: 700 !important;
}

.sidebar .logo-subtitle,
.sidebar .logo-text > span,
.sidebar .menu-label,
.sidebar .profile-status,
.sidebar .profile-info span,
.sidebar .access-card span,
.sidebar .access-card-text,
.sidebar .sidebar-access span,
.sidebar .sidebar-access p {
    color: #777b7e !important;
}

.sidebar .menu-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
}

.sidebar .menu-item {
    background: transparent !important;
    color: #bfc1c3 !important;
    border-color: transparent !important;
    border-radius: 9px !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
}

.sidebar .menu-item:hover {
    background: #252729 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: none !important;
}

.sidebar .menu-item.active,
.sidebar .menu-item.active:hover {
    background: #33271f !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.sidebar .menu-icon,
.sidebar .access-icon,
.sidebar .check-icon {
    color: #93979a !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.sidebar .menu-item.active .menu-icon,
.sidebar .menu-item.active .menu-text {
    color: #f47721 !important;
}

.sidebar .logo-icon,
.sidebar .logo-mark,
.sidebar .profile-avatar {
    background: #f47721 !important;
    color: #ffffff !important;
    border-color: #f47721 !important;
    box-shadow: none !important;
}

.sidebar .menu-badge,
.sidebar .notification-count {
    background: #f47721 !important;
    color: #ffffff !important;
    border: 0 !important;
}

.sidebar .access-card,
.sidebar .sidebar-access,
.sidebar .profile-mini,
.sidebar .profile-more {
    background: #202224 !important;
    color: #f6f6f6 !important;
    border-color: #303235 !important;
    box-shadow: none !important;
}

/* TOPBAR */
.topbar,
header.topbar {
    background: #ffffff !important;
    color: #262626 !important;
    border-bottom: 1px solid #e9eaec !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.topbar .breadcrumb,
.crumb,
.breadcrumb,
.page-subtitle,
.card-subtitle,
.panel-subtitle,
.panel-sub,
.description,
.metric-detail,
.metric-note,
.metric-card > p,
.empty-state p,
.professional-specialty,
.professional-contact,
.service-description,
.client-detail {
    color: #73777c !important;
}

/* TÍTULOS */
.page-title,
.page-head h1,
.top-title,
.card-title,
.panel h2,
.panel-header h2,
.dashboard-column .card-title,
.clients-panel h2,
.dialog-head h2,
.modal-title,
.empty-state h3,
.professional-name,
.service-name,
.client-name {
    color: #171819 !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}

.page-title,
.page-head h1,
.dialog-head h2 {
    font-weight: 800 !important;
}

/* CARDS E PAINÉIS */
.card,
.panel,
.metric,
.metric-card,
.service-card,
.professional-card,
.professional-item,
.client-card,
.clients-panel,
.chart-card,
.dashboard-card,
.schedule-card,
.appointment-card,
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment,
.services-filters,
.filters-card,
.form-card,
.settings-card,
.table-card {
    background: #ffffff !important;
    color: #262626 !important;
    border: 1px solid #e9eaec !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(32,33,36,.02) !important;
}

.card:hover,
.panel:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.professional-item:hover,
.client-card:hover,
.calendar-appointment:hover,
.calendar-day-cell:hover {
    border-color: #efb48d !important;
    box-shadow: 0 8px 20px rgba(244,119,33,.08) !important;
}

.metric-card::after {
    background: #f47721 !important;
    opacity: 1 !important;
}

.metric-icon,
.empty-icon,
.service-summary-icon,
.calendar-empty .empty-icon,
.auth-page .topo .logo,
.crm-lock-notice-icon {
    background: #fff1e8 !important;
    color: #f47721 !important;
    border-color: #f3ddcd !important;
    box-shadow: none !important;
}

.metric-value,
.metric-card > strong,
.metric-card .value,
.metric-card .number,
.chart-value,
.kpi-value,
.stat-value {
    color: #171819 !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    text-shadow: none !important;
}

/* BOTÕES */
.btn,
button,
a.btn,
.button,
.btn-primary,
.primary-button,
.btn-secondary,
.btn-outline,
.secondary-button,
.btn-entrar,
.btn-criar,
.auth-page .btn,
.crm-lock-btn,
.calendar-view-options .btn,
.small-action {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.btn-primary,
.primary-button,
.button-primary,
.btn-entrar,
.btn-criar,
.auth-page .btn {
    background: #f47721 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #f47721 !important;
    box-shadow: 0 4px 12px rgba(244,119,33,.16) !important;
}

.btn-primary:hover,
.primary-button:hover,
.button-primary:hover,
.btn-entrar:hover,
.btn-criar:hover,
.auth-page .btn:hover {
    background: #e16412 !important;
    border-color: #e16412 !important;
    filter: none !important;
}

.btn-secondary,
.btn-outline,
.secondary-button,
.button-muted,
.crm-lock-btn,
.calendar-view-options .btn,
.small-action {
    background: #ffffff !important;
    color: #54575b !important;
    border: 1px solid #e9eaec !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.secondary-button:hover,
.button-muted:hover,
.crm-lock-btn:hover,
.calendar-view-options .btn:hover,
.small-action:hover {
    background: #f6f7f8 !important;
    color: #262626 !important;
    border-color: #e0e2e4 !important;
    filter: none !important;
}

.btn-danger,
.btn-danger-outline,
.button-danger {
    color: #b83933 !important;
    background: #fff5f4 !important;
    border-color: #f2d8d5 !important;
}

/* Remove símbolos automáticos inseridos por versões anteriores */
.btn-primary::before,
.primary-button::before,
.btn-entrar::before,
.btn-criar::before,
.auth-page .btn::before,
a.btn-primary::before,
button.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.secondary-button::before,
.crm-lock-btn::before,
.calendar-view-options .btn::before {
    content: none !important;
    display: none !important;
}

/* BOTÕES DE ÍCONE */
.icon-button,
.btn-icon,
.topbar .btn-icon,
.topbar .icon-button,
.notification-button {
    background: #fff1e8 !important;
    color: #f47721 !important;
    border: 1px solid #f3ddcd !important;
    box-shadow: none !important;
}

.icon-button:hover,
.btn-icon:hover,
.topbar .btn-icon:hover,
.topbar .icon-button:hover,
.notification-button:hover {
    background: #ffe6d5 !important;
    color: #e16412 !important;
    border-color: #efb48d !important;
}

/* FORMULÁRIOS E FILTROS */
input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.search,
.select,
.search-box input,
.global-search input {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dedfe1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus,
.search:focus,
.select:focus {
    border-color: #ee9e69 !important;
    box-shadow: 0 0 0 3px rgba(244,119,33,.08) !important;
    outline: 0 !important;
}

input::placeholder,
textarea::placeholder {
    color: #96999d !important;
}

label,
.form-label,
.field label,
.field legend {
    color: #53575b !important;
    font-weight: 700 !important;
}

/* TABELAS */
.table,
.clients-table,
.data-table {
    background: #ffffff !important;
    color: #262626 !important;
}

.table th,
.clients-table th,
.data-table th,
thead th {
    color: #85898e !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e9eaec !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
}

.table td,
.clients-table td,
.data-table td,
tbody td {
    color: #262626 !important;
    background: #ffffff !important;
    border-bottom-color: #f0f1f2 !important;
}

.table tbody tr:hover td,
.clients-table tbody tr:hover td,
.data-table tbody tr:hover td {
    background: #fffaf6 !important;
}

/* STATUS / BADGES */
.status,
.status-badge,
.badge,
.appointment-status,
.pill {
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}

.status-success,
.status-confirmed,
.badge-success,
.status-completed,
.badge-completed,
.appointment-status.is-done,
[data-status="completed"],
[data-status="success"] {
    background: #edf8f1 !important;
    color: #318653 !important;
    border-color: #d7ebdf !important;
}

.status-warning,
.status-pending,
.badge-warning,
.status-ongoing,
.badge-ongoing,
[data-status="ongoing"],
[data-status="pending"] {
    background: #fff4e8 !important;
    color: #b56820 !important;
    border-color: #f3ddcd !important;
}

.status-info,
.badge-info,
.appointment-status.is-scheduled,
.status-active,
.badge-active {
    background: #fff1e8 !important;
    color: #e16412 !important;
    border-color: #efb48d !important;
}

.status-danger,
.status-cancelled,
.badge-danger,
.appointment-status.is-cancelled,
[data-status="cancelled"],
[data-status="canceled"] {
    background: #fff5f4 !important;
    color: #b83933 !important;
    border-color: #f2d8d5 !important;
}

.status-neutral,
.badge-neutral {
    background: #f3f4f5 !important;
    color: #65696d !important;
    border-color: #e9eaec !important;
}

/* AUTENTICAÇÃO */
body.auth-page,
.login-page,
.cadastro-page,
.reset-page {
    background: #f5f6f7 !important;
    color: #262626 !important;
}

.login-container,
.cadastro-container,
.reset-page .container,
.auth-card,
.crm-auth-card {
    background: #ffffff !important;
    border: 1px solid #e9eaec !important;
    box-shadow: 0 14px 38px rgba(23,24,25,.08) !important;
}

.login-page .logo,
.auth-page .topo {
    background: #171819 !important;
    color: #ffffff !important;
}

.login-page .logo h1,
.login-page .logo h2,
.login-page .logo p,
.auth-page .topo h1,
.auth-page .topo p,
.auth-page .topo .subtitulo {
    color: #ffffff !important;
}

.mostrar-senha,
.mostrar,
.recuperar-senha button,
.login a,
.cadastro a,
.voltar a {
    color: #e16412 !important;
}

/* CALENDÁRIO */
.calendar-week-column,
.calendar-day-cell,
.calendar-appointment,
.calendar-day-view {
    background: #ffffff !important;
    color: #262626 !important;
    border-color: #e9eaec !important;
}

.calendar-week-title,
.calendar-day-view-title {
    color: #171819 !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
}

.calendar-view-options .calendar-view-active,
.calendar-view-active {
    background: #f47721 !important;
    color: #ffffff !important;
    border-color: #f47721 !important;
}

.calendar-toast[data-tipo="success"] {
    background: #edf8f1 !important;
    color: #318653 !important;
    border: 1px solid #d7ebdf !important;
}

.calendar-toast[data-tipo="error"] {
    background: #fff5f4 !important;
    color: #b83933 !important;
    border: 1px solid #f2d8d5 !important;
}

/* ACESSO BLOQUEADO */
#crm-bloqueio-overlay {
    --lock-orange: #f47721 !important;
    --lock-orange-strong: #e16412 !important;
    --lock-orange-soft: #fff1e8 !important;
    --lock-green: #318653 !important;
    --lock-green-strong: #277848 !important;
    --lock-bg: #f5f6f7 !important;
    --lock-panel: #ffffff !important;
    --lock-line: #e9eaec !important;
    --lock-text: #262626 !important;
    --lock-muted: #73777c !important;
    background: #f5f6f7 !important;
    color: #262626 !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
}

#crm-bloqueio-overlay .crm-lock-card,
#crm-bloqueio-overlay .crm-lock-brand-area {
    background: #ffffff !important;
    border-color: #e9eaec !important;
}

#crm-bloqueio-overlay .crm-lock-title {
    color: #171819 !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
    font-weight: 800 !important;
}

#crm-bloqueio-overlay .crm-lock-subtitle,
#crm-bloqueio-overlay .crm-lock-label {
    color: #73777c !important;
}

#crm-bloqueio-overlay .crm-lock-value,
#crm-bloqueio-overlay .crm-lock-status {
    color: #262626 !important;
}

#crm-bloqueio-overlay .crm-lock-notice {
    background: #fff8f2 !important;
    color: #6f5746 !important;
    border-color: #f3ddcd !important;
}

/* ESTADO DE CARREGAMENTO DA AUTENTICAÇÃO */
html.crm-auth-pending body::before {
    background: rgba(245,246,247,.96) !important;
}

html.crm-auth-pending body::after {
    background: #ffffff !important;
    color: #e16412 !important;
    border-color: #efb48d !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    box-shadow: 0 8px 22px rgba(23,24,25,.08) !important;
}

/* CARD PROFISSIONAL — preserva ajuste pontual anterior */
#profissionais-lista .professional-avatar {
    background: #fff1e8 !important;
    color: #f47721 !important;
    border-color: #f3ddcd !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
}

#profissionais-lista .professional-name {
    color: #171819 !important;
    font-family: Manrope, 'DM Sans', Arial, sans-serif !important;
}

#profissionais-lista .professional-specialty,
#profissionais-lista .professional-contact {
    color: #73777c !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
}

#profissionais-lista .btn-excluir-profissional {
    background: #ffffff !important;
    color: #65696d !important;
    border-color: #e9eaec !important;
}

#profissionais-lista .btn-excluir-profissional:hover {
    background: #fff5f4 !important;
    color: #b83933 !important;
    border-color: #f2d8d5 !important;
}

/* Reduz movimento excessivo: mesmo comportamento limpo do styles(4).css */
.btn:hover,
button:hover,
a.btn:hover,
.card:hover,
.metric-card:hover,
.service-card:hover,
.professional-card:hover,
.professional-item:hover,
.client-card:hover {
    filter: none !important;
}



/* =========================================================
   AJUSTE FINAL — SEM AZUL + AVISO DO DASHBOARD REMOVIDO
   Pedido: todo azul visual passa para o laranja oficial.
   ========================================================= */
:root {
    --primary: #f47721 !important;
    --primary-dark: #e16412 !important;
    --primary-light: #fff1e8 !important;
    --primary-soft: #fff1e8 !important;
    --info: #f47721 !important;
    --info-bg: #fff1e8 !important;
    --av-blue: #f47721 !important;
    --av-blue-bg: #fff1e8 !important;
}

/* Remove somente o aviso de falha mostrado na Visão Geral.
   Feedbacks de sucesso/aviso continuam disponíveis. */
#dashboard-feedback.alert-danger,
#dashboard-feedback.alert-error {
    display: none !important;
}

/* Azul dos títulos/links informativos vira laranja. */
.eyebrow,
.page-eyebrow,
.page-kicker,
.section-kicker,
.topbar a,
.panel-link,
.quick-action,
.link,
a.link,
.text-info,
.status-info,
.badge-info {
    color: #e16412 !important;
}

/* Cards que possuíam regras azuis de alta especificidade. */
.metric-card:nth-child(1),
.metric-card:nth-child(2),
.metric-card:nth-child(3),
.metric-card:nth-child(4),
.metric-card:nth-child(5),
.metric-card:nth-child(6) {
    border-color: #e9eaec !important;
}

.metric-card:nth-child(1)::after,
.metric-card:nth-child(2)::after,
.metric-card:nth-child(3)::after,
.metric-card:nth-child(4)::after,
.metric-card:nth-child(5)::after,
.metric-card:nth-child(6)::after {
    background: #f47721 !important;
}

.metric-card:nth-child(1) .metric-icon,
.metric-card:nth-child(2) .metric-icon,
.metric-card:nth-child(3) .metric-icon,
.metric-card:nth-child(4) .metric-icon,
.metric-card:nth-child(5) .metric-icon,
.metric-card:nth-child(6) .metric-icon,
.metric-card.clients .metric-icon,
.metric-card.client .metric-icon,
.metric-card.professionals .metric-icon,
.metric-card.people .metric-icon,
.metric-card.attendimentos .metric-icon,
.metric-card.appointments .metric-icon,
.metric-card.agendamentos .metric-icon,
.metric-card.services .metric-icon {
    color: #f47721 !important;
    background: #fff1e8 !important;
    border-color: #efb48d !important;
}

/* Card de Clientes: remove especificamente o preenchimento azul observado. */
.metric-card.clients,
.metric-card.client,
.metric-card[data-metric="clientes"],
.metric-card[data-type="clientes"] {
    background: #fff1e8 !important;
    border-color: #efb48d !important;
}

/* Ícones, badges, botões e controles que antes herdavam azul. */
.sidebar .menu-badge,
.sidebar .notification-count,
.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
.btn-icon,
.icon-button,
.metric-icon,
.empty-icon {
    color: #f47721 !important;
    border-color: #efb48d !important;
}

.sidebar .menu-badge,
.sidebar .notification-count {
    background: #f47721 !important;
    color: #fff !important;
}

.notification-button,
.topbar .btn-icon,
.topbar .icon-button,
.btn-icon,
.icon-button,
.empty-icon {
    background: #fff1e8 !important;
}

/* Gráficos e elementos SVG/linhas. */
.chart-bar,
.bar,
.revenue-bar,
.sales-bar,
[class*="chart-bar"],
.chart-dot,
.legend-dot,
.chart-point,
.progress-fill {
    background: #f47721 !important;
    border-color: #f47721 !important;
}

.chart-line,
.line,
.revenue-line,
.sales-line,
svg .chart-line,
svg .line {
    stroke: #f47721 !important;
}

/* Foco dos campos acompanha o laranja, nunca azul. */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus,
.search:focus,
.select:focus {
    border-color: #ee9e69 !important;
    box-shadow: 0 0 0 3px rgba(244,119,33,.08) !important;
}


/* =========================================================
   AJUSTE FINAL SOLICITADO — TIPOGRAFIA PRETA NA ÁREA PRINCIPAL
   Não altera sidebar, ícones, fundos, cards, botões primários ou layout.
   ========================================================= */

/* Títulos e cabeçalhos da área principal */
.main-area .page-title,
.main-area .page-header h1,
.main-area .page-head h1,
.main-area .top-title,
.main-area .card-title,
.main-area .panel-header h2,
.main-area .panel-header h3,
.main-area .card-header h2,
.main-area .card-header h3,
.main-area .dashboard-column .card-title,
.main-area .clients-panel h2,
.main-area .section-title,
.main-area .modal-title,
.main-area .calendar-title,
.main-area .calendar-week-title,
.main-area .calendar-day-view-title,
.main-area .calendar-day-title,
.main-area .empty-state h3,
.main-area .empty-title,
main .page-title,
main .page-header h1,
main .page-head h1,
main .top-title,
main .card-title,
main .panel-header h2,
main .panel-header h3,
main .card-header h2,
main .card-header h3,
main .dashboard-column .card-title,
main .clients-panel h2,
main .section-title,
main .modal-title,
main .calendar-title,
main .calendar-week-title,
main .calendar-day-view-title,
main .calendar-day-title,
main .empty-state h3,
main .empty-title {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Números, nomes e informações principais */
.main-area .metric-value,
.main-area .metric-card > strong,
.main-area .metric-card .value,
.main-area .metric-card .number,
.main-area .chart-value,
.main-area .kpi-value,
.main-area .stat-value,
.main-area .professional-name,
.main-area .professional-card .name,
.main-area .service-name,
.main-area .service-card .name,
.main-area .client-name,
.main-area .client-card .name,
.main-area .client-item .client-name,
.main-area .appointment-client,
.main-area .appointment-item .client-name,
.main-area .appointment-item .appointment-client,
.main-area .professional-info strong,
.main-area .professional-info .professional-name,
main .metric-value,
main .metric-card > strong,
main .metric-card .value,
main .metric-card .number,
main .chart-value,
main .kpi-value,
main .stat-value,
main .professional-name,
main .professional-card .name,
main .service-name,
main .service-card .name,
main .client-name,
main .client-card .name,
main .client-item .client-name,
main .appointment-client,
main .appointment-item .client-name,
main .appointment-item .appointment-client,
main .professional-info strong,
main .professional-info .professional-name {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Descrições, labels e textos auxiliares */
.main-area .page-description,
.main-area .page-header p,
.main-area .page-head p,
.main-area .card-subtitle,
.main-area .panel-header p,
.main-area .panel-sub,
.main-area .panel-subtitle,
.main-area .metric-note,
.main-area .metric-label,
.main-area .metric-top > span,
.main-area .metric-detail,
.main-area .metric-card > p,
.main-area .description,
.main-area .professional-role,
.main-area .professional-contact,
.main-area .service-description,
.main-area .client-contact,
.main-area .appointment-service,
.main-area .appointment-professional,
.main-area .appointment-date,
.main-area .appointment-time,
.main-area .empty-state p,
.main-area .empty-state small,
.main-area .calendar-day-empty,
main .page-description,
main .page-header p,
main .page-head p,
main .card-subtitle,
main .panel-header p,
main .panel-sub,
main .panel-subtitle,
main .metric-note,
main .metric-label,
main .metric-top > span,
main .metric-detail,
main .metric-card > p,
main .description,
main .professional-role,
main .professional-contact,
main .service-description,
main .client-contact,
main .appointment-service,
main .appointment-professional,
main .appointment-date,
main .appointment-time,
main .empty-state p,
main .empty-state small,
main .calendar-day-empty {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Tabelas */
.main-area table th,
.main-area table td,
.main-area .table th,
.main-area .table td,
.main-area .clients-table th,
.main-area .clients-table td,
main table th,
main table td,
main .table th,
main .table td,
main .clients-table th,
main .clients-table td {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Campos e filtros: somente cor das letras */
.main-area input,
.main-area select,
.main-area textarea,
.main-area .form-control,
.main-area .form-input,
.main-area .form-select,
.main-area label,
main input,
main select,
main textarea,
main .form-control,
main .form-input,
main .form-select,
main label,
.topbar input,
.topbar select {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Links e botões secundários que antes tinham texto laranja */
.main-area .btn-secondary,
.main-area .btn-outline,
.main-area .secondary-button,
.main-area .quick-action,
.main-area .panel-link,
main .btn-secondary,
main .btn-outline,
main .secondary-button,
main .quick-action,
main .panel-link {
    color: #171819 !important;
    -webkit-text-fill-color: #171819 !important;
}

/* Garante que a sidebar fique exatamente como estava */
.sidebar,
.sidebar * {
    -webkit-text-fill-color: initial;
}