/* ============================================================================
   dhtmlxgantt.material.modified.css
   ----------------------------------------------------------------------------
   Premium Material Override Layer for DHTMLX Gantt
   ----------------------------------------------------------------------------
   Strategy:
     - Imports the base dhtmlxgantt.css and overrides ONLY visual properties.
     - No changes to width/height/left/top/position/display/z-index.
     - Adopts the modern color palette and Material aesthetic from v9.
     - Token-driven via :root for easy re-skinning.
   ============================================================================ */

   @import url('dhtmlxgantt.css');

   /* ----------------------------------------------------------------------------
      1. DESIGN TOKENS
      ---------------------------------------------------------------------------- */
   :root {
     /* Brand palette */
     --gm-primary:           #537CFA;
     --gm-primary-hover:     #4269E0;
     --gm-primary-active:    #3365FB;
     --gm-primary-soft:      rgba(83, 124, 250, 0.12);
   
     --gm-success:           #1BC297;
     --gm-success-soft:      rgba(27, 194, 151, 0.15);
   
     --gm-warning:           #FAB936;
     --gm-warning-soft:      rgba(250, 185, 54, 0.15);
   
     --gm-error:             #E3334E;
     --gm-error-soft:        rgba(227, 51, 78, 0.12);
   
     /* Task type fills */
     --gm-task-blue:         #537CFA;
     --gm-task-green:        #20B56D;
     --gm-task-violet:       #D071EF;
     --gm-task-progress:     rgba(0, 0, 0, 0.18);
   
     /* Surfaces */
     --gm-surface:           #FFFFFF;
     --gm-surface-alt:       #F7F8FA;
     --gm-surface-hover:     #EFF3FF;
     --gm-surface-selected:  #E0E5F3;
   
     /* Lines & text */
     --gm-border:            #E2E5E9;
     --gm-border-soft:       #F0F1F3;
     --gm-text:              #23272A;
     --gm-text-muted:        #555D63;
     --gm-text-on-fill:      rgba(255, 255, 255, 0.95);
   
     /* Effects */
     --gm-radius:            6px;
     --gm-radius-task:       4px;
     --gm-shadow-sm:         0 1px 3px rgba(44, 47, 60, 0.08);
     --gm-shadow-md:         0 4px 16px rgba(44, 47, 60, 0.12);
     --gm-shadow-lg:         0 6px 24px rgba(44, 47, 60, 0.18);
     --gm-transition:        all 0.2s ease;
   
     /* Typography */
     --gm-font:              'Inter', 'Helvetica', Arial, sans-serif;
   }
   
   /* ----------------------------------------------------------------------------
      2. CONTAINER & TYPOGRAPHY
      ---------------------------------------------------------------------------- */
   .gantt_container,
   .gantt_tooltip,
   .gantt_cal_light,
   .gantt_message_area,
   .gantt_modal_box,
   .gantt_cal_quick_info {
     font-family: var(--gm-font);
     color: var(--gm-text);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   .gantt_container {
     background-color: var(--gm-surface);
     border: 1px solid var(--gm-border);
     font-size: 14px;
   }
   
   /* ----------------------------------------------------------------------------
      3. SCALE & GRID HEADERS
      ---------------------------------------------------------------------------- */
   .gantt_grid_scale,
   .gantt_task_scale {
     background-color: var(--gm-surface);
     color: var(--gm-text-muted);
     border-bottom: 1px solid var(--gm-border);
     font-size: 13px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.3px;
   }
   
   .gantt_grid_scale .gantt_grid_head_cell {
     color: var(--gm-text-muted);
     border-right: 1px solid var(--gm-border-soft);
     font-weight: 600;
   }
   
   .gantt_task .gantt_task_scale .gantt_scale_cell {
     color: var(--gm-text-muted);
     border-right: 1px solid var(--gm-border-soft);
   }
   
   .gantt_scale_line {
     border-top: 1px solid var(--gm-border);
   }
   
   /* ----------------------------------------------------------------------------
      4. GRID ROWS & CELLS
      ---------------------------------------------------------------------------- */
   .gantt_grid_data {
     background-color: var(--gm-surface);
   }
   
   .gantt_row,
   .gantt_task_row {
     background-color: var(--gm-surface);
     border-bottom: 1px solid var(--gm-border-soft);
     transition: background-color var(--gm-transition);
   }
   
   .gantt_row.odd,
   .gantt_task_row.odd {
     background-color: var(--gm-surface);
   }
   
   .gantt_grid_data .gantt_cell {
     color: var(--gm-text);
     border-right: 1px solid transparent;
     font-size: 14px;
   }
   
   /* Hover state — soft, modern */
   .gantt_grid_data .gantt_row:hover,
   .gantt_grid_data .gantt_row.odd:hover {
     background-color: var(--gm-surface-hover);
   }
   
   /* Selected state */
   .gantt_grid_data .gantt_row.gantt_selected,
   .gantt_grid_data .gantt_row.odd.gantt_selected,
   .gantt_task_row.gantt_selected {
     background-color: var(--gm-surface-selected);
   }
   
   .gantt_task_row.gantt_selected .gantt_task_cell {
     border-right-color: var(--gm-border);
   }
   
   /* Tree/folder/file icons — softened */
   .gantt_tree_icon.gantt_folder_open,
   .gantt_tree_icon.gantt_folder_closed,
   .gantt_tree_icon.gantt_file {
     opacity: 0.55;
   }
   
   /* Resize handles */
   .gantt_grid_column_resize_wrap .gantt_grid_column_resize {
     background-color: var(--gm-border);
     transition: background-color var(--gm-transition);
   }
   
   .gantt_grid_column_resize_wrap:hover .gantt_grid_column_resize {
     background-color: var(--gm-primary);
   }
   
   /* ----------------------------------------------------------------------------
      5. TASK BARS — Material Aesthetic
      ---------------------------------------------------------------------------- */
   .gantt_task_line {
     border-radius: var(--gm-radius-task);
     background-color: var(--gm-task-blue);
     border: none;
     box-shadow: var(--gm-shadow-sm);
     color: var(--gm-text-on-fill);
     transition: box-shadow var(--gm-transition), transform var(--gm-transition);
   }
   
   .gantt_task_line:hover {
     box-shadow: var(--gm-shadow-md);
   }
   
   .gantt_task_content {
     color: var(--gm-text-on-fill);
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.2px;
   }
   
   /* Progress fill — subtle dark overlay */
   .gantt_task_progress {
     background-color: var(--gm-task-progress);
     border-radius: 0;
   }
   
   /* Selected task bar */
   .gantt_task_line.gantt_selected {
     box-shadow: 0 0 0 2px var(--gm-primary), var(--gm-shadow-md);
   }
   
   /* Project bar */
   .gantt_task_line.gantt_project {
     background-color: var(--gm-task-green);
     border: none;
   }
   
   .gantt_task_line.gantt_project .gantt_task_progress {
     background-color: rgba(0, 0, 0, 0.22);
   }
   
   .gantt_task_line.gantt_project.gantt_selected {
     box-shadow: 0 0 0 2px var(--gm-task-green), var(--gm-shadow-md);
   }
   
   .gantt_row.gantt_project,
   .gantt_row.odd.gantt_project {
     background-color: rgba(32, 181, 109, 0.06);
     font-weight: 500;
   }
   
   .gantt_task_row.gantt_project,
   .gantt_task_row.odd.gantt_project {
     background-color: rgba(32, 181, 109, 0.04);
   }
   
   /* Milestone — modern violet diamond */
   .gantt_task_line.gantt_milestone {
     background-color: var(--gm-task-violet);
     border: none;
   }
   
   .gantt_task_line.gantt_milestone .gantt_task_content {
     background: inherit;
     border: none;
   }
   
   /* Critical path */
   .gantt_critical_task {
     background-color: var(--gm-error);
     border-color: transparent;
   }
   
   .gantt_critical_task .gantt_task_progress {
     background-color: rgba(0, 0, 0, 0.28);
   }
   
   .gantt_critical_link .gantt_line_wrapper > div {
     background-color: var(--gm-error);
   }
   
   .gantt_critical_link .gantt_link_arrow {
     border-color: var(--gm-error);
   }
   
   /* Inline color tasks */
   .gantt_task_line.gantt_task_inline_color {
     border-color: transparent;
   }
   
   .gantt_task_line.gantt_task_inline_color.gantt_selected {
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), var(--gm-shadow-md);
   }
   
   /* ----------------------------------------------------------------------------
      6. TASK DRAG HANDLES & PROGRESS DRAG
      ---------------------------------------------------------------------------- */
   .gantt_task_drag {
     background-color: rgba(255, 255, 255, 0.25);
     border-radius: 2px;
   }
   
   .gantt_task_progress_drag {
     background-color: var(--gm-surface);
     border: 2px solid var(--gm-border);
     border-radius: 50%;
     box-shadow: var(--gm-shadow-sm);
     background-image: none;
     transition: var(--gm-transition);
   }
   
   .gantt_task_progress_drag:hover {
     border-color: var(--gm-primary);
     background-image: none;
   }
   
   /* ----------------------------------------------------------------------------
      7. LINKS & ARROWS
      ---------------------------------------------------------------------------- */
   .gantt_line_wrapper div {
     background-color: var(--gm-text-muted);
     transition: var(--gm-transition);
   }
   
   .gantt_task_link:hover .gantt_line_wrapper div {
     background-color: var(--gm-primary);
     box-shadow: 0 0 4px var(--gm-primary-soft);
   }
   
   .gantt_task_link .gantt_link_arrow_right {
     border-left-color: var(--gm-text-muted);
   }
   
   .gantt_task_link .gantt_link_arrow_left {
     border-right-color: var(--gm-text-muted);
   }
   
   .gantt_task_link .gantt_link_arrow_up {
     border-bottom-color: var(--gm-text-muted);
   }
   
   .gantt_task_link .gantt_link_arrow_down {
     border-top-color: var(--gm-text-muted);
   }
   
   .gantt_task_link:hover .gantt_link_arrow_right {
     border-left-color: var(--gm-primary);
   }
   
   .gantt_task_link:hover .gantt_link_arrow_left {
     border-right-color: var(--gm-primary);
   }
   
   .gantt_task_link:hover .gantt_link_arrow_up {
     border-bottom-color: var(--gm-primary);
   }
   
   .gantt_task_link:hover .gantt_link_arrow_down {
     border-top-color: var(--gm-primary);
   }
   
   /* Link control handles on task hover */
   .gantt_link_control div {
     border: 2px solid var(--gm-primary);
     background-color: var(--gm-surface);
     border-radius: 50%;
     transition: var(--gm-transition);
   }
   
   .gantt_link_control div:hover {
     background-color: var(--gm-primary);
     box-shadow: 0 0 0 4px var(--gm-primary-soft);
   }
   
   .gantt_link_source,
   .gantt_link_target {
     box-shadow: 0 0 0 2px var(--gm-primary), var(--gm-shadow-sm);
   }
   
   .gantt_link_target.link_start_allow,
   .gantt_link_target.link_finish_allow {
     box-shadow: 0 0 0 2px var(--gm-success), var(--gm-shadow-sm);
   }
   
   .gantt_link_target.link_start_deny,
   .gantt_link_target.link_finish_deny {
     box-shadow: 0 0 0 2px var(--gm-error), var(--gm-shadow-sm);
   }
   
   .gantt_link_direction {
     border-bottom-color: var(--gm-primary);
   }
   
   /* ----------------------------------------------------------------------------
      8. LIGHTBOX (EDITOR)
      ---------------------------------------------------------------------------- */
   .gantt_cal_light {
     background-color: var(--gm-surface);
     border: 1px solid var(--gm-border);
     border-radius: var(--gm-radius);
     box-shadow: var(--gm-shadow-lg);
     color: var(--gm-text);
     font-family: var(--gm-font);
     font-size: 14px;
   }
   
   .gantt_cal_light select,
   .gantt_cal_light input,
   .gantt_cal_light textarea {
     border: 1px solid var(--gm-border);
     border-radius: var(--gm-radius-task);
     font-family: var(--gm-font);
     color: var(--gm-text);
     background-color: var(--gm-surface);
     transition: border-color var(--gm-transition), box-shadow var(--gm-transition);
   }
   
   .gantt_cal_light select:focus,
   .gantt_cal_light input:focus,
   .gantt_cal_light textarea:focus {
     border-color: var(--gm-primary);
     box-shadow: 0 0 0 3px var(--gm-primary-soft);
     outline: none;
   }
   
   .gantt_cal_ltitle {
     background-color: var(--gm-surface-alt);
     color: var(--gm-text);
     border-bottom: 1px solid var(--gm-border);
     font-weight: 600;
     font-size: 16px;
   }
   
   .gantt_cal_lsection {
     color: var(--gm-text-muted);
     font-weight: 600;
   }
   
   .gantt_cal_larea {
     background-color: var(--gm-surface);
     border-color: var(--gm-border);
   }
   
   /* Lightbox buttons */
   .gantt_btn_set {
     border-radius: var(--gm-radius-task);
     border: 1px solid transparent;
     font-weight: 500;
     transition: var(--gm-transition);
     cursor: pointer;
   }
   
   .gantt_btn_set.gantt_save_btn_set {
     background: var(--gm-primary);
     color: var(--gm-text-on-fill);
     text-shadow: none;
     box-shadow: var(--gm-shadow-sm);
   }
   
   .gantt_btn_set.gantt_save_btn_set:hover {
     background: var(--gm-primary-hover);
     box-shadow: var(--gm-shadow-md);
   }
   
   .gantt_btn_set.gantt_cancel_btn_set {
     background: var(--gm-surface);
     color: var(--gm-text);
     border: 1px solid var(--gm-border);
   }
   
   .gantt_btn_set.gantt_cancel_btn_set:hover {
     background: var(--gm-surface-hover);
     border-color: var(--gm-primary);
     color: var(--gm-primary);
   }
   
   .gantt_btn_set.gantt_delete_btn_set {
     background: var(--gm-error);
     color: var(--gm-text-on-fill);
     text-shadow: none;
     box-shadow: var(--gm-shadow-sm);
   }
   
   .gantt_btn_set.gantt_delete_btn_set:hover {
     background: #C3132E;
     box-shadow: var(--gm-shadow-md);
   }
   
   /* ----------------------------------------------------------------------------
      9. QUICK INFO POPUP
      ---------------------------------------------------------------------------- */
   .gantt_cal_quick_info {
     background-color: var(--gm-surface);
     border: 1px solid var(--gm-border);
     border-radius: var(--gm-radius);
     box-shadow: var(--gm-shadow-lg);
   }
   
   .gantt_cal_qi_title {
     background-color: var(--gm-surface);
     color: var(--gm-text);
     border-bottom: 1px solid var(--gm-border-soft);
   }
   
   .gantt_cal_qi_tdate {
     font-weight: 600;
     font-size: 15px;
   }
   
   .gantt_cal_qi_tcontent {
     color: var(--gm-text-muted);
     font-size: 13px;
   }
   
   .gantt_cal_qi_content {
     color: var(--gm-text);
     font-size: 14px;
   }
   
   .gantt_qi_big_icon {
     border-radius: var(--gm-radius-task);
     border: 1px solid var(--gm-border);
     background: var(--gm-surface);
     color: var(--gm-text);
     transition: var(--gm-transition);
     font-weight: 500;
   }
   
   .gantt_qi_big_icon:hover {
     background: var(--gm-surface-hover);
     border-color: var(--gm-primary);
     color: var(--gm-primary);
   }
   
   .gantt_qi_big_icon.icon_delete {
     background: var(--gm-error);
     color: var(--gm-text-on-fill);
     border-color: transparent;
     text-shadow: none;
   }
   
   .gantt_qi_big_icon.icon_delete:hover {
     background: #C3132E;
   }
   
   /* ----------------------------------------------------------------------------
      10. POPUP / MODAL
      ---------------------------------------------------------------------------- */
   .gantt_modal_box {
     background-color: var(--gm-surface);
     border: 1px solid var(--gm-border);
     border-radius: var(--gm-radius);
     box-shadow: var(--gm-shadow-lg);
     font-family: var(--gm-font);
   }
   
   .gantt_popup_title {
     background-color: var(--gm-surface);
     color: var(--gm-text);
     border-bottom: 1px solid var(--gm-border-soft);
     font-weight: 600;
   }
   
   .gantt_popup_text {
     color: var(--gm-text);
   }
   
   .gantt_popup_button {
     border-radius: var(--gm-radius-task);
     border: 1px solid var(--gm-border);
     background: var(--gm-surface);
     color: var(--gm-text);
     font-weight: 500;
     transition: var(--gm-transition);
   }
   
   .gantt_popup_button:hover {
     background: var(--gm-surface-hover);
     border-color: var(--gm-primary);
     color: var(--gm-primary);
   }
   
   .gantt_popup_button.gantt_ok_button,
   .gantt_popup_button.gantt_delete_button {
     background: var(--gm-primary);
     color: var(--gm-text-on-fill);
     border-color: transparent;
     text-shadow: none;
     font-weight: 600;
   }
   
   .gantt_popup_button.gantt_ok_button:hover,
   .gantt_popup_button.gantt_delete_button:hover {
     background: var(--gm-primary-hover);
   }
   
   .gantt_popup_button.gantt_cancel_button {
     font-weight: 500;
     color: var(--gm-text-muted);
   }
   
   /* ----------------------------------------------------------------------------
      11. TOOLTIP
      ---------------------------------------------------------------------------- */
   .gantt_tooltip {
     background-color: var(--gm-text);
     color: var(--gm-text-on-fill);
     border: none;
     border-radius: var(--gm-radius-task);
     box-shadow: var(--gm-shadow-md);
     font-size: 13px;
     padding: 8px 12px;
   }
   
   /* ----------------------------------------------------------------------------
      12. MESSAGES (INFO / ERROR / WARNING)
      ---------------------------------------------------------------------------- */
   .gantt-info,
   .gantt-error,
   .gantt-warning {
     border-radius: var(--gm-radius);
     box-shadow: var(--gm-shadow-md);
     font-size: 14px;
     font-family: var(--gm-font);
     border: none;
   }
   
   .gantt-info {
     background-color: var(--gm-surface);
     color: var(--gm-text);
     border: 1px solid var(--gm-border);
   }
   
   .gantt-info div {
     background-color: var(--gm-surface);
     border: none;
     color: var(--gm-text);
   }
   
   .gantt-error {
     background-color: var(--gm-error);
     border: none;
   }
   
   .gantt-error div {
     background-color: var(--gm-error);
     border: none;
     color: var(--gm-text-on-fill);
   }
   
   .gantt-warning {
     background-color: var(--gm-warning);
     border: none;
   }
   
   .gantt-warning div {
     background-color: var(--gm-warning);
     border: none;
     color: var(--gm-text-on-fill);
   }
   
   /* ----------------------------------------------------------------------------
      13. MARKER / TODAY LINE
      ---------------------------------------------------------------------------- */
   .gantt_marker {
     background-color: rgba(227, 51, 78, 0.5);
   }
   
   .gantt_marker .gantt_marker_content {
     color: var(--gm-text-on-fill);
     font-weight: 500;
     font-size: 12px;
   }
   
   /* ----------------------------------------------------------------------------
      14. FOCUS / ACCESSIBILITY
      ---------------------------------------------------------------------------- */
   .gantt_row:focus,
   .gantt_cell:focus,
   .gantt_grid_head_cell:focus,
   .gantt_btn_set:focus,
   .gantt_qi_big_icon:focus,
   .gantt_popup_button:focus {
     box-shadow: inset 0 0 0 2px var(--gm-primary);
     outline: none;
   }
   
   /* ----------------------------------------------------------------------------
      15. RESOURCE / HISTOGRAM VIEWS
      ---------------------------------------------------------------------------- */
   .gantt_resource_marker_ok {
     background: var(--gm-success-soft);
     color: var(--gm-text);
   }
   
   .gantt_resource_marker_overtime {
     background: var(--gm-error-soft);
     color: var(--gm-text);
   }
   
   .gantt_histogram_fill {
     background-color: var(--gm-primary-soft);
   }
   
   .gantt_histogram_hor_bar,
   .gantt_histogram_vert_bar {
     background: var(--gm-primary);
   }
   
   /* ----------------------------------------------------------------------------
      16. DRAG / DND MARKERS
      ---------------------------------------------------------------------------- */
   .gantt_grid_dnd_marker_line {
     background-color: var(--gm-primary);
   }
   
   .gantt_grid_dnd_marker_line:before {
     background: var(--gm-surface);
     border-color: var(--gm-primary);
   }
   
   .gantt_grid_dnd_marker_folder {
     box-shadow: inset 0 0 0 2px var(--gm-primary);
   }
   
   .gantt_grid_target_marker {
     background-color: var(--gm-primary);
   }
   
   .gantt_grid_target_marker:before {
     border-top-color: var(--gm-primary);
   }
   
   .gantt_grid_target_marker:after {
     border-bottom-color: var(--gm-primary);
   }
   
   /* ----------------------------------------------------------------------------
      17. HOVER/OVER STATES (DND)
      ---------------------------------------------------------------------------- */
   .gantt_row.gantt_over,
   .gantt_task_row.gantt_over {
     background-color: var(--gm-primary-soft);
   }
   
   /* ----------------------------------------------------------------------------
      END
      ---------------------------------------------------------------------------- */