/* ==========================================================================
   Inoxtubo — tema moderno para o painel de staff do osTicket (scp/)
   Camada de sobreposição sobre scp/css/scp.css -- não substitui o ficheiro
   original, só reescreve cores, espaçamentos e comportamento responsivo.
   ========================================================================== */

:root {
    --ix-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --ix-primary: #0068a8;
    --ix-primary-dark: #00517f;
    --ix-primary-light: #e3f0fa;
    --ix-on-primary: #ffffff;

    --ix-bg: #eaeff4;
    --ix-surface: #ffffff;
    --ix-surface-alt: #f4f7fa;
    --ix-border: #dfe6ec;
    --ix-border-strong: #b9c4d0;
    --ix-text: #182230;
    --ix-text-muted: #5d6b7a;
    --ix-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08);
    --ix-radius: 8px;
    --ix-radius-sm: 5px;
}

:root[data-theme="dark"] {
    --ix-primary: #4fc3f7;
    --ix-primary-dark: #1c8ad1;
    --ix-primary-light: #123049;
    --ix-on-primary: #071620;
    --ix-primary-glow: 0 0 0 1px rgba(79, 195, 247, 0.5), 0 0 16px rgba(79, 195, 247, 0.35);

    --ix-bg: #080c11;
    --ix-surface: #161f29;
    --ix-surface-alt: #212d3a;
    --ix-border: #2c3944;
    --ix-border-strong: #56697d;
    --ix-text: #edf1f5;
    --ix-text-muted: #93a3b3;
    --ix-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* --- Base ------------------------------------------------------------- */

body, html {
    background: var(--ix-bg) !important;
    color: var(--ix-text) !important;
}

body {
    font-family: var(--ix-font) !important;
}

a, .link {
    color: var(--ix-primary) !important;
}

:root[data-theme="dark"] #content,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .tab_content,
:root[data-theme="dark"] table.list tbody td {
    color: var(--ix-text);
}

/* Campos de formulário: o CSS core força background:#fff a estes elementos,
   por isso em modo escuro é preciso repor também o fundo -- só trocar a cor
   do texto deixava-o quase invisível sobre fundo branco. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    color: var(--ix-text) !important;
    background: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
}

/* Cabeçalhos de secção dos formulários (.form_table th) e o texto de ajuda
   (em) por baixo dos campos: o core dá-lhes background/color fixos que
   ficam ilegíveis contra o texto claro herdado do body em modo escuro. */
:root[data-theme="dark"] .form_table th,
:root[data-theme="dark"] div.section-break {
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}

:root[data-theme="dark"] .form_table th em {
    color: var(--ix-text-muted) !important;
}

:root[data-theme="dark"] .settings_table td,
:root[data-theme="dark"] .form_table td {
    background: var(--ix-surface) !important;
    border-color: var(--ix-border) !important;
}

/* Diálogos/popups, tooltips, menu de filas, separadores (tabs), sidebar e
   outras caixas de conteúdo: o core dá-lhes fundos claros fixos (#fff,
   #f8f8f8, #eee, ...) sem cor de texto própria, por isso herdam o texto
   claro do body em modo escuro e ficam ilegíveis -- é o mesmo problema dos
   campos de formulário, só que espalhado por estas áreas. */
:root[data-theme="dark"] .dialog,
:root[data-theme="dark"] .dialog th,
:root[data-theme="dark"] .dialog .table td:not(:empty),
:root[data-theme="dark"] .tip_content,
:root[data-theme="dark"] .customQ-dropdown,
:root[data-theme="dark"] .customQ-dropdown ul li.subQ > ul,
:root[data-theme="dark"] .jb-overflowmenu-menu-primary .customQ-dropdown,
:root[data-theme="dark"] .jb-overflowmenu-menu-secondary .customQ-dropdown,
:root[data-theme="dark"] .jb-overflowmenu-menu-secondary,
:root[data-theme="dark"] .jb-overflowmenu .jb-overflowmenu-container,
:root[data-theme="dark"] ul.tabs li,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] #ticket_notes td,
:root[data-theme="dark"] #response_options > form,
:root[data-theme="dark"] .freetext-files,
:root[data-theme="dark"] #basic_search,
:root[data-theme="dark"] .thread-entry.system .header,
:root[data-theme="dark"] #breadcrumbs,
:root[data-theme="dark"] .ticket_info,
:root[data-theme="dark"] #ticket_actions,
:root[data-theme="dark"] tr.disabled td,
:root[data-theme="dark"] table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) {
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}

/* O <time> dentro de .thread-entry.system .header herda "a time {color:
   initial}" do core (preto), que ganha à cor clara da regra acima por ser
   uma regra direta -- mesma lógica de sempre. */
:root[data-theme="dark"] .thread-entry.system .header time,
:root[data-theme="dark"] .thread-entry.system .header a time {
    color: var(--ix-text) !important;
}

:root[data-theme="dark"] ul.tabs {
    background: var(--ix-bg) !important;
    border-color: var(--ix-border) !important;
}

:root[data-theme="dark"] ul.tabs li.active {
    background-color: var(--ix-surface) !important;
    color: var(--ix-primary) !important;
}

:root[data-theme="dark"] ul.tabs li a,
:root[data-theme="dark"] ul.tabs li.active a {
    color: inherit !important;
}

/* Cabeçalhos das mensagens da thread do ticket mantêm fundos pastel fixos
   de propósito (azul p/ mensagem do cliente, laranja p/ resposta, etc.);
   só precisam de texto escuro para continuarem legíveis em modo escuro. */
:root[data-theme="dark"] .thread-entry .header,
:root[data-theme="dark"] .thread-preview-entry .header {
    color: #1c2733 !important;
}

:root[data-theme="dark"] .customQ-dropdown li h4,
:root[data-theme="dark"] .customQ-dropdown li.top-level {
    background-color: var(--ix-bg) !important;
}

:root[data-theme="dark"] .type-icon {
    background-color: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
}

/* Herança não chega a estes: o core define `color` diretamente no próprio
   elemento (h3, .faded, ...), e uma regra que tem selector próprio ganha
   sempre à cor herdada de um antepassado -- mesmo que essa cor herdada
   tenha !important. Por isso o "color: var(--ix-text) !important" no body
   nunca chegava a estes textos, e ficavam sempre com a cor original clara
   (pensada para fundo branco) mesmo em modo escuro. Confirmado por
   auditoria de contraste real no /scp (dashboard, lista de tickets,
   detalhe do ticket, definições). */
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .tixTitle h3 {
    color: var(--ix-text) !important;
}

/* O título do ticket (.tixTitle h3) herda peso 300 (fino) do core -- para
   ser mesmo o elemento de maior hierarquia da página precisa de peso, não
   só de tamanho. Aplica-se nos dois temas. */
.tixTitle h3 {
    font-weight: 600 !important;
}

:root[data-theme="dark"] .faded {
    color: var(--ix-text-muted) !important;
}
:root[data-theme="dark"] .faded b,
:root[data-theme="dark"] .faded strong {
    color: var(--ix-text) !important;
}
:root[data-theme="dark"] .faded-more {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Cores de prioridade/etiquetas (coluna "Priority" da lista de tickets,
   destaque de linha "overdue", etc.) são geradas pelo PHP como
   background-color inline, configuráveis em Admin > Filas/Prioridades --
   assumem sempre um fundo claro. O CSS não consegue ler o valor inline
   para decidir a cor de texto, por isso força-se texto escuro sempre que
   houver um background inline dentro do conteúdo do painel. */
:root[data-theme="dark"] #content [style*="background-color"] {
    color: #1c2733 !important;
}

/* Dentro de um cabeçalho de mensagem da thread (fundo pastel fixo, ver
   .thread-entry .header acima) ou da zona de anexos, o .faded genérico
   (que agora usa --ix-text-muted, claro) fica ilegível -- aqui precisa de
   continuar escuro, tal como o resto do texto dessas caixas. Exclui
   .thread-entry.system: esse tipo não tem fundo pastel (fica com o fundo
   escuro normal via regra própria acima), por isso precisa do texto claro
   do tema, não escuro. */
:root[data-theme="dark"] .thread-entry:not(.system) .header .faded,
:root[data-theme="dark"] .thread-preview-entry .header .faded,
:root[data-theme="dark"] .thread-entry:not(.system) .header time,
:root[data-theme="dark"] .thread-entry:not(.system) .header a time,
:root[data-theme="dark"] .thread-entry:not(.system) .header .label-bare,
:root[data-theme="dark"] .thread-body .attachments,
:root[data-theme="dark"] .thread-body .attachments .faded {
    color: #1c2733 !important;
}

/* .label-bare (usado em pequenas anotações no cabeçalho da thread, ex.
   "Adicionar Colaborador em CC") é cinza claro sobre fundo pastel -- fraco
   demais mesmo no tema claro original; não é um problema só do modo
   escuro. */
.thread-entry:not(.system) .header .label-bare {
    color: #55606b !important;
}

/* Barras/avisos de estado (erro, aviso, sucesso, info, ticket caducado):
   mantêm sempre o fundo pastel de cor original -- só precisam de texto
   escuro para continuarem legíveis em modo escuro. */
:root[data-theme="dark"] #msg_info, :root[data-theme="dark"] .info-banner,
:root[data-theme="dark"] #msg_notice, :root[data-theme="dark"] .success-banner, :root[data-theme="dark"] .notice-banner,
:root[data-theme="dark"] #msg_warning, :root[data-theme="dark"] .warning-banner,
:root[data-theme="dark"] #msg_error, :root[data-theme="dark"] .error-banner,
:root[data-theme="dark"] #notice_bar, :root[data-theme="dark"] #warning_bar, :root[data-theme="dark"] #error_bar,
:root[data-theme="dark"] #bar.error,
:root[data-theme="dark"] #assigned_message,
:root[data-theme="dark"] #result-count .success, :root[data-theme="dark"] #result-count .fail {
    color: #1c2733 !important;
}

/* Cabeçalho: a caixa "Bem-vindo, X | Painel de Administração | Perfil |
   Sair" (#header p#info) e o rodapé de tabelas (Selecione: Todos/Nenhuma/
   Alternar, Página: ...) mantêm o fundo cinza claro fixo do core. */
#header p {
    background: var(--ix-surface-alt);
    border-color: var(--ix-border);
}

:root[data-theme="dark"] table tfoot td {
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}

/* --- select2 (pesquisa de utilizadores/colaboradores/destinatários) -----
   O select2.min.css nunca foi tocado pelo tema: o dropdown de resultados
   tem sempre fundo branco fixo (.select2-dropdown{background:white}) e as
   linhas de resultado (.select2-results__option) não têm cor de texto
   própria -- herdam o texto claro do body em modo escuro. Texto claro
   sobre fundo branco fixo = nomes ilegíveis ao pesquisar, exactamente o
   caso reportado ao adicionar colaboradores. */
:root[data-theme="dark"] .select2-dropdown {
    background-color: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
}
:root[data-theme="dark"] .select2-results__option {
    color: var(--ix-text) !important;
}
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
:root[data-theme="dark"] .select2-container--classic .select2-results__option[aria-selected="true"] {
    background-color: var(--ix-border) !important;
    color: var(--ix-text) !important;
}
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--ix-surface) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple,
:root[data-theme="dark"] .select2-container--classic .select2-selection--single,
:root[data-theme="dark"] .select2-container--classic .select2-selection--multiple {
    background-color: var(--ix-surface) !important;
    border-color: var(--ix-border) !important;
}
:root[data-theme="dark"] .select2-selection__rendered {
    color: var(--ix-text) !important;
}
:root[data-theme="dark"] .select2-selection__placeholder {
    color: var(--ix-text-muted) !important;
}
:root[data-theme="dark"] .select2-selection__choice {
    background-color: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
    color: var(--ix-text) !important;
}

/* Dropdown genérico (bootstrap remanescente, ex. algumas listas de
   sugestões): tem cor de texto fixa escura mas nenhum fundo definido,
   ficando texto escuro sobre o fundo escuro do body. */
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
}

/* --- Cabeçalho e logótipo ---------------------------------------------- */

#header {
    background-color: var(--ix-surface) !important;
    border-left: 1px solid var(--ix-border) !important;
    border-right: 1px solid var(--ix-border) !important;
    box-shadow: var(--ix-shadow);
}

:root[data-theme="dark"] #header,
:root[data-theme="dark"] #nav,
:root[data-theme="dark"] #sub_nav {
    border-color: var(--ix-border-strong) !important;
}

#logo img {
    max-height: 46px;
}

#header p#info {
    color: var(--ix-text-muted) !important;
}
#header p#info a {
    color: var(--ix-primary) !important;
}

/* --- Navegação ----------------------------------------------------------*/

#nav, #sub_nav {
    background: var(--ix-surface) !important;
    border-left: 1px solid var(--ix-border) !important;
    border-right: 1px solid var(--ix-border) !important;
}

#nav {
    border-top: 1px solid var(--ix-border) !important;
    border-bottom: 1px solid var(--ix-border) !important;
}

#nav .active, #nav .inactive {
    color: var(--ix-text-muted) !important;
    border-radius: var(--ix-radius-sm) var(--ix-radius-sm) 0 0;
}

#nav .inactive a {
    color: var(--ix-text-muted) !important;
}

#nav .active a {
    color: var(--ix-primary) !important;
    font-weight: 600 !important;
}

#nav li.active {
    background-color: var(--ix-primary-light) !important;
    border-color: var(--ix-border) !important;
    box-shadow: inset 0 -3px 0 var(--ix-primary) !important;
}

:root[data-theme="dark"] #nav li.active {
    box-shadow: inset 0 -3px 0 var(--ix-primary), 0 -3px 10px -2px rgba(79, 195, 247, 0.4) !important;
}

#nav li.inactive:hover {
    background-color: var(--ix-surface-alt) !important;
    border-color: var(--ix-border) !important;
}

#nav li.inactive > ul {
    background: var(--ix-surface) !important;
    border-color: var(--ix-border) !important;
    box-shadow: var(--ix-shadow) !important;
    border-radius: 0 0 var(--ix-radius) var(--ix-radius) !important;
}

#nav .inactive li a {
    color: var(--ix-text) !important;
}

#nav .inactive li a:hover {
    color: var(--ix-primary) !important;
    background: var(--ix-surface-alt) !important;
}

/* Outros links do cabeçalho (ex. menu do utilizador) herdam a cor laranja
   original do osTicket (div#header a); alinha com a identidade azul. */
#header a {
    color: var(--ix-primary);
}

/* --- Menu de filas (queues) e overflow menu ------------------------------
   #sub_nav / #customQ_nav / .jb-overflowmenu-* / .customQ-dropdown são um
   segundo sistema de menu (dropdown de filas, menu "mais" em ecrãs
   estreitos) totalmente à parte do #nav -- ainda usava o laranja e os
   cinzentos originais do osTicket em vez da identidade azul da marca. */

#sub_nav > li > a,
#customQ_nav .jb-overflowmenu-menu-primary li.item > a,
.jb-overflowmenu-menu-secondary li.item > a,
.customQ-dropdown ul li, .customQ-dropdown ul li > a {
    color: var(--ix-text) !important;
}

#sub_nav > li > a:hover,
#customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a,
.jb-overflowmenu-menu-secondary li.item:hover > a,
.customQ-dropdown li:not(.personalQ) > span,
.customQ-dropdown li > span,
.tip_menu li a:hover {
    color: var(--ix-primary) !important;
}

#customQ_nav .jb-overflowmenu-menu-primary li.item:hover,
.jb-overflowmenu-menu-secondary li.item:hover,
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle:hover {
    background-color: var(--ix-surface-alt) !important;
    color: var(--ix-primary) !important;
}

.customQ-dropdown ul li:not(.personalQ):hover {
    background-color: var(--ix-primary) !important;
}

.customQ-dropdown li h4,
.customQ-dropdown li.top-level {
    background-color: var(--ix-surface-alt) !important;
    color: var(--ix-text-muted) !important;
}

.jb-overflowmenu .jb-overflowmenu-container,
.jb-overflowmenu .jb-overflowmenu-container > a.jb-overflowmenu-menu-secondary-handle,
.jb-overflowmenu-menu-secondary {
    background-color: var(--ix-surface-alt) !important;
    color: var(--ix-text-muted) !important;
    border-color: var(--ix-border) !important;
}

/* --- Conteúdo / painéis ------------------------------------------------ */

#content {
    background: var(--ix-surface);
    border-radius: var(--ix-radius);
}

/* --- Tabelas ------------------------------------------------------------*/

table.list thead th {
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-border) !important;
}

table.list tbody td {
    background: var(--ix-surface) !important;
    border-color: var(--ix-border) !important;
}

table.list tbody tr:nth-child(2n+1) td {
    background-color: var(--ix-surface-alt) !important;
}

table.list tbody tr:hover td,
table.list tbody tr.highlight td {
    background: var(--ix-primary-light) !important;
}

/* --- Largura dinâmica ----------------------------------------------------
   O core do osTicket fixa #container em 960px (herdado de quando os
   ecrãs eram mais pequenos), deixando o painel apertado ao centro com
   muito espaço vazio dos lados em ecrãs largos. Passa a ocupar a largura
   da janela do browser, com uma margem generosa para não esticar demais
   em monitores muito largos (linhas de tabela infinitas seriam piores
   de ler, não melhores). O menu de filas (.jb-overflowmenu) e as tabelas
   de listagem (width="940" fixo no HTML) acompanham a mesma largura. */
#container {
    width: auto;
    max-width: 1800px;
    margin: 0 auto 20px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.jb-overflowmenu {
    width: 100%;
}

table.list {
    width: 100% !important;
}

/* O editor de resposta/nota (Redactor) tem um max-width:950px fixo,
   aplicado via JS inline (upload/js/redactor-osticket.js, maxWidth para
   textareas "fullscreen") -- não é algo do CSS core, por isso nunca
   tinha aparecido: com o #container antigo de 960px isto já era
   praticamente a largura toda. Agora que o painel é fluido, ficava uma
   coluna estreita a "flutuar" no meio de uma caixa larga. Sem tocar no
   ficheiro core, sobrepõe-se aqui (chega a !important porque o inline
   não tem, e uma regra com !important ganha sempre a um inline sem). */
.redactor-in {
    max-width: none !important;
}

/* --- Botões -------------------------------------------------------------*/

.button,
button[type="submit"],
input[type="submit"],
.primary.button {
    background: var(--ix-primary) !important;
    border-color: var(--ix-primary-dark) !important;
    color: var(--ix-on-primary) !important;
    border-radius: var(--ix-radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--ix-primary-dark) !important;
    border-color: var(--ix-primary-dark) !important;
}

/* Em modo escuro os tons ficavam todos muito próximos uns dos outros --
   sensação de "achatado". Um brilho subtil no azul da marca (só onde ele
   já é a cor principal: botão primário, aba ativa, linha selecionada) dá
   uma sensação de profundidade e vida sem inventar cor nova nenhuma. */
:root[data-theme="dark"] .button,
:root[data-theme="dark"] button[type="submit"],
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] .primary.button {
    box-shadow: var(--ix-primary-glow) !important;
}

/* Botões secundários (Cancelar, Limpar, Feito, ...): com o botão primário
   sempre a azul cheio, estes ficam melhor discretos -- contorno em vez de
   preenchimento -- para a ação principal de cada ecrã ser inequívoca.
   (Não inclui .action-button: essa classe também cobre botões de ação
   coloridos propositadamente, como o "apagar" a vermelho, que não deve
   perder a cor de aviso.) */
input[type="button"],
input[type="reset"] {
    background: transparent !important;
    color: var(--ix-text-muted) !important;
    border-color: var(--ix-border-strong) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

input[type="button"]:hover,
input[type="reset"]:hover {
    background: var(--ix-surface-alt) !important;
    color: var(--ix-text) !important;
    border-color: var(--ix-text-muted) !important;
}

/* --- Toggle de tema (inserido via JS) ------------------------------------*/

#ix-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ix-border);
    background: var(--ix-surface-alt);
    color: var(--ix-text-muted);
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.6;
}
#ix-theme-toggle:hover {
    border-color: var(--ix-primary);
    color: var(--ix-primary);
}

/* --- Legibilidade em listas de sugestões (typeahead/collaborators) ------
   A regra global "a, .link { color: var(--ix-primary) !important }" acima
   também apanha os links dentro do dropdown de sugestões (pesquisa de
   colaboradores). Quando um desses links fica em destaque/hover, o
   typeahead.css põe-lhe fundo azul e texto branco -- mas sem !important,
   por isso perde para a regra global e o texto fica azul sobre um fundo
   também azul, ilegível. Repõe branco só no item em destaque. */
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
    color: #ffffff !important;
}

/* --- Prioridade dos tickets em forma de etiqueta -------------------------
   As cores vêm de Admin > Prioridades (desde 2026-10-04: Low verde, Normal
   cinza, High laranja, Emergency vermelho) -- já se distinguem por si, por
   isso não se mexe na cor, só na forma: etiqueta arredondada e negrito. */
table.list td[style*="background-color"] {
    padding: 0 !important;
}
table.list td[style*="background-color"] > div {
    display: inline-block;
    margin: 3px 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Prioridades de urgência 1-2 (High/Emergency), marcadas pelo
   scp-theme-injector.php a partir do nível de urgência configurado --
   não do nome da etiqueta. Mais peso e contorno mais firme. */
table.list td[style*="background-color"] > div.ix-priority-high {
    font-weight: 800;
    box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.45);
}

/* Só a urgência máxima (Emergency) pulsa: se todas as High pulsassem, uma
   fila com várias ficava a "piscar" e o sinal perdia valor. */
table.list td[style*="background-color"] > div.ix-priority-emergency {
    animation: ix-priority-pulse 2.4s ease-in-out infinite;
}

@keyframes ix-priority-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(217, 48, 37, 0); }
    50%      { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(217, 48, 37, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    table.list td[style*="background-color"] > div.ix-priority-emergency {
        animation: none;
    }
}

/* --- Botão "Separar em novo ticket" (aviso de continuidade) -------------
   Inserido pelo theme.js dentro da nota de aviso; ver
   include/mods/ticket-split.php. */
/* Faixa logo abaixo do texto do aviso, com o mesmo vermelho do banner, e
   botão cheio: é a ação principal desta nota, tem de saltar à vista. */
.ix-split-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 6px 0 4px;
    padding: 10px 14px;
    border: 2px solid #d9534f;
    border-left-width: 6px;
    border-radius: 4px;
    background: #fdf2f2;
}
.ix-split-ask {
    font-size: 13px;
    font-weight: 600;
    color: #a94442;
}
.ix-split-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--ix-radius-sm);
    border: 1px solid #a3231f;
    background: #c9302c;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(169, 68, 66, 0.35);
    transition: background-color 0.15s, box-shadow 0.15s;
}
.ix-split-btn:hover,
.ix-split-btn:focus-visible {
    background: #a3231f;
    box-shadow: 0 3px 10px rgba(169, 68, 66, 0.5);
}
.ix-split-btn:focus-visible {
    outline: 3px solid rgba(201, 48, 44, 0.4);
    outline-offset: 2px;
}
.ix-split-btn .ix-split-icon {
    font-size: 17px;
    line-height: 1;
}
.ix-split-btn[disabled] {
    opacity: 0.65;
    cursor: wait;
    box-shadow: none;
}
.ix-split-msg {
    font-size: 13px;
    font-weight: 600;
    color: #843534;
}
.ix-split-msg a {
    font-weight: 700;
}
/* Modo escuro: a faixa mantém o fundo claro do banner (que é HTML inline
   gravado na nota e não muda com o tema), por isso o texto fica escuro. */
:root[data-theme="dark"] .ix-split-ask,
:root[data-theme="dark"] .ix-split-msg {
    color: #843534 !important;
}

/* --- Contornos dos menus/dropdowns em modo escuro -------------------------
   Com --ix-border normal, os contornos destas caixas flutuantes (dropdown
   de navegação, select2, typeahead, filas, diálogos) ficavam demasiado
   próximos do tom do fundo à volta -- pareciam "sem contorno". Usa-se um
   tom mais claro (--ix-border-strong) só nestas caixas que flutuam por
   cima do resto da página, e uma sombra mais funda para as destacar. */
:root[data-theme="dark"] #nav li.inactive > ul,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .customQ-dropdown,
:root[data-theme="dark"] .customQ-dropdown ul li.subQ > ul,
:root[data-theme="dark"] .jb-overflowmenu-menu-secondary,
:root[data-theme="dark"] .jb-overflowmenu-menu-primary .customQ-dropdown,
:root[data-theme="dark"] .jb-overflowmenu-menu-secondary .customQ-dropdown,
:root[data-theme="dark"] .jb-overflowmenu .jb-overflowmenu-container,
:root[data-theme="dark"] .dialog,
:root[data-theme="dark"] .tip_content {
    border-color: var(--ix-border-strong) !important;
    box-shadow: var(--ix-shadow) !important;
}

:root[data-theme="dark"] [id^="action-dropdown"] {
    border: 1px solid var(--ix-border-strong) !important;
    box-shadow: var(--ix-shadow) !important;
}

/* --- Tabelas com scroll horizontal em ecrãs estreitos --------------------*/

.ix-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Responsivo ---------------------------------------------------------*/

@media (max-width: 900px) {
    #container {
        padding: 0 10px;
    }
    #header {
        height: auto;
        padding-bottom: 8px;
    }
    #header p#info {
        max-width: none;
        width: auto;
        margin: 6px 10px;
        font-size: 12px;
    }
    #logo img {
        max-height: 36px;
    }
    #nav {
        white-space: normal;
        padding: 6px 10px;
    }
    #nav .active, #nav .inactive {
        min-width: 0;
        margin-bottom: 4px;
    }
    #content {
        padding: 8px !important;
    }
}

@media (max-width: 600px) {
    body, html {
        font-size: 13px !important;
    }
    #header p#info {
        text-align: left;
    }
}