/**
 * jsGantt-improved Custom Overrides
 * Styling to integrate jsGantt with Bootstrap 5 and match app design
 */

/* ============================================
   GENERAL GANTT CONTAINER STYLING
   ============================================ */

.gantt {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

/* ==================================================================
   ROW HEIGHT ALIGNMENT FIX
   Override jsGantt default heights to ensure alignment

   Root issue: jsGantt cells have border: 1px solid which adds 2px to height
   with default box-sizing: content-box. This causes headers (33px) to be
   taller than data rows (32.62px).

   Solution: Force box-sizing: border-box on ALL cells so borders are
   included in the height, not added to it.
   ================================================================== */

/* ALL table rows - force exact height */
.gtasktableh tr,
.gcharttableh tr,
.gtasktable tr,
.gcharttable tr {
    height: 20px !important;
}

/* LEFT SIDE CELLS - Task list table (safe to use border-box for height) */
.gtasktableh td,
.gtasktable td,
/* Task list cell content classes */
.gname, .gres, .gdur, .gcomp, .gstartdate, .genddate, .gcost,
.gtaskname, .gresource, .gduration, .gpccomplete, .gplanstartdate, .gplanenddate {
    height: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
    line-height: 18px !important; /* Adjust for borders */
    padding: 0px 4px !important; /* Normalize padding */
    box-sizing: border-box !important; /* OK for left side */
    overflow: hidden !important;
    vertical-align: middle !important;
}

/* RIGHT SIDE CELLS - Chart timeline (MUST use content-box for jsGantt width calculations) */
.gcharttableh td,
.gcharttable td,
/* Timeline cell content classes */
.gmajorheading, .gminorheading, .gtaskcell, .gtaskcellwkend {
    height: 20px !important;
    max-height: 20px !important;
    min-height: 20px !important;
    line-height: 18px !important; /* Adjust for borders */
    padding: 0px 1px !important; /* CRITICAL: Must match jsGantt's 3px cell margin assumption (1px padding + 1px border = ~3px) */
    box-sizing: border-box !important; /* Align with left side for consistent 20px height (includes borders) */
    overflow: visible !important; /* CRITICAL: Allow bars to extend beyond cell boundaries when using vUseSingleCell */
    vertical-align: middle !important;
}

/* Header cell styling only */
.gtasktableh .gname, .gtasktableh .gres, .gtasktableh .gdur, .gtasktableh .gcomp,
.gtasktableh .gstartdate, .gtasktableh .genddate, .gtasktableh .gcost,
.gcharttableh .gmajorheading, .gcharttableh .gminorheading {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.gtasktableh .gname, .gtasktableh .gres, .gtasktableh .gdur, .gtasktableh .gcomp,
.gtasktableh .gstartdate, .gtasktableh .genddate, .gtasktableh .gcost {
    border-bottom: 2px solid #dee2e6;
}

.gcharttableh .gmajorheading, .gcharttableh .gminorheading {
    border-bottom: 1px solid #dee2e6;
}

/* ============================================
   TASK ROW STYLING
   ============================================ */

.gname, .gres, .gdur, .gcomp, .gstartdate, .genddate {
    border-right: 1px solid #e9ecef;
}

.gtaskcell {
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* Hover effect on rows */
.gtaskname:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

/* ============================================
   TASK BAR COLORS (Phase-specific)
   Bootstrap 5 Flat Design with Subtle Shadows
   ============================================ */

/* Override any 3D gradients from jsgantt.css with flat colors */
.gtaskbar,
.gtaskbarcontainer,
.gtaskblue, .gtaskred, .gtaskgreen, .gtaskyellow,
.gtaskorange, .gtaskpurple, .gtaskpink, .gtaskcyan, .gtaskgray {
    background-image: none !important; /* Remove all gradients */
    border-radius: 4px !important; /* Bootstrap default radius */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; /* Bootstrap card shadow */
    transition: all 0.2s ease-in-out !important; /* Smooth hover effect */
}

/* Contract phase - Gray (Bootstrap Secondary) */
.gtaskgray {
    background-color: #6c757d !important;
    border: 1px solid #5a6268 !important;
}

.gtaskgray .gtaskbarcontainer {
    background-color: #6c757d !important;
    background-image: none !important;
}

/* Design phase - Blue (Bootstrap Primary) */
.gtaskblue {
    background-color: #0d6efd !important;
    border: 1px solid #0a58ca !important;
}

.gtaskblue .gtaskbarcontainer {
    background-color: #0d6efd !important;
    background-image: none !important;
}

/* Build phase - Orange (Bootstrap Orange) */
.gtaskorange {
    background-color: #fd7e14 !important;
    border: 1px solid #dc6b0a !important;
}

.gtaskorange .gtaskbarcontainer {
    background-color: #fd7e14 !important;
    background-image: none !important;
}

/* Commissioning phase - Green (Bootstrap Success) */
.gtaskgreen {
    background-color: #198754 !important;
    border: 1px solid #146c43 !important;
}

.gtaskgreen .gtaskbarcontainer {
    background-color: #198754 !important;
    background-image: none !important;
}

/* Red tasks (Bootstrap Danger) */
.gtaskred {
    background-color: #dc3545 !important;
    border: 1px solid #b02a37 !important;
}

.gtaskred .gtaskbarcontainer {
    background-color: #dc3545 !important;
    background-image: none !important;
}

/* Yellow tasks (Bootstrap Warning) */
.gtaskyellow {
    background-color: #ffc107 !important;
    border: 1px solid #d39e00 !important;
}

.gtaskyellow .gtaskbarcontainer {
    background-color: #ffc107 !important;
    background-image: none !important;
}

/* Purple tasks */
.gtaskpurple {
    background-color: #6f42c1 !important;
    border: 1px solid #59359a !important;
}

.gtaskpurple .gtaskbarcontainer {
    background-color: #6f42c1 !important;
    background-image: none !important;
}

/* Pink tasks */
.gtaskpink {
    background-color: #d63384 !important;
    border: 1px solid #ab296a !important;
}

.gtaskpink .gtaskbarcontainer {
    background-color: #d63384 !important;
    background-image: none !important;
}

/* Cyan tasks (Bootstrap Info) */
.gtaskcyan {
    background-color: #0dcaf0 !important;
    border: 1px solid #0aa2c0 !important;
}

.gtaskcyan .gtaskbarcontainer {
    background-color: #0dcaf0 !important;
    background-image: none !important;
}

/* ============================================
   HOVER STATES - Bootstrap Interactivity
   ============================================ */

/* Task bar hover effects */
.gtaskbar:hover,
.gtaskblue:hover, .gtaskred:hover, .gtaskgreen:hover,
.gtaskyellow:hover, .gtaskorange:hover, .gtaskpurple:hover,
.gtaskpink:hover, .gtaskcyan:hover, .gtaskgray:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important; /* Elevated shadow on hover */
    transform: translateY(-1px) !important; /* Subtle lift effect */
    cursor: pointer;
}

/* Active state when dragging */
.gtaskbar:active,
.gantt-task-dragging {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important; /* Even deeper shadow */
    transform: translateY(-2px) !important;
}

/* ============================================
   TODAY MARKER
   ============================================ */

.gtodayline {
    background-color: #dc3545;
    width: 2px;
    opacity: 0.7;
}

/* ============================================
   WEEKEND STYLING
   ============================================ */

.gweekend {
    background-color: #f8f9fa;
}

/* ============================================
   TASK BAR TEXT
   ============================================ */

.gtaskbarcontainer {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

/* ============================================
   GROUP/PARENT TASK STYLING
   ============================================ */

.ggroupitem {
    font-weight: 600;
    background-color: #e9ecef;
}

.ggroupbar {
    background-color: #6c757d !important;
    background-image: none !important; /* Remove gradients */
    border: 1px solid #5a6268 !important;
    border-radius: 4px !important; /* Bootstrap radius */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; /* Flat shadow */
    height: 8px;
    transition: all 0.2s ease-in-out !important;
}

.ggroupbar:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
    transform: translateY(-1px) !important;
}

/* Expand/collapse icons */
.gfoldercollapse, .gfolderexpand {
    cursor: pointer;
    color: #0d6efd;
    font-weight: bold;
    /* Increase clickable area */
    padding: 4px 8px;
    margin: -4px -8px;
    display: inline-block;
    min-width: 20px;
    text-align: center;
    /* Make it easier to see and click */
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

.gfoldercollapse:hover, .gfolderexpand:hover {
    background-color: #e7f3ff;
    border-radius: 3px;
}

/* ============================================
   TASK BAR HEIGHT STANDARDIZATION
   ============================================ */

/* Make all task bars the same height */
/* Note: Using specific classes instead of [class*="gtask"] to avoid matching wrapper elements */
.gtaskbarcontainer, .gtaskbar, .gtaskblue, .gtaskred, .gtaskgreen, .gtaskyellow, .gtaskorange, .gtaskpurple, .gtaskpink, .gtaskcyan, .gtaskgray, .ggroupblack {
    height: 16px !important;
    max-height: 16px !important;
    min-height: 16px !important;
}

/* Ensure task bar content is visible */
.gtaskbar {
    line-height: 16px !important;
    font-size: 11px !important;
}

/* Fix child task names visibility */
.gtaskname .gTaskInfo {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure indented child tasks show their names */
tr[id*="child"] .gtaskname div {
    white-space: nowrap !important;
    overflow: visible !important;
}

/* ============================================
   HIERARCHICAL VIEW ADJUSTMENTS
   ============================================ */

/* Indentation for hierarchical tasks */
.gtaskindent {
    padding-left: 15px;
}

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

@media (max-width: 768px) {
    .gtasklist {
        min-width: 200px !important;
    }

    .gname {
        font-size: 12px;
    }
}

/* ============================================
   TOOLTIP STYLING
   ============================================ */

.gmouseover {
    background-color: #ffffff;
    border: 2px solid #0d6efd;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 12px;
    font-size: 13px;
}

.gmouseover strong {
    color: #495057;
}

/* ============================================
   SCROLLBAR STYLING (webkit browsers)
   ============================================ */

.gantt::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.gantt::-webkit-scrollbar-track {
    background-color: #f8f9fa;
}

.gantt::-webkit-scrollbar-thumb {
    background-color: #adb5bd;
    border-radius: 6px;
}

.gantt::-webkit-scrollbar-thumb:hover {
    background-color: #6c757d;
}

/* ============================================
   PROGRESS BAR STYLING
   ============================================ */

.gtaskpercent {
    background-color: rgba(255, 255, 255, 0.3);
    height: 100%;
}

/* ============================================
   DEPENDENCY LINE STYLING
   ============================================ */

.gdependency {
    stroke: #6c757d;
    stroke-width: 2;
    fill: none;
}

.gdependencyarrow {
    fill: #6c757d;
}

/* ============================================
   MILESTONE STYLING
   ============================================ */

.gmilestone {
    width: 12px;
    height: 12px;
    background-color: #ffc107;
    border: 2px solid #ff9800;
    transform: rotate(45deg);
}

/* ============================================
   CUSTOM CLASS FOR PROJECT ROWS
   ============================================ */

.gtask-project {
    font-weight: 600;
    background-color: #e7f1ff;
}

/* ============================================
   ADJUSTMENTS FOR BOOTSTRAP INTEGRATION
   ============================================ */

/* Ensure gantt doesn't conflict with Bootstrap table styles */
.gantt table {
    margin-bottom: 0;
}

.gantt td, .gantt th {
    padding: 6px 8px;
}

/* ============================================
   LOADING STATE
   ============================================ */

.gantt-loading {
    position: relative;
}

.gantt-loading::after {
    content: "Ladataan...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}