/* ==========================================================
   JLI CALM ACTION BUTTON PALETTE - AH6
   ----------------------------------------------------------
   Goal: remove the bright/harsh indigo-purple action buttons
   across the application and replace them with a calmer,
   enterprise-friendly Deep Teal -> Ocean Blue treatment.

   Semantic danger/warning buttons are intentionally excluded.
   ========================================================== */

:root {
    --jli-action-teal: #0f766e;
    --jli-action-teal-dark: #115e59;
    --jli-action-ocean: #0369a1;
    --jli-action-ocean-dark: #075985;
    --jli-action-shadow: rgba(15, 118, 110, .18);
    --jli-action-shadow-hover: rgba(3, 105, 161, .22);
}

/* Explicit primary action class for important page actions. */
.jli-calm-primary {
    background-color: var(--jli-action-teal) !important;
    background-image: linear-gradient(135deg, var(--jli-action-teal) 0%, #0e7490 52%, var(--jli-action-ocean) 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 7px 16px var(--jli-action-shadow), inset 0 1px 0 rgba(255,255,255,.14) !important;
    text-shadow: none !important;
}

/*
   All blue/indigo/purple/violet/sky/cyan gradient ACTION buttons.
   Red/rose/pink ending gradients are left alone because those are
   usually semantic warning/danger actions.
*/
:is(button,a)[class*="bg-gradient-to-"][class*="from-blue-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]),
:is(button,a)[class*="bg-gradient-to-"][class*="from-sky-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]),
:is(button,a)[class*="bg-gradient-to-"][class*="from-cyan-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]),
:is(button,a)[class*="bg-gradient-to-"][class*="from-indigo-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]),
:is(button,a)[class*="bg-gradient-to-"][class*="from-purple-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]),
:is(button,a)[class*="bg-gradient-to-"][class*="from-violet-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]) {
    background-color: var(--jli-action-teal) !important;
    background-image: linear-gradient(135deg, var(--jli-action-teal) 0%, #0e7490 52%, var(--jli-action-ocean) 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 7px 16px var(--jli-action-shadow), inset 0 1px 0 rgba(255,255,255,.14) !important;
    text-shadow: none !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Strong solid blue-family action buttons get the same calm palette. */
:is(button,a).bg-blue-500,
:is(button,a).bg-blue-600,
:is(button,a).bg-blue-700,
:is(button,a).bg-sky-500,
:is(button,a).bg-sky-600,
:is(button,a).bg-sky-700,
:is(button,a).bg-cyan-500,
:is(button,a).bg-cyan-600,
:is(button,a).bg-cyan-700,
:is(button,a).bg-indigo-500,
:is(button,a).bg-indigo-600,
:is(button,a).bg-indigo-700,
:is(button,a).bg-purple-500,
:is(button,a).bg-purple-600,
:is(button,a).bg-purple-700,
:is(button,a).bg-violet-500,
:is(button,a).bg-violet-600,
:is(button,a).bg-violet-700 {
    background-color: var(--jli-action-teal) !important;
    background-image: linear-gradient(135deg, var(--jli-action-teal) 0%, var(--jli-action-ocean) 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.15) !important;
    box-shadow: 0 6px 14px var(--jli-action-shadow) !important;
}

/* Bootstrap/common primary buttons. */
.btn-primary,
.jli-primary-btn,
.hero-primary-action {
    background-color: var(--jli-action-teal) !important;
    background-image: linear-gradient(135deg, var(--jli-action-teal) 0%, var(--jli-action-ocean) 100%) !important;
    border-color: var(--jli-action-teal-dark) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px var(--jli-action-shadow) !important;
}

/* Calmer interaction feedback. */
.jli-calm-primary:hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-blue-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-sky-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-cyan-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-indigo-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-purple-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
:is(button,a)[class*="bg-gradient-to-"][class*="from-violet-"]:not([class*="to-red-"]):not([class*="to-rose-"]):not([class*="to-pink-"]):not([class*="to-orange-"]):hover,
.btn-primary:hover,
.jli-primary-btn:hover,
.hero-primary-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.035) saturate(.95) !important;
    box-shadow: 0 10px 20px var(--jli-action-shadow-hover), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

:is(button,a).bg-blue-500:hover,
:is(button,a).bg-blue-600:hover,
:is(button,a).bg-blue-700:hover,
:is(button,a).bg-sky-500:hover,
:is(button,a).bg-sky-600:hover,
:is(button,a).bg-sky-700:hover,
:is(button,a).bg-cyan-500:hover,
:is(button,a).bg-cyan-600:hover,
:is(button,a).bg-cyan-700:hover,
:is(button,a).bg-indigo-500:hover,
:is(button,a).bg-indigo-600:hover,
:is(button,a).bg-indigo-700:hover,
:is(button,a).bg-purple-500:hover,
:is(button,a).bg-purple-600:hover,
:is(button,a).bg-purple-700:hover,
:is(button,a).bg-violet-500:hover,
:is(button,a).bg-violet-600:hover,
:is(button,a).bg-violet-700:hover {
    background-color: var(--jli-action-ocean-dark) !important;
    background-image: linear-gradient(135deg, var(--jli-action-teal-dark) 0%, var(--jli-action-ocean-dark) 100%) !important;
    box-shadow: 0 9px 18px var(--jli-action-shadow-hover) !important;
}

/* Keep focus visible without the old bright indigo halo. */
.jli-calm-primary:focus-visible,
:is(button,a)[class*="bg-gradient-to-"]:focus-visible,
:is(button,a).bg-blue-600:focus-visible,
:is(button,a).bg-sky-600:focus-visible,
:is(button,a).bg-cyan-600:focus-visible,
:is(button,a).bg-indigo-600:focus-visible,
:is(button,a).bg-purple-600:focus-visible,
:is(button,a).bg-violet-600:focus-visible,
.btn-primary:focus-visible,
.jli-primary-btn:focus-visible,
.hero-primary-action:focus-visible {
    outline: 3px solid rgba(14, 116, 144, .18) !important;
    outline-offset: 2px;
}

/* Disabled buttons stay quiet and readable. */
:is(button,a):disabled,
:is(button,a)[aria-disabled="true"] {
    box-shadow: none !important;
}