src/app/validationpage/validationpage.component.css

/* 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;
}

/* CSS variables for positioning */
:root {
 --validation-result-top:140px; /* distance from top for the result container */
 --header-question-height:64px; /* approximate height of the header-question-summary box */
 --header-question-gap:12px; /* gap between question box and result container */
}

/* Validation Report Template Styles */
.validation-template-main {
 margin-top:32px;
 width:100%;
 display: flex;
 justify-content: flex-start; /* moved to left side */
}

.validation-template-flex {
 display: grid;
 /* increased left column width from360px to420px to give more room for case summary */
 grid-template-columns:420px 1fr;
 gap:28px;
 align-items: start;
 max-width:1200px;
 margin:0; /* remove auto centering so layout sits on the left */
}

.validation-side-left {
 width:420px; /* increased from360px */
 display: flex;
 flex-direction: column;
 gap:16px;
 align-items: stretch;
}

.validation-template-left {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 gap:32px;
 min-width:180px;
}

.validation-circle {
 width:140px;
 height:140px;
 border-radius:50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 box-shadow:0 2px 16px #38bdf844;
 margin-bottom:8px;
}


.validation-circle.truth {
  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
}

.validation-circle.inconsistency {
  background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
}

.circle-value {
 font-size:2.4rem;
 font-weight:900;
 color: #2563eb;
 margin-bottom:8px;
}

.validation-circle.inconsistency .circle-value {
 color: #991b1b;
}

.circle-label {
 font-size:1rem;
 color: #6366f1;
 text-align: center;
}

.validation-template-right {
 flex:1;
 display: flex;
 flex-direction: column;
 gap:24px;
}

/* Action buttons row below the main validation template */
.validation-actions {
 display:flex;
 gap:35px;
 justify-content:flex-end;
 align-items:center;
 padding:18px 24px;
 max-width:1200px;
 margin:-9px 0 24px 42px; /* align with main content area (left column420px) */
}

.action-btn {
 display:inline-flex;
 align-items:center;
 gap:8px;
 background:#fff;
 border:1px solid rgba(2,24,64,0.06);
 padding:6px 10px;
 border-radius:8px;
 cursor:pointer;
 font-weight:700;
 box-shadow:0 8px 18px rgba(2,24,64,0.04);
}

.action-icon {
 width:14px;
 height:14px;
 border-radius:999px;
 display:inline-block;
}

.action-icon.blue { background:#1e40af; }
.action-icon.purple { background:#7c3aed; }
.action-icon.green { background:#059669; }

.action-btn.action-download .action-label { color:#0f172a; }
.action-btn.action-email .action-label { color:#0f172a; }
.action-btn.action-reanalyze .action-label { color:#0f172a; }

.action-btn:hover { transform:translateY(-2px); box-shadow:012px32px rgba(2,24,64,0.06); }

@media (max-width:900px) {
 .validation-actions { justify-content:center; margin-left:0; }
}

.validation-section {
 background: #fff;
 border-radius:12px;
 box-shadow:0 2px 16px #2563eb22;
 margin-bottom:0;
 padding-bottom:0;
}

.section-header {
 font-size:1.15rem;
 font-weight:700;
 padding:12px 24px;
 border-radius:12px 12px 0 0;
 letter-spacing:1px;
}

.details-header {
 background: #fbbf24;
 color: #23272b;
}

.incident-header {
 background: #ef4444;
 color: #fff;
}

.followup-header {
 background: #14b8a6;
 color: #fff;
}

.section-table {
 width:100%;
 display: flex;
 flex-direction: column;
 padding:0 24px 18px 24px;
}

.section-row {
 display: flex;
 border-bottom:1px solid #e5e7eb;
 padding:8px 0;
}

 .section-row:last-child {
 border-bottom: none;
 }

.section-cell {
 flex:1;
 font-size:1rem;
 color: #23272b;
 padding-right:16px;
 word-break: break-word;
}

 .section-cell[colspan="3"] {
 flex:3;
 }

@media (max-width:900px) {
 .validation-template-flex {
 flex-direction: column;
 align-items: center;
 }

 .validation-template-right {
 width:100%;
 }
}

.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:006px #38bdf8;
 }

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

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

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

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

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

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

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

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

.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;
}

/* 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;
}

/* Professional, modern look for validation results */
.validation-result-container {
 position: sticky;
 right:0;
 top:110px;
 width:360px;
 background: linear-gradient(180deg, #ffffff, #f1fbff);
 padding:18px;
 border-radius:12px;
 box-shadow:0 12px 36px rgba(3,102,214,0.06);
 z-index:60;
}

/* adjust percentage-box border color so it reads on the lighter container */
.percentage-box {
 background: rgba(3,102,214,0.06);
 border-radius:14px;
 box-shadow:0 8px 32px rgba(30,41,59,0.06),0018px rgba(56,189,248,0.04);
 border:1px solid rgba(56,189,248,0.08);
 padding:20px 26px; /* reduced */
 min-width:260px;
 max-width:320px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:12px;
}

/* Radial diagram sizing inside the compact box */
.radial-chart-wrapper { width:212px; height:177px; display:flex; align-items:center; justify-content:center; }
.radial-number { font-size:1.2rem; }

/* Radial animation styles */
.radial-chart-wrapper {
 width:212px;
 height:177px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.radial-svg { width:100%; height:124%; overflow:visible; }

.radial-bg { stroke: rgba(0,0,0,0.06); }
.radial-anim { transition: stroke-dashoffset 3000ms cubic-bezier(.2,.9,.2,1); transform-origin: center; }

/* Color the animated strokes to match labels */
.outer-fg { stroke: #6366f1; }
.middle-fg { stroke: #059669; }
.inner-fg { stroke: #ef4444; }

/* Color the radial percentage values per modality: audio (blue), video (green), verified (red) */
.radial-values .radial-item:nth-child(1) .radial-number {
 color: #2563eb; /* blue for audio */
}
.radial-values .radial-item:nth-child(2) .radial-number {
 color: #059669; /* green for video */
}
.radial-values .radial-item:nth-child(3) .radial-number {
 color: #ef4444; /* red for verified */
}

/* Ensure circles use correct stroke-dasharray values via binding; initial dashoffset set in component to circumference (hidden) */

.radial-values { display:flex; flex-direction:row; gap:53px; }
.radial-item { display:flex; gap:10px; align-items:center; }
.radial-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:999px; }
.icon-audio { background: linear-gradient(90deg,#eef2ff,#e0f2fe); color:#0550ff; padding:4px; border-radius:6px; }
.icon-video { background: linear-gradient(90deg,#ecfdf5,#d1fae5); color:#059669; padding:4px; border-radius:6px; }
.icon-verified { background: linear-gradient(90deg,#fff1f2,#fee2e2); color:#ef4444; padding:4px; border-radius:6px; }

.radial-number { font-size:1.4rem; font-weight:800; color:#0f172a; }
.radial-label { font-size:0.95rem; color:#475569; }
.radial-detail { font-size:0.9rem; color:#6b7280; margin-top:4px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 .radial-anim { transition: none !important; }
}

/* Ensure layout is responsive: on small screens keep it centered and full-width */
@media (max-width:900px) {
 .validation-result-container {
 position: static;
 right: auto;
 top: auto;
 width:100%;
 max-width:100%;
 padding:18px 12px;
 border-radius:12px;
 margin:0 12px 18px 12px;
 }

 .percentage-box {
 min-width: auto;
 max-width:100%;
 padding:18px;
 }

 .radial-chart-wrapper {
 width:212px;
 height:177px;
 }
}

.validation-template-left .validation-result-container {
 position: relative;
 right: auto;
 top: auto;
 width:100%;
 max-width:900px;
 margin:12px 0 4px 0;
 padding:16px;
 border-radius:12px;
 box-shadow:0 8px 32px rgba(3,102,214,0.06);
 background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.validation-template-left .percentage-box { max-width:100%; min-width: auto; padding:16px; }
.radial-chart-wrapper { width:212px; height:177px; }

/* Responsive adjustments: ensure left panel width is respected on smaller screens */
@media (max-width:1200px) {
 .validation-template-flex { grid-template-columns:48%1fr; }
 .validation-side-left { width:48%; }
}
@media (max-width:1000px) {
 .validation-template-right { display: none; }
 .validation-template-flex { grid-template-columns:1fr; }
 .validation-template-left .radial-chart-wrapper {
 width:212px;
 height:177px;
 }
}

/* 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;
}

/* Summary card for investigation evaluation */
.summary-card {
 margin-top:32px;
 background: rgba(56,189,248,0.08);
 border-radius:12px;
 border:2px solid rgba(99,102,241,0.15);
 box-shadow:0024px rgba(99,102,241,0.12);
 padding:24px 32px;
 max-width:420px;
 text-align: left;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.summary-title {
 font-size:1.25rem;
 font-weight:700;
 color: #2563eb;
 margin-bottom:10px;
 letter-spacing:1px;
}

.summary-text {
 font-size:1.08rem;
 color: #23272b;
 font-weight:500;
 margin:0;
}

/* Status chips/badges for result */
.status-chip {
 display: inline-block;
 font-size:0.85rem;
 padding:4px 10px;
 border-radius:8px;
 font-weight:600;
}

 .status-chip.active {
 background: #dcfce7;
 color: #15803d;
 }

 .status-chip.archived {
 background: #fee2e2;
 color: #991b1b;
 }
/* Modal styles for report summary */
.modal-overlay {
 position: fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background: rgba(30,41,59,0.65);
 z-index:2000;
 display: flex;
 align-items: center;
 justify-content: center;
 animation: fadeInUp0.4s;
}

.modal-content {
 background: #fff;
 border-radius:18px;
 box-shadow:0 8px 32px #38bdf844,0 2px 16px #6366f144;
 padding:36px 44px 28px 44px;
 min-width:340px;
 max-width:480px;
 color: #23272b;
 position: relative;
 outline: none;
}

.modal-title {
 font-size:2rem;
 font-weight:800;
 color: #2563eb;
 margin-bottom:18px;
 letter-spacing:1px;
}

.modal-section {
 margin-bottom:18px;
}

.modal-close {
 position: absolute;
 top:18px;
 right:24px;
 background: none;
 border: none;
 font-size:2rem;
 color: #2563eb;
 cursor: pointer;
 z-index:10;
}

.report-actions, .modal-section h3 {
 margin-top:18px;
}


.report-btn {
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
  color: #fff;
  font-weight:700;
  border: none;
  border-radius:999px;
  padding:0.5rem 1.4rem;
  margin-right:12px;
  margin-bottom:8px;
  cursor: pointer;
  box-shadow:0 2px 16px #38bdf888;
  display: inline-flex;
  align-items: center;
  gap:8px;
  font-size:1rem;
  transition: background 0.2s, box-shadow 0.2s;
}

.report-btn:hover {
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
  color: #bae6fd;
  box-shadow:0 2px 24px #bae6fd88;
}

.icon-report::before {
 content: "\1F4C4";
 font-size:1.2em;
 margin-right:4px;
}

.icon-download::before {
 content: "\1F4BE";
 font-size:1.2em;
 margin-right:4px;
}

.icon-email::before {
 content: "\2709";
 font-size:1.2em;
 margin-right:4px;
}

.modal-content h3 {
 font-size:1.1rem;
 color: #2563eb;
 font-weight:700;
 margin-bottom:6px;
}

.modal-content p {
 font-size:1rem;
 color: #23272b;
 margin-bottom:0;
}

/* Dashboard header styles */

.dashboard-header {
  background: linear-gradient(90deg, rgba(30,41,59,0.92) 0%, #38bdf8 100%);
  padding:12px 0 10px 0;
  color: #fff;
  box-shadow:0 2px 16px #2563eb44;
  position: relative;
}

.dashboard-header-content {
 display: flex;
 align-items: center;
 justify-content: center;
 max-width:1200px;
 margin:0 auto;
 padding:032px;
}

.dashboard-logo {
 width:64px;
 height:64px;
 border-radius:50%;
 background: #fff;
 box-shadow:0 2px 8px #38bdf844;
 margin-right:24px;
}

.dashboard-title-block {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.dashboard-title {
 font-size:1.45rem;
 font-weight:900;
 letter-spacing:2px;
 color: #fff;
}

.dashboard-date {
 font-size:0.95rem;
 color: #bae6fd;
 margin-top:2px;
}

.header-btns-right {
 display: flex;
 align-items: center;
 gap:16px;
}

/* Top hero bar */
.hero-bar {
 width:100%;
 background: linear-gradient(90deg, #64748b, #00d4ff);
 color: #e6f2ff;
 padding:0px 0;
 box-shadow:0 8px 36px #bae6fd;
}
.hero-inner {
 max-width:1200px;
 margin:0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap:12px;
 padding:024px;
}
.hero-title h1 {
 margin:0;
 font-size:1.6rem;
 font-weight:900;
 letter-spacing:1px;
 background: linear-gradient(90deg, #fff, #cceeff);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 color: transparent; /* fallback for browsers respecting color */
}
.hero-sub { color: #bcd9f8; font-size:0.95rem; margin-top:4px; }
.hero-actions { display:flex; align-items:center; gap:8px; }

/* Ensure hero-inner is a positioning context for absolute button */
.hero-inner { position: relative; }

/* Place the More details pill at the right-side corner of the hero bar */
.hero-more-btn {
  position: absolute;
  right: 150px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  /* keep existing visual styles */
  background: linear-gradient(90deg, #0ea5ff, #23272b);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(37,99,235,0.18);
}

.hero-more-btn:hover { transform: translateY(-52%); box-shadow:0 10px 26px rgba(37,99,235,0.22); }

/* Ensure hero title and actions appear inline and centered as a group */
.hero-bar .hero-inner { justify-content: center !important; position: relative; }
.hero-bar .hero-title { text-align: center; }
.hero-bar .hero-actions {
 position: static !important;
 display: flex;
 gap:8px;
 align-items: center;
 margin-left:16px; /* space between title and actions */
}
.hero-bar .hero-more-btn {
 right: -285px;
 top: auto !important;
 transform: none !important;
}

/* Responsive: keep actions inline on small screens but allow wrapping */
@media (max-width:900px) {
 .hero-bar .hero-inner { flex-direction: column; gap:12px; }
 .hero-bar .hero-actions { margin-left:0; }
}

/* Layout containers (left content / right analytics) */
.validation-template-main { padding:18px 20px; }
.validation-template-flex { display: grid; grid-template-columns:360px 1fr; gap:28px; align-items: start; max-width:1200px; margin:0 auto; }

/* Summary cards grid */
.summary-cards { display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:16px; width:100%; }
.summary-card { padding:14px; border-radius:12px; min-height:100px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.summary-card .card-top { font-weight:700; color:#075985; font-size:0.95rem; }
.summary-card .card-value { font-size:1.25rem; font-weight:800; color:#0f3b72; }
.summary-card .card-sub { font-size:0.9rem; color:#64748b; }

/* Metrics pane */
.metrics-pane { width:100%; margin-top:18px; }
.metrics-title { font-size:1.05rem; color:#075985; margin-bottom:10px; font-weight:800; }
.metrics-bars { display:flex; flex-direction:column; gap:10px; }
.metrics-row-item { display:flex; align-items:center; gap:12px; }
.metrics-label {
 width:120px;
 font-weight: 700;
 color: #475569;}
.metrics-bar-bg { flex:1; background:#e6eef8; border-radius:12px; height:12px; overflow:hidden; }
.metrics-bar-fill { height:100%; width:0%; background: linear-gradient(90deg,#38bdf8,#2aa89f); border-radius:12px; transition: width 0.9s cubic-bezier(.2,.9,.2,1); }
.metrics-bar-fill.cyan { background: linear-gradient(90deg,#60a5fa,#06b6d4); }
.metrics-bar-fill.amber { background: linear-gradient(90deg,#fbbf24,#f97316); }
.metrics-value { width:56px; text-align:right; font-weight:700; color:#075985; }

/* Case summary refinements */
.case-summary-section { padding:18px; background: rgba(255,255,255,0.95); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); margin-top:18px; width:100%; max-width:100%; }
.case-summary-grid { display:flex; gap:16px; align-items:flex-start; }
.case-summary-fields { display:flex; flex-direction:column; gap:6px; color:#334155; margin-bottom:12px; }
.case-summary-text { color:#334155; flex:1; margin-top:12px; }

/* Ensure card-modal-case defaults align with wider left panel when present */
.card-modal-case {
 --w:34%; /* default flex width for the card row version */
 --h: calc(100vh - 160px);
 min-width:300px;
 align-self: flex-start;
}

/* Validation results when moved into left column */
.validation-template-left .validation-result-container {
 position: relative;
 right: auto;
 top: auto;
 width:100%;
 max-width:900px;
 margin:12px 0 4px 0;
 padding:16px;
 border-radius:12px;
 box-shadow:0 8px 32px rgba(3,102,214,0.06);
 background: linear-gradient(180deg, #ffffff, #f7fbff);
}

/* small tweak: ensure radial box scales within left column */
.validation-template-left .percentage-box { max-width:100%; min-width: auto; padding:16px; }
.radial-chart-wrapper {
 width:212px;
 height:177px;
}

/* Keep original right-column behaviour but lower priority (in case other pages use it) */
.validation-result-container { position: sticky; top:110px; right:0; width:360px; }

/* Horizontal main row to place validation results and cards side-by-side */
.main-row { display:flex; gap:20px; align-items:flex-start; width:100%; }
.cards-col { flex:1; display:flex; flex-direction:column; gap:16px; }

/* Make validation-result-container take intrinsic width and let cards-col expand */
.validation-result-container { width:auto; max-width:420px; }

/* Align summary-cards to be a vertical stack in cards-col */
.summary-cards { display:flex; flex-direction:column; gap:16px; }
.summary-card { max-width:100%; }

@media (max-width:1000px) {
 .main-row { flex-direction:column; }
 .validation-result-container { max-width:100%; }
 .cards-col { width:100%; }
}

/* Cards row: horizontal layout to fit page width */
.cards-row { display: grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items: start; width:100%; justify-items: stretch; margin-left:0; padding-left:0; position: relative; left:0; }
.card-modal { background: linear-gradient(120deg,#ffffff,#f6faff); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); padding:12px; display:flex; flex-direction:column; }

/* Make all card-modals expand to fill available horizontal space evenly */
.cards-row .card-modal { min-width:280px; height:auto; overflow:hidden; }

/* Remove previous rigid per-card max-widths (selectors kept for compatibility) */
.card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { /* sized by .cards-row .card-modal */ }

.card-modal-header { font-weight:800; color:#075985; margin-bottom:8px; }
.card-modal-body { flex:1; overflow:h; padding-right:8px; }
.card-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

/* Specific inner layouts */
.results-horizontal { display:flex; gap:12px; align-items:center; }
.results-values { display:flex; flex-direction:row; gap:12px; }

/* Summary grid inside summary card modal */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: -8px;
}

/* Ensure metrics bars keep original look */
.metrics-bars { display:flex; flex-direction:column; gap:10px; }
.metrics-row-item { display:flex; align-items:center; gap:12px; }

/* Hide scrollbars where possible and ensure page height fits viewport */
:host {
 margin:0;
 padding:0;
 width:100%;
 height:100%;
 /* Hide both horizontal and vertical scrollbars for this validation page only */
 overflow: hidden;
}

.validation-template-main {
 height: calc(100vh - 120px);
 overflow: hidden;
}

.validation-template-flex {
 height:100%;
 display: flex;
 flex-direction: column;
}

.cards-row .card-modal-body {
 max-height: calc(100vh - 260px);
 overflow-y: auto;
}


/* Responsive: stack cards vertically on small screens */
@media (max-width:1200px) {
 .card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { flex:1145%; max-width:48%; }
}
@media (max-width:900px) {
 .cards-row { flex-direction:column; }
 .card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { width:100%; max-width:100%; min-width:unset; height:auto; }
 .card-modal-body { overflow: visible; max-height: none; }
 .validation-template-main { height: auto; }
}

/* Animations and transitions */
.card-glass { /* existing definitions remain applied */ }

/* small touch: animate radial numbers and card entries */
.summary-card { transform: translateY(6px); animation: enterCard0.48s cubic-bezier(.2,.9,.2,1) both; }
@keyframes enterCard { from { opacity:0; transform: translateY(12px) scale(0.995);} to { opacity:1; transform: translateY(0) scale(1);} }

/* Ensure metrics fills update smoothly on load */
.metrics-bar-fill { will-change: width; }

/* ensure footer won't overlap sticky right panel on small screens */
@media (max-width:600px) { footer { position: static; } }

/* place pre-question summary inside validation header at top-right */
.validation-header {
 position: relative;
}
.validation-header .header-question-summary {
 position: absolute;
 right:24px;
 /* place inside the header (top-right) */
 top:18px;
 background: linear-gradient(90deg, #ffffff, #f1fbff);
 border:1px solid rgba(3,102,214,0.06);
 padding:8px 12px;
 border-radius:10px;
 box-shadow:0 6px 18px rgba(3,102,214,0.06);
 display: flex;
 flex-direction: column;
 align-items: center;
 min-width:160px;
 z-index:60;
}

.validation-header .header-question-summary .question-summary-title {
 font-size:1rem;
 font-weight:800;
 color: #075985;
 margin-bottom:6px;
}

.validation-header .header-question-summary .action-btn {
 padding:6px 10px;
 font-size:0.95rem;
 border-radius:8px;
}

@media (max-width:900px) {
 .validation-header .header-question-summary {
 position: static;
 margin-top:12px;
 right: auto;
 top: auto;
 transform: none;
 min-width: auto;
 }
}

/* Horizontal main row to place validation results and cards side-by-side */
.main-row { display:flex; gap:20px; align-items:flex-start; width:100%; }
.cards-col { flex:1; display:flex; flex-direction:column; gap:16px; }

/* Make validation-result-container take intrinsic width and let cards-col expand */
.validation-result-container { width:auto; max-width:420px; }

/* Align summary-cards to be a vertical stack in cards-col */
.summary-cards { display:flex; flex-direction:column; gap:16px; }
.summary-card { max-width:100%; }

@media (max-width:1000px) {
 .main-row { flex-direction:column; }
 .validation-result-container { max-width:100%; }
 .cards-col { width:100%; }
}

/* Cards row: horizontal layout to fit page width */
.cards-row { display:flex; gap:16px; align-items:flex-start; width:100%; justify-content:flex-start; grid-column:1 / -1; justify-self: start; margin-left:0; padding-left:0; position: relative; left:0; }
.card-modal { background: linear-gradient(120deg,#ffffff,#f6faff); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); padding:12px; display:flex; flex-direction:column; }

/* Make all card-modals expand to fill available horizontal space evenly */
.cards-row .card-modal { flex:1 1 0; min-width:200px; overflow:hidden; }

/* Remove previous rigid per-card max-widths (selectors kept for compatibility) */
.card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { /* sized by .cards-row .card-modal */ }

.card-modal-header { font-weight:800; color:#075985; margin-bottom:8px; }
.card-modal-body { flex:1; overflow:auto; padding-right:8px; }
.card-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }

.cards-row {
 /* Use CSS Grid for a clean3-column layout */
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr)); /*3 columns on wide screens */
 gap:20px;
 align-items: start;
 justify-items: stretch;
 width:153%;
 margin-left:-340px; /* ensure it's flush to left */
}

/* Responsive grid breakpoints */
@media (max-width:1200px) {
 .cards-row {
 grid-template-columns: repeat(2, minmax(0,1fr)); /*2 columns on medium screens */
 }
}
@media (max-width:800px) {
 .cards-row {
 grid-template-columns:1fr; /* stack on small screens */
 }
}

/* Base card styling used by all dashboard cards */
.case-summary-card,
.metrics-card,
.result-chart-card,
.summary-card {
 /* Per-card variables (can be set inline or with additional classes):
 --card-offset-x: shift left/right (example: "-12px" or "8px")
 --card-margin-left: extra margin-left if preferred (example: "8px")
 --card-width: explicit width (e.g. "100%" or "480px"); grid keeps this flexible
 --card-height: explicit height (e.g. "480px")
 */
 --card-offset-x:0px;
 --card-margin-left:0px;
 --card-width: auto;
 --card-height:0px;

 background: linear-gradient(180deg, #ffffff, #f7fbff);
 border-radius:12px;
 box-shadow:0 10px 30px rgba(2,6,23,0.06);
 padding:16px;
 box-sizing: border-box;

 /* Allow nudging via transform (preferred) and margin as fallback */
 transform: translateX(var(--card-offset-x));
 margin-left: var(--card-margin-left);

 /* Width/height controls - width in grid context should usually be "auto" or100% */
 width: var(--card-width);
 min-width:0; /* important for grid children to allow shrinking */
 height: var(--card-height);

 /* Smooth animations when position/size changes */
 transition: transform 280ms cubic-bezier(.2,.9,.2,1),
 margin 280ms cubic-bezier(.2,.9,.2,1),
 width 340ms cubic-bezier(.2,.9,.2,1),
 height 340ms cubic-bezier(.2,.9,.2,1),
 box-shadow 220ms ease;

 /* Ensure content can scroll internally if height is constrained */
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

/* Content area inside card that may scroll if content is taller than allowed height */
.case-summary-card .card-body,
.metrics-card .card-body,
.result-chart-card .card-body,
.summary-card .card-body {
 overflow: auto;
 padding-right:8px;
}

/* Utility classes for quick nudges (small adjustments) */
.nudge-left { --card-offset-x: - 12px; }
.nudge-right { --card-offset-x:12px; }
.nudge-more-left { --card-offset-x: - 24px; }
.nudge-more-right { --card-offset-x:24px; }

/* Utility classes to increase card size */
.card-tall { --card-height:560px; }
.card-taller { --card-height:680px; }
.card-wide { /* span two columns in the grid */
 grid-column: span2; /* makes the card occupy two columns */
}

/* Hover elevation effect to indicate interactivity */
.case-summary-card:hover,
.metrics-card:hover,
.result-chart-card:hover,
.summary-card:hover {
 box-shadow:0 18px 40px rgba(2,6,23,0.10);
 transform: translateX(calc(var(--card-offset-x) *1.2)) translateY(-6px);
}

/* Focus or active state for keyboard users */
.case-summary-card:focus,
.metrics-card:focus,
.result-chart-card:focus,
.summary-card:focus {
 outline:3px solid rgba(59,130,246,0.12);
 outline-offset:4px;
}

/* Example specific defaults (can be overridden inline or with utility classes)
 - These make the case summary slightly wider by default and metrics a bit narrower
*/
.case-summary-card { --card-width: auto; --card-height:0px; }
.metrics-card { --card-width: auto; --card-height:0px; }
.result-chart-card { --card-width: auto; --card-height:0px; }
.summary-card { --card-width: auto; --card-height:0px; }

/* Ensure card content areas handle internal layout gracefully */
.card-title { font-weight:800; color: #075985; margin-bottom:8px; }
.card-subtitle { color: #64748b; font-size:0.95rem; margin-bottom:12px; }

/* Accessibility: ensure sufficient contrast for borders/shadows when scaled */
@media (prefers-reduced-motion: reduce) {
 .case-summary-card,
 .metrics-card,
 .result-chart-card,
 .summary-card {
 transition: none;
 }
}

/* End of dashboard card layout controls */

/* Scoped: Remove internal scrollbar only for the Validation Results card */
.card-modal-results, .card-modal-results .card-modal-body {
 /* Prevent internal scrollbars from appearing inside the results card */
 overflow: visible !important;
 max-height: none !important;
}

/* Hide WebKit scrollbars if any still appear inside results card */
.card-modal-results::-webkit-scrollbar, .card-modal-results .card-modal-body::-webkit-scrollbar {
 width:0px;
 height:0px;
 display: none;
}

/* Hide scrollbars in Firefox/IE for results card */
.card-modal-results, .card-modal-results .card-modal-body {
 -ms-overflow-style: none; /* IE and Edge */
 scrollbar-width: none; /* Firefox */
}

/* Case summary heading */
.case-summary-heading {
 font-weight:800;
 color: #075985;
 margin-bottom:8px;
 font-size:1rem;
}

/* Ensure the Py-Detect Summary heading has spacing above it when present */
.case-summary-heading.pydetect { margin-top:6px; }

/* Nudge the Summary card slightly upward to better align with screenshot */
.card-modal-summary {
 transform: translateY(-12px);
 /* ensure smooth transition and promote to its own layer */
 will-change: transform;
 z-index:5;
}

@media (max-width:900px) {
 /* remove nudge on small screens to prevent overlap */
 .card-modal-summary { transform: none; z-index: auto; }
}