/* PIP Global Styles - Common CSS for all PIP modules */
/* Dual Card Layout, DevExtreme Integration, AdminLTE Enhancements */

/* ========================================
   CSS VARIABLES - Global Theme Colors
   ======================================== */
:root {
    /* Primary Theme Colors */
    --pip-primary-color: #2c3e50;
    --pip-secondary-color: #3498db;
    --pip-accent-color: #e67e22;
    --pip-success-color: #27ae60;
    --pip-warning-color: #f1c40f;
    --pip-danger-color: #e74c3c;
    
    /* Text Colors */
    --pip-text-primary: #2c3e50;
    --pip-text-secondary: #95a5a6;
    --pip-background-light: #f8f9fa;
    
    /* Shadow & Border */
    --pip-shadow-light: 0 2px 6px rgba(0,0,0,0.05);
    --pip-shadow-medium: 0 4px 12px rgba(0,0,0,0.1);
    --pip-border-radius: 0.25rem;
}

/* ========================================
   DUAL CARD LAYOUT SYSTEM
   ======================================== */

/* Main dual card container */
.dual-card-container {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    height: calc(100vh - 120px); /* AdminLTE content adjustment */
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Left card - 30% width */
.dual-card-container .card-left {
    flex: 0 0 30%;
    min-width: 300px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Right card - 70% width */
.dual-card-container .card-right {
    flex: 1;
    min-width: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Card styling inside dual container */
.dual-card-container .card {
    margin-bottom: 0 !important;
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    box-shadow: var(--pip-shadow-light);
    border: 1px solid #ecf0f1;
    border-radius: var(--pip-border-radius);
}

.dual-card-container .card-body {
    flex: 1;
    overflow: visible;
    padding: 0.75rem;
    min-height: 1px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet and below - Stack cards vertically */
@media (max-width: 1200px) {
    .dual-card-container {
        flex-direction: column;
        height: auto;
    }
    
    .dual-card-container .card-left {
        flex: none;
        width: 100%;
        min-width: auto;
    }
    
    .dual-card-container .card-right {
        flex: none;
        width: 100%;
    }
}

/* Mobile optimization */
@media (max-width: 768px) {
    .dual-card-container {
        gap: 0.5rem;
        padding: 5px;
    }
    
    .dual-card-container .card-body {
        padding: 0.5rem;
    }
    
    .dual-card-container .card-left {
        min-width: 250px;
    }
}

/* ========================================
   ADMINLTE CARD ENHANCEMENTS
   ======================================== */

.card {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    margin-bottom: 1rem;
    border: 0;
    border-radius: var(--pip-border-radius);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--pip-shadow-medium);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: .75rem 1.25rem;
    position: relative;
    border-top-left-radius: var(--pip-border-radius);
    border-top-right-radius: var(--pip-border-radius);
}

.card-header.bg-success {
    background: linear-gradient(135deg, var(--pip-success-color) 0%, #219653 100%) !important;
    color: white;
    border-radius: 8px 8px 0 0;
}

.card-tools {
    float: right;
    margin-right: -0.625rem;
}

.card-tools .btn {
    padding: 0.375rem 0.4rem;
    margin-left: 0.3125rem;
    color: #6c757d;
}

/* ========================================
   DEVEXTREME TREELIST CUSTOMIZATIONS
   ======================================== */

/* TreeList basic styling */
::deep .dx-treelist .dx-data-row .dx-editor-cell {
    padding: 4px 8px;
}

::deep .dx-treelist .dx-row-alt > td {
    background-color: var(--pip-background-light);
}

::deep .dx-treelist .dx-header-row > td {
    background-color: #e9ecef;
    font-weight: 600;
}

/* TreeList Icon System - Area Icons */
::deep .dx-treelist .area-icon::before {
    content: '🏗️';
    margin-right: 8px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    font-size: 14px;
}

/* TreeList Icon System - Unit Icons */
::deep .dx-treelist .unit-icon::before {
    content: '🏢';
    margin-right: 8px;
    opacity: 0.9;
    font-size: 14px;
}

/* TreeList Icon System - PIP File Icons */
::deep .dx-treelist .pipfile-icon::before {
    content: '📄';
    margin-right: 8px;
    color: var(--pip-primary-color);
    font-size: 14px;
}

/* TreeList Icon System - Stage Gradients */
::deep .dx-treelist .fitup-stage {
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

::deep .dx-treelist .visual-stage {
    background: linear-gradient(90deg, #e67e22 0%, #d35400 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

::deep .dx-treelist .ndt-stage {
    background: linear-gradient(90deg, #9b59b6 0%, #8e44ad 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

::deep .dx-treelist .hydro-stage {
    background: linear-gradient(90deg, #1abc9c 0%, #16a085 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

::deep .dx-treelist .complete-stage {
    background: linear-gradient(90deg, #27ae60 0%, #229954 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

::deep .dx-treelist .default-stage {
    background: linear-gradient(90deg, #95a5a6 0%, #7f8c8d 100%);
    color: white !important;
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 6px !important;
}

/* ========================================
   DEVEXTREME DATAGRID ENHANCEMENTS
   ======================================== */

.dx-datagrid {
    border-radius: 8px;
    overflow: hidden;
}

.dx-row .dx-selection {
    background-color: rgba(52, 152, 219, 0.08) !important;
}

td {
    border-bottom: 2px solid var(--pip-secondary-color);
}

td:hover {
    background-color: rgba(52, 152, 219, 0.03) !important;
}

/* ========================================
   BUTTON STYLING
   ======================================== */

/* DevExtreme Button Enhancements */
.dx-button {
    transition: all 0.2s ease;
    border-radius: 6px !important;
}

.dx-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
}

/* Specific button types */
.dx-button[title*="Save"] {
    background-color: var(--pip-success-color);
    border-color: var(--pip-success-color);
}

.dx-button[title*="Delete"] {
    background-color: var(--pip-danger-color);
    border-color: var(--pip-danger-color);
}

.dx-button[title*="Delete"]:hover {
    background-color: #c0392b;
}

/* Standard buttons */
.btn {
    border-radius: var(--pip-border-radius);
    padding: .375rem .75rem;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* ========================================
   FORM CONTROLS
   ======================================== */

.form-control {
    border: 1px solid #ced4da;
    border-radius: var(--pip-border-radius);
    padding: .375rem .75rem;
}

.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Text Editor Styling */
.dx-texteditor-input {
    color: var(--pip-text-primary);
    background: var(--pip-background-light);
}

.dx-texteditor-input::placeholder {
    color: var(--pip-text-secondary);
    opacity: 0.7;
}

/* ========================================
   DARK THEME SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --pip-primary-color: #bdc3c7;
        --pip-background-light: #2c3e50;
        --pip-text-primary: #ecf0f1;
    }

    .dx-datagrid {
        background: #34495e;
        color: var(--pip-text-primary);
    }
    
    .card {
        background: #34495e;
        border-color: #4a5568;
    }
}

/* ========================================
   RFI & RPT SPECIFIC CARD OVERRIDES
   ======================================== */

/* Override card height for RFI and RPT pages to use min-content */
/* This ensures cards only take the height needed for their content */
[data-page*="RFI"] .card.mb-4.shadow-sm,
[data-page*="RPT"] .card.mb-4.shadow-sm,
.page-rfi .card.mb-4.shadow-sm,
.page-rpt .card.mb-4.shadow-sm {
    height: min-content !important;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
}

[data-page*="RFI"] .card-body.mt-1,
[data-page*="RPT"] .card-body.mt-1,
.page-rfi .card-body.mt-1,
.page-rpt .card-body.mt-1 {
    height: min-content !important;
    min-height: auto !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0.75rem;
}

/* Specific selectors for RFI and RPT pages using body class or container class */
body.rfi-page .card.mb-4.shadow-sm,
body.rpt-page .card.mb-4.shadow-sm,
.rfi-container .card.mb-4.shadow-sm,
.rpt-container .card.mb-4.shadow-sm {
    height: min-content !important;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
}

body.rfi-page .card-body.mt-1,
body.rpt-page .card-body.mt-1,
.rfi-container .card-body.mt-1,
.rpt-container .card-body.mt-1 {
    height: min-content !important;
    min-height: auto !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0.75rem;
}

/* Override for dual-card-container in RFI/RPT pages */
.dual-card-container .card.mb-4.shadow-sm {
    height: min-content !important;
    min-height: auto !important;
}

.dual-card-container .card-body.mt-1 {
    height: min-content !important;
    min-height: auto !important;
    flex: none !important;
}

/* DevExtreme layout items within these cards should also be min-content */
[data-page*="RFI"] .dx-layout-item,
[data-page*="RPT"] .dx-layout-item,
.page-rfi .dx-layout-item,
.page-rpt .dx-layout-item,
body.rfi-page .dx-layout-item,
body.rpt-page .dx-layout-item,
.rfi-container .dx-layout-item,
.rpt-container .dx-layout-item,
.dual-card-container .card.mb-4.shadow-sm .dx-layout-item {
    height: min-content !important;
    min-height: auto !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.pip-text-primary { color: var(--pip-text-primary) !important; }
.pip-text-secondary { color: var(--pip-text-secondary) !important; }
.pip-bg-primary { background-color: var(--pip-primary-color) !important; }
.pip-bg-success { background-color: var(--pip-success-color) !important; }
.pip-bg-warning { background-color: var(--pip-warning-color) !important; }
.pip-bg-danger { background-color: var(--pip-danger-color) !important; }

.pip-shadow-light { box-shadow: var(--pip-shadow-light) !important; }
.pip-shadow-medium { box-shadow: var(--pip-shadow-medium) !important; }

.pip-border-radius { border-radius: var(--pip-border-radius) !important; }