/* =============================================================================
   COMPANY SELECTOR DIRECTIVE
   Reusable company dropdown selector component
   ============================================================================= */

.company-selector-directive {
    position: relative;
}

/* Toggle Button */
.company-selector-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--theme-bg-card, rgba(30, 38, 50, 0.85));
    border: 1px solid var(--theme-border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    color: var(--theme-text-primary, #e6edf3);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.company-selector-disabled .company-selector-toggle {
    cursor: not-allowed;
    opacity: 0.6;
}

.company-selector-disabled .company-selector-toggle:hover {
    background: var(--theme-bg-card, rgba(30, 38, 50, 0.85));
    border-color: var(--theme-border-color, rgba(255, 255, 255, 0.08));
}

.company-selector-toggle:hover {
    background: rgba(54, 127, 211, 0.1);
    border-color: var(--theme-accent-cyan, #58a6ff);
}

.company-selector-toggle .fa-building {
    color: var(--theme-accent-cyan, #58a6ff);
    font-size: 14px;
}

.company-selector-name {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-selector-name.muted {
    color: var(--theme-text-secondary, #8b949e);
}

.company-selector-caret {
    font-size: 10px;
    color: var(--theme-text-secondary, #8b949e);
    transition: transform 0.2s ease;
}

.company-selector-caret.rotated {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.company-selector-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    max-width: 400px;
    background: var(--theme-bg-secondary, #1a2028);
    border: 1px solid var(--theme-border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1100;
    overflow: hidden;
    font-weight: 400; /* Reset font-weight to prevent inheritance from table headers */
}

/* Search Box */
.company-selector-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--theme-bg-secondary, #1a2028);
    border-bottom: 1px solid var(--theme-border-color, rgba(255, 255, 255, 0.08));
}

.company-selector-search .fa-search {
    color: var(--theme-text-muted, #6e7681);
    font-size: 13px;
}

.company-selector-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--theme-text-secondary, #8b949e);
    font-size: 13px;
}

.company-selector-loading .fa-spinner {
    color: var(--theme-accent-cyan, #58a6ff);
    font-size: 16px;
}

.company-selector-search input {
    flex: 1;
    background: rgba(26, 32, 40, 0.8);
    border: 1px solid var(--theme-border-color, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--theme-text-primary, #e6edf3);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
}

.company-selector-search input:focus {
    border-color: var(--theme-accent-cyan, #58a6ff);
}

.company-selector-search input::placeholder {
    color: var(--theme-text-muted, #6e7681);
}

/* Sticky "All Companies" option */
.company-selector-sticky {
    padding: 8px 8px 0 8px;
    border-bottom: 1px solid var(--theme-border-color, rgba(255, 255, 255, 0.08));
    background: var(--theme-bg-secondary, #1a2028);
}

.company-selector-sticky .company-selector-row {
    margin-bottom: 8px;
    background: rgba(54, 127, 211, 0.05);
    border: 1px dashed var(--theme-border-color, rgba(255, 255, 255, 0.12));
}

.company-selector-sticky .company-selector-row:hover {
    background: rgba(54, 127, 211, 0.12);
    border-color: var(--theme-accent-cyan, #58a6ff);
}

.company-selector-sticky .company-selector-row.active {
    background: rgba(54, 127, 211, 0.15);
    border-color: var(--theme-accent-cyan, #58a6ff);
    border-style: solid;
}

.company-selector-sticky .company-selector-row .fa-globe {
    color: var(--theme-accent-cyan, #58a6ff);
}

/* Company List */
.company-selector-list {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

/* Custom scrollbar */
.company-selector-list::-webkit-scrollbar {
    width: 8px;
}

.company-selector-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.company-selector-list::-webkit-scrollbar-thumb {
    background: var(--theme-border-color, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
}

.company-selector-list::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted, #6e7681);
}

/* Company Row */
.company-selector-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 6px;
    color: var(--theme-text-primary, #e6edf3);
    font-size: 13px;
    font-weight: 400; /* Ensure normal weight, not inherited from table headers */
    cursor: pointer;
    transition: background 0.15s ease;
}

.company-selector-row:hover {
    background: rgba(54, 127, 211, 0.1);
}

.company-selector-row.active {
    background: rgba(54, 127, 211, 0.15);
    color: var(--theme-accent-cyan, #58a6ff);
}

.company-selector-row .fa-building,
.company-selector-row .fa-globe {
    width: 16px;
    color: var(--theme-text-muted, #6e7681);
    font-size: 13px;
    flex-shrink: 0;
}

.company-selector-row.active .fa-building,
.company-selector-row.active .fa-globe {
    color: var(--theme-accent-cyan, #58a6ff);
}

.company-selector-row span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-selector-row .fa-check {
    color: var(--theme-success, #3fb950);
    font-size: 12px;
    flex-shrink: 0;
}

/* Empty state */
.company-selector-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--theme-text-muted, #6e7681);
    font-size: 13px;
}

.company-selector-empty .fa-info-circle {
    color: var(--theme-text-secondary, #8b949e);
}

/* =============================================================================
   LIGHT THEME STYLES
   ============================================================================= */

[data-theme="light"] .company-selector-toggle {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

[data-theme="light"] .company-selector-toggle:hover {
    background: var(--theme-table-row-hover);
    border-color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-toggle .fa-building {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-name.muted {
    color: var(--theme-text-secondary);
}

[data-theme="light"] .company-selector-caret {
    color: var(--theme-text-secondary);
}

[data-theme="light"] .company-selector-panel {
    background: var(--theme-bg-dropdown, var(--theme-bg-secondary));
    border-color: var(--theme-border-color);
    box-shadow: var(--theme-shadow-lg);
}

[data-theme="light"] .company-selector-search {
    background: var(--theme-bg-dropdown, var(--theme-bg-secondary));
    border-bottom-color: var(--theme-border-color);
}

[data-theme="light"] .company-selector-search .fa-search {
    color: var(--theme-text-muted);
}

[data-theme="light"] .company-selector-loading {
    color: var(--theme-text-secondary);
}

[data-theme="light"] .company-selector-loading .fa-spinner {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-search input {
    background: var(--theme-input-bg, var(--theme-bg-primary));
    border-color: var(--theme-input-border, var(--theme-border-color));
    color: var(--theme-text-primary);
}

[data-theme="light"] .company-selector-search input:focus {
    border-color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-search input::placeholder {
    color: var(--theme-text-muted);
}

[data-theme="light"] .company-selector-sticky {
    background: var(--theme-bg-dropdown, var(--theme-bg-secondary));
    border-bottom-color: var(--theme-border-color);
}

[data-theme="light"] .company-selector-sticky .company-selector-row {
    background: var(--theme-accent-blue-bg);
    border-color: var(--theme-border-color);
}

[data-theme="light"] .company-selector-sticky .company-selector-row:hover {
    background: var(--theme-table-row-hover);
    border-color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-sticky .company-selector-row.active {
    background: var(--theme-accent-blue-bg);
    border-color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-sticky .company-selector-row .fa-globe {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-list::-webkit-scrollbar-track {
    background: var(--theme-bg-subtle);
}

[data-theme="light"] .company-selector-list::-webkit-scrollbar-thumb {
    background: var(--theme-border-color);
}

[data-theme="light"] .company-selector-list::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted);
}

[data-theme="light"] .company-selector-row {
    color: var(--theme-text-primary);
}

[data-theme="light"] .company-selector-row:hover {
    background: var(--theme-table-row-hover);
}

[data-theme="light"] .company-selector-row.active {
    background: var(--theme-accent-blue-bg);
    color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-row .fa-building,
[data-theme="light"] .company-selector-row .fa-globe {
    color: var(--theme-text-muted);
}

[data-theme="light"] .company-selector-row.active .fa-building,
[data-theme="light"] .company-selector-row.active .fa-globe {
    color: var(--theme-accent-blue);
}

[data-theme="light"] .company-selector-row .fa-check {
    color: var(--theme-success);
}

[data-theme="light"] .company-selector-empty {
    color: var(--theme-text-muted);
}

[data-theme="light"] .company-selector-empty .fa-info-circle {
    color: var(--theme-text-secondary);
}

/* =============================================================================
   TABLE HEADER VARIANT
   Styles for using the company selector inside table header cells
   Uses same styling as default variant for consistency
   ============================================================================= */

.company-selector-header {
    position: relative;
}

/* Override panel positioning for header variant with higher z-index */
.company-selector-header .company-selector-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 320px;
    z-index: 99999; /* Very high z-index to appear above table elements */
}

/* =============================================================================
   TABLE HEADER CELL STYLES
   Styles for the table header cell containing the company selector
   ============================================================================= */

.company-header-cell {
    padding: 8px 12px !important;
    min-width: 180px;
    overflow: visible !important; /* Allow dropdown to overflow cell boundaries */
    position: static; /* Don't create new stacking context */
}

.company-header-cell .company-selector-directive {
    display: inline-block;
    position: relative; /* Positioning context for dropdown */
}

/* Portalized panel (header variant) */
.company-selector-panel-portal {
    position: absolute;
    z-index: 10100;
}

/* Ensure table header row and thead allow overflow */
thead:has(.company-header-cell) {
    overflow: visible !important;
}

tr:has(.company-header-cell) {
    overflow: visible !important;
}

/* Common table wrappers - allow overflow when dropdown is present */
#horizontal:has(.company-header-cell),
.table-responsive:has(.company-header-cell),
.exp-table-scroll-wrapper:has(.company-header-cell),
.exp-data-table-container:has(.company-header-cell) {
    overflow: visible !important;
}

/* Ensure the company cell in table body aligns properly */
td.company-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.company-cell .td-truncate {
    display: block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}