/* public/assets/css/dashboard.css */
/* Sleek custom styling and animation tokens for Finlytix Modular Workspace */

/* Theme variables */
:root {
    --color-bg: #0b0d11;
    --color-card: #1e2230;
    --color-scroll-thumb: #2d3247;
    --color-glass-bg: rgba(30, 34, 48, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.05);
    
    --color-sticky-hover: #282e40;
    --color-sticky-active: #1d3140;
    
    /* RGB variables for Tailwind opacity utilities */
    --color-bg-rgb: 11, 13, 17;
    --color-card-rgb: 30, 34, 48;
    
    --color-gray-50-rgb: 249, 250, 251;
    --color-gray-100-rgb: 243, 244, 246;
    --color-gray-200-rgb: 226, 232, 240;
    --color-gray-300-rgb: 203, 213, 225;
    --color-gray-400-rgb: 156, 163, 175;
    --color-gray-500-rgb: 107, 114, 128;
    --color-gray-600-rgb: 75, 85, 99;
    --color-gray-700-rgb: 55, 65, 81;
    --color-gray-800-rgb: 31, 41, 55;
    --color-gray-900-rgb: 17, 24, 39;
    --color-gray-950-rgb: 3, 7, 18;
    
    --color-text-white-rgb: 255, 255, 255;
}

html.theme-light {
    --color-bg: #faf8f2;                /* pale yellow page background */
    --color-card: #ffffff;              /* pure white card background */
    --color-scroll-thumb: #cbd5e1;
    --color-glass-bg: rgba(255, 255, 255, 0.8);
    --color-glass-border: rgba(0, 0, 0, 0.05);
    
    --color-sticky-hover: #f5f3eb;      /* matching warm hover */
    --color-sticky-active: #e0f2fe;     /* light blue/cyan for active rows */
    
    /* RGB variables for Tailwind opacity utilities */
    --color-bg-rgb: 250, 248, 242;      /* pale yellow */
    --color-card-rgb: 255, 255, 255;    /* pure white */
    
    --color-gray-50-rgb: 15, 23, 42;      /* slate-900 */
    --color-gray-100-rgb: 30, 41, 59;     /* slate-800 */
    --color-gray-200-rgb: 51, 65, 85;     /* slate-700 */
    --color-gray-300-rgb: 71, 85, 105;    /* slate-600 */
    --color-gray-400-rgb: 100, 116, 139;  /* slate-500 */
    --color-gray-500-rgb: 148, 163, 184;  /* slate-400 */
    --color-gray-600-rgb: 220, 218, 208;  /* warm light gray border */
    --color-gray-700-rgb: 236, 234, 226;  /* warm border */
    --color-gray-800-rgb: 236, 234, 226;  /* border */
    --color-gray-900-rgb: 245, 243, 237;  /* warm light background for inputs/rows */
    --color-gray-950-rgb: 250, 248, 242;  /* pale yellow */
    
    --color-text-white-rgb: 15, 23, 42;   /* slate-900 */
}

/* Custom Scrollbar styling for sleek dark mode */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

/* Base Body settings */
body {
    background-color: var(--color-bg);
    color: var(--color-gray-200);
    font-family: 'Inter', sans-serif;
}

/* Glassmorphism card elements */
.glass-card {
    background: var(--color-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
}

/* Active and Hovering table rows */
tbody tr {
    transition: all 0.15s ease-in-out;
}
tbody tr:hover {
    background-color: var(--color-sticky-hover) !important;
    cursor: pointer;
}
tbody tr.active-row {
    background-color: var(--color-sticky-active) !important;
    border-left: 3px solid #06b6d4;
}

/* AI Drawer slide transition states */
#ai-drawer {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#ai-drawer.collapsed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-left: none;
}

/* Micro-animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-el {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Utility to hide scrollbars for clean swipeable navs */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Sticky first column horizontally */
.sticky-col {
    position: sticky !important;
    left: 0;
    background-color: var(--color-card) !important;
    z-index: 10;
}
tr:hover .sticky-col {
    background-color: var(--color-sticky-hover) !important;
}
tr.active-row .sticky-col {
    background-color: var(--color-sticky-active) !important;
}
thead th.sticky-col {
    z-index: 30; /* above table body cells */
    background-color: rgb(var(--color-gray-900-rgb)) !important;
}

/* Sticky N columns horizontally for tag securities */
.sticky-col-1 {
    position: sticky !important;
    left: 0;
    background-color: var(--color-card) !important;
    z-index: 10;
}
tr:hover .sticky-col-1 {
    background-color: var(--color-sticky-hover) !important;
}
tr.active-row .sticky-col-1 {
    background-color: var(--color-sticky-active) !important;
}
thead th.sticky-col-1 {
    z-index: 30;
    background-color: rgb(var(--color-gray-900-rgb)) !important;
}

.sticky-col-2 {
    position: sticky !important;
    left: 32px; /* width of col-1 is w-8 (32px) */
    background-color: var(--color-card) !important;
    z-index: 10;
}
tr:hover .sticky-col-2 {
    background-color: var(--color-sticky-hover) !important;
}
tr.active-row .sticky-col-2 {
    background-color: var(--color-sticky-active) !important;
}
thead th.sticky-col-2 {
    z-index: 30;
    background-color: rgb(var(--color-gray-900-rgb)) !important;
}

/* Mobile navigation menu overrides */
#nav-tabs button {
    width: 100%;
    text-align: left;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    #nav-tabs button {
        width: auto;
        text-align: center;
    }
}
/* Sticky elements sitting directly under the main combined header bar */
.sticky-under-header {
    position: sticky !important;
    top: var(--sticky-header-height, 104px) !important;
    z-index: 20;
}

/* Safari sticky table header bug fix: target the th elements instead of thead on mobile only */
@media (max-width: 767px) {
    thead.sticky-under-header {
        position: static !important;
    }
    thead.sticky-under-header th {
        position: sticky !important;
        top: 0 !important; /* on mobile, stick to top of table wrapper */
        z-index: 20;
        background-color: rgb(var(--color-gray-900-rgb)) !important;
    }
    thead.sticky-under-header th.sticky-col {
        z-index: 30 !important;
    }
}

/* Overrides for text-white in light mode to avoid changing hundreds of HTML tags */
html.theme-light .text-white {
    color: rgb(var(--color-text-white-rgb)) !important;
}
/* Preserve white text on filled buttons and badges */
html.theme-light button.text-white,
html.theme-light a.text-white,
html.theme-light .bg-brandCyan .text-white,
html.theme-light .bg-brandBlue .text-white,
html.theme-light .bg-brandEmerald .text-white,
html.theme-light .bg-brandRose .text-white,
html.theme-light [class*="bg-brand"] .text-white,
html.theme-light .keep-text-white {
    color: #ffffff !important;
}

/* Better contrast for cyan text/bg in light theme */
html.theme-light .text-brandCyan,
html.theme-light [class*="text-brandCyan"] {
    color: #0e7490 !important; /* cyan-700 for high accessibility contrast */
}
html.theme-light .bg-cyan-950\/40,
html.theme-light .bg-cyan-950\/20,
html.theme-light [class*="bg-cyan-950"] {
    background-color: #e0f7fa !important; /* light cyan-100 */
    border-color: rgba(14, 116, 144, 0.25) !important; /* cyan-700/25 */
    color: #0e7490 !important; /* cyan-700 */
}
html.theme-light .hover\:bg-cyan-900\/60:hover {
    background-color: #b2ebf2 !important; /* light cyan hover */
}
/* Ensure links or other brand color highlights stand out */
html.theme-light .text-cyan-400 {
    color: #0e7490 !important;
}
html.theme-light .border-cyan-500\/30:hover {
    border-color: rgba(14, 116, 144, 0.4) !important;
}
/* Style the top-level nav tabs more beautifully in light mode */
html.theme-light #nav-tabs button.text-brandCyan {
    color: #0e7490 !important; /* cyan-700 */
    background-color: #e0f7fa !important; /* cyan-100 */
    border-color: rgba(14, 116, 144, 0.3) !important;
}
html.theme-light #nav-tabs button.text-gray-400 {
    color: #475569 !important; /* slate-600 */
}
html.theme-light #nav-tabs button.text-gray-400:hover {
    color: #0f172a !important; /* slate-900 */
    background-color: #f1f5f9 !important; /* slate-100 */
}

/* Style for "新高" / "連3新高" badges in light theme */
html.theme-light .bg-rose-950\/60 {
    background-color: #ffe4e6 !important; /* rose-100 (light rose) */
    border-color: rgba(244, 63, 94, 0.3) !important; /* brandRose/30 */
    color: #e11d48 !important; /* rose-600 */
}

/* Style for secondary/cancel buttons (using bg-gray-800) in light theme */
html.theme-light button.bg-gray-800,
html.theme-light button#btn-edit-tag,
html.theme-light button#btn-cancel-tag,
html.theme-light button#btn-cancel-link-tags {
    background-color: var(--color-gray-900) !important; /* light gray-50 */
    border-color: var(--color-gray-700) !important; /* light gray border */
    color: var(--color-gray-200) !important; /* slate-700 dark text */
}
html.theme-light button.bg-gray-800:hover,
html.theme-light button#btn-edit-tag:hover,
html.theme-light button#btn-cancel-tag:hover,
html.theme-light button#btn-cancel-link-tags:hover {
    background-color: var(--color-gray-800) !important; /* darker light border hover */
    color: var(--color-gray-50) !important; /* slate-900 */
}

/* Remove dark mode filter from Google Calendar in light mode */
html.theme-light #tab-calendar iframe {
    filter: none !important;
    background-color: #ffffff !important;
}

/* Theme-aware toggle label colors */
.toggle-label {
    color: #9ca3af !important; /* text-gray-400 */
}
.peer:checked ~ .toggle-label {
    color: #ffffff !important; /* white in dark mode */
}
html.theme-light .toggle-label {
    color: #6b7280 !important; /* text-gray-500 in light mode */
}
html.theme-light .peer:checked ~ .toggle-label {
    color: #0f172a !important; /* slate-900 in light mode */
}

/* Light mode overrides for AI Report elements */
html.theme-light .bg-purple-950\/80,
html.theme-light .bg-purple-950\/60,
html.theme-light .bg-purple-950\/40,
html.theme-light .bg-purple-950\/30,
html.theme-light [class*="bg-purple-950"] {
    background-color: #f3e8ff !important; /* purple-100 */
    border-color: rgba(168, 85, 247, 0.35) !important;
    color: #6b21a8 !important; /* purple-800 */
}
html.theme-light .bg-purple-900\/50,
html.theme-light .bg-purple-900\/60,
html.theme-light [class*="bg-purple-900"] {
    background-color: #e9d5ff !important; /* purple-200 */
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #581c87 !important; /* purple-900 */
}
html.theme-light .text-purple-200,
html.theme-light .text-purple-300 {
    color: #6b21a8 !important; /* purple-800 for legibility in light theme */
}
html.theme-light .text-purple-400 {
    color: #7e22ce !important; /* purple-700 */
}

/* AI Markdown Typography Styles (overriding Tailwind Preflight resets for AI panels) */
.ai-markdown-content h1,
.prose-ai h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    font-family: 'Outfit', sans-serif;
}

.ai-markdown-content h2,
.prose-ai h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(55, 65, 81, 0.6);
    line-height: 1.35;
    font-family: 'Outfit', sans-serif;
}

.ai-markdown-content h3,
.prose-ai h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #c084fc;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
}

.ai-markdown-content h4,
.prose-ai h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #67e8f9;
    margin-top: 0.875rem;
    margin-bottom: 0.375rem;
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
}

.ai-markdown-content h5,
.ai-markdown-content h6,
.prose-ai h5,
.prose-ai h6 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fcd34d;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-family: 'Outfit', sans-serif;
}

.ai-markdown-content p,
.prose-ai p {
    margin-bottom: 0.625rem;
    line-height: 1.625;
    color: #cbd5e1;
}

.ai-markdown-content ul,
.prose-ai ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
    color: #e2e8f0;
}

.ai-markdown-content ol,
.prose-ai ol {
    list-style-type: decimal;
    list-style-position: outside;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
    color: #e2e8f0;
}

.ai-markdown-content li,
.prose-ai li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.ai-markdown-content li > p,
.prose-ai li > p {
    display: inline;
    margin-bottom: 0;
}

.ai-markdown-content blockquote,
.prose-ai blockquote {
    border-left: 4px solid #a855f7;
    background-color: rgba(88, 28, 135, 0.3);
    color: #e9d5ff;
    padding: 0.625rem 1rem;
    margin: 0.75rem 0;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    font-weight: 500;
}

.ai-markdown-content table,
.prose-ai table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: 0.75rem;
    background-color: rgba(17, 24, 39, 0.6);
    border-radius: 0.75rem;
    overflow: hidden;
}

.ai-markdown-content th,
.prose-ai th {
    padding: 0.625rem 0.75rem;
    background-color: rgba(31, 41, 55, 0.8);
    color: #d8b4fe;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #374151;
}

.ai-markdown-content td,
.prose-ai td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.6);
    color: #e5e7eb;
}

/* Theme-aware AI Typography adjustments for Light Mode (html.theme-light) */
html.theme-light .ai-markdown-content h1,
html.theme-light .prose-ai h1,
html.theme-light .ai-markdown-content h2,
html.theme-light .prose-ai h2 {
    color: #0f172a;
    border-bottom-color: #cbd5e1;
}

html.theme-light .ai-markdown-content h3,
html.theme-light .prose-ai h3 {
    color: #6b21a8;
}

html.theme-light .ai-markdown-content h4,
html.theme-light .prose-ai h4 {
    color: #0e7490;
}

html.theme-light .ai-markdown-content h5,
html.theme-light .ai-markdown-content h6,
html.theme-light .prose-ai h5,
html.theme-light .prose-ai h6 {
    color: #b45309;
}

html.theme-light .ai-markdown-content p,
html.theme-light .prose-ai p {
    color: #334155;
}

html.theme-light .ai-markdown-content ul,
html.theme-light .prose-ai ul,
html.theme-light .ai-markdown-content ol,
html.theme-light .prose-ai ol,
html.theme-light .ai-markdown-content li,
html.theme-light .prose-ai li {
    color: #1e293b;
}

html.theme-light .ai-markdown-content blockquote,
html.theme-light .prose-ai blockquote {
    border-left-color: #9333ea;
    background-color: #f3e8ff;
    color: #581c87;
}

html.theme-light .ai-markdown-content table,
html.theme-light .prose-ai table {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
}

html.theme-light .ai-markdown-content th,
html.theme-light .prose-ai th {
    background-color: #f1f5f9;
    color: #581c87;
    border-bottom-color: #cbd5e1;
}

html.theme-light .ai-markdown-content td,
html.theme-light .prose-ai td {
    color: #334155;
    border-bottom-color: #e2e8f0;
}

html.theme-light #ai-kline-analysis-content {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* Theme-aware Banner Alert Styles */
.banner-alert-quota {
    background-color: rgba(69, 26, 3, 0.4);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.banner-alert-error {
    background-color: rgba(76, 5, 25, 0.4);
    border-color: rgba(225, 29, 72, 0.3);
    color: #fca5a5;
}

html.theme-light .banner-alert-quota {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #78350f !important;
}

html.theme-light .banner-alert-error {
    background-color: #ffe4e6 !important;
    border-color: #fca5a5 !important;
    color: #881337 !important;
}