html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Use a flex column layout so the gantt fills the remaining viewport height */
body {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* dynamic viewport unit for mobile */
}

#gantt_here {
    width: 100%;
    /* Fill all remaining space below the controls bar */
    flex: 1 1 auto;
    min-height: 0; /* allow children to size inside flex */
    height: calc(100vh - 150px); /* controls bar height */
}

#controls-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 10px;
    background: #f4f4f4;
    border-bottom: 1px solid #e6e6e6;
}

/* Unified button styles for all buttons */
:root {
    --btn-bg: #ffffff;
    --btn-border: #cbd5e1; /* slate-300 */
    --btn-text: #0f172a; /* slate-900 */
    --btn-bg-hover: #f8fafc; /* slate-50 */
    --btn-border-hover: #94a3b8; /* slate-400 */
    --btn-bg-active: #eef2f7; /* light */
    --btn-focus: #2563eb; /* blue-600 */
}

button {
    -webkit-appearance: none;
    appearance: none;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 50ms ease;
}

button:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
}

button:active {
    background: var(--btn-bg-active);
    transform: translateY(0.5px);
}

button:focus-visible {
    outline: 2px solid var(--btn-focus);
    outline-offset: 2px;
}

button[disabled], button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(10%);
}

/* Treat pressed toggle buttons consistently */
button[aria-pressed="true"] {
    background: var(--btn-bg-active);
    border-color: var(--btn-border-hover);
}

/* Specific tweaks without overriding base look */
#menu-toggle {
    font-size: 18px; /* keep burger icon clear */
    line-height: 1;
}

/* Select (dropdown) styles for uniform look */
select {
    background: #ffffff;
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    padding: 8px 32px 8px 12px; /* right padding to accommodate native arrow */
    font-size: 14px;
    line-height: 1.2;
    display: inline-block;
    min-width: 140px;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

select:hover {
    border-color: var(--btn-border-hover);
    background: var(--btn-bg-hover);
}

select:focus-visible {
    outline: 2px solid var(--btn-focus);
    outline-offset: 2px;
}

select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

#upload-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 12px;
    display: none;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
    min-width: 520px;
}

#upload-panel.open {
    display: flex;
}

#upload-panel form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

#upload-panel .control-group {
    min-width: 140px;
}

#upload-status {
    flex: 1 1 100%;
    margin-top: 4px;
}

.divider {
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

.control-group {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    margin-bottom: 4px;
}

.night-hours, .gantt_scale_cell.night-hours {
    background-color: rgba(0, 0, 0, 0.1);
}

.task-red {
    background-color: #ffaaaa;
}

.gantt_task_line.task-red .gantt_task_content, .gantt_row.task-red {
    background-color: #ffaaaa;
}


.today_marker {
    background-color: red;
    width: 2px;
}

.today_marker .gantt_marker_content {
    top: 0;
    color: red;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
}

.search-group {
    min-width: 220px;
}

.search-input-wrapper {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.search-input {
    flex: 1 1 auto;
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
}

.search-input:focus-visible {
    outline: 2px solid var(--btn-focus);
    outline-offset: 2px;
}

#clear-text-filter {
    padding: 8px 10px;
    min-width: 36px;
}

@media (max-width: 720px) {
    #upload-panel {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    /* Smaller controls and allow horizontal scroll if crowded */
    #controls-bar {
        gap: 8px;
        padding: 8px;
        overflow-x: auto;
    }

    /* Hide specific buttons on mobile to save space */
    #menu-toggle, #toggle-grid, #btn-jump-now, #btn-zoom-out, #btn-zoom-in, #toggle-past {
        display: none;
    }

    /* Align labels and dropdowns on a single line for filters */
    .control-group {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .control-group label {
        margin-bottom: 0;
        white-space: nowrap;
        width: 70px;
        text-align: right;
    }

    .control-group select {
        flex: 1;
        min-width: 0;
    }

    /* More compact grid column widths on mobile (when grid visible) */
    .gantt_grid_head_cell, .gantt_grid_data .gantt_cell {
        font-size: 12px;
    }

    .gantt_tooltip {
        position: fixed !important;
        /*top: 50% !important;*/
        /*left: 50% !important;*/
        /*transform: translate(-50%, -50%) !important;*/
        z-index: 1000;
    }

    .search-group {
        width: 100%;
    }

    .search-input-wrapper {
        width: 100%;
    }
}

@media (max-height: 300px) {
    #controls-bar {
        display: none;
    }
}

/* Active task: red border */
.gantt_task_line.task-active .gantt_task_content,
.gantt_row.task-active {
    box-shadow: none;
    border: 2px solid #d9534f;
    border-radius: 3px;
}

/* Upcoming task (next 3 hours): green border */
.gantt_task_line.task-upcoming .gantt_task_content,
.gantt_row.task-upcoming {
    box-shadow: none;
    border: 2px solid #5cb85c;
    border-radius: 3px;
}

/* Ensure task content uses box-sizing so borders don't break layout */
.gantt_task_content {
    box-sizing: border-box;
}

/* Tooltip styling for wrapping and mobile */
.gantt_tooltip {
    max-width: 90vw !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    display: block !important;
    width: auto !important;
}

@media (max-width: 720px) {
    .gantt_tooltip {
        position: fixed !important;
        /*top: 50% !important;*/
        /*left: 50% !important;*/
        /*transform: translate(-75%, -75%) !important;*/
        z-index: 1000;
    }
}