/* ── Theme variables ─────────────────────────────────────────────────────── */
/* Default = Dark */
/* --vp-0..9: vessel palette (red, orange, amber, green, teal, blue, gray, purple, pink, brown) */
:root {
  --gc-bg:          #1a1a2e;
  --gc-text:        #e2e8f0;
  --gc-header:      #16213e;
  --gc-header-text: #e2e8f0;
  --gc-month:       #0f3460;
  --gc-month-text:  #e2e8f0;
  --gc-border:      #2d3748;
  --gc-wrap-br:     #444;
  --gc-muted:       #6b7280;
  --gc-wknd-h:      #111827;
  --gc-wknd-c:      rgba(0,0,0,0.40);
  --gc-hol-h:       #1c1400;
  --gc-hol-c:       rgba(245,158,11,0.07);
  --gc-hol-br:      rgba(245,158,11,0.30);
  --gc-spacer:      #0d1117;
  --gc-spacer-br:   #374151;
  --gc-tooltip-bg:  #0f1f40;
  --gc-tooltip-br:  #2563eb;
  --gc-tooltip-text: var(--gc-text);
  /* Vessel palette — fixed across all themes */
  --vp-0:#c0392b; --vp-1:#d35400; --vp-2:#b7770d; --vp-3:#27ae60; --vp-4:#16a085;
  --vp-5:#2980b9; --vp-6:#6b7280; --vp-7:#8e44ad; --vp-8:#c2185b; --vp-9:#795548;
}

[data-theme="light"] {
  --gc-bg:          #ffffff;
  --gc-text:        #1e293b;
  --gc-header:      #f1f5f9;
  --gc-header-text: #1e293b;
  --gc-month:       #1d4ed8;
  --gc-month-text:  #ffffff;
  --gc-border:      #cbd5e1;
  --gc-wrap-br:     #94a3b8;
  --gc-muted:       #64748b;
  --gc-wknd-h:      #dde3ec;
  --gc-wknd-c:      rgba(0,0,0,0.09);
  --gc-hol-h:       #fffbeb;
  --gc-hol-c:       rgba(245,158,11,0.08);
  --gc-hol-br:      rgba(245,158,11,0.25);
  --gc-spacer:      #f8fafc;
  --gc-spacer-br:   #94a3b8;
  --gc-tooltip-bg:  #1e3a5f;
  --gc-tooltip-br:  #3b82f6;
  --gc-tooltip-text: #e2e8f0;
}

[data-theme="dracula"] {
  --gc-bg:          #282a36;
  --gc-text:        #f8f8f2;
  --gc-header:      #21222c;
  --gc-header-text: #f8f8f2;
  --gc-month:       #44475a;
  --gc-month-text:  #f8f8f2;
  --gc-border:      #44475a;
  --gc-wrap-br:     #6272a4;
  --gc-muted:       #6272a4;
  --gc-wknd-h:      #1e1f29;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #2a1f00;
  --gc-hol-c:       rgba(255,184,108,0.08);
  --gc-hol-br:      rgba(255,184,108,0.30);
  --gc-spacer:      #191a21;
  --gc-spacer-br:   #44475a;
  --gc-tooltip-bg:  #191a21;
  --gc-tooltip-br:  #bd93f9;
}

[data-theme="catppuccin"] {
  --gc-bg:          #1e1e2e;
  --gc-text:        #cdd6f4;
  --gc-header:      #181825;
  --gc-header-text: #cdd6f4;
  --gc-month:       #313244;
  --gc-month-text:  #cdd6f4;
  --gc-border:      #313244;
  --gc-wrap-br:     #585b70;
  --gc-muted:       #6c7086;
  --gc-wknd-h:      #13131e;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #1e1925;
  --gc-hol-c:       rgba(249,226,175,0.06);
  --gc-hol-br:      rgba(249,226,175,0.25);
  --gc-spacer:      #11111b;
  --gc-spacer-br:   #45475a;
  --gc-tooltip-bg:  #11111b;
  --gc-tooltip-br:  #cba6f7;
}

[data-theme="nord"] {
  --gc-bg:          #2E3440;
  --gc-text:        #D8DEE9;
  --gc-header:      #3B4252;
  --gc-header-text: #D8DEE9;
  --gc-month:       #5E81AC;
  --gc-month-text:  #ECEFF4;
  --gc-border:      #434C5E;
  --gc-wrap-br:     #4C566A;
  --gc-muted:       #7B88A1;
  --gc-wknd-h:      #262C38;
  --gc-wknd-c:      rgba(0,0,0,0.35);
  --gc-hol-h:       #2b2d1e;
  --gc-hol-c:       rgba(235,203,139,0.08);
  --gc-hol-br:      rgba(235,203,139,0.30);
  --gc-spacer:      #242932;
  --gc-spacer-br:   #434C5E;
  --gc-tooltip-bg:  #242932;
  --gc-tooltip-br:  #88C0D0;
}

[data-theme="solarized-dark"] {
  --gc-bg:          #002b36;
  --gc-text:        #839496;
  --gc-header:      #073642;
  --gc-header-text: #93a1a1;
  --gc-month:       #268bd2;
  --gc-month-text:  #fdf6e3;
  --gc-border:      #0a4252;
  --gc-wrap-br:     #586e75;
  --gc-muted:       #586e75;
  --gc-wknd-h:      #001f27;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #1a1200;
  --gc-hol-c:       rgba(181,137,0,0.10);
  --gc-hol-br:      rgba(181,137,0,0.35);
  --gc-spacer:      #001a22;
  --gc-spacer-br:   #0a4252;
  --gc-tooltip-bg:  #001a22;
  --gc-tooltip-br:  #268bd2;
}

[data-theme="solarized-light"] {
  --gc-bg:          #fdf6e3;
  --gc-text:        #657b83;
  --gc-header:      #eee8d5;
  --gc-header-text: #657b83;
  --gc-month:       #268bd2;
  --gc-month-text:  #fdf6e3;
  --gc-border:      #dfd9c8;
  --gc-wrap-br:     #c8c2ae;
  --gc-muted:       #93a1a1;
  --gc-wknd-h:      #ddd7c3;
  --gc-wknd-c:      rgba(0,0,0,0.09);
  --gc-hol-h:       #fffae8;
  --gc-hol-c:       rgba(181,137,0,0.08);
  --gc-hol-br:      rgba(181,137,0,0.30);
  --gc-spacer:      #f5eedb;
  --gc-spacer-br:   #c8c2ae;
  --gc-tooltip-bg:  #073642;
  --gc-tooltip-br:  #268bd2;
  --gc-tooltip-text: #eee8d5;
}

[data-theme="gruvbox"] {
  --gc-bg:          #282828;
  --gc-text:        #ebdbb2;
  --gc-header:      #3c3836;
  --gc-header-text: #d5c4a1;
  --gc-month:       #458588;
  --gc-month-text:  #ebdbb2;
  --gc-border:      #504945;
  --gc-wrap-br:     #665c54;
  --gc-muted:       #928374;
  --gc-wknd-h:      #1d2021;
  --gc-wknd-c:      rgba(0,0,0,0.40);
  --gc-hol-h:       #2a1d00;
  --gc-hol-c:       rgba(215,153,33,0.10);
  --gc-hol-br:      rgba(215,153,33,0.35);
  --gc-spacer:      #1d2021;
  --gc-spacer-br:   #504945;
  --gc-tooltip-bg:  #1d2021;
  --gc-tooltip-br:  #d79921;
}

[data-theme="one-dark"] {
  --gc-bg:          #282c34;
  --gc-text:        #abb2bf;
  --gc-header:      #21252b;
  --gc-header-text: #abb2bf;
  --gc-month:       #3d5a80;
  --gc-month-text:  #e5e9f0;
  --gc-border:      #3e4452;
  --gc-wrap-br:     #4b5263;
  --gc-muted:       #5c6370;
  --gc-wknd-h:      #1e2127;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #2a2000;
  --gc-hol-c:       rgba(229,192,123,0.08);
  --gc-hol-br:      rgba(229,192,123,0.30);
  --gc-spacer:      #1e2127;
  --gc-spacer-br:   #3e4452;
  --gc-tooltip-bg:  #1e2127;
  --gc-tooltip-br:  #61afef;
}

[data-theme="monokai"] {
  --gc-bg:          #272822;
  --gc-text:        #f8f8f2;
  --gc-header:      #1e1f1c;
  --gc-header-text: #f8f8f2;
  --gc-month:       #75715e;
  --gc-month-text:  #f8f8f2;
  --gc-border:      #3b3a32;
  --gc-wrap-br:     #49483e;
  --gc-muted:       #75715e;
  --gc-wknd-h:      #1a1a16;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #2a2400;
  --gc-hol-c:       rgba(230,219,116,0.08);
  --gc-hol-br:      rgba(230,219,116,0.30);
  --gc-spacer:      #1a1a16;
  --gc-spacer-br:   #3b3a32;
  --gc-tooltip-bg:  #1a1a16;
  --gc-tooltip-br:  #a6e22e;
}

[data-theme="github"] {
  --gc-bg:          #ffffff;
  --gc-text:        #24292f;
  --gc-header:      #f6f8fa;
  --gc-header-text: #24292f;
  --gc-month:       #0969da;
  --gc-month-text:  #ffffff;
  --gc-border:      #d0d7de;
  --gc-wrap-br:     #afb8c1;
  --gc-muted:       #57606a;
  --gc-wknd-h:      #d8dde3;
  --gc-wknd-c:      rgba(0,0,0,0.09);
  --gc-hol-h:       #fffbeb;
  --gc-hol-c:       rgba(154,114,0,0.08);
  --gc-hol-br:      rgba(154,114,0,0.25);
  --gc-spacer:      #f6f8fa;
  --gc-spacer-br:   #d0d7de;
  --gc-tooltip-bg:  #24292f;
  --gc-tooltip-br:  #0969da;
  --gc-tooltip-text: #e6edf3;
}

[data-theme="ayu-light"] {
  --gc-bg:          #fafafa;
  --gc-text:        #5c6166;
  --gc-header:      #f0f0f0;
  --gc-header-text: #5c6166;
  --gc-month:       #399ee6;
  --gc-month-text:  #ffffff;
  --gc-border:      #e6e1cf;
  --gc-wrap-br:     #c8c4b7;
  --gc-muted:       #8a9199;
  --gc-wknd-h:      #dcd8cc;
  --gc-wknd-c:      rgba(0,0,0,0.09);
  --gc-hol-h:       #fffaeb;
  --gc-hol-c:       rgba(163,127,79,0.08);
  --gc-hol-br:      rgba(163,127,79,0.25);
  --gc-spacer:      #f0ece0;
  --gc-spacer-br:   #c8c4b7;
  --gc-tooltip-bg:  #1f2430;
  --gc-tooltip-br:  #399ee6;
  --gc-tooltip-text: #e6e1cf;
}

[data-theme="bland"] {
  --gc-bg:          #1c1c1c;
  --gc-text:        #999999;
  --gc-header:      #242424;
  --gc-header-text: #aaaaaa;
  --gc-month:       #2d2d2d;
  --gc-month-text:  #888888;
  --gc-border:      #333333;
  --gc-wrap-br:     #444444;
  --gc-muted:       #666666;
  --gc-wknd-h:      #181818;
  --gc-wknd-c:      rgba(0,0,0,0.38);
  --gc-hol-h:       #202018;
  --gc-hol-c:       rgba(160,140,100,0.06);
  --gc-hol-br:      rgba(160,140,100,0.20);
  --gc-spacer:      #141414;
  --gc-spacer-br:   #333333;
  --gc-tooltip-bg:  #141414;
  --gc-tooltip-br:  #555555;
}

[data-theme="vs-light"] {
  --gc-bg:          #ffffff;
  --gc-text:        #1e1e1e;
  --gc-header:      #f3f3f3;
  --gc-header-text: #1e1e1e;
  --gc-month:       #0078d4;
  --gc-month-text:  #ffffff;
  --gc-border:      #e5e5e5;
  --gc-wrap-br:     #c6c6c6;
  --gc-muted:       #616161;
  --gc-wknd-h:      #dcdcdc;
  --gc-wknd-c:      rgba(0,0,0,0.09);
  --gc-hol-h:       #fffbeb;
  --gc-hol-c:       rgba(190,145,0,0.08);
  --gc-hol-br:      rgba(190,145,0,0.25);
  --gc-spacer:      #f3f3f3;
  --gc-spacer-br:   #c6c6c6;
  --gc-tooltip-bg:  #1e1e1e;
  --gc-tooltip-br:  #0078d4;
  --gc-tooltip-text: #e8e8e8;
}

/* ── Gantt Calendar ──────────────────────────────────────────────────────── */
.gantt-outer {
  position: relative;
  margin: 0 10px 10px;
}

#gantt-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 146px);
  border: 1px solid var(--gc-wrap-br);
  border-radius: 6px;
  background: var(--gc-bg);
  position: relative;
  isolation: isolate;
  user-select: none;
}

.day-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 5px;
  height: 72px;
  background: rgba(59, 130, 246, 0.25);
  border: none;
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  overflow: hidden;
  padding: 0;
  transition: width 0.18s ease, background 0.18s ease, color 0.15s ease;
}

.day-scroll-btn.near,
.day-scroll-btn:hover {
  width: 26px;
  background: rgba(29, 78, 216, 0.82);
  color: #fff;
}

.day-scroll-left  { left: 160px; border-radius: 0 6px 6px 0; }
.day-scroll-right { right: 0;    border-radius: 6px 0 0 6px; }

#gantt-table {
  border-collapse: collapse;
  min-width: 100%;
  table-layout: fixed;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
#gantt-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gc-header);
  color: var(--gc-header-text);
  border: 1px solid var(--gc-border);
  box-shadow: 0 1px 0 var(--gc-border);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 2px;
  white-space: nowrap;
  min-width: 36px;
  line-height: 1.2;
}

#gantt-table thead th.month-header {
  background: var(--gc-month);
  color: var(--gc-month-text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: default;
}

.day-num {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.day-dow {
  font-size: 0.60rem;
  font-weight: 400;
  opacity: 0.70;
  line-height: 1.2;
}

#gantt-table thead th.col-weekend {
  background: var(--gc-wknd-h);
  color: var(--gc-muted);
}

#gantt-table thead th.col-week-start {
  border-left: 2px solid rgba(100, 116, 139, 0.45);
}

#gantt-table thead th.col-holiday {
  background: var(--gc-hol-h);
  color: #f59e0b;
}

#gantt-table thead th.col-today {
  background: linear-gradient(rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.12)), var(--gc-header);
  border-left: 3px solid #dc2626;
  color: #dc2626 !important;
}

#gantt-table thead th.month-boundary,
#gantt-table thead th.col-month-start {
  border-left: 3px solid var(--gc-muted);
}


#gantt-table thead th:not(.month-header):not(.gantt-row-label) {
  cursor: default;
}

/* ── Row labels ──────────────────────────────────────────────────────────── */
.gantt-row-label {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--gc-bg);
  color: var(--gc-text);
  border: 1px solid var(--gc-border);
  border-right: 3px solid var(--gc-wrap-br);
  min-width: 160px;
  max-width: 160px;
  width: 160px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.gantt-row-label .color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Body cells ──────────────────────────────────────────────────────────── */
.gantt-cell {
  border-right: 1px solid var(--gc-border);
  border-bottom: 1px solid var(--gc-border);
  height: 42px;
  min-width: 36px;
  position: relative;
  cursor: crosshair;
}

[data-mode="vessel"] .gantt-cell {
  height: 86px;
}

.gantt-cell.weekend {
  background: var(--gc-wknd-c);
}

.gantt-cell.week-start {
  border-left: 2px solid rgba(100, 116, 139, 0.35);
}

.gantt-cell.holiday {
  background: var(--gc-hol-c);
  border-right-color: var(--gc-hol-br);
}

.gantt-cell.weekend.holiday {
  background: var(--gc-hol-c);
  filter: brightness(1.3);
}

.gantt-cell.today {
  background: linear-gradient(rgba(220, 38, 38, 0.07), rgba(220, 38, 38, 0.07)), var(--gc-bg);
}

/* Continuous current-date marker, drawn as a single overlay (see overlayTodayLine)
   so it doesn't break across spacer rows the way a per-cell border does. */
.today-line {
  position: absolute;
  width: 3px;
  background: #dc2626;
  pointer-events: none;
  z-index: 4;
}

.gantt-cell.drag-over {
  background: rgba(59, 130, 246, 0.2);
}

.gantt-cell.conflict-tint::before,
.gantt-cell.conflict-tint::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  background: #dc2626;
  pointer-events: none;
}
.gantt-cell.conflict-tint::before {
  bottom: 0;
  height: 6px;
}
.gantt-cell.conflict-tint::after {
  top: 0;
  height: 3px;
}

/* ── Day activity stripe ─────────────────────────────────────────────────── */
.day-activity-stripe {
  position: absolute;
  height: 8px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 7;
  border-top: 1px solid rgba(0, 0, 0, 0.6);
}

/* ── Assignment blocks ───────────────────────────────────────────────────── */
.gantt-block {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: filter 0.12s, opacity 0.12s;
}

.gantt-block:hover {
  filter: brightness(1.15);
  z-index: 6;
}

.gantt-block.block-conflict-highlight {
  outline: 2px solid #f97316;
  outline-offset: -2px;
  z-index: 6;
  filter: brightness(1.15);
}

.gantt-block.dragging,
.maintenance-block.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.gantt-block .block-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vessel-mode blocks — column layout with crew names */
.gantt-block.vessel-block {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  white-space: normal;
  padding: 5px 7px;
  overflow: hidden;
}

.block-title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.block-crew-name {
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Move-drag ghost block */
.gantt-move-ghost {
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9;
  border: 2px dashed rgba(255,255,255,0.7);
  opacity: 0.65;
}

/* ── Resize handles ──────────────────────────────────────────────────────── */
.gantt-resize-handle {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  z-index: 7;
  cursor: ew-resize;
  border-radius: 4px;
  background: transparent;
  transition: background 0.1s;
}

.gantt-resize-handle:hover,
.gantt-resize-handle:active {
  background: rgba(255, 255, 255, 0.28);
}

.gantt-resize-left  { left: 0; }
.gantt-resize-right { right: 0; }

/* ── Row drag handle ─────────────────────────────────────────────────────── */
.row-drag-handle {
  opacity: 0.25;
  margin-right: 5px;
  font-size: 0.9rem;
  line-height: 1;
  transition: opacity 0.1s;
  user-select: none;
}

.row-draggable:hover .row-drag-handle {
  opacity: 0.7;
}

.row-draggable { cursor: grab; }
.row-draggable:active { cursor: grabbing; }

/* ── Leave blocks ────────────────────────────────────────────────────────── */
.leave-block {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: filter 0.12s;
}

.leave-block:hover {
  filter: brightness(1.2);
  z-index: 7;
}

/* Drag selection overlay */
.drag-selection {
  position: absolute;
  background: rgba(59,130,246,0.35);
  border: 2px solid #3b82f6;
  border-radius: 4px;
  pointer-events: none;
  z-index: 8;
}

.drag-selection.leave-selection {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
}

/* ── Admin tables ────────────────────────────────────────────────────────── */
.color-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  vertical-align: middle;
}

/* ── Color palette picker ────────────────────────────────────────────────── */
.color-swatch-picker { padding: 4px 0; }

.palette-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
  vertical-align: middle;
}

.palette-swatch:hover {
  transform: scale(1.18);
  border-color: rgba(255,255,255,0.5);
}

.palette-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
  transform: scale(1.12);
}

/* ── Spacer rows ─────────────────────────────────────────────────────────── */
.gantt-spacer-row .gantt-cell {
  height: 18px !important;
  cursor: default;
  background: var(--gc-spacer);
  border-top: 2px solid var(--gc-spacer-br);
  border-bottom: 2px solid var(--gc-spacer-br);
}

.gantt-spacer-row .gantt-cell.weekend {
  background: var(--gc-wknd-c);
}

.gantt-spacer-row .gantt-cell.week-start {
  border-left: 2px solid rgba(100, 116, 139, 0.35);
}

.gantt-spacer-row .gantt-cell.holiday {
  background: var(--gc-hol-c);
  border-right-color: var(--gc-hol-br);
}

.gantt-spacer-row .gantt-cell.weekend.holiday {
  background: var(--gc-hol-c);
  filter: brightness(1.3);
}

.gantt-spacer-row .gantt-row-label {
  height: 18px !important;
  padding: 0 6px;
  background: var(--gc-spacer);
  border-top: 2px solid var(--gc-spacer-br);
  border-bottom: 2px solid var(--gc-spacer-br);
}

.gantt-spacer-row .gantt-row-label .spacer-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

/* ── Maintenance blocks ──────────────────────────────────────────────────── */
.maintenance-block {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  cursor: grab;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: filter 0.12s;
  background: repeating-linear-gradient(
    -45deg,
    rgba(107,114,128,0.65) 0px, rgba(107,114,128,0.65) 5px,
    rgba(107,114,128,0.18) 5px, rgba(107,114,128,0.18) 12px
  );
  border: 1px solid rgba(107,114,128,0.75);
  color: var(--gc-text);
}

.maintenance-block:hover {
  filter: brightness(1.25);
  z-index: 7;
}

.drag-selection.maintenance-selection {
  background: rgba(107,114,128,0.3);
  border-color: #6b7280;
}

/* ── Note block ──────────────────────────────────────────────────────────── */
.note-block {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: filter 0.12s;
}

.note-block:hover {
  filter: brightness(1.15);
  z-index: 7;
}

.drag-selection.note-selection {
  background: rgba(8,145,178,0.2);
  border-color: #0891b2;
}

/* toolbar note button active state */
[data-drag-mode="note"].active {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #fff !important;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
.gantt-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--gc-tooltip-bg);
  border: 1px solid var(--gc-tooltip-br);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  max-width: 280px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  line-height: 1.5;
  color: var(--gc-tooltip-text);
}

.gantt-tooltip .text-muted {
  color: var(--gc-tooltip-text) !important;
  opacity: 0.6;
}

/* ── Day log button (hover-reveal on vessel blocks) ─────────────────────── */
.day-log-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: rgba(0,0,0,0.30);
  color: #fff;
  border-radius: 3px;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
  z-index: 8;
  line-height: 1;
}

.gantt-block:hover .day-log-btn { opacity: 0.75; }
.day-log-btn:hover               { opacity: 1 !important; background: rgba(0,0,0,0.55); }

/* Incomplete journal: always visible, red */
.gantt-block .day-log-btn.day-log-btn--incomplete {
  opacity: 0.9;
  background: rgba(220, 38, 38, 0.80);
}
.day-log-btn.day-log-btn--incomplete:hover {
  opacity: 1 !important;
  background: rgba(220, 38, 38, 1) !important;
}

/* ── Day log modal rows ──────────────────────────────────────────────────── */
.day-log-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  border-bottom: 2px solid var(--gc-border);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gc-muted);
  position: sticky;
  top: 0;
  background: var(--gc-bg);
  z-index: 1;
}

.day-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gc-border);
}

.day-log-row:last-child { border-bottom: none; }

.day-log-row.is-weekend  { background: var(--gc-wknd-c); }
.day-log-row.is-week-start { border-top: 2px solid rgba(100, 116, 139, 0.35); }

/* Current date — matches the red "today" marker used on the calendar. */
.day-log-row.is-today {
  background: linear-gradient(rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.12)), var(--gc-bg);
  border-left: 3px solid #dc2626;
  padding-left: 13px; /* 16px - 3px border so content stays aligned */
}
.day-log-row.is-today .day-log-date {
  color: #dc2626;
  font-weight: 600;
}

.day-log-date {
  min-width: 90px;
  font-size: 0.9rem;
  color: var(--gc-text);
  flex-shrink: 0;
}

.day-log-date.muted { color: var(--gc-muted); }

.day-act-btn {
  font-size: 0.8rem;
  padding: 3px 9px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.day-notes-input {
  flex: 1;
  min-width: 120px;
  font-size: 0.73rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--gc-border);
  background: transparent;
  color: var(--gc-text);
}

.day-notes-input:focus {
  outline: none;
  border-color: var(--gc-muted);
}

.fp-hint {
  flex-shrink: 0;
  min-width: 140px;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--fp-color, var(--gc-border));
  color: var(--fp-color, var(--gc-muted));
  white-space: nowrap;
  opacity: 0.85;
}

/* ── Right-click context menu ────────────────────────────────────────────── */
.gantt-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--gc-bg);
  border: 1px solid var(--gc-wrap-br);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  min-width: 148px;
  padding: 4px 0;
  user-select: none;
}

.gantt-ctx-item {
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--gc-text);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.gantt-ctx-item:hover { background: var(--gc-month); color: var(--gc-month-text); }
.gantt-ctx-item.gantt-ctx-danger { color: #ef4444; }
.gantt-ctx-item.gantt-ctx-danger:hover { background: #7f1d1d; color: #fca5a5; }
.gantt-ctx-sep { border-top: 1px solid var(--gc-border); margin: 3px 0; }

/* ── Theme card picker ───────────────────────────────────────────────────── */
.theme-card {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.theme-card.active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

.theme-preview {
  height: 90px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
}

.tp-month { height: 18px; border-radius: 3px; }
.tp-header { height: 12px; border-radius: 2px; opacity: 0.7; }
.tp-rows { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tp-row { flex: 1; border-radius: 2px; opacity: 0.5; }
.tp-block { height: 100%; border-radius: 2px; width: 60%; }