/* Brand tokens and base */
:root {
  --sidebar-w: 260px;
  --topbar-h: 56px;
  --brand-primary: #006B92;
  --brand-accent: #0D2850;
  --brand-secondary1: #4C95B0;
  --brand-secondary2: #CCE1E9;
  --font-body: 'Trebuchet MS', Arial, sans-serif;
  --font-heading: 'Trebuchet MS', Arial, sans-serif;
  --tl-label-w: 220px;
  --tl-gutter: 32px; /* left inner gutter inside scrollable canvas */
}
body { margin: 0; font-family: var(--font-body); color: #0f172a; background: #ffffff; }
[hidden]{ display: none !important; }
h1,h2,h3 { font-family: var(--font-heading); }

/* Shell layout */
.topbar { grid-area: topbar; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e5e7eb; background: var(--brand-accent); color: #ffffff; }
.brand { display:flex; align-items:center; gap: 8px; }
.brand-logo { height: 28px; width:auto; display:block; }
.sidebar { grid-area: sidebar; width: var(--sidebar-w); min-width: var(--sidebar-w); border-right: 1px solid #e5e7eb; background: var(--brand-secondary2); padding: 16px; }
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) calc(100vh - var(--topbar-h)); grid-template-areas: "topbar topbar" "sidebar content"; }
.content { grid-area: content; padding: 24px; overflow: auto; }
.breadcrumbs { font-size: 12px; color: #374151; margin-bottom: 12px; }

/* Nav */
.nav a { display: block; padding: 10px 12px; color: #0D2850; text-decoration: none; border-radius: 6px; margin-bottom: 6px; }
.nav a[aria-current="page"] { background: var(--brand-primary); color: #ffffff; font-weight: 600; }

/* Controls */
.btn { padding: 8px 12px; border: 1px solid var(--brand-secondary1); background: #fff; color: #0D2850; border-radius: 6px; cursor: pointer; }
.btn.primary { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
input, select, textarea { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: var(--font-body); }

/* Projects detail view */
.proj-detail { padding: 16px; }
.proj-title { font-size: 1.5rem; color: #0D2850; margin: 0 0 4px 0; }
.proj-meta { color: #4C95B0; font-size: 0.95rem; }
.proj-summary { display:grid; grid-template-columns: repeat(8, minmax(80px, auto)); gap: 8px; align-items:center; padding: 8px; border: 1px solid #e5e7eb; border-radius: 6px; margin: 12px 0; }
.design-ref { padding: 12px; border: 1px dashed var(--brand-secondary1); background: #fff; }

/* Project indicators row */
.proj-indicators { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; margin: 16px 0; }
.proj-indicator { display: flex; flex-direction: column; gap: 4px; }
.proj-indicator-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.proj-indicator-value { font-size: 1.25rem; font-weight: 600; color: #0D2850; }
.proj-indicator-progress { display: flex; align-items: center; gap: 8px; }
.progress-bar { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; flex: 1; min-width: 80px; }
.progress-fill { height: 100%; background: var(--brand-primary); transition: width 0.3s ease; }

/* Hierarchy row color coding */
.row-project { background-color: #0D2850; color: #ffffff; padding: 8px; border-radius: 4px; font-weight: 600; }
.row-milestone { background-color: #006B92; color: #ffffff; padding: 8px; border-radius: 4px; font-weight: 500; }
.row-deliverable { background-color: #4C95B0; color: #ffffff; padding: 8px; border-radius: 4px; }
.row-task { background-color: #ffffff; color: #0D2850; padding: 8px; border: 1px solid #e5e7eb; border-radius: 4px; }

/* Filters banner card */
.filter-card { display:grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; margin-bottom: 12px; }

/* Build grid and rows */
.proj-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 8px; align-items: start; }
.proj-grid.header { font-weight: 600; color: #0D2850; padding: 6px 0; border-bottom: 1px solid #e5e7eb; margin-top: 8px; }
.proj-row { display: contents; }

/* Utilities */
.qa-clip-img { max-width:100%; border:1px solid #e5e7eb; border-radius:4px; }
.inline-flex-center { display:flex; gap: 8px; align-items: center; }
.mb-12 { margin-bottom: 12px; }
.filters-bar { margin-bottom: 12px; }
.kpi-row { display:flex; gap:12px; }
.mt-16 { margin-top: 16px; }
.my-8 { margin: 8px 0; }
.w-64 { width: 64px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-span-full { grid-column: 1 / -1; }
.textarea-full { width: 100%; min-height: 96px; max-height: 50vh; resize: vertical; }
.actions-right { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.actions-left { display:flex; gap:8px; margin:12px 0; }
.ms-block { padding-left:8px; border-left:2px solid var(--brand-secondary1); }
.deliv-list { margin-left:16px; }
.indent-1 { margin-left: 16px; }
.indent-2 { margin-left: 32px; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.modal-dialog { background:#fff; padding:16px; border-radius:8px; width:720px; max-width:95vw; }
.modal-header { display:flex; align-items:center; justify-content:space-between; }
.modal-title { margin-top:0; }

/* Access matrix */
.funcs-row { display:flex; gap:8px; flex-wrap:wrap; }
.roles-list { margin-top:8px; }
.grid-roles { display:grid; grid-template-columns: repeat(6, 1fr); gap:4px; margin-top:8px; }

/* Gantt */
.gantt-canvas { height:240px; border:1px dashed var(--brand-secondary1); display:flex; align-items:center; justify-content:center; }

/* Timelines */
:root {
  --tl-proj: #0D2850; /* Project */
  --tl-ms: #006B92;   /* Milestone */
  --tl-dl: #4C95B0;   /* Deliverable */
  --tl-task: #CCE1E9; /* Task (light) */
}
.timeline-canvas { border:1px solid #e5e7eb; background:#fff; min-height: 320px; position: relative; z-index: 110; margin-left: var(--tl-gutter); }
.timeline-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
 .flex-spacer { flex: 1 1 auto; }

/* Two pane grid: labels frozen left, scrollable right */
.tl-grid { display:grid; grid-template-columns: var(--tl-label-w) 1fr; gap:0; align-items:start; overflow:hidden; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.tl-labels { position: sticky; left:0; top:0; background:#fff; border-right:1px solid #e5e7eb; z-index:1; pointer-events: none; }
.tl-label-header { position: sticky; top:0; background:#f8fafc; border-bottom:1px solid #e5e7eb; font-weight:600; padding:6px 8px; z-index: 3; }
.tl-scroll { overflow:auto; max-width: 100%; position: relative; z-index: 100; padding-left: 12px; background: #fff; }
.tl-axis { font-size: 12px; color:#334155; padding: 4px 0; border-bottom:1px solid #e5e7eb; position: relative; height: 22px; z-index: 120; }
.tl-axis-spacer { height: 22px; border-bottom:1px solid #e5e7eb; }
.tl-header-spacer { height: 28px; }
.tl-lanes { position: relative; padding: 8px 0; z-index: 1; }
.tl-lanes-spacer { height: 8px; }
.tl-lane { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed #e5e7eb; position: relative; }
.tl-bar { height: 18px; border-radius: 4px; position: absolute; cursor: ew-resize; z-index: 150; }
.tl-label { position: absolute; top: -18px; font-size: 11px; color: #0D2850; background: #fff; border: 1px solid #e5e7eb; border-radius: 3px; padding: 1px 4px; white-space: nowrap; z-index: 160; pointer-events: none; }
.tl-bar.proj { background: var(--tl-proj); }
.tl-bar.ms { background: var(--tl-ms); }
.tl-bar.dl { background: var(--tl-dl); }
.tl-bar.task { background: var(--tl-task); border:1px solid #0D2850; }
.tl-handle { width: 6px; background:#111827; opacity:0.6; height: 100%; position:absolute; top:0; cursor:col-resize; }
.tl-handle.start { left: -3px; }
.tl-handle.end { right: -3px; }
/* Axis ticks */
.tl-tick { position:absolute; top:0; bottom:0; border-left:1px solid #e5e7eb; }
.tl-tick-label { position:absolute; top:0; transform: translateX(-50%); background:#fff; padding:0 2px; }

/* Timelines TEST layout */
.tltest-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.tltest-toolbar .btn.selected{ border:2px solid #0D2850; }
.tltest-axes { margin-bottom: 4px; }
.tltest-axes-scroll { overflow:auto; }
.tltest-grid { display:grid; grid-template-columns: var(--tl-label-w) 6px 160px 6px 1fr; gap:0; border:1px solid #e5e7eb; border-radius:8px; background:#fff; overflow-x:auto; overflow-y:hidden; }
.tltest-left { position:sticky; left:0; top:0; border-right:1px solid #e5e7eb; background:#fff; pointer-events:none; }
.tltest-resizer { cursor:col-resize; background: #e5e7eb; }
.tltest-date-resizer { 
  position: absolute; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  width: 6px; 
  background: #cbd5e1; 
  cursor: col-resize; 
  z-index: 100;
  transition: background 0.2s;
}
.tltest-date-resizer:hover { background: var(--brand-primary); }
.tltest-progress { background:#fff; border-right:1px solid #e5e7eb; min-width: 120px; }
.tltest-right { min-width: 240px; position: relative; }
.tltest-scroll { overflow:auto; position:relative; }
.tltest-axis { height:24px; border-bottom:1px solid #e5e7eb; font-size:11px; color:#334155; position:relative; cursor:pointer; }
.tltest-axis .tl-tick-label{ white-space:nowrap; background:#fff; }
.tltest-axis.collapsed { height:16px; }
.tltest-axis.collapsed .tl-tick-label{ display:none; }
.tltest-spacer { height:24px; border-bottom:1px solid #e5e7eb; }
.tltest-canvas { position:relative; min-height:280px; border-top:1px solid #e5e7eb; }
.tltest-row { display:grid; grid-template-columns: 1fr 1fr; }

/* Progress cell */
.tltest-progress-row { padding:6px 8px; border-bottom:1px dashed #e5e7eb; font-size:12px; }

/* Bars + overlay */
.tltest-bar { position:absolute; height:18px; border-radius:4px; z-index:2; }
.tltest-bar .overlay { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,0.3); border-radius:4px 0 0 4px; z-index:3; }

/* Labels */
.tltest-label-row { padding:6px 8px; border-bottom:1px dashed #e5e7eb; white-space:normal; word-break:break-word; }
.tltest-label-row.lvl-0 { font-weight:600; padding-left: 8px; }
.tltest-label-row.lvl-1 { padding-left: 24px; }
.tltest-label-row.lvl-2 { padding-left: 40px; }
.tltest-label-row.lvl-3 { padding-left: 56px; font-size:12px; }
/* Label rows with indentation to reflect hierarchy */
.tl-label-row { padding:6px 8px; border-bottom:1px dashed #e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-label-row.lvl-0 { font-weight:600; padding-left: 8px; }
.tl-label-row.lvl-1 { padding-left: 24px; }
.tl-label-row.lvl-2 { padding-left: 40px; }
.tl-label-row.lvl-3 { padding-left: 56px; }
/* Ensure timeline container does not overlap sidebar: add inner margin */
section[data-testid="TID-TL-PAGE"] .tl-grid { margin-left: 8px; margin-right: 8px; }
/* Optional: visibly show the gutter during debugging */
/* .timeline-canvas::before { content:''; position:absolute; left:calc(-1 * var(--tl-gutter)); top:0; bottom:0; width:var(--tl-gutter); background:transparent; } */

/* Unified Timeline Table */
.timeline-table-wrapper {
  margin-top: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.timeline-table-scroll {
  overflow: auto;
  max-height: calc(100vh - 300px);
}

.timeline-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 100%;
}

/* Header cell for merged area (rows 1-5, cols 1-2) */
.timeline-table th.merged-header {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  color: #0D2850;
}

/* First column - Project Descriptors */
.timeline-table th.col-descriptor,
.timeline-table td.col-descriptor {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  position: sticky;
  left: 0;
  z-index: 10;
  resize: horizontal;
  overflow: hidden;
}

/* Second column - Project Progress */
.timeline-table th.col-progress,
.timeline-table td.col-progress {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: center;
  position: sticky;
  left: 220px;
  z-index: 10;
  resize: horizontal;
  overflow: hidden;
}

/* Timeline date header cells (rows 1-5, col 3+) */
.timeline-table th.timeline-date-cell {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  min-width: 40px;
  white-space: nowrap;
  resize: horizontal;
  overflow: visible; /* Changed from hidden to allow resize handle visibility */
  position: relative;
}

/* Hover effect for all date cells to indicate resizability */
.timeline-table th.timeline-date-cell:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 0 8px rgba(255, 193, 7, 0.3);
}

/* Specific styling for each timeline level */
.timeline-table th.timeline-year {
  background: #0D2850;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  border: 2px solid #0D2850;
}

.timeline-table th.timeline-quarter {
  background: #006B92;
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  border: 1px solid #006B92;
}

.timeline-table th.timeline-month {
  background: #4C95B0;
  color: #ffffff;
  font-weight: 500;
  font-size: 11px;
  border: 1px solid #4C95B0;
}

.timeline-table th.timeline-week {
  background: #CCE1E9;
  color: #0D2850;
  font-weight: 500;
  font-size: 10px;
  border: 1px solid #4C95B0;
}

.timeline-table th.timeline-day {
  background: #f8fafc;
  color: #334155;
  font-weight: 400;
  font-size: 10px;
  border: 1px solid #e5e7eb;
}

/* Timeline bar cells (row 6+, col 3+) */
.timeline-table td.timeline-bar-cell {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  padding: 0;
  min-width: 40px;
  position: relative;
  height: 32px;
  resize: horizontal;
  overflow: visible;
}

/* Project item rows with hierarchy indentation - ENHANCED VISUAL HIERARCHY */
.timeline-table td.col-descriptor.lvl-0 {
  font-weight: 700;
  padding-left: 12px;
  background: linear-gradient(135deg, #0D2850, #1a4068);
  color: #ffffff;
  font-size: 14px;
  border-left: 5px solid #ffc107;
}

.timeline-table td.col-descriptor.lvl-1 {
  padding-left: 28px;
  background: linear-gradient(135deg, #006B92, #0088b8);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  border-left: 4px solid #4C95B0;
}

.timeline-table td.col-descriptor.lvl-2 {
  padding-left: 44px;
  background: linear-gradient(135deg, #4C95B0, #6ab3cc);
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  border-left: 3px solid #CCE1E9;
}

.timeline-table td.col-descriptor.lvl-3 {
  padding-left: 60px;
  background: #f8fafc;
  color: #0D2850;
  border-left: 4px solid #4C95B0;
  font-weight: 400;
  font-size: 12px;
}
}

/* Timeline slider bars inside cells */
.timeline-slider-bar {
  position: absolute;
  height: 24px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 6px;
  cursor: move;
  z-index: 5;
  min-width: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, transform 0.2s;
}

.timeline-slider-bar:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) scale(1.03);
}

.timeline-slider-bar.proj { background: linear-gradient(135deg, #0D2850, #1a4068); }
.timeline-slider-bar.ms { background: linear-gradient(135deg, #006B92, #0088b8); }
.timeline-slider-bar.dl { background: linear-gradient(135deg, #4C95B0, #6ab3cc); }
.timeline-slider-bar.task { 
  background: linear-gradient(135deg, #CCE1E9, #e0f0f5); 
  border: 2px solid #0D2850; 
}

/* Progress overlay on slider bars */
.timeline-slider-bar .progress-overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}

/* Resize handles for slider bars - HIGHLY VISIBLE with strong visual cues */
.timeline-slider-bar .resize-handle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 16px;
  cursor: col-resize;
  z-index: 10;
  background: linear-gradient(90deg, rgba(0, 107, 146, 0.7), rgba(0, 107, 146, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.timeline-slider-bar .resize-handle:hover {
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.9), rgba(255, 152, 0, 0.9));
  width: 20px;
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.6), 0 0 0 3px rgba(255, 193, 7, 0.3);
  transform: scaleY(1.15);
}

.timeline-slider-bar .resize-handle.left {
  left: -8px;
  border-radius: 8px 0 0 8px;
}

.timeline-slider-bar .resize-handle.right {
  right: -8px;
  border-radius: 0 8px 8px 0;
}

/* Visual indicator on resize handles - grippy dots pattern */
.timeline-slider-bar .resize-handle::after {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  font-weight: bold;
  opacity: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 2px rgba(255,255,255,0.3);
  letter-spacing: -2px;
}

.timeline-slider-bar .resize-handle:hover::after {
  opacity: 1;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 4px rgba(255,193,7,0.8);
}

/* Timeline bar hover effect - ENHANCED */
.timeline-slider-bar.timeline-bar-hover {
  filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 4px 16px rgba(0, 107, 146, 0.5), 0 0 0 2px rgba(255, 193, 7, 0.4);
  transform: translateY(-50%) scale(1.05);
  transition: all 0.2s;
  z-index: 15;
}

/* Column hover effect - highlight entire column with stronger visual feedback */
.timeline-table .column-hover {
  background-color: rgba(255, 193, 7, 0.15) !important;
  transition: background-color 0.15s;
  box-shadow: inset 0 0 0 2px rgba(255, 152, 0, 0.4);
}

/* Date alignment indicator line - MORE VISIBLE */
.timeline-date-alignment {
  animation: pulse-alignment 1.5s ease-in-out infinite;
  background: linear-gradient(180deg, 
    rgba(13, 40, 80, 0.8), 
    rgba(0, 107, 146, 0.8),
    rgba(13, 40, 80, 0.8)
  ) !important;
  width: 3px !important;
  box-shadow: 0 0 12px rgba(0, 107, 146, 0.7), 
              0 0 24px rgba(0, 107, 146, 0.4) !important;
}

@keyframes pulse-alignment {
  0%, 100% { 
    opacity: 0.7; 
    transform: scaleX(1);
  }
  50% { 
    opacity: 1; 
    transform: scaleX(1.3);
  }
}

/* Drag tooltip - shown during drag operations */
.timeline-drag-tooltip {
  white-space: nowrap;
  line-height: 1.4;
  animation: tooltip-appear 0.2s ease-out;
}

@keyframes tooltip-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Column resize handles - MAXIMUM VISIBILITY AND USABILITY */
.column-resize-handle {
  position: absolute;
  right: -16px;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 193, 7, 0.3),
    rgba(255, 152, 0, 0.5),
    rgba(255, 152, 0, 0.7)
  );
  cursor: col-resize;
  z-index: 50;
  transition: all 0.2s;
  border-right: 5px solid #ff9800;
  box-shadow: 2px 0 8px rgba(255, 152, 0, 0.5);
}

.column-resize-handle:hover {
  background: linear-gradient(90deg, 
    rgba(255, 193, 7, 0.5), 
    rgba(255, 152, 0, 0.8),
    rgba(255, 152, 0, 1)
  );
  width: 40px;
  right: -20px;
  border-right: 6px solid #ff6f00;
  box-shadow: 0 0 20px rgba(255, 152, 0, 1), 
              inset 0 0 16px rgba(255, 255, 255, 0.5),
              2px 0 12px rgba(255, 152, 0, 0.8);
}

.column-resize-handle::before {
  content: '⋮⋮';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  opacity: 1;
  transition: all 0.2s;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 
               0 0 8px rgba(255,152,0,1),
               0 0 12px rgba(255,193,7,1);
  letter-spacing: -6px;
}

.column-resize-handle:hover::before {
  opacity: 1;
  color: #ffffff;
  font-size: 32px;
  text-shadow: 0 3px 8px rgba(0,0,0,1),
               0 0 12px rgba(255,152,0,1),
               0 0 20px rgba(255,193,7,1);
  animation: pulse-resize 0.5s ease-in-out infinite;
}

@keyframes pulse-resize {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.15); }
}

.timeline-table th.timeline-date-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: transparent;
  cursor: col-resize;
  z-index: 20;
}

.timeline-table th.timeline-date-cell:hover::after {
  background: rgba(255, 193, 7, 0.4);
  width: 24px;
  border-right: 3px solid rgba(255, 152, 0, 0.7);
}

/* Preview Toggle */
.preview-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
  padding: 4px 8px;
  background: #1e293b;
  border-radius: 4px;
}

.preview-toggle span {
  font-size: 0.75rem;
  color: #94a3b8;
}

.preview-toggle .btn {
  padding: 4px 8px;
  font-size: 0.75rem;
}

/* Admin Section Divider */
.admin-divider {
  margin: 12px 0;
  border-color: #334155;
}

.admin-section-label {
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 4px 0;
  text-transform: uppercase;
}

/* Column Resize Help Banner */
.column-resize-help-banner {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #000;
  padding: 12px 20px;
  margin: 12px 0;
  border-radius: 8px;
  border: 3px solid #ff6f00;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.column-resize-help-banner .icon {
  font-size: 24px;
}

.column-resize-help-banner .title {
  font-size: 16px;
}

.column-resize-help-banner .edge-highlight {
  background: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 2px solid #ff6f00;
}

.column-resize-help-banner .handle-symbol {
  color: #fff;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.column-resize-help-banner .doubleclick-tip {
  margin-left: 8px;
}

/* Sidebar Controls */
.sidebar-controls {
  padding: 12px;
  border-top: 1px solid #334155;
}

.sidebar-controls label {
  display: block;
  margin-bottom: 8px;
}

.sidebar-controls label span {
  font-size: 0.75rem;
  color: #94a3b8;
}

.sidebar-controls select {
  width: 100%;
  margin-top: 4px;
}

.sidebar-controls .btn {
  width: 100%;
  padding: 6px;
  font-size: 0.875rem;
}

/* Health Checker */
.health-config {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.health-config h3 {
  margin: 0;
}

.health-config label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.health-run-btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

.health-report {
  min-height: 200px;
}

.health-ready {
  text-align: center;
  padding: 40px;
  color: #64748b;
}

.health-ready p:first-child {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.health-ready p:last-child {
  font-size: 0.875rem;
}

/* Mobile Preview Mode */
.mobile-preview {
  max-width: 375px;
  margin: 0 auto;
  border-left: 1px solid #334155;
  border-right: 1px solid #334155;
}

.mobile-preview .sidebar {
  width: 100%;
  max-width: 100%;
}

/* Admin-only elements */
[data-admin-only][hidden] {
  display: none !important;
}

/* Textarea sizes */
.textarea-medium {
  min-height: 100px;
}

.textarea-large {
  min-height: 200px;
}

/* Health Checker additional styles */
.health-description {
  color: #94a3b8;
  margin-bottom: 16px;
}

.health-config-card {
  margin-bottom: 16px;
}

.health-strict-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Utility classes for inline style removal */
.section-title {
  margin: 12px 0 8px 0;
  font-size: 1rem;
}

.flex-end {
  display: flex;
  align-items: flex-end;
}

.flex-gap-8 {
  display: flex;
  gap: 8px;
}

.muted-note {
  font-size: 0.875rem;
  color: #64748b;
  margin: 8px 0 0 0;
}

.small-muted {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 4px;
}

.modal-top {
  z-index: 1100;
}

.modal-dialog-medium {
  width: 480px;
}

.w-60 {
  width: 60px;
}

.progress-fill {
  width: 0%;
  transition: width 0.2s ease;
}

.error-text {
  color: #dc2626;
  font-size: 0.875rem;
}

.section-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.timing-header {
  margin: 0 0 12px 0;
  font-size: 1rem;
}

.task-timing-block {
  margin: 12px 0;
}

.task-initial-label {
  font-size: 0.875rem;
  color: #0D2850;
  margin-bottom: 8px;
}

.label-block {
  display: block;
  margin-bottom: 12px;
}

.label-block-simple {
  display: block;
}

.input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.cluster-preload {
  margin-top: 12px;
}

.hidden {
  display: none !important;
}

/* ========================================
   QA Dashboard Styles
   ======================================== */

.qa-primary-action {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.btn.large {
  padding: 12px 24px;
  font-size: 1.125rem;
  font-weight: 600;
}

.btn .icon {
  margin-right: 8px;
}

/* QA Summary Grid */
.qa-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* QA Card Styles */
.qa-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.qa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.qa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.qa-card-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qa-icon {
  font-size: 1.5rem;
}

.qa-metric-large {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.qa-percentage,
.qa-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.qa-label {
  font-size: 0.875rem;
  color: #64748b;
}

.qa-drill-down {
  background: none;
  border: none;
  color: #1d4ed8;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  font-weight: 500;
}

.qa-drill-down:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* Card Variants */
.qa-card-health .qa-percentage {
  color: #10b981;
}

.qa-card-success .qa-number {
  color: #10b981;
}

.qa-card-danger .qa-number {
  color: #ef4444;
}

/* Category Cards Grid */
.qa-section {
  margin-top: 32px;
  margin-bottom: 32px;
}

.qa-section h3 {
  margin-bottom: 16px;
  font-size: 1.25rem;
  font-weight: 600;
}

.qa-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.qa-category-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  transition: border-color 0.2s;
}

.qa-category-card:hover {
  border-color: #1d4ed8;
}

.qa-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.qa-category-icon {
  font-size: 1.25rem;
}

.qa-category-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.qa-category-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.qa-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qa-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.qa-stat-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qa-category-detail {
  background: none;
  border: none;
  color: #1d4ed8;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}

.qa-category-detail:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* Test List Section */
.qa-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.qa-filter-controls {
  display: flex;
  gap: 8px;
}

.qa-filter-controls .btn {
  padding: 6px 12px;
  font-size: 0.875rem;
}

.qa-filter-controls .btn[data-active="true"] {
  background: #1d4ed8;
  color: white;
}

.qa-test-list {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  min-height: 200px;
}

/* Individual Test Item */
.qa-test-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.2s;
}

.qa-test-item:last-child {
  border-bottom: none;
}

.qa-test-item:hover {
  background: #f8fafc;
}

.qa-test-status {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.qa-test-status.pass {
  color: #10b981;
}

.qa-test-status.fail {
  color: #ef4444;
}

.qa-test-content {
  flex: 1;
}

.qa-test-id {
  font-size: 0.75rem;
  color: #64748b;
  font-family: monospace;
  margin-bottom: 4px;
}

.qa-test-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f172a;
}

.qa-test-description {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
}

.qa-test-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 8px;
}

.qa-test-category.code { background: #dbeafe; color: #1e40af; }
.qa-test-category.wiring { background: #fef3c7; color: #92400e; }
.qa-test-category.security { background: #fee2e2; color: #991b1b; }
.qa-test-category.deployment { background: #d1fae5; color: #065f46; }
.qa-test-category.ui { background: #e0e7ff; color: #3730a3; }
.qa-test-category.performance { background: #fce7f3; color: #831843; }
.qa-test-category.runtime { background: #fef3c7; color: #78350f; }
.qa-test-category.accessibility { background: #ddd6fe; color: #5b21b6; }
.qa-test-category.data { background: #cffafe; color: #155e75; }
.qa-test-category.legacy { background: #f3f4f6; color: #374151; }

/* Corrective Actions */
.qa-actions-list {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
}

.qa-action-item {
  padding: 12px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  margin-bottom: 12px;
  border-radius: 4px;
}

.qa-action-item:last-child {
  margin-bottom: 0;
}

.qa-action-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f172a;
}

.qa-action-steps {
  font-size: 0.875rem;
  color: #475569;
  margin-left: 16px;
}

.qa-action-steps li {
  margin-bottom: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .qa-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .qa-categories-grid {
    grid-template-columns: 1fr;
  }
  
  .qa-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Loading State */
.qa-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #64748b;
}

.qa-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #1d4ed8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Timeline help banner */
.timeline-help-banner {
  background: #e8f4f8;
  border-left: 4px solid #0D2850;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.timeline-help-banner strong {
  color: #0D2850;
  display: block;
  margin-bottom: 8px;
}

.timeline-help-banner ul {
  margin: 8px 0 0 20px;
  padding: 0;
  list-style-type: disc;
}

.timeline-help-banner li {
  margin-bottom: 4px;
  color: #334155;
}

.timeline-help-banner li strong {
  display: inline;
  margin: 0;
  color: #0D2850;
}