/* ============================================================================
   NANOSPHERE — capa de override del portal de cliente
   ----------------------------------------------------------------------------
   Se inyecta como ULTIMO <link> del head desde client.inc.php, aprovechando que
   include/client/header.inc.php:65-68 imprime getExtraHeaders() despues de los
   12 <link>. Gracias a eso este archivo le gana por orden de cascada a:

       css/osticket.css        css/thread.css        css/redactor.css
       css/typeahead.css       css/select2.min.css   css/flags.css
       css/rtl.css             css/font-awesome.min.css
       css/ui-lightness/jquery-ui-1.13.2.custom.min.css
       css/jquery-ui-timepicker-addon.css

   AQUI SOLO VA lo que necesita ganarle a esas hojas. Todo lo demas vive en
   theme.css, que se carga por ASSETS_PATH y es mas facil de mantener.

   Cada !important de este archivo lleva al lado el archivo al que le gana.
   Si añades uno sin esa nota, probablemente lo que necesitas es especificidad.

   Version de select2: v4 (.select2-container--default). Redactor: .redactor-box.
   Typeahead reutiliza .dropdown-menu.
   ========================================================================== */

/* ============================================================================
   1. css/osticket.css — overlay, loading, borradores, imagenes remotas
   ========================================================================== */

#overlay {
  background: #000;
  opacity: 0.72;
}

#loading {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.25rem 1.25rem 3.75rem;
  width: 300px;
  height: auto;
  min-height: 4.5rem;
  box-sizing: border-box;
  background-color: var(--surface);
  background-image: url("../../../images/FhHRx-Spinner.gif");
  background-position: 1.25rem 50%;
  background-repeat: no-repeat;
  box-shadow: var(--glass-shadow);
  color: var(--fg-muted);
}
#loading h4 {
  margin: 0 0 0.25rem;
  padding: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1rem;
}
#loading p { margin: 0; font-size: 0.875rem; }

.draft-saved {
  background-color: rgb(53 224 160 / 0.15);
  border: 1px solid rgb(53 224 160 / 0.3);
  color: var(--ok);
  padding: 0.25rem 0.625rem 0.375rem;
  border-radius: var(--radius-pill);
  text-shadow: none;
  font-size: 0.75rem;
  line-height: 1.2;
}
.delete-draft:hover { background-color: rgb(255 107 107 / 0.2) !important; } /* gana a osticket.css:86 */

div.section-break {
  border-top: 1px solid var(--border);
}

.non-local-image {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.non-local-image::after { opacity: 0.15; }

/* Las tres barras de aviso de osticket.css:89-93 traen sprites y fondos claros.
   theme.css ya las redefine, pero repiten height:16px y el sprite con la misma
   especificidad, asi que se rematan aqui. */
.notice_bar,
.warning_bar,
.error_bar {
  height: auto;
  min-height: 2.75rem;
  line-height: 1.45;
  padding: 0.75rem 1rem;
  background-image: none;
  border-radius: var(--radius-md);
}

/* ============================================================================
   2. css/thread.css — cuerpo de los mensajes
   ----------------------------------------------------------------------------
   DECISION DE DISENO: el cuerpo se queda CLARO.

   .thread-body es correo entrante. El HTML lo escribe quien nos escribe:
   firmas en tablas blancas, imagenes con fondo, texto en negro literal. Forzarlo
   a oscuro hace ilegible una parte impredecible de los mensajes. Front y Zendesk
   hacen exactamente esto. Solo el chrome (cabecera, metadatos, adjuntos) va
   oscuro; el cuerpo es una tarjeta clara embebida en el lienzo.

   La landing del portal TAMBIEN se renderiza dentro de .thread-body
   (index.php:36-40) pero es contenido nuestro, no correo: theme.css la devuelve
   a oscuro con #landing_page .thread-body.
   ========================================================================== */

.thread-body {
  color: #1c2030;
  background-color: #f7f8fb;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 1.125rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem !important;   /* gana a thread.css:30 font-size:14px !important */
  line-height: 1.6;
}

.thread-body h1,
.thread-body h2,
.thread-body h3,
.thread-body h4,
.thread-body h5,
.thread-body h6,
.thread-body .h1,
.thread-body .h2,
.thread-body .h3 {
  font-family: var(--font-display);
  color: #0d1020;
}

.thread-body a:not(.button) {
  color: var(--brand-deep) !important;   /* gana a thread.css:116 color:#428bca !important */
}
.thread-body a:not(.button):hover,
.thread-body a:not(.button):focus {
  color: #2a3fae;
}

.thread-body pre {
  font-family: var(--font-mono);
  background: rgb(6 7 11 / 0.05);
  border-radius: var(--radius-sm);
}

.thread-body blockquote {
  border-left: 3px solid #c9d2e6;
  color: #4a5268;
}

.thread-body hr { border-top: 1px solid #dfe4ef; }

/* Los adjuntos van al pie de la tarjeta clara, pero son chrome nuestro */
.thread-body .attachments {
  background-color: rgb(6 7 11 / 0.04);
  border-top: 1px solid #dfe4ef;
  margin: 1.125rem -1.125rem -1.125rem;
  padding: 0.625rem 1.125rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.thread-body .attachments a { color: var(--brand-deep); }
.thread-body .attachments .filesize { color: #6b7488; }

table.thread-entry { table-layout: fixed; width: 100%; }
table.thread-entry th div .title { font-weight: 500; color: var(--fg); }
table.thread-entry th .textra { margin-right: 1em; display: inline-block; }

.image-hover .caption { opacity: 0.6; }
.image-hover:hover .caption { opacity: 1; }

/* ============================================================================
   3. jQuery UI (tema ui-lightness) — datepicker y dialogos
   El tema claro completo se apaga por tokens. Sin esto el datepicker sale como
   un recuadro naranja/crema sobre el lienzo oscuro.
   ========================================================================== */

.ui-widget {
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.ui-widget-content {
  background: var(--surface) !important;      /* gana a jquery-ui: gradiente claro */
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}
.ui-widget-content a { color: var(--brand-strong) !important; }

.ui-widget-header {
  background: var(--surface-2) !important;    /* gana a jquery-ui: gradiente naranja */
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-weight: 600;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  color: var(--fg-muted) !important;
  text-align: center;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
  background: rgb(236 239 247 / 0.06) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: var(--brand) !important;
  background-image: none !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  background: rgb(91 124 255 / 0.18) !important;
  background-image: none !important;
  border-color: rgb(91 124 255 / 0.35) !important;
  color: var(--fg) !important;
}

/* Los iconos de jQuery UI son un sprite PNG oscuro: se invierte para que se vea */
.ui-icon,
.ui-widget-content .ui-icon,
.ui-widget-header .ui-icon {
  filter: invert(1) brightness(1.8);
}

.ui-datepicker { padding: 0.5rem; }
.ui-datepicker .ui-datepicker-header {
  border-radius: var(--radius-sm);
  padding: 0.375rem 0;
}
.ui-datepicker .ui-datepicker-title select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.25rem;
}
.ui-datepicker th { color: var(--fg-subtle); font-weight: 500; }
.ui-datepicker td span,
.ui-datepicker td a { padding: 0.375rem; border-radius: var(--radius-sm); }
.ui-datepicker-trigger { filter: invert(1) brightness(1.8); }

.ui-timepicker-div .ui-widget-header { margin-bottom: 0.5rem; }
.ui-timepicker-div dt { color: var(--fg-muted); }
.ui-slider { background: var(--surface-3) !important; border: 0 !important; }
.ui-slider .ui-slider-handle {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  border-radius: 999px;
}

.ui-dialog { padding: 0; }
.ui-dialog .ui-dialog-titlebar { padding: 0.875rem 1rem; }
.ui-dialog .ui-dialog-content { color: var(--fg) !important; }
.ui-widget-overlay { background: #000 !important; opacity: 0.72 !important; }

/* ============================================================================
   4. select2 v4
   ========================================================================== */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 2.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fg);
  line-height: 2.25rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--fg-subtle);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--fg-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--fg-muted) transparent;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(91 124 255 / 0.18);
}

.select2-dropdown {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.625rem;
}
.select2-container--default .select2-results__option {
  color: var(--fg-muted);
  padding: 0.5rem 0.75rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: var(--brand);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: rgb(91 124 255 / 0.14);
  color: var(--fg);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgb(91 124 255 / 0.16);
  border: 1px solid rgb(91 124 255 / 0.3);
  border-radius: var(--radius-pill);
  color: var(--fg);
  padding: 0.125rem 0.5rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--fg-muted);
}

/* ============================================================================
   5. Redactor (editor WYSIWYG)
   El area de edicion se deja CLARA por la misma razon que .thread-body: lo que
   escribes ahi se envia como correo y se ve sobre blanco en el cliente destino.
   Editar en oscuro y que llegue en claro es una trampa. Solo la barra va oscura.
   ========================================================================== */

.redactor-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
}

.redactor-toolbar {
  background: var(--surface-2) !important;   /* gana a redactor.css: #fff */
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.redactor-toolbar li a {
  color: var(--fg-muted) !important;         /* gana a redactor.css: #333 */
  border-radius: var(--radius-sm);
}
.redactor-toolbar li a:hover {
  background-color: var(--brand) !important;
  color: #fff !important;
}
.redactor-toolbar li a.redactor-act,
.redactor-toolbar li a.redactor-button-active {
  background-color: rgb(91 124 255 / 0.2) !important;
  color: var(--fg) !important;
}

.redactor-editor,
.redactor-box textarea {
  background-color: #f7f8fb !important;      /* gana a redactor.css */
  color: #1c2030 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  min-height: 10rem;
}
.redactor-editor a { color: var(--brand-deep) !important; }

.redactor-dropdown {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}
.redactor-dropdown a { color: var(--fg-muted) !important; }
.redactor-dropdown a:hover { background: var(--brand) !important; color: #fff !important; }

.redactor-placeholder::after { color: var(--fg-subtle) !important; }

/* ============================================================================
   6. Typeahead (usa .dropdown-menu de Bootstrap 2)
   ========================================================================== */

.dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  padding: 0.25rem;
}
.dropdown-menu a {
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}
.dropdown-menu > .active > a,
.dropdown-menu a:hover,
.dropdown-menu li > a:hover {
  background-color: var(--brand);
  background-image: none;
  color: #fff;
}
.dropdown-menu .divider {
  background-color: var(--border);
  height: 1px;
  margin: 0.25rem 0;
}

/* ============================================================================
   7. filedrop — css/filedrop.css se enlaza DENTRO del body desde
   include/class.forms.php:5245, o sea despues de esta hoja. Por eso van con
   !important: es la unica lista acotada donde el orden de cascada nos falla.
   ========================================================================== */

.filedrop .dropzone {
  background-color: rgb(236 239 247 / 0.02) !important;  /* gana a filedrop.css */
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--fg-muted) !important;
}
.filedrop .dropzone:hover,
.filedrop .dropzone.hover,
.filedrop .dropzone.dragover {
  border-color: var(--brand) !important;
  background-color: rgb(91 124 255 / 0.06) !important;
}
.filedrop .file-list .file {
  background-color: rgb(236 239 247 / 0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg) !important;
}
.filedrop .progress,
.filedrop .file .progress {
  background-color: var(--surface-3) !important;
  border-radius: var(--radius-pill) !important;
}
.filedrop .progress-bar,
.filedrop .file .progress > div {
  background-color: var(--brand) !important;
}

/* ============================================================================
   8. css/rtl.css — carga despues de theme.css y reintroduce paddings pensados
   para los sprites que ya no existen. Si no hay ningun idioma RTL configurado
   en Admin, este bloque no hace nada.
   ========================================================================== */

.rtl #nav li a {
  padding-left: 1rem !important;      /* gana a rtl.css */
  padding-right: 1rem !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  background-position: initial !important;
}
.rtl #clientLogin { background-position: initial !important; }
.rtl .login-box { box-shadow: none !important; }