/* Base */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
}

@layer base {
    a { color: #5D87FF; }
    a:hover { color: #4570EA; }
}

/* ── Global transition defaults ─────────────────────────────────────────── */
button, a, input, select, textarea {
    transition: color 150ms ease, background-color 150ms ease,
                border-color 150ms ease, box-shadow 150ms ease,
                opacity 150ms ease;
}

/* ── Page entrance animation ─────────────────────────────────────────────── */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Applied to the main page content wrapper in MainLayout */
.page-content {
    animation: pageEnter 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Cards get a subtle scale-in */
.bg-white.rounded-xl, .bg-white.rounded-2xl {
    animation: scaleIn 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

/* ── Card hover lift ─────────────────────────────────────────────────────── */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(93, 135, 255, 0.12), 0 2px 8px -2px rgba(0,0,0,0.08);
}

/* ── Sidebar nav link transitions ────────────────────────────────────────── */
.nav-link-item {
    transition: background-color 150ms ease, color 150ms ease,
                transform 150ms ease, padding-left 150ms ease;
}
.nav-link-item:hover { transform: translateX(2px); }

/* ── Topbar shadow on scroll (class toggled via JS or static) ────────────── */
.topbar-scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}

/* ── Focus ring polish ───────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* ── Custom scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #94a3b8; }

/* ── Table row hover transition ──────────────────────────────────────────── */
tbody tr { transition: background-color 120ms ease; }

/* ── Button press effect ─────────────────────────────────────────────────── */
button:active:not(:disabled) { transform: scale(0.98); }

/* ── Loading shimmer animation ───────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

/* ── Toast/alert slide-in ────────────────────────────────────────────────── */
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)      scale(1);    }
}
.toast-enter { animation: toastIn 250ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ── Login card entrance ─────────────────────────────────────────────────── */
@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.login-card-enter { animation: loginCardIn 350ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ── Case row hover — prominent scale + accent background + forecolor ────── */
.case-row {
    transition: background-color 180ms ease, transform 180ms ease,
                box-shadow 180ms ease, color 180ms ease;
    transform: scale(1);
    border-left: 3px solid transparent;
}
.case-row:hover {
    background: linear-gradient(90deg, rgba(93,135,255,0.10) 0%, rgba(93,135,255,0.04) 100%) !important;
    transform: scale(1.006);
    box-shadow: 0 3px 14px rgba(93, 135, 255, 0.18), inset 3px 0 0 #5D87FF;
    border-left: 3px solid #5D87FF;
    position: relative;
    z-index: 1;
}
.case-row:hover td {
    color: #2d4fc4 !important;   /* deep primary blue on all cells */
}
.case-row:hover td.font-medium {
    color: #1a3baa !important;   /* slightly darker for case number */
}
.case-row-active {
    background-color: rgba(93, 135, 255, 0.08) !important;
    border-left: 3px solid #5D87FF;
}
.case-row-active td {
    color: #4570EA !important;
}

/* ── Blazor form validation ──────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #13DEB9; }
.invalid                              { outline: 1px solid #FA896B; }
.validation-message                   { color: #FA896B; font-size: 0.8125rem; margin-top: 0.25rem; }

/* ── Blazor error boundary ───────────────────────────────────────────────── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Hide Blazor unhandled error bar ─────────────────────────────────────── */
#blazor-error-ui { display: none !important; }

/* ── Reconnect modal ─────────────────────────────────────────────────────── */
components-reconnect-modal { display: none; }