/* Teacher UI – consistent look across pages (mobile-first) */

:root{
  --ph-radius: 14px;
  --ph-shadow: 0 10px 30px rgba(0,0,0,.08);
}

body.bg-light{ background: #f6f7fb !important; }

.card.shadow-sm{ border-radius: var(--ph-radius); box-shadow: var(--ph-shadow) !important; border: 1px solid rgba(0,0,0,.06); }
.card-header.bg-white{ border-top-left-radius: var(--ph-radius); border-top-right-radius: var(--ph-radius); }

.btn{ border-radius: 12px; }
.form-control,.form-select{ border-radius: 12px; }

.muted-small{ font-size: .92rem; color: #6c757d; }

/* Navbar: tighter on mobile */
.ph-nav-actions .btn{ white-space: nowrap; }
@media (max-width: 576px){
  .ph-nav-actions .btn .ph-hide-xs{ display:none; }
  .ph-nav-actions .btn{ padding-left:.55rem; padding-right:.55rem; }
}

/* Dropzone */
.ph-dropzone{
  position: relative;
  border: 2px dashed rgba(0,0,0,.2);
  background: rgba(255,255,255,.7);
  border-radius: 16px;
  padding: 14px;
  transition: .15s ease;
}

/* WaveSurfer box (preview v dropzone) */
.ph-wavebox{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .75rem;
  padding: .75rem;
  background: #fff;
}
.ph-dropzone.ph-dragover{
  border-color: #0d6efd;
  background: rgba(13,110,253,.06);
}
.ph-dropzone .ph-dz-row{ display:flex; gap:12px; align-items:flex-start; }
.ph-dropzone .ph-dz-icon{ width:44px; height:44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(13,110,253,.10); }
.ph-dropzone .ph-dz-title{ font-weight: 700; }
.ph-dropzone .ph-dz-sub{ color:#6c757d; font-size:.92rem; }
.ph-dropzone .ph-dz-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.ph-dropzone input[type=file]{ display:none; }

.ph-progress{ height: 10px; border-radius: 999px; background: rgba(0,0,0,.08); overflow:hidden; }
.ph-progress > div{ height:100%; width:0%; background: #0d6efd; transition: width .2s ease; }

.ph-file-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; background: rgba(0,0,0,.05); font-size:.92rem; }

/* Wave player buttons */
.ph-btn-playing{
  animation: phPulse 1s ease-in-out infinite;
}
@keyframes phPulse{
  0%{ box-shadow: 0 0 0 0 rgba(13,110,253,.35); }
  70%{ box-shadow: 0 0 0 10px rgba(13,110,253,0); }
  100%{ box-shadow: 0 0 0 0 rgba(13,110,253,0); }
}

/* Checklist icons in table */
.ph-checklist{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; align-items:center; }
.ph-checklist .ph-item{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius: 999px; background: rgba(0,0,0,.04); font-size:.86rem; }
.ph-checklist .ph-item i{ width: 16px; text-align:center; }
.ph-checklist .ok{ color: #198754; }
.ph-checklist .bad{ color: #dc3545; }
.ph-checklist .na{ color: #0d6efd; }

/* Table tweaks on mobile */
@media (max-width: 768px){
  .table thead{ display:none; }
  .table tbody tr{ display:block; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow:hidden; margin-bottom: 10px; }
  .table tbody td{ display:flex; justify-content:space-between; gap:10px; padding:.65rem .75rem; }
  .table tbody td::before{ content: attr(data-label); font-weight:600; color:#6c757d; }
  .table tbody td.text-end{ justify-content:flex-end; }
}

/* Play/Pause visual state */
.btn.is-playing{
  animation: phBlink 1.1s ease-in-out infinite;
}
@keyframes phBlink{
  0%, 100%{ filter: brightness(1); }
  50%{ filter: brightness(1.25); }
}

/* History list */
.ph-history-empty{ color:#6c757d; font-size:.92rem; padding: 6px 2px; }
.ph-history-row{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.08); }
.ph-history-row:first-child{ border-top: 0; }
.ph-history-left a{ font-weight: 600; text-decoration: none; }
.ph-history-left a:hover{ text-decoration: underline; }
.ph-history-meta{ color:#6c757d; font-size:.86rem; }
.ph-history-right{ flex: 0 0 auto; }

/* Guided tour */
.ph-tour-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.20);
  z-index: 1050; /* pod popover (Bootstrap popover je 1070) */
}
.ph-tour-focus{
  position: relative;
  z-index: 1060;
  box-shadow: 0 0 0 6px rgba(13,110,253,.22), var(--ph-shadow);
  border-radius: 14px;
}