/* =================================================================== */
/* UNIFIED TIMELINE MODULE CSS - STANDARD ZOOM LEVEL */
/* =================================================================== */
/* Generated dynamically based on session zoom level: standard */
/* Cell width: 50px, Row height: 36px */

:root {
    /* =================================================================== */
    /* TIMELINE MODULE CSS VARIABLES - STANDARD ZOOM */
    /* =================================================================== */
    
    /* ---- TIMELINE CELL DIMENSIONS ---- */
    --timeline-cell-width: 50px;
    --timeline-cell-height: 36px;
    --gantt-day-width: 50px; /* Legacy compatibility */
    
    /* ---- GANTT TABLE STRUCTURE ---- */
    --gantt-tr-height: 36px;
    --gantt-row-height: 36px;
    --bar-height: 35px;
    
    /* ---- FONT SIZES ---- */
    --font-size-month: 1.0em;
    --font-size-week: 0.9em;
    --font-size-day: 0.8em;
    --font-size-bar: 0.85em;
    
    /* ---- PADDING ---- */
    --padding-cell: 4px;
    --padding-bar: 0 4px;
    
    /* ---- TABLE BORDERS AND DIVIDERS ---- */
    --gantt-table-border: 1px solid #e0e0e0;
    --gantt-zebra-border: 1px solid #e5e5e5;
    --gantt-zebra-border-odd: 1px solid #d8d8d8;
    --gantt-zebra-border-even: 1px solid #ededed;
    
    /* ---- MONTH DIVIDERS ---- */
    --gantt-month-divider-color: #000;
    --gantt-month-divider-width: 2px;
    --gantt-month-divider: 2px solid var(--gantt-month-divider-color);
    
    /* ---- STICKY COLUMN COLORS ---- */
    --first-col-first-color: black;
    --first-col-second-color: #345678;
    
    /* ---- DRAG AND DROP VISUAL FEEDBACK ---- */
    --drop-zone-available-bg: rgb(18, 236, 200);
    --drop-zone-available-border: #3b82f6;
    --drop-zone-hover-bg: red;
    --drop-zone-hover-border: #3b82f6;
    --drop-zone-active-bg: yellow;
    --drop-zone-active-border: #c2d60b;
    --drop-zone-active-shadow: rgba(34, 197, 94, 0.3);
    
    /* ---- BAR RESIZE VISUAL FEEDBACK ---- */
    --resize-handle-bg: rgba(255, 255, 255, 0.3);
    --resize-handle-hover-bg: rgba(255, 255, 255, 0.6);
    --resize-handle-active-bg: rgba(255, 255, 255, 0.9);
    --resize-preview-bg: rgba(255, 165, 0, 0.2);
    --resize-preview-border: #ff8c00;
}

/* =================================================================== */
/* TIMELINE LAYOUT STRUCTURE */
/* =================================================================== */

.module-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.set-panel {
    flex-shrink: 0;
    overflow-x: auto;
    position: relative;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.anchor-panel {
    flex-shrink: 0;
    width: 240px;
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

.data-panel {
    flex: 1;
    overflow: auto;
    position: relative;
}

/* =================================================================== */
/* TIMELINE TABLE STRUCTURE */
/* =================================================================== */

.timeline-data-table,
.gantt-unified-table {
    border-collapse: collapse;
    table-layout: fixed;
    position: relative;
    overflow: hidden;
    /* background: #fff; */
    border-spacing: 0;
}

.timeline-data-table tr,
.gantt-unified-table tr {
    height: var(--gantt-row-height);
    position: relative;
}

.timeline-data-table thead tr,
.gantt-unified-table thead tr {
    height: var(--gantt-tr-height);
}

.timeline-data-table th,
.timeline-data-table td,
.gantt-unified-table th,
.gantt-unified-table td {
    height: var(--gantt-row-height);
    max-width: var(--timeline-cell-width);
    overflow: hidden;
    max-height: var(--gantt-row-height);
    padding: var(--padding-cell);
    vertical-align: middle;
    border: 1px solid transparent;
    background: transparent;
}

/* =================================================================== */
/* STICKY COLUMN STYLING */
/* =================================================================== */

.sticky-col {
    position: sticky !important;
    left: 0 !important;
    z-index: 2000 !important;
    background: linear-gradient(
        to right,
        var(--first-col-first-color) 0%,
        var(--first-col-second-color) 100%
    ) !important;
    color: #fff !important;
    font-size: 14px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    border: 0px solid #345678 !important;
}

.sticky-col th {
    color: white !important;
    border-right: 10px solid #ccc;
    border-left: 2px solid #aaa;
    background: linear-gradient(
        to right,
        var(--first-col-first-color) 0%,
        var(--first-col-second-color) 100%
    );
}

/* =================================================================== */
/* TIMELINE HEADER STYLING */
/* =================================================================== */

.gantt-header-month,
.gantt-header-week,
.gantt-header-day,
.timeline-month-cell,
.timeline-week-cell {
    background-color: #6789ab;
    color: var(--sticky-col-text-color, #ffffff);
    text-align: center;
    vertical-align: middle;
    padding: var(--padding-cell);
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 1;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.gantt-header-month,
.timeline-month-cell {
    font-size: var(--font-size-month);
    font-weight: bold;
}

.gantt-header-week,
.timeline-week-cell {
    font-size: var(--font-size-week);
    line-height: 1.2;
}

.gantt-header-week-date {
    font-size: calc(var(--font-size-week) * 0.85);
    font-weight: normal;
}

.gantt-header-day,
.timeline-cell {
    font-size: var(--font-size-day);
    min-width: var(--timeline-cell-width) !important;
    max-width: var(--timeline-cell-width) !important;
    width: var(--timeline-cell-width) !important;
    height: var(--gantt-row-height) !important;
    text-align: center !important;
    background: #e8f4f8 !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
    padding: var(--padding-cell) !important;
    font-weight: 500 !important;
    position: static !important;
    box-sizing: border-box !important;
}

.gantt-header-logo {
    background: linear-gradient(to right, var(--gradient-color)) !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    padding: 8px !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    color: #fff !important;
    font-weight: bold !important;
    text-align: center !important;
}

.gantt-header-logo img {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    margin-right: 4px;
}

.gantt-month-header-border-right {
    border-right: 2px solid #123456;
}

.gantt_table_header_rows th {
    border: 1px solid #123456;
    color:#123456;
}

/* =================================================================== */
/* TIMELINE ANCHOR PANEL STYLING */
/* =================================================================== */

.timeline-label {
    padding: 8px;
    border: 1px solid #ddd;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
    height: var(--gantt-row-height) !important;
    vertical-align: middle;
}

/* =================================================================== */
/* TIMELINE BAR STYLING */
/* =================================================================== */

.gantt-bar,
.timeline-bar {
    padding: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: var(--gantt-row-height) !important;
    font-size: var(--font-size-bar);
    vertical-align: middle;
    border: 1px solid #ddd !important;
    box-sizing: border-box !important;
    position: relative;
    cursor: grab;
    background-color: #f1f1f1 !important;
}

.gantt-bar .bar-inner,
.bar-inner {
    border-radius: 12px;
    width: 100%;
    height: var(--bar-height);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-bar);
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    background: var(--bar-color, #bbb);
    border: 1px solid var(--bar-border, #222);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gantt-bar .bar-label,
.bar-label {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: normal;
    font-size: calc(var(--font-size-bar) * 0.9);
    pointer-events: none;
    z-index: 1;
}

.gantt-bar .sticky-col {
    background-color: #f8f9fa !important;
    color: #fff !important;
    border-right: 2px solid #dee2e6 !important;
    padding: 8px !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

/* Single-day bar styling */
.gantt-single-day-bar {
    max-width: var(--timeline-cell-width) !important;
    min-width: var(--timeline-cell-width) !important;
    padding: 2px !important;
    text-align: center;
}

.gantt-single-day-bar .bar-inner {
    max-width: calc(var(--timeline-cell-width) - 10px) !important;
    min-width: calc(var(--timeline-cell-width) - 30px) !important;
    margin: 0 auto;
}

/* Multi-day bar styling */
.gantt-multi-day-bar .bar-inner {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    min-width: calc(var(--timeline-cell-width) - 30px) !important;
    margin: 0 auto;
    cursor: grab;
    background-color: #000 !important;
}

/* =================================================================== */
/* ZEBRA STRIPING */
/* =================================================================== */

.gantt-unified-table tbody tr:nth-child(odd) {
    background-color: #345678 !important;
    color: #fff !important;
}

.gantt-unified-table tbody tr:nth-child(even) {
    background-color: #eee !important;
    color: #fff !important;
}

.gantt-unified-table td:not(.sticky-col) {
    position: relative;
    z-index: 1;
}

/* =================================================================== */
/* DRAG AND DROP VISUAL FEEDBACK */
/* =================================================================== */

.gantt-bar.dragging {
    opacity: 0.5 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 1000;
}

.drop-zone-available {
    background-color: var(--drop-zone-available-bg) !important;
    border: 2px dashed var(--drop-zone-available-border) !important;
    transition: all 0.2s ease;
}

.drop-zone-hover {
    background-color: var(--drop-zone-hover-bg) !important;
    border: 2px solid var(--drop-zone-hover-border) !important;
    transform: scale(1.02);
}

.drop-zone-active {
    background-color: var(--drop-zone-active-bg) !important;
    border: 2px solid var(--drop-zone-active-border) !important;
    box-shadow: inset 0 0 8px var(--drop-zone-active-shadow);
}

.drop-zone {
    background: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007bff !important;
}

/* =================================================================== */
/* BAR RESIZE FUNCTIONALITY */
/* =================================================================== */

.resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    background-color: var(--resize-handle-bg);
    cursor: col-resize;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 10;
}

.bar-inner:hover .resize-handle {
    opacity: 1;
}

.resize-handle:hover {
    background-color: var(--resize-handle-hover-bg);
    opacity: 1;
}

.resize-handle.resizing {
    background-color: var(--resize-handle-active-bg);
    opacity: 1;
}

.resize-handle-left {
    left: 0;
    border-radius: 4px 0 0 4px;
}

.resize-handle-right {
    right: 0;
    border-radius: 0 4px 4px 0;
}

.resize-preview {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--resize-preview-bg);
    border: 2px dashed var(--resize-preview-border);
    pointer-events: none;
    z-index: 5;
}

.bar-inner.resizing {
    opacity: 0.7;
    outline: 2px solid var(--resize-preview-border);
    outline-offset: 2px;
}

/* =================================================================== */
/* HOVER AND INTERACTION EFFECTS */
/* =================================================================== */

.bar-inner:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    cursor: move;
}

.gantt-single-day-bar .bar-inner:hover,
.gantt-multi-day-bar .bar-inner:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.gantt-row td:not(.sticky-col):not(.gantt-bar):hover {
    background-color: rgba(249, 158, 11, 0.1);
    cursor: crosshair;
}

.bar-inner[draggable="true"] {
    cursor: move;
}

.bar-inner[draggable="true"]:active {
    cursor: grabbing;
}

/* =================================================================== */
/* MODAL AND OVERLAY STYLES */
/* =================================================================== */

#gantt-bar-edit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

#gantt-bar-edit-modal[style*="flex"] {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#gantt-bar-edit-modal .modal-content {
    background: white;
    border-radius: 8px;
    padding: 0;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    margin: auto;
    color: white;
}

#gantt-bar-edit-modal .modal-header {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#gantt-bar-edit-modal .modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 1.25rem;
}

#gantt-bar-edit-modal .close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

#gantt-bar-edit-modal .close-modal:hover {
    background-color: #e9ecef;
    color: #333;
}

#gantt-bar-edit-modal .modal-body {
    padding: 20px;
}

#gantt-bar-edit-modal .pm-form {
    margin: 0;
    color: white;
}

#gantt-bar-edit-modal .form-group {
    margin-bottom: 15px;
}

#gantt-bar-edit-modal label,
#gantt-bar-edit-modal .pm-form__label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: white !important;
}

#gantt-bar-edit-modal input,
#gantt-bar-edit-modal select,
#gantt-bar-edit-modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

#gantt-bar-edit-modal input:focus,
#gantt-bar-edit-modal select:focus,
#gantt-bar-edit-modal textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

#gantt-bar-edit-modal .btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}

#gantt-bar-edit-modal .btn:hover {
    background: #0056b3;
}

/* =================================================================== */
/* ANIMATIONS AND TRANSITIONS */
/* =================================================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@media (max-width: 1200px) {
    #menu-header {
        font-size: 11px !important;
    }
    .toolbar-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

@media (max-width: 800px) {
    #menu-header {
        font-size: 10px !important;
        max-width: 98vw !important;
    }
    .toolbar-btn {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
    #menu-logout {
        font-size: 9px !important;
    }
    
    .resize-handle {
        width: 12px;
    }
    
    .task-edit-modal {
        width: 95%;
        max-height: 90vh;
    }
}

/* =================================================================== */
/* ACCESSIBILITY AND REDUCED MOTION */
/* =================================================================== */

.resize-handle:focus,
.bar-center:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .resize-handle {
        background: rgba(0, 0, 0, 0.8);
        border-color: white;
    }
    
    .drop-zone {
        border-color: blue !important;
        background: rgba(0, 0, 255, 0.2) !important;
    }
    
    .drag-over {
        border-color: green !important;
        background: rgba(0, 255, 0, 0.2) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bar-inner,
    .resize-handle,
    .task-edit-overlay,
    .task-edit-modal,
    .feedback-notification {
        animation: none;
        transition: none;
    }
}

/* =================================================================== */
/* TIMELINE-SPECIFIC MENU FIXES */
/* =================================================================== */

#menu-header {
    min-height: fit-content !important;
    max-width: 95vw !important;
    padding: 5px !important;
}

#menu-main {
    padding-left: 10px !important;
}

#menu-logout {
    padding-right: 10px !important;
}

#menu-specific-content {
    border-top: 1px solid #ddd !important;
    padding-top: 5px !important;
    margin-top: 5px !important;
}

/* =================================================================== */
/* MONTH DIVIDERS */
/* =================================================================== */

.gantt-month-divider {
    border-left: var(--gantt-month-divider-width, 1px) solid var(--gantt-month-divider-color, #123456);
}

.gantt-week-divider {
    border-left: 1px solid var(--gantt-week-divider-color, #789abc);
}

/* =================================================================== */
/* END UNIFIED TIMELINE CSS */
/* =================================================================== */