/* =========================================================
   90MIN DASHBOARD — components.css
   ========================================================= */

/* ===== COLUMNS ===== */
.columns-viewport{
  flex:1;
  min-height:0;
  overflow:hidden;
  position:relative;
}
.columns-track{
  display:flex;
  height:100%;
  will-change:transform;
}

.column{
  flex-shrink:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--border-soft);
  min-width:0;
}

.column-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.column-header-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.column-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.column-type-chip{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-faint);
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 5px;
  flex-shrink:0;
}
.column-actions{ display:flex; gap:2px; flex-shrink:0; }

.column-body{
  flex:1;
  overflow-y:auto;
  padding:10px 12px 90px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
}

.column-empty{
  color:var(--text-faint);
  font-size:13px;
  text-align:center;
  padding:40px 20px;
  line-height:1.5;
}

/* ===== DOT INDICATOR ===== */
.dot-indicator{
  display:flex;
  gap:5px;
  margin-left:auto;
}
.dot-indicator .seg{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--border);
}
.dot-indicator .seg.active{ background:var(--blue); }

/* ===== CONTENT CARD ===== */
.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-left:3px solid var(--border);
  border-radius:var(--radius);
  padding:12px 13px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
}
.card:active{ background:var(--surface-hi); }

.card.cat-transfer{ border-left-color:var(--orange); }
.card.cat-official{ border-left-color:var(--green); }
.card.cat-rumour{ border-left-color:var(--yellow); }
.card.cat-match{ border-left-color:var(--blue); }
.card.cat-injury{ border-left-color:var(--red); }
.card.cat-scouting{ border-left-color:#9B7BF0; }

.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.card-author{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.card-avatar{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--surface-hi);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:11px;
  color:var(--text-muted);
  flex-shrink:0;
}
.card-author-name{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-author-handle{ font-size:11.5px; color:var(--text-faint); }
.card-time{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-faint);
  flex-shrink:0;
}

.card-text{
  font-size:13.5px;
  line-height:1.48;
  color:var(--text);
}
.card-title{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  line-height:1.35;
}

.card-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.02em;
  padding:3px 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.tag-club{ background:var(--blue-dim); color:#BFD2FF; }
.tag-cat{ background:var(--surface-hi); color:var(--text-muted); border:1px solid var(--border); }
.tag-cat.cat-transfer{ background:var(--orange-dim); color:var(--orange); border-color:transparent; }
.tag-cat.cat-official{ background:var(--green-dim); color:var(--green); border-color:transparent; }
.tag-cat.cat-rumour{ color:var(--yellow); }

.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.card-stats{
  display:flex;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-faint);
}
.card-stats span{ display:inline-flex; align-items:center; gap:4px; }

.relevance{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-muted);
}
.relevance-bar{
  width:26px; height:4px;
  border-radius:2px;
  background:var(--border);
  overflow:hidden;
  position:relative;
}
.relevance-bar::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:var(--rel, 50%);
  background:var(--rel-color, var(--blue));
}

.card-footer-actions{
  display:flex;
  gap:6px;
  padding-top:6px;
  border-top:1px solid var(--border-soft);
}
.card-action-btn{
  flex:1;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  padding:7px 6px;
  font-size:11.5px;
  font-weight:600;
  min-height:36px;
  cursor:pointer;
}
.card-action-btn:hover{ background:var(--surface-hi); color:var(--text); }
.card-action-btn.saved{ color:var(--yellow); border-color:var(--yellow); }

/* signal / story chip variants */
.badge-signal{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
  background:var(--orange-dim);
  color:var(--orange);
}
.badge-story{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  padding:3px 8px;
  border-radius:999px;
  background:var(--surface-hi);
  color:var(--text);
  border:1px solid var(--border);
}

/* ===== FAB ===== */
.fab{
  position:fixed;
  right:16px;
  bottom:calc(var(--bottomnav-h) + var(--safe-bottom) + 14px);
  width:52px; height:52px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(47,111,237,0.45);
  z-index:45;
  cursor:pointer;
}
.fab:active{ transform:scale(0.94); }

/* ===== MODAL ===== */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(4,6,9,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:16px;
}
.modal-box{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:440px;
  max-height:86vh;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-title{ font-family:var(--font-display); font-size:16.5px; font-weight:600; }

.field-label{
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-faint);
  margin-bottom:6px;
  display:block;
}
.text-input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:11px 12px;
  font-size:14px;
  outline:none;
}
.text-input:focus{ border-color:var(--blue); }

.chip-select{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-option{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-muted);
  padding:7px 12px;
  border-radius:999px;
  font-size:12.5px;
  cursor:pointer;
}
.chip-option.selected{ background:var(--blue-dim); border-color:var(--blue); color:#BFD2FF; }

.btn-primary{
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  width:100%;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }

.ai-hint{
  font-size:12px;
  color:var(--text-faint);
  line-height:1.5;
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  padding:9px 10px;
}

/* ===== BOTTOM SHEET ===== */
.sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(4,6,9,0.55);
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sheet-box{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-bottom:none;
  width:100%;
  max-width:520px;
  border-radius:18px 18px 0 0;
  padding:10px 18px calc(18px + var(--safe-bottom));
  max-height:80vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sheet-handle{
  width:36px; height:4px;
  background:var(--border);
  border-radius:999px;
  margin:4px auto 2px;
}
.sheet-title{ font-family:var(--font-display); font-size:16px; font-weight:600; }

.filter-group{ display:flex; flex-direction:column; gap:8px; }
.filter-group-label{ font-size:12px; font-weight:600; color:var(--text-muted); }
.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.checkbox-row input{ width:17px; height:17px; accent-color:var(--blue); }

.range-row{ display:flex; align-items:center; gap:10px; }
.range-row input[type=range]{ flex:1; accent-color:var(--blue); }
.range-value{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); width:28px; text-align:right; }

/* ===== TOAST ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--bottomnav-h) + var(--safe-bottom) + 20px);
  transform:translateX(-50%);
  background:var(--surface-hi);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 16px;
  border-radius:999px;
  font-size:12.5px;
  z-index:200;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}