/* =====================================================================
   MADEIRA THEME
   Paleta extraída diretamente do logotipo oficial "madeira" (cores reais,
   medidas pixel a pixel a partir do logótipo fornecido):

   Vermelho      #E73138
   Vermelho esc. #B02224
   Laranja       #F07F39
   Verde sálvia  #9DCFAE
   Verde escuro  #008166
   Azul          #3475BA
   Turquesa      #52BFD0
   Roxo/lavanda  #8782BD
   Azul-marinho  #202C54
   Rosa pálido   #EFC9D5
   Amarelo       #F8D944

   COMO USAR:
   Carregar este ficheiro DEPOIS do app.css, ex:
   <link rel="stylesheet" href="app.css" />
   <link rel="stylesheet" href="madeira-theme.css" />

   Nota: os seletores com */ /* ⚠️ ajustar nome da classe */ /* assinalam
   elementos que vi na captura de ecrã mas cujo nome exato de classe não
   está confirmado no app.css — confirma/ajusta esses nomes no teu markup.
   ===================================================================== */

:root {
    /* Cores oficiais do logótipo */
    --madeira-navy:        #202C54; /* azul-marinho - headings, navbar, texto forte */
    --madeira-blue:        #3475BA; /* azul - links, botões primários */
    --madeira-turquoise:   #52BFD0; /* turquesa - acentos secundários */
    --madeira-red:         #E73138; /* vermelho - CTA principal, destaques */
    --madeira-red-dark:    #B02224; /* vermelho escuro - hover/contraste */
    --madeira-orange:      #F07F39; /* laranja - acentos quentes (próximo do que já existia) */
    --madeira-green:       #008166; /* verde escuro - sucesso, natureza */
    --madeira-green-light: #9DCFAE; /* verde sálvia - fundos suaves */
    --madeira-purple:      #8782BD; /* roxo/lavanda - acento alternativo */
    --madeira-yellow:      #F8D944; /* amarelo - destaques pontuais */
    --madeira-pink:        #EFC9D5; /* rosa pálido - fundos suaves */

    /* Neutros de apoio (não vêm do logo, são para legibilidade) */
    --madeira-sand:        #F8F6F2; /* fundo claro neutro */
    --madeira-sand-dark:   #EDEAE3;
    --madeira-ink:         #1A2238; /* quase preto, ligeiramente azulado, p/ texto e dark mode */
    --madeira-white:       #FFFFFF;
}
/* ---------------------------------------------------------------------
   TIPOGRAFIA E BASE
   --------------------------------------------------------------------- */
html, body {
    background-color: var(--madeira-sand);
    color: var(--madeira-ink);
}

h1, h2, h3, h4, .tituloRef {
    color: var(--madeira-navy);
}

/* ---------------------------------------------------------------------
   NAVBAR / TOPO  (⚠️ ajustar nome da classe se não for .navbar)
   --------------------------------------------------------------------- */
.navbar {
    background-color: var(--madeira-white);
    border-bottom: 1px solid var(--madeira-sand-dark);
}

.navbar a,
.navbar .nav-link {
    color: var(--madeira-navy) !important;
}

    .navbar a:hover,
    .navbar .nav-link:hover {
        color: var(--madeira-red) !important;
    }

/* ---------------------------------------------------------------------
   LINKS
   --------------------------------------------------------------------- */
a, .btn-link, .linktext {
    color: var(--madeira-blue);
}

    a:hover, .btn-link:hover, .linktext:hover {
        color: var(--madeira-red-dark);
    }

/* ---------------------------------------------------------------------
   BOTÕES
   --------------------------------------------------------------------- */
.btn-primary {
    color: #fff;
    background-color: var(--madeira-blue);
    border-color: var(--madeira-blue);
}

    .btn-primary:hover {
        background-color: var(--madeira-navy);
        border-color: var(--madeira-navy);
    }

.btn-success {
    color: #fff;
    background-color: var(--madeira-green);
    border-color: var(--madeira-green);
}

    .btn-success:hover {
        background-color: #00664f;
        border-color: #00664f;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--madeira-turquoise);
}

/* Botão de destaque / CTA (vermelho do logo) — usar quando quiseres
   um botão que se destaque mais do que o azul/verde padrão */
.btn-madeira-accent {
    color: #fff;
    background-color: var(--madeira-red);
    border-color: var(--madeira-red);
}

    .btn-madeira-accent:hover {
        background-color: var(--madeira-red-dark);
        border-color: var(--madeira-red-dark);
    }

/* ---------------------------------------------------------------------
   CARTÕES (cidades / serviços / agenda)
   --------------------------------------------------------------------- */
.card,
.agenda-card,
.card-service {
    background-color: var(--madeira-white);
    border: 1px solid var(--madeira-sand-dark);
    border-left: 4px solid var(--madeira-orange);
}

.card .cidade-nome {
    color: var(--madeira-navy);
    font-weight: 600;
}

.info-secundaria,
.sublabel {
    color: var(--madeira-ink);
    opacity: 0.7;
}

/* Cartão "Adicionar Localização" / dashed (⚠️ ajustar se a classe for outra) */
.card.add-location,
.dashed-card {
    border: 2px dashed var(--madeira-orange);
    color: var(--madeira-red-dark);
}

/* ---------------------------------------------------------------------
   ABAS (tabs)
   --------------------------------------------------------------------- */
.tabContainer {
    border-bottom: var(--madeira-sand-dark) 2px solid;
}

.selectedTab {
    border-bottom: var(--madeira-orange) 2px solid;
    background-color: var(--madeira-sand);
    color: var(--madeira-navy);
}

.unselectedTab {
    border-bottom: var(--madeira-sand-dark) 2px solid;
    background-color: var(--madeira-white);
    color: var(--madeira-ink);
}

/* ---------------------------------------------------------------------
   CHAT / ASSISTENTE  (⚠️ confirmar nomes .chat-container / .chat-bubble)
   --------------------------------------------------------------------- */
.chat-container {
    border: 1px solid var(--madeira-orange);
    background-color: var(--madeira-white);
}

.chat-bubble.bot {
    background-color: var(--madeira-sand);
    color: var(--madeira-ink);
}

.chat-bubble.user {
    background-color: var(--madeira-blue);
    color: var(--madeira-white);
}

.input-container button,
.input-container .send-btn {
    color: var(--madeira-blue);
}

/* ---------------------------------------------------------------------
   TOGGLE / SWITCH
   --------------------------------------------------------------------- */
.toggle-switch.active {
    background-color: var(--madeira-green);
}

/* ---------------------------------------------------------------------
   ALERTAS
   --------------------------------------------------------------------- */
.alert-danger {
    background-color: var(--madeira-pink);
    color: var(--madeira-red-dark);
    border-color: var(--madeira-red);
}

/* ---------------------------------------------------------------------
   MODO ESCURO — tons escuros baseados no azul-marinho do logo
   --------------------------------------------------------------------- */
body.dark-mode {
    background-color: var(--madeira-ink);
    color: #EDE3D2;
}

    body.dark-mode .navbar,
    body.dark-mode .sidebar,
    body.dark-mode nav {
        background-color: var(--madeira-navy);
        color: #EDE3D2;
    }

    body.dark-mode .card,
    body.dark-mode .agenda-card,
    body.dark-mode .card-service,
    body.dark-mode .modal-content,
    body.dark-mode .chat-container,
    body.dark-mode .chat-bubble.bot {
        background-color: #242E50;
        color: #EDE3D2;
        border-color: var(--madeira-navy);
    }

    body.dark-mode .chat-bubble.user {
        background-color: var(--madeira-blue);
        color: #fff;
    }

    body.dark-mode .btn-primary {
        background-color: var(--madeira-blue);
        color: #fff;
    }

    body.dark-mode .btn-success {
        background-color: var(--madeira-green);
        color: #fff;
    }

    body.dark-mode a,
    body.dark-mode .linktext {
        color: var(--madeira-yellow);
    }

    body.dark-mode .selectedTab {
        border-bottom-color: var(--madeira-orange);
        background-color: var(--madeira-navy);
        color: var(--madeira-yellow);
    }

/* =====================================================================
   ADAPTAÇÕES PARA xRSConcierge_styles.css
   =====================================================================
   Este ficheiro CSS pertence a componentes Blazor com "CSS isolation":
   cada seletor original ganha automaticamente um atributo do tipo
   [b-xxxxxxxx] (ex.: .btn-primary[b-fomm6vl53s]). Isso torna esses
   seletores MAIS específicos do que uma classe simples (.btn-primary),
   pelo que — mesmo carregando este ficheiro depois — as cores definidas
   acima não conseguiriam "ganhar" a cascata sozinhas.

   Por isso, nesta secção (e só nesta secção) uso !important nas
   propriedades de cor/fundo/borda, para garantir que a paleta madeira
   é aplicada de forma consistente em todo o xRSConcierge, sem precisar
   de tocar no ficheiro original do Blazor.

   Os nomes de classe abaixo foram confirmados diretamente no ficheiro
   xRSConcierge_styles.css fornecido (sem ⚠️ — já não são suposições).
   ===================================================================== */

/* ---------------------------------------------------------------------
   COR DE AÇÃO PRINCIPAL (substitui o dourado #c0833B por azul madeira)
   --------------------------------------------------------------------- */
.btn-primary,
.agendar,
.editar,
.card-service .btn-primary,
table.table th,
.navbar-toggler,
.chat-bubble.user {
    background-color: var(--madeira-blue) !important;
    border-color: var(--madeira-blue) !important;
    color: #fff !important;
}

    .btn-primary:hover,
    .agendar:hover,
    .editar:hover {
        background-color: var(--madeira-navy) !important;
        border-color: var(--madeira-navy) !important;
    }

.btn-dia-selected {
    border-color: var(--madeira-blue) !important;
    color: var(--madeira-navy) !important;
}

.btn-dia {
    border-color: var(--madeira-sand-dark) !important;
}

.chat-container {
    border-color: var(--madeira-orange) !important;
}

/* ---------------------------------------------------------------------
   NAVBAR / MENU LATERAL / TOPO
   --------------------------------------------------------------------- */
.top-row,
.desktop-menu {
    background-color: var(--madeira-sand) !important;
}

.top-row a,
.top-row .btn-link,
.login-text,
.menu-label,
.desktop-menu span a,
.login-display,
.login-display button {
    color: var(--madeira-navy) !important;
}

    .top-row a:hover,
    .top-row .btn-link:hover,
    .login-display button:hover {
        color: var(--madeira-red) !important;
    }

.login-display button {
    border-color: var(--madeira-sand-dark) !important;
}

    .login-display button:hover {
        background-color: var(--madeira-sand) !important;
    }

/* Ícones do menu (home, agenda, entrar, sair, perfil) — aproxima os PNG/SVG
   monocromáticos ao azul-marinho do logo. Se o tom não ficar perfeito,
   é seguro remover este bloco sem afetar o resto do tema. */
.menu-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(25%) saturate(1800%) hue-rotate(196deg) brightness(90%) contrast(95%) !important;
}

/* ---------------------------------------------------------------------
   CARTÕES — SERVIÇOS, CIDADES, AGENDA
   --------------------------------------------------------------------- */
.agenda-card,
table.table .agenda-card {
    border-left-color: var(--madeira-orange) !important;
}

.card-service h3,
.cidade-nome,
.titulo {
    color: var(--madeira-navy) !important;
}

.small-addcard {
    color: var(--madeira-red-dark) !important;
    border-color: var(--madeira-orange) !important;
}

h2 {
    color: var(--madeira-green) !important;
    border-bottom-color: var(--madeira-green-light) !important;
}

/* ---------------------------------------------------------------------
   CHAT / BALÕES DE REFERÊNCIA
   --------------------------------------------------------------------- */
.chat-bubble.bot {
    background-color: var(--madeira-sand) !important;
    color: var(--madeira-ink) !important;
}

.chat-bubble.referencia {
    background-color: var(--madeira-pink) !important;
    color: var(--madeira-navy) !important;
    border-color: var(--madeira-purple) !important;
}

    .chat-bubble.referencia:hover {
        background-color: #f3dde6 !important; /* tom mais quente do rosa do logo */
    }

.chat-bubble.referencia.bot {
    background-color: var(--madeira-turquoise) !important;
    color: #fff !important;
}

.referencia {
    color: var(--madeira-green) !important;
    border-color: var(--madeira-green-light) !important;
}

    .referencia.destaque {
        border-color: var(--madeira-green) !important;
    }

.conteudo-referencia,
.tituloRef,
.tipo {
    color: var(--madeira-navy) !important;
}

.abrir-btn {
    background-color: var(--madeira-turquoise) !important;
    color: #fff !important;
}

    .abrir-btn:disabled {
        background-color: var(--madeira-sand-dark) !important;
        color: var(--madeira-ink) !important;
    }

.referencia-item:hover {
    background-color: var(--madeira-pink) !important;
}

/* ---------------------------------------------------------------------
   MODAIS
   --------------------------------------------------------------------- */
.modal-content {
    background-color: var(--madeira-white) !important;
    color: var(--madeira-ink) !important;
}

.modal-content h3,
.modal-content label {
    color: var(--madeira-navy) !important;
}

.modal-content select {
    border-color: var(--madeira-sand-dark) !important;
}

    .modal-content select:focus {
        border-color: var(--madeira-turquoise) !important;
    }

.btn-secondary,
.btn-secondary-white {
    background-color: var(--madeira-sand-dark) !important;
    color: var(--madeira-ink) !important;
}

    .btn-secondary:hover,
    .btn-secondary-white:hover {
        background-color: var(--madeira-sand) !important;
    }

/* ---------------------------------------------------------------------
   TABELAS
   --------------------------------------------------------------------- */
table.table tr:nth-child(even) {
    background-color: var(--madeira-sand-dark) !important;
}

/* ---------------------------------------------------------------------
   OUTROS BOTÕES
   --------------------------------------------------------------------- */
.btn-success {
    background-color: var(--madeira-green) !important;
    border-color: var(--madeira-green) !important;
    color: #fff !important;
}

.btn-ModoLista,
.btn-button2,
.btn-button3,
.btn-alternativo {
    border-color: var(--madeira-turquoise) !important;
    color: var(--madeira-navy) !important;
}

.botoes button.ativo {
    background-color: var(--madeira-orange) !important;
    border-color: var(--madeira-orange) !important;
    color: #fff !important;
}

    .botoes button:not(.ativo):hover {
        background-color: var(--madeira-sand) !important;
    }

.remover:hover {
    background-color: var(--madeira-red-dark) !important;
}

.custom-close:hover {
    background-color: var(--madeira-sand-dark) !important;
    color: var(--madeira-red) !important;
}

/* ---------------------------------------------------------------------
   ALERTAS (reforço para vencer a especificidade do Blazor)
   --------------------------------------------------------------------- */
.alert-danger {
    background-color: var(--madeira-pink) !important;
    color: var(--madeira-red-dark) !important;
    border-color: var(--madeira-red) !important;
}

/* ---------------------------------------------------------------------
   CALENDÁRIO (ConsultasVoo / Agenda)
   --------------------------------------------------------------------- */
.header-calendario,
.header-calendario button {
    background-color: var(--madeira-sand) !important;
    color: var(--madeira-navy) !important;
    border-color: var(--madeira-sand-dark) !important;
}

/* ---------------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------------- */
.footer {
    border-top-color: var(--madeira-sand-dark) !important;
}

    .footer .text {
        color: var(--madeira-ink) !important;
    }

/* ---------------------------------------------------------------------
   MODO ESCURO — reforço para componentes do xRSConcierge
   (as regras body.dark-mode já existentes acima têm especificidade
   suficiente para vencer o ficheiro do Blazor; aqui só acrescentamos
   os elementos que só existem no xRSConcierge)
   --------------------------------------------------------------------- */
body.dark-mode .chat-bubble.referencia {
    background-color: #2c2440;
    color: #f0e3ea;
    border-color: var(--madeira-purple);
}

body.dark-mode .chat-bubble.referencia.bot {
    background-color: #1d4e54;
    color: #e0f7f7;
}

body.dark-mode .referencia {
    background-color: #1d3b32;
    color: #cdeede;
    border-color: var(--madeira-green);
}

body.dark-mode .modal-content,
body.dark-mode .btn-secondary,
body.dark-mode .btn-secondary-white {
    background-color: #242E50;
    color: #EDE3D2;
}

body.dark-mode .top-row,
body.dark-mode .desktop-menu {
    background-color: var(--madeira-navy);
    color: #EDE3D2;
}

    body.dark-mode .top-row a,
    body.dark-mode .login-text,
    body.dark-mode .menu-label,
    body.dark-mode .desktop-menu span a {
        color: #EDE3D2;
    }