/* tepat.ai Laravel App CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Reset and Base */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* tepat.ai custom styles */
:root {
    --brand-primary: #4F46E5;
    --brand-primary-50: #eff6ff;
    --brand-primary-600: #2563eb;
    --brand-primary-700: #1d4ed8;
}

/* Additional custom styles for specific components */
.nav-thumbnail {
    width: 60px;
    height: 80px;
}

.page-image {
    transition: transform 0.2s ease-in-out;
    transform-origin: center;
}

.tab-btn {
    transition: all 0.2s ease-in-out;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: rgb(99, 102, 241);
    border-bottom-color: rgb(99, 102, 241);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Ensure tab panes are properly styled when active */
.tab-pane.active * {
    visibility: visible;
}

.nav-item {
    transition: all 0.2s ease-in-out;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Comprehensive Dark Mode Styles */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: rgb(17 24 39) !important;
    color: rgb(243 244 246) !important;
}

/* Sidebar dark mode */
.dark #sidebar {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .bg-white {
    background-color: rgb(31 41 55) !important;
}

.dark .dark\\:bg-gray-800 {
    background-color: rgb(31 41 55) !important;
}

/* Text colors in dark mode */
.dark .text-gray-900 {
    color: rgb(243 244 246) !important;
}

.dark .text-gray-700 {
    color: rgb(209 213 219) !important;
}

.dark .text-gray-600 {
    color: rgb(156 163 175) !important;
}

.dark .text-gray-500 {
    color: rgb(156 163 175) !important;
}

/* Border colors in dark mode */
.dark .border-gray-200 {
    border-color: rgb(55 65 81) !important;
}

.dark .border-gray-300 {
    border-color: rgb(55 65 81) !important;
}

.dark .border-gray-700 {
    border-color: rgb(55 65 81) !important;
}

/* Background colors in dark mode */
.dark .bg-gray-50 {
    background-color: rgb(17 24 39) !important;
}

.dark .bg-gray-100 {
    background-color: rgb(31 41 55) !important;
}

.dark .bg-gray-200 {
    background-color: rgb(55 65 81) !important;
}

/* Hover states in dark mode */
.dark .hover\\:bg-gray-50:hover {
    background-color: rgb(55 65 81) !important;
}

.dark .hover\\:bg-gray-700:hover {
    background-color: rgb(55 65 81) !important;
}

.dark .hover\\:text-gray-700:hover {
    color: rgb(243 244 246) !important;
}

.dark .hover\\:text-gray-200:hover {
    color: rgb(229 231 235) !important;
}

/* Main content area */
.dark #mainContentWrapper {
    background-color: rgb(17 24 39) !important;
}

.dark .main-content {
    background-color: rgb(17 24 39) !important;
}

/* Card and panel backgrounds */
.dark .bg-white.dark\\:bg-gray-800 {
    background-color: rgb(31 41 55) !important;
}

/* Results page specific styles - ONLY affect results page */
body.results-page {
    overflow: hidden;
}

body.results-page #sidebar {
    width: 4rem !important;
    transform: translateX(0) !important;
}

body.results-page #mainContentWrapper {
    margin-left: 4rem !important;
}

body.results-page .sidebar-text {
    display: none !important;
}

body.results-page #toggleSidebar,
body.results-page #closeSidebar {
    display: none !important;
}

/* Additional sidebar adjustments for results page ONLY */
body.results-page .sidebar-logo {
    margin: 0 auto;
}

body.results-page .border-t {
    width: 100%;
}

body.results-page #sidebar .group {
    justify-content: center;
}

/* Results page layout handling - ensure full height usage */
body.results-page .flex-1.overflow-y-auto {
    height: calc(100vh - 4rem); /* Account for sidebar height */
}

/* Make results layout fill remaining space more aggressively */
body.results-page #resultsLayout {
    height: calc(100vh - 12rem) !important;
    min-height: 600px !important;
}

/* Ensure results layout takes full available space */
body.results-page #resultsLayout {
    width: 100% !important;
    max-width: none !important;
}

/* Dynamic layout adjustments for sidebar collapse/expand */
body.results-page #resultsLayout .flex {
    transition: all 0.3s ease-in-out;
}

/* Results page column width overrides for 15%-flex-40% layout */
body.results-page .w-\[15\%\] {
    width: 15% !important;
}

body.results-page .w-\[40\%\] {
    width: 40% !important;
}

/* Sidebar collapse functionality */
.sidebar-expanded {
    width: 16rem !important; /* lg:w-64 = 256px = 16rem */
}

.sidebar-collapsed {
    width: 4rem !important; /* lg:w-16 = 64px = 4rem */
}

/* Simple, clean approach - only hide sidebar text and headings */
.sidebar-collapsed .sidebar-text,
.sidebar-collapsed h3.sidebar-text {
    display: none !important;
}

/* Hide ml-3 spans and text content in navigation only */
.sidebar-collapsed nav span.ml-3 {
    display: none !important;
    visibility: hidden !important;
}

/* Hide all text in navigation links except first child */
.sidebar-collapsed nav a > :not(:first-child),
.sidebar-collapsed nav a span:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
}

/* Prevent horizontal scroll in collapsed sidebar */
.sidebar-collapsed {
    overflow-x: hidden !important;
}

/* Ensure no overflow in sidebar content - both expanded and collapsed */
#sidebar {
    overflow-x: hidden !important;
}

.sidebar-expanded {
    overflow-x: hidden !important;
}

/* Prevent overflow in expanded sidebar navigation */
.sidebar-expanded nav,
.sidebar-expanded .flex-1,
.sidebar-expanded .flex-1.overflow-y-auto {
    overflow-x: hidden !important;
}

/* Ensure tooltips don't cause horizontal scroll in expanded state */
.sidebar-expanded .absolute.left-full {
    position: fixed !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

/* Alternative: Hide tooltips completely in both states to prevent overflow */
#sidebar .absolute.left-full {
    display: none !important;
    visibility: hidden !important;
}

/* Prevent content overflow in collapsed state */
.sidebar-collapsed .flex-1 {
    overflow-x: hidden !important;
}

/* Fix navigation menu overflow in collapsed state */
.sidebar-collapsed .flex-1.overflow-y-auto {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 4rem !important;
}

/* Hide tooltips completely in collapsed state to prevent overflow */
.sidebar-collapsed .absolute.left-full {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure navigation links don't cause overflow */
.sidebar-collapsed nav a {
    width: 100% !important;
    max-width: 4rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Prevent text overflow from menu items */
.sidebar-collapsed .ml-3 {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Ensure navigation container stays within bounds */
.sidebar-collapsed nav {
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Fix section headers in collapsed state */
.sidebar-collapsed h3.sidebar-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Fix border sections in collapsed state */
.sidebar-collapsed .border-t {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* More aggressive overflow prevention for navigation container */
.sidebar-collapsed nav {
    width: 4rem !important;
    max-width: 4rem !important;
    min-width: 4rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Force all navigation children to stay within bounds */
.sidebar-collapsed nav > * {
    max-width: 4rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Specific fix for navigation links with tooltips */
.sidebar-collapsed nav a.relative {
    width: 100% !important;
    max-width: 4rem !important;
    overflow: hidden !important;
    position: static !important;
}

/* Hide all absolute positioned elements in navigation when collapsed */
.sidebar-collapsed nav .absolute {
    display: none !important;
    visibility: hidden !important;
}

/* Ultra-aggressive horizontal scroll prevention */
.sidebar-collapsed,
.sidebar-collapsed * {
    overflow-x: hidden !important;
}

/* Force all navigation elements to stay within bounds */
.sidebar-collapsed nav,
.sidebar-collapsed nav *,
.sidebar-collapsed .flex-1,
.sidebar-collapsed .flex-1 * {
    max-width: 4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
}

/* Prevent any element from extending beyond sidebar width */
.sidebar-collapsed * {
    max-width: 4rem !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
}

/* Hide any element that might cause overflow */
.sidebar-collapsed .ml-3,
.sidebar-collapsed span:not(.flex-shrink-0),
.sidebar-collapsed .sidebar-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure padding doesn't cause overflow */
.sidebar-collapsed .px-3 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Fix any remaining overflow sources */
.sidebar-collapsed .group,
.sidebar-collapsed .relative {
    overflow: hidden !important;
    max-width: 4rem !important;
    width: 100% !important;
}

/* Hide all tooltips and absolute positioned elements completely */
.sidebar-collapsed .absolute,
.sidebar-collapsed [class*="absolute"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Restore navigation icons and structural elements */
.sidebar-collapsed nav a > :first-child,
.sidebar-collapsed nav a svg,
.sidebar-collapsed nav a img,
.sidebar-collapsed .group > :first-child {
    text-indent: 0 !important;
    line-height: normal !important;
    font-size: inherit !important;
    display: inline-block !important;
    visibility: visible !important;
    position: relative !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}

/* Center align navigation icons in collapsed sidebar */
.sidebar-collapsed nav a {
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
}

/* Center align navigation icons in collapsed sidebar */
.sidebar-collapsed nav a svg,
.sidebar-collapsed nav a img,
.sidebar-collapsed nav a i {
    margin: 0 auto !important;
}

/* Hide tooltips by default */
.sidebar-expanded .group .absolute {
    opacity: 0;
    pointer-events: none;
}

/* Show tooltips when sidebar is collapsed */
.sidebar-collapsed .group .absolute {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease-in-out;
}

/* Smooth transition for sidebar width changes */
#sidebar {
    transition: width 0.3s ease-in-out;
}

/* Ensure main content adjusts properly */
#mainContentWrapper {
    transition: margin-left 0.3s ease-in-out;
}

/* Prevent icon animation/shrinking during sidebar transition */
#sidebar nav,
#sidebar nav a,
#sidebar nav a svg,
#sidebar nav a img,
#sidebar nav a i,
.sidebar-collapsed nav,
.sidebar-collapsed nav a,
.sidebar-collapsed nav a svg,
.sidebar-collapsed nav a img,
.sidebar-collapsed nav a i {
    transition: none !important;
    transform: scale(1) !important;
    animation: none !important;
}

/* Fix icon size and prevent shrinking - both expanded and collapsed states */
#sidebar nav a svg,
#sidebar nav a img,
#sidebar nav a i,
.sidebar-collapsed nav a svg,
.sidebar-collapsed nav a img,
.sidebar-collapsed nav a i {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* Override any width/height transitions for navigation icons */
#sidebar nav a > :first-child,
.sidebar-collapsed nav a > :first-child {
    transition: none !important;
    transform: scale(1) !important;
}

/* Show tooltips when collapsed */
.sidebar-collapsed .group .absolute.hidden.lg\\:block {
    display: block !important;
}

/* Logo adjustments for collapsed state */
.sidebar-collapsed .sidebar-logo {
    justify-content: center !important;
    padding: 0.5rem !important;
}

/* Logo visibility and sizing for sidebar states */
#logoSymbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

#logoFull {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ultra-specific rules for collapsed state */
aside.sidebar-collapsed #logoSymbol {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2rem !important;
    width: auto !important;
    position: relative !important;
}

aside.sidebar-collapsed #logoFull {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* Ultra-specific rules for expanded state */
aside.sidebar-expanded #logoFull {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 3rem !important;
    width: auto !important;
    position: relative !important;
}

aside.sidebar-expanded #logoSymbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* Additional backup rules */
.sidebar-collapsed .sidebar-logo #logoSymbol {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 2rem !important;
    width: auto !important;
}

.sidebar-collapsed .sidebar-logo #logoFull {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.sidebar-expanded .sidebar-logo #logoFull {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 3rem !important;
    width: auto !important;
}

.sidebar-expanded .sidebar-logo #logoSymbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* DEBUG: Ultra-aggressive visibility rules for symbol logo */
#logoSymbol {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: 1 !important;
}

/* When sidebar is collapsed - force symbol logo to show */
.sidebar-collapsed #logoSymbol,
body .sidebar-collapsed #logoSymbol,
aside.sidebar-collapsed #logoSymbol,
.sidebar-collapsed .sidebar-logo #logoSymbol,
.sidebar-collapsed a.sidebar-logo #logoSymbol,
body:has(.sidebar-collapsed) #logoSymbol {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    height: 2rem !important;
    width: auto !important;
    min-height: 2rem !important;
    min-width: auto !important;
    max-height: none !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* DEBUG: Ensure logo container is visible */
.sidebar-collapsed .sidebar-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
}

/* Remove debug borders and fix sizing */
.sidebar-collapsed .sidebar-logo {
    padding: 0.25rem !important;
    height: 2.5rem !important;
}

/* Move toggle icon closer to logo when collapsed */
.sidebar-collapsed .flex.items-center.space-x-2 {
    space-x: 0 !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

/* Remove all margins between logo and toggle */
.sidebar-collapsed .sidebar-logo + .flex {
    margin-left: 0 !important;
}

/* Make logo and toggle touch each other */
.sidebar-collapsed .sidebar-logo,
.sidebar-collapsed #toggleSidebar {
    display: inline-flex !important;
}

/* Ensure no space between logo and toggle container */
.sidebar-collapsed .flex.items-center {
    gap: 0 !important;
}

/* Position both logo and toggle inside sidebar */
.sidebar-collapsed .sidebar-logo {
    margin-left: 0.125rem !important;
    justify-content: flex-start !important;
}

.sidebar-collapsed #toggleSidebar {
    margin-left: -0.5rem !important;
    padding: 0.125rem !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure container stays within sidebar bounds */
.sidebar-collapsed .p-4 {
    padding: 0.25rem 0.125rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.sidebar-collapsed .flex.items-center.justify-between {
    width: 100% !important;
    max-width: 4rem !important;
}

/* Specifically target the sidebar header */
.sidebar-collapsed .border-b {
    padding: 0.125rem 0.25rem !important;
}

/* Position logo container more to left when collapsed */
.sidebar-collapsed .sidebar-logo {
    margin-left: 0.125rem !important;
    justify-content: flex-start !important;
}

/* Adjust toggle button positioning */
.sidebar-collapsed #toggleSidebar {
    margin-left: -0.25rem !important;
    padding: 0.25rem !important;
}

.sidebar-collapsed #logoSymbol {
    height: 1.25rem !important;
    width: 1.25rem !important;
    object-fit: contain !important;
}

/* Ensure theme toggle is always visible and clickable */
#themeToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sidebar-collapsed #themeToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure theme icons maintain consistent size in both states */
.theme-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* Theme icon size in collapsed sidebar */
.sidebar-collapsed .theme-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* Fix theme icon visibility in collapsed state */
.sidebar-collapsed #sunIcon {
    display: none !important;
}

.sidebar-collapsed #moonIcon {
    display: block !important;
}

/* Override dark mode icon visibility in collapsed state */
.sidebar-collapsed.dark #sunIcon {
    display: none !important;
}

.sidebar-collapsed.dark #moonIcon {
    display: block !important;
}

/* Override light mode icon visibility in collapsed state */
.sidebar-collapsed:not(.dark) #sunIcon {
    display: block !important;
}

.sidebar-collapsed:not(.dark) #moonIcon {
    display: none !important;
}

/* Ensure footer doesn't cause overflow */
.sidebar-collapsed .mt-auto {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}