/*
 * SPAC Research - Base Page / AG Grid Stylesheet
 * Light Theme (default) + Dark Theme
 */

/* ===========================
   AG Grid - Alpine Theme Overrides
   =========================== */

.ag-theme-alpine .ag-header {
  background-color: var(--table-header-color, #F5F5F5);
  color: var(--text-color, black);
  border-bottom: 1px solid var(--table-border, #e5e7eb);
}

.ag-theme-alpine .ag-header-cell {
  background-color: var(--table-header-color, #F5F5F5);
  font-weight: 520;
  color: var(--text-color, black);
  padding: 2px 4px;
  height: 50px !important;
}

.custom-header-font {
  font-size: 12px;
}

.ag-pivot-mode-panel {
  display: none;
}

.ag-theme-alpine .ag-header {
  min-height: 50px !important;
}

.ag-theme-alpine .ag-cell[col-id="portfolio"] {
  overflow: visible;
  position: relative;
}

.ag-row {
  z-index: 0;
}

.ag-body-vertical-scroll-viewport {
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges;
}

.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
  width: 10px !important;
  background: rgba(0, 0, 0, 0.05);
}

.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 5px;
}

.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4) !important;
}

.ag-body-vertical-scroll {
  opacity: 1 !important;
  visibility: visible !important;
}

.ag-root-wrapper {
  overflow: visible !important;
}

html {
  scrollbar-width: auto !important;
}

.ag-theme-alpine .ag-status-bar {
  font-weight: normal;
  font-size: 10px;
  position: absolute;
  top: -25px;
  right: -5px;
  border: none !important;
  color: var(--text-secondary, inherit);
}

.ag-icon-asc {
  font-size: 11px;
  padding: 0;
}

.ag-icon-desc {
  font-size: 11px;
  padding: 0;
}

.ag-header-cell .ag-icon-filter {
  visibility: hidden;
}

.ag-header-cell:hover .ag-icon-filter {
  visibility: visible;
}

.show-filter-panel .ag-icon-filter {
  display: inline-block;
}

.ag-row-hover {
  z-index: 1;
}


/* ===========================
   Portfolio Dropdown (AG Grid)
   =========================== */

.portfolio-dropdown {
  position: relative;
  display: inline-block;
}

.portfolio-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  background-color: var(--bg-surface, #fff);
  min-width: 250px;
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0,0,0,0.2));
  z-index: 1;
  overflow-y: auto;
  width: 100% !important;
  border: 1px solid var(--border-color, #ddd);
}

.dropdown-item {
  font-size: 12px;
  color: var(--text-color, inherit);
}

.portfolio-dropdown:hover .dropdown-menu {
  display: block;
  z-index: 1050;
}

.portfolio-dropdown .dropdown-menu .dropdown-item {
  line-height: 1.5;
}

.portfolio-dropdown .dropdown-menu input:focus,
.portfolio-dropdown .dropdown-menu button:focus {
  outline: none;
}

.portfolio-dropdown .dropdown-header {
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: left;
  font-size: 11px;
  color: var(--text-secondary, inherit);
}

.portfolio-dropdown .btn-info {
  height: calc(1.5em + 0.75rem + 2px);
  line-height: 1.5;
  display: inline-block;
  padding: 0.375rem 0.375rem;
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid var(--border-subtle, #dee2e6);
  margin: 0.5rem 1rem;
}

.blur-column {
  filter: blur(5px);
}

.grey-class {
  background-color: var(--table-header-color, #F5F5F5);
}


/* ===========================
   Custom AG Theme
   =========================== */

.custom-ag-theme {
  --ag-header-border-color: transparent;
  --ag-border-color: var(--border-subtle, #ddd);
  --ag-background-color: var(--bg-surface, #fff);
  --ag-header-background-color: var(--table-header-color, #F5F5F5);
  --ag-header-foreground-color: var(--text-color, black);
  --ag-foreground-color: var(--text-color, black);
  --ag-row-hover-color: var(--table-row-hover, rgba(0,0,0,0.04));
  --ag-odd-row-background-color: var(--table-row-alt, transparent);
  --ag-row-border-color: var(--table-border, #e5e7eb);
  --ag-input-focus-border-color: var(--accent, #015477);
  --ag-selected-row-background-color: var(--accent-light, rgba(1,84,119,0.08));
  --ag-range-selection-background-color: var(--accent-light, rgba(1,84,119,0.08));
}

.custom-ag-theme .ag-root-wrapper {
  border: none;
  padding: 10px 12px;
  background-color: var(--bg-surface, #fff);
  border-radius: var(--radius-lg, 8px);
}

[data-theme="dark"] .custom-ag-theme .ag-root-wrapper {
  box-shadow: none;
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
}

[data-theme="dark"] .custom-ag-theme .ag-row-hover {
  background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] .custom-ag-theme .ag-header-cell {
  border-right: 1px solid var(--table-border);
}

[data-theme="dark"] .custom-ag-theme .ag-status-bar {
  color: var(--text-muted);
  background-color: transparent;
}

[data-theme="dark"] .custom-ag-theme {
  /* Alpine leaves resize handle / column separator on light #dde2eb; tie to table borders */
  --ag-header-column-resize-handle-color: var(--table-border);
  --ag-header-column-separator-color: var(--table-border);
  --ag-secondary-foreground-color: var(--text-secondary);
  --ag-data-color: var(--text-color);
  --ag-header-cell-hover-background-color: var(--bg-surface-hover);
  --ag-column-hover-color: var(--table-row-hover);
  --ag-input-border-color: var(--border-color);
  --ag-checkbox-unchecked-color: var(--text-muted);
  --ag-checkbox-checked-color: var(--accent);
  --ag-toggle-button-off-background-color: var(--text-muted);
  --ag-toggle-button-on-background-color: var(--accent);
  --ag-side-bar-panel-width: 200px;
  --ag-modal-overlay-background-color: rgba(11, 14, 20, 0.7);
  --ag-control-panel-background-color: var(--bg-surface);
  --ag-subheader-background-color: var(--bg-surface-raised);
  --ag-invalid-color: var(--color-negative);
  --ag-icon-font-color: var(--text-secondary);
}

[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}


/* ===========================
   AG Grid Sidebar
   =========================== */

.ag-side-bar {
  border-left: 2px solid var(--border-color, darkgray) !important;
  border-right: 1px solid var(--border-color, darkgray) !important;
  box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.1);
}

.ag-side-buttons {
  color: var(--accent, #263c6f) !important;
  font-size: 14px !important;
  font-weight: 500;
}

.ag-side-button {
  background-color: var(--table-header-color, #F5F5F5);
  color: var(--accent, #263c6f) !important;
  border-radius: 4px;
  margin: 5px;
}

[data-theme="dark"] .ag-side-bar {
  background-color: var(--bg-surface);
}

[data-theme="dark"] .ag-tool-panel-wrapper {
  background-color: var(--bg-surface);
  color: var(--text-color);
}

[data-theme="dark"] .ag-column-select-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ag-filter-toolpanel-header,
[data-theme="dark"] .ag-filter-toolpanel-search {
  color: var(--text-color);
}

[data-theme="dark"] .ag-column-select-header-filter-wrapper input {
  background-color: var(--bg-input);
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .ag-paging-panel {
  color: var(--text-secondary);
  border-top-color: var(--border-color);
}


/* ===========================
   Tab Container
   =========================== */

.tab-container {
  width: 100%;
}

.tab-container .nav-tabs {
  display: flex;
  justify-content: space-between;
  border-bottom: none;
  width: 100%;
  gap: 0;
}

.tab-container .nav-tabs .nav-item {
  flex-grow: 1;
  text-align: center;
}

.tab-container .nav-tabs .nav-link {
  border: none;
  padding: 12px 0;
  color: var(--text-secondary, #5f6b7a);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
  border-bottom: 2px solid var(--border-subtle, #ddd);
}

.tab-container .nav-tabs .nav-link:hover:not(.active):not(.disabled) {
  color: var(--text-color, #1a1d23);
  border-bottom-color: var(--border-color, #d1d5db);
  background-color: var(--bg-surface-hover, rgba(0,0,0,0.04));
}

.tab-container .nav-tabs .nav-link.active {
  position: relative;
  border: 1px solid var(--accent, #015477);
  border-bottom: 2px solid transparent !important;
  background-color: var(--bg-surface, #fff);
  color: var(--accent, #015477);
  font-weight: 600;
}

.tab-container .nav-tabs .nav-link.disabled {
  color: var(--text-muted, #999);
  cursor: not-allowed;
}

[data-theme="dark"] .tab-container .nav-tabs .nav-link {
  color: var(--text-secondary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tab-container .nav-tabs .nav-link:hover:not(.active):not(.disabled) {
  color: var(--text-color);
  border-bottom-color: rgba(88, 166, 255, 0.35);
  background-color: rgba(88, 166, 255, 0.08);
}

[data-theme="dark"] .tab-container .nav-tabs .nav-link.active {
  color: var(--text-color);
  background-color: rgba(88, 166, 255, 0.14);
  border-color: rgba(88, 166, 255, 0.5);
  border-bottom-color: var(--bg-surface) !important;
}