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

/* ============================================================================
   RISK MANAGEMENT MODULE STYLES
   Follows same patterns as procurement-styles.css
   ============================================================================ */

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

/* --- Force Toolbar to Single Row (No Wrapping) --- */
.risk-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 */
.risk-header .toolbar-container .toolbar-group .search-box {
    display: flex !important; /* Flex layout - OVERRIDES display:none from SearchManager */
    align-items: center !important; /* Center vertically */
    position: relative !important; /* OVERRIDES position:fixed from SearchManager */
    width: auto !important; /* Auto width to match other groups */
    min-width: auto !important; /* Auto min-width */
    top: auto !important; /* Reset fixed positioning */
    right: auto !important; /* Reset fixed positioning */
    z-index: auto !important; /* Reset z-index */
    padding: 0 !important; /* No extra padding */
    margin: 0 !important; /* No extra margin */
    background: transparent !important; /* Transparent background */
    border: none !important; /* No border */
    box-shadow: none !important; /* No shadow */
}

/* --- FIX: Ensure Search Box Input and Icon Are Visible --- */
.risk-header .toolbar-container .search-box input {
    display: block !important; /* Force display */
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
    width: 180px !important; /* Force width */
    height: auto !important; /* Auto height like buttons */
    padding: 8px 12px 8px 32px !important; /* EXACT MATCH to toolbar-btn padding */
    border: 1px solid #dee2e6 !important; /* Border - same as buttons */
    border-radius: 6px !important; /* EXACT MATCH to toolbar-btn radius */
    font-size: 14px !important; /* EXACT MATCH to toolbar-btn font */
    background: white !important; /* White background */
    color: #495057 !important; /* Text color - same as buttons */
    line-height: normal !important; /* Normal line-height like buttons */
    box-sizing: border-box !important; /* Border-box for consistent sizing */
}

.risk-header .toolbar-container .search-box i {
    display: block !important; /* Force display */
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
    position: absolute !important; /* Absolute positioning */
    left: 10px !important; /* Left position */
    top: 50% !important; /* Vertical center */
    transform: translateY(-50%) !important; /* Center vertically */
    color: #6c757d !important; /* Icon color */
    font-size: 13px !important; /* Match input font size */
    pointer-events: none !important; /* No pointer events */
}

/* --- Main Risk Container --- */
.risk-management-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/height set by JavaScript flexbox - responds to sidebar changes automatically */
    /* DO NOT add width: 100% or height: 100% - conflicts with flex layout! */
}

.risk-management-container.sidebar-collapsed {
    margin-left: 60px; /* Adjust based on collapsed sidebar width */
}

/* --- Risk Header --- */
.risk-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;
}

/* Title row with header content */
.risk-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
}

.risk-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

/* Bug #27: Removed header buttons CSS - buttons not needed */

/* --- Risk Grid Container --- */
.risk-grid-container {
    flex: 1; /* CRITICAL: Grow to fill remaining space */
    min-height: 0; /* Allow flex shrinking */
    overflow: auto;
    padding: 0;
    background: #f8f9fa;
    /* DO NOT add explicit width/height - let flex handle it! */
}

/* Cell Content Wrapper */
/* CRITICAL: Use inline-flex to not force cell expansion */
.risk-grid-container .cell-content {
    display: inline-flex;
    align-items: center;  /* Vertical center */
    width: 100%;
}

/* Ensure vertical alignment works on cells */
.risk-grid-container 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 */
}

/* ============================================================================
   RISK SCORE CONDITIONAL FORMATTING
   Applied via JavaScript, CSS classes for reference
   ============================================================================ */

/* Risk Score Colors */
.risk-score-critical { background-color: #ef9a9a !important; }  /* Score >= 12 */
.risk-score-high     { background-color: #ffccbc !important; }  /* Score >= 8 */
.risk-score-medium   { background-color: #fff9c4 !important; }  /* Score >= 4 */
.risk-score-low      { background-color: #c8e6c9 !important; }  /* Score < 4 */

/* Status Colors */
.risk-status-open      { background-color: #ffecb3 !important; }
.risk-status-mitigated { background-color: #c8e6c9 !important; }
.risk-status-closed    { background-color: #e0e0e0 !important; }
.risk-status-accepted  { background-color: #bbdefb !important; }

/* ============================================================================
   VIEWER MODE STYLES
   Read-only visual indicators
   ============================================================================ */

.risk-management-container.viewer-mode .risk-header-actions button:not(.btn-risk-export):not(.btn-risk-close) {
    opacity: 0.5;
    pointer-events: none;
}

.viewer-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ============================================================================
   RISK TABLE STYLES (extends excel-grid-table)
   ============================================================================ */

#risk-management-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    table-layout: auto;
    background: white;
}

/* Bug #26: Fixed freeze column header - match Procurement's sticky structure */
#risk-management-table thead {
    position: sticky;
    top: 0;
    z-index: 200; /* Higher z-index for frozen column support */
    background: #f3f4f6;
}

/* Risk Header Row (Multi-Level Sticky Support) */
.risk-header-row {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    /* Note: top value set dynamically via JavaScript for multi-level headers */
    z-index: 20;
    /* Fix border shifting during scroll - GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#risk-management-table th {
    padding: 12px 16px;
    font-weight: 600;
    color: #495057;
    text-align: left;
    border-right: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    white-space: nowrap;
    user-select: none;
    position: relative;
}

#risk-management-table th:last-child {
    border-right: none;
}

/* Column Menu Trigger */
#risk-management-table th .column-menu-trigger {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 6px;
    cursor: pointer;
    color: #6c757d;
    opacity: 0;
    transition: opacity 0.2s;
}

#risk-management-table th:hover .column-menu-trigger {
    opacity: 1;
}

/* Filter Row */
#risk-management-table .filter-row th {
    padding: 4px 8px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
}

#risk-management-table .column-filter {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 12px;
}

#risk-management-table .column-filter:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
}

/* Table Body Rows */
#risk-management-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.15s ease;
}

#risk-management-table tbody tr:hover {
    background-color: #f1f3f5;
}

#risk-management-table tbody tr.zebra-even {
    background-color: #fafbfc;
}

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

/* Table Cells */
#risk-management-table td {
    padding: 8px 16px;  /* FIXED: Match Procurement's 8px vertical padding */
    border-right: 1px solid #e9ecef;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 300px;
    line-height: 1.15;  /* FIXED: Match Procurement's compact line-height */
    /* CRITICAL: Allow min-height from JavaScript to work properly */
    height: auto; /* Allow growth beyond min-height */
    box-sizing: border-box;
}

#risk-management-table td:last-child {
    border-right: none;
}

/* Drag Handle */
#risk-management-table .drag-handle {
    color: #adb5bd;
    cursor: grab;
    padding-right: 8px;
    user-select: none;
}

#risk-management-table .drag-handle:active {
    cursor: grabbing;
}

/* Cell Selection */
#risk-management-table td.selected {
    background-color: #e7f3ff !important;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/* Editable Cell */
#risk-management-table td.editable:hover {
    background-color: #e7f3ff;
    outline: 1px solid #007bff;
    outline-offset: -1px;
}

/* ============================================================================
   REAL-TIME UPDATE INDICATORS
   ============================================================================ */

/* Remote Update Highlight */
.remote-update-highlight {
    animation: remote-update-pulse 1.5s ease-out;
}

@keyframes remote-update-pulse {
    0% {
        background-color: #d1ecf1 !important;
        box-shadow: inset 0 0 8px rgba(23, 162, 184, 0.4);
    }
    50% {
        background-color: #bee5eb !important;
    }
    100% {
        background-color: inherit;
        box-shadow: none;
    }
}

/* Save Error Highlight */
.persist-error-highlight {
    animation: persist-error-flash 2s ease-out;
}

@keyframes persist-error-flash {
    0%, 50%, 100% {
        background-color: #f8d7da !important;
    }
    25%, 75% {
        background-color: #f5c6cb !important;
    }
}

/* Save Success Highlight */
.persist-success-highlight {
    animation: persist-success-flash 0.8s ease-out;
}

@keyframes persist-success-flash {
    0% {
        background-color: #d4edda !important;
    }
    100% {
        background-color: inherit;
    }
}

/* ============================================================================
   EMPTY/ERROR STATES
   ============================================================================ */

.risk-empty-state,
.risk-error-state,
.risk-no-access-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: #6c757d;
}

.risk-empty-state h3,
.risk-error-state h3,
.risk-no-access-state h3 {
    margin: 16px 0 8px 0;
    font-size: 1.25rem;
    color: #495057;
}

.risk-empty-state p,
.risk-error-state p,
.risk-no-access-state p {
    margin: 0;
    font-size: 0.95rem;
}

.risk-error-state p {
    color: #dc2626;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 1200px) {
    .risk-header {
        padding: 12px 16px;
    }

    .risk-header h2 {
        font-size: 1.1rem;
    }

    .risk-header-actions button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .risk-header-actions {
        gap: 4px;
    }

    .risk-header-actions button span {
        display: none; /* Hide button text on mobile, keep icons */
    }

    #risk-management-table td,
    #risk-management-table th {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================================================================
   SCROLLBAR STYLES - Thick scrollbars for better visibility
   ============================================================================ */

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

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

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

.risk-grid-container::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

.risk-grid-container::-webkit-scrollbar-thumb:active {
    background: #333333;
}

.risk-grid-container::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

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

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .risk-management-container {
        position: static;
        display: block !important;
        margin: 0;
        background: white;
    }

    .risk-header {
        page-break-after: avoid;
    }

    .risk-header-actions {
        display: none;
    }

    #risk-management-table tbody tr {
        page-break-inside: avoid;
    }
}