/**
 * Dynamic Grid Styles - Phase 7B.2
 * Styles for grids created via Grid Builder
 *
 * Note: Most styling is inherited from ExcelGridBase.
 * This file provides additional styles for dynamic grid containers
 * and error states.
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   Bug #7B.3-6 FIX: Column Group Header Spanning
   CRITICAL: table-layout must be 'auto' for colspan to work correctly.
   Without this, the group header won't visually span all grouped columns.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Force table-layout: auto on ALL excel-grid-table elements */
.excel-grid-table {
    table-layout: auto !important;
}

/* Ensure group header cells can span correctly */
.excel-grid-table th.grouped-header {
    /* CRITICAL: Force table-cell display for colspan to work */
    display: table-cell !important;
    /* Remove any width constraints that might prevent spanning */
    max-width: none !important;
}

/* COLLAPSED GROUP: Group header with fixed width */
.excel-grid-table th.grouped-header.collapsed-group-header {
    /* Override max-width when collapsed to preserve original width */
    max-width: var(--collapsed-width) !important;
    min-width: var(--collapsed-width) !important;
    width: var(--collapsed-width) !important;
}

/* Ensure grouped column cells don't have max-width constraints */
.excel-grid-table th.grouped-col {
    max-width: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CELL CONTENT WRAPPER (for column groups)
   CRITICAL: Use inline-flex for vertical centering without forcing cell expansion
   ═══════════════════════════════════════════════════════════════════════════════ */

.excel-grid-table .cell-content {
    display: inline-flex;
    align-items: center;  /* Vertical center */
    width: 100%;
}

/* Ensure vertical alignment works on all cells */
.excel-grid-table td {
    vertical-align: middle;        /* Center text vertically in cell */
    line-height: 1.15;             /* Compact line height (matches font-size feature) */
    white-space: normal;           /* Allow text to wrap */
    word-wrap: break-word;         /* Break long words */
    overflow-wrap: break-word;     /* Modern standard for word-wrap */
}

/* COLLAPSED GROUP: First column with fixed width */
.excel-grid-table th.grouped-col.collapsed-first-col,
.excel-grid-table td.collapsed-first-col {
    /* Override max-width when collapsed to preserve original width */
    max-width: var(--collapsed-width) !important;
    min-width: var(--collapsed-width) !important;
    width: var(--collapsed-width) !important;
}

/* COLLAPSED GROUP: Non-grouped columns (like ID) with preserved width */
.excel-grid-table th.collapsed-preserved-col,
.excel-grid-table td.collapsed-preserved-col {
    /* Preserve original width for non-grouped columns when group is collapsed */
    max-width: var(--collapsed-width) !important;
    min-width: var(--collapsed-width) !important;
    width: var(--collapsed-width) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC GRID CONTAINER
   Matches Procurement Analysis professional design exactly
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Import Excel Toolbar styles for consistency */
@import '../toolbar/excel-toolbar.css';

/* --- Main Dynamic Grid Container --- */
.dynamic-grid-container {
    display: none; /* Hidden by default, shown when view is active */
    flex-direction: column;
    flex: 1; /* CRITICAL: Flex grow to fill parent gantt-container */
    min-height: 0; /* Allow flex shrinking */
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.dynamic-grid-container.active,
.view-container {
    display: flex;
}

/* --- Content Wrapper --- */
.dynamic-grid-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC GRID HEADER - Matches Procurement Header Design
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Header Container (stacks title row + toolbar) --- */
.dynamic-grid-header {
    display: flex;
    flex-direction: column; /* Stack title row and toolbar vertically */
    align-items: stretch;
    padding: 0; /* No padding - title row has its own padding */
    background: white;
    border-bottom: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    flex-shrink: 0;
}

/* --- Title Row with Presence Avatars --- */
.dynamic-grid-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #e9ecef;
}

/* --- Grid Title --- */
.dynamic-grid-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex-shrink: 0;
}

/* --- Presence Container (avatars + connection status) --- */
.dynamic-grid-presence-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* --- Presence Avatars --- */
.dynamic-grid-presence-container .presence-avatars {
    display: flex;
    flex-direction: row-reverse;
}

/* --- Connection Status (inherit from procurement-styles.css) --- */
.dynamic-grid-presence-container .connection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.dynamic-grid-presence-container .connection-status.connected {
    background-color: #d4edda;
    color: #155724;
}

.dynamic-grid-presence-container .connection-status.disconnected {
    background-color: #f8d7da;
    color: #721c24;
}

.dynamic-grid-presence-container .connection-status.connecting {
    background-color: #fff3cd;
    color: #856404;
}

.dynamic-grid-presence-container .connection-status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dynamic-grid-presence-container .connection-status.connected::before {
    background-color: #28a745;
}

.dynamic-grid-presence-container .connection-status.disconnected::before {
    background-color: #dc3545;
}

.dynamic-grid-presence-container .connection-status.connecting::before {
    background-color: #ffc107;
    animation: pulse-connecting 1s ease-in-out infinite;
}

@keyframes pulse-connecting {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLBAR CONTAINER - Matches Procurement Toolbar Design
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Toolbar Container (Excel Toolbar) --- */
.dynamic-grid-header .toolbar-container {
    display: block;
    width: 100%;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    z-index: 10000 !important; /* CRITICAL: Above all grid elements */
}

/* --- Force Toolbar to Single Row (No Wrapping) --- */
.dynamic-grid-header .toolbar-container .excel-toolbar {
    flex-wrap: nowrap !important; /* Prevent wrapping to second row */
    overflow-x: auto; /* Allow horizontal scroll if needed */
}

/* --- CRITICAL: Override SearchManager's display:none rule --- */
.dynamic-grid-header .toolbar-container .toolbar-group .search-box {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
    min-width: auto !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Search Box Input Styling --- */
.dynamic-grid-header .toolbar-container .search-box input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 180px !important;
    height: auto !important;
    padding: 8px 12px 8px 32px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    background: white !important;
    color: #495057 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

.dynamic-grid-header .toolbar-container .search-box i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6c757d !important;
    font-size: 13px !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC GRID WRAPPER (Table Container)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Grid Container (scrollable area) --- */
.dynamic-grid-wrapper {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #f8f9fa;
    min-height: 0;
    position: relative;
}

/* Grid container pattern for specific grid types */
[class$="-grid-container"].dynamic-grid-wrapper {
    flex: 1;
    overflow: auto;
    min-height: 0;
    position: relative;
}

/* Legacy support for generic view containers */
.view-container {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: #fff;
}

.view-container.active {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ERROR STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

#dynamic-grid-error-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fef2f2;
    min-height: 400px;
    width: 100%;
}

#dynamic-grid-error-container h2 {
    margin: 0 0 8px 0;
    color: #991b1b;
}

#dynamic-grid-error-container pre {
    background: #fee2e2;
    padding: 12px;
    border-radius: 4px;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

.dynamic-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #64748b;
    font-size: 14px;
}

.dynamic-grid-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin-right: 12px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════════ */

.dynamic-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
    color: #64748b;
}

.dynamic-grid-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.dynamic-grid-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.dynamic-grid-empty-description {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLES - Thick scrollbars for all Grid Factory tables
   Applies to: Long Lead Items, and all future tables created via Grid Builder
   ═══════════════════════════════════════════════════════════════════════════════ */

/* WebKit browsers (Chrome, Safari, Edge) */
.dynamic-grid-wrapper::-webkit-scrollbar {
    width: 30px; /* Vertical scrollbar - thick for visibility */
    height: 30px; /* Horizontal scrollbar - thick for visibility */
}

.dynamic-grid-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0px;
}

.dynamic-grid-wrapper::-webkit-scrollbar-thumb {
    background: #888888;
    border-radius: 4px;
    border: 2px solid #f1f1f1;
}

.dynamic-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

.dynamic-grid-wrapper::-webkit-scrollbar-thumb:active {
    background: #333333;
}

.dynamic-grid-wrapper::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Firefox scrollbar styling */
.dynamic-grid-wrapper {
    scrollbar-width: auto; /* Thicker scrollbar in Firefox */
    scrollbar-color: #888888 #f1f1f1;
}

/* Also apply to any container with -grid-container suffix (for grid types) */
[class$="-grid-container"].dynamic-grid-wrapper::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}

[class$="-grid-container"].dynamic-grid-wrapper {
    scrollbar-width: auto;
    scrollbar-color: #888888 #f1f1f1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ROW RESIZING STYLES
   Added: 2025-12-25
   Enables interactive row height resizing via drag
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Default row height with transition */
.excel-grid-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Zebra striping - JS-applied class for correct alternating after filters */
.excel-grid-table tbody tr.zebra-even {
    background-color: #fafbfc;
}

.excel-grid-table tbody tr:hover {
    background-color: #f1f3f5;
}

.excel-grid-table tbody tr.zebra-even:hover {
    background-color: #f1f3f5;
}

/* Active resizing state - visual feedback */
.excel-grid-table tbody tr.resizing {
    background-color: rgba(33, 150, 243, 0.1) !important;
    outline: 1px solid rgba(33, 150, 243, 0.3);
}

/* Cell text wrapping - allow content to expand rows naturally */
.excel-grid-table tbody td {
    vertical-align: middle;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

/* Cell content wrapper - allow natural height */
.excel-grid-table tbody td .cell-content {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

/* Row resize handle - visible indicator at bottom of rows */
.excel-grid-table tbody tr {
    position: relative;
}

/* Resize handle line - REMOVED on hover, only shows when actively resizing
   Row resize is now limited to ID column only (RowResizingManager) */
.excel-grid-table tbody tr::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: transparent;
    /* cursor: row-resize; - REMOVED: cursor now only on ID column */
    transition: background-color 0.15s ease;
    z-index: 10;
}

/* REMOVED: No longer show resize indicator on row hover
   Resize is now limited to ID column only
.excel-grid-table tbody tr:hover::after {
    background: linear-gradient(to bottom, transparent, rgba(33, 150, 243, 0.4));
}
*/

/* Stronger indicator when actively resizing */
.excel-grid-table tbody tr.resizing::after {
    background: rgba(33, 150, 243, 0.6);
    height: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACR GRID ENHANCEMENTS
   Currency formatting, computed column tint, subtitles, totals row
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Negative currency — accounting format ($1,234.56) in red */
td.negative-currency { color: #dc2626; }
tfoot td.negative-currency { color: #dc2626; font-weight: 700; }

/* Column subtitles — formula references [A], [C = A + B] */
.col-subtitle {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #888;
    margin-top: 3px;
    letter-spacing: 0.3px;
}

/* Computed column visual indicator — subtle blue tint */
th.computed-header { background: #f0f4f8; }
td.computed-cell { background-color: rgba(59, 130, 246, 0.03); }
.zebra-even td.computed-cell { background-color: rgba(59, 130, 246, 0.05); }

/* Pinned totals row */
.excel-grid-table tfoot { position: sticky; bottom: 0; z-index: 2; }
.excel-grid-table tfoot td {
    background: #f0f2f5;
    font-weight: 700;
    border-top: 3px double #999;
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid #d1d5db;
    border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
}
.excel-grid-table tfoot td:first-child {
    text-align: left;
    font-style: italic;
}