/* ===== Kairos brand palette =====
   Primary (main):    #6CED9C  (mint green)
   Secondary:         #036666  (deep teal)
   #6CED9C is light, so primary UI uses deep-teal ink for contrast; links and
   "text-primary" use the teal so they stay readable on white. ============== */

:root,
[data-bs-theme="light"] {
    --bs-primary: #6CED9C;
    --bs-primary-active: #036666;
    --bs-primary-light: #e6fbf0;
    --bs-primary-inverse: #013b3b;
    --bs-primary-rgb: 108, 237, 156;

    --bs-secondary: #036666;
    --bs-secondary-active: #024f4f;
    --bs-secondary-light: #e3f1f1;
    --bs-secondary-inverse: #ffffff;
    --bs-secondary-rgb: 3, 102, 102;

    --bs-link-color: #036666;
    --bs-link-color-rgb: 3, 102, 102;
    --bs-link-hover-color: #6CED9C;

    /* Legacy Metronic aliases */
    --kt-primary: #6CED9C;
    --kt-primary-active: #036666;
}

/* Primary buttons: mint background, deep-teal ink, teal on hover/active. */
.btn.btn-primary {
    --bs-btn-color: #013b3b;
    --bs-btn-bg: #6CED9C;
    --bs-btn-border-color: #6CED9C;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #036666;
    --bs-btn-hover-border-color: #036666;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #036666;
    --bs-btn-active-border-color: #036666;
    --bs-btn-disabled-color: #013b3b;
    --bs-btn-disabled-bg: #6CED9C;
    --bs-btn-disabled-border-color: #6CED9C;
}

/* Secondary/teal buttons: teal background, white ink. */
.btn.btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #036666;
    --bs-btn-border-color: #036666;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #024f4f;
    --bs-btn-hover-border-color: #024f4f;
    --bs-btn-active-bg: #024f4f;
    --bs-btn-active-border-color: #024f4f;
}

/* Light/soft variants + readable "primary" text. */
.bg-light-primary { background-color: #e6fbf0 !important; }
.text-primary { color: #036666 !important; }
.text-hover-primary:hover, .menu-state-primary .menu-item .menu-link.active { color: #036666 !important; }
.bg-primary { background-color: #6CED9C !important; color: #013b3b !important; }
.bg-secondary, .bg-light-secondary { }
.badge.badge-primary { background-color: #6CED9C; color: #013b3b; }
.badge.badge-light-primary { background-color: #e6fbf0; color: #036666; }

/* Progress / checks / switches follow the primary. */
.form-check-input:checked { background-color: #036666; border-color: #036666; }
.progress-bar.bg-primary { background-color: #6CED9C !important; }

/* ---- Contrast fixes ---- */

/* Soft/light primary buttons: teal ink on the pale-mint bg (was mint-on-mint). */
.btn.btn-light-primary {
    --bs-btn-color: #036666;
    --bs-btn-bg: #e6fbf0;
    --bs-btn-border-color: #e6fbf0;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #036666;
    --bs-btn-hover-border-color: #036666;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #036666;
    --bs-btn-active-border-color: #036666;
    --bs-btn-icon-color: #036666;
}

/* Outline primary: teal ink, mint fill on hover. */
.btn.btn-outline-primary {
    --bs-btn-color: #036666;
    --bs-btn-border-color: #6CED9C;
    --bs-btn-hover-color: #013b3b;
    --bs-btn-hover-bg: #6CED9C;
    --bs-btn-hover-border-color: #6CED9C;
    --bs-btn-active-color: #013b3b;
    --bs-btn-active-bg: #6CED9C;
    --bs-btn-active-border-color: #6CED9C;
}

/* "active-color-primary" icon/text buttons: use readable teal, not pale mint. */
.btn.btn-active-color-primary:hover,
.btn.btn-active-color-primary.active,
.btn.btn-active-color-primary:active,
.text-hover-primary:hover {
    color: #036666 !important;
}

/* Any mint-green background: force dark-teal ink on light text inside it
   (fixes white/gray text on the mint cards, e.g. the dashboard welcome card). */
.bg-primary,
.symbol-label.bg-primary,
.badge.bg-primary {
    color: #013b3b !important;
}
.bg-primary .text-white,
.bg-primary .text-gray-100, .bg-primary .text-gray-200, .bg-primary .text-gray-300,
.bg-primary .text-gray-400, .bg-primary .text-gray-500, .bg-primary .text-gray-600,
.bg-primary .text-muted, .bg-primary .text-inverse-primary,
.bg-primary .opacity-75, .bg-primary .opacity-50 {
    color: #013b3b !important;
}
.bg-primary .opacity-75 { opacity: .9; }
.bg-primary .btn.btn-light-primary { --bs-btn-color: #036666; }

/* ============================================================================
   Kill remaining Metronic BLUE in active / hover / checked / focus states.
   Metronic hardcodes #1B84FF (light) / #006AE6 (dark) into component tokens and
   focus box-shadows that the earlier --bs-primary override does not reach.
   ============================================================================ */
:root,
[data-bs-theme="light"] {
    --bs-component-active-bg: #036666;
    --bs-component-active-color: #ffffff;
    --bs-component-hover-color: #036666;
    --bs-component-checked-bg: #036666;
    --bs-nav-pills-link-active-bg: #036666;
    --bs-text-primary: #036666;
    --bs-progress-bar-bg: #036666;
    --bs-ribbon-label-bg: #036666;
    --bs-scrolltop-bg-color: #036666;
    --bs-scrolltop-bg-color-hover: #024f4f;
    --bs-menu-link-color-hover: #036666;
    --bs-menu-link-color-show: #036666;
    --bs-menu-link-color-here: #036666;
    --bs-menu-link-color-active: #036666;
    --bs-primary-active: #036666;
    --bs-link-hover-color: #024f4f;
    --bs-link-hover-color-rgb: 2, 79, 79;
}
[data-bs-theme="dark"] {
    --bs-component-active-bg: #036666;
    --bs-component-active-color: #ffffff;
    --bs-component-hover-color: #6CED9C;
    --bs-component-checked-bg: #036666;
    --bs-nav-pills-link-active-bg: #036666;
    --bs-text-primary: #6CED9C;
    --bs-progress-bar-bg: #6CED9C;
    --bs-ribbon-label-bg: #036666;
    --bs-scrolltop-bg-color: #036666;
    --bs-scrolltop-bg-color-hover: #024f4f;
    --bs-menu-link-color-hover: #6CED9C;
    --bs-menu-link-color-show: #6CED9C;
    --bs-menu-link-color-here: #6CED9C;
    --bs-menu-link-color-active: #6CED9C;
    --bs-primary-active: #6CED9C;
    --bs-link-color: #6CED9C;
    --bs-link-color-rgb: 108, 237, 156;
    --bs-link-hover-color: #a9f3c9;
}

/* Focus rings: Metronic hardcodes a blue rgba glow — replace with mint. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-group:focus-within .form-control,
.btn-check:focus + .btn,
.page-link:focus {
    border-color: #6CED9C !important;
    box-shadow: 0 0 0 0.25rem rgba(108, 237, 156, 0.35) !important;
}

/* Checked controls (checkbox / radio / switch) — teal fill for white-check contrast. */
.form-check-input:checked {
    background-color: #036666 !important;
    border-color: #036666 !important;
}

/* Active fills that set their own local blue var. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.page-link.active,
.list-group-item.active {
    background-color: #036666 !important;
    border-color: #036666 !important;
    color: #ffffff !important;
}

/* Underline / line tabs active + hover. */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    border-bottom-color: #036666 !important;
    color: #036666 !important;
}

/* Menu items: active / open / current all go teal (was blue). */
.menu-item.here > .menu-link,
.menu-item.show > .menu-link,
.menu-item .menu-link.active,
.menu-link.active,
.menu-link:hover:not(.disabled),
.menu-state-primary .menu-item .menu-link.active {
    color: #036666 !important;
}
.menu-active-bg .menu-item .menu-link.active,
.menu-active-bg .menu-item.here > .menu-link {
    background-color: #e6fbf0 !important;
    color: #036666 !important;
}

/* Links inside content. */
a.link-primary,
.link-primary {
    color: #036666 !important;
}
a.link-primary:hover,
.link-primary:hover {
    color: #024f4f !important;
}

/* ============================================================================
   SweetAlert2 — brand shape & palette (applies to appConfirm/appAlert,
   wire:confirm, deal toasts, etc.). Only shape + icon colors; button COLORS
   stay driven by each call's customClass (btn-primary / btn-danger / btn-light).
   ============================================================================ */
.swal2-popup {
    border-radius: 1.5rem !important;
    font-family: 'Thmanyah Sans', sans-serif !important;
    box-shadow: 0 24px 60px rgba(1, 59, 59, .22);
    padding: 2rem 1.75rem;
}
.swal2-title { color: #013b3b; font-weight: 800; letter-spacing: -.01em; }
.swal2-html-container { color: #46506a; }
.swal2-actions { gap: .5rem; }
/* All action buttons → pill shape (matches the app's rounded buttons) + mint focus ring. */
.swal2-styled { border-radius: 50rem !important; box-shadow: none !important; }
.swal2-styled:focus { box-shadow: 0 0 0 .25rem rgba(108, 237, 156, .4) !important; }
/* Icons → brand teal/mint instead of stock blue/green. */
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: #036666 !important; color: #036666 !important; }
.swal2-icon.swal2-success { border-color: rgba(108, 237, 156, .55) !important; color: #036666 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(108, 237, 156, .5) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #036666 !important; }
/* Toasts (e.g. deal notifications) → rounded + brand progress bar. */
.swal2-toast { border-radius: 14px !important; box-shadow: 0 12px 34px rgba(1, 59, 59, .18) !important; }
.swal2-timer-progress-bar { background: linear-gradient(90deg, #6CED9C, #036666) !important; }

/* ============================================================================
   CRM chat — inline "reply" icon beside a customer's message (hover-revealed).
   ============================================================================ */
.crm-reply-host { position: relative; }
.crm-reply-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    inset-inline-end: -42px;                 /* sits just past the bubble, toward center */
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-body-bg, #fff); color: var(--bs-gray-500);
    border: 1px solid var(--bs-gray-300); box-shadow: 0 2px 8px rgba(1, 59, 59, .1);
    opacity: 0; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer; z-index: 3;
}
.crm-reply-host:hover .crm-reply-btn,
.crm-reply-btn:focus-visible { opacity: 1; }
.crm-reply-btn:hover { color: var(--bs-primary); border-color: var(--bs-primary); background: var(--bs-primary-light, #e6fbf0); }
/* Touch devices have no hover — keep it visible but subtle. */
@media (hover: none) { .crm-reply-btn { opacity: .6; } }

/* ============================================================================
   CRM chat — new messages slide + fade in instead of popping. Livewire's morph
   only inserts fresh DOM nodes for genuinely new messages, so the animation
   plays for those (and once on a full load), not for already-present bubbles.
   ============================================================================ */
@keyframes crmMsgIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
/* Only genuinely-new messages animate (optimistic sends fade via inline opacity,
   real-time arrivals animate via wire:transition). A blanket rule on .message-item
   replays on EVERY Livewire morph and makes the whole chat view flicker on send. */
.message-item-new { animation: crmMsgIn .3s cubic-bezier(.16, .84, .44, 1); }
@media (prefers-reduced-motion: reduce) {
    .message-item-new { animation: none !important; }
}

/* CRM chat message input — no focus ring/border while typing (flush, seamless). */
#chatMessageInput,
#chatMessageInput:focus,
#chatMessageInput:focus-visible {
    box-shadow: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
}