/* ============================================
   BOARD
   Kanban board, columns, cards, and indicators
   ============================================ */

.board{
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
  flex:1;
  height:100%;
  overflow-x:auto;
  overflow-y:auto;
  padding-bottom:8px;
}

/* Ensure the board flexes to fill remaining height inside container */
.container .board{
  flex:1;
  height:auto;
  min-height:0;
}

/* Main content ensures board fills properly */
.main-content .board{
  flex:1;
  min-width:0;
}

/* Columns */
.column{
  background:var(--col-bg);
  border-radius:8px;
  padding:12px;
  min-width:240px;
  max-width:320px;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
}

.column-header{
  font-weight:700;
  margin-bottom:8px;
  color:#111;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* WIP Counter */
.wip-counter{
  font-size:11px;
  font-weight:600;
  color:#6b7280;
  background:rgba(0,0,0,0.04);
  padding:2px 8px;
  border-radius:999px;
  margin-left:8px;
  transition: all 0.3s ease;
}

/* WIP Counter at limit - visual warning */
.wip-counter.wip-at-limit{
  background:#fef3c7;
  color:#d97706;
  font-weight:700;
  border:1px solid #fbbf24;
}

.cards{
  flex:1;
  min-height:120px;
  padding:6px;
  overflow:auto;
}

/* Archived column collapsed state */
.archived-column.archived-hidden{
  min-width:40px;
  max-width:40px;
  padding:12px 8px;
  overflow:hidden;
  transition:min-width 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

.archived-column.archived-hidden .column-header{
  writing-mode:vertical-lr;
  text-orientation:mixed;
  white-space:nowrap;
  justify-content:flex-start;
  margin:0;
  height:100%;
  cursor:pointer;
}

.archived-column .column-header{
  cursor:pointer;
}

.archived-column.archived-hidden .wip-counter{
  display:none;
}

.archived-column.archived-hidden .cards{
  display:none;
}

/* Cards */
.card{
  background:var(--card-bg);
  padding:10px;
  margin-bottom:8px;
  border-radius:6px;
  box-shadow:0 1px 4px rgba(16,24,40,0.06);
  cursor:grab;
  display:flex;
  flex-direction:column;
}

.card.has-role{
  background:#e0ecff;
  outline:2px solid rgba(43,138,239,0.25);
  box-shadow:0 2px 8px rgba(43,138,239,0.12);
}

.card.dragging{
  opacity:0.5;
}

.drop-over{
  outline:3px dashed rgba(43,138,239,0.18);
  border-radius:6px;
}

/* Card header */
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}

.card-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-bottom:1px solid #eee;
  margin-bottom:8px;
}

.card-title{
  font-weight:700;
  font-size:14px;
  color:#111;
  flex:1;
}

.card-id{
  font-weight:700;
  font-size:14px;
  color:#111;
}

.card-separator{
  font-weight:700;
  font-size:14px;
  color:#111;
}

.card-birthday{
  background:rgba(255,152,0,0.08);
  color:#ff9800;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
}

.card-leadtime{
  background:rgba(76,175,80,0.08);
  color:#4caf50;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
}

.card-cycletime{
  background:rgba(156,39,176,0.08);
  color:#9c27b0;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
}

/* Interactive cursor for informational elements */
.card-id,
.card-birthday,
.card-leadtime,
.card-cycletime{
  cursor:help;
}

.card-id:hover,
.card-birthday:hover,
.card-leadtime:hover,
.card-cycletime:hover{
  opacity:0.8;
}

/* Card value area */
.card-value{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-left:auto;
}

.value-amount{
  font-size:13px;
  font-weight:700;
  color:#2ecc71;
}

/* Difficulty indicators */
.indicators{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.indicator{
  background:rgba(0,0,0,0.03);
  padding:8px;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.ind-label{
  font-size:12px;
  color:#4b5563;
}

.ind-value{
  font-weight:700;
  color:var(--accent);
  font-size:13px;
  background:rgba(43,138,239,0.06);
  padding:4px 10px;
  border-radius:999px;
}

/* Indicator finished state */
.indicator.indicator-done{
  background:rgba(22,163,74,0.12);
  outline:2px solid rgba(22,163,74,0.25);
}

.indicator.indicator-done .ind-value{
  background:rgba(22,163,74,0.18);
  color:#065f46;
}

/* Indicator active state (current column) */
.indicator.indicator-active{
  background:rgba(239,68,68,0.12);
  outline:2px solid rgba(239,68,68,0.35);
}

.indicator.indicator-active .ind-label{
  color:#991b1b;
  font-weight:600;
}

.indicator.indicator-active .ind-value{
  background:rgba(239,68,68,0.20);
  color:#991b1b;
}

/* Next column button */
.next-column-btn{
  margin-top:8px;
  padding:6px 10px;
  background:#9ca3af;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:not-allowed;
  font-size:12px;
  font-weight:600;
  width:100%;
  transition:background 0.2s ease;
}

/* Estado habilitado (azul) */
.next-column-btn.btn-enabled{
  background:#2b8aef;
  cursor:pointer;
}

.next-column-btn.btn-enabled:hover{
  background:#1d6ac7;
}

/* Estado desabilitado (cinza) */
.next-column-btn.btn-disabled{
  background:#9ca3af;
  cursor:not-allowed;
  opacity:0.7;
}

.next-column-btn.btn-disabled:hover{
  background:#9ca3af;
}

/* Responsive adjustments */
@media (max-width:800px){
  .column{
    min-width:200px;
  }
}

/* Mobile layout adjustments */
@media (max-width:768px){
  .board{
    flex:0 0 auto;
    width:100%;
    min-height:500px;
    height:auto;
    max-height:none;
  }
  
  .column{
    min-width:180px;
  }
}