/**
 * JusLead Theme — Color Override
 * ================================
 * Sobrescreve a paleta primary compilada pelo Tailwind (azul padrão #2563EB)
 * pela paleta azul/ciano JusLead (extraída da nova logo).
 *
 * Carrega DEPOIS de assets/builds/tailwind.css e assets/css/style.css
 * para forçar as cores corretas independente do que o Perfex CRM core contenha.
 *
 * Scoped com :not(.dark-mode) — o módulo darkmode tem sua própria paleta.
 *
 * Módulo: stylesjuslead v1.1.0
 * Epic: #160 | Story: #161
 */

/* ============================================================
   A) CSS VARIABLE OVERRIDES — :root light theme
   ============================================================ */

:root:not(.dark-mode) {
  /* Primary (Blue/Cyan JusLead — from new logo gradient) */
  --color-primary-50:  #eef9ff;
  --color-primary-100: #d8f1ff;
  --color-primary-200: #b5e7ff;
  --color-primary-300: #7bd6f4;
  --color-primary-400: #30c0d8;
  --color-primary-500: #168bef;
  --color-primary-600: #1068f0;
  --color-primary-700: #0f5bd8;
  --color-primary-800: #123f9c;
  --color-primary-900: #102f70;
  --color-primary-950: #081a3f;
  --color-primary-400-rgb: 48, 192, 216;
  --color-primary-600-rgb: 16, 104, 240;
  --color-primary-700-rgb: 15, 91, 216;

  /* Surfaces */
  --color-surface:           #ffffff;
  --color-surface-secondary: #fafafa;
  --color-surface-tertiary:  #f4f4f5;
  --color-surface-raised:    #ffffff;

  /* Borders */
  --color-border:           #e4e4e7;
  --color-border-secondary: #f0f0f2;

  /* Text */
  --color-text-primary:   #09090b;
  --color-text-secondary: #52525b;
  --color-text-tertiary:  #a1a1aa;
  --color-text-inverse:   #ffffff;
}

/* ============================================================
   B) BUTTONS — .btn-primary
   ============================================================ */

.btn-primary {
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
  --tw-text-opacity: 1;
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

.btn-primary:focus,
.btn-primary.focus {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
  background-image: none;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.btn-primary .badge {
  background-color: #fff;
  color: var(--color-primary-700);
}

.btn-primary .caret {
  border-color: #fff;
}

/* ============================================================
   C) BUTTONS — .btn-info (also blue)
   ============================================================ */

.btn-info {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.btn-info:hover {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-600);
  color: #fff;
}

.btn-info:focus,
.btn-info.focus {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-600);
  color: #fff;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-600);
  color: #fff;
  background-image: none;
}

.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  --tw-ring-color: var(--color-primary-500);
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-600);
  color: #fff;
}

.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.btn-info .badge {
  background-color: #fff;
  color: var(--color-primary-700);
}

/* ============================================================
   D) LINKS
   ============================================================ */

a {
  color: var(--color-primary-700);
}

a:hover,
a:focus {
  color: var(--color-primary-800);
}

/* ============================================================
   E) BOOTSTRAP UTILITIES — .text-primary, .bg-primary
   ============================================================ */

.text-primary {
  color: var(--color-primary-600);
}

a.text-primary:hover,
a.text-primary:focus,
.text-primary:focus {
  color: var(--color-primary-700);
}

.bg-primary {
  background-color: var(--color-primary-600);
  color: #fff;
}

a.bg-primary:hover,
a.bg-primary:focus,
.bg-primary:focus {
  background-color: var(--color-primary-700);
  color: #fff;
}

.text-info,
a.text-info:hover,
a.text-info:focus {
  color: var(--color-primary-600) !important;
}

.bg-info,
.info-bg,
.primary-bg {
  background-color: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: #fff !important;
}

.label-info,
.badge-info {
  background-color: var(--color-primary-50) !important;
  color: var(--color-primary-700) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-600-rgb), 0.14);
}

.label-info[href]:focus,
.label-info[href]:hover {
  background-color: var(--color-primary-100) !important;
  color: var(--color-primary-800) !important;
}

/* ============================================================
   F) FORM CONTROLS — focus ring
   ============================================================ */

textarea.form-control:focus,
select.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
  border-color: var(--color-primary-500);
  --tw-ring-color: rgba(48, 192, 216, 0.45);
}

/* ============================================================
   G) CHECKBOXES
   ============================================================ */

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

/* ============================================================
   H) RADIOS
   ============================================================ */

.radio-primary input[type="radio"] + label::after {
  background-color: var(--color-primary-600);
}

.radio-primary input[type="radio"]:checked + label::before {
  border-color: var(--color-primary-600);
}

.radio-primary input[type="radio"]:checked + label::after {
  background-color: var(--color-primary-600);
}

.radio-info input[type="radio"] + label::after {
  background-color: var(--color-primary-600);
}

.radio-info input[type="radio"]:checked + label::before {
  border-color: var(--color-primary-600);
}

.radio-info input[type="radio"]:checked + label::after {
  background-color: var(--color-primary-600);
}

/* ============================================================
   I) TOGGLE SWITCH
   ============================================================ */

.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: var(--color-primary-500);
}

.onoffswitch-checkbox:checked + .onoffswitch-label,
.onoffswitch-checkbox:checked + .onoffswitch-label::before {
  border-color: var(--color-primary-500);
}

/* ============================================================
   J) LABELS & BADGES
   ============================================================ */

.label-primary {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
  --tw-ring-color: rgba(16, 104, 240, 0.12);
}

.label-primary[href]:focus,
.label-primary[href]:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

/* ============================================================
   K) PANELS
   ============================================================ */

.panel-primary > .panel-heading {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* ============================================================
   L) NAVIGATION — Tabs
   ============================================================ */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-color: var(--color-primary-900);
  color: var(--color-primary-900);
}

.nav-tabs > li.active > a i.menu-icon {
  color: var(--color-primary-900);
}

/* ============================================================
   L.1) ADMIN SHELL - topbar, sidebar and setup menu
   ============================================================ */

/* Navbar e menu lateral: hover/ativo permanecem NEUTROS (padrão do sistema).
   O rebrand NÃO deve pintar estes estados de azul — o core (light) e o
   jl_dark_mode (dark) já cuidam do neutro. Mantido aqui só o badge de
   contagem de notificações, que é acento de marca legítimo. */
html:not(.dark-mode) body .navbar-nav > li a > .icon-total-indicator,
html:not(.dark-mode) body ul.mobile-icon-menu .icon-total-indicator {
  background: var(--color-primary-600);
  color: #fff;
}

/* Setup-menu (tela de Configurações): hover/ativo permanecem NEUTROS — o core
   cuida no claro e o jl_dark_mode no escuro. Não pintar de azul (e a regra
   antiga vazava azul ilegível pro dark por especificidade). */

/* ============================================================
   M) PAGINATION
   ============================================================ */

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

/* ============================================================
   N) PROGRESS BARS
   ============================================================ */

.progress-bar {
  background-color: var(--color-primary-600);
}

.progress-bar-info {
  background-color: var(--color-primary-600);
}

.progress-bar-primary,
.progress-bar-info,
.progress-bar:not(.progress-bar-success):not(.progress-bar-warning):not(.progress-bar-danger) {
  background-color: var(--color-primary-600);
}

/* ============================================================
   O) GLOBAL RING COLOR DEFAULT
   Tailwind resets --tw-ring-color to blue — override to blue/cyan
   ============================================================ */

*, ::before, ::after {
  --tw-ring-color: rgba(48, 192, 216, 0.45);
}

/* ============================================================
   P) TAILWIND UTILITY OVERRIDES — Primary palette
   Uses CSS variables so dark mode (darkmode.css) can override
   ============================================================ */

/* --- Background --- */
.tw-bg-primary-50  { background-color: var(--color-primary-50)  !important; }
.tw-bg-primary-100 { background-color: var(--color-primary-100) !important; }
.tw-bg-primary-200 { background-color: var(--color-primary-200) !important; }
.tw-bg-primary-300 { background-color: var(--color-primary-300) !important; }
.tw-bg-primary-400 { background-color: var(--color-primary-400) !important; }
.tw-bg-primary-500 { background-color: var(--color-primary-500) !important; }
.tw-bg-primary-600 { background-color: var(--color-primary-600) !important; }
.tw-bg-primary-700 { background-color: var(--color-primary-700) !important; }
.tw-bg-primary-800 { background-color: var(--color-primary-800) !important; }
.tw-bg-primary-900 { background-color: var(--color-primary-900) !important; }
.tw-bg-primary-950 { background-color: var(--color-primary-950) !important; }

.\!tw-bg-primary-600 { background-color: var(--color-primary-600) !important; }
.\!tw-bg-primary-700 { background-color: var(--color-primary-700) !important; }

/* --- Text --- */
.tw-text-primary-50  { color: var(--color-primary-50)  !important; }
.tw-text-primary-100 { color: var(--color-primary-100) !important; }
.tw-text-primary-200 { color: var(--color-primary-200) !important; }
.tw-text-primary-300 { color: var(--color-primary-300) !important; }
.tw-text-primary-400 { color: var(--color-primary-400) !important; }
.tw-text-primary-500 { color: var(--color-primary-500) !important; }
.tw-text-primary-600 { color: var(--color-primary-600) !important; }
.tw-text-primary-700 { color: var(--color-primary-700) !important; }
.tw-text-primary-800 { color: var(--color-primary-800) !important; }
.tw-text-primary-900 { color: var(--color-primary-900) !important; }
.tw-text-primary-950 { color: var(--color-primary-950) !important; }

.\!tw-text-primary-600 { color: var(--color-primary-600) !important; }
.\!tw-text-primary-700 { color: var(--color-primary-700) !important; }

/* --- Border --- */
.tw-border-primary-50  { border-color: var(--color-primary-50)  !important; }
.tw-border-primary-100 { border-color: var(--color-primary-100) !important; }
.tw-border-primary-200 { border-color: var(--color-primary-200) !important; }
.tw-border-primary-300 { border-color: var(--color-primary-300) !important; }
.tw-border-primary-400 { border-color: var(--color-primary-400) !important; }
.tw-border-primary-500 { border-color: var(--color-primary-500) !important; }
.tw-border-primary-600 { border-color: var(--color-primary-600) !important; }
.tw-border-primary-700 { border-color: var(--color-primary-700) !important; }
.tw-border-primary-800 { border-color: var(--color-primary-800) !important; }
.tw-border-primary-900 { border-color: var(--color-primary-900) !important; }
.tw-border-primary-950 { border-color: var(--color-primary-950) !important; }

.\!tw-border-primary-600 { border-color: var(--color-primary-600) !important; }
.\!tw-border-primary-700 { border-color: var(--color-primary-700) !important; }

/* --- Ring --- */
.tw-ring-primary-50  { --tw-ring-color: var(--color-primary-50)  !important; }
.tw-ring-primary-100 { --tw-ring-color: var(--color-primary-100) !important; }
.tw-ring-primary-200 { --tw-ring-color: var(--color-primary-200) !important; }
.tw-ring-primary-300 { --tw-ring-color: var(--color-primary-300) !important; }
.tw-ring-primary-400 { --tw-ring-color: var(--color-primary-400) !important; }
.tw-ring-primary-500 { --tw-ring-color: var(--color-primary-500) !important; }
.tw-ring-primary-600 { --tw-ring-color: var(--color-primary-600) !important; }
.tw-ring-primary-700 { --tw-ring-color: var(--color-primary-700) !important; }
.tw-ring-primary-800 { --tw-ring-color: var(--color-primary-800) !important; }
.tw-ring-primary-900 { --tw-ring-color: var(--color-primary-900) !important; }
.tw-ring-primary-950 { --tw-ring-color: var(--color-primary-950) !important; }

/* --- Hover variants --- */
.hover\:tw-bg-primary-50:hover  { background-color: var(--color-primary-50)  !important; }
.hover\:tw-bg-primary-100:hover { background-color: var(--color-primary-100) !important; }
.hover\:tw-bg-primary-200:hover { background-color: var(--color-primary-200) !important; }
.hover\:tw-bg-primary-600:hover { background-color: var(--color-primary-600) !important; }
.hover\:tw-bg-primary-700:hover { background-color: var(--color-primary-700) !important; }
.hover\:tw-bg-primary-800:hover { background-color: var(--color-primary-800) !important; }
.hover\:\!tw-bg-primary-700:hover { background-color: var(--color-primary-700) !important; }

.hover\:tw-text-primary-600:hover { color: var(--color-primary-600) !important; }
.hover\:tw-text-primary-700:hover { color: var(--color-primary-700) !important; }
.hover\:tw-text-primary-800:hover { color: var(--color-primary-800) !important; }
.hover\:tw-text-primary-900:hover { color: var(--color-primary-900) !important; }

.hover\:tw-border-primary-500:hover { border-color: var(--color-primary-500) !important; }
.hover\:tw-border-primary-600:hover { border-color: var(--color-primary-600) !important; }
.hover\:tw-border-primary-700:hover { border-color: var(--color-primary-700) !important; }

/* --- Focus variants --- */
.focus\:tw-text-primary-700:focus { color: var(--color-primary-700) !important; }
.focus\:tw-text-primary-800:focus { color: var(--color-primary-800) !important; }

.focus\:tw-ring-primary-500:focus { --tw-ring-color: var(--color-primary-500) !important; }
.focus\:tw-ring-primary-600:focus { --tw-ring-color: var(--color-primary-600) !important; }

.focus\:tw-border-primary-500:focus { border-color: var(--color-primary-500) !important; }
.focus\:tw-border-primary-600:focus { border-color: var(--color-primary-600) !important; }

.focus\:tw-bg-primary-700:focus { background-color: var(--color-primary-700) !important; }

.tw-group:hover .group-hover\:\!tw-bg-primary-700 { background-color: var(--color-primary-700) !important; }
.tw-group:hover .group-hover\:tw-text-primary-600 { color: var(--color-primary-600) !important; }

/* Common framework blue utilities used as brand accents in compiled views */
.fc {
  --fc-highlight-color: var(--color-primary-50);
  --fc-now-indicator-color: var(--color-primary-600);
}

.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.fc .fc-button-primary:hover,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
}

/* ============================================================
   Q) STYLE.CSS OVERRIDES
   Override hardcoded #2563eb in assets/css/style.css
   ============================================================ */

.task-info-col {
  border-color: var(--color-primary-600);
}

@media (max-width: 767px) {
  .task-info-col {
    border-color: var(--color-primary-600) !important;
  }
}

.jquery-comments .highlight-background {
  background: var(--color-primary-600) !important;
}

.jquery-comments ul.main li.comment .name {
  color: var(--color-primary-700);
}

.jquery-comments .textarea-wrapper .textarea:focus,
.jquery-comments .textarea-wrapper .textarea:active {
  border-color: var(--color-primary-600);
}

.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
  background: var(--color-primary-600) !important;
}

.notification-wrapper .unread-notification {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.notification-wrapper .unread-notification:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.notification-wrapper .unread-notification .notification-date {
  color: var(--color-primary-800);
}

/* Activity feed and project accents from Perfex base theme */
.activity-feed .feed-item {
  border-left-color: var(--color-primary-400);
}

.activity-feed .feed-item:after {
  border-color: var(--color-primary-700);
}

#toplink:hover,
#botlink:hover {
  color: var(--color-primary-600);
}

.project_progress_slider_horizontal .ui-slider-handle {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.project_progress_slider_horizontal.ui-widget.ui-widget-content .ui-widget-header,
.project_progress_slider_horizontal .ui-slider-range {
  background: var(--color-primary-600);
}

.project-overview-progress-bar .project-progress-number {
  text-shadow: 0 0 2px var(--color-primary-950);
}

.dropzone .dz-preview .dz-progress .dz-upload,
#newsfeed #new-post-form.dropzone .dz-progress {
  background: var(--color-primary-600);
}

.dropzone .dz-preview .dz-image,
.dz-details,
.dz-details:hover {
  background: var(--color-primary-600);
  color: #fff;
}

/* Select/dropdown: hover E opção selecionada permanecem NEUTROS (cinza claro,
   texto legível) — decisão do PO. Sem azul aqui. Usa tokens semânticos para
   adaptar ao dark mode automaticamente. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover,
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
  background-color: var(--color-surface-tertiary);
  color: var(--color-text-primary);
}