/**
 * ═══════════════════════════════════════════════════════════════
 * 
 *   Y A P I   ×   M E T R O N I C   T H E M E   I N T E G R A T I O N
 *   
 *   "The book opens, light emerges — knowledge illuminates."
 *   
 *   This file maps Metronic/KTUI Tailwind CSS variables to the
 *   YaPI Design System colors for consistent brand identity.
 *   
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   C S S   V A R I A B L E S   -   Y A P I   P A L E T T E
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────
       YaPI Core Colors
       ───────────────────────────────────────────────────────────── */
    /* The Binding — Primary (solid, no gradient) */
    --yapi-binding: #56C596;
    --yapi-binding-rich: #3FA580;
    --yapi-binding-soft: #6FD3AA;
    --yapi-binding-rgb: 86, 197, 150;
    /* The Pages — Secondary (solid, no gradient) */
    --yapi-leaf: #205072;
    --yapi-leaf-vivid: #2B6C8D;
    --yapi-leaf-deep: #1A415C;
    --yapi-leaf-rgb: 32, 80, 114;
    /* The Light — Precious, warm, enlightening (ACCENT/PREMIUM) */
    --yapi-light: #D4940A;
    --yapi-light-bright: #EBAA1E;
    --yapi-light-soft: #F4C55A;
    --yapi-light-rgb: 212, 148, 10;
    /* The Flame — Energy, urgency, warmth (WARNING) */
    --yapi-flame: #C67322;
    --yapi-flame-bright: #DB8533;
    --yapi-flame-rgb: 198, 115, 34;
    /* The Deep — Wisdom, clarity, depth (INFO) */
    --yapi-deep: #0B6B6F;
    --yapi-deep-vivid: #0E8589;
    --yapi-deep-dark: #084F52;
    --yapi-deep-rgb: 11, 107, 111;
    /* The Warning — Attention, caution (DANGER/DESTRUCTIVE) */
    --yapi-warning: #B83A2E;
    --yapi-warning-soft: #D44A3D;
    --yapi-warning-rgb: 184, 58, 46;
    /* ─────────────────────────────────────────────────────────────
       YaPI Canvas (Neutrals)
       ───────────────────────────────────────────────────────────── */
    --yapi-ink: #1A1D1F;
    --yapi-graphite: #2E3338;
    --yapi-slate: #464D54;
    --yapi-pewter: #6B747D;
    --yapi-zinc: #8E959C;
    --yapi-silver: #B4B9BD;
    --yapi-fog: #D5D8DA;
    --yapi-mist: #EAEBEC;
    --yapi-pearl: #F5F5F6;
    --yapi-parchment: #FAFAF9;
    --yapi-ivory: #FFFFFF;
    /* ─────────────────────────────────────────────────────────────
       YaPI Gradients
       ───────────────────────────────────────────────────────────── */
    /* Canopy — Primary (solid per management) */
    --yapi-grad-canopy: #56C596;
    /* Emergence — The moment light breaks through (PREMIUM GRADIENT) */
    --yapi-grad-emergence: linear-gradient(155deg, #18442B 0%, #1F5535 22%, #3D9A50 48%, #D4940A 78%, #EBAA1E 100%);
    /* Aureate — Pure golden illumination (ACCENT GRADIENT) */
    --yapi-grad-aureate: linear-gradient(170deg, #A67608 0%, #D4940A 30%, #EBAA1E 60%, #F4C55A 85%, #FAD97A 100%);
    /* Abyss — The depth of understanding (INFO GRADIENT) */
    --yapi-grad-abyss: linear-gradient(165deg, #084F52 0%, #0B6B6F 35%, #0E8589 65%, #12A0A5 90%, #18B5BB 100%);
    /* ─────────────────────────────────────────────────────────────
       YaPI Shadows & Glows
       ───────────────────────────────────────────────────────────── */
    --yapi-shadow-whisper: 0 1px 2px rgba(26, 29, 31, 0.03), 0 1px 3px rgba(26, 29, 31, 0.04);
    --yapi-shadow-soft: 0 1px 2px rgba(26, 29, 31, 0.04), 0 2px 4px rgba(26, 29, 31, 0.04), 0 4px 8px rgba(26, 29, 31, 0.03);
    --yapi-shadow-medium: 0 2px 4px rgba(26, 29, 31, 0.03), 0 4px 8px rgba(26, 29, 31, 0.04), 0 8px 16px rgba(26, 29, 31, 0.04);
    --yapi-shadow-deep: 0 4px 8px rgba(26, 29, 31, 0.03), 0 8px 16px rgba(26, 29, 31, 0.04), 0 16px 32px rgba(26, 29, 31, 0.05), 0 24px 48px rgba(26, 29, 31, 0.03);
    --yapi-glow-binding: 0 4px 14px rgba(24, 68, 43, 0.18), 0 8px 24px rgba(24, 68, 43, 0.12);
    --yapi-glow-leaf: 0 4px 14px rgba(61, 154, 80, 0.2), 0 8px 24px rgba(61, 154, 80, 0.12);
    --yapi-glow-light: 0 4px 14px rgba(212, 148, 10, 0.22), 0 8px 24px rgba(212, 148, 10, 0.14);
    --yapi-glow-deep: 0 4px 14px rgba(11, 107, 111, 0.2), 0 8px 24px rgba(11, 107, 111, 0.12);
    --yapi-glow-warning: 0 4px 14px rgba(184, 58, 46, 0.18), 0 8px 24px rgba(184, 58, 46, 0.1);
    /* ─────────────────────────────────────────────────────────────
       YaPI Geometry & Motion
       ───────────────────────────────────────────────────────────── */
    --yapi-radius-xs: 4px;
    --yapi-radius-sm: 6px;
    --yapi-radius-md: 8px;
    --yapi-radius-lg: 10px;
    --yapi-radius-xl: 14px;
    --yapi-radius-2xl: 18px;
    --yapi-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --yapi-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --yapi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --yapi-duration-fast: 140ms;
    --yapi-duration: 200ms;
    --yapi-duration-slow: 320ms;
}


/* ═══════════════════════════════════════════════════════════════
   M E T R O N I C / K T U I   T H E M E   O V E R R I D E S
   
   Maps KTUI CSS variables to YaPI colors for seamless integration.
   These overrides work with Tailwind CSS utility classes.
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-kt-theme-mode="light"] {
    /* ─────────────────────────────────────────────────────────────
       Primary → YaPI Primary (solid)
       Used for: Main CTAs, hero elements, primary buttons
       ───────────────────────────────────────────────────────────── */
    --color-primary: var(--yapi-binding-rgb);
    --tw-ring-color: rgba(var(--yapi-binding-rgb), 0.5);
    /* ─────────────────────────────────────────────────────────────
       Secondary → YaPI Secondary (solid)
       Used for: Edit, Update, Modify actions
       ───────────────────────────────────────────────────────────── */
    --color-secondary: var(--yapi-leaf-rgb);
    /* ─────────────────────────────────────────────────────────────
       Info → YaPI Deep (Teal)
       Used for: View, Details, Send, Export actions
       ───────────────────────────────────────────────────────────── */
    --color-info: var(--yapi-deep-rgb);
    /* ─────────────────────────────────────────────────────────────
       Destructive/Danger → YaPI Warning (Deep Red)
       Used for: Delete, Remove, Reject actions
       ───────────────────────────────────────────────────────────── */
    --color-destructive: var(--yapi-warning-rgb);
    --color-danger: var(--yapi-warning-rgb);
    /* ─────────────────────────────────────────────────────────────
       Warning → YaPI Flame (Warm Orange)
       Used for: Caution, attention-needed states
       ───────────────────────────────────────────────────────────── */
    --color-warning: var(--yapi-flame-rgb);
    /* ─────────────────────────────────────────────────────────────
       Success → YaPI Leaf (Growth Green)
       Used for: Success states, completion, positive feedback
       ───────────────────────────────────────────────────────────── */
    --color-success: var(--yapi-leaf-rgb);
    /* ─────────────────────────────────────────────────────────────
       Accent → YaPI Light (Golden)
       Used for: Premium, highlights, special actions
       ───────────────────────────────────────────────────────────── */
    --color-accent: var(--yapi-light-rgb);
    /* ─────────────────────────────────────────────────────────────
       Background & Foreground
       ───────────────────────────────────────────────────────────── */
    --color-background: 255, 255, 255;
    --color-foreground: 26, 29, 31;
    --color-muted: 245, 245, 246;
    --color-muted-foreground: 107, 116, 125;
}


/* Dark theme overrides */

[data-kt-theme-mode="dark"] {
    --color-background: 26, 29, 31;
    --color-foreground: 245, 245, 246;
    --color-muted: 46, 51, 56;
    --color-muted-foreground: 142, 149, 156;
}


/* ═══════════════════════════════════════════════════════════════
   K T - B T N   O V E R R I D E S   W I T H   Y A P I   C O L O R S
   
   These override the default KTUI button styles with YaPI colors
   while maintaining full KTUI class compatibility.
   ═══════════════════════════════════════════════════════════════ */


/* Primary Button — Solid (#56C596) */

.kt-btn:not(.kt-btn-secondary):not(.kt-btn-destructive):not(.kt-btn-mono):not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-dim):not(.kt-btn-info):not(.kt-btn-warning):not(.kt-btn-light):not(.kt-btn-success) {
    background: #56C596 !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all var(--yapi-duration) var(--yapi-ease-out) !important;
}

.kt-btn:not(.kt-btn-secondary):not(.kt-btn-destructive):not(.kt-btn-mono):not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-dim):not(.kt-btn-info):not(.kt-btn-warning):not(.kt-btn-light):not(.kt-btn-success):hover {
    background: #4AB58A !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

.kt-btn:not(.kt-btn-secondary):not(.kt-btn-destructive):not(.kt-btn-mono):not(.kt-btn-outline):not(.kt-btn-ghost):not(.kt-btn-dim):not(.kt-btn-info):not(.kt-btn-warning):not(.kt-btn-light):not(.kt-btn-success):active {
    transform: translateY(0.5px);
    box-shadow: var(--yapi-shadow-whisper), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}


/* kt-btn-primary explicit class */

.kt-btn.kt-btn-primary {
    background: #56C596 !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.kt-btn.kt-btn-primary:hover {
    background: #4AB58A !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}


/* Secondary Button — Solid (#205072) */

.kt-btn.kt-btn-secondary {
    background: #205072 !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}

.kt-btn.kt-btn-secondary:hover {
    background: #1A415C !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px);
}


/* Info Button — Deep Teal */

.kt-btn.kt-btn-info {
    background: linear-gradient(180deg, #0D7A7E 0%, #0B6B6F 50%, #095D61 100%) !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.kt-btn.kt-btn-info:hover {
    background: linear-gradient(180deg, #0B6B6F 0%, #095D61 50%, #084F52 100%) !important;
    box-shadow: var(--yapi-shadow-medium), var(--yapi-glow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}


/* Destructive/Danger Button — Warning Red */

.kt-btn.kt-btn-destructive,
.kt-btn.kt-btn-danger {
    background: linear-gradient(180deg, #C94236 0%, #B83A2E 50%, #A53328 100%) !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.kt-btn.kt-btn-destructive:hover,
.kt-btn.kt-btn-danger:hover {
    background: linear-gradient(180deg, #B83A2E 0%, #A53328 50%, #922D23 100%) !important;
    box-shadow: var(--yapi-shadow-medium), var(--yapi-glow-warning), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}


/* Warning Button — Flame Orange */

.kt-btn.kt-btn-warning {
    background: linear-gradient(180deg, #DB8533 0%, #C67322 50%, #B0661E 100%) !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
}

.kt-btn.kt-btn-warning:hover {
    background: linear-gradient(180deg, #C67322 0%, #B0661E 50%, #9A5A1A 100%) !important;
    box-shadow: var(--yapi-shadow-medium), 0 4px 14px rgba(198, 115, 34, 0.25) !important;
    transform: translateY(-1px);
}


/* Success Button — Leaf Green (same as secondary) */

.kt-btn.kt-btn-success {
    background: #56C596 !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.kt-btn.kt-btn-success:hover {
    background: #4AB58A !important;
    box-shadow: var(--yapi-shadow-medium) !important;
    transform: translateY(-1px);
}


/* Outline Button — With YaPI binding border */

.kt-btn.kt-btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--yapi-fog) !important;
    color: var(--yapi-slate) !important;
    box-shadow: none !important;
}

.kt-btn.kt-btn-outline:hover {
    background: var(--yapi-pearl) !important;
    border-color: var(--yapi-silver) !important;
    color: var(--yapi-graphite) !important;
}


/* Ghost Button — Subtle YaPI styling */

.kt-btn.kt-btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--yapi-slate) !important;
    box-shadow: none !important;
}

.kt-btn.kt-btn-ghost:hover {
    background: var(--yapi-pearl) !important;
    color: var(--yapi-graphite) !important;
}


/* Light Button — Neutral */

.kt-btn.kt-btn-light {
    background: linear-gradient(180deg, var(--yapi-pearl) 0%, var(--yapi-mist) 100%) !important;
    border: 1px solid var(--yapi-fog) !important;
    color: var(--yapi-slate) !important;
    box-shadow: var(--yapi-shadow-whisper) !important;
}

.kt-btn.kt-btn-light:hover {
    background: linear-gradient(180deg, var(--yapi-mist) 0%, var(--yapi-fog) 100%) !important;
    color: var(--yapi-graphite) !important;
}


/* Mono Button — Neutral dark */

.kt-btn.kt-btn-mono {
    background: linear-gradient(180deg, #6B747D 0%, #5E666F 50%, #525A62 100%) !important;
    border: none !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-soft) !important;
}

.kt-btn.kt-btn-mono:hover {
    background: linear-gradient(180deg, #5E666F 0%, #525A62 50%, #464D54 100%) !important;
    box-shadow: var(--yapi-shadow-medium) !important;
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
   T A I L W I N D   U T I L I T Y   O V E R R I D E S
   
   Override Tailwind's default primary/secondary/etc colors
   with YaPI colors for consistent styling.
   ═══════════════════════════════════════════════════════════════ */


/* Text Colors */

.text-primary {
    color: var(--yapi-binding) !important;
}

.text-secondary {
    color: var(--yapi-leaf) !important;
}

.text-info {
    color: var(--yapi-deep) !important;
}

.text-success {
    color: var(--yapi-leaf) !important;
}

.text-warning {
    color: var(--yapi-flame) !important;
}

.text-danger,
.text-destructive {
    color: var(--yapi-warning) !important;
}

.text-accent {
    color: var(--yapi-light) !important;
}


/* Background Colors */

.bg-primary {
    background-color: var(--yapi-binding) !important;
}

.bg-secondary {
    background-color: var(--yapi-leaf) !important;
}

.bg-info {
    background-color: var(--yapi-deep) !important;
}

.bg-success {
    background-color: var(--yapi-leaf) !important;
}

.bg-warning {
    background-color: var(--yapi-flame) !important;
}

.bg-danger,
.bg-destructive {
    background-color: var(--yapi-warning) !important;
}

.bg-accent {
    background-color: var(--yapi-light) !important;
}


/* Light Background Variants */

.bg-primary-light,
.bg-primary\/10 {
    background-color: rgba(86, 197, 150, 0.1) !important;
}

.bg-secondary-light,
.bg-secondary\/10 {
    background-color: rgba(32, 80, 114, 0.1) !important;
}

.bg-info-light,
.bg-info\/10 {
    background-color: rgba(11, 107, 111, 0.1) !important;
}

.bg-success-light,
.bg-success\/10 {
    background-color: rgba(61, 154, 80, 0.1) !important;
}

.bg-warning-light,
.bg-warning\/10 {
    background-color: rgba(198, 115, 34, 0.1) !important;
}

.bg-danger-light,
.bg-danger\/10,
.bg-destructive\/10 {
    background-color: rgba(184, 58, 46, 0.1) !important;
}


/* Border Colors */

.border-primary {
    border-color: var(--yapi-binding) !important;
}

.border-secondary {
    border-color: var(--yapi-leaf) !important;
}

.border-info {
    border-color: var(--yapi-deep) !important;
}

.border-success {
    border-color: var(--yapi-leaf) !important;
}

.border-warning {
    border-color: var(--yapi-flame) !important;
}

.border-danger,
.border-destructive {
    border-color: var(--yapi-warning) !important;
}


/* Ring Colors */

.ring-primary {
    --tw-ring-color: rgba(86, 197, 150, 0.5) !important;
}

.ring-secondary {
    --tw-ring-color: rgba(32, 80, 114, 0.5) !important;
}

.ring-info {
    --tw-ring-color: rgba(11, 107, 111, 0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════
   K T U I   C O M P O N E N T   O V E R R I D E S
   
   Apply YaPI colors to specific KTUI components.
   ═══════════════════════════════════════════════════════════════ */


/* Badges */

.kt-badge.kt-badge-primary {
    background-color: var(--yapi-binding) !important;
    color: var(--yapi-ivory) !important;
}

.kt-badge.kt-badge-secondary {
    background-color: var(--yapi-leaf) !important;
    color: var(--yapi-ivory) !important;
}

.kt-badge.kt-badge-info {
    background-color: var(--yapi-deep) !important;
    color: var(--yapi-ivory) !important;
}

.kt-badge.kt-badge-success {
    background-color: var(--yapi-leaf) !important;
    color: var(--yapi-ivory) !important;
}

.kt-badge.kt-badge-warning {
    background-color: var(--yapi-flame) !important;
    color: var(--yapi-ivory) !important;
}

.kt-badge.kt-badge-danger,
.kt-badge.kt-badge-destructive {
    background-color: var(--yapi-warning) !important;
    color: var(--yapi-ivory) !important;
}


/* Soft/Light Badge variants */

.kt-badge-soft-primary,
.kt-badge-outline-primary {
    background-color: rgba(86, 197, 150, 0.1) !important;
    color: var(--yapi-binding) !important;
    border-color: rgba(86, 197, 150, 0.2) !important;
}

.kt-badge-soft-success,
.kt-badge-outline-success {
    background-color: rgba(86, 197, 150, 0.1) !important;
    color: var(--yapi-binding) !important;
    border-color: rgba(86, 197, 150, 0.2) !important;
}

.kt-badge-soft-info,
.kt-badge-outline-info {
    background-color: rgba(11, 107, 111, 0.1) !important;
    color: var(--yapi-deep-dark) !important;
    border-color: rgba(11, 107, 111, 0.2) !important;
}

.kt-badge-soft-warning,
.kt-badge-outline-warning {
    background-color: rgba(198, 115, 34, 0.1) !important;
    color: var(--yapi-flame) !important;
    border-color: rgba(198, 115, 34, 0.2) !important;
}

.kt-badge-soft-danger,
.kt-badge-outline-danger {
    background-color: rgba(184, 58, 46, 0.1) !important;
    color: var(--yapi-warning) !important;
    border-color: rgba(184, 58, 46, 0.2) !important;
}


/* Alerts */

.kt-alert-primary {
    background: linear-gradient(135deg, #E8F4EB 0%, #F2F8F4 100%) !important;
    border-color: var(--yapi-binding) !important;
    color: var(--yapi-binding-rich) !important;
}

.kt-alert-success {
    background: linear-gradient(135deg, #E4F2E7 0%, #F0F8F2 100%) !important;
    border-color: var(--yapi-leaf) !important;
    color: var(--yapi-leaf-deep) !important;
}

.kt-alert-info {
    background: linear-gradient(135deg, #E3F1F2 0%, #F0F8F8 100%) !important;
    border-color: var(--yapi-deep) !important;
    color: var(--yapi-deep-dark) !important;
}

.kt-alert-warning {
    background: linear-gradient(135deg, #FCF4E0 0%, #FDF9F0 100%) !important;
    border-color: var(--yapi-flame) !important;
    color: #8B5A00 !important;
}

.kt-alert-danger,
.kt-alert-destructive {
    background: linear-gradient(135deg, #FBEAE8 0%, #FDF4F3 100%) !important;
    border-color: var(--yapi-warning) !important;
    color: #922D23 !important;
}


/* Progress Bars */

.kt-progress-bar,
.progress-bar {
    background: var(--yapi-grad-canopy) !important;
}

.kt-progress-bar-success,
.progress-bar-success {
    background: linear-gradient(90deg, #3D9A50, #4DB862) !important;
}

.kt-progress-bar-info,
.progress-bar-info {
    background: var(--yapi-grad-abyss) !important;
}

.kt-progress-bar-warning,
.progress-bar-warning {
    background: linear-gradient(90deg, #C67322, #DB8533) !important;
}

.kt-progress-bar-danger,
.progress-bar-danger {
    background: linear-gradient(90deg, #B83A2E, #C94236) !important;
}


/* Menu/Sidebar Active States */

.kt-menu-item-active .kt-menu-link,
.kt-menu-item.active .kt-menu-link {
    background: rgba(86, 197, 150, 0.08) !important;
}

.kt-menu-item-active .kt-menu-icon,
.kt-menu-item.active .kt-menu-icon,
.kt-menu-item-here .kt-menu-icon {
    color: var(--yapi-binding) !important;
}

.kt-menu-item-active .kt-menu-title,
.kt-menu-item.active .kt-menu-title,
.kt-menu-item-here .kt-menu-title {
    color: var(--yapi-binding) !important;
}


/* Cards */

.kt-card {
    box-shadow: var(--yapi-shadow-soft) !important;
    border: 1px solid var(--yapi-mist) !important;
}

.kt-card:hover {
    box-shadow: var(--yapi-shadow-medium) !important;
}


/* Tabs */

.kt-tab.active,
.kt-tabs .nav-link.active {
    border-bottom-color: var(--yapi-binding) !important;
    color: var(--yapi-binding) !important;
}


/* Links */

.kt-link {
    color: var(--yapi-deep) !important;
}

.kt-link:hover {
    color: var(--yapi-deep-dark) !important;
}


/* Form Focus States */

.kt-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--yapi-leaf) !important;
    box-shadow: 0 0 0 3px rgba(61, 154, 80, 0.12), var(--yapi-shadow-whisper) !important;
}


/* Checkbox/Radio checked states */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--yapi-binding) !important;
    border-color: var(--yapi-binding) !important;
}


/* ═══════════════════════════════════════════════════════════════
   Y A P I   P R E M I U M   C L A S S E S
   
   Special gradient classes for premium/highlight elements.
   Use strategically for hero sections, special CTAs, etc.
   ═══════════════════════════════════════════════════════════════ */


/* Premium Accent Button — Golden */

.kt-btn.kt-btn-accent,
.btn-yapi-accent {
    background: linear-gradient(180deg, #E9A40E 0%, #D4940A 50%, #BF8608 100%) !important;
    border: none !important;
    color: var(--yapi-ink) !important;
    box-shadow: var(--yapi-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.kt-btn.kt-btn-accent:hover,
.btn-yapi-accent:hover {
    background: linear-gradient(180deg, #D4940A 0%, #BF8608 50%, #A87706 100%) !important;
    box-shadow: var(--yapi-shadow-medium), var(--yapi-glow-light) !important;
    transform: translateY(-1px);
}


/* Gradient Primary — Canopy */

.kt-btn-gradient-primary,
.btn-yapi-gradient {
    background: var(--yapi-grad-canopy) !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.kt-btn-gradient-primary:hover,
.btn-yapi-gradient:hover {
    box-shadow: var(--yapi-shadow-deep), var(--yapi-glow-binding) !important;
    transform: translateY(-2px);
}


/* Gradient Premium — Emergence */

.kt-btn-gradient-premium,
.btn-yapi-gradient-emergence {
    background: var(--yapi-grad-emergence) !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.kt-btn-gradient-premium:hover,
.btn-yapi-gradient-emergence:hover {
    box-shadow: var(--yapi-shadow-deep), 0 8px 32px rgba(24, 68, 43, 0.2), 0 12px 40px rgba(212, 148, 10, 0.15) !important;
    transform: translateY(-2px);
}


/* Gradient Aureate — Golden highlight */

.kt-btn-gradient-aureate,
.btn-yapi-gradient-aureate {
    background: var(--yapi-grad-aureate) !important;
    color: var(--yapi-ink) !important;
    box-shadow: var(--yapi-shadow-medium), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.kt-btn-gradient-aureate:hover,
.btn-yapi-gradient-aureate:hover {
    box-shadow: var(--yapi-shadow-deep), var(--yapi-glow-light) !important;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   Y A P I   S T A T U S   B A C K G R O U N D S
   
   For status indicators, table rows, and cards.
   ═══════════════════════════════════════════════════════════════ */

.bg-status-success,
.yapi-bg-success {
    background: linear-gradient(135deg, #E4F2E7 0%, #D8EBDC 100%) !important;
}

.bg-status-warning,
.yapi-bg-warning {
    background: linear-gradient(135deg, #FCF4E0 0%, #F8EDCF 100%) !important;
}

.bg-status-danger,
.yapi-bg-danger {
    background: linear-gradient(135deg, #FBEAE8 0%, #F7DFDC 100%) !important;
}

.bg-status-info,
.yapi-bg-info {
    background: linear-gradient(135deg, #E3F1F2 0%, #D6EAEB 100%) !important;
}

.bg-status-neutral,
.yapi-bg-neutral {
    background: linear-gradient(135deg, #EAEBEC 0%, #E0E2E4 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   Y A P I   H E R O   &   H E A D E R   S T Y L E S
   
   For page headers, hero sections, and featured areas.
   ═══════════════════════════════════════════════════════════════ */

.yapi-hero,
.hero-canopy {
    background: var(--yapi-grad-canopy) !important;
    color: var(--yapi-ivory) !important;
}

.yapi-header,
.header-binding {
    background: var(--yapi-binding) !important;
    color: var(--yapi-ivory) !important;
}

.yapi-header-gradient {
    background: linear-gradient(155deg, #0F2D1C 0%, #18442B 50%, #1F5535 100%) !important;
    color: var(--yapi-ivory) !important;
}


/* ═══════════════════════════════════════════════════════════════
   D A T A   T A B L E   E N H A N C E M E N T S
   ═══════════════════════════════════════════════════════════════ */


/* Table row hover with YaPI green tint */

.kt-datatable tbody tr:hover,
table tbody tr:hover {
    background-color: rgba(61, 154, 80, 0.04) !important;
}


/* Selected row */

.kt-datatable tbody tr.selected,
table tbody tr.selected {
    background-color: rgba(24, 68, 43, 0.08) !important;
}


/* Table header */

.kt-datatable thead th,
table thead th {
    background-color: var(--yapi-pearl) !important;
    color: var(--yapi-slate) !important;
    border-bottom: 1px solid var(--yapi-fog) !important;
}


/* ═══════════════════════════════════════════════════════════════
   L O A D I N G   &   S P I N N E R   S T A T E S
   ═══════════════════════════════════════════════════════════════ */

.kt-spinner,
.spinner-border {
    border-color: rgba(24, 68, 43, 0.2) !important;
    border-top-color: var(--yapi-binding) !important;
}

.kt-spinner-primary {
    border-top-color: var(--yapi-binding) !important;
}

.kt-spinner-success {
    border-top-color: var(--yapi-leaf) !important;
}

.kt-spinner-info {
    border-top-color: var(--yapi-deep) !important;
}


/* ═══════════════════════════════════════════════════════════════
   T O O L T I P S   &   P O P O V E R S
   ═══════════════════════════════════════════════════════════════ */

.kt-tooltip,
.tooltip {
    background-color: var(--yapi-graphite) !important;
    color: var(--yapi-ivory) !important;
    box-shadow: var(--yapi-shadow-medium) !important;
}


/* ═══════════════════════════════════════════════════════════════
   B U T T O N   S I Z E S   ( Y A P I   E N H A N C E D )
   ═══════════════════════════════════════════════════════════════ */

.kt-btn.kt-btn-xs,
.btn-yapi-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--yapi-radius-sm) !important;
}

.kt-btn.kt-btn-sm,
.btn-yapi-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
}

.kt-btn.kt-btn-lg,
.btn-yapi-lg {
    padding: 0.875rem 1.875rem !important;
    font-size: 1rem !important;
    border-radius: var(--yapi-radius-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════
   D I S A B L E D   S T A T E S
   ═══════════════════════════════════════════════════════════════ */

.kt-btn:disabled,
.kt-btn.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: grayscale(0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   B L U E / P U R P L E   →   Y A P I   M A P P I N G S
   
   Map Tailwind blue/purple/violet colors to YaPI equivalents.
   Blue → Deep (Info), Purple/Violet → Binding or Accent
   ═══════════════════════════════════════════════════════════════ */


/* Blue → Deep (Info Teal) */

.bg-blue-50 {
    background-color: rgba(11, 107, 111, 0.08) !important;
}

.bg-blue-100 {
    background-color: rgba(11, 107, 111, 0.12) !important;
}

.bg-blue-500,
.bg-blue-600 {
    background-color: var(--yapi-deep) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--yapi-deep-dark) !important;
}

.border-blue-100,
.border-blue-200 {
    border-color: rgba(11, 107, 111, 0.2) !important;
}

.hover\:text-blue-800:hover {
    color: var(--yapi-deep-dark) !important;
}


/* Purple/Violet → Accent (Golden) or Secondary (Leaf) */

.bg-purple-100 {
    background-color: rgba(212, 148, 10, 0.12) !important;
}

.text-purple-600 {
    color: var(--yapi-light) !important;
}

.text-violet-600 {
    color: var(--yapi-light) !important;
}


/* Indigo → Binding (Primary) */

.bg-indigo-500,
.bg-indigo-600 {
    background-color: var(--yapi-binding) !important;
}

.text-indigo-600 {
    color: var(--yapi-binding) !important;
}


/* Replace any generic blue gradients */

.bg-gradient-to-r.from-blue-500.to-indigo-600,
.bg-gradient-to-r.from-indigo-500.to-purple-600 {
    background: var(--yapi-grad-canopy) !important;
}


/* ═══════════════════════════════════════════════════════════════
   C U S T O M   U T I L I T Y   C L A S S E S
   
   Additional YaPI-specific utility classes for Metronic views.
   ═══════════════════════════════════════════════════════════════ */


/* Info Panel Background - Deep Teal */

.yapi-info-panel {
    background: linear-gradient(135deg, rgba(11, 107, 111, 0.08) 0%, rgba(11, 107, 111, 0.04) 100%) !important;
    border: 1px solid rgba(11, 107, 111, 0.15) !important;
    border-radius: var(--yapi-radius-md) !important;
}


/* Help Text - Deep Teal */

.yapi-help-text {
    background: rgba(11, 107, 111, 0.06) !important;
    border: 1px solid rgba(11, 107, 111, 0.12) !important;
    border-radius: var(--yapi-radius-md) !important;
    color: var(--yapi-deep-dark) !important;
}


/* Accent Panel - Golden */

.yapi-accent-panel {
    background: linear-gradient(135deg, rgba(212, 148, 10, 0.08) 0%, rgba(212, 148, 10, 0.04) 100%) !important;
    border: 1px solid rgba(212, 148, 10, 0.15) !important;
    border-radius: var(--yapi-radius-md) !important;
}


/* Copy Button Styles - YaPI themed */

.copy-email-btn:hover,
.copy-btn:hover {
    background: var(--yapi-grad-abyss) !important;
    border-color: var(--yapi-deep) !important;
    color: white !important;
    box-shadow: var(--yapi-glow-deep) !important;
}

.copy-email-btn.copied,
.copy-btn.copied {
    background: linear-gradient(135deg, #3D9A50 0%, #358C47 100%) !important;
    border-color: var(--yapi-leaf) !important;
    color: white !important;
}


/* Status Colors - YaPI aligned */

.status-active {
    background-color: rgba(86, 197, 150, 0.1) !important;
    color: var(--yapi-binding) !important;
    border-color: var(--yapi-binding) !important;
}

.status-inactive {
    background-color: rgba(184, 58, 46, 0.1) !important;
    color: var(--yapi-warning) !important;
    border-color: var(--yapi-warning) !important;
}

.status-pending {
    background-color: rgba(212, 148, 10, 0.1) !important;
    color: var(--yapi-light) !important;
    border-color: var(--yapi-light) !important;
}


/* Selection Highlight */

.selection-highlight,
.bg-blue-50\/50 {
    background-color: rgba(11, 107, 111, 0.05) !important;
}


/* Password inline form row */

tr.password-inline-form {
    background-color: rgba(11, 107, 111, 0.05) !important;
}


/* ═══════════════════════════════════════════════════════════════
   M O B I L E   S I D E B A R   D R A W E R   F I X E S
   
   Ensures KTMenu submenus and KTDropdown (profile) appear above
   the drawer backdrop when sidebar is open on mobile/tablet.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    /* KTMenu dropdowns (may be appended to body when overflow=true) */
    .kt-menu-dropdown.kt-menu-default {
        z-index: 1060 !important;
    }

    /* KTDropdown (profile menu) in sidebar footer */
    #sidebar_footer .kt-dropdown-menu,
    #sidebar [data-kt-dropdown="true"] .kt-dropdown-menu {
        z-index: 1060 !important;
    }
}