/* General styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.min-h-screen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.table-container {
    overflow-x: auto;
    white-space: nowrap; /* Prevent line break */
}

/* Remove dotted border and keep rounded corners with a solid background */
.flex-grow {
    background-color: #ffffff; /* Solid white background */
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a cleaner look */
    overflow-y: auto; /* Allow vertical scrolling */
}

.chart th, 
.chart td {
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Prevent line break */
    border-bottom: 1px solid #e5e7eb; /* Subtle row dividers */
}

/* Timeline date headers */
.date-row th {
    background-color: #f3f4f6;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
    border-left: 1px solid #f1f1f1; /* Subtle column divider */
}

/* Frozen first column */
.chart th:first-child, 
.chart td:first-child {
    position: sticky;
    left: 0;
    background-color: #f9fafb; /* Slightly different background for the first column */
    z-index: 2;
    border-right: 1px solid #e5e7eb;
    border-left: none; /* Remove left border for first column */
}

/* Task styling */
.chart th:first-child {
    font-weight: bold;
    color: #374151;
    background-color: #f9fafb; /* Match background with first column */
}

.subtask {
    font-weight: normal;
    color: #374151; /* Darker text for subtasks */
    padding-left: 20px;
    font-style: italic;
}

.chart td:first-child {
    font-weight: bold; /* Make task names bold */
}

/* Alternating row colors */
.chart tr:nth-child(even) {
    background-color: #f9fafb; /* Light grey background for even rows */
}

.chart tr:nth-child(odd) {
    background-color: #ffffff; /* White background for odd rows */
}

/* Task bar container */
.bar-container {
    position: relative;
    height: 24px;
    margin: 5px 0;
}

/* Task bar styles */
.bar {
    position: absolute;
    height: 100%;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Category-specific colors */
.project-management { background-color: #fb923c; }
.landing-page { background-color: #38bdf8; }
.visual-assets { background-color: #86efac; }
.email-marketing { background-color: #fbbf24; }
.media-buy { background-color: #4ade80; }
.campaign-page { background-color: #f472b6; }
.pr { background-color: #c4b5fd; }
.social-community { background-color: #fdba74; }
.campaign-management { background-color: #a1a1aa; }

/* Timeline column divider */
.date-column {
    background-color: #f9fafb;
    border-left: 1px solid #e5e7eb;
    text-align: center;
    min-width: 60px;
    position: relative;
    z-index: 0;
}

/* Alternating background colors for timeline columns */
.date-column:nth-child(even) {
    background-color: #f1f5f9; /* Light grey */
}

.date-column:nth-child(odd) {
    background-color: #ffffff; /* White */
}

.date-column:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e5e7eb;
    z-index: 1;
}