/* ========================
   Vietnam Legal ToDo Gantt
   Core Styles
======================== */

/* Tab styles */
.tab-btn {
    color: #6b7280;
    background: transparent;
}
.tab-btn.active {
    color: #16a34a;
    background: #f0fdf4;
}
.tab-btn:hover:not(.active) {
    color: #374151;
    background: #f3f4f6;
}
.tab-btn-m {
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid transparent;
}
.tab-btn-m.active {
    color: #16a34a;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* View mode buttons */
.view-mode-btn {
    color: #6b7280;
    background: transparent;
    transition: all 0.15s;
}
.view-mode-btn.active {
    color: #fff;
    background: #16a34a;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-overlay.hidden {
    display: none;
}
.modal-content {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ========================
   Gantt Chart Styles
======================== */
.gantt-container {
    overflow: hidden;
    position: relative;
    height: calc(100vh - 140px);
}

.gantt-wrapper {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Sidebar (left panel) */
.gantt-sidebar {
    min-width: 420px;
    max-width: 420px;
    border-right: 2px solid #e5e7eb;
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.gantt-sidebar-header {
    display: flex;
    height: 50px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    flex-shrink: 0;
}

.gantt-sidebar-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-right: 1px solid #f3f4f6;
}

.task-name-col { flex: 1; min-width: 160px; }
.task-dates-col { width: 100px; }
.task-status-col { width: 70px; }
.task-progress-col { width: 60px; }

.gantt-sidebar-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.gantt-sidebar-row {
    display: flex;
    height: 40px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.1s;
}
.gantt-sidebar-row:hover {
    background: #f9fafb;
}

.gantt-sidebar-row .gantt-sidebar-cell {
    font-size: 0.75rem;
    color: #374151;
}

.gantt-sidebar-row .task-name-col {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================
   Category Group Headers
======================== */
.gantt-cat-header {
    height: 28px !important;
    cursor: default;
    border-bottom: 1px solid #e5e7eb;
}
.gantt-cat-header:hover {
    background: inherit !important;
}
.gantt-cat-header-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px !important;
}
.gantt-cat-header-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gantt-cat-header-count {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0 5px;
    border-radius: 9999px;
    line-height: 1.5;
    min-width: 18px;
    text-align: center;
}

/* Category header color variants — sidebar */
.gantt-cat-header-company-establishment {
    background: #eff6ff;
}
.gantt-cat-header-company-establishment .gantt-cat-header-text { color: #1e40af; }
.gantt-cat-header-company-establishment .gantt-cat-header-count { background: #bfdbfe; color: #1e40af; }
.gantt-cat-header-company-establishment .gantt-sidebar-cell { background: #eff6ff; }

.gantt-cat-header-labor-compliance {
    background: #f5f3ff;
}
.gantt-cat-header-labor-compliance .gantt-cat-header-text { color: #5b21b6; }
.gantt-cat-header-labor-compliance .gantt-cat-header-count { background: #ddd6fe; color: #5b21b6; }
.gantt-cat-header-labor-compliance .gantt-sidebar-cell { background: #f5f3ff; }

.gantt-cat-header-tax-accounting {
    background: #fffbeb;
}
.gantt-cat-header-tax-accounting .gantt-cat-header-text { color: #92400e; }
.gantt-cat-header-tax-accounting .gantt-cat-header-count { background: #fde68a; color: #92400e; }
.gantt-cat-header-tax-accounting .gantt-sidebar-cell { background: #fffbeb; }

.gantt-cat-header-bo-filing {
    background: #fef2f2;
}
.gantt-cat-header-bo-filing .gantt-cat-header-text { color: #991b1b; }
.gantt-cat-header-bo-filing .gantt-cat-header-count { background: #fecaca; color: #991b1b; }
.gantt-cat-header-bo-filing .gantt-sidebar-cell { background: #fef2f2; }

.gantt-cat-header-custom {
    background: #f9fafb;
}
.gantt-cat-header-custom .gantt-cat-header-text { color: #374151; }
.gantt-cat-header-custom .gantt-cat-header-count { background: #e5e7eb; color: #374151; }
.gantt-cat-header-custom .gantt-sidebar-cell { background: #f9fafb; }

/* New categories */
.gantt-cat-header-tax-personal {
    background: #f0f9ff;
}
.gantt-cat-header-tax-personal .gantt-cat-header-text { color: #0369a1; }
.gantt-cat-header-tax-personal .gantt-cat-header-count { background: #bae6fd; color: #0369a1; }
.gantt-cat-header-tax-personal .gantt-sidebar-cell { background: #f0f9ff; }

.gantt-cat-header-social-insurance {
    background: #f0fdfa;
}
.gantt-cat-header-social-insurance .gantt-cat-header-text { color: #0f766e; }
.gantt-cat-header-social-insurance .gantt-cat-header-count { background: #99f6e4; color: #0f766e; }
.gantt-cat-header-social-insurance .gantt-sidebar-cell { background: #f0fdfa; }

.gantt-cat-header-residence-workpermit {
    background: #fff7ed;
}
.gantt-cat-header-residence-workpermit .gantt-cat-header-text { color: #c2410c; }
.gantt-cat-header-residence-workpermit .gantt-cat-header-count { background: #fed7aa; color: #c2410c; }
.gantt-cat-header-residence-workpermit .gantt-sidebar-cell { background: #fff7ed; }

.gantt-cat-header-living-assets {
    background: #fdf2f8;
}
.gantt-cat-header-living-assets .gantt-cat-header-text { color: #be185d; }
.gantt-cat-header-living-assets .gantt-cat-header-count { background: #fbcfe8; color: #be185d; }
.gantt-cat-header-living-assets .gantt-sidebar-cell { background: #fdf2f8; }

.gantt-cat-header-family-postreturn {
    background: #faf5ff;
}
.gantt-cat-header-family-postreturn .gantt-cat-header-text { color: #7e22ce; }
.gantt-cat-header-family-postreturn .gantt-cat-header-count { background: #d8b4fe; color: #7e22ce; }
.gantt-cat-header-family-postreturn .gantt-sidebar-cell { background: #faf5ff; }

.gantt-cat-header-erc-change {
    background: #ecfeff;
}
.gantt-cat-header-erc-change .gantt-cat-header-text { color: #0e7490; }
.gantt-cat-header-erc-change .gantt-cat-header-count { background: #a5f3fc; color: #0e7490; }
.gantt-cat-header-erc-change .gantt-sidebar-cell { background: #ecfeff; }

.gantt-cat-header-irc-change {
    background: #ede9fe;
}
.gantt-cat-header-irc-change .gantt-cat-header-text { color: #6d28d9; }
.gantt-cat-header-irc-change .gantt-cat-header-count { background: #c4b5fd; color: #6d28d9; }
.gantt-cat-header-irc-change .gantt-sidebar-cell { background: #ede9fe; }

/* Category header color variants — timeline */
.gantt-timeline-cat-header {
    z-index: 1;
    border-bottom: 1px solid #e5e7eb;
}
.gantt-timeline-cat-header-company-establishment { background: #eff6ff; }
.gantt-timeline-cat-header-labor-compliance { background: #f5f3ff; }
.gantt-timeline-cat-header-tax-accounting { background: #fffbeb; }
.gantt-timeline-cat-header-bo-filing { background: #fef2f2; }
.gantt-timeline-cat-header-tax-personal { background: #f0f9ff; }
.gantt-timeline-cat-header-social-insurance { background: #f0fdfa; }
.gantt-timeline-cat-header-residence-workpermit { background: #fff7ed; }
.gantt-timeline-cat-header-living-assets { background: #fdf2f8; }
.gantt-timeline-cat-header-family-postreturn { background: #faf5ff; }
.gantt-timeline-cat-header-erc-change { background: #ecfeff; }
.gantt-timeline-cat-header-irc-change { background: #ede9fe; }
.gantt-timeline-cat-header-custom { background: #f9fafb; }

/* Category indicator */
.cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 6px;
}
.cat-company-establishment { background: #3b82f6; }
.cat-labor-compliance { background: #8b5cf6; }
.cat-tax-accounting { background: #f59e0b; }
.cat-bo-filing { background: #ef4444; }
.cat-tax-personal { background: #0ea5e9; }
.cat-social-insurance { background: #14b8a6; }
.cat-residence-workpermit { background: #f97316; }
.cat-living-assets { background: #ec4899; }
.cat-family-postreturn { background: #a855f7; }
.cat-erc-change { background: #06b6d4; }
.cat-irc-change { background: #8b5cf6; }
.cat-custom { background: #6b7280; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
}
.status-not-started { background: #f3f4f6; color: #6b7280; }
.status-in-progress { background: #dbeafe; color: #2563eb; }
.status-completed { background: #dcfce7; color: #16a34a; }
.status-delayed { background: #fee2e2; color: #dc2626; }
.status-at-risk { background: #fef3c7; color: #d97706; }

/* Priority badges */
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    font-weight: 600;
}
.priority-high { color: #dc2626; }
.priority-medium { color: #d97706; }
.priority-low { color: #6b7280; }

/* Timeline (right panel) */
.gantt-timeline {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #fff;
}

.gantt-timeline-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    height: 50px;
    display: flex;
    flex-shrink: 0;
}

.gantt-timeline-header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: #6b7280;
    font-weight: 500;
    border-right: 1px solid #f3f4f6;
    flex-shrink: 0;
    flex-direction: column;
    line-height: 1.2;
}
.gantt-timeline-header-cell .header-month {
    font-size: 0.625rem;
    font-weight: 600;
    color: #374151;
}
.gantt-timeline-header-cell .header-day {
    font-size: 0.625rem;
    color: #9ca3af;
}
.gantt-timeline-header-cell.is-weekend {
    background: #fafafa;
}
.gantt-timeline-header-cell.is-today {
    background: #f0fdf4;
    color: #16a34a;
    font-weight: 700;
}

.gantt-timeline-body {
    position: relative;
    min-height: calc(100% - 50px);
}

.gantt-timeline-row {
    height: 40px;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
}

/* Grid columns */
.gantt-grid-col {
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 1px solid #f8f9fa;
}
.gantt-grid-col.is-weekend {
    background: rgba(0,0,0,0.015);
}

/* Today line */
.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #16a34a;
    z-index: 4;
    pointer-events: none;
}
.gantt-today-line::before {
    content: '▼';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #16a34a;
}

/* Task bar */
.gantt-bar {
    position: absolute;
    height: 24px;
    top: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s;
    z-index: 2;
    min-width: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.gantt-bar:hover {
    filter: brightness(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 3;
}

.gantt-bar-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    opacity: 0.3;
}

.gantt-bar-label {
    position: relative;
    z-index: 1;
    font-size: 0.625rem;
    font-weight: 500;
    color: #fff;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Bar colors by status */
.gantt-bar-not-started { background: #d1d5db; }
.gantt-bar-not-started .gantt-bar-progress { background: #9ca3af; }
.gantt-bar-not-started .gantt-bar-label { color: #374151; text-shadow: none; }

.gantt-bar-in-progress { background: #60a5fa; }
.gantt-bar-in-progress .gantt-bar-progress { background: #2563eb; }

.gantt-bar-completed { background: #4ade80; }
.gantt-bar-completed .gantt-bar-progress { background: #16a34a; }

.gantt-bar-delayed { background: #f87171; }
.gantt-bar-delayed .gantt-bar-progress { background: #dc2626; }

.gantt-bar-at-risk { background: #fbbf24; }
.gantt-bar-at-risk .gantt-bar-progress { background: #d97706; }
.gantt-bar-at-risk .gantt-bar-label { color: #374151; text-shadow: none; }

/* Drag handles */
.gantt-bar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.15s;
}
.gantt-bar:hover .gantt-bar-handle {
    opacity: 1;
}
.gantt-bar-handle-left {
    left: 0;
    border-radius: 4px 0 0 4px;
    background: rgba(0,0,0,0.15);
}
.gantt-bar-handle-right {
    right: 0;
    border-radius: 0 4px 4px 0;
    background: rgba(0,0,0,0.15);
}

/* Milestone marker */
.gantt-milestone {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    transform: rotate(45deg);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s;
}
.gantt-milestone:hover {
    transform: rotate(45deg) scale(1.2);
}

/* ========================
   Task List View Styles
======================== */
.task-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}
.task-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #d1d5db;
}

/* ========================
   Master Task Card Styles
======================== */
.master-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.15s;
}
.master-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ========================
   Progress bar (small)
======================== */
.progress-bar-small {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}
.progress-bar-small-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

/* ========================
   Scrollbar styling
======================== */
.gantt-sidebar-body::-webkit-scrollbar,
.gantt-timeline::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.gantt-sidebar-body::-webkit-scrollbar-track,
.gantt-timeline::-webkit-scrollbar-track {
    background: transparent;
}
.gantt-sidebar-body::-webkit-scrollbar-thumb,
.gantt-timeline::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
.gantt-sidebar-body::-webkit-scrollbar-thumb:hover,
.gantt-timeline::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ========================
   Toast animation
======================== */
@keyframes toastIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
#toast:not(.hidden) {
    animation: toastIn 0.3s ease-out;
}

/* ========================
   Responsive
======================== */
@media (max-width: 768px) {
    .gantt-sidebar {
        min-width: 200px;
        max-width: 200px;
    }
    .task-dates-col,
    .task-progress-col {
        display: none;
    }
    .task-status-col {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .gantt-sidebar {
        min-width: 150px;
        max-width: 150px;
    }
}