/* ----- Design Tokens ----- */
:root {
  /* Coorsight Gold (from logo sample) */
  --cs-gold:     #C7A654; /* base */
  --cs-gold-600: #B89642; /* hover */
  --cs-gold-700: #9E7E35; /* active/border */

  /* Header baseline */
  --header-bg:   #0E1220;  /* same as other app */
  --header-text: #E6EAF2;

  /* Default to light theme */
  --bg: #F6F7FA;
  --panel: #FFFFFF;
  --text: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
  --primary: var(--cs-gold);
  --accent: var(--cs-gold);
  --shadow: 0 2px 6px rgba(0,0,0,.08);
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Light theme */
html[data-theme="light"] {
  --bg: #F6F7FA;
  --panel: #FFFFFF;
  --text: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;
  --primary: var(--cs-gold);
  --accent: var(--cs-gold);
  --shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Dark theme */
html[data-theme="dark"] {
  --bg: #0f1115;
  --panel: #151923;
  --text: #E6EAF2;
  --muted: #9AA4B2;
  --border: #2A2F3A;
  --primary: var(--cs-gold);
  --accent: var(--cs-gold);
  --shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Legacy compatibility */
:root {
  --card-bg: var(--panel);
}

/* ----- Base Layout ----- */
html,body{margin:0;padding:0;background:var(--bg);font-family:var(--font);color:var(--text);}
.container{max-width:1000px;margin:auto;padding:2rem;padding-top:1rem;}

/* ----- Coorsight Header ----- */
.coorsight-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  height: 60px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo {
  height: 32px;
  width: auto;
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cs-gold);
  letter-spacing: 0.2px;
}

.header-nav {
  display: flex;
  gap: 1.5rem;
}

.nav-item {
  color: var(--header-text);
  opacity: 0.9;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.nav-item.active {
  border-bottom: 2px solid var(--cs-gold);
  opacity: 1;
}

.nav-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Theme Toggle Button */
.icon-btn {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: transparent;
  color: var(--header-text, #E6EAF2);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

html[data-theme="light"] .icon-btn {
  border-color: rgba(0,0,0,.12);
  color: #1f2937;
}

.icon-btn:hover {
  opacity: 0.9;
}

/* Contact Button */
.contact-button {
  color: var(--header-text);
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.contact-button:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--cs-gold);
}

/* ----- Concise Top Area ----- */
.top-area {
  margin-bottom: 2rem;
}

.title-section {
  text-align: center;
  margin-bottom: 1.5rem;
}

.title-section h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
}

.header-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.meta-separator {
  color: var(--border);
}

.uploader-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
}

.file-input-group {
  flex: 1;
  text-align: center;
  max-width: 300px;
}

/* ----- Legacy Report Header (hidden) ----- */
.report-header{
  display: none;
}

/* ----- File Upload Styles ----- */
.upload-section{
  margin-bottom:2rem;
}
.upload-container{
  display:flex;gap:1.5rem;align-items:flex-start;
}
.upload-section input[type=file]{
  margin-bottom:1rem;font-size:1rem;padding:0.5rem;
}
.file-count{
  display:block;margin-top:0.5rem;font-size:0.9rem;color:var(--muted);
}

/* ----- Tutorial Card ----- */
.tutorial-card{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:1rem;box-shadow:var(--shadow);
  max-width:400px;flex-shrink:0;
}
.tutorial-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:0.75rem;
}
.tutorial-title{
  font-size:1rem;font-weight:600;margin:0;color:var(--text);
}
.tutorial-hide{
  background:none;border:none;color:var(--muted);font-size:0.8rem;
  cursor:pointer;text-decoration:underline;padding:0;
}
.tutorial-hide:hover{color:var(--text);}
.tutorial-content{
  font-size:0.8rem;line-height:1.4;
}
.tutorial-list{
  margin:0 0 0.75rem 0;padding-left:1.2rem;
}
.tutorial-list li{margin-bottom:0.5rem;}
.tutorial-list em{color:var(--muted);font-style:italic;}
.tutorial-note{
  margin:0;color:var(--muted);font-size:0.75rem;font-style:italic;
}
.tutorial-card a{color:var(--primary);text-decoration:none;}
.tutorial-card a:hover{text-decoration:underline;}

/* Responsive layout */
@media (max-width: 768px) {
  .header-content {
    padding: 0 1rem;
  }
  
  .header-left {
    gap: 1rem;
  }
  
  .header-nav {
    display: none; /* Hide nav on mobile */
  }
  
  .header-nav .nav-item.active {
    display: none; /* Hide all nav items on mobile */
  }
  
  .header-right {
    gap: 1rem;
  }
  
  /* Toggle icons are already small, no need to hide anything */
  
  .uploader-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .tutorial-card {
    max-width: none;
  }
}

/* ----- Executive Summary Section ----- */
.executive-section{
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  margin:2rem 0;padding:2rem;box-shadow:var(--shadow);
}
.executive-section h2{
  margin:0 0 1.5rem;font-size:1.5rem;font-weight:600;color:var(--text);
}
.executive-content{
  display:flex;gap:2rem;margin-bottom:2rem;align-items:flex-start;
}
@media (max-width: 768px) {
  .executive-content{flex-direction:column;gap:1rem;}
}

/* ----- Activity Card (left side) ----- */
.activity-card{
  flex:0 0 30%;min-width:200px;background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:1.5rem;text-align:center;
}
.activity-badge{
  display:flex;flex-direction:column;align-items:center;margin-bottom:1rem;
}
.activity-emoji{
  font-size:2rem;margin-bottom:0.5rem;
}
.activity-level{
  font-size:1.1rem;font-weight:600;color:var(--text);
}
.activity-driver{
  font-size:0.9rem;color:var(--muted);font-style:italic;
}

/* ----- Narrative Block (right side) ----- */
.narrative-block{
  flex:1;min-width:0;
}
.narrative-text{
  font-size:1rem;line-height:1.6;color:var(--text);margin:0;
}

/* ----- Chart Container ----- */
.chart-container{
  width:100%;height:300px;margin-top:1rem;
}
#activityChart{
  max-height:300px;
}

/* ----- Technical Overview Section ----- */
.technical-section{
  margin:2rem 0;
}
.technical-section h2{
  margin:0 0 1.5rem;font-size:1.5rem;font-weight:600;color:var(--text);
}
.technical-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;
}
@media (max-width: 768px) {
  .technical-cards{grid-template-columns:1fr;gap:1rem;}
}

/* ----- Technical Discipline Cards ----- */
.tech-card{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem;
}

/* Top Row: Activity Card + Discipline Text */
.tech-card-header{
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem;
}

.tech-activity-card{
  flex-shrink:0;
}

.tech-activity-badge{
  display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;
  border-radius:8px;border:2px solid var(--border);
  background:var(--bg);
}

.tech-activity-emoji{
  font-size:1.2rem;
}

.tech-activity-level{
  font-size:0.8rem;font-weight:600;text-transform:uppercase;
}

.tech-discipline-info{
  flex:1;
}

.tech-discipline{
  font-size:1.1rem;font-weight:600;color:var(--text);margin:0 0 0.25rem;
}

.tech-focus-area{
  font-size:0.85rem;color:var(--muted);margin:0;
}

/* Summary Text */
.tech-summary-text{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:0.75rem;margin-bottom:1rem;font-size:0.85rem;
  color:var(--text);
}

/* Middle Row: Numbers Cards */
.tech-numbers-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem;
}

.tech-number-card{
  text-align:center;padding:0.75rem;border-radius:6px;border:1px solid;
}

.tech-number-card.added{
  background:var(--bg);border-color:var(--border);color:var(--text);
}

.tech-number-card.modified{
  background:var(--bg);border-color:var(--border);color:var(--text);
}

.tech-number-card.removed{
  background:var(--bg);border-color:var(--border);color:var(--text);
}

.tech-number-label{
  font-size:0.8rem;font-weight:500;margin-bottom:0.25rem;display:block;
}

.tech-number-value{
  font-size:1.2rem;font-weight:600;
}

/* Bottom Section: Collapsible Table */
.tech-table-section{
  margin-top:1rem;
}

.tech-toggle-btn{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:0.5rem 0.75rem;font-size:0.85rem;cursor:pointer;
  display:flex;align-items:center;gap:0.5rem;width:100%;
  transition:all 0.2s ease;
}

.tech-toggle-btn:hover{
  background:var(--panel);border-color:var(--primary);
}

.tech-toggle-text{
  font-weight:500;color:var(--text);
}

.tech-toggle-icon{
  font-size:0.8rem;color:var(--muted);
}

.tech-table-content{
  margin-top:0.75rem;
}

.tech-auto-comment{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:0.75rem;margin-top:0.75rem;font-size:0.85rem;
  color:var(--text);
}

/* ----- Element Groups Table ----- */
.element-groups{
  margin:1rem 0;
}
.element-groups h4{
  margin:0 0 0.5rem;font-size:0.9rem;font-weight:600;color:var(--text);
}
.element-table{
  width:100%;border-collapse:collapse;font-size:0.8rem;
}
.element-table th,
.element-table td{
  padding:0.5rem;border:1px solid var(--border);text-align:left;
}
.element-table th{
  background:var(--bg);font-weight:600;color:var(--text);
}
.element-table td{
  color:var(--muted);
}

/* ----- Auto Comment ----- */
.auto-comment{
  margin-top:1rem;padding:0.75rem;background:#f0f9ff;border-left:3px solid #0ea5e9;
  border-radius:4px;font-size:0.9rem;color:#1e40af;
}

/* ----- Mapping Summary (collapsed state) ----- */
.mapping-summary{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:1rem;margin:1rem 0;display:flex;justify-content:space-between;align-items:center;
}
.mapping-summary span{
  font-size:0.9rem;color:var(--text);
}
.btn-edit{
  background:var(--panel);border:1px solid var(--border);border-radius:4px;
  padding:0.25rem 0.75rem;font-size:0.8rem;cursor:pointer;
  transition:background-color 0.2s;
}
.btn-edit:hover{
  background:var(--bg);
}

/* ----- Report Footer ----- */
.report-footer{
  text-align:center;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--border);
  font-size:0.8rem;color:var(--muted);
}

/* ----- Print Styles (A4) ----- */
@media print {
  html { color-scheme: light; }
  html, html[data-theme="dark"], html[data-theme="light"] {
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --text: #111827;
    --muted: #6B7280;
    --border: #E5E7EB;
  }
  
  /* Hide header and interactive elements */
  .coorsight-header {
    display: none !important;
  }
  
  .container {
    max-width: none;
    margin: 0;
    padding: 20mm;
  }
  
  .upload-section {
    display: none;
  }
  
  #tutorialCard {
    display: none !important;
  }
  
  .mappingContainer {
    display: none;
  }
  
  .mapping-summary {
    display: none;
  }
  
  .btn-toggle {
    display: none;
  }
  
  .btn-edit {
    display: none;
  }
  
  .btn-primary {
    display: none;
  }
  
  .executive-section {
    page-break-inside: avoid;
    margin: 0 0 20px 0;
  }
  
  .technical-cards {
    page-break-inside: avoid;
  }
  
  .tech-card {
    page-break-inside: avoid;
    margin-bottom: 15px;
  }
  
  .chart-container {
    page-break-inside: avoid;
  }
  
  .report-footer {
    page-break-inside: avoid;
  }
}

/* ----- Legacy styles ----- */
h1{margin:0 0 1rem;font-size:1.8rem;font-weight:600;}
h2{margin:1.5rem 0 .5rem;font-size:1.2rem;font-weight:600;}
input[type=file]{margin-bottom:1.2rem;font-size:1rem;}

/* ----- Card ----- */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}

/* ----- Table ----- */
table{width:100%;border-collapse:collapse;font-size:.95rem;}
th,td{padding:.65rem .75rem;border-bottom:1px solid var(--border);}
th{background:var(--bg);font-weight:600;text-align:left;color:var(--text);}
tbody tr:last-child td{border-bottom:none;}

/* ----- Button ----- */
.btn-primary{
  background: var(--cs-gold);
  color: #0E1220;
  border: 1px solid var(--cs-gold-600);
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  margin-top: 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-primary:disabled{opacity:.4;cursor:default;}
.btn-primary:not(:disabled):hover{background: var(--cs-gold-600); border-color: var(--cs-gold-700);}
.btn-primary:not(:disabled):active{background: var(--cs-gold-700);}

/* ----- Error Messages ----- */
.error-container{
  background:#fff3cd;border:1px solid #ffeaa7;border-radius:var(--radius);
  margin:1rem 0;padding:1rem;color:#856404;
}
.error-container h3{margin:0 0 .5rem;color:#856404;}
.error-message{margin:.25rem 0;padding:.5rem;background:#f8f9fa;border-left:3px solid #ffc107;border-radius:4px;}
.warning-message{margin:.25rem 0;padding:.5rem;background:#f8f9fa;border-left:3px solid #ffc107;border-radius:4px;}
.error-message{background:#f8d7da;border-left-color:#dc3545;color:#721c24;}

/* ----- Director Text ----- */
.director-text{ font-size:1rem; color:#111827; }
.director-text b{ font-weight:700; }

.verdict{ font-weight:800; padding:2px 8px; border-radius:999px; }
.verdict.good{ background:rgba(34,197,94,.12); color:#16a34a; }
.verdict.watch{ background:rgba(199,166,84,.12); color:var(--cs-gold); }
.verdict.risk{ background:rgba(239,68,68,.12); color:#dc2626; }
#directorSummary .rec{ font-weight:600; }

/* ----- Collapsible Mapping ----- */
.mapping-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.btn-toggle {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-toggle:hover {
  background: #e5e7eb;
}

.mapping-content {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}

.mapping-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* ----- Director Summary ----- */
.director-summary{
  background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;
  margin:1.5rem auto;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);
  max-width:900px;
}
.director-summary h2{
  margin:0 0 0.5rem;font-size:1.25rem;font-weight:600;color:var(--text);
}
.summary-subtext{
  font-size:0.875rem;color:#6b7280;margin-bottom:1rem;
}
.project-status-badge{
  display:inline-block;padding:0.25rem 0.75rem;border-radius:9999px;
  font-size:0.75rem;font-weight:600;margin-bottom:1rem;
}
.status-high{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;}
.status-medium{background:rgba(199,166,84,.1);color:var(--cs-gold);border:1px solid rgba(199,166,84,.3);}
.status-low{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;}

/* Key Metrics Tiles */
.metrics-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0.75rem;margin:1rem 0;
}
.metric-tile{
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;
  padding:1rem;text-align:center;
}
.metric-discipline{
  font-size:0.875rem;font-weight:500;color:var(--text);margin-bottom:0.5rem;
}
.metric-activity{
  font-size:0.75rem;font-weight:600;margin-bottom:0.25rem;
}
.metric-impact{
  font-size:0.75rem;color:#6b7280;
}

/* Scenarios List */
.scenarios-section{
  margin:1rem 0;
}
.scenarios-title{
  font-size:0.875rem;font-weight:600;color:var(--text);margin-bottom:0.5rem;
}
.scenarios-list{
  list-style:none;padding:0;margin:0;
}
.scenarios-list li{
  font-size:0.875rem;color:#374151;margin:0.25rem 0;padding-left:0;
}
.scenarios-list li::before{
  content:"";margin-right:0.5rem;
}

/* Recommendations */
.recommendations-section{
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;
  padding:1rem;margin-top:1rem;
}
.recommendations-title{
  font-size:0.875rem;font-weight:600;color:var(--text);margin:0 0 0.5rem;
}
.recommendations-list{
  list-style:none;padding:0;margin:0;
}
.recommendations-list li{
  font-size:0.875rem;color:#6b7280;margin:0.25rem 0;padding-left:0;
}
.recommendations-list li::before{
  content:"•";color:#9ca3af;margin-right:0.5rem;
}
/* Legacy styles removed - using single summary card now */

/* ----- Auto-mapped rows ----- */
.auto-mapped{
  background-color:#e8f5e8;border-left:3px solid #28a745;
}
.auto-mapped::after{
  content:" ✓";color:#28a745;font-weight:bold;margin-left:0.5rem;
}

/* ----- Mapping Grid ----- */
.mapping-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem;
}
.mapping-item{
  background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  padding:0.5rem;display:flex;flex-direction:column;gap:0.3rem;
}
.mapping-item.auto-mapped{
  background:#e8f5e8;border-left:3px solid #28a745;
}
.mapping-code{
  font-weight:600;color:var(--text);font-size:0.9rem;
}
.mapping-select{
  width:100%;padding:0.3rem;border:1px solid var(--border);border-radius:4px;
  font-size:0.8rem;background:var(--card-bg);
}
.mapping-select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,255,0.2);
}