/*
 * Popové hlasy – Teacher Portal UI
 * Mobile-first, responsive design
 * Version: 2025061001
 */

:root {
  --ph-radius: 14px;
  --ph-shadow: 0 10px 30px rgba(0,0,0,.07);
  --ph-shadow-sm: 0 4px 12px rgba(0,0,0,.06);
  --ph-accent: #0d6efd;
  --ph-accent-2: #6610f2;
  --ph-border: rgba(0,0,0,.08);
  --ph-surface: #ffffff;
  --ph-bg: #f6f7fb;
  --ph-text: #212529;
  --ph-muted: #6c757d;
}

*, *::before, *::after { box-sizing: border-box; }

body { background: var(--ph-bg) !important; -webkit-text-size-adjust: 100%; }

/* ===== CARDS ===== */
.card.shadow-sm {
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow-sm) !important;
  border: 1px solid var(--ph-border);
}

.card-header.bg-white {
  border-top-left-radius: var(--ph-radius) !important;
  border-top-right-radius: var(--ph-radius) !important;
}

/* ===== FORMS ===== */
.btn { border-radius: 12px !important; }
.form-control, .form-select { border-radius: 10px !important; font-size: .95rem; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }

/* ===== MUTED TEXT ===== */
.muted-small { font-size: .88rem; color: var(--ph-muted); line-height: 1.45; }

/* ===== NAVBAR ===== */
.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,.18);
  background: rgba(255,255,255,.7);
  border-radius: var(--ph-radius);
  padding: 14px;
  transition: .15s ease;
}

.ph-dropzone:hover { border-color: #0d6efd; background: rgba(13,110,253,.04); }
.ph-dropzone.ph-dragover { border-color: #0d6efd; background: rgba(13,110,253,.06); box-shadow: 0 0 0 3px rgba(13,110,253,.15); }
.ph-dropzone .ph-dz-row { display: flex; gap: 12px; align-items: flex-start; }
.ph-dropzone .ph-dz-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(13,110,253,.10); flex-shrink: 0; }
.ph-dropzone .ph-dz-title { font-weight: 700; }
.ph-dropzone .ph-dz-sub { color: var(--ph-muted); font-size: .9rem; }
.ph-dropzone .ph-dz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ph-dropzone input[type=file] { display: none; }

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

.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: .88rem; }

/* ===== WAVEBOX ===== */
.ph-wavebox { border: 1px solid rgba(0,0,0,.12); border-radius: .75rem; padding: .75rem; background: var(--ph-surface); }
.ph-wave { background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,42,.12); border-radius: 14px; padding: .5rem; }
.ph-waveform { height: 64px; }

.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 ===== */
.ph-checklist { display: flex; flex-wrap: wrap; gap: 8px; 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: .84rem; }
.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; }

/* ===== HISTORY ===== */
.ph-history-empty { color: var(--ph-muted); font-size: .9rem; padding: 6px 2px; }
.ph-history-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--ph-border); }
.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: var(--ph-muted); font-size: .84rem; }

/* ===== STEP INDICATOR ===== */
.ph-steps { display: flex; gap: 0; margin-bottom: 1.5rem; }
.ph-step { flex: 1; text-align: center; position: relative; }
.ph-step-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ph-border); display: flex; align-items: center; justify-content: center; margin: 0 auto .4rem; font-size: .85rem; font-weight: 700; color: var(--ph-muted); position: relative; z-index: 1; transition: background .2s, color .2s; }
.ph-step.done .ph-step-dot { background: #198754; color: #fff; }
.ph-step.active .ph-step-dot { background: var(--ph-accent); color: #fff; box-shadow: 0 0 0 4px rgba(13,110,253,.2); }
.ph-step-label { font-size: .78rem; color: var(--ph-muted); font-weight: 500; }
.ph-step.active .ph-step-label { color: var(--ph-accent); font-weight: 700; }
.ph-step.done .ph-step-label { color: #198754; }

/* ===== LIMIT BAR ===== */
.ph-limit-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; margin-top: .35rem; }
.ph-limit-fill { height: 100%; border-radius: 999px; background: linear-gradient(135deg, #0d6efd, #6610f2); transition: width .4s ease; }
.ph-limit-fill.warning { background: linear-gradient(135deg, #dc3545, #fd7e14); }

/* ===== TABLE MOBILE CARDS ===== */
@media (max-width: 768px) {
  .table-mobile-card thead { display: none; }
  .table-mobile-card tbody tr {
    display: block;
    border: 1px solid var(--ph-border);
    border-radius: 12px;
    margin-bottom: .65rem;
    overflow: hidden;
    background: var(--ph-surface);
  }
  .table-mobile-card tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: .9rem;
  }
  .table-mobile-card tbody td:last-child { border-bottom: 0; }
  .table-mobile-card tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ph-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
    min-width: 80px;
    padding-top: 2px;
  }
}

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

/* ===== FORM SECTION DIVIDER ===== */
.ph-form-section { border-top: 1px solid var(--ph-border); padding-top: 1.25rem; margin-top: 1.25rem; }
.ph-form-section-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }

/* ===== MOBILE RESPONSIVE HELPERS ===== */
@media (max-width: 576px) {
  .btn { padding: .45rem .85rem; }
  .card-body { padding: 1rem !important; }
  h2 { font-size: 1.3rem; }
  h4 { font-size: 1.05rem; }
  .container { padding-left: .75rem; padding-right: .75rem; }
  .row.g-4 { --bs-gutter-y: 1rem; }
}

/* ===== TABLET ===== */
@media (max-width: 991px) {
  .ph-steps { gap: 0; }
  .ph-step-label { font-size: .72rem; }
}