:root {
  /* Light mode (default) */
  --bg-body:          #f8f9fa;
  --text-main:        #1a1a1a;
  --text-secondary:   #444444;
  --bg-collapsible:   #e9ecef;
  --bg-collapsible-2: #dee2e6;
  --bg-collapsible-3: #d4d9df;
  --border:           #adb5bd;
  --active-bg:        #ced4da;
  --bg-content:       #e9ecef;
  --bg-table:         #ffffff;
  --table-border:     #dee2e6;
  --link:             #0066cc;
  --link-hover:       #0056b3;
  --link-visited:     #6f42c1;
  --modal-bg:         #ffffff;
  --modal-text:       #212529;
  --modal-border:     #ced4da;
  --overlay:          rgba(0, 0, 0, 0.5);
  --scroll-track:     #f1f1f1;
  --scroll-thumb:     #adb5bd;
  --scroll-thumb-hover: #6c757d;

  /* Adaptive colors for tables / grades in light mode */
  --table-row-severe-bg:   #ffebee;      /* very pale red */
  --table-row-severe-text: #b71c1c;      /* dark readable red */
  --grade-1-color:         #d32f2f;      /* red – high severity */
  --grade-2-color:         #f57c00;      /* orange */
  --grade-3-color:         #fbc02d;      /* yellow */
  --grade-4-color:         #388e3c;      /* green – lower severity */
}


[data-theme="dark"] {
  --bg-body:          #3b404c;
  --text-main:        white;
  --text-secondary:   #cccccc;
  --bg-collapsible:   #1f2325;
  --bg-collapsible-2: #21282c;
  --bg-collapsible-3: #2d363c;
  --border:           #3b404c;
  --active-bg:        #2C3E50;
  --bg-content:       #3b404c;
  --bg-table:         #1f2325;
  --table-border:     #3b404c;
  --link:             #ff6666;
  --link-hover:       hotpink;
  --link-visited:     green;
  --modal-bg:         #3b404c;
  --modal-text:       white;
  --modal-border:     #4a505d;
  --overlay:          rgba(0, 0, 0, 0.65);
  --scroll-track:     #2d3436;
  --scroll-thumb:     #555;
  --scroll-thumb-hover: #777;

  /* Dark mode versions – brighter for visibility on dark background */
  --table-row-severe-bg:   #660000;
  --table-row-severe-text: white;
  --grade-1-color:         #ff5252;
  --grade-2-color:         #ff9800;
  --grade-3-color:         #ffeb3b;
  --grade-4-color:         #66bb6a;
}



body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}



.collapsible,
.collapsible2,
.collapsible3 {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: solid 2px var(--border);
  outline: none;
  font-size: 22px;
  font-weight: bold;
}

.collapsible  { background-color: var(--bg-collapsible);   color: var(--text-main); }
.collapsible2 { background-color: var(--bg-collapsible-2); color: var(--text-main); }
.collapsible3 { background-color: var(--bg-collapsible-3); color: var(--text-main); }

.active,
.collapsible:hover,
.collapsible2:hover,
.collapsible3:hover {
  background-color: var(--active-bg);
}

.collapsible:after,
.collapsible2:after {
  content: '\02795'; /* + */
  font-size: 13px;
  color: var(--text-main);
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* − */
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: var(--bg-content);
}



table {
  background-color: var(--bg-table);
  width: 75%;
  border-collapse: collapse;
  margin: 15px 0;
}

table, th, td {
  border: 3px solid var(--table-border);   /* Stronger 3px borders */
}

th, td {
  padding: 10px 12px;
  line-height: 1.45;
  vertical-align: top;
  text-align: left;
}

table tr#ROW1 {
  background-color: var(--table-row-severe-bg);
  color: var(--table-row-severe-text);
  font-weight: bold;
}

table tr#ROW2 {
  background-color: var(--bg-table);
}

/* Better visibility in dark mode (lighter borders) */
[data-theme="dark"] {
  --table-border: #6a6f7a;   /* Clearer gray – no more blending */
}

/* Grade-specific text colors (add these classes to your grade text/cells) */
.grade-1, .grade1, [data-grade="1"], td.grade-1 {
  color: var(--grade-1-color);
  font-weight: bold;
}
.grade-2, .grade2, [data-grade="2"], td.grade-2 {
  color: var(--grade-2-color);
  font-weight: bold;
}
.grade-3, .grade3, [data-grade="3"], td.grade-3 {
  color: var(--grade-3-color);
  font-weight: bold;
}
.grade-4, .grade4, [data-grade="4"], td.grade-4 {
  color: var(--grade-4-color);
  font-weight: bold;
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: 12px;
  width: 90%;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.25s ease;
  border: 1px solid var(--modal-border);
}

.modal-overlay.active {
  display: flex;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
  opacity: 1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  margin: 0;
  color: var(--modal-text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #777;
  cursor: pointer;
  line-height: 1;
}

.close-btn:hover { color: #000; }

.modal-body {
  line-height: 1.6;
  color: var(--modal-text);
}

/* Scrollbar */
.modal-content::-webkit-scrollbar {
  width: 8px;
}
.modal-content::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Modal buttons */
.modal-trigger,
.modal-btn {
  background-color: #1f2325;
  color: white;
  border: 2px solid #3b404c;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  letter-spacing: 0.3px;
}

.modal-trigger:hover,
.modal-btn:hover {
  background-color: #2c3135;
  border-color: #4a505d;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.modal-trigger:active,
.modal-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background-color: #181b1d;
}

.modal-trigger:focus,
.modal-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 64, 76, 0.4);
}



a:link    { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover   { color: var(--link-hover); }
a:active  { color: var(--link-hover); }


.center {
  margin-left: auto;
  margin-right: auto;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.responsive .right {
  float: right;
  text-align: right;
  width: 50%;
}

.align-right,
.align-left {
  float: left;
  width: 33%;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

div.wrap {
  width: 50%;
  word-wrap: break-word;
}

pre {
  font-family: Arial, Helvetica, sans-serif;
}

ul, li {
  line-height: 1.55;
}

p {
  line-height: 1.25;
}

/* Text sizes */
#text1        { font-size: 40px; }
#bodytexthuge { font-size: 80px; }
#smalltext    { font-size: 14px; }
#bodytext10   { font-size: 30px; font-weight: bold; }
#bodytext1    { font-size: 16px; }

/* Pacifico font */
@font-face {
  font-family: 'pacificoregular';
  src: url('/fonts/pacifico/pacifico-webfont.woff2') format('woff2'),
       url('/fonts/pacifico/pacifico-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

div.pacifico {
  font-family: 'pacificoregular', Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}

/* Legacy popups */
.popup-container,
.popup-container2 {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
  justify-content: center;
  align-items: center;
}

.popup-content,
.popup-content2 {
  background-color: var(--modal-bg);
  color: var(--modal-text);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--modal-border);
  width: 80%;
  max-width: 500px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

#closePopup,
#closePopup2 {
  background-color: #3b404c;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  margin-top: 15px;
}

.show {
  display: block !important;
}


/* Light mode – darker & stronger contrast for readability */
:root {
  --grade-1: #8b0000;     /* dark red – very visible on light bg */
  --grade-2: #a0522d;     /* sienna / muted reddish-brown */
  --grade-3: #b22222;     /* firebrick – strong but not blinding */
  --grade-4: #cd853f;     /* peru / warm muted orange */
  --grade-5: #daa520;     /* goldenrod – clear yellow */
  --grade-6: #556b2f;     /* dark olive green – subdued green */
}

/* Dark mode – keep vivid/bright for visibility on dark background */
[data-theme="dark"] {
  --grade-1: #ff6347;     /* tomato red */
  --grade-2: #ff8c69;     /* salmon */
  --grade-3: #ff9999;     /* light coral */
  --grade-4: #ffdab9;     /* peach puff */
  --grade-5: #fffacd;     /* lemon chiffon */
  --grade-6: #c0e4b5;     /* light mint green */
}

/* Apply colors – no background, just bold text */
.grade-1, .grade1 { color: var(--grade-1); font-weight: bold; }
.grade-2, .grade2 { color: var(--grade-2); font-weight: bold; }
.grade-3, .grade3 { color: var(--grade-3); font-weight: bold; }
.grade-4, .grade4 { color: var(--grade-4); font-weight: bold; }
.grade-5, .grade5 { color: var(--grade-5); font-weight: bold; }
.grade-6, .grade6 { color: var(--grade-6); font-weight: bold; }

td .grade-1, td .grade-2, td .grade-3,
td .grade-4, td .grade-5, td .grade-6,
td span.grade-1, td span.grade-2, td span.grade-3,
td span.grade-4, td span.grade-5, td span.grade-6 {
  padding: 2px 6px;
  display: inline-block;
}

.punishment-na {
  background-color: #4a0000;         /* darker red – light mode */
  color: #ffcccc;                    /* light pinkish-white text for contrast */
  font-style: italic;
  font-weight: 500;
}

[data-theme="dark"] .punishment-na {
  background-color: #2c0000;         /* very dark red-black – fits dark theme better */
  color: #ffbbbb;                    /* slightly softer light red text */
}

.punishment-na:hover {
  background-color: #5a0000;         /* light mode hover – slightly brighter red */
  color: #ffffff;
}

[data-theme="dark"] .punishment-na:hover {
  background-color: #3a0000;         /* dark mode hover */
}