/* ============================================================
   HelpDesk — pele Applet (2026-09, v3 preta)
   Só cores e logo, para o HelpDesk seguir a identidade do site
   (design/DIRECAO-v3.md): a marca é preta — primário = preto da logo,
   neutros quentes, cabeçalho preto com a logo branca. Estrutura,
   tipografia e layout ficam como estão. Carregado por último (depois de
   base/van/tecnico/cliente).
   ============================================================ */

/* Tokens */
#hd-app {
    --hd-primary:         #141210;   /* preto da logo */
    --hd-primary-hover:   #2E2A26;
    --hd-primary-soft:    #EDEBE7;   /* primário a ~7% sobre o branco */
    --hd-on-primary:      #FFFFFF;
    --hd-primary-dark:    #F5F3EE;   /* o "primário" sobre fundo escuro é a tinta clara */
    --hd-dark:            #141210;   /* preto quente do site */
    --hd-white:           #FFFFFF;
    --hd-border:          #DAD7D1;
    --hd-surface:         #F6F6F6;   /* fundo da área logada: quase branco, neutro — o bege
                                        quente do site não combinava com as tabelas brancas
                                        (pedido do cliente); o login mantém o bege */
    --hd-text:            #141210;
    --hd-text-muted:      #5C5854;
    --hd-text-light:      #7A756F;
    --hd-shadow-sm:       0 1px 2px rgba(27, 25, 23, .05);
    --hd-shadow:          0 2px 8px rgba(27, 25, 23, .08);
    --hd-shadow-lg:       0 16px 32px -16px rgba(27, 25, 23, .25);

    --hd-success:         #1F9D55;
    --hd-success-light:   #E4F5EA;
    --hd-danger:          #C0281E;
    --hd-danger-light:    #FBE6E3;
    --hd-warning:         #B8730A;
    --hd-warning-light:   #FBEFD6;
    --hd-info:            #1B4F9C;
    --hd-info-light:      #E6EEF9;
    --hd-secondary:       #7A756F;
    --hd-secondary-light: #EFEFEE;
}

body.hd-standalone { background: #F6F6F6; }

/* Onde a base coloca "primário com texto escuro", o preto pede texto branco */
#hd-app .hd-btn-primary,
#hd-app .hd-btn-primary:hover:not(:disabled),
#hd-app .hd-badge-primary,
#hd-app .hd-stat-primary .hd-stat-icon,
#hd-app .hd-tab-btn.active,
#hd-app .hd-expand-btn:hover:not(.disabled),
#hd-app .hd-cliente-logo-icon,
#hd-app .hd-servico-icon,
#hd-app .hd-login-hero-logo,
#hd-app .hd-login-logo-icon {
    color: var(--hd-on-primary);
}

#hd-app .hd-login-hero-logo svg,
#hd-app .hd-login-logo-icon svg { fill: var(--hd-on-primary); }

/* Cabeçalho preto: logo branca, ícones em cinza claro; o item ativo inverte
   (branco com texto preto) */
#hd-app .hd-header { background: var(--hd-dark); box-shadow: none; border-bottom: 1px solid #2E2A26; }
#hd-app .hd-brand { color: #F5F3EE; }
#hd-app .hd-brand img { max-height: 26px; max-width: 140px; }
#hd-app .hd-nav-link { color: #B8B2A9; }
#hd-app .hd-nav-link:hover { color: #F5F3EE; background: rgba(255, 255, 255, .06); }
#hd-app .hd-nav-link svg { color: #B8B2A9; }
#hd-app .hd-header-nav .hd-nav-link path[stroke="#000000"],
#hd-app .hd-header-nav .hd-nav-link circle[stroke="#000000"],
#hd-app .hd-header-nav .hd-nav-link rect[stroke="#000000"] { stroke: #B8B2A9 !important; }
#hd-app .hd-header-nav .hd-nav-link path[fill="#000000"],
#hd-app .hd-header-nav .hd-nav-link circle[fill="#000000"] { fill: #B8B2A9 !important; }
#hd-app .hd-nav-link.active { background: var(--hd-primary-dark); color: #141210; }
#hd-app .hd-nav-link.active svg,
#hd-app .hd-nav-link.active path,
#hd-app .hd-nav-link.active circle,
#hd-app .hd-nav-link.active rect { color: #141210; stroke: #141210 !important; fill: #141210; }
#hd-app .hd-nav-link.active path[fill="none"] { fill: none; }
#hd-app .hd-nav-badge { background: var(--hd-primary-dark); color: #141210; }
#hd-app .hd-notif-btn { color: #B8B2A9; }
#hd-app .hd-notif-btn:hover { color: #F5F3EE; }
#hd-app .hd-avatar { background: var(--hd-primary-dark); color: #141210; border-color: var(--hd-primary-dark); }

/* Elementos escuros com acento amarelo viram preto + tinta clara */
#hd-app .hd-filho-tag,
#hd-app .hd-expand-btn.expanded { background: var(--hd-dark); color: var(--hd-primary-dark); }
#hd-app .hd-alert-applet { background: var(--hd-primary-soft); color: var(--hd-text); border-color: #DAD7D1; border-left-color: var(--hd-primary); }

/* Foco e seleção com o acento */
#hd-app .hd-input:focus,
#hd-app .hd-select:focus,
#hd-app .hd-textarea:focus,
#hd-app input:focus,
#hd-app select:focus,
#hd-app textarea:focus {
    border-color: var(--hd-primary);
    box-shadow: 0 0 0 3px rgba(20, 18, 16, .12);
}

/* ------------------------------------------------------------
   Instalações do EDI Agente aguardando liberação (dashboard)
   ------------------------------------------------------------ */
#hd-app .hd-inst-alert {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid #DAD7D1;
    border-left: 4px solid var(--hd-primary);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-sm);
}

#hd-app .hd-inst-head { display: flex; align-items: flex-start; gap: 12px; }

#hd-app .hd-inst-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--hd-radius);
    background: var(--hd-primary-soft);
    color: var(--hd-primary);
}

#hd-app .hd-inst-title { font-size: 15px; font-weight: 600; color: var(--hd-text); }
#hd-app .hd-inst-sub { margin-top: 2px; font-size: 12.5px; color: var(--hd-text-muted); }

#hd-app .hd-inst-list { margin-top: 12px; border-top: 1px solid var(--hd-border); }

#hd-app .hd-inst-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #ECEAE5;
}

#hd-app .hd-inst-item:last-child { border-bottom: 0; }

#hd-app .hd-inst-apelido { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#hd-app .hd-inst-apelido strong { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: .02em; }

#hd-app .hd-inst-cxa {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--hd-secondary-light);
    border: 1px solid var(--hd-border);
    font-size: 11px;
    color: var(--hd-text-muted);
}

#hd-app .hd-inst-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 12px; color: var(--hd-text-light); }

@media (max-width: 640px) {
    #hd-app .hd-inst-item { flex-direction: column; align-items: stretch; }
    #hd-app .hd-inst-item .hd-btn { width: 100%; justify-content: center; }
}

/* Login: ilustração recolorida (amarelo da marca antiga → cinza quente; o
   preto fica para os objetos, a cor só nos pontos de estado) */
#hd-app .hd-login-illustration [fill="#fcdd45"] { fill: #A9A39A; }
#hd-app .hd-login-illustration [stroke="#fcdd45"] { stroke: #A9A39A; }
#hd-app .hd-login-illustration [fill="#242424"] { fill: #141210; }
#hd-app .hd-login-right { background: #F1EFEA; }
#hd-app .hd-login-logo-img.hd-login-logo-mark { width: 56px; height: 56px; max-height: none; }
#hd-app .hd-login-hero-logo-img img.hd-login-logo-mark { width: 88px; height: 88px; max-height: none; }