/* ============================================================================
 * wip_report.css
 * ============================================================================
 * Work In Progress Report - Styling
 * DOM-based overlay approach (same as Progress Report)
 * Part of the TrackStage Creative Projects ecosystem
 *
 * Version History:
 * -----------------------------------------------------------------------------
 * v1.1.1  2025-12-23  Webix tooltips
 *                     - Removed cursor: help (not needed for Webix tooltips)
 * v1.1.0  2025-12-23  Column width adjustments
 *                     - Project Name max-width: 220px with ellipsis
 *                     - Notes column increased to 300px (min 200px)
 * v1.0.9  2025-12-23  Added Team column
 *                     - Team column styling (180px width)
 *                     - Ellipsis truncation with help cursor for tooltip
 * v1.0.8  2025-12-23  Hide/Show for Catalog navigation
 *                     - Added .wip-hidden class for temporary hiding
 * v1.0.7  2025-12-23  Wider chart labels + Notes column
 *                     - Label width increased to 150px
 *                     - Bar track max-width reduced to 50%
 *                     - Added Notes column styling (250px width)
 *                     - Notes cell with ellipsis and help cursor for tooltip
 * v1.0.6  2025-12-23  Wider labels + collapsible charts
 *                     - Label width increased to 140px
 *                     - Bar track max-width 55% for shorter bars
 *                     - Toggle button/divider between charts and table
 *                     - Collapsed charts state styling
 * v1.0.5  2025-12-23  Chart pagination controls
 *                     - Prev/Next buttons styled
 *                     - Page indicator (X / Y)
 * v1.0.4  2025-12-23  Sort controls in header
 *                     - Moved sort buttons and refresh to header bar
 *                     - Styled for dark purple background
 *                     - Active button: white bg with purple text
 * v1.0.3  2025-12-23  Maximum height window
 *                     - Height: calc(100vh - 12px) for 6px top/bottom margins
 * v1.0.2  2025-12-23  Fixed sizing, font, z-index, pill width
 *                     - z-index: 100 (below kanban editor at 116)
 *                     - Width: 92%, Height: 85vh (matches Progress Report)
 *                     - Font family: Poppins, sans-serif
 *                     - Increased font sizes throughout
 *                     - Stage pills fixed width (120px)
 * v1.0.1  2025-12-23  DOM overlay styling, pill badges
 * v1.0.0  2025-12-23  Initial release
 * ============================================================================
 */

/* ----------------------------------------------------------------------------
 * Overlay and Modal Container 
 * z-index: 100 - BELOW kanban editor (116) so card opens ON TOP of WIP
 * ---------------------------------------------------------------------------- */

.wip-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wip-report-overlay.visible {
    opacity: 1;
}

/* Inherit Poppins font - same as Progress Report */
.wip-report-overlay,
.wip-report-overlay * {
    font-family: "Poppins", sans-serif;
}

/* Modal Container - maximum height with 6px margins */
.wip-report-modal {
    background: #ffffff;
    width: 92%;
    height: calc(100vh - 12px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.wip-report-overlay.visible .wip-report-modal {
    transform: scale(1);
}

/* ----------------------------------------------------------------------------
 * Header - with integrated sort controls
 * ---------------------------------------------------------------------------- */

.wip-header {
    background: linear-gradient(135deg, #351b5b 0%, #5a2d82 100%);
    color: #ffffff;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-shrink: 0;
}

.wip-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.wip-header-icon {
    font-size: 28px;
    opacity: 0.9;
}

.wip-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.wip-header-subtitle {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 2px;
}

/* Header Controls - sort buttons and refresh */
.wip-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: center;
}

.wip-sort-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.wip-sort-buttons {
    display: flex;
    gap: 0;
}

.wip-sort-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wip-sort-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.wip-sort-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.wip-sort-btn:not(:last-child) {
    border-right: none;
}

.wip-sort-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.wip-sort-btn.active {
    background-color: rgba(255, 255, 255, 0.95);
    color: #53007e;
    border-color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.wip-refresh-btn {
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wip-refresh-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.wip-refresh-btn i {
    margin-right: 6px;
}

.wip-close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wip-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ----------------------------------------------------------------------------
 * Content Area
 * ---------------------------------------------------------------------------- */

.wip-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #f8f7fa;
}

/* ----------------------------------------------------------------------------
 * Charts Row
 * ---------------------------------------------------------------------------- */

.wip-charts-row {
    display: flex;
    gap: 25px;
    padding: 25px 30px;
    background-color: #f8f7fa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.wip-chart-container {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.wip-chart-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 18px;
    text-align: center;
}

.wip-chart-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bar Chart Rows */
.wip-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 28px;
}

.wip-bar-row.wip-bar-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 3px 6px;
    margin: -3px -6px;
    transition: background-color 0.2s ease;
}

.wip-bar-row.wip-bar-clickable:hover {
    background-color: rgba(83, 0, 126, 0.08);
}

.wip-bar-row.wip-bar-empty {
    opacity: 0.3;
}

.wip-bar-label {
    width: 150px;
    flex-shrink: 0;
    font-size: 13px;
    color: #555;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wip-bar-track {
    flex: 1;
    max-width: 50%;
    height: 18px;
    background-color: #e9ecef;
    border-radius: 9px;
    overflow: hidden;
}

.wip-bar-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.3s ease;
}

.wip-bar-value {
    width: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: left;
}

/* Chart Pagination Controls */
.wip-chart-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.wip-page-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #53007e;
    transition: all 0.2s ease;
}

.wip-page-btn:hover:not([disabled]) {
    background: #53007e;
    color: #fff;
    border-color: #53007e;
}

.wip-page-btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

.wip-page-indicator {
    font-size: 12px;
    color: #666;
    min-width: 40px;
    text-align: center;
}

/* Section Toggle - Divider between charts and table */
.wip-section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 8px 30px;
    background: #f8f7fa;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wip-section-toggle:hover {
    background: #f0eef3;
}

.wip-toggle-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ccc 20%, #ccc 80%, transparent);
}

.wip-toggle-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #53007e;
    font-size: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.wip-section-toggle:hover .wip-toggle-btn {
    background: #53007e;
    color: #fff;
    border-color: #53007e;
    transform: scale(1.1);
}

/* Collapsed Charts State */
.wip-charts-row.wip-charts-collapsed {
    display: none;
}

/* Hidden State (when navigating to Catalog) */
.wip-report-overlay.wip-hidden {
    display: none !important;
}

/* Sort toolbar styles moved to header - see .wip-header-controls */

/* ----------------------------------------------------------------------------
 * Projects List / Table
 * ---------------------------------------------------------------------------- */

.wip-projects-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.wip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wip-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.wip-table th {
    background-color: #f0eef3;
    color: #333;
    font-weight: 600;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 2px solid #53007e;
    font-size: 13px;
}

.wip-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.wip-table-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wip-table-row:hover {
    background-color: rgba(83, 0, 126, 0.05);
}

/* Open Button */
.wip-open-btn {
    background: linear-gradient(135deg, #53007e 0%, #8c15a2 100%);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.wip-open-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(83, 0, 126, 0.4);
}

/* Project Name */
.wip-project-name {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notes Column */
.wip-notes-col {
    width: 300px;
    min-width: 200px;
}

.wip-notes-cell {
    font-size: 12px;
    color: #666;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wip-notes-cell.wip-notes-empty {
    color: #bbb;
    cursor: default;
}

/* Team Column */
.wip-team-col {
    width: 180px;
    min-width: 120px;
}

.wip-team-cell {
    font-size: 12px;
    color: #666;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wip-team-cell.wip-team-empty {
    color: #bbb;
    cursor: default;
}

/* Stage Pill - FIXED WIDTH for uniform appearance */
.wip-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 130px;
    padding: 6px 12px;
    border-radius: 18px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

.wip-stage-pill i {
    font-size: 12px;
}

/* Progress Cell */
.wip-progress-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wip-progress-bar {
    flex: 1;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    min-width: 70px;
}

.wip-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.wip-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    min-width: 40px;
    text-align: right;
}

/* Tasks */
.wip-tasks-complete {
    color: #28a745;
    font-weight: 600;
}

/* Last Active */
.wip-last-active {
    color: #777;
    font-size: 13px;
}

/* Deadline */
.wip-deadline-passed {
    color: #dc3545 !important;
    font-weight: 600;
}

.wip-deadline-passed i {
    color: #dc3545;
    margin-right: 4px;
}

.wip-no-deadline {
    color: #bbb;
}

/* Overdue Icon */
.wip-overdue-icon {
    color: #fd7e14;
    font-size: 16px;
    animation: wip-pulse 2s infinite;
}

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

/* ----------------------------------------------------------------------------
 * WIP Button in Search Bar
 * ---------------------------------------------------------------------------- */

.wip-toolbar-btn {
    background: linear-gradient(135deg, #53007e 0%, #8c15a2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.wip-toolbar-btn:hover {
    box-shadow: 0 4px 12px rgba(83, 0, 126, 0.4) !important;
    transform: translateY(-2px);
}

.wip-toolbar-btn i {
    margin-right: 0;
}

/* ----------------------------------------------------------------------------
 * Responsive Adjustments
 * ---------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) {
    .wip-charts-row {
        flex-wrap: wrap;
    }
    
    .wip-chart-container {
        min-width: calc(50% - 15px);
    }
    
    .wip-header-controls {
        gap: 8px;
    }
    
    .wip-sort-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .wip-refresh-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

@media screen and (max-width: 1000px) {
    .wip-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 20px;
    }
    
    .wip-header-controls {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    
    .wip-close-btn {
        position: absolute;
        right: 20px;
        top: 12px;
    }
}

@media screen and (max-width: 900px) {
    .wip-report-modal {
        width: 96%;
        height: calc(100vh - 12px);
    }
    
    .wip-charts-row {
        flex-direction: column;
        padding: 20px;
    }
    
    .wip-chart-container {
        min-width: 100%;
    }
    
    .wip-stage-pill {
        width: 110px;
        font-size: 11px;
    }
}

/* FILE: wip_report.css | VERSION: 1.1.1 */