/* NCVET Tea Training Plugin CSS */
/* All theme-level styles are in the theme.
   This file adds plugin-specific overrides. */

.ncvet-courses-grid,
.ncvet-steps,
.ncvet-form { width: 100%; }

/* Ensure shortcodes render properly inside page content */
.page-body .ncvet-courses-grid { margin-top: 0; }
.page-body .btn { display: inline-flex; }

/* Plugin form overrides for page context */
.ncvet-form .form-card { max-width: 680px; }
.checklist-page { max-width: 720px; margin: 0 auto; padding: 24px 0 40px; }

/* Panel full-bleed override — panels need to escape page padding */
body.page-template-default .panel-wrap {
  margin: -24px -24px 0;
}
@media (max-width: 640px) {
  body.page-template-default .panel-wrap { margin: -16px -16px 0; }
}

/* ── APPLY FORM: UPLOAD STATES ──────────────────────────────── */
@keyframes ncvet-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ti-spin { display: inline-block; animation: ncvet-spin 0.9s linear infinite; }

.upload-box.uploading {
  border-style: solid;
  border-color: var(--blue);
  background: var(--blue-lt);
  color: var(--blue);
  cursor: wait;
}
.upload-box.error {
  border-style: solid;
  border-color: var(--red);
  background: var(--red-lt);
  color: var(--red);
}
.upload-error { line-height: 1.4; }

/* Course select shows fee inline */
#f-course option { padding: 4px; }

/* Review step spacing */
#review-summary .form-section-label:first-child { margin-top: 0; }

/* ── COURSE CARD: QUICK DEACTIVATE / ACTIVATE BUTTON ───────── */
.ncvet-ca-vis-btn {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  line-height: 1.6;
}
.btn-vis-deactivate {
  background: #fff3f3;
  color: #c0392b;
  border: 1px solid #e99;
}
.btn-vis-deactivate:hover:not(:disabled) {
  background: #ffe0e0;
  border-color: #c0392b;
}
.btn-vis-activate {
  background: #f0fff4;
  color: #1a7c3c;
  border: 1px solid #7ecb95;
}
.btn-vis-activate:hover:not(:disabled) {
  background: #d6f5e2;
  border-color: #1a7c3c;
}
.ncvet-ca-vis-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ── UPLOAD BOX LAYOUT FIX ──────────────────────────────────── */
/* <label> defaults to inline in some resets — force block so the
   dashed border renders as a full clickable rectangle.           */
label.upload-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 120px !important;
  box-sizing: border-box !important;
  gap: 4px;
  cursor: pointer;
}
label.upload-box i { font-size: 28px !important; display: block !important; }
.upload-field { width: 100%; }

/* ══════════════════════════════════════════════════════════
   COMPETENCY SELF-ASSESSMENT — STEP 3
   ══════════════════════════════════════════════════════════ */

/* Live score strip */
.comp-score-strip {
  background: var(--ink, #1A1A1A);
  color: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.css-score-left { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.cs-label { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 4px; }
.cs-number { font-size: 48px; font-weight: 700; line-height: 1; color: #fff; transition: color .3s; }
.cs-total  { font-size: 18px; color: rgba(255,255,255,.35); }
.cs-level-wrap { flex: 1; min-width: 180px; }
.cs-level {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px;
  margin-bottom: 8px;
  transition: all .3s;
}
.cs-lv-0 { background: #7F1D1D; color: #FCA5A5; }
.cs-lv-1 { background: #78350F; color: #FCD34D; }
.cs-lv-2 { background: #14532D; color: #86EFAC; }
.cs-lv-3 { background: #1E3A8A; color: #93C5FD; }
.cs-bar-track {
  height: 6px; background: rgba(255,255,255,.15);
  border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.cs-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease, background .4s; width: 0%; }
.cs-scale { display: flex; gap: 4px; }
.cs-scale-item {
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: 3px; opacity: .35; transition: opacity .2s;
}
.cs-scale-item.active { opacity: 1; }
.csi-0 { background: #7F1D1D; color: #FCA5A5; }
.csi-1 { background: #78350F; color: #FCD34D; }
.csi-2 { background: #14532D; color: #86EFAC; }
.csi-3 { background: #1E3A8A; color: #93C5FD; }

/* Competency groups */
.comp-group { margin-bottom: 14px; }
.comp-group-header {
  background: #2B4F80;
  color: #fff;
  padding: 8px 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}
.comp-group-body {
  border: 1px solid #C5D5E8;
  border-top: none;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.comp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid #E8EFF6;
  user-select: none;
}
.comp-row:last-child { border-bottom: none; }
.comp-row:hover { background: #F0F6FF; }
.comp-row.comp-checked { background: #EBF7E9; }
.comp-row input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--green, #0F6E56);
  cursor: pointer; flex-shrink: 0; margin-top: 2px;
}
.comp-text { font-size: 13px; line-height: 1.5; flex: 1; }
.comp-tick {
  display: none;
  font-size: 10px; font-weight: 700;
  color: var(--green, #0F6E56);
  background: #D1FAE5;
  border: 1px solid #6EE7B7;
  padding: 1px 7px; border-radius: 20px;
  flex-shrink: 0; margin-top: 2px;
}
.comp-row.comp-checked .comp-tick { display: inline-block; }

/* Rubric */
.comp-rubric {
  background: var(--bg, #F9FAFB);
  border: 1px solid var(--border, #D1D5DB);
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 16px;
}
.rubric-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted, #6B7280); margin-bottom: 10px;
}
.rubric-bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.rubric-band {
  text-align: center;
  padding: 8px 6px;
  border-radius: 4px;
  font-size: 14px; font-weight: 700;
  line-height: 1.4;
}
.rubric-band span { font-size: 10px; font-weight: 500; display: block; }
.rb-red   { background: #FEE2E2; color: #991B1B; }
.rb-amber { background: #FEF3C7; color: #92400E; }
.rb-green { background: #D1FAE5; color: #065F46; }
.rb-blue  { background: #DBEAFE; color: #1E3A8A; }
.rubric-note { font-size: 11px; color: var(--muted, #6B7280); }

@media (max-width: 480px) {
  .rubric-bands { grid-template-columns: repeat(2,1fr); }
  .comp-score-strip { flex-direction: column; gap: 12px; }
}