/* --- style.css --- */
:root {
    --primary-color: #198754;
    --secondary-color: #0f5132;
    --button-base-color: #0f5132;
    --button-active-color: #0a3622;
    --background-start: #e8e7e8;
    --background-end: #9eaaa0;
    --table-header-bg: var(--secondary-color);
    --table-header-text: #ffffff;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #f8f9f9;
    --table-row-hover-bg: #e6f5e9;
    --table-border-color: #ced4da;
    --text-color: #21422d;
    --link-color: var(--primary-color);
    --link-hover-color: #116f41;
    --shadow-color: rgba(15, 81, 50, 0.15);
    --shadow-hover-color: rgba(15, 81, 50, 0.3);
    --border-radius: 5px;
    --error-bg: #f8d7da;
    --error-border: #f5c6cb;
    --error-text: #721c24;
    --info-bg: #d4edda;
    --info-border: #c3e6cb;
    --info-text: #155724;

    --parallax-x: 0px;
    --parallax-y: 0px;
}

html {
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-end);
    background-image: linear-gradient(
        to bottom,
        var(--background-start) 0%,
        var(--background-start) 90%,
        var(--background-end)
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

body::before {
    content: '';
    position: fixed;
    width: calc(100vw + 100px);
    height: calc(100vh + 100px);
    top: -50px;
    left: -50px;
    z-index: -1;
    background-image: url('bg.png');
    background-repeat: repeat;
    background-size: auto;
    background-position: center center;

    transform: translate(var(--parallax-x), var(--parallax-y));

    /* --- ADJUSTED TRANSITION --- */
    /* Longer duration and ease-out for smoother feel */
    transition: transform 0.3s ease-out; /* Was 0.1s linear */

    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}


.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 30px;
    background-color: #ffffff;
    box-shadow: 0 6px 20px var(--shadow-color);
    border-radius: var(--border-radius);
    width: auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.site-logo-link {
    display: block;
    width: fit-content;
    max-width: 180px;
    margin: 0 auto 30px auto;
    text-decoration: none;
    color: var(--primary-color);
}

.site-logo {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 3px 4px var(--shadow-color));
}

.site-logo-link:hover .site-logo,
.site-logo-link:focus .site-logo {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 12px var(--shadow-hover-color));
}

h1, h2 {
    color: var(--secondary-color);
    margin-top: 0;
    padding-bottom: 10px;
    text-align: center;
}
 h1 { margin-bottom: 0; }
 h2 {
     color: var(--primary-color);
     border-bottom: 1px solid var(--table-border-color);
     text-align: left;
     margin-bottom: 20px;
 }
 h3.article-title {
     color: var(--secondary-color);
     text-align: left;
     margin-bottom: 15px;
     padding-bottom: 5px;
     border-bottom: 1px dashed var(--table-border-color);
 }

hr {
    border: 0;
    height: 2px;
    background-color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 30px;
}

.table-wrapper { overflow-x: auto; margin-bottom: 20px; }
.table-wrapper > table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 8px var(--shadow-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.table-wrapper > table th,
.table-wrapper > table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
    vertical-align: top;
    line-height: 1.4;
}

.table-wrapper > table td:nth-child(3) {
    overflow-wrap: break-word;
    word-break: break-word;
}

.table-wrapper > table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}
.table-wrapper > table thead th.no-sort {
    cursor: default;
}
.table-wrapper > table thead th::after {
    content: '';
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--table-header-text);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.table-wrapper > table thead th.sort-asc::after {
     content: '\25B2';
     opacity: 1;
}
.table-wrapper > table thead th.sort-desc::after {
     content: '\25BC';
     opacity: 1;
}
.table-wrapper > table thead th.sort-asc:hover::after,
.table-wrapper > table thead th.sort-desc:hover::after {
     opacity: 0.8;
}
.table-wrapper > table th:last-child {
     cursor: default;
}
.table-wrapper > table th:last-child::after {
    content: '';
}

.table-wrapper > table tbody tr {
    background-color: var(--table-row-bg);
    transition: background-color 0.2s ease;
}
.table-wrapper > table tbody tr:nth-child(even) {
    background-color: var(--table-row-alt-bg);
}
.table-wrapper > table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}
.table-wrapper > table td:last-child {
    white-space: nowrap;
    text-align: center;
}

.article-content-wrapper { margin-top: 20px; padding: 20px; border: 1px solid var(--table-border-color); border-radius: var(--border-radius); background-color: var(--table-row-alt-bg); overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.article-content-wrapper table { margin-top: 15px; width: 100%; max-width: 100%; table-layout: auto; box-shadow: none; border: 1px solid #cccccc; border-radius: 0; overflow: visible; border-collapse: collapse; }
.article-content-wrapper table td, .article-content-wrapper table th { padding: 8px 10px; border: 1px solid #cccccc; vertical-align: top; text-align: left; white-space: normal !important; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; color: var(--text-color); }
.article-content-wrapper table th { background-color: #e9ecef !important; color: var(--text-color) !important; font-weight: bold !important; }
.article-content-wrapper table tr[style*="background-color"] { background-color: inherit !important; }
.article-content-wrapper table tr:nth-child(even) { background-color: #f8f9fa !important; }
.article-content-wrapper table tr:nth-child(odd) { background-color: #ffffff !important; }
.article-content-wrapper table td.col-narrow { width: 10%; }
.article-content-wrapper table td.col-medium { width: 30%; }
.article-content-wrapper table td.col-wide   { width: 60%; }
.article-content-wrapper table td.col-number { text-align: right; width: 5%; }
.article-content-wrapper table td.col-label  { font-weight: 600; }
.article-content-wrapper form { display: none; }
.article-content-wrapper div[style*="padding: 5px"] { margin-bottom: 15px !important; padding: 0 !important; }

a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus { color: var(--link-hover-color); text-decoration: underline; outline: 2px solid var(--link-hover-color); outline-offset: 2px; }
a:focus:not(:focus-visible) { outline: none; }
.action-link { display: inline-block; padding: 6px 14px; background-color: var(--link-color); color: #ffffff; border-radius: var(--border-radius); font-size: 0.9em; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.action-link:hover, .action-link:focus { background-color: var(--link-hover-color); text-decoration: none; color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-color: var(--secondary-color); outline: 2px solid var(--link-hover-color); outline-offset: 1px; }
.action-link:focus:not(:focus-visible) { outline: none; }
.back-link { display: inline-block; margin-bottom: 25px; padding: 8px 15px; background-color: var(--secondary-color); color: #ffffff; border: 1px solid transparent; border-radius: var(--border-radius); font-size: 0.9em; transition: background-color 0.2s ease, border-color 0.2s ease; }
.back-link:hover, .back-link:focus { background-color: #0b3d25; text-decoration: none; color: #ffffff; border-color: var(--primary-color); outline: 2px solid var(--primary-color); outline-offset: 1px; }
.back-link:focus:not(:focus-visible) { outline: none; }

.year-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    text-align: center;
}
.year-list a {
  font-family: inherit;
  display: inline-block;
  width: 8em;
  height: 2.6em;
  line-height: 2.5em;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--button-base-color);
  transition: color 0.5s;
  z-index: 1;
  font-size: 17px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--button-base-color);
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  vertical-align: middle;
}
.year-list a::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--button-base-color);
  height: 150px;
  width: 200px;
  border-radius: 50%;
  top: 100%;
  left: 100%;
  transition: all 0.7s;
}
.year-list a:hover { color: #fff; text-decoration: none; }
.year-list a:hover::before { top: -30px; left: -30px; }
.year-list a:active::before { background: var(--button-active-color); transition: background 0s; }
.year-list a:focus { outline: 2px solid #007bff; outline-offset: 2px; }
.year-list a:focus:not(:focus-visible) { outline: none; }

.no-content { color: #6c757d; font-style: italic; font-size: 0.9em; cursor: default; }
.error-message { color: var(--error-text); background-color: var(--error-bg); border: 1px solid var(--error-border); padding: 12px 18px; margin-bottom: 20px; border-radius: var(--border-radius); font-weight: 500; }
.info-message { color: var(--info-text); background-color: var(--info-bg); border: 1px solid var(--info-border); padding: 12px 18px; margin-bottom: 20px; border-radius: var(--border-radius); }

pre { background-color: var(--table-row-alt-bg); border: 1px solid var(--table-border-color); padding: 10px; border-radius: var(--border-radius); overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; color: var(--text-color); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    padding-bottom: 0;
    font-size: 0.9em;
    color: #555;
    border-top: 1px solid var(--table-border-color);
    position: relative;
    z-index: 1;
}
footer p { margin: 5px 0; }
.copyright { font-weight: 500; }
.footnote { font-size: 0.85em; color: #666; }
.footnote a { color: var(--link-color); text-decoration: underline; }
.footnote a:hover, .footnote a:focus { color: var(--link-hover-color); text-decoration: none; }

.search-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.input-group {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 600px;
  width: 100%;
}
.input-group::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    font-size: 0.9em;
    z-index: 3;
}

.input {
  height: 50px;
  width: 100%;
  padding: 0 1rem 0 2.8rem;
  margin: 0;
  color: var(--text-color);
  font-size: 1em;
  border: 1px solid var(--table-border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.input:focus, .input:focus-visible {
  border-color: var(--link-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
  z-index: 2;
}