/* ==========================================================
   JLI UNIFIED COLOR SYSTEM - AH26
   ----------------------------------------------------------
   Primary   : Ocean Blue
   Button    : Ocean Blue → Deep Teal
   Accent    : Rose
   Neutral   : Slate
   Success   : Emerald
   Warning   : Amber
   Danger    : Rose/Red
   ========================================================== */

:root {
    --jli-primary: #0369a1;
    --jli-primary-dark: #075985;
    --jli-primary-deep: #0c4a6e;
    --jli-primary-soft: #eff6ff;

    --jli-button-accent: #0f766e;
    --jli-button-accent-dark: #115e59;
    --jli-button-accent-soft: #f0fdfa;

    --jli-accent: #e11d48;
    --jli-accent-dark: #be123c;
    --jli-accent-soft: #fff1f2;

    --jli-bg: #f8fafc;
    --jli-surface: #ffffff;
    --jli-surface-soft: #f8fafc;
    --jli-border: #e2e8f0;
    --jli-text: #0f172a;
    --jli-muted: #64748b;

    --jli-success: #059669;
    --jli-success-soft: #ecfdf5;
    --jli-warning: #d97706;
    --jli-warning-soft: #fffbeb;
    --jli-danger: #e11d48;
    --jli-danger-soft: #fff1f2;

    --primary: var(--jli-primary);
    --secondary: var(--jli-accent);
    --soft: var(--jli-primary-soft);
    --bg: var(--jli-bg);
    --card: var(--jli-surface);
    --text: var(--jli-text);
    --muted: var(--jli-muted);
    --border: var(--jli-border);
}

/* All selectable app themes now share the calmer enterprise action palette. */
.theme-sakura,.theme-ocean,.theme-emerald,.theme-royal,.theme-sunset {
    --primary: var(--jli-primary) !important;
    --secondary: var(--jli-accent) !important;
    --soft: var(--jli-primary-soft) !important;
    --bg: var(--jli-bg) !important;
}

/* Keep the whole application visually consistent. */
html,
body,
.jli-shell {
    background-color: var(--jli-bg);
    color: var(--jli-text);
}

.jli-shell {
    background:
        radial-gradient(circle at top left, rgba(3,105,161,.08), transparent 30rem),
        radial-gradient(circle at top right, rgba(225,29,72,.055), transparent 28rem),
        var(--jli-bg) !important;
}

/* ----------------------------------------------------------
   Legacy/Common page components
   ---------------------------------------------------------- */
.full-page {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.section-shell,
.display-card {
    background: var(--jli-surface) !important;
    border-color: var(--jli-border) !important;
}

.section-banner,
.display-header {
    background:
        linear-gradient(135deg, var(--jli-primary-soft) 0%, #ffffff 58%, var(--jli-accent-soft) 100%) !important;
    border-color: var(--jli-border) !important;
}

.section-banner-icon {
    background: linear-gradient(135deg, var(--jli-primary), var(--jli-button-accent)) !important;
    box-shadow: 0 10px 22px rgba(3,105,161,.20) !important;
}

.section-banner-title,
.display-title {
    color: var(--jli-primary-deep) !important;
}

.number-badge {
    background: var(--jli-primary) !important;
}

.field-label {
    color: var(--jli-muted) !important;
}

/* ----------------------------------------------------------
   Tailwind color-family normalization
   Decorative blue/sky/cyan/purple/violet => JLI Indigo.
   Pink/fuchsia => JLI Rose.
   Semantic green/emerald/amber/red remain untouched.
   ---------------------------------------------------------- */

/* TEXT */
.text-blue-400,.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800,.text-blue-900,
.text-indigo-400,.text-indigo-500,.text-indigo-600,.text-indigo-700,.text-indigo-800,.text-indigo-900,
.text-sky-400,.text-sky-500,.text-sky-600,.text-sky-700,.text-sky-800,.text-sky-900,
.text-cyan-400,.text-cyan-500,.text-cyan-600,.text-cyan-700,.text-cyan-800,.text-cyan-900,
.text-purple-400,.text-purple-500,.text-purple-600,.text-purple-700,.text-purple-800,.text-purple-900,
.text-violet-400,.text-violet-500,.text-violet-600,.text-violet-700,.text-violet-800,.text-violet-900 {
    color: var(--jli-primary) !important;
}

.text-pink-400,.text-pink-500,.text-pink-600,.text-pink-700,.text-pink-800,.text-pink-900,
.text-fuchsia-400,.text-fuchsia-500,.text-fuchsia-600,.text-fuchsia-700,.text-fuchsia-800,.text-fuchsia-900 {
    color: var(--jli-accent) !important;
}

/* BACKGROUNDS */
.bg-blue-50,.bg-sky-50,.bg-cyan-50,.bg-indigo-50,.bg-purple-50,.bg-violet-50 {
    background-color: var(--jli-primary-soft) !important;
}
.bg-blue-100,.bg-sky-100,.bg-cyan-100,.bg-indigo-100,.bg-purple-100,.bg-violet-100 {
    background-color: #e0e7ff !important;
}
.bg-blue-500,.bg-blue-600,.bg-blue-700,
.bg-sky-500,.bg-sky-600,.bg-sky-700,
.bg-cyan-500,.bg-cyan-600,.bg-cyan-700,
.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,
.bg-purple-500,.bg-purple-600,.bg-purple-700,
.bg-violet-500,.bg-violet-600,.bg-violet-700 {
    background-color: var(--jli-primary) !important;
}
.bg-pink-50,.bg-fuchsia-50 {
    background-color: var(--jli-accent-soft) !important;
}
.bg-pink-500,.bg-pink-600,.bg-pink-700,
.bg-fuchsia-500,.bg-fuchsia-600,.bg-fuchsia-700 {
    background-color: var(--jli-accent) !important;
}

/* BORDERS/RINGS */
.border-blue-100,.border-blue-200,.border-blue-300,
.border-sky-100,.border-sky-200,.border-sky-300,
.border-cyan-100,.border-cyan-200,.border-cyan-300,
.border-indigo-100,.border-indigo-200,.border-indigo-300,
.border-purple-100,.border-purple-200,.border-purple-300,
.border-violet-100,.border-violet-200,.border-violet-300 {
    border-color: #c7d2fe !important;
}
.border-pink-100,.border-pink-200,.border-pink-300,
.border-fuchsia-100,.border-fuchsia-200,.border-fuchsia-300 {
    border-color: #fecdd3 !important;
}

.ring-blue-100,.ring-blue-200,.ring-sky-100,.ring-sky-200,
.ring-cyan-100,.ring-cyan-200,.ring-indigo-100,.ring-indigo-200,.ring-purple-100,.ring-purple-200,
.ring-violet-100,.ring-violet-200 {
    --tw-ring-color: #c7d2fe !important;
}
.ring-pink-100,.ring-pink-200,.ring-fuchsia-100,.ring-fuchsia-200 {
    --tw-ring-color: #fecdd3 !important;
}

/* GRADIENT START */
.from-blue-400,.from-blue-500,.from-blue-600,.from-blue-700,.from-blue-800,
.from-sky-400,.from-sky-500,.from-sky-600,.from-sky-700,.from-sky-800,
.from-cyan-400,.from-cyan-500,.from-cyan-600,.from-cyan-700,.from-cyan-800,
.from-indigo-400,.from-indigo-500,.from-indigo-600,.from-indigo-700,.from-indigo-800,
.from-purple-400,.from-purple-500,.from-purple-600,.from-purple-700,.from-purple-800,
.from-violet-400,.from-violet-500,.from-violet-600,.from-violet-700,.from-violet-800 {
    --tw-gradient-from: var(--jli-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(3 105 161 / 0) var(--tw-gradient-to-position) !important;
}

/* GRADIENT END */
.to-blue-400,.to-blue-500,.to-blue-600,.to-blue-700,.to-blue-800,
.to-sky-400,.to-sky-500,.to-sky-600,.to-sky-700,.to-sky-800,
.to-cyan-400,.to-cyan-500,.to-cyan-600,.to-cyan-700,.to-cyan-800,
.to-indigo-400,.to-indigo-500,.to-indigo-600,.to-indigo-700,.to-indigo-800,
.to-purple-400,.to-purple-500,.to-purple-600,.to-purple-700,.to-purple-800,
.to-violet-400,.to-violet-500,.to-violet-600,.to-violet-700,.to-violet-800 {
    --tw-gradient-to: var(--jli-button-accent) var(--tw-gradient-to-position) !important;
}
.to-pink-400,.to-pink-500,.to-pink-600,.to-pink-700,.to-pink-800,
.to-fuchsia-400,.to-fuchsia-500,.to-fuchsia-600,.to-fuchsia-700,.to-fuchsia-800 {
    --tw-gradient-to: var(--jli-accent) var(--tw-gradient-to-position) !important;
}

/* MIDDLE GRADIENT */
.via-blue-400,.via-blue-500,.via-blue-600,.via-blue-700,
.via-sky-400,.via-sky-500,.via-sky-600,.via-sky-700,
.via-cyan-400,.via-cyan-500,.via-cyan-600,.via-cyan-700,
.via-indigo-400,.via-indigo-500,.via-indigo-600,.via-indigo-700,
.via-purple-400,.via-purple-500,.via-purple-600,.via-purple-700,
.via-violet-400,.via-violet-500,.via-violet-600,.via-violet-700 {
    --tw-gradient-via: var(--jli-primary) var(--tw-gradient-via-position) !important;
}

/* ----------------------------------------------------------
   Shared buttons / cards
   ---------------------------------------------------------- */
.jli-primary-btn,
.btn-primary,
.hero-primary-action {
    background: linear-gradient(135deg, var(--jli-primary), var(--jli-button-accent)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.jli-primary-btn:hover,
.btn-primary:hover,
.hero-primary-action:hover {
    filter: brightness(.98);
}

.jli-card,
.panel-card,
.premium-card {
    border-color: var(--jli-border) !important;
}

/* Sidebar / topbar keep the exact same JLI palette as pages. */
.nav-parent:hover,
.nav-parent.active,
.nav-children a:hover,
.nav-children a.active {
    background: var(--jli-primary-soft) !important;
    color: var(--jli-primary) !important;
}

.page-title span {
    color: var(--jli-primary) !important;
}

/* Semantic states intentionally remain visually distinct. */
.jli-success,
.status-success {
    color: var(--jli-success);
}
.jli-warning,
.status-warning {
    color: var(--jli-warning);
}
.jli-danger,
.status-danger {
    color: var(--jli-danger);
}


/* ----------------------------------------------------------
   AH1 Premium action button polish
   Removes the harsh purple feel and gives common action
   buttons a calmer Ocean Blue → Deep Teal enterprise look.
   ---------------------------------------------------------- */
button[class*="bg-gradient-to-"][class*="from-blue-"],
button[class*="bg-gradient-to-"][class*="from-sky-"],
button[class*="bg-gradient-to-"][class*="from-cyan-"],
button[class*="bg-gradient-to-"][class*="from-indigo-"],
button[class*="bg-gradient-to-"][class*="from-purple-"],
button[class*="bg-gradient-to-"][class*="from-violet-"],
a[class*="bg-gradient-to-"][class*="from-blue-"],
a[class*="bg-gradient-to-"][class*="from-sky-"],
a[class*="bg-gradient-to-"][class*="from-cyan-"],
a[class*="bg-gradient-to-"][class*="from-indigo-"],
a[class*="bg-gradient-to-"][class*="from-purple-"],
a[class*="bg-gradient-to-"][class*="from-violet-"] {
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 7px 16px rgba(3,105,161,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
    text-shadow: 0 1px 1px rgba(2,6,23,.10);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

button[class*="bg-gradient-to-"][class*="from-blue-"]:hover,
button[class*="bg-gradient-to-"][class*="from-sky-"]:hover,
button[class*="bg-gradient-to-"][class*="from-cyan-"]:hover,
button[class*="bg-gradient-to-"][class*="from-indigo-"]:hover,
button[class*="bg-gradient-to-"][class*="from-purple-"]:hover,
button[class*="bg-gradient-to-"][class*="from-violet-"]:hover,
a[class*="bg-gradient-to-"][class*="from-blue-"]:hover,
a[class*="bg-gradient-to-"][class*="from-sky-"]:hover,
a[class*="bg-gradient-to-"][class*="from-cyan-"]:hover,
a[class*="bg-gradient-to-"][class*="from-indigo-"]:hover,
a[class*="bg-gradient-to-"][class*="from-purple-"]:hover,
a[class*="bg-gradient-to-"][class*="from-violet-"]:hover {
    transform: translateY(-1px);
    filter: saturate(1.02) brightness(1.035);
    box-shadow: 0 10px 22px rgba(3,105,161,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

button[class*="bg-gradient-to-"][class*="from-blue-"]:active,
button[class*="bg-gradient-to-"][class*="from-sky-"]:active,
button[class*="bg-gradient-to-"][class*="from-cyan-"]:active,
button[class*="bg-gradient-to-"][class*="from-indigo-"]:active,
button[class*="bg-gradient-to-"][class*="from-purple-"]:active,
button[class*="bg-gradient-to-"][class*="from-violet-"]:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(3,105,161,.15) !important;
}

button[class*="bg-gradient-to-"]:focus-visible,
a[class*="bg-gradient-to-"]:focus-visible,
.jli-primary-btn:focus-visible,
.btn-primary:focus-visible,
.hero-primary-action:focus-visible {
    outline: 3px solid rgba(14,165,233,.20) !important;
    outline-offset: 2px;
}