/* ==========================================================================
   DeltaSmart Gantt Chart Styles
   Frappe Gantt overrides using --ds-* design tokens.
   Supports light mode, dark mode, responsive mobile with sticky task names.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container: horizontal scroll with sticky task names
   -------------------------------------------------------------------------- */
.ds-gantt-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.ds-gantt-wrapper svg.gantt {
  min-width: 600px;
}

/* --------------------------------------------------------------------------
   Gantt bar colors — brand palette via design tokens
   -------------------------------------------------------------------------- */

/* Brand blue — projects (active), tasks (in_progress) */
.bar-brand-blue .bar-progress,
.bar-brand-blue .bar {
  fill: var(--ds-brand-primary);
}

/* Teal/accent — jobs (ordered, testing) */
.bar-brand-teal .bar-progress,
.bar-brand-teal .bar {
  fill: var(--ds-brand-accent);
}

/* Success green — completed / delivered / ready */
.bar-brand-green .bar-progress,
.bar-brand-green .bar {
  fill: var(--ds-success);
}

/* Warning orange — on_hold, awaiting_stock, skipped */
.bar-brand-orange .bar-progress,
.bar-brand-orange .bar {
  fill: var(--ds-warning);
}

/* Danger red — overdue indicator */
.bar-brand-red .bar-progress,
.bar-brand-red .bar {
  fill: var(--ds-danger);
}

/* Info blue — informational */
.bar-brand-info .bar-progress,
.bar-brand-info .bar {
  fill: var(--ds-info);
}

/* Neutral grey — draft, pending */
.bar-brand-grey .bar-progress,
.bar-brand-grey .bar {
  fill: var(--ds-gray-400);
}

/* Dark grey — closed */
.bar-brand-dark .bar-progress,
.bar-brand-dark .bar {
  fill: var(--ds-gray-600);
}

/* --------------------------------------------------------------------------
   Frappe Gantt base overrides — light mode
   -------------------------------------------------------------------------- */
.gantt .grid-header {
  fill: var(--ds-surface-card);
  stroke: var(--ds-border-default);
}

.gantt .grid-row {
  fill: var(--ds-surface-card);
}

.gantt .grid-row:nth-child(even) {
  fill: var(--ds-surface-sunken);
}

.gantt .row-line {
  stroke: var(--ds-border-muted);
}

.gantt .tick {
  stroke: var(--ds-border-muted);
  stroke-dasharray: 4, 4;
}

.gantt .today-highlight {
  fill: var(--ds-brand-primary-subtle);
}

/* Bar styling */
.gantt .bar {
  rx: var(--ds-radius-sm);
  ry: var(--ds-radius-sm);
}

.gantt .bar-progress {
  rx: var(--ds-radius-sm);
  ry: var(--ds-radius-sm);
}

.gantt .bar-label {
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
  fill: var(--ds-text-on-primary);
}

.gantt .bar-label.big {
  font-size: var(--ds-font-size-sm);
}

/* Header text */
.gantt .upper-text,
.gantt .lower-text {
  font-family: var(--ds-font-family);
  fill: var(--ds-text-secondary);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-font-weight-medium);
}

/* Arrow / dependency lines */
.gantt .arrow {
  stroke: var(--ds-gray-400);
  stroke-width: 1.5;
}

/* Popup */
.gantt-container .popup-wrapper {
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-sm);
}

/* --------------------------------------------------------------------------
   View Mode Switcher — button group styling
   -------------------------------------------------------------------------- */
.ds-gantt-view-switcher {
  display: inline-flex;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  border: 1px solid var(--ds-border-default);
}

.ds-gantt-view-switcher .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--ds-border-default);
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-secondary);
  background-color: var(--ds-surface-card);
  transition: var(--ds-transition-fast);
}

.ds-gantt-view-switcher .btn:last-child {
  border-right: none;
}

.ds-gantt-view-switcher .btn:hover {
  background-color: var(--ds-brand-primary-subtle);
  color: var(--ds-brand-primary);
}

.ds-gantt-view-switcher .btn.active {
  background-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}

/* --------------------------------------------------------------------------
   Filter Controls
   -------------------------------------------------------------------------- */
.ds-gantt-filters {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-4);
}

.ds-gantt-filters .form-select {
  max-width: 200px;
  font-size: var(--ds-font-size-sm);
}

/* --------------------------------------------------------------------------
   Dark Mode overrides
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .gantt .grid-header {
  fill: var(--ds-surface-card);
  stroke: var(--ds-border-default);
}

[data-bs-theme="dark"] .gantt .grid-row {
  fill: var(--ds-surface-card);
}

[data-bs-theme="dark"] .gantt .grid-row:nth-child(even) {
  fill: var(--ds-surface-sunken);
}

[data-bs-theme="dark"] .gantt .row-line {
  stroke: var(--ds-border-muted);
}

[data-bs-theme="dark"] .gantt .tick {
  stroke: var(--ds-border-muted);
}

[data-bs-theme="dark"] .gantt .today-highlight {
  fill: var(--ds-brand-primary-subtle);
}

[data-bs-theme="dark"] .gantt .upper-text,
[data-bs-theme="dark"] .gantt .lower-text {
  fill: var(--ds-text-secondary);
}

[data-bs-theme="dark"] .gantt .bar-label {
  fill: var(--ds-text-on-primary);
}

[data-bs-theme="dark"] .gantt .arrow {
  stroke: var(--ds-gray-500);
}

[data-bs-theme="dark"] .ds-gantt-view-switcher .btn {
  background-color: var(--ds-surface-card);
  color: var(--ds-text-secondary);
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-gantt-view-switcher {
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-gantt-view-switcher .btn:hover {
  background-color: var(--ds-brand-primary-subtle);
  color: var(--ds-brand-primary);
}

[data-bs-theme="dark"] .ds-gantt-view-switcher .btn.active {
  background-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}

[data-bs-theme="dark"] .gantt-container .popup-wrapper {
  background-color: var(--ds-surface-raised);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-border-default);
}

/* --------------------------------------------------------------------------
   Responsive: mobile sticky task names
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ds-gantt-wrapper {
    max-width: 100vw;
  }

  .ds-gantt-filters .form-select {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .ds-gantt-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Workload Page — redesigned cards
   -------------------------------------------------------------------------- */

/* User card */
.ds-workload-card {
  background-color: var(--ds-surface-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-duration-fast) var(--ds-ease-default),
              box-shadow var(--ds-duration-fast) var(--ds-ease-default);
  overflow: hidden;
}

.ds-workload-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

/* Avatar placeholder */
.ds-workload-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-brand-primary-subtle);
  color: var(--ds-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-md);
  flex-shrink: 0;
}

/* Card header */
.ds-workload-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-workload-user-info {
  flex: 1;
  min-width: 0;
}

.ds-workload-user-name {
  font-weight: var(--ds-font-weight-semibold);
  font-size: var(--ds-font-size-base);
  color: var(--ds-text-primary);
  margin: 0;
  line-height: var(--ds-line-height-tight);
}

.ds-workload-user-meta {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  margin: 0;
}

/* Stats row */
.ds-workload-stats {
  display: flex;
  padding: var(--ds-space-3) var(--ds-space-4);
  gap: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-border-muted);
}

.ds-workload-stat {
  flex: 1;
  text-align: center;
  padding: var(--ds-space-2) 0;
}

.ds-workload-stat-value {
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-font-weight-bold);
  line-height: 1;
  margin-bottom: var(--ds-space-1);
}

.ds-workload-stat-value--primary { color: var(--ds-brand-primary); }
.ds-workload-stat-value--accent  { color: var(--ds-brand-accent); }
.ds-workload-stat-value--success { color: var(--ds-success); }

.ds-workload-stat-label {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--ds-font-weight-medium);
}

/* Progress bar */
.ds-workload-progress {
  padding: 0 var(--ds-space-4) var(--ds-space-3);
}

.ds-workload-progress-label {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-1);
}

.ds-workload-progress .progress {
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: var(--ds-surface-sunken);
}

.ds-workload-progress .progress-bar {
  border-radius: var(--ds-radius-full);
}

/* Job list — compact table */
.ds-workload-jobs {
  padding: 0 var(--ds-space-4) var(--ds-space-4);
}

.ds-workload-jobs-table {
  width: 100%;
  font-size: var(--ds-font-size-sm);
}

.ds-workload-jobs-table td {
  padding: var(--ds-space-1-5) 0;
  border-bottom: 1px solid var(--ds-border-muted);
  vertical-align: middle;
}

.ds-workload-jobs-table tr:last-child td {
  border-bottom: none;
}

.ds-workload-jobs-table a {
  color: var(--ds-text-link);
  text-decoration: none;
  font-weight: var(--ds-font-weight-medium);
}

.ds-workload-jobs-table a:hover {
  color: var(--ds-text-link-hover);
}

.ds-workload-jobs-table .badge {
  font-size: var(--ds-font-size-xs);
}

.ds-workload-jobs-overflow {
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
  padding-top: var(--ds-space-1);
}

/* Period selector */
.ds-period-selector {
  display: inline-flex;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  border: 1px solid var(--ds-border-default);
}

.ds-period-selector .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--ds-border-default);
  padding: var(--ds-space-1) var(--ds-space-3);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-secondary);
  background-color: var(--ds-surface-card);
  transition: var(--ds-transition-fast);
}

.ds-period-selector .btn:last-child {
  border-right: none;
}

.ds-period-selector .btn:hover {
  background-color: var(--ds-brand-primary-subtle);
  color: var(--ds-brand-primary);
}

.ds-period-selector .btn.active {
  background-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}

/* Dark mode workload overrides */
[data-bs-theme="dark"] .ds-workload-card {
  background-color: var(--ds-surface-card);
}

[data-bs-theme="dark"] .ds-workload-header {
  border-bottom-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-workload-stats {
  border-bottom-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-workload-jobs-table td {
  border-bottom-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-period-selector {
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-period-selector .btn {
  background-color: var(--ds-surface-card);
  color: var(--ds-text-secondary);
  border-color: var(--ds-border-default);
}

[data-bs-theme="dark"] .ds-period-selector .btn.active {
  background-color: var(--ds-brand-primary);
  color: var(--ds-text-on-primary);
}