/**
 * JusLead Theme — Color Override
 * ================================
 * Sobrescreve a paleta primary compilada pelo Tailwind (azul padrão #2563EB)
 * pela paleta teal JusLead (extraída da 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 (Teal JusLead — from logo gradient) */
  --color-primary-50:  #eefcfb;
  --color-primary-100: #d2f8f4;
  --color-primary-200: #a5f0ea;
  --color-primary-300: #05F2DB;
  --color-primary-400: #34BFBF;
  --color-primary-500: #2D9AA6;
  --color-primary-600: #267F8E;
  --color-primary-700: #1E657A;
  --color-primary-800: #1E557C;
  --color-primary-900: #1A3F5C;
  --color-primary-950: #0E2640;

  /* 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: #267F8E;
  border-color: #267F8E;
  color: #fff;
}

.btn-primary:hover {
  background-color: #1E657A;
  border-color: #1E657A;
  color: #fff;
}

.btn-primary:focus,
.btn-primary.focus {
  --tw-ring-color: #2D9AA6;
  background-color: #1E657A;
  border-color: #1E657A;
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  --tw-ring-color: #2D9AA6;
  background-color: #1E657A;
  border-color: #1E657A;
  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: #2D9AA6;
  background-color: #1E657A;
  border-color: #1E657A;
  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: #267F8E;
  border-color: #267F8E;
}

.btn-primary .badge {
  background-color: #fff;
  color: #1E657A;
}

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

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

.btn-info {
  background-color: #267F8E;
  border-color: #267F8E;
  color: #fff;
}

.btn-info:hover {
  background-color: #1E657A;
  border-color: #267F8E;
  color: #fff;
}

.btn-info:focus,
.btn-info.focus {
  --tw-ring-color: #2D9AA6;
  background-color: #1E657A;
  border-color: #267F8E;
  color: #fff;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  --tw-ring-color: #2D9AA6;
  background-color: #1E657A;
  border-color: #267F8E;
  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: #2D9AA6;
  background-color: #1E657A;
  border-color: #267F8E;
  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: #267F8E;
  border-color: #267F8E;
}

.btn-info .badge {
  background-color: #fff;
  color: #1E657A;
}

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

a {
  color: #1E657A;
}

a:hover,
a:focus {
  color: #1E557C;
}

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

.text-primary {
  color: #267F8E;
}

a.text-primary:hover,
a.text-primary:focus,
.text-primary:focus {
  color: #1E657A;
}

.bg-primary {
  background-color: #267F8E;
  color: #fff;
}

a.bg-primary:hover,
a.bg-primary:focus,
.bg-primary:focus {
  background-color: #1E657A;
  color: #fff;
}

/* ============================================================
   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: #2D9AA6;
  --tw-ring-color: rgba(45, 154, 166, 0.5);
}

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

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
  background-color: #267F8E;
  border-color: #267F8E;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
  background-color: #267F8E;
  border-color: #267F8E;
}

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

.radio-primary input[type="radio"] + label::after {
  background-color: #267F8E;
}

.radio-primary input[type="radio"]:checked + label::before {
  border-color: #267F8E;
}

.radio-primary input[type="radio"]:checked + label::after {
  background-color: #267F8E;
}

.radio-info input[type="radio"] + label::after {
  background-color: #267F8E;
}

.radio-info input[type="radio"]:checked + label::before {
  border-color: #267F8E;
}

.radio-info input[type="radio"]:checked + label::after {
  background-color: #267F8E;
}

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

.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: #2D9AA6;
}

.onoffswitch-checkbox:checked + .onoffswitch-label,
.onoffswitch-checkbox:checked + .onoffswitch-label::before {
  border-color: #2D9AA6;
}

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

.label-primary {
  background-color: #eefcfb;
  color: #1E657A;
  --tw-ring-color: rgba(30, 101, 122, 0.1);
}

.label-primary[href]:focus,
.label-primary[href]:hover {
  background-color: #d2f8f4;
  color: #1E557C;
}

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

.panel-primary > .panel-heading {
  background-color: #d2f8f4;
  color: #1E657A;
}

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

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-color: #1A3F5C;
  color: #1A3F5C;
}

.nav-tabs > li.active > a i.menu-icon {
  color: #1A3F5C;
}

/* ============================================================
   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: #267F8E;
  border-color: #267F8E;
  color: #fff;
}

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

.progress-bar {
  background-color: #267F8E;
}

.progress-bar-info {
  background-color: #267F8E;
}

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

*, ::before, ::after {
  --tw-ring-color: rgba(45, 154, 166, 0.5);
}

/* ============================================================
   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; }

/* --- 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; }

/* --- 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; }

/* --- 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-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; }

/* ============================================================
   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 .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);
}