/* ============================================================
   Sherlock v2 — premium polish layer (loaded after Metronic)
   ============================================================ */

:root {
    --sh-ease: cubic-bezier(.4, 0, .2, 1);
    --sh-shadow-sm: 0 1px 2px rgba(24, 28, 50, .04), 0 1px 3px rgba(24, 28, 50, .06);
    --sh-shadow-md: 0 8px 24px rgba(24, 28, 50, .08), 0 2px 6px rgba(24, 28, 50, .05);
    --sh-shadow-lg: 0 18px 48px rgba(24, 28, 50, .14);
}

/* ---- Inline SVG icons ------------------------------------ */
.kt-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke-width: 1.9;
}
.btn .kt-icon { vertical-align: -0.15em; }

/* ---- Typography niceties --------------------------------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(54, 153, 255, .18); }

/* ---- Cards: soft shadow + hover lift --------------------- */
.card {
    border: 1px solid rgba(24, 28, 50, .05);
    box-shadow: var(--sh-shadow-sm);
    border-radius: 1rem;
    transition: transform .22s var(--sh-ease), box-shadow .22s var(--sh-ease);
}
.card:hover { box-shadow: var(--sh-shadow-md); }
/* interactive cards (clickable) lift a touch more */
.card.cursor-pointer:hover,
a > .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-shadow-lg);
}

/* ---- Buttons: micro-interactions ------------------------- */
.btn {
    transition: transform .12s var(--sh-ease), box-shadow .12s var(--sh-ease), background-color .12s var(--sh-ease), color .12s var(--sh-ease);
}
.btn:not(.btn-icon):hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 4px 14px rgba(54, 153, 255, .28); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(54, 153, 255, .38); }

/* ---- Page content fade-in -------------------------------- */
@keyframes shFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
#kt_content_container > div { animation: shFadeUp .45s var(--sh-ease) both; }

/* stagger immediate rows/cards a touch */
#kt_content_container > div > .row > [class^="col"],
#kt_content_container > div > .row > [class*=" col"] { animation: shFadeUp .5s var(--sh-ease) both; }

/* ---- Table polish ---------------------------------------- */
.table tbody tr { transition: background-color .15s var(--sh-ease); }
.table tbody tr:hover { background-color: rgba(54, 153, 255, .05); }

/* ---- Badges / pills -------------------------------------- */
.badge { letter-spacing: .01em; }

/* ---- Symbol labels get a hair of depth ------------------- */
.symbol-label { transition: transform .2s var(--sh-ease); }
.card:hover .symbol-label { transform: scale(1.04); }

/* ---- Dark aside menu polish ------------------------------ */
.aside .menu-link { transition: all .15s var(--sh-ease); border-radius: .65rem; }
.aside .menu-item .menu-link.active {
    background: linear-gradient(90deg, rgba(54,153,255,.22), rgba(54,153,255,.06));
}
.aside .menu-item .menu-link:hover:not(.active) { background: rgba(255,255,255,.06); }

/* ---- Loaders --------------------------------------------- */
@keyframes shShimmer { 100% { transform: translateX(100%); } }
.kt-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(24, 28, 50, .06);
    border-radius: .5rem;
}
.kt-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: shShimmer 1.3s infinite;
}
/* fade elements while a Livewire request is in-flight */
[wire\:loading] { transition: opacity .2s var(--sh-ease); }
.spinner-border { animation-duration: .7s; }

/* soft pulse for "AI / live" badges */
@keyframes shPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.badge-light-warning.sh-live, .badge.sh-live { animation: shPulse 1.8s ease-in-out infinite; }

/* ---- Progress bars --------------------------------------- */
.progress { border-radius: 999px; background: rgba(24,28,50,.06); }
.progress-bar { border-radius: 999px; transition: width .6s var(--sh-ease); }

/* ---- Timeline dots (activity log) ------------------------ */
.timeline-icon { transition: transform .2s var(--sh-ease); }
.timeline-item:hover .timeline-icon { transform: scale(1.12); }

/* ---- Chat bubbles ---------------------------------------- */
.bg-light-primary.rounded, .bg-light.rounded { animation: shFadeUp .3s var(--sh-ease) both; }

/* ---- Inputs ---------------------------------------------- */
.form-control, .form-select { transition: border-color .15s var(--sh-ease), box-shadow .15s var(--sh-ease); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(54, 153, 255, .12); }

/* ---- Custom scrollbars ----------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(24,28,50,.2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(24,28,50,.18); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(24,28,50,.30); }

/* ---- Animated gradient for auth brand panel -------------- */
@keyframes shGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.sh-auth-brand {
    background: linear-gradient(125deg, #1b1b29, #2d2d43, #3699ff, #2d2d43) !important;
    background-size: 300% 300% !important;
    animation: shGradient 14s ease infinite;
}

/* dark theme adjustments */
[data-bs-theme="dark"] .card { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .table tbody tr:hover { background-color: rgba(54, 153, 255, .08); }