/* === Layout === */

.dark #account-table-container thead {
    background-color: #374151;
}

.dark #account-table-container tbody tr:hover {
    background-color: #1f2937;
}

.dark #account-table-container tfoot {
    background-color: #1f2937;
}

.dark #account-table-container td.sticky {
    /* Background is now inherited from the row (e.g., bg-gray-800 or bg-gray-900) */
  background-color: inherit;
}

.dark #account-table-container tr:hover td.sticky {
    background-color: #1f2937;
    /* Match the row hover */;
}

.dark #account-table-container tfoot td.sticky {
    background-color: #374151;
}

/* === Sidebar Toggle Styles === */
.sidebar-collapsed {
    width: 5rem;
    /* 80px */
  transition: width 0.3s ease-in-out;
}


.sidebar-expanded #sidebar-content-title,
.sidebar-expanded #account-selector-title {
    display: inline-block;
    transform: scaleX(1) translateX(0);
    transform-origin: center;
    transition: transform 0.25s ease, text-align 0.25s ease;
    text-align: center;
}

.sidebar-collapsed #sidebar-content-title,
.sidebar-collapsed #account-selector-title {
    display: inline-block;
    transform: scaleX(0.8) translateX(-20%);
    transform-origin: center;
    transition: transform 0.25s ease, text-align 0.25s ease;
    text-align: center;
}

/* === END MODIFICATION === */


.sidebar-expanded #dark-mode-toggle-sidebar {
    display: none;
}

.sidebar-collapsed #dark-mode-toggle-sidebar {
    display: block;
}

.sidebar-expanded {
    width: 20rem;
    /* 320px */
  transition: width 0.3s ease-in-out;
}

.sidebar-collapsed #sidebar-content,
.sidebar-collapsed .nav-link-text,
.sidebar-collapsed .export-btn-text {
    display: none;
}

.sidebar-collapsed .nav-link svg {
    margin-right: 0;
}

.sidebar-collapsed .nav-link {
    justify-content: center;
}

.sidebar-collapsed #logo-text-container {
    display: none;
}

/* Hide header toggle when collapsed */
.sidebar-collapsed #dark-mode-toggle-header {
    display: none;
}

/* === MODIFIED: Remove explicit hide for account selector title === */
/* .sidebar-collapsed #account-selector-title {
    display: none;
}

*/
/* === END MODIFICATION === */


#account-table-container {
    overflow-x: auto;
    position: relative;
    /* === NEW: Set fixed widths for sticky columns === */
    --col1: 120px;
    --col2: 150px;
    --col3: 150px;
}

#account-table-container table {
    table-layout: auto;
    width: max-content;
}

#account-table-container th,
#account-table-container td {
    white-space: nowrap;
}

#account-table-container thead th.sticky {
    background-color: #f3f4f6;
}

.dark #account-table-container thead th.sticky {
    background-color: #374151;
}

#account-table-container th.sticky,
#account-table-container td.sticky {
    position: sticky;
    z-index: 20;
    /* === FIX: Inherit background color from row === */
  background-color: inherit;
}

#account-table-container tr:hover td.sticky {
    z-index: 21;
    /* === FIX: Match row hover color === */
  background-color: #f3f4f6;
    /* light mode hover */;
}

.dark #account-table-container tr:hover td.sticky {
    background-color: #1f2937;
    /* dark mode hover */;
}

/* === Typography === */

.dark .dark\:border-gray-700 {
    border-color: #374151;
}

.dark .dark\:border-gray-600 {
    border-color: #4b5563;
}

/* === Sophisticated Financial Dashboard Styling === */

/* Summary Bar Enhancements */
#monthly-summary-bar {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Unified Comparison Table & Annual Table */
#unified-comparison-table,
#unified-annual-table {
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}

/* Add defined borders to table containers in light mode */
.bg-white.rounded-xl.shadow-lg.overflow-hidden:has(#unified-comparison-table),
.bg-white.rounded-xl.shadow-lg.overflow-hidden:has(#unified-annual-table) {
    border: 2px solid #e5e7eb;
}

.dark .bg-white.rounded-xl.shadow-lg.overflow-hidden:has(#unified-comparison-table),
.dark .bg-white.rounded-xl.shadow-lg.overflow-hidden:has(#unified-annual-table) {
    border: none;
}

/* Table Header - Professional Financial Look */
#unified-comparison-table thead th,
#unified-annual-table thead th {
    font-weight: 700;
    letter-spacing: 0.05em;
    background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
    border-bottom: 2px solid #d1d5db;
    position: sticky;
    top: 0;
    z-index: 20;
}

.dark #unified-comparison-table thead th,
.dark #unified-annual-table thead th {
    background: linear-gradient(to bottom, #1f2937, #111827);
    border-bottom: 2px solid #4b5563;
}

/* Category Headers - Bloomberg-style */
#unified-comparison-table .category-header,
#unified-annual-table .category-header {
    background: linear-gradient(to right, #e5e7eb, #f3f4f6);
    border-top: 2px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

.dark #unified-comparison-table .category-header,
.dark #unified-annual-table .category-header {
    background: linear-gradient(to right, #374151, #1f2937);
    border-top: 2px solid #4b5563;
    border-bottom: 1px solid #4b5563;
}

/* Line Item Rows - Sophisticated Hover */
#unified-comparison-table .line-item-row,
#unified-annual-table .line-item-row {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #f3f4f6;
}

.dark #unified-comparison-table .line-item-row,
.dark #unified-annual-table .line-item-row {
    border-bottom: 1px solid #1f2937;
}

#unified-comparison-table .line-item-row:hover,
#unified-annual-table .line-item-row:hover {
    background: linear-gradient(to right, #eff6ff, #dbeafe) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.dark #unified-comparison-table .line-item-row:hover,
.dark #unified-annual-table .line-item-row:hover {
    background: linear-gradient(to right, #1e3a5f, #1e40af) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* Grand Total - Premium Finish */
#unified-comparison-table .grand-total,
#unified-annual-table .grand-total {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-top: 4px double #6b7280;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.dark #unified-comparison-table .grand-total,
.dark #unified-annual-table .grand-total {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-top: 4px double #9ca3af;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* Zebra Striping Enhancement */
#unified-comparison-table .bg-gray-850 {
    background-color: #1a202c;
}

.dark #unified-comparison-table .bg-gray-750,
.dark .bg-gray-750 {
    background-color: #2d3748;
}

.dark #unified-comparison-table .bg-gray-650 {
    background-color: #4a5568;
}

/* Fix dark mode zebra striping - override Tailwind classes */
.dark #unified-comparison-table .line-item-row.bg-gray-50,
.dark #unified-annual-table .line-item-row.bg-gray-50 {
    background-color: #2d3748 !important;
}

.dark #unified-comparison-table .line-item-row.bg-white,
.dark #unified-annual-table .line-item-row.bg-white {
    background-color: #1f2937 !important;
}

/* Ensure category headers and summary bars have proper dark mode */
.dark #monthly-summary-bar,
.dark #annual-summary-bar {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
}

.dark .category-header {
    background: linear-gradient(to right, #374151, #1f2937) !important;
}

/* Premium Select Dropdown */
#month-selector {
    cursor: pointer;
}

#month-selector:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Accordions */
#annual-detailed-items {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

#annual-detailed-items.hidden {
    max-height: 0;
    opacity: 0;
}

#toggle-annual-icon {
    transition: transform 0.3s ease-in-out;
}

/* Button hover states */
#toggle-annual-details-btn:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark #toggle-annual-details-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Chart container styling */
canvas {
    border-radius: 8px;
}

/* Print-friendly styles */
@media print {
    #unified-comparison-table .line-item-row:hover {
        background: inherit !important;
        transform: none !important;
        box-shadow: none !important;
    }

    #monthly-summary-bar {
        position: relative !important;
    }
}

.dark select,
.dark input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

.dark select:disabled,
.dark input:disabled {
    background-color: #1f2937;
    color: #6b7280;
}

/* Account selector font size increase by 40% */
#account-selector,
#scenario-account-select {
    font-size: 1.2em;
}

.dark #touLegend {
    background-color: #1f2937;
}

/* --- NEW: Style for drag-and-drop file upload --- */
#empty-state.drag-over {
    background-color: #eef2ff;
    /* indigo-50 */
  border-color: #4f46e5;
    /* indigo-600 */;
}

.dark #empty-state.drag-over {
    background-color: #3730a3;
    /* indigo-800 */
  border-color: #818cf8;
    /* indigo-400 */;
}

/* === NEW: Style for file-loaded state === */
#empty-state.file-loaded {
    border-color: #22c55e;
    /* green-500 */
  background-color: #f0fdf4;
    /* green-50 */;
}

.dark #empty-state.file-loaded {
    border-color: #22c55e;
    /* green-500 */
  background-color: #052e16;
    /* dark green-950 */;
}

/* === Components === */

.nav-active {
    background-color: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

.nav-inactive {
    color: #4b5563;
}

.nav-inactive:hover {
    background-color: #f3f4f6;
}

.nav-link svg {
    color: #9ca3af;
}

.nav-active svg {
    color: #4f46e5;
}

.rate-source-btn {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}

.rate-source-btn:hover {
    background-color: #f3f4f6;
}

.rate-source-btn.active {
    background-color: #e0e7ff;
    color: #3730a3;
    border-color: #c7d2fe;
}

.filter-btn-active {
    background-color: #4f46e5;
    color: white;
}

.filter-btn-inactive {
    background-color: #e5e7eb;
    color: #374151;
}

.filter-btn-inactive:hover {
    background-color: #d1d5db;
}

.dark .nav-active {
    background-color: #312e81;
    color: #eef2ff;
}

.dark .nav-active svg {
    color: #c7d2fe;
}

.dark .nav-inactive {
    color: #9ca3af;
}

.dark .nav-inactive:hover {
    background-color: #374151;
    color: #f3f4f6;
}

.dark .nav-inactive svg {
    color: #6b7280;
}

.dark .rate-source-btn {
    background-color: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .rate-source-btn:hover {
    background-color: #4b5563;
}

.dark .rate-source-btn.active {
    background-color: #3730a3;
    color: #e0e7ff;
    border-color: #4f46e5;
}

.dark table thead {
    background-color: #374151;
}

.dark table tbody tr:hover {
    background-color: #1f2937;
}

.dark .filter-btn-active {
    background-color: #4f46e5;
    color: white;
}

.dark .filter-btn-inactive {
    background-color: #374151;
    color: #d1d5db;
}

.dark .filter-btn-inactive:hover {
    background-color: #4b5563;
}

/* === Utilities === */

/* Dark Mode Overrides */
.dark .dark\:bg-gray-900 {
    background-color: #111827;
}

.dark .dark\:bg-gray-800 {
    background-color: #1f2937;
}

.dark .dark\:bg-gray-700 {
    background-color: #374151;
}

.dark .dark\:text-gray-100 {
    color: #f3f4f6;
}

.dark .dark\:text-gray-200 {
    color: #e5e7eb;
}

.dark .dark\:text-gray-300 {
    color: #d1d5db;
}

.dark .dark\:text-gray-400 {
    color: #9ca3af;
}

.dark .dark\:hover\:bg-gray-700:hover {
    background-color: #374151;
}

/* === Responsive & At-Rules === */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}