/* =========================================================
   PilotMetrics - Instructor Dashboard & Student Overview
   ========================================================= */

.ins-gate { text-align: center; padding: 32px 20px; }
.ins-gate h2 { justify-content: center; font-size: 18px; margin-bottom: 10px; }
.ins-gate .desc { margin: 0 auto 16px; max-width: 520px; font-size: 13px; }

.ins-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.ins-stats.student { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.ins-stats .stat b { font-size: 20px; margin-top: 4px; }
.ins-stats .stat small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.ins-stats .stat.attention b { color: #f87171; }
.ins-stats .stat.watch b { color: #fbbf24; }

/* input.: outranks base.css input[type=search] */
input.ins-search { width: 240px; max-width: 100%; }

/* Status badges: on track / keep an eye / needs attention */
.ins-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ins-badge.ok { background: var(--green-light); color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.ins-badge.watch { background: var(--amber-light); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
.ins-badge.attention { background: var(--danger-light); color: #f87171; border-color: rgba(239, 68, 68, 0.45); }

.ins-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid var(--line);
  font-size: 12px;
}
.ins-status.attention { border-color: rgba(239, 68, 68, 0.45); }
.ins-status.watch { border-color: rgba(245, 158, 11, 0.4); }

/* Training trend on the student page: improving / stable / declining, in a sentence */
.ins-trend {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid var(--line);
  font-size: 12px;
}
.ins-trend b { white-space: nowrap; }
.ins-trend.improving { border-color: rgba(16, 185, 129, 0.35); }
.ins-trend.improving b { color: #34d399; }
.ins-trend.declining { border-color: rgba(245, 158, 11, 0.4); }
.ins-trend.declining b { color: #fbbf24; }
.ins-trend.none { color: var(--muted); }

/* Tables */
.ins-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.ins-table .num { text-align: right; white-space: nowrap; }
.ins-table tr.clickable { cursor: pointer; }
.ins-table tr.clickable:hover td, .ins-table tr.clickable:focus td { background: rgba(59, 130, 246, 0.08); outline: none; }
.ins-table tr.attention td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.ins-table tr.watch td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.ins-table .empty-row td { text-align: center; color: var(--muted); font-style: italic; padding: 18px; }
.ins-table.flights .remarks { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ins-key { margin: 10px 0 0; }

.ins-progress {
  display: inline-block;
  width: 48px;
  height: 6px;
  border-radius: 3px;
  background: #0f172a;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-right: 6px;
  vertical-align: middle;
}
.ins-progress > div { height: 100%; background: var(--blue); }
.ins-progress.wide { display: block; width: 100%; height: 8px; margin: 4px 0 0; }

/* Requests */
.ins-request {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
  margin-bottom: 8px;
}
.ins-request-actions { display: flex; gap: 6px; }
.ins-full-note {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--amber-light);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde68a;
}

/* Weekly activity bars */
.ins-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  height: 170px;
  padding-top: 10px;
}
.ins-bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.ins-bar-value { font-size: 10px; font-weight: 700; color: #fff; min-height: 14px; }
.ins-bar-fill { background: var(--blue); border-radius: 4px 4px 0 0; min-height: 2px; }
.ins-bar-label { font-size: 9px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; }

/* Stages */
.ins-stage { margin-bottom: 10px; }
.ins-stage-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ins-stage-head em { font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--cyan); margin-left: 6px; }
.ins-stage.current .ins-progress > div { background: var(--cyan); }

/* Gaps */
.ins-gaps { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.ins-gaps li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ins-gaps li:last-child { border-bottom: 0; }
.ins-gaps li.long b { color: #fbbf24; }
.ins-gaps em { font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase; color: #f87171; margin-left: 4px; }

.ins-footer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Long lists scroll inside their card */
.ins-gaps { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.table-wrapper:has(> .ins-table.flights) { max-height: 420px; overflow-y: auto; }
.ins-table.flights thead th { position: sticky; top: 0; z-index: 1; }

/* Projected finish vs the student's target */
.ins-table small.finish.late { color: #f87171; }
.ins-table small.finish.early, .ins-table small.finish.on { color: #34d399; }
.ins-table small.below { color: #fbbf24; }
.ins-table small.met { color: #34d399; }

/* Hover a week's bar to see the days flown */
.ins-bar { position: relative; outline: none; }
.ins-bar-fill.below { background: var(--amber); }
.ins-bar-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 150px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0b1220;
  border: 1px solid var(--line-light);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  text-align: left;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.ins-bar-tip.left { left: 0; transform: none; }
.ins-bar-tip.right { left: auto; right: 0; transform: none; }
.ins-bar-tip b { display: block; margin-bottom: 2px; }
.ins-bar-tip span { display: block; color: var(--muted); }
.ins-bar-tip ul { margin: 6px 0 0; padding: 0; list-style: none; }
.ins-bar-tip li { padding: 1px 0; }
.ins-bar:hover .ins-bar-tip, .ins-bar:focus .ins-bar-tip { display: block; }
.ins-bar:hover .ins-bar-fill { filter: brightness(1.25); }

/* Target and summary settings */
.ins-target-row, .ins-summary-settings { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ins-target-row .field { flex: 0 1 200px; }
.ins-summary-settings .field { flex: 0 1 220px; }
.ins-summary-settings label .ins-badge { font-size: 9px; }

/* Target editor on the left, planned vs projected timeline on the right */
.ins-target-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: center; }

/* Planned vs projected training time (as on the student's dashboard) */
.ins-plan-timeline {
  position: relative;
  height: 10px;
  margin: 4px 0 6px;
  border-radius: 5px;
  background: #0f172a;
  border: 1px solid var(--line);
}
.ins-plan-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--blue); }
.ins-plan-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; transform: translateX(-1px); }
.ins-plan-marker.planned { background: #fff; }
.ins-plan-marker.projected { background: var(--amber); }
.ins-plan-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; color: var(--muted); }
.ins-plan-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ins-plan-message {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #0f172a;
  border: 1px solid var(--line);
  color: var(--text);
}
.ins-plan-message.ahead { border-color: rgba(16, 185, 129, 0.45); background: var(--green-light); }
.ins-plan-message.late { border-color: rgba(239, 68, 68, 0.45); background: var(--danger-light); }
.ins-plan-message.muted { color: var(--muted); font-style: italic; }

@media (max-width: 900px) {
  .ins-target-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ins-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ins-stats.student { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ins-stats, .ins-stats.student { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  input.ins-search { max-width: none; width: 100%; }
  /* Keep the students table to the columns that answer "who needs attention?" */
  .ins-table:not(.flights) th:nth-child(5), .ins-table:not(.flights) td:nth-child(5),
  .ins-table:not(.flights) th:nth-child(6), .ins-table:not(.flights) td:nth-child(6) { display: none; }
  .ins-target-row .field, .ins-summary-settings .field { flex: 1 1 100%; }
  .ins-bars { gap: 3px; }
  .ins-bar-label { font-size: 8px; }
}