/*
 * Tema oscuro custom para osTicket (portal de clientes + panel de agentes /scp).
 * osTicket 1.18.x no trae modo oscuro nativo ni un setting de "Custom CSS" en el
 * admin panel — este archivo se referencia a mano desde una copia local de
 * include/client/header.inc.php e include/staff/header.inc.php (ver
 * osticket/overrides/), montada por encima del archivo original vía volumen en
 * docker-compose.yml. Si se actualiza la imagen hlhd/osticket y esos header
 * cambian en el core, hay que re-portar la línea <link> del <head> a la nueva
 * versión del archivo.
 *
 * Limitación conocida: los íconos de menú/lista son .gif/.png rasterizados con
 * fondo propio (no se puede recolorear vía CSS), así que se ven con su
 * recuadro claro original sobre el fondo oscuro.
 */

:root {
    --bg-page:      #14171c;
    --bg-panel:     #1b1f26;
    --bg-panel-alt: #20242c;
    --bg-hover:     #262b34;
    --bg-input:     #262b34;
    --border:       #333944;
    --border-soft:  #2a2f38;
    --text:         #e4e6eb;
    --text-soft:    #aab2c0;
    --text-muted:   #737b8a;
    --link:         #5b9dff;
    --link-hover:   #8ec0ff;

    --ok-bg:     #14301e;
    --ok-border: #2f6b41;
    --ok-text:   #8fe3a8;

    --warn-bg:     #3a2f12;
    --warn-border: #8a6d1f;
    --warn-text:   #e6c977;

    --err-bg:     #3a1717;
    --err-border: #8a2e2e;
    --err-text:   #f09b9b;

    --info-bg:     #122a3a;
    --info-border: #2f6484;
    --info-text:   #8fcdf0;
}

/* ---------- Base ---------- */
html, body {
    background: var(--bg-page) !important;
    color: var(--text) !important;
}

#container {
    background: var(--bg-page) !important;
}

#header, #logo, div#header {
    background: var(--bg-panel-alt) !important;
    border-color: var(--border) !important;
}

/* Barra "Bienvenido, X | Panel Administrador | Perfil | Salir" (scp) —
   trae background:#eee y border propios en scp.css que no hereda de #header */
#header p {
    background: var(--bg-hover) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
#header p a { color: var(--text) !important; }
#header p a:hover { color: var(--link-hover) !important; }

#content {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

#footer, #footer a, #footer p { color: var(--text-muted) !important; }

hr { border-color: var(--border) !important; }

/* ---------- Links ---------- */
a, .link, .Icon, a.faded { color: var(--link) !important; }
a:hover, .link:hover { color: var(--link-hover) !important; }

/* ---------- Navegación (client + scp) ---------- */
#nav, #sub_nav, #customQ_nav, ul#nav {
    background: var(--bg-panel-alt) !important;
    border-color: var(--border) !important;
}

#nav li a, #sub_nav li a, #nav li a:link, #nav li a:visited {
    color: var(--text-soft) !important;
    background-color: transparent !important;
}

#nav li a:hover, #nav li.active a, #nav li.active, #sub_nav li.active a,
#nav .active, #nav .active a {
    background-color: var(--bg-hover) !important;
    color: var(--text) !important;
}

#nav .inactive > ul, #nav .inactive li, .customQ-dropdown {
    background: var(--bg-panel-alt) !important;
    border-color: var(--border) !important;
}

.customQ-dropdown ul li:hover > a, .customQ-dropdown ul li:not(.personalQ):hover {
    background: var(--bg-hover) !important;
}

/* ---------- Texto genérico / headings ---------- */
h1, h2, h3, h4, .subject, .headline { color: var(--text) !important; }
.faded, .faded b, .faded strong, small { color: var(--text-muted) !important; }

/* ---------- Formularios ---------- */
input, textarea, select,
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

input:disabled, textarea:disabled, select:disabled {
    background: var(--bg-panel-alt) !important;
    color: var(--text-muted) !important;
}

label { color: var(--text) !important; }
label.required, span.required { color: var(--err-text) !important; }

fieldset { border-color: var(--border) !important; }

/* Botones */
.button, input[type="submit"], input[type="button"], button,
a.button, .btn {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    text-shadow: none !important;
}
.button:hover, input[type="submit"]:hover, button:hover, a.button:hover {
    background: #313848 !important;
}
.green.button, .green_button { background: #1f5c33 !important; border-color: #2f7d42 !important; }
.blue.button, .blue_button   { background: #1a3f66 !important; border-color: #2f6484 !important; }

/* ---------- Tablas ---------- */
table.list, table.dashboard-stats, table.custom-info, table.custom-data,
.table, .form_table, .settings_table, table.grid.form {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

table.list thead th, .table > thead th, .form_table th, .settings_table th,
table.dashboard-stats tbody:first-child th {
    background: var(--bg-panel-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

table.list thead th a, table.list thead th a.asc, table.list thead th a.desc {
    color: var(--text) !important;
    background-color: transparent !important;
}

table.list tbody td, .table td, .form_table td, .settings_table td, td, th {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border-soft) !important;
}

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

table.list tbody tr:hover td,
table.list tbody tr.highlight td,
table.list tbody tr:nth-child(2n+1):hover td {
    background: var(--bg-hover) !important;
}

table.dashboard-stats tbody:nth-child(2) tr:hover { background: var(--bg-hover) !important; }

/* ---------- Barras de aviso (notice/warning/error/info) ---------- */
#msg_notice, .notice-banner, .notice_bar {
    background-color: var(--ok-bg) !important;
    border-color: var(--ok-border) !important;
    color: var(--ok-text) !important;
}
#msg_warning, .warning-banner, .warning_bar, .warning-banner, .warning {
    background-color: var(--warn-bg) !important;
    border-color: var(--warn-border) !important;
    color: var(--warn-text) !important;
}
#msg_error, .error-banner, .error_bar, .error {
    background-color: var(--err-bg) !important;
    border-color: var(--err-border) !important;
    color: var(--err-text) !important;
}
#msg_info, .info-banner {
    background-color: var(--info-bg) !important;
    border-color: var(--info-border) !important;
    color: var(--info-text) !important;
}

/* ---------- Tabs ---------- */
ul.tabs li a { color: var(--text-soft) !important; background: transparent !important; }
ul.tabs li.active a { color: var(--text) !important; }
ul.tabs, ul.tabs li { border-color: var(--border) !important; }
ul.tabs li.active { background: var(--bg-panel) !important; }
.tab_content { background: var(--bg-panel) !important; }

/* ---------- Dialogs / popups (jQuery UI) ---------- */
.dialog, .dialog *,
.ui-dialog, .ui-widget-content, .ui-widget-header {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.dialog h3, .ui-dialog-title { color: var(--text) !important; }
.dialog a.close { color: var(--text-soft) !important; }

/* ---------- Tooltips ---------- */
.tip_box, .tip_content {
    background: var(--bg-panel-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* ---------- Hilo de mensajes (tickets) ---------- */
.thread-entry, .thread-preview-entry {
    background: var(--bg-panel-alt) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.thread-entry .header, .thread-preview-entry .header {
    background: var(--bg-hover) !important;
    color: var(--text-soft) !important;
    border-color: var(--border) !important;
}
.thread-entry.response .header { border-left: 3px solid var(--link) !important; }
.thread-entry.note .header      { border-left: 3px solid var(--warn-border) !important; }
.thread-entry.system .header    { border-left: 3px solid var(--text-muted) !important; }
.thread-body, .thread-body .attachments { color: var(--text) !important; }
.thread-body .attachment-info {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
}

/* ---------- select2 ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.select2-dropdown, .select2-results__option, .select2-search__field {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.select2-results__option--highlighted[aria-selected] {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text) !important;
}

/* ---------- jQuery UI datepicker ---------- */
.ui-datepicker, .ui-datepicker-header, .ui-datepicker table {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.ui-datepicker td a, .ui-datepicker td span { background: var(--bg-panel-alt) !important; color: var(--text) !important; }
.ui-datepicker td a:hover { background: var(--bg-hover) !important; }
.ui-state-default, .ui-widget-content .ui-state-default {
    background: var(--bg-panel-alt) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.ui-state-active, .ui-state-highlight {
    background: var(--link) !important;
    color: #fff !important;
}

/* ---------- Login (scp + client) ---------- */
#clientLogin, .login-box, #login {
    background: var(--bg-panel) !important;
    color: var(--text) !important;
}
#clientLogin strong, #clientLogin p { color: var(--text) !important; }

/* Pantalla de login del panel de agentes (scp/login.php, tarjeta translúcida
   sobre el fondo/logo difuminado) */
body#loginBody, body#loginBody input { color: var(--text) !important; }
#loginBox:after {
    background-color: rgba(20, 23, 28, 0.85) !important;
    border-color: var(--border) !important;
}
#loginBox h1, #loginBox h3, #loginBox #login-message { color: var(--text) !important; }
.banner { background: var(--bg-panel-alt) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---------- Scrollbar (WebKit/Chromium) ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #444b58; }

/* ---------- Redactor (editor de respuestas) ---------- */
.redactor-box, .redactor-editor, .redactor-toolbar {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.redactor-toolbar li a { color: var(--text-soft) !important; }
.redactor-toolbar li a:hover { background: var(--bg-hover) !important; }