:root {
    /* Brand Colors */
    --kromeka-red: #af161e;
    --kromeka-red-dark: #841117;
    --kromeka-grey: #878787;
    --kromeka-dark: #1d1d1b;
    --kromeka-yellow: #F5B51F;
    --kromeka-dark-grey: #575756;
    --kromeka-light-grey: #EDEDED;

    /* Theme Variables - Light Mode (Default) */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-card-header: var(--kromeka-dark-grey);
    --text-main: var(--kromeka-dark);
    --text-card-header: #ffffff;
    --text-muted: var(--kromeka-grey);
    --link-color: #0d6efd; /* Bootstrap default blue */
    --link-hover-color: #0a58ca;
    --border-color: #dee2e6;
    --hover-bg: #f0f0f0;
    --navbar-bg: var(--kromeka-dark);
    --navbar-text: rgba(255,255,255,0.8);
    --navbar-hover: var(--kromeka-yellow);
    --footer-border: #ddd;
    
    /* Input Variables - Light Mode */
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #dee2e6;
    --input-hover-bg: #f8f9fa;
    --input-focus-bg: #ffffff;
    --input-focus-text: #212529;
    --input-placeholder: #6c757d;
    --bg-secondary: #e9ecef;
}

[data-theme="dark"] {
    /* Theme Variables - Dark Mode */
    --bg-body: #121211; /* Slightly darker version of Kromeka Dark */
    --bg-card: #2c2c2a; /* Slightly lighter for contrast */
    --bg-card-header: #000000;
    --text-main: #e0e0e0; /* Off-white for better readability than pure white */
    --text-card-header: #ffffff;
    --text-muted: #a0a0a0; /* Lighter grey for visibility on dark */
    --link-color: #6ea8fe; /* Lighter blue for dark mode */
    --link-hover-color: #9ec5fe;
    --border-color: #495057;
    --hover-bg: #3d3d3b;
    --navbar-bg: #000000;
    --navbar-text: rgba(255,255,255,0.8);
    --navbar-hover: var(--kromeka-yellow);
    --footer-border: #333;

    /* Input Variables - Dark Mode */
    --input-bg: #2c2c2a;
    --input-text: #e0e0e0;
    --input-border: #495057;
    --input-hover-bg: #3d3d3b;
    --input-focus-bg: #3d3d3b;
    --input-focus-text: #ffffff;
    --input-placeholder: #a0a0a0;
    --bg-secondary: #1a1a19;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'DINPro', 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 5px solid var(--kromeka-red);
}

.navbar-brand {
    color: white !important;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-link {
    color: var(--navbar-text) !important;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--navbar-hover) !important;
    text-decoration: none;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: var(--link-color);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--kromeka-red);
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Cards */
.card {
    background-color: var(--bg-card);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    color: var(--text-main);
}

.card-header {
    background-color: var(--bg-card-header);
    color: var(--text-card-header);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0 !important;
    border-bottom: 3px solid var(--kromeka-yellow);
    padding: 15px;
}

.card-body {
    color: var(--text-main);
}

.list-group-item {
    background-color: var(--bg-card); /* Match card bg */
    color: var(--text-main);
    border-color: var(--border-color);
    border-left: 4px solid transparent;
    margin-bottom: 5px;
}

.list-group-item:hover, .list-group-item-action:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

.list-group-item-action {
    color: var(--text-main);
}

/* Status Badges - Pill Shaped */
.status-badge {
    padding: 6px 12px;
    border-radius: 50rem; /* Pill shape */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: white; /* Default text color */
}

/* Neutral/Done: Gray (#878787), White text */
.status-planning, .status-design, .status-completed, .status-delivered { 
    background-color: var(--kromeka-grey); 
    color: white;
}

/* Warning/Active: Goldenrod (#f5b51f), Black text */
.status-in_progress, .status-manufacturing { 
    background-color: var(--kromeka-yellow); 
    color: var(--kromeka-dark); 
}

/* Critical/Error: Firebrick (#af161e), White text */
.status-on_hold, .status-maintenance { 
    background-color: var(--kromeka-red); 
    color: white; 
}

/* Buttons */
.btn-primary {
    background-color: var(--kromeka-red);
    border-color: var(--kromeka-red);
    border-radius: 0;
    padding: 10px 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
}

.btn-primary:hover {
    background-color: #8a1017;
    border-color: #8a1017;
    color: white;
}

.btn-outline-secondary {
    color: var(--text-main);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
    border-color: var(--text-main);
}

footer {
    border-top: 1px solid var(--footer-border);
    color: var(--text-muted) !important;
}

/* Bootstrap Utility Overrides */
.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-main) !important;
}

.text-secondary {
    color: var(--text-muted) !important;
}

.bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}

.bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Forms & Inputs */
.form-control, .form-select, textarea {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border);
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-focus-bg) !important;
    color: var(--input-focus-text) !important;
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25);
}

/* Select/Dropdown Styling - Make it clearly clickable and visually distinct */
.form-select {
    cursor: pointer;
    background-color: var(--input-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 14px;
    padding: 0.6rem 2.75rem 0.6rem 0.875rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--input-border);
    border-radius: 6px;
    font-weight: 500;
    position: relative;
    min-height: 42px;
    color: var(--input-text) !important;
    transition: all 0.2s ease;
    display: block;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Make it look like an interactive input field with clear visual feedback */
.form-select:hover {
    border-color: var(--kromeka-yellow);
    background-color: var(--hover-bg) !important;
    box-shadow: 0 3px 8px rgba(245, 181, 31, 0.25);
    transform: translateY(-1px);
    border-width: 2px;
}

.form-select:focus {
    border-color: var(--kromeka-yellow);
    background-color: var(--input-focus-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25), 0 2px 4px rgba(0,0,0,0.1);
    outline: none;
    border-width: 2px;
}

.form-select:active {
    border-color: var(--kromeka-red);
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Dark mode specific styling */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    border: 2px solid var(--input-border);
    background-color: var(--input-bg) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .form-select:hover {
    border-color: var(--kromeka-yellow);
    background-color: var(--hover-bg) !important;
    box-shadow: 0 3px 8px rgba(245, 181, 31, 0.35);
}

[data-theme="dark"] .form-select:focus {
    background-color: var(--input-focus-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25), 0 2px 4px rgba(0,0,0,0.2);
}

/* Ensure the dropdown arrow area is clickable and styled */
.form-select option {
    background-color: var(--bg-card);
    color: var(--text-main);
    padding: 0.5rem;
}

/* Add a visual indicator on the right side */
.form-select::before {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: 0.6;
}

.form-label {
    color: var(--text-main);
    font-weight: 500;
}

/* Placeholder Styling */
::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

::-ms-input-placeholder {
    color: var(--input-placeholder) !important;
}

/* Dark Mode Specific Component Overrides */
[data-theme="dark"] .table {
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent; 
    color: var(--text-main);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table-light {
    background-color: var(--bg-card-header);
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: var(--bg-card-header);
    color: var(--text-main);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--hover-bg);
    color: var(--text-main);
    box-shadow: inset 0 0 0 9999px var(--hover-bg); /* Force override bootstrap hover */
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-main);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--hover-bg);
    color: var(--text-main);
}

[data-theme="dark"] pre {
    color: var(--text-main);
    background-color: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 10px;
}

/* Dashboard Specific Fixes */
.badge.bg-secondary {
    background-color: var(--kromeka-dark-grey) !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-light {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .card-footer {
    border-top-color: var(--border-color);
}

/* Ensure badges display inline and don't break to new lines */
.badge {
    display: inline-block !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
}

/* Force links inside small/p tags to be inline */
.small a,
small a,
p.small a {
    display: inline !important;
}

/* ------------------------------------------------------------
   Select2 Styling (Centralized)
   ------------------------------------------------------------ */
/* Base Select2 Container */
.select2-container {
    width: 100% !important;
}

/* Single & Multiple Selection Box */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--input-border) !important;
    color: var(--input-text) !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover State */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--kromeka-yellow) !important;
    background-color: var(--input-hover-bg) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Focus State */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--kromeka-yellow) !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 181, 31, 0.25) !important;
    outline: 0 !important;
}

/* Selected Text */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--input-text) !important;
    line-height: 28px !important;
    padding-left: 0 !important;
}

/* Placeholder Text */
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

/* Arrow Icon */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-main) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-main) transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* Multiple Selection - Tags/Chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--kromeka-red) !important;
    border: 1px solid var(--kromeka-red-dark) !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    border-radius: 0.25rem !important;
    margin: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    margin-right: 5px !important;
    font-weight: bold !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--kromeka-yellow) !important;
}

/* Dropdown Container */
.select2-dropdown {
    background-color: var(--bg-card) !important;
    border: 2px solid var(--kromeka-yellow) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Search Input in Dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg) !important;
    border: 2px solid var(--input-border) !important;
    color: var(--input-text) !important;
    padding: 6px 10px !important;
    border-radius: 0.25rem !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--kromeka-yellow) !important;
    outline: 0 !important;
}

/* Dropdown Results */
.select2-container--default .select2-results__option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    padding: 8px 12px !important;
}

/* Highlighted/Hover Option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: var(--kromeka-red) !important;
    color: #ffffff !important;
}

/* Selected Option (in dropdown) */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--kromeka-grey) !important;
    color: #ffffff !important;
}

/* Disabled State */
.select2-container--default .select2-selection--single.select2-selection--disabled,
.select2-container--default .select2-selection--multiple.select2-selection--disabled {
    background-color: var(--bg-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Clear Button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-muted) !important;
    margin-right: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--kromeka-red) !important;
}

/* Message Tags - Interactive and Clickable */
.message-tag {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 50rem; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    background-color: var(--kromeka-grey);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.message-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-decoration: none;
    color: white;
    opacity: 0.9;
}

.message-tag.active {
    border-color: var(--kromeka-yellow);
    box-shadow: 0 0 0 2px rgba(245, 181, 31, 0.3);
}

.message-tag i {
    margin-right: 4px;
    font-size: 0.7rem;
}

/* Clickable navigation tags */
.message-tag-navigate,
.chat-tag-link {
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.message-tag-navigate:hover,
.chat-tag-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    opacity: 0.9;
    text-decoration: none !important;
    color: white !important;
}

/* Tag Filter Section */
.tag-filter-section {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.tag-filter-section h6 {
    color: var(--text-main);
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 50rem;
    font-size: 0.75rem;
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
    font-weight: 600;
}

.selected-tag .remove-tag {
    margin-left: 6px;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
}

.selected-tag .remove-tag:hover {
    opacity: 1;
}

/* Autocomplete Search Inputs */
.autocomplete-input {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.autocomplete-results.show {
    display: block;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.autocomplete-item:hover {
    background-color: var(--hover-bg);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item.selected {
    background-color: var(--kromeka-yellow);
    color: var(--kromeka-dark);
}

/* ------------------------------------------------------------
   Gantt / Planning
------------------------------------------------------------ */
.gantt-wrapper {
    --gantt-week-width: 70px;
    background: var(--bg-card);
}

.gantt-classic {
    border-top: 1px solid var(--border-color);
}

/* Two-column Gantt layout */
.gantt-container {
    display: flex;
    max-height: 70vh;
}

.gantt-left-column {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    overflow-y: auto;
}

.gantt-left-body {
    flex: 1;
    overflow-y: auto;
}

.gantt-right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
}

.gantt-timeline-viewport {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.gantt-timeline-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.gantt-timeline-content {
    position: relative;
    min-height: min-content;
}

/* Sync vertical scroll between left and right columns */
.gantt-left-body,
.gantt-timeline-body {
    scrollbar-width: thin;
}

.gantt-task-header {
    padding: 4px 10px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.gantt-timeline-header {
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
}

.gantt-weeks {
    display: flex;
    min-height: 44px;
}

.gantt-week {
    flex: 0 0 auto;
    text-align: center;
    padding: 4px 2px;
    border-right: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-secondary);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gantt-week.gantt-weekend {
    background: rgba(245, 181, 31, 0.1);
}

[data-theme="dark"] .gantt-week.gantt-weekend {
    background: rgba(245, 181, 31, 0.15);
}

.gantt-week.gantt-week-start {
    border-left: 2px solid var(--kromeka-yellow);
}

.gantt-week-number {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--kromeka-yellow);
    background: rgba(175, 22, 30, 0.9);
    padding: 1px 4px;
    border-radius: 3px;
    position: absolute;
    top: 2px;
    left: 2px;
}

.gantt-day-grid .gantt-today {
    z-index: 2;
}

.gantt-bars.gantt-day-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    ) !important;
    background-size: var(--gantt-week-width) 100%;
}

[data-theme="dark"] .gantt-bars.gantt-day-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.15) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    ) !important;
    background-size: var(--gantt-week-width) 100%;
}

.gantt-bars.gantt-week-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent calc(var(--gantt-week-width) / 7)
    );
}

[data-theme="dark"] .gantt-bars.gantt-week-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12) 1px,
        transparent 1px,
        transparent calc(var(--gantt-week-width) / 7)
    );
}

.gantt-bars.gantt-month-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

[data-theme="dark"] .gantt-bars.gantt-month-grid {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

.gantt-week-label {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.65rem;
}

.gantt-week.gantt-weekend .gantt-week-label {
    font-size: 0.65rem;
}

.gantt-week-date {
    font-size: 0.68rem;
}

.gantt-task-cell {
    padding: 4px 10px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    min-height: 44px;
}

.gantt-task-cell.gantt-project-cell {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border-color);
}

.gantt-task-cell.gantt-task-cell-item {
    padding-left: 24px;
}

.gantt-bars-row {
    position: relative;
    min-height: 44px;
    border-bottom: 1px solid var(--border-color);
}

.gantt-bars-row.gantt-project-bars-row {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border-color);
}

.gantt-bars {
    position: relative;
    min-height: 44px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.06),
        rgba(0, 0, 0, 0.06) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

[data-theme="dark"] .gantt-bars {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent var(--gantt-week-width)
    );
}

.gantt-bar {
    position: absolute;
    top: 10px;
    height: 22px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    color: white;
    overflow: visible;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 0.75rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s, opacity 0.15s;
}

.gantt-bar:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.gantt-bar:active,
.gantt-bar.dragging {
    cursor: grabbing;
    opacity: 0.85;
    z-index: 15;
}

.gantt-bar.resizing {
    cursor: ew-resize;
}

/* Resize handles */
.gantt-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

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

.gantt-resize-left {
    left: -2px;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(to right, rgba(255,255,255,0.4), transparent);
}

.gantt-resize-right {
    right: -2px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(to left, rgba(255,255,255,0.4), transparent);
}

/* Dependency arrows SVG container */
.gantt-dependencies-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}

.gantt-dependency-line {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
}

.gantt-dependency-arrow {
    fill: var(--text-muted);
}

/* Floating date label while dragging/resizing bars or creating new task */
.gantt-drag-date-label {
    position: absolute;
    background: var(--bg-primary);
    border: 2px solid var(--kromeka-red);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-100%);
    margin-top: -6px;
}

.gantt-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255,255,255,0.25);
}

.gantt-bar-label {
    position: relative;
    z-index: 1;
    font-weight: 600;
}

.gantt-bar-empty {
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gantt-phase-lifecycle-bar,
.gantt-phase-summary-bar {
    pointer-events: none;
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
}

.gantt-zoom-select {
    min-width: 120px;
}

.gantt-zoom-select select,
.gantt-zoom-select .select2-selection {
    box-shadow: none;
}

@media (max-width: 992px) {
    .gantt-container {
        flex-direction: column;
        max-height: none;
    }

    .gantt-left-column {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .gantt-right-column {
        min-height: 300px;
    }
}

/* Compact General Planning - alternate row colors */
.gantt-project-left:nth-child(even) .gantt-task-cell,
.gantt-project-right:nth-child(even) .gantt-bars-row {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .gantt-project-left:nth-child(even) .gantt-task-cell,
[data-theme="dark"] .gantt-project-right:nth-child(even) .gantt-bars-row {
    background: rgba(255, 255, 255, 0.02);
}

/* Force exact height matching between left and right columns */
.gantt-task-cell,
.gantt-bars-row {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    overflow: hidden;
}

.gantt-task-cell.gantt-task-cell-item,
.gantt-task-bars-row {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
}

.gantt-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Compact cell layout for 44px rows */
.gantt-cell-line {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
}

.gantt-cell-meta {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.2;
}

.gantt-project-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-project-name:hover {
    color: var(--kromeka-yellow);
    text-decoration: underline;
}

.gantt-task-name {
    font-size: 0.7rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-task-line {
    padding-left: 4px;
}

.gantt-badge-sm {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
    line-height: 1.2;
}

.gantt-badge-xs {
    font-size: 0.5rem !important;
    padding: 1px 3px !important;
    line-height: 1.2;
}

.gantt-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 3px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}

.gantt-toggle-btn:hover {
    background: var(--input-hover-bg);
    color: var(--text-main);
}

.gantt-row-meta {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.gantt-project-title {
    font-size: 1rem;
}

.gantt-project-title-link {
    color: var(--text-main);
    font-weight: 700;
    text-decoration: none;
}

.gantt-project-title-link:hover {
    color: var(--kromeka-yellow);
    text-decoration: underline;
}

.gantt-task-main {
    gap: 8px;
}

.gantt-task-indent {
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
}

.gantt-task-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.gantt-toggle {
    border-radius: 4px;
}

.gantt-project-tasks-left.collapsed,
.gantt-project-tasks-right.collapsed,
.gantt-project-phases-left.collapsed,
.gantt-project-phases-right.collapsed,
.gantt-phase-tasks-left.collapsed,
.gantt-phase-tasks-right.collapsed {
    display: none;
}

.gantt-week-hours {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.gantt-week-flags {
    font-size: 0.65rem;
    color: var(--kromeka-yellow);
}

.gantt-milestone {
    position: absolute;
    top: 18px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid var(--kromeka-red);
}

.gantt-deadline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 5;
}

.gantt-deadline-label {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--kromeka-red);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 0 0 3px 3px;
    white-space: nowrap;
}

/* Full-height deadline line for project planning */
.gantt-deadline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    z-index: 8;
}

.gantt-deadline-line .gantt-deadline-label {
    position: absolute;
    top: 0;
    left: 4px;
}

/* Action links in task cells */
.gantt-action-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.65rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.gantt-action-link:hover {
    opacity: 1;
    color: var(--kromeka-red);
}

.gantt-action-link.text-danger:hover {
    color: var(--kromeka-red) !important;
}

.gantt-task-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s, text-decoration 0.15s;
}

.gantt-task-name-link:hover {
    color: var(--kromeka-red);
    text-decoration: underline;
}

.gantt-phase-drop-target {
    cursor: default;
}

.gantt-phase-drop-highlight {
    background: rgba(175, 22, 30, 0.12);
    outline: 2px dashed var(--kromeka-red);
    outline-offset: -2px;
}

.gantt-task-hidden {
    display: none;
}

.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--kromeka-red);
    box-shadow: 0 0 8px rgba(175, 22, 30, 0.6);
    z-index: 10;
    pointer-events: none;
}

.gantt-today-label {
    position: absolute;
    top: 0;
    left: 4px;
    background: var(--kromeka-red);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

.gantt-nav-btn {
    min-width: 30px;
    padding: 2px 6px;
}

#gantt-today {
    min-width: 56px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 8px;
    white-space: nowrap;
}

.gantt-empty-row .gantt-task-cell,
.gantt-empty-bars-row .gantt-bars {
    min-height: 36px;
}

/* Hover effects for better UX */
.gantt-task-cell:hover {
    background: var(--input-hover-bg);
}

/* Drag to add selection */
.gantt-drag-selection {
    position: absolute;
    background: rgba(175, 22, 30, 0.15);
    border: 2px dashed var(--kromeka-red);
    height: 44px;
    pointer-events: none;
    z-index: 20;
    border-radius: 4px;
}

/* Cursor for draggable timeline area */
.gantt-project-bars-row {
    cursor: crosshair;
}

/* Gantt filters */
.gantt-filters {
    background: var(--bg-secondary);
}

.gantt-filters .form-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.gantt-task-cell.gantt-project-cell:hover {
    background: var(--bg-secondary);
}

.gantt-toggle:hover {
    background: var(--kromeka-red);
    border-color: var(--kromeka-red);
    color: white;
}

/* Better weekend highlighting in bars area */
.gantt-bars-row:nth-child(odd) .gantt-bars {
    background-color: rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .gantt-bars-row:nth-child(odd) .gantt-bars {
    background-color: rgba(255, 255, 255, 0.01);
}

/* ------------------------------------------------------------
   Flatpickr Date Picker - Theme Compatible
------------------------------------------------------------ */
.flatpickr-calendar {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    font-family: inherit;
}

/* Month header */
.flatpickr-months {
    background: var(--bg-card-header) !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: var(--text-card-header) !important;
    fill: var(--text-card-header) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text-card-header) !important;
    fill: var(--text-card-header) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--kromeka-yellow) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: currentColor !important;
}

.flatpickr-current-month {
    color: var(--text-card-header) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent !important;
    color: var(--text-card-header) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Weekday headers (Mon, Tue, Wed, etc.) */
.flatpickr-weekdays {
    background: var(--bg-secondary) !important;
}

.flatpickr-weekday {
    color: var(--text-main) !important;
    font-weight: 600;
    background: transparent !important;
}

/* Week numbers column - THE FIX */
.flatpickr-weekwrapper {
    background: var(--bg-secondary) !important;
}

.flatpickr-weekwrapper .flatpickr-weekday {
    color: var(--text-main) !important;
    font-weight: 700;
}

.flatpickr-weekwrapper .flatpickr-weeks {
    background: var(--bg-secondary) !important;
}

.flatpickr-weeks span.flatpickr-day,
.flatpickr-weekwrapper .flatpickr-weeks span {
    color: var(--text-muted) !important;
    background: transparent !important;
}

/* Calendar days */
.flatpickr-day {
    color: var(--text-main) !important;
    border-radius: 6px;
    background: transparent !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--hover-bg) !important;
    border-color: var(--border-color) !important;
}

.flatpickr-day.today {
    border-color: var(--kromeka-yellow) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--kromeka-red) !important;
    border-color: var(--kromeka-red) !important;
    color: #fff !important;
}

/* Days outside current month */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

/* Disabled days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Inner container */
.flatpickr-innerContainer {
    background: var(--bg-card) !important;
}

.flatpickr-rContainer {
    background: var(--bg-card) !important;
}

.dayContainer {
    background: var(--bg-card) !important;
}

/* Time picker */
.flatpickr-time {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--text-main) !important;
    background: var(--input-bg) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--hover-bg) !important;
}

/* Arrows */
.flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--border-color) !important;
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--bg-card-header) !important;
}