/* Krow Lead Recovery — Custom Styles */
/* Brand colors extend Tailwind via inline style overrides */

:root {
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;
}

/* Tailwind doesn't have brand-* by default via CDN, so we define utility classes */
.bg-brand-50 { background-color: var(--brand-50); }
.bg-brand-100 { background-color: var(--brand-100); }
.bg-brand-200 { background-color: var(--brand-200); }
.bg-brand-300 { background-color: var(--brand-300); }
.bg-brand-400 { background-color: var(--brand-400); }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-600 { background-color: var(--brand-600); }
.bg-brand-700 { background-color: var(--brand-700); }
.bg-brand-800 { background-color: var(--brand-800); }
.bg-brand-900 { background-color: var(--brand-900); }

.text-brand-50 { color: var(--brand-50); }
.text-brand-100 { color: var(--brand-100); }
.text-brand-200 { color: var(--brand-200); }
.text-brand-300 { color: var(--brand-300); }
.text-brand-400 { color: var(--brand-400); }
.text-brand-500 { color: var(--brand-500); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.text-brand-900 { color: var(--brand-900); }

.border-brand-300 { border-color: var(--brand-300); }
.border-brand-500 { border-color: var(--brand-500); }
.border-brand-600 { border-color: var(--brand-600); }

.ring-brand-500 { --tw-ring-color: var(--brand-500); }

.hover\:bg-brand-50:hover { background-color: var(--brand-50); }
.hover\:bg-brand-700:hover { background-color: var(--brand-700); }
.hover\:text-brand-600:hover { color: var(--brand-600); }
.hover\:text-brand-700:hover { color: var(--brand-700); }
.hover\:border-brand-300:hover { border-color: var(--brand-300); }

.focus\:ring-brand-500:focus { --tw-ring-color: var(--brand-500); }
.focus\:border-brand-500:focus { border-color: var(--brand-500); }

/* Smooth transitions — respects user preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
    * { transition-property: color, background-color, border-color, opacity; transition-duration: 150ms; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Custom scrollbar — wider for easier grabbing */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Accessibility: minimum readable sizes ── */
/* Bump tiny text globally: 9px→12px, 10px→13px, 11px→13px */
.text-\[9px\] { font-size: 12px !important; }
.text-\[10px\] { font-size: 13px !important; }
.text-\[11px\] { font-size: 13px !important; }

/* Tooltips for jargon explanation */
[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted currentColor;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #1e293b;
    color: white;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 280px;
    white-space: normal;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15);
    pointer-events: none;
}

/* Keyboard focus indicator */
:focus-visible {
    outline: 2px solid var(--brand-500) !important;
    outline-offset: 2px !important;
}

/* High contrast support */
@media (prefers-contrast: more) {
    .badge, .status-pill { border: 1px solid currentColor; }
    .text-surface-400, .text-surface-500 { color: #374151 !important; }
}

/* Status pill animations */
.status-pill { transition: all 0.2s ease; }
.status-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }