/* Custom premium scrollbar for case list */
#casesList::-webkit-scrollbar {
    width: 6px;
}

#casesList::-webkit-scrollbar-track {
    background: transparent;
}

#casesList::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}

#casesList::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* Smooth tab fade transitions */
.tab-pane {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-pane.active-pane {
    opacity: 1;
    transform: translateY(0);
}

.bg-brand {
    background-color: rgb(4, 137, 152);
}

.bg-brand-dark {
    background-color: rgb(3, 115, 128);
}

.text-brand {
    color: rgb(4, 137, 152);
}

.text-brand-dark {
    color: rgb(3, 115, 128);
}

/* Custom Gradient Stops for Tailwind */
.from-bg-brand {
    --tw-gradient-from: rgb(4, 137, 152);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 137, 152, 0));
}

.to-bg-brand-light {
    --tw-gradient-to: rgb(144, 255, 255);
}

.bg-brand-light {
    background-color: rgb(144, 255, 255);
}

.bg-brand-50 {
    background-color: rgb(225, 255, 255);
}

.hover\:bg-brand-dark:hover {
    background-color: rgb(3, 115, 128);
}

/* AI Markdown Output Styling */
.ai-markdown-content {
    font-size: 0.875rem;
    line-height: 1.625;
    color: #1f2937;
}

.ai-markdown-content h1,
.ai-markdown-content h2,
.ai-markdown-content h3,
.ai-markdown-content h4 {
    font-weight: 700;
    color: #111827;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.ai-markdown-content h3 {
    font-size: 1rem;
}

.ai-markdown-content h4 {
    font-size: 0.875rem;
}

.ai-markdown-content p {
    margin-bottom: 0.5rem;
}

.ai-markdown-content ul {
    list-style-type: disc !important;
    margin-left: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.ai-markdown-content ul ul {
    list-style-type: circle !important;
    margin-left: 1.25rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.ai-markdown-content ol {
    list-style-type: decimal !important;
    margin-left: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.ai-markdown-content li {
    margin-bottom: 0.25rem;
}

.ai-markdown-content strong {
    font-weight: 600;
    color: #111827;
}

.ai-markdown-content em {
    font-style: italic;
}

.ai-markdown-content hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 1.25rem 0;
}

.ai-markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.8125rem;
    text-align: left;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.ai-markdown-content thead {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ai-markdown-content th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.ai-markdown-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: middle;
}

.ai-markdown-content tbody tr:last-child td {
    border-bottom: none;
}

.ai-markdown-content tbody tr:hover {
    background-color: #f1f5f9;
}

.ai-markdown-content td code {
    background-color: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    word-break: break-all;
}

/* AI Bubble Evaluated File Sources Banner */
.ai-files-banner {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.ai-files-banner p {
    margin-bottom: 0 !important;
}

.ai-files-banner .ai-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.ai-files-banner .ai-file-chip:hover {
    border-color: #93c5fd;
    background-color: #f0f7ff;
    color: #1e3a8a;
}

.icon-stars {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url('/assets/stars-64.png') no-repeat center / contain;
    mask: url('/assets/stars-64.png') no-repeat center / contain;
}

/* Dynamic Auto-growing Textarea */
#wizardPromptInput {
    field-sizing: content;
    min-height: 2.375rem;
    max-height: 250px;
    box-sizing: border-box;
}

/* =========================================================
   Theme Overrides: Programmatic color-mix() Hex Variables
   ========================================================= */
:root {
    /* Base Hex Colors - Simply change these hex codes to re-theme! */
    --theme-blue: #034C80;
    --theme-green: #037380;
    --theme-red: #802203;
    --theme-yellow: #E6AF00;
}

/* ---------------------------------------------------------
   Blue Utility Class Overrides (\w+-blue-\d+)
   --------------------------------------------------------- */

/* Text colors */
.text-blue-500,
.text-blue-600,
.text-blue-700 {
    color: var(--theme-blue) !important;
}

.text-blue-800,
.text-blue-900 {
    color: color-mix(in srgb, var(--theme-blue) 75%, black) !important;
}

.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover {
    color: var(--theme-blue) !important;
}

.hover\:text-blue-800:hover {
    color: color-mix(in srgb, var(--theme-blue) 75%, black) !important;
}

/* Background colors (solid for primary, programmatic tints for light shades) */
.bg-blue-50 {
    background-color: color-mix(in srgb, var(--theme-blue) 6%, transparent) !important;
}

.bg-blue-100 {
    background-color: color-mix(in srgb, var(--theme-blue) 12%, transparent) !important;
}

.bg-blue-200 {
    background-color: color-mix(in srgb, var(--theme-blue) 20%, transparent) !important;
}

.bg-blue-600 {
    background-color: var(--theme-blue) !important;
}

.hover\:bg-blue-50:hover {
    background-color: color-mix(in srgb, var(--theme-blue) 9%, transparent) !important;
}

.hover\:bg-blue-100:hover {
    background-color: color-mix(in srgb, var(--theme-blue) 16%, transparent) !important;
}

/* Border colors */
.border-blue-100 {
    border-color: color-mix(in srgb, var(--theme-blue) 15%, transparent) !important;
}

.border-blue-200 {
    border-color: color-mix(in srgb, var(--theme-blue) 25%, transparent) !important;
}

.hover\:border-blue-300:hover {
    border-color: color-mix(in srgb, var(--theme-blue) 35%, transparent) !important;
}

/* Focus and ring colors */
.focus\:ring-blue-500:focus,
.ring-blue-500 {
    --tw-ring-color: var(--theme-blue) !important;
}

/* ---------------------------------------------------------
   Green Utility Class Overrides (\w+-green-\d+)
   --------------------------------------------------------- */

/* Text colors */
.text-green-500,
.text-green-600,
.text-green-700 {
    color: var(--theme-green) !important;
}

.text-green-800,
.text-green-900 {
    color: color-mix(in srgb, var(--theme-green) 75%, black) !important;
}

.hover\:text-green-600:hover,
.hover\:text-green-700:hover {
    color: var(--theme-green) !important;
}

.hover\:text-green-800:hover {
    color: color-mix(in srgb, var(--theme-green) 75%, black) !important;
}

/* Background colors (solid for primary, programmatic tints for light shades) */
.bg-green-50 {
    background-color: color-mix(in srgb, var(--theme-green) 6%, transparent) !important;
}

.bg-green-100 {
    background-color: color-mix(in srgb, var(--theme-green) 12%, transparent) !important;
}

.bg-green-200 {
    background-color: color-mix(in srgb, var(--theme-green) 20%, transparent) !important;
}

.bg-green-500,
.bg-green-600 {
    background-color: var(--theme-green) !important;
}

.bg-green-700,
.hover\:bg-green-700:hover {
    background-color: color-mix(in srgb, var(--theme-green) 75%, black) !important;
}

.hover\:bg-green-50:hover {
    background-color: color-mix(in srgb, var(--theme-green) 9%, transparent) !important;
}

.hover\:bg-green-100:hover {
    background-color: color-mix(in srgb, var(--theme-green) 16%, transparent) !important;
}

/* Border colors */
.border-green-100 {
    border-color: color-mix(in srgb, var(--theme-green) 15%, transparent) !important;
}

.border-green-200 {
    border-color: color-mix(in srgb, var(--theme-green) 25%, transparent) !important;
}

.hover\:border-green-300:hover {
    border-color: color-mix(in srgb, var(--theme-green) 35%, transparent) !important;
}

/* Focus and ring colors */
.focus\:ring-green-500:focus,
.ring-green-500 {
    --tw-ring-color: var(--theme-green) !important;
}

/* ---------------------------------------------------------
   Red Utility Class Overrides (\w+-red-\d+)
   --------------------------------------------------------- */

/* Text colors */
.text-red-500,
.text-red-600,
.text-red-700 {
    color: var(--theme-red) !important;
}

.text-red-800,
.text-red-900 {
    color: color-mix(in srgb, var(--theme-red) 75%, black) !important;
}

.hover\:text-red-600:hover,
.hover\:text-red-700:hover {
    color: var(--theme-red) !important;
}

.hover\:text-red-800:hover {
    color: color-mix(in srgb, var(--theme-red) 75%, black) !important;
}

/* Background colors (solid for primary, programmatic tints for light shades) */
.bg-red-50 {
    background-color: color-mix(in srgb, var(--theme-red) 6%, transparent) !important;
}

.bg-red-100 {
    background-color: color-mix(in srgb, var(--theme-red) 12%, transparent) !important;
}

.bg-red-200 {
    background-color: color-mix(in srgb, var(--theme-red) 20%, transparent) !important;
}

.bg-red-500,
.bg-red-600 {
    background-color: var(--theme-red) !important;
}

.bg-red-700,
.hover\:bg-red-700:hover {
    background-color: color-mix(in srgb, var(--theme-red) 75%, black) !important;
}

.hover\:bg-red-50:hover {
    background-color: color-mix(in srgb, var(--theme-red) 9%, transparent) !important;
}

.hover\:bg-red-100:hover {
    background-color: color-mix(in srgb, var(--theme-red) 16%, transparent) !important;
}

.hover\:bg-red-200:hover {
    background-color: color-mix(in srgb, var(--theme-red) 25%, transparent) !important;
}

/* Border colors */
.border-red-100 {
    border-color: color-mix(in srgb, var(--theme-red) 15%, transparent) !important;
}

.border-red-200 {
    border-color: color-mix(in srgb, var(--theme-red) 25%, transparent) !important;
}

.border-red-300,
.hover\:border-red-300:hover {
    border-color: color-mix(in srgb, var(--theme-red) 35%, transparent) !important;
}

/* Focus and ring colors */
.focus\:ring-red-500:focus,
.ring-red-500 {
    --tw-ring-color: var(--theme-red) !important;
}

/* ---------------------------------------------------------
   Yellow Utility Class Overrides (\w+-yellow-\d+)
   --------------------------------------------------------- */

/* Text colors */
.text-yellow-400,
.text-yellow-500,
.text-yellow-600 {
    color: var(--theme-yellow) !important;
}

.text-yellow-700,
.text-yellow-800,
.text-yellow-900 {
    color: color-mix(in srgb, var(--theme-yellow) 40%, black) !important;
}

.hover\:text-yellow-500:hover,
.hover\:text-yellow-600:hover {
    color: var(--theme-yellow) !important;
}

.hover\:text-yellow-700:hover,
.hover\:text-yellow-800:hover {
    color: color-mix(in srgb, var(--theme-yellow) 40%, black) !important;
}

/* Background colors (solid for primary, programmatic tints for light shades) */
.bg-yellow-50 {
    background-color: color-mix(in srgb, var(--theme-yellow) 20%, transparent) !important;
}

.bg-yellow-100 {
    background-color: color-mix(in srgb, var(--theme-yellow) 40%, transparent) !important;
}

.bg-yellow-200 {
    background-color: color-mix(in srgb, var(--theme-yellow) 65%, transparent) !important;
}

.bg-yellow-300,
.bg-yellow-400,
.bg-yellow-500 {
    background-color: var(--theme-yellow) !important;
}

.hover\:bg-yellow-50:hover {
    background-color: color-mix(in srgb, var(--theme-yellow) 30%, transparent) !important;
}

.hover\:bg-yellow-100:hover {
    background-color: color-mix(in srgb, var(--theme-yellow) 50%, transparent) !important;
}

/* Border colors */
.border-yellow-100 {
    border-color: color-mix(in srgb, var(--theme-yellow) 35%, transparent) !important;
}

.border-yellow-200 {
    border-color: color-mix(in srgb, var(--theme-yellow) 60%, transparent) !important;
}

.border-yellow-300,
.border-yellow-400,
.hover\:border-yellow-300:hover {
    border-color: color-mix(in srgb, var(--theme-yellow) 85%, transparent) !important;
}

/* Focus and ring colors */
.focus\:ring-yellow-500:focus,
.ring-yellow-500 {
    --tw-ring-color: var(--theme-yellow) !important;
}