/* shared.css - Common styles for O-Twin Bank UI Prototypes */

/* Disable all transitions during page load to prevent FOUC / animations on load */
html.preload-transitions, html.preload-transitions * {
    transition: none !important;
}

/* Sidebar push-layout controlled by HTML class */
#app-sidebar {
    width: 0;
    min-width: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.sidebar-open #app-sidebar {
    width: 260px;
    min-width: 260px;
}

:root {
    --background: 220 16% 96%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 14% 90%;
    --secondary-foreground: 222 47% 11%;
    --muted: 220 14% 92%;
    --muted-foreground: 220 12% 30%;
    --accent: 220 14% 90%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 80%;
    --input: 220 13% 82%;
    --ring: 221 83% 53%;
    --radius: 0.5rem;
}

.dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 72% 45%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;
    --radius: 0.5rem;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

/* Base utility classes for custom animations used across prototypes */
@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Splitpane specific styles (ui2) */
.splitpane-handle {
    transition: background-color 0.2s;
}
.splitpane-handle:hover,
.splitpane-handle:active {
    background-color: hsl(var(--primary));
}

/* Sci-Chart aesthetics (ui3) */
.sci-axis { stroke: hsl(var(--muted-foreground)); stroke-width: 1; opacity: 0.5; }
.sci-grid { stroke: hsl(var(--border)); stroke-width: 1; stroke-dasharray: 2 4; }
.sci-label { fill: hsl(var(--muted-foreground)); font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.sci-title { fill: hsl(var(--foreground)); font-size: 12px; font-weight: 600; font-family: sans-serif; }
.tooltip { visibility: hidden; position: absolute; background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); padding: 4px 8px; border-radius: 4px; font-size: 10px; color: hsl(var(--popover-foreground)); z-index: 50; }
.sci-chart-hover:hover .tooltip { visibility: visible; }

/* Custom Select Dropdown */
.custom-select { position: relative; display: inline-flex; }
.custom-select-trigger {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    height: 32px; padding: 0 10px; font-size: 12px; border-radius: 6px;
    border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.custom-select-trigger:hover { border-color: hsl(var(--muted-foreground) / 0.4); background: hsl(var(--muted) / 0.5); }
.custom-select-trigger.open { border-color: hsl(var(--ring)); }
.custom-select-trigger .cs-chevron {
    width: 14px; height: 14px; opacity: 0.5; transition: transform 0.2s ease;
    flex-shrink: 0;
}
.custom-select-trigger.open .cs-chevron { transform: rotate(180deg); }
.custom-select-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 50;
    background: hsl(var(--popover)); border: 1px solid hsl(var(--border));
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px; max-height: 240px; overflow-y: auto;
    opacity: 0; transform: translateY(-4px) scale(0.97); pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.dark .custom-select-dropdown {
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.custom-select-dropdown.open {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.custom-select-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; font-size: 12px; border-radius: 4px;
    cursor: pointer; color: hsl(var(--foreground)); transition: background 0.1s;
    white-space: nowrap;
}
.custom-select-option:hover { background: hsl(var(--accent)); }
.custom-select-option.selected { background: hsl(var(--accent)); font-weight: 500; }
.custom-select-option .cs-check { width: 14px; height: 14px; opacity: 0; flex-shrink: 0; }
.custom-select-option.selected .cs-check { opacity: 1; }

/* Theme transition */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Sidebar inner panel background - override inline style for theme support */
#app-sidebar > div {
    background: hsl(220 14% 98%) !important;
    border-color: hsl(220 13% 82%) !important;
}
.dark #app-sidebar > div {
    background: hsl(220 25% 7%) !important;
    border-color: hsl(215 28% 17%) !important;
}

/* Notification Panel Tabs */
.np-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; font-size: 11px; font-weight: 500;
    color: hsl(var(--muted-foreground)); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    background: none; border-top: none; border-left: none; border-right: none;
    margin-bottom: -1px;
}
.np-tab:hover { color: hsl(var(--foreground)); }
.np-tab-active {
    color: hsl(var(--foreground));
    border-bottom-color: hsl(var(--primary));
}
.np-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 15px; padding: 0 4px;
    font-size: 9px; font-weight: 700; border-radius: 9px;
    background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground));
}
.np-tab-badge-amber {
    background: #f59e0b; color: #000;
}

/* ============================================================
   Light Mode Contrast Enhancements
   ============================================================ */

/* Cards get subtle shadow in light mode for depth */
html:not(.dark) .rounded-xl[class*="border-border"][class*="bg-card"] {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* Header and sticky elements */
html:not(.dark) header {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Table header: no text wrapping + light mode bg */
th {
    white-space: nowrap;
}
html:not(.dark) thead {
    background: hsl(220 14% 95%) !important;
}

/* Modal overlay lighter in light mode */
html:not(.dark) .fixed .bg-black\/60 {
    background: rgba(0,0,0,0.4) !important;
}

/* Notification panel shadow */
html:not(.dark) #notification-panel {
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
.dark #notification-panel {
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Stronger scrollbar in light mode */
html:not(.dark) ::-webkit-scrollbar-thumb {
    background: hsl(220 10% 78%);
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: hsl(220 10% 60%);
}

/* Icons and labels: ensure Lucide SVG icons are crisp in light mode */
html:not(.dark) [data-lucide] {
    stroke-width: 2.2;
}

/* Sidebar nav item icons and labels - stronger in light mode */
html:not(.dark) #app-sidebar .text-muted-foreground {
    color: hsl(220 12% 35%);
}
html:not(.dark) #app-sidebar nav a {
    color: hsl(220 15% 28%);
}
html:not(.dark) #app-sidebar nav a:hover {
    color: hsl(222 47% 11%);
}

/* Section group headings in sidebar */
html:not(.dark) #app-sidebar .uppercase.tracking-wider {
    color: hsl(220 10% 42%);
}

/* Boost Tailwind -400 accent colors to -500 equivalent in light mode for icon visibility */
html:not(.dark) .text-blue-400 { color: #2563eb !important; }
html:not(.dark) .text-emerald-400 { color: #059669 !important; }
html:not(.dark) .text-purple-400 { color: #7c3aed !important; }
html:not(.dark) .text-pink-400 { color: #db2777 !important; }
html:not(.dark) .text-yellow-400 { color: #d97706 !important; }
html:not(.dark) .text-cyan-400 { color: #0891b2 !important; }
html:not(.dark) .text-orange-400 { color: #ea580c !important; }
html:not(.dark) .text-indigo-400 { color: #4f46e5 !important; }
html:not(.dark) .text-rose-400 { color: #e11d48 !important; }