/* ============================================================
   AHP Energy — Main Stylesheet
   Color palette: #2ECC71 (green), #3498DB (blue), #2C3E50 (dark)
   ============================================================ */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:   #2ECC71;
  --blue:    #3498DB;
  --dark:    #2C3E50;
  --darker:  #1a252f;
  --light:   #ECF0F1;
  --white:   #ffffff;
  --gray:    #95A5A6;
  --gray-bg: #f4f6f8;
  --gold:    #F1C40F;
  --red:     #E74C3C;
  --radius:  8px;
  --shadow:  0 2px 12px rgba(0,0,0,.10);
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--gray-bg);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  background: var(--dark);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 700; }
.logo-icon { font-size: 1.5rem; }
.logo-accent { color: var(--green); }
.site-nav { display: flex; gap: 1.5rem; }
.nav-link { color: var(--light); text-decoration: none; font-size: .95rem; padding: .25rem .5rem; border-radius: 4px; transition: background .2s; }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.15); color: var(--white); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: var(--gray); text-align: center; padding: 1rem; font-size: .85rem; margin-top: auto; }

/* ── Main ────────────────────────────────────────────────── */
.site-main { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .65rem 1.4rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .2s, transform .1s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--green); color: var(--white); }
.btn-secondary{ background: var(--blue);  color: var(--white); }
.btn-outline  { background: transparent; border: 2px solid var(--blue); color: var(--blue); }
.btn-large    { padding: .85rem 2rem; font-size: 1.1rem; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 60%, #1e5b44 100%);
  color: var(--white);
  padding: 5rem 2rem 4rem;
  text-align: center;
}
.hero-title { font-size: 2.4rem; line-height: 1.2; margin-bottom: 1rem; }
.accent { color: var(--green); }
.hero-subtitle { font-size: 1.1rem; color: var(--green); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-desc { max-width: 680px; margin: 0 auto 2rem; color: #bdc3c7; font-size: 1rem; line-height: 1.7; }

/* ── Section titles ──────────────────────────────────────── */
.section-title { font-size: 1.6rem; text-align: center; margin-bottom: 2rem; color: var(--dark); }
.method-section, .hierarchy-section, .steps-section { padding: 3.5rem 2rem; }
.method-section { background: var(--white); }
.hierarchy-section { background: var(--gray-bg); }
.steps-section { background: var(--white); }

/* ── Cards ───────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; }
.card { background: var(--gray-bg); border-radius: var(--radius); padding: 1.5rem; text-align: center; border-top: 3px solid var(--green); }
.card-icon { font-size: 2rem; margin-bottom: .75rem; }
.card h3 { margin-bottom: .5rem; color: var(--dark); }
.card p { color: var(--gray); font-size: .9rem; line-height: 1.6; }

/* ── Hierarchy diagram ───────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; }
.hier-level { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hier-node {
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  font-size: .85rem;
  text-align: center;
  min-width: 120px;
  box-shadow: var(--shadow);
  position: relative;
}
.goal-node { border-color: var(--green); border-width: 3px; font-weight: 700; min-width: 280px; background: #eafaf1; }
.criteria-node { border-color: var(--blue); min-width: 140px; }
.alt-node { border-color: var(--gold); min-width: 140px; background: #fefce8; }
.hier-label {
  display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  color: var(--gray); margin-bottom: .2rem; letter-spacing: .05em;
}
.hier-connector-row { display: flex; justify-content: center; padding: .5rem 0; }
.hier-line { width: 80%; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.hier-criteria-row { gap: .5rem; }
.hier-alt-row { gap: .75rem; }

/* ── Steps ───────────────────────────────────────────────── */
.steps-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; max-width: 900px; margin: 0 auto 2rem; }
.step { background: var(--gray-bg); border-radius: var(--radius); padding: 1rem; text-align: center; flex: 1; min-width: 180px; border: 2px solid transparent; }
.active-step { border-color: var(--green); }
.step-num { font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.step-text { font-size: .85rem; color: var(--dark); margin-top: .3rem; }
.step-arrow { font-size: 1.5rem; color: var(--gray); }
.cta-center { text-align: center; }

/* ── Progress bar ────────────────────────────────────────── */
.progress-bar-wrap { margin-bottom: 2rem; }
.progress-bar-label { font-weight: 600; margin-bottom: .5rem; color: var(--dark); }
.progress-track { height: 8px; background: #ddd; border-radius: 4px; overflow: hidden; margin-bottom: .5rem; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 4px; transition: width .4s ease; }
.progress-steps { display: flex; gap: .4rem; flex-wrap: wrap; }
.prog-dot {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #ddd; color: var(--dark); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  transition: background .2s;
}
.prog-dot:hover { background: var(--blue); color: var(--white); }
.prog-dot-done { background: var(--green); color: var(--white); }
.prog-dot-active { background: var(--blue); color: var(--white); }

/* ── Page title ──────────────────────────────────────────── */
.page-title { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--dark); }
.page-title small { font-size: .9rem; color: var(--gray); font-weight: 400; }

/* ── Matrix layout ───────────────────────────────────────── */
.matrix-layout { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem; }
@media (max-width: 900px) { .matrix-layout { grid-template-columns: 1fr; } }

.matrix-box, .saaty-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.matrix-hint { font-size: .875rem; color: var(--gray); margin-bottom: 1rem; }
.matrix-scroll { overflow-x: auto; }

/* ── Matrix table ────────────────────────────────────────── */
.matrix-table { border-collapse: collapse; min-width: 100%; }
.matrix-table th, .matrix-table td { padding: .35rem .45rem; border: 1px solid #ddd; text-align: center; white-space: nowrap; }
.matrix-table thead th { background: var(--dark); color: var(--white); font-size: .8rem; }
.matrix-table .col-head { background: var(--dark); font-size: .75rem; max-width: 100px; white-space: normal; }
.matrix-table .row-head { background: var(--dark); color: var(--white); text-align: left; font-size: .8rem; max-width: 140px; white-space: normal; padding: .4rem .6rem; }
.matrix-table tr:hover td { background: #f0faff; }
.matrix-table tr:hover td input { background: #e8f4fd; }

.cell {
  width: 68px;
  padding: .3rem .4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .875rem;
  text-align: center;
  transition: border-color .2s;
}
.cell:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,152,219,.25); }
.cell-diag { background: #f0f0f0; color: #888; width: 50px; }
.cell-upper { background: #fffde7; font-weight: 600; }
.cell-lower { background: #f5f5f5; color: var(--gray); font-style: italic; }
.cell-invalid { border-color: var(--red) !important; background: #fdecea !important; }

/* ── Consistency box ─────────────────────────────────────── */
.consistency-box {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.7;
  border-left: 4px solid var(--green);
  background: #eafaf1;
}
.consistency-box.warn { border-left-color: var(--red); background: #fdecea; }
.hidden { display: none !important; }

/* ── Matrix actions ──────────────────────────────────────── */
.matrix-actions { display: flex; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ── Saaty table ─────────────────────────────────────────── */
.saaty-box h3 { margin-bottom: .75rem; font-size: 1rem; }
.saaty-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.saaty-table th, .saaty-table td { border: 1px solid #ddd; padding: .4rem .6rem; }
.saaty-table thead th { background: var(--dark); color: var(--white); }
.saaty-table tbody tr:nth-child(even) { background: var(--gray-bg); }
.saaty-note { font-size: .78rem; color: var(--gray); margin-top: .75rem; }

/* ── Weights preview ─────────────────────────────────────── */
.weights-preview { margin-top: 1.25rem; }
.weights-preview h4 { margin-bottom: .5rem; font-size: .9rem; }

/* ── Results page ────────────────────────────────────────── */
.results-page { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.results-header { text-align: center; margin-bottom: 2rem; }
.results-header h1 { font-size: 2rem; color: var(--dark); }
.results-subtitle { color: var(--gray); margin-top: .3rem; }

/* ── Winner banner ───────────────────────────────────────── */
.winner-banner {
  background: linear-gradient(135deg, #1a5c35 0%, #2C3E50 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.winner-icon { font-size: 3rem; }
.winner-text { flex: 0 0 auto; }
.winner-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
.winner-name { font-size: 1.8rem; font-weight: 700; }
.winner-score { font-size: .95rem; color: #bdc3c7; margin-top: .25rem; }
.winner-explanation { flex: 1; font-size: .95rem; line-height: 1.7; color: #bdc3c7; border-left: 2px solid var(--green); padding-left: 1.25rem; }

/* ── Results grid ────────────────────────────────────────── */
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.result-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.result-card h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--dark); border-bottom: 2px solid var(--light); padding-bottom: .5rem; }
.full-width { grid-column: 1 / -1; }
@media (max-width: 800px) { .results-grid { grid-template-columns: 1fr; } }

/* ── Data tables ─────────────────────────────────────────── */
.data-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.data-table th, .data-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--light); text-align: left; }
.data-table thead th { background: var(--dark); color: var(--white); font-weight: 600; }
.data-table tbody tr:hover { background: #f0faff; }
.winner-row { background: #fffde7 !important; font-weight: 600; }
.winner-row:hover { background: #fff9c4 !important; }
.rank-cell { text-align: center; font-size: 1.1rem; }
.alt-name { font-weight: 500; }
.score-cell { font-family: monospace; font-size: .9rem; }

/* ── Bar visualization ───────────────────────────────────── */
.bar-cell { min-width: 120px; }
.bar-wrap { height: 16px; background: #eee; border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--blue); border-radius: 8px; transition: width .6s ease; }
.bar-gold { background: linear-gradient(90deg, var(--gold), #e67e22); }
.bar-blue { background: linear-gradient(90deg, var(--blue), #2980b9); }
.bar-green{ background: linear-gradient(90deg, var(--green), #27ae60); }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 12px; font-size: .8rem; font-weight: 600; }
.badge-ok   { background: #d4efdf; color: #1e8449; }
.badge-warn { background: #fadbd8; color: #922b21; }

/* ── Charts ──────────────────────────────────────────────── */
.charts-section { margin-bottom: 2rem; }
.charts-section h2 { font-size: 1.4rem; margin-bottom: 1.5rem; color: var(--dark); border-bottom: 2px solid var(--light); padding-bottom: .5rem; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.chart-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.chart-card h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--dark); }
.chart-card-wide { grid-column: 1 / -1; }
@media (max-width: 800px) { .charts-grid { grid-template-columns: 1fr; } .chart-card-wide { grid-column: auto; } }

/* ── Export section ──────────────────────────────────────── */
.export-section { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
.export-section h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--dark); }
.export-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Print styles ────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .export-section, .site-nav { display: none !important; }
  .result-card, .charts-section { box-shadow: none; border: 1px solid #ddd; }
  .winner-banner { background: #2C3E50 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: white; }
}