/* Dark Theme - The Roam Chart */
/* All color definitions for the dark theme */

:root {
    /* Backgrounds */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: rgba(255,255,255,0.05);
    --bg-card-hover: rgba(255,255,255,0.1);
    --bg-input: rgba(255,255,255,0.05);
    --bg-input-focus: rgba(255,255,255,0.1);

    /* Text */
    --text-primary: #eeeeee;
    --text-secondary: #888888;
    --text-muted: #666666;
    --text-weekend: #e74c3c;

    /* Borders */
    --border-default: rgba(255,255,255,0.1);
    --border-focus: #2ecc71;

    /* Status colors */
    --color-booked: #2ecc71;
    --color-pending: rgba(255,255,255,0.7);
    --color-confirmed: #27ae60;
    --color-cancelled: #e74c3c;

    /* Day type colors */
    --color-travel: #363b40;
    --color-travel-dark: #2e3338;
    --color-tbd: #f39c12;
    --color-tbd-dark: #e67e22;
    --color-empty: rgba(255,255,255,0.03);

    /* Traveler */
    --color-traveler-default: #4a9eff;

    /* Accent colors */
    --color-accent: #3498db;
    --color-accent-hover: #2980b9;
    --color-success: #2ecc71;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;

    /* Scrollbar */
    --scrollbar-track: rgba(255,255,255,0.05);
    --scrollbar-thumb: rgba(255,255,255,0.2);
    --scrollbar-thumb-hover: rgba(255,255,255,0.3);
}

/* Body gradient */
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
}

/* Section backgrounds */
.section {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
}

/* Gantt Cell Colors */
.gantt-cell.empty {
    background: var(--color-empty);
}

.gantt-cell.tbd {
    background: linear-gradient(135deg, var(--color-tbd), var(--color-tbd-dark));
}

/* Travel cells: gray stripes (no location) OR colored stripes (has location) */
.gantt-cell.travel {
    background: repeating-linear-gradient(
        45deg,
        var(--color-travel),
        var(--color-travel) 4px,
        var(--color-travel-dark) 4px,
        var(--color-travel-dark) 8px
    );
}

/* Travel cells WITH location: colored stripes using CSS variables from inline style */
.gantt-cell.travel.has-location {
    background: repeating-linear-gradient(
        45deg,
        var(--loc-color),
        var(--loc-color) 4px,
        var(--loc-color-dark) 4px,
        var(--loc-color-dark) 8px
    );
}

/* Arrival indicator on gantt cells */
.gantt-cell.arrival::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--color-success);
    border-radius: 50%;
}

/* Day Card Colors */
.day-card.tbd {
    background: linear-gradient(135deg, var(--color-tbd), var(--color-tbd-dark));
}

/* Travel day cards: gray stripes (no location) OR colored stripes (has location) */
.day-card.travel {
    background: repeating-linear-gradient(
        45deg,
        var(--color-travel),
        var(--color-travel) 4px,
        var(--color-travel-dark) 4px,
        var(--color-travel-dark) 8px
    );
}

/* Travel day cards WITH location: colored stripes using CSS variables from inline style */
.day-card.travel.has-location {
    background: repeating-linear-gradient(
        45deg,
        var(--loc-color),
        var(--loc-color) 4px,
        var(--loc-color-dark) 4px,
        var(--loc-color-dark) 8px
    );
}

.day-card.booked {
    border: 3px solid var(--color-booked);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

/* Booked Badge */
.booked-badge {
    background: var(--color-booked);
}

/* Arrival Badge */
.arrival-badge {
    background: var(--color-accent);
}

.badge.booked {
    background: var(--color-confirmed);
}

/* Header cells */
.gantt-header-cell {
    color: var(--text-secondary);
}

.gantt-header-cell.weekend {
    color: var(--text-weekend);
}

.day-label {
    color: var(--text-muted);
}

.weekend .day-label {
    color: #c0392b;
}

/* Backlog panel */
.backlog-panel {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-default);
}

.backlog-toggle {
    background: var(--color-booked);
}

.backlog-item {
    background: var(--bg-card);
}

.backlog-item:hover {
    background: var(--bg-card-hover);
}

/* Modal dark theme */
.modal-dark .modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

.modal-dark .modal-header {
    border-bottom: 1px solid var(--border-default);
}

.modal-dark .modal-footer {
    border-top: 1px solid var(--border-default);
}

.modal-dark .form-control,
.modal-dark .form-select {
    background: var(--bg-input);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--text-primary);
}

.modal-dark .form-control:focus,
.modal-dark .form-select:focus {
    background: var(--bg-input-focus);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
}

.modal-dark .form-label {
    color: var(--text-secondary);
}

/* Modal list group dark theme */
.modal-dark .list-group-item {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}

.modal-dark .list-group-item:hover,
.modal-dark .list-group-item:focus {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.modal-dark .list-group-item.text-secondary {
    color: var(--text-secondary) !important;
}

/* Gantt context menu dark theme */
#ganttContextMenu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
}

#ganttContextMenu .dropdown-item {
    color: var(--text-primary);
}

#ganttContextMenu .dropdown-item:hover,
#ganttContextMenu .dropdown-item:focus {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

#ganttContextMenu .dropdown-header {
    color: var(--text-secondary);
}

#ganttContextMenu .dropdown-divider {
    border-color: var(--border-default);
}

/* All context menus dark theme */
#dayHeaderContextMenu,
#travelerRowMenu,
#travelerCellMenu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
}

#dayHeaderContextMenu .dropdown-item,
#travelerRowMenu .dropdown-item,
#travelerCellMenu .dropdown-item {
    color: var(--text-primary);
}

#dayHeaderContextMenu .dropdown-item:hover,
#travelerRowMenu .dropdown-item:hover,
#travelerCellMenu .dropdown-item:hover,
#dayHeaderContextMenu .dropdown-item:focus,
#travelerRowMenu .dropdown-item:focus,
#travelerCellMenu .dropdown-item:focus {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

#dayHeaderContextMenu .dropdown-item.disabled,
#travelerRowMenu .dropdown-item.disabled,
#travelerCellMenu .dropdown-item.disabled {
    color: var(--text-muted);
}

#dayHeaderContextMenu .dropdown-header,
#travelerRowMenu .dropdown-header,
#travelerCellMenu .dropdown-header {
    color: var(--text-secondary);
}

#dayHeaderContextMenu .dropdown-divider,
#travelerRowMenu .dropdown-divider,
#travelerCellMenu .dropdown-divider {
    border-color: var(--border-default);
}

/* Gantt toolbar dark */
.gantt-toolbar {
    background: var(--bg-card);
}

/* Day settings dropdown dark theme */
.day-settings .dropdown-menu {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-default) !important;
}

.day-settings .dropdown-item {
    color: var(--text-primary) !important;
}

.day-settings .dropdown-item:hover,
.day-settings .dropdown-item:focus {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.day-settings .dropdown-item.active {
    background: var(--color-accent);
    color: white;
}

.day-settings .dropdown-header {
    color: var(--text-secondary);
}

.day-settings .dropdown-divider {
    border-color: var(--border-default);
}

/* Toast */
.toast-dark {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

/* Summary box */
.summary-box {
    background: var(--bg-card);
}

/* Flight details */
.flight-details {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid rgba(39, 174, 96, 0.5);
}

.flight-details .conf {
    color: var(--color-booked);
}

/* Add activity button */
.add-activity-btn {
    background: var(--bg-card);
    border: 1px dashed rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

.add-activity-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Settings button */
.settings-btn {
    background: var(--bg-card);
    color: var(--text-secondary);
}

.settings-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* Version badge */
.version-badge {
    color: var(--color-booked);
}

/* Leg dividers */
.leg-divider {
    color: var(--text-secondary);
    border-top: 1px dashed var(--border-default);
    border-bottom: 1px dashed var(--border-default);
}

/* Legend */
.legend {
    border-top: 1px solid var(--border-default);
}

/* Headings */
h1 {
    color: #fff;
}

.subtitle {
    color: var(--text-secondary);
}

.section-title {
    color: #fff;
}

/* Day card header */
.day-header {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}