src/app/question-summary-page/question-summary-page.component.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');



/* Modern UI header styles from infopage */
.site-header {
  background: #011329;
  box-shadow: 0 2px 12px #38bdf844;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
  padding-bottom: 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px 0 32px;
  position: relative;
}

.logo-cluster {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-img-header {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  padding: 4px;
  margin-top: -6px;
  margin-bottom: 1vh;
}

.py-detect-title-header {
  font-size: 2.1rem;
  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
  font-weight: 900;
  letter-spacing: 6px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 1.5vh;
}

  .py-detect-title-header .py-letter.p {
    color: #e3f6ff;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.y {
    color: #38bdf8;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-shape {
    color: #e3f6ff;
    background: #e3f6ff;
    text-shadow: 0 0 6px #38bdf8;
    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
    border: 2px solid #23272b;
    width: 18px;
    height: 4px;
    display: inline-block;
    margin: 0 8px;
    border-radius: 2px;
  }

  .py-detect-title-header .py-letter.d {
    color: #e3f6ff;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.e {
    color: #38bdf8;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.t {
    color: #e3f6ff;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.e2 {
    color: #38bdf8;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.c {
    color: #e3f6ff;
    text-shadow: 0 0 6px #38bdf8;
  }

  .py-detect-title-header .py-letter.t2 {
    color: #38bdf8;
    text-shadow: 0 0 6px #38bdf8;
  }


.question-summary-fullpage {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(120deg, #e0f7fa0%, #f8fafc100%);
  padding: 0 0 32px 0;
  padding-bottom: 32px;
  
}
.qs-header {
  background: linear-gradient(90deg, #f0f9ff 0%, #dbeafe 100%);
  color: #2563eb;
  padding: 10px 18px 0;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 8px 32px #2563eb22, 0 2px 16px #38bdf822;
  margin-bottom: 32px;
  text-align: center;
}
.qs-header-title {
 font-size:2.3rem;
 font-weight:900;
 letter-spacing:2px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap:18px;
}
.qs-logo {
 font-size:2.5rem;
 filter: drop-shadow(02px8px #38bdf8cc);
}
.qs-title-main {
 font-size:2.1rem;
 font-weight:900;
 letter-spacing:2px;
}
.qs-header-meta {
 margin-top:12px;
 font-size:1.08rem;
 display: flex;
 flex-wrap: wrap;
 gap:18px;
 justify-content: center;
 align-items: center;
}
.qs-meta-label {
  color: #0e0f10b5;
  font-weight: 700;
  margin-right: 2px;
}
.qs-verdict {
 color: #22c55e;
 font-weight:900;
 font-size:1.13em;
}

.qs-summary-section {
 display: flex;
 flex-wrap: wrap;
 gap:32px;
 justify-content: center;
 margin-bottom:24px;
}
.qs-summary-block, .qs-observations-block {
 background: #fff;
 border-radius:1.2rem;
 box-shadow:0 2px 12px #2563eb22;
 padding:18px 24px 12px 24px;
 min-width:320px;
 max-width:480px;
 flex:11320px;
 color: #23272b;
}
.qs-summary-title, .qs-observations-title {
 color: #2563eb;
 font-weight:800;
 font-size:1.18em;
 margin-bottom:8px;
}
.qs-summary-text, .qs-observations-text {
 color: #23272b;
 font-size:1.07em;
}

.qs-extra-section {
 margin:32px auto 0 auto;
 max-width:700px;
 background: #fff;
 border-radius:1.2rem;
 box-shadow:0 2px 12px #2563eb22;
 padding:18px 24px 12px 24px;
 color: #23272b;
}
.qs-extra-title {
 color: #2563eb;
 font-weight:800;
 font-size:1.13em;
 margin-bottom:8px;
}
.qs-extra-list {
 list-style: none;
 padding:0;
 margin:0;
 color: #23272b;
 font-size:1.05em;
}
.qs-extra-list li {
 margin-bottom:4px;
 padding-left:0.5em;
}

.qs-footer {
 margin-top:32px;
 text-align: center;
 color: #64748b;
 font-size:1.01em;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:8px;
}
.qs-btn-back {
 background: linear-gradient(90deg,#64748b,#2563eb);
 color: #fff;
 border: none;
 border-radius:1.2rem;
 padding:0.5rem 1.2rem;
 font-size:1.01rem;
 font-weight:700;
 letter-spacing:1px;
 box-shadow:0 1px 8px #38bdf888;
 cursor: pointer;
 transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s, border 0.2s;
 outline: none;
 margin-top:8px;
}
.qs-btn-back:hover {
 box-shadow:0 4px 12px #38bdf888,0 1px 8px #2563eb44;
 transform: scale(1.04);
 border:2px solid #38bdf8;
}
.qs-footer-brand {
 margin-top:8px;
 font-size:0.98em;
 color: #b0b0b0;
}
.download-btn {
 background: linear-gradient(90deg,#38bdf8,#2563eb);
 color: #fff;
 border: none;
 border-radius:1.2rem;
 padding:0.5rem 1.2rem;
 font-size:1.01rem;
 font-weight:700;
 letter-spacing:1px;
 box-shadow:0 1px 8px #38bdf888;
 cursor: pointer;
 margin-top:18px;
 margin-bottom:0;
 transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s, border 0.2s;
}
.download-btn:hover {
 box-shadow:0 4px 12px #38bdf888,0 1px 8px #2563eb44;
 transform: scale(1.04);
 border:2px solid #2563eb;
}
.download-btn-container {
 margin-bottom:0 !important;
}

/* Footer */
footer {
  background: linear-gradient(to right, #011022, #01030a);
  color: #fff;
  text-align: center;
  padding: 10px 0px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  margin-top: 0;
}

.video-card {
 display: flex;
 flex-direction: column;
}

.video-metrics {
 margin-left: auto;
 max-width:340px;
 width:100%;
 text-align: right;
}

.qs-video-metrics-card {
 background: #fff;
 border-radius:14px;
 box-shadow:0 4px 24px rgba(0,0,0,0.08);
 padding:20px 18px;
 min-width:420px;
 max-width:600px;
 display: flex;
 flex-direction: column;
 align-items: stretch;
}

.metrics-sections-row {
 display: flex;
 flex-direction: row;
 gap:18px;
 justify-content: space-between;
 min-width:380px;
 width:100%;
 max-width:560px;
}

.metrics-section {
 flex:110;
 min-width:0;
}

.audio-analysis-section {
 border-right:1px solid #e0e7ef;
 padding-right:12px;
 margin-right:12px;
}

.video-analysis-section {
 padding-left:12px;
}

.metrics-section-title {
 font-weight:600;
 color: #2563eb;
 margin-bottom:6px;
 font-size:1.05rem;
}

.audio-badges {
 display: flex;
 flex-direction: column;
 gap:8px;
 margin-bottom:4px;
}
.audio-badge {
 background: #e0f7fa;
 color: #2563eb;
 border-radius:8px;
 padding:4px 10px;
 font-size:0.95rem;
 font-weight:500;
 display: inline-block;
 margin-bottom:2px;
}
.audio-badge.truth { background: #d1fae5; color: #059669; }
.audio-badge.emotion { background: #fef3c7; color: #b45309; }
.audio-badge.duration { background: #e0e7ff; color: #3730a3; }

.metrics-grid {
 width:100%;
 display: flex;
 flex-direction: column;
 gap:8px;
}
.metric-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.metric-label {
 color: #2563eb;
 font-weight:500;
}
.metric-value {
 font-weight:600;
 color: #0a192f;
}

.excel-table {
 border-collapse: collapse;
 width:100%;
 outline:10px solid rgba(100,116,139,0.13); /* subtle gray outline */
 box-shadow: none;
}
.excel-table th, .excel-table td {
 border:1px solid rgba(100,116,139,0.10); /* faint gray cell borders */
}
.excel-table.summary {
 margin-top:32px;
 outline:2px solid rgba(100,116,139,0.10);
 width:100%;
 border-collapse: collapse;
 background: #f8fafc;
 border-radius:12px;
 box-shadow:0 2px 12px #38bdf822;
}
.excel-table.summary th {
 background: #e0f7fa;
 color: #2563eb;
 font-weight:700;
 font-size:1.08em;
 padding:10px 14px;
 border-bottom:2px solid #38bdf822;
}
.excel-table.summary td {
 background: #fff;
 color: #23272b;
 font-size:1.04em;
 padding:10px 14px;
 border:1px solid rgba(100,116,139,0.08);
}
.excel-table.summary tr {
 transition: background 0.2s;
}
.excel-table.summary tr:hover {
 background: #e0f7fa55;
}
.tables-wrapper {
 max-width:1100px;
 margin:0 auto;
 width:100%;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.excel-table-container,
.summary-table-container {
 width:100%;
 margin:0;
 max-width:100%;
}


.excel-table.compact,
.excel-table.summary {
 width:100%;
 min-width:0;
 box-sizing: border-box;
}
.summary-table-container {
 margin-bottom:18px;
 max-width:100%;
}

.excel-table-container th {
  background: #e0f7fa;
  color: #2563eb;
  font-weight: 700;
  font-size: 1.08em;
  padding: 10px 14px;
  border-bottom: 2px solid #38bdf822;
}

@media (max-width:700px) {
 .qs-video-metrics-card {
 min-width:0;
 max-width:100%;
 }
 .metrics-sections-row {
 flex-direction: column;
 gap:12px;
 }
 .audio-analysis-section {
 border-right: none;
 border-bottom:1px solid #e0e7ef;
 padding-right:0;
 margin-right:0;
 padding-bottom:10px;
 margin-bottom:10px;
 }
}

/* Added styles */
.view-details-icon {
 display: inline-block;
 cursor: pointer;
 color: #2563eb;
 background: #e0f7fa;
 border-radius:50%;
 padding:6px 10px;
 transition: background 0.2s, color 0.2s, box-shadow 0.2s;
 font-size:1.2em;
 box-shadow:0 2px 8px #2563eb22;
 margin-left:6px;
}
.view-details-icon:hover, .view-details-icon:focus {
 background: #2563eb;
 color: #fff;
 box-shadow:0 4px 12px #38bdf888;
 outline: none;
}

.excel-table.compact th, .excel-table.compact td {
 text-align: left;
 padding:10px 14px;
 font-size:1.05em;
}

.excel-table.compact th {
 background: #e0f7fa;
 color: #2563eb;
 font-weight:700;
}

.excel-table.compact tr:hover {
 background: #e0f7fa55;
}

/* Pagination controls */
.pagination-controls {
 display:flex;
 gap:8px;
 justify-content:center;
 align-items:center;
 margin-top:18px;
}
.page-btn, .page-number {
 background: linear-gradient(90deg,#38bdf8,#2563eb);
 color:#fff;
 border:none;
 padding:6px 10px;
 border-radius:8px;
 font-weight:700;
 cursor:pointer;
 transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.page-btn[disabled], .page-number[disabled] {
 opacity:0.5;
 cursor:not-allowed;
}
.page-number { background: transparent; color: #0b3b72; border:1px solid rgba(3,102,214,0.08); padding:6px 8px; }
.page-number.active { background: linear-gradient(90deg,#38bdf8,#2563eb); color:#fff; box-shadow:0 6px 16px rgba(3,102,214,0.12); }
/* Results toolbar centered pagination */
.results-toolbar {
 display: flex;
 align-items: center;
 justify-content: center; /* center the pagination bar */
 background: #f3f4f6; /* light gray bar */
 padding:12px 16px;
 border-radius:6px;
 gap:16px;
}

.pagination-bar {
 display: flex;
 align-items: center;
 gap:14px;
}

.page-info {
 color: #6b7280;
 font-size:0.95rem;
 margin-right:8px;
}

.pagination-controls {
 display: flex;
 align-items: center;
 gap:8px;
}

.page-prev, .page-next {
 background: transparent;
 border: none;
 color: #6b7280;
 font-weight:600;
 cursor: pointer;
}

.page-number {
 width:32px;
 height:32px;
 min-width:32px;
 border-radius:50%;
 border:1px solid transparent;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 color: #6b7280;
 font-weight:600;
 cursor: pointer;
}

.page-number.active {
 background: #6366f1; /* primary blue/purple */
 color: #fff;
 box-shadow:0 6px 16px rgba(99,102,241,0.18);
}

.ellipsis {
 color: #9ca3af;
 padding:4px 6px;
}

.page-size-select {
 margin-left: auto; /* keep selector to the right if parent allows */
}

/* Make the toolbar span full width but keep content centered */
.results-toolbar {
 width:100%;
 max-width:960px;
 margin:12px auto;
}

/* New professional centered pagination toolbar */
.results-toolbar-new {
 background: #f8fafc; /* very light gray */
 padding:18px 12px;
 border-top:1px solid #e6e9ef;
 border-bottom:1px solid #e6e9ef;
 margin-top:18px;
}
.results-toolbar-new .toolbar-inner {
 max-width:920px;
 margin:0 auto;
 display: flex;
 align-items: center;
 justify-content: center;
 gap:18px;
}

/* Position the left-controls (results mini + entries select) in the toolbar */
.results-toolbar-new { position: relative; }

/* place the grouped left-controls at the left of the toolbar */
.results-toolbar-new .toolbar-inner .left-controls {
 position: absolute;
 left:18px;
 top:50%;
 transform: translateY(-50%);
 display: flex;
 gap:12px;
 align-items: center;
}

/* results mini stays left within the group */
.results-toolbar-new .toolbar-inner .results-summary-mini {
 margin:0;
 margin-right:8px;
 justify-content: flex-start;
}

/* entries select appears immediately to the right of results mini */
.results-toolbar-new .toolbar-inner .entries-select {
 display: flex;
 align-items: center;
 gap:8px;
 margin-left:190px;
}

/* Keep existing hide behavior on small screens */
@media (max-width:640px) {
 .results-toolbar-new .toolbar-inner .left-controls { display: none; }
}

.page-info {
 color: #6b7280;
 font-size:0.95rem;
 margin-right:8px;
}

.pagination-list {
 list-style: none;
 display: flex;
 align-items: center;
 gap:10px;
 padding:0;
 margin:0;
}

.pagination-list li { display: inline-flex; }

.page-number {
 width:36px;
 height:36px;
 min-width:36px;
 border-radius:50%;
 border: none;
 background: transparent;
 color: #111827;
 font-weight:600;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.page-number:hover { transform: translateY(-4px); }

.page-number.active {
 background: #6366f1; /* indigo/purple */
 color: #fff;
 box-shadow:0 8px 24px rgba(99,102,241,0.18);
}

.dots {
 color: #9ca3af;
 padding:06px;
}

.nav-btn {
 background: transparent;
 border: none;
 color: #6b7280;
 font-weight:600;
 padding:6px 8px;
 cursor: pointer;
}

.nav-btn[disabled] { opacity:0.45; cursor: default; }

@media (max-width:640px) {
 .results-toolbar-new .toolbar-inner { gap:10px; }
 .page-info { display: none; }
 .page-number { width:30px; height:30px; min-width:30px; }
}

/* Back button styling — gradient and subtle animation to match page design */
.back-btn {
  background: linear-gradient(90deg,#38bdf8,#2563eb);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(56,189,248,0.12);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, filter 220ms ease;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

  .back-btn .back-icon {
    font-weight: 900;
    margin-right: 6px;
  }

  .back-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(56,189,248,0.18);
    filter: saturate(1.05);
  }

  .back-btn:active {
    transform: translateY(-1px) scale(0.995);
  }

  /* subtle sheen on hover */
  .back-btn::after {
    content: "";
    position: absolute;
    left: -40%;
    top: -40%;
    width: 80%;
    height: 180%;
    background: linear-gradient(120deg, rgba(255,255,255,0.18)0%, rgba(255,255,255,0.02)60%, rgba(255,255,255,0)100%);
    transform: rotate(-25deg) translateX(-30%);
    transition: transform 550ms cubic-bezier(.2,.9,.2,1), opacity 350ms ease;
    opacity: 0;
    pointer-events: none;
  }

  .back-btn:hover::after {
    transform: rotate(-25deg) translateX(120%);
    opacity: 1;
  }

  /* accessible focus ring */
  .back-btn:focus {
    outline: 3px solid rgba(56,189,248,0.18);
    outline-offset: 2px;
  }

@media (max-width:520px) {
  .back-btn {
    padding: 6px 10px;
    font-size: 0.92rem;
    border-radius: 10px;
  }
}

/* small results summary on question summary page */
.results-summary-mini { display:flex; align-items:center; gap:8px; color:#0b3b72; font-weight:700; justify-self:start; }
.results-summary-mini .fa { color:#6b7280; }
.results-mini-text { font-size:0.98rem; }

@media (max-width:640px) {
 .results-summary-mini { display:none; }
}

/* Position the small results summary to the left corner of the centered toolbar */
.results-toolbar-new {
 position: relative; /* allow absolute positioning of children */
}

.results-toolbar-new .results-summary-mini {
 position: absolute;
 left:18px; /* align to left edge of toolbar area */
 top:50%;
 transform: translateY(-50%);
 justify-content: flex-start;
}

/* Ensure it does not overlap on very small screens (keep existing hide behavior) */
@media (max-width:640px) {
 .results-toolbar-new .results-summary-mini { display: none; }
}