* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #eef2f7; }

/* ── Bars ── */
.bar {
  position: absolute; height: 36px; top: 8px; border-radius: 4px;
  cursor: move; display: flex; align-items: center; justify-content: center;
  color: white; user-select: none; z-index: 10; overflow: hidden;
  white-space: nowrap; transition: filter 0.15s;
  box-shadow: none;
}
.bar:hover {
  box-shadow: none;
  z-index: 20; filter: brightness(1.1);
}
.bar-shine {
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
  pointer-events: none; border-radius: 4px 4px 0 0;
}
.bar-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,0.18) 0%, transparent 100%);
  pointer-events: none;
}
.resize-r { position:absolute;right:0;top:0;bottom:0;width:7px;cursor:e-resize;background:transparent;border-radius:0 4px 4px 0; }
.resize-l { position:absolute;left:0;top:0;bottom:0;width:7px;cursor:w-resize;background:transparent;border-radius:4px 0 0 4px; }
.bar-text { flex:1;text-align:center;padding:0 10px;pointer-events:none;line-height:1.15; }

/* ── Context menu ── */
.context-menu { position:fixed;background:white;border:1px solid #cbd5e0;border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,0.15);z-index:1000;min-width:170px;padding:4px 0; }
.context-menu-item { padding:8px 16px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:9px; }
.context-menu-item:hover { background:#edf2f7; }
.ctx-sep { border-top:1px solid #e2e8f0;margin:3px 0; }

/* ── Modals ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.48);z-index:500;display:flex;align-items:center;justify-content:center; }
.modal { background:white;border-radius:14px;padding:28px;max-width:560px;width:95%;
  box-shadow:0 24px 64px rgba(0,0,0,0.28);max-height:90vh;overflow-y:auto; }

/* ── Color swatches ── */
.color-swatch { width:24px;height:24px;border-radius:5px;cursor:pointer;border:2px solid #e2e8f0;transition:border-color 0.12s,transform 0.1s; }
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.selected { border-color:#1a365d;box-shadow:0 0 0 1px white inset; }

/* ── Toolbar ── */
.toolbar-btn { padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.15s;border:none;display:inline-flex;align-items:center;gap:5px; }
.toolbar-btn:active { transform:scale(0.97); }

/* ── Table structure ── */
.tbl-scroll { overflow-x:auto;overflow-y:visible; }
.tbl-inner { display:inline-flex;flex-direction:column;min-width:100%; }
.tbl-row { display:flex;align-items:stretch; }
.cell-label { width:200px;flex-shrink:0;position:sticky;left:0;z-index:12;will-change:transform;transform:translateZ(0); }
.cell-rag { width:32px;flex-shrink:0;position:sticky;left:0;z-index:11;will-change:transform;transform:translateZ(0); }
.cell-owner { width:112px;flex-shrink:0;position:sticky;right:0;z-index:12;will-change:transform;transform:translateZ(0); }
.cell-comments { width:160px;flex-shrink:0;position:sticky;right:0;z-index:12;will-change:transform;transform:translateZ(0); }
/* Sticky cell backgrounds — CSS class + !important survive repaint after contenteditable blur */
.row-bg-white .cell-label, .row-bg-white .cell-rag, .row-bg-white .cell-owner, .row-bg-white .cell-comments { background: #ffffff !important; }
.row-bg-light .cell-label, .row-bg-light .cell-rag, .row-bg-light .cell-owner, .row-bg-light .cell-comments { background: #f8fafc !important; }
.cell-timeline { position:relative;flex-shrink:0; }

/* ── Sticky calendar header (Year / Month / Week rows) ──
   Translated vertically by js/sticky.js while scrolling the page;
   stays in-flow so it keeps scrolling horizontally with .tbl-scroll. */
.tbl-header-row { position:relative; z-index:40; will-change:transform; }
.tbl-header-row.is-stuck { box-shadow:0 6px 18px rgba(15,23,42,0.3); }

/* ── Misc ── */
.drag-over { background:#dbeafe !important;outline:2px dashed #3b82f6; }
.row-drag-handle { cursor:grab;padding:0 4px;color:#a0aec0;font-size:16px;flex-shrink:0; }
[contenteditable]:focus { outline:2px solid #63b3ed;outline-offset:1px;border-radius:2px; }
.fmt-btn { padding:3px 7px;border:1px solid #cbd5e0;border-radius:4px;cursor:pointer;font-size:12px;background:white; }
.fmt-btn.active { background:#1e40af;color:white;border-color:#1e40af; }

/* ── Column resizers ── */
.col-resizer {
  position:absolute; top:0; bottom:0; width:6px;
  cursor:col-resize; z-index:50; background:transparent;
  transition:background 0.15s;
}
.col-resizer:hover, .col-resizer.active { background:rgba(252,129,129,0.7); }
.col-resizer-label { right:-3px; }
.col-resizer-owner { left:-3px; }
.col-resizer-timeline-right { right:-3px; }

/* ── Row height resize handle ── */
.row-resize-handle {
  position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
  cursor: row-resize; z-index: 50; background: transparent;
  transition: background 0.15s;
}
.row-resize-handle:hover, .row-resize-handle.active {
  background: rgba(99, 179, 237, 0.55);
}
</style>