/* =============================================================
   Online Koçunuz — Koç Paneli (gömülü panel)
   Tüm kurallar .okt-coach-panel altına scope'ludur.
   Tasarım dili: coach-panel.html (Plus Jakarta Sans, ink/primary)
   ============================================================= */

.okt-coach-panel {
  --okt-cp-primary: #3B5BFF;
  --okt-cp-primary-600: #2C49E6;
  --okt-cp-primary-700: #1E3AE2;
  --okt-cp-ink-900: #0B0F1A;
  --okt-cp-ink-700: #1A1F2E;
  --okt-cp-ink-500: #4B5468;
  --okt-cp-ink-300: #8E97AB;
  --okt-cp-border: #E6E8EF;
  --okt-cp-border-strong: #CDD2DF;
  --okt-cp-bg: #F6F7FB;
  --okt-cp-surface: #FFFFFF;
  --okt-cp-success: #1F9D55;
  --okt-cp-warning: #E59A1F;
  --okt-cp-danger: #D43A4F;

  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--okt-cp-ink-700);
  background: var(--okt-cp-bg);
  -webkit-font-smoothing: antialiased;
  padding: 20px 16px 48px;
  min-height: 60vh;
}

.okt-coach-panel * { box-sizing: border-box; }
.okt-coach-panel .num { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

.okt-cp-shell { max-width: 1120px; margin: 0 auto; }

/* ---------- Gate / mesaj (yetki yok, koç değil) ---------- */
.okt-cp-gate {
  max-width: 560px;
  margin: 8vh auto;
  background: var(--okt-cp-surface);
  border: 1px solid var(--okt-cp-border);
  border-radius: 18px;
  padding: 36px 28px;
  text-align: center;
}
.okt-cp-gate-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--okt-cp-primary-700);
  background: #EEF1FF;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.okt-cp-gate-title { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: var(--okt-cp-ink-900); letter-spacing: -.01em; }
.okt-cp-gate-sub { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--okt-cp-ink-500); }
.okt-cp-gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Yükleniyor ---------- */
.okt-cp-loading {
  padding: 40px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--okt-cp-ink-300);
}

/* ---------- Başlık şeridi ---------- */
.okt-cp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.okt-cp-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--okt-cp-ink-900); }
.okt-cp-head-sub { font-size: 13px; color: var(--okt-cp-ink-500); margin-top: 2px; }
.okt-cp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- İstatistik kartları ---------- */
.okt-cp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.okt-cp-stat {
  background: var(--okt-cp-surface);
  border: 1px solid var(--okt-cp-border);
  border-radius: 14px;
  padding: 14px;
}
.okt-cp-stat-l {
  font-size: 11px;
  font-weight: 600;
  color: var(--okt-cp-ink-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.okt-cp-stat-v { font-size: 26px; font-weight: 800; color: var(--okt-cp-ink-900); letter-spacing: -.02em; }
.okt-cp-stat-v small { font-size: 13px; color: var(--okt-cp-ink-500); font-weight: 500; }

/* ---------- Tablo (öğrenci listesi) ---------- */
.okt-cp-tablewrap {
  background: var(--okt-cp-surface);
  border: 1px solid var(--okt-cp-border);
  border-radius: 14px;
  overflow: hidden;
}
.okt-cp-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.okt-cp-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}
.okt-cp-table thead th {
  text-align: left;
  padding: 11px 14px;
  background: var(--okt-cp-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--okt-cp-ink-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.okt-cp-table th.okt-cp-r, .okt-cp-table td.okt-cp-r { text-align: right; }
.okt-cp-table tbody tr {
  border-top: 1px solid var(--okt-cp-border);
  cursor: pointer;
  transition: background .12s ease;
}
.okt-cp-table tbody tr:hover { background: #F0F1F6; }
.okt-cp-table td { padding: 11px 14px; vertical-align: middle; color: var(--okt-cp-ink-700); }
.okt-cp-table td.okt-cp-name { white-space: nowrap; }

.okt-cp-stu {
  display: flex;
  align-items: center;
  gap: 10px;
}
.okt-cp-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--okt-cp-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.okt-cp-ava--lg { width: 56px; height: 56px; font-size: 18px; }
.okt-cp-stu-name { font-weight: 600; color: var(--okt-cp-ink-900); }
.okt-cp-stu-meta { font-size: 11px; color: var(--okt-cp-ink-500); }

/* durum noktası */
.okt-cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.okt-cp-dot--low { background: var(--okt-cp-success); }
.okt-cp-dot--mid { background: var(--okt-cp-warning); }
.okt-cp-dot--high { background: var(--okt-cp-danger); }

.okt-cp-empty { padding: 40px 16px; text-align: center; color: var(--okt-cp-ink-300); font-size: 14px; }

/* ---------- Pill ---------- */
.okt-cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  background: #F0F1F6;
  color: var(--okt-cp-ink-500);
}
.okt-cp-pill--green { background: #E6F6EC; color: #156E3C; }
.okt-cp-pill--red { background: #FCE9EC; color: #99213A; }
.okt-cp-pill--amber { background: #FDF4E2; color: #A36C11; }
.okt-cp-pill--blue { background: #EEF1FF; color: #1E3AE2; }

/* ---------- Detay ---------- */
.okt-cp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--okt-cp-primary-600);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  margin-bottom: 14px;
}
.okt-cp-back:hover { text-decoration: underline; }

.okt-cp-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.okt-cp-detail-head .okt-cp-info { flex: 1; min-width: 200px; }
.okt-cp-detail-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--okt-cp-ink-900); }
.okt-cp-detail-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.okt-cp-detail-sub { font-size: 13px; color: var(--okt-cp-ink-500); }

/* hızlı istatistik (detay üstü) */
.okt-cp-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.okt-cp-quick .okt-cp-stat-v { font-size: 22px; }

/* sekmeler */
.okt-cp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--okt-cp-border);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.okt-cp-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--okt-cp-ink-500);
  padding: 10px 14px;
  white-space: nowrap;
}
.okt-cp-tab:hover { color: var(--okt-cp-ink-900); }
.okt-cp-tab.is-active { color: var(--okt-cp-primary-700); border-bottom-color: var(--okt-cp-primary); }

.okt-cp-panel[hidden] { display: none; }

/* kart */
.okt-cp-card {
  background: var(--okt-cp-surface);
  border: 1px solid var(--okt-cp-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.okt-cp-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--okt-cp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.okt-cp-card-title { font-size: 14px; font-weight: 700; color: var(--okt-cp-ink-900); }
.okt-cp-card-body { padding: 16px; }

/* iki kolon grid */
.okt-cp-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
}

/* genel bilgiler satırları */
.okt-cp-fields { display: block; }
.okt-cp-field {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  padding: 10px 16px;
  align-items: center;
  border-top: 1px solid var(--okt-cp-border);
}
.okt-cp-field:nth-child(odd) { background: var(--okt-cp-bg); }
.okt-cp-field:first-child { border-top: 0; }
.okt-cp-field-k { font-size: 12px; font-weight: 600; color: var(--okt-cp-ink-500); }
.okt-cp-field-v { font-size: 13px; color: var(--okt-cp-ink-900); }

/* koçluk durumu kutusu */
.okt-cp-coaching {
  background: var(--okt-cp-ink-900);
  color: #fff;
  border-radius: 14px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.okt-cp-coaching::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(59,91,255,.32), transparent 60%);
  pointer-events: none;
}
.okt-cp-coaching > * { position: relative; }
.okt-cp-coaching-eyebrow { font-size: 11px; font-weight: 600; color: #B7BECC; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.okt-cp-coaching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 14px; }
.okt-cp-coaching-k { font-size: 11px; color: #8E97AB; margin-bottom: 2px; }
.okt-cp-coaching-v { font-size: 16px; font-weight: 700; color: #fff; }
.okt-cp-coaching-v.is-warn { color: #FBBF55; }
.okt-cp-coaching-note { font-size: 12px; color: #B7BECC; line-height: 1.5; }

/* haftalık özet */
.okt-cp-week-rows { display: block; }
.okt-cp-week-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--okt-cp-border);
}
.okt-cp-week-row:first-child { border-top: 0; }
.okt-cp-week-name { font-size: 13px; color: var(--okt-cp-ink-900); display: flex; align-items: center; gap: 8px; }
.okt-cp-week-bar { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.okt-cp-week-q { font-size: 13px; font-weight: 700; color: var(--okt-cp-ink-900); }
.okt-cp-week-min { font-size: 12px; color: var(--okt-cp-ink-500); min-width: 70px; text-align: right; }

.okt-cp-week-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.okt-cp-week-total {
  border: 1px solid var(--okt-cp-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.okt-cp-week-total .okt-cp-stat-l { margin-bottom: 4px; }
.okt-cp-week-total .okt-cp-stat-v { font-size: 22px; }
.okt-cp-week-total small { display: block; font-size: 11px; color: var(--okt-cp-ink-500); font-weight: 500; margin-top: 4px; }

/* ödev / kaynak / deneme listeleri */
.okt-cp-list { display: flex; flex-direction: column; gap: 0; }
.okt-cp-li {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--okt-cp-border);
}
.okt-cp-li:first-child { border-top: 0; }
.okt-cp-li-bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--okt-cp-primary); }
.okt-cp-li-main { min-width: 0; }
.okt-cp-li-title { font-size: 14px; font-weight: 600; color: var(--okt-cp-ink-900); }
.okt-cp-li-meta { font-size: 12px; color: var(--okt-cp-ink-500); margin-top: 2px; }
.okt-cp-li-side { text-align: right; white-space: nowrap; }

/* form (ödev ver) */
.okt-cp-form { display: grid; gap: 14px; }
.okt-cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.okt-cp-form-field { display: flex; flex-direction: column; gap: 6px; }
.okt-cp-form-field.is-full { grid-column: 1 / -1; }
.okt-cp-label { font-size: 12px; font-weight: 600; color: var(--okt-cp-ink-700); }
.okt-cp-input, .okt-cp-select, .okt-cp-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--okt-cp-border-strong);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: var(--okt-cp-ink-900);
  outline: none;
}
.okt-cp-input:focus, .okt-cp-select:focus, .okt-cp-textarea:focus {
  border-color: var(--okt-cp-primary);
  box-shadow: 0 0 0 3px rgba(59,91,255,.15);
}
.okt-cp-textarea { resize: vertical; min-height: 72px; }
.okt-cp-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.okt-cp-form-msg { font-size: 13px; font-weight: 600; }
.okt-cp-form-msg.is-ok { color: var(--okt-cp-success); }
.okt-cp-form-msg.is-err { color: var(--okt-cp-danger); }

.okt-cp-tab-sub { font-size: 13px; color: var(--okt-cp-ink-500); margin: 0 0 14px; }

/* ---------- Responsive (mobil öncelikli) ---------- */
@media (max-width: 900px) {
  .okt-cp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .okt-cp-stats, .okt-cp-quick { grid-template-columns: repeat(2, 1fr); }
  .okt-cp-coaching-grid { grid-template-columns: 1fr; }
  .okt-cp-form-grid { grid-template-columns: 1fr; }
  .okt-cp-field { grid-template-columns: 1fr; gap: 2px; }
  .okt-cp-week-totals { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .okt-coach-panel { padding: 14px 10px 40px; }
  .okt-cp-stats, .okt-cp-quick { grid-template-columns: 1fr; }
}