// Fusion Central - Backend Styles
// Copyright 2024-2025 Nexa Systems Inc.
// License OPL-1

.o_fusion_central {
    // Settings page styling
    .fc-settings-section {
        margin-bottom: 20px;
        
        h5 {
            color: #0077b6;
            border-bottom: 2px solid #0077b6;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }
    }
    
    // Status indicators
    .fc-status-created {
        color: #28a745;
        font-weight: 500;
    }
    
    .fc-status-pending {
        color: #ffc107;
        font-weight: 500;
    }
}

// ADP portion columns styling
.o_list_view {
    .o_field_monetary.fc-adp-portion {
        color: #0077b6;
        font-weight: 500;
    }
    
    .o_field_monetary.fc-client-portion {
        color: #28a745;
        font-weight: 500;
    }
}

// =============================================================================
// STATUS BUTTONS: Theme-friendly (light + dark mode)
// Uses Odoo CSS variables with safe fallbacks.
// =============================================================================

// Good / confirmed / within period (green tint)
.fc-btn-status-good {
    background-color: rgba(40, 167, 69, 0.12) !important;
    color: #1e7e34 !important;
    border: 1px solid rgba(40, 167, 69, 0.35) !important;

    &:hover, &:focus {
        background-color: rgba(40, 167, 69, 0.22) !important;
        color: #1e7e34 !important;
        border-color: rgba(40, 167, 69, 0.5) !important;
    }

    .fa { color: inherit !important; }
}

// Bad / not confirmed / overdue (red tint)
.fc-btn-status-bad {
    background-color: rgba(220, 53, 69, 0.12) !important;
    color: #bd2130 !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;

    &:hover, &:focus {
        background-color: rgba(220, 53, 69, 0.22) !important;
        color: #bd2130 !important;
        border-color: rgba(220, 53, 69, 0.5) !important;
    }

    .fa { color: inherit !important; }
}

// Dark mode overrides
html.dark, .o_dark {
    .fc-btn-status-good {
        background-color: rgba(40, 167, 69, 0.18) !important;
        color: #6fcf87 !important;
        border-color: rgba(40, 167, 69, 0.4) !important;

        &:hover, &:focus {
            background-color: rgba(40, 167, 69, 0.28) !important;
            color: #6fcf87 !important;
        }
    }

    .fc-btn-status-bad {
        background-color: rgba(220, 53, 69, 0.18) !important;
        color: #f08a93 !important;
        border-color: rgba(220, 53, 69, 0.4) !important;

        &:hover, &:focus {
            background-color: rgba(220, 53, 69, 0.28) !important;
            color: #f08a93 !important;
        }
    }
}

// Also support Odoo's color-scheme media query for dark mode
@media (prefers-color-scheme: dark) {
    .o_web_client:not(.o_light) {
        .fc-btn-status-good {
            background-color: rgba(40, 167, 69, 0.18) !important;
            color: #6fcf87 !important;
            border-color: rgba(40, 167, 69, 0.4) !important;

            &:hover, &:focus {
                background-color: rgba(40, 167, 69, 0.28) !important;
                color: #6fcf87 !important;
            }
        }

        .fc-btn-status-bad {
            background-color: rgba(220, 53, 69, 0.18) !important;
            color: #f08a93 !important;
            border-color: rgba(220, 53, 69, 0.4) !important;

            &:hover, &:focus {
                background-color: rgba(220, 53, 69, 0.28) !important;
                color: #f08a93 !important;
            }
        }
    }
}

// =============================================================================
// SALE ORDER LINE LIST: Column width control
// Odoo 19 ignores the XML width attribute on list fields.
// We use CSS on th[data-name] with table-layout:fixed to force widths.
// Product column has NO explicit width so it absorbs all remaining space.
// =============================================================================

.o_field_one2many[name="order_line"] .o_list_table {
    table-layout: fixed !important;
    width: 100% !important;

    // ---- Product column: gets ALL remaining space (no width set) ----
    // Truncate long product names with ellipsis
    th[data-name="product_template_id"],
    td[name="product_template_id"],
    th[data-name="product_id"],
    td[name="product_id"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // ---- Serial Number: generous width ----
    th[data-name="x_fc_serial_number"] { width: 140px !important; }

    // ---- Quantity columns ----
    th[data-name="product_uom_qty"] { width: 55px !important; }
    th[data-name="qty_delivered"]    { width: 55px !important; }
    th[data-name="qty_invoiced"]     { width: 55px !important; }

    // ---- UoM ----
    th[data-name="product_uom_id"]   { width: 50px !important; }

    // ---- Price / Discount / Tax / Subtotal ----
    th[data-name="price_unit"]       { width: 80px !important; }
    th[data-name="tax_ids"]          { width: 70px !important; }
    th[data-name="discount"]         { width: 45px !important; }
    th[data-name="price_subtotal"]   { width: 90px !important; }

    // ---- ADP / Client Portion ----
    th[data-name="x_fc_adp_portion"]    { width: 80px !important; }
    th[data-name="x_fc_client_portion"] { width: 80px !important; }

    // ---- sale_margin optional columns ----
    th[data-name="purchase_price"]   { width: 70px !important; }
    th[data-name="margin"]           { width: 65px !important; }
    th[data-name="margin_percent"]   { width: 55px !important; }

    // ---- Description (hidden by default, but set width in case user shows it) ----
    th[data-name="name"]             { width: 120px !important; }

    // Tax tags: compact badges
    td[name="tax_ids"] .badge {
        font-size: 0.72em;
        padding: 2px 4px;
    }

    // All cells: allow text truncation
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

// Responsive: scale text on smaller screens
@media (max-width: 1400px) {
    .o_field_one2many[name="order_line"] .o_list_table {
        font-size: 0.9em;
    }
}

@media (max-width: 1200px) {
    .o_field_one2many[name="order_line"] .o_list_table {
        font-size: 0.85em;
    }
}

// Form view styling for ADP fields
.o_form_view {
    .fc-adp-totals {
        background-color: #f8f9fa;
        border-left: 4px solid #0077b6;
        padding: 10px;
        margin: 10px 0;
        
        .fc-total-label {
            font-weight: 600;
            color: #495057;
        }
        
        .fc-total-value {
            font-size: 1.1em;
            font-weight: 700;
        }
        
        .fc-adp-value {
            color: #0077b6;
        }
        
        .fc-client-value {
            color: #28a745;
        }
    }
}

// ADP Summary Line Details - constrain product column width
.o_fc_line_details {
    .o_list_table {
        table-layout: fixed !important;
        width: 100% !important;
        
        // Product column - first column
        td:first-child,
        th:first-child {
            max-width: 300px !important;
            width: 40% !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
        
        // Other columns - auto size
        td:not(:first-child),
        th:not(:first-child) {
            width: auto !important;
            white-space: nowrap !important;
        }
    }
}

// =============================================================================
// XML VIEWER STYLES
// =============================================================================

.xml-viewer-content {
    overflow: auto;
    background: #1e1e1e;
    
    .xml-code {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
        font-size: 13px;
        line-height: 1.5;
        color: #d4d4d4;
        background: transparent;
        white-space: pre;
        tab-size: 2;
    }
    
    // Syntax highlighting colors (VS Code dark theme inspired)
    .xml-tag {
        color: #569cd6;
        font-weight: 500;
    }
    
    .xml-attr {
        color: #9cdcfe;
    }
    
    .xml-value {
        color: #ce9178;
    }
}

// =============================================================================
// ADP DOCUMENTS TILE LAYOUT
// =============================================================================

.fc-document-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
}

.fc-document-tile {
    width: 220px;
    min-width: 220px;
    background: var(--o-bg-card, var(--bs-body-bg));
    border: 1px solid var(--o-border-color, var(--bs-border-color));
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    &:hover {
        border-color: var(--o-action, var(--bs-primary));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }
    
    // Preview area
    .fc-tile-preview {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--o-bg-200, var(--bs-secondary-bg));
        border-bottom: 1px solid var(--o-border-color, var(--bs-border-color));
        position: relative;
        
        .fc-pdf-icon {
            font-size: 48px;
            color: var(--o-danger, var(--bs-danger));
        }
        
        .fc-xml-icon {
            font-size: 48px;
            color: var(--o-info, var(--bs-info));
        }
        
        .fc-empty-icon {
            font-size: 48px;
            opacity: 0.35;
        }
        
        .fc-thumbnail {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .fc-upload-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            
            i {
                font-size: 32px;
                color: white;
                margin-bottom: 8px;
            }
            
            span {
                color: white;
                font-size: 12px;
                font-weight: 500;
            }
        }
    }
    
    &.fc-tile-empty:hover .fc-upload-overlay {
        opacity: 1;
    }
    
    // Tile info area
    .fc-tile-info {
        padding: 12px;
        text-align: center;
        
        .fc-tile-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 6px;
            line-height: 1.3;
        }
        
        .fc-tile-filename {
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .fc-tile-empty-text {
            font-size: 11px;
            opacity: 0.5;
            font-style: italic;
        }
    }
    
    // Actions bar
    .fc-tile-actions {
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--o-border-color, var(--bs-border-color));
        background: var(--o-bg-100, var(--bs-tertiary-bg));
        padding: 8px;
        
        button {
            flex: 1;
            padding: 8px;
            border: none;
            background: transparent;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s ease;
            
            &:hover {
                background: var(--o-action, var(--bs-primary));
                color: white;
            }
            
            &:not(:last-child) {
                border-right: 1px solid var(--o-border-color, var(--bs-border-color));
            }
        }
    }
    
    // Has file state
    &.fc-tile-filled {
        border-color: var(--o-success, var(--bs-success));
    }
    
    // Required field indicator
    &:has(.o_required_modifier) {
        .fc-tile-label::after {
            content: " *";
            color: var(--o-danger, var(--bs-danger));
            font-weight: bold;
        }
        
        &:not(:has(.o_field_binary[value])) {
            border-color: var(--o-warning, var(--bs-warning));
        }
    }
}

// Section headers for document groups
.fc-doc-section {
    margin-bottom: 24px;
    
    .fc-doc-section-header {
        font-size: 14px;
        font-weight: 600;
        border-bottom: 2px solid var(--o-action, var(--bs-primary));
        padding-bottom: 8px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        
        i {
            margin-right: 8px;
            color: var(--o-action, var(--bs-primary));
        }
    }
}

// Style the upload field in tiles
.fc-tile-upload-field {
    width: 100%;
    
    .o_select_file_button {
        width: 100%;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 12px !important;
        padding: 8px !important;
        
        &:hover {
            background: var(--o-action, var(--bs-primary)) !important;
            color: white !important;
        }
    }
    
    .o_file_name {
        display: none !important;
    }
    
    .o_input_file {
        display: none !important;
    }
    
    &.o_field_binary {
        display: flex;
        justify-content: center;
    }
    
    .o_form_binary_progress {
        width: 100%;
        padding: 4px;
    }
}

// Fix button styling in tiles
.fc-document-tile {
    .btn-link {
        text-decoration: none !important;
        
        &:hover {
            text-decoration: none !important;
        }
        
        .fc-pdf-icon:hover {
            opacity: 0.7;
            transform: scale(1.1);
            transition: all 0.2s ease;
        }
    }
}

// =============================================================================
// APPROVAL SCREENSHOTS GALLERY
// =============================================================================

.fc-gallery-section {
    background: var(--o-bg-100, var(--bs-tertiary-bg));
    border: 2px solid var(--o-border-color, var(--bs-border-color));
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    
    .fc-gallery-header {
        padding-bottom: 12px;
        
        .fc-tile-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }
        
        .badge {
            font-size: 11px;
        }
        
        .btn {
            font-size: 12px;
            padding: 4px 10px;
        }
    }
    
    .fc-gallery-content {
        padding-top: 8px;
        
        // Style the many2many_binary widget as a gallery
        .o_field_many2many_binary {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 12px !important;
            justify-content: flex-start !important;
            align-items: flex-start !important;
            padding-top: 4px !important;
            
            // Each file item as a thumbnail card
            .o_attachments {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 12px !important;
                align-items: flex-start !important;
                
                .o_attachment {
                    width: 80px !important;
                    height: 80px !important;
                    margin: 0 !important;
                    border-radius: 6px !important;
                    overflow: hidden !important;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
                    transition: all 0.2s ease !important;
                    cursor: pointer !important;
                    position: relative !important;
                    border: 2px solid transparent !important;
                    
                    &:hover {
                        transform: scale(1.05) !important;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
                        border-color: #0077b6 !important;
                    }
                    
                    // Image preview thumbnail - clicking opens in new tab
                    .o_image {
                        width: 100% !important;
                        height: 100% !important;
                        object-fit: cover !important;
                    }
                    
                    // File icon for non-images
                    .o_attachment_icon {
                        width: 100% !important;
                        height: 100% !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        background: #e9ecef !important;
                        
                        i {
                            font-size: 28px !important;
                            color: #6c757d !important;
                        }
                    }
                    
                    // Hide filename inside thumbnail
                    .o_attachment_name {
                        display: none !important;
                    }
                    
                    // Delete button styling
                    .o_attachment_delete {
                        position: absolute !important;
                        top: 2px !important;
                        right: 2px !important;
                        background: rgba(220, 53, 69, 0.9) !important;
                        color: white !important;
                        border-radius: 50% !important;
                        width: 18px !important;
                        height: 18px !important;
                        display: flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        font-size: 10px !important;
                        opacity: 0 !important;
                        transition: opacity 0.2s !important;
                        z-index: 5 !important;
                    }
                    
                    &:hover .o_attachment_delete {
                        opacity: 1 !important;
                    }
                }
            }
            
            // Upload button - inline compact style
            .o_attach,
            button.o_attach,
            .o_select_file_button {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 4px !important;
                padding: 6px 12px !important;
                border: 1px solid #28a745 !important;
                border-radius: 4px !important;
                background: white !important;
                color: #28a745 !important;
                font-size: 12px !important;
                font-weight: 500 !important;
                cursor: pointer !important;
                transition: all 0.2s ease !important;
                height: auto !important;
                width: auto !important;
                min-height: 32px !important;
                margin-top: 4px !important;
                
                &:hover {
                    background: #28a745 !important;
                    color: white !important;
                }
                
                i, .fa {
                    font-size: 12px !important;
                    margin: 0 !important;
                }
            }
        }
    }
    
    .fc-gallery-empty {
        padding: 16px;
        
        .fa {
            color: #adb5bd;
        }
    }
}

// Google Places Autocomplete dropdown - ensure it appears above Odoo modals
.pac-container {
    z-index: 100000 !important;
}

// =============================================================================
// LTC REPAIR KANBAN - Stage & priority color coding
// Uses data-* attributes on <main> + CSS :has() to style the outer card.
// =============================================================================

.o_kanban_view .o_kanban_record {

    // --- Stage left border (on the full card) ---
    &:has(main[data-stage="info"]) {
        border-left: 3px solid #0dcaf0 !important;
        background-color: rgba(13, 202, 240, 0.04) !important;
    }
    &:has(main[data-stage="warning"]) {
        border-left: 3px solid #ffc107 !important;
        background-color: rgba(255, 193, 7, 0.04) !important;
    }
    &:has(main[data-stage="success"]) {
        border-left: 3px solid #198754 !important;
        background-color: rgba(25, 135, 84, 0.04) !important;
    }
    &:has(main[data-stage="danger"]) {
        border-left: 3px solid #dc3545 !important;
        background-color: rgba(220, 53, 69, 0.04) !important;
    }
    &:has(main[data-stage="secondary"]) {
        border-left: 3px solid #adb5bd !important;
    }

    // --- Priority high: warm amber bottom accent ---
    &:has(main[data-priority="1"]) {
        box-shadow: inset 0 -2px 0 0 rgba(255, 152, 0, 0.4) !important;
    }

    // --- Emergency: override with stronger red ---
    &:has(main[data-emergency="1"]) {
        border-left: 4px solid #dc3545 !important;
        background-color: rgba(220, 53, 69, 0.06) !important;
        box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15) !important;
    }

    // Emergency + priority combined
    &:has(main[data-emergency="1"][data-priority="1"]) {
        box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.15),
                    inset 0 -2px 0 0 rgba(255, 152, 0, 0.4) !important;
    }
}

// Dark mode: slightly stronger tints
html.dark, .o_dark {
    .o_kanban_view .o_kanban_record {
        &:has(main[data-stage="info"])    { background-color: rgba(13, 202, 240, 0.07) !important; }
        &:has(main[data-stage="warning"]) { background-color: rgba(255, 193, 7, 0.07) !important; }
        &:has(main[data-stage="success"]) { background-color: rgba(25, 135, 84, 0.07) !important; }
        &:has(main[data-stage="danger"])  { background-color: rgba(220, 53, 69, 0.07) !important; }
        &:has(main[data-emergency="1"])   { background-color: rgba(220, 53, 69, 0.1) !important; }
    }
}

.adp_file_preview {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 12px;
    max-height: 500px;
    overflow-y: auto;
}