:root {
  --bg-color: #f4f5f7; --text-color: #222; --card-bg: #fff; --form-bg: #fff; --input-bg: #fff; --input-border: #ccc;
  --primary-btn: #1976d2; --accent: #d84315; --highlight: #1976d2; --table-head: #e0e0e0; --table-border: #ccc;
  --table-row: #f9f9f9; --subtext: #666; --good: #2e7d32; --warn: #ef6c00; --poor: #c62828;
}

[data-theme="dark"] {
  --bg-color: #121212; --text-color: #e0e0e0; --card-bg: #1e1e1e; --form-bg: #181a1f; --input-bg: #191c20; --input-border: #333;
  --primary-btn: #1976d2; --accent: #ffe082; --highlight: #90caf9; --table-head: #232b39; --table-border: #444;
  --table-row: #2a3342; --subtext: #aaa; --good: #00e676; --warn: #ffca28; --poor: #ff5252;
}

body { font-family: 'Segoe UI', 'Arial', sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 0 0 2rem 0; }
#theme-toggle { position: absolute; top: 15px; right: 20px; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--input-border); padding: 8px 12px; border-radius: 4px; cursor: pointer; }
h1 { font-size: 2.4em; font-weight: 700; margin: 2.5rem 0 0.5rem 0; text-align: center; color: var(--text-color); }
h2, h3, h4 { color: var(--accent); margin-top: 0; }

.section-card { background: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); padding: 2rem; margin: 2rem auto; max-width: 96vw; box-sizing: border-box; }
#main-form { max-width: 700px; margin: 0 auto 2rem auto; background: var(--form-bg); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); padding: 2rem; }
label { display: block; font-weight: 500; margin: 1em 0 0.3em 0; color: var(--highlight); }
input, select { width: 100%; background: var(--input-bg); color: var(--text-color); border: 1px solid var(--input-border); padding: 0.7rem; border-radius: 4px; box-sizing: border-box; }
button { background-color: var(--primary-btn); color: #fff; padding: 0.7rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; margin-top: 1em; font-size: 1.05em; font-weight: bold; }
button:hover { filter: brightness(1.1); }

/* Custom Filters UI */
.filter-group { display: inline-flex; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; overflow: hidden; margin-left: 15px; }
.filter-btn { background: transparent; color: var(--text-color); border: none; padding: 6px 15px; cursor: pointer; margin: 0; font-size: 0.9em; font-weight: normal; border-right: 1px solid var(--input-border); border-radius: 0; }
.filter-btn:last-child { border-right: none; }
.filter-btn.active { background: var(--highlight); color: #fff; font-weight: bold; }

/* Vitals Scorecard */
.score-container { display: flex; align-items: center; gap: 20px; margin-bottom: 1.5rem; background: var(--table-head); padding: 1.5rem; border-radius: 8px; }
.score-circle { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: bold; border: 5px solid; }
.vitals-grid { display: flex; gap: 15px; flex-wrap: wrap; flex: 1; }
.vital-box { background: var(--card-bg); border: 1px solid var(--table-border); padding: 10px 15px; border-radius: 6px; flex: 1; min-width: 120px; text-align: center; }
.vital-box span { display: block; font-size: 1.4em; font-weight: bold; margin-top: 5px; }
.good { color: var(--good) !important; border-color: var(--good); }
.warn { color: var(--warn) !important; border-color: var(--warn); }
.poor { color: var(--poor) !important; border-color: var(--poor); }

/* Accordions */
details { background: var(--table-head); padding: 12px; margin-bottom: 10px; border-radius: 6px; border-left: 4px solid var(--highlight); }
summary { font-weight: bold; cursor: pointer; color: var(--text-color); outline: none; font-size: 1.05em;}
summary span.desc { color: var(--subtext); font-weight: normal; font-size: 0.9em; margin-left: 8px; }
ul.insight-list { margin-top: 10px; padding-left: 20px; word-break: break-all; }
ul.insight-list li { margin-bottom: 6px; }
a { color: var(--highlight); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tables & Flex Layout */
.scroll-box { overflow-x: auto; max-height: 500px; border: 1px solid var(--table-border); margin-top: 1rem; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; background: var(--card-bg); }
th, td { border: 1px solid var(--table-border); padding: 0.6rem; text-align: left; font-size: 0.95em;}
th { background: var(--table-head); cursor: pointer; user-select: none; color: var(--highlight); }
th:hover { filter: brightness(1.2); }
tr:nth-child(even) { background: var(--table-row); }

.flex-container { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: stretch; justify-content: space-between;}
.flex-col { flex: 1; min-width: 320px; }
.metric-box { font-size: 0.95em; line-height: 1.6; }

/* Interactive Network Map */
#dependencyGraph { width: 100%; height: 600px; border: 1px solid var(--table-border); border-radius: 8px; background: #0a0a0c; cursor: grab; margin-top: 15px;}
#dependencyGraph:active { cursor: grabbing; }
[data-theme="light"] #dependencyGraph { background: #fdfdfd; }

/* Print Styles */
@media print {
  body { background: #fff; color: #000; padding: 0; }
  #main-form, #theme-toggle, button, .filter-group { display: none !important; }
  .section-card { box-shadow: none; margin: 0 0 2rem 0; padding: 0; page-break-inside: avoid; }
  .scroll-box { max-height: none !important; overflow: visible !important; border: none; }
  table { width: 100%; border: 1px solid #000; page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; display: table-row !important; }
  th, td { border: 1px solid #000; color: #000; }
  th { background: #eee !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; word-break: break-all; }
  details { border-left: 2px solid #000; background: #f9f9f9; display: block; }
  details[open] summary ~ * { display: block; }
  #dependencyGraph { display: none !important; } 
  canvas { max-width: 300px !important; max-height: 300px !important; }
}