/* General Reset & Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    margin: 0;
    padding: 20px;
}

#mainframe {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);    border-radius: 8px;
}

/* Typography */
h1.title {
    color: #003366;
    border-bottom: 2px solid #003366;    padding-bottom: 10px;
    margin-top: 0px;
    margin-block-end: 0em;
}

h2 {
    color: #0056b3;
    border-left: 5px solid #0056b3;
    padding-left: 15px;
    /*margin-top: 40px;*/
    margin-block-start: 0;
    margin-block-end: 0;
}

h3 {
    color: #444;
    margin-top: 5px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

a {
    color: #0056b3;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Responsive Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0px 0;
}

td {
    padding: 10px;
    vertical-align: top;
}

/* Data Tables Styling */
table[align="right"], 
h3 + table {
    font-size: 0.9em;
}

table[align="right"] tr:nth-child(even) {
    background: #f2f2f2;
}

/* Responsive Images and Embeds */
img {
    max-width: 100%;
    height: auto;    border-radius: 4px;
}

embed, iframe {
    max-width: 100%;
    border: 1px solid #ddd;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    #mainframe {
        padding: 20px;
    }    /* Stack profile table columns */
    table, tbody, tr, td {
        display: block;        width: 100%;
    }

    td {
        padding: 5px 0;
    }

    /* Center profile image on mobile */
    td img {
        display: block;        margin: 0 auto 15px;
    }

    /* Handle data tables horizontal scrolling if necessary */
    h3 + table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Footer / Last Updated */
#content > br + a[name="bottom"],
#content > b {
    font-size: 0.85em;
    color: #777;
}

/* Base Styles (Light Theme) */

{ box-sizing: border-box; }body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
#mainframe { max-width: 900px; margin: 0 auto; background: #fff; padding: 40px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; }

h1.title { color: #003366; border-bottom: 2px solid #003366; padding-bottom: 0px; } 
h2 { color: #0056b3; border-left: 2px solid #0056b3; padding-left: 15px; margin-top: 0px; } 
h3 { color: #444; } a { color: #0056b3; text-decoration: none; } a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin: 0px 0; } 
td { padding: 0px; vertical-align: top; } table[align="right"] tr:nth-child(even) { background: #f2f2f2; }

img { max-width: 100%; height: auto; border-radius: 4px; } embed, iframe { max-width: 100%; border: 1px solid #ddd; }

/* Dark Color Scheme */ @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #e0e0e0; }

#mainframe {
    background-color: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

h1.title { color: #90caf9; border-bottom-color: #90caf9; }
h2 { color: #64b5f6; border-left-color: #64b5f6; }
h3 { color: #bbbbbb; }

a { color: #90caf9; }

table[align="right"] tr:nth-child(even) { background: #2a2a2a; }    
embed, iframe { border-color: #444; filter: invert(0.9) hue-rotate(180deg); } /* Optional: adapts PDF viewer visibility */

img { opacity: 0.8; }
img:hover { opacity: 1; }

}

/* Mobile Responsiveness */ @media (max-width: 768px) { #mainframe { padding: 20px; } table, tbody, tr, td { display: block; width: 100%; } td { padding: 5px 0; } td img { display: block; margin: 0 auto 15px; } h3 + table { display: block; overflow-x: auto; white-space: nowrap; } }

/* Tab Container */
.tabs-container {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
}

/* Hide Radio Buttons */
.tab-input {
    display: none;
}

/* Tab Labels (The actual tabs) */
.tab-label {
    padding: 12px 20px;
    cursor: pointer;
    background: #e9ecef;
    margin-right: 4px;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    color: #555;
    transition: all 0.3s ease;
}

.tab-label:hover {
    background: #dee2e6;
}

/* Active Tab Styling */
.tab-input:checked + .tab-label {
    background: #0056b3;
    color: white;
}

/* Tab Content Logic */
.tab-panel {
    display: none;
    width: 100%;
    padding: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 0 0 8px 8px;
    order: 99; /* Ensures content appears below all labels */
}

.tab-input:checked + .tab-label + .tab-panel {
    display: block;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tabs {
  display: flex;
  gap: 0;              /* removes flex spacing */
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #003366;
}

.tab-button {
  margin: 0;           /* removes default button spacing */
  border: none;
  border-right: 1px solid #ccc;  /* optional divider */
  padding: 10px 16px;
  background: #eee;
  cursor: pointer;
}

.tab-button:last-child {
  border-right: none;
}

.tab-button.active {
  background: #007bff;   /* active tab color */
  color: white;          /* active text color */
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .tab-label {
        background: #2a2a2a;
        color: #bbb;
    }
    
    .tab-label:hover {
        background: #333;
    }

    .tab-input:checked + .tab-label {
        background: #90caf9;
        color: #121212;
    }

    .tab-panel {
        background: #1e1e1e;
        border-color: #444;
    }
	
	.tab-button {
	  margin: 0;           /* removes default button spacing */
	  border: none;
	  border-right: 1px solid #ccc;  /* optional divider */
	  background: #555;
	  color: white;
	  cursor: pointer;
	}
	
	.tab-button.active {
	  background: #005b7f;   /* active tab color */
	  color: white;          /* active text color */
	}

    .tabs {
      border-bottom-color: #90caf9;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .tab-label {
        flex: 1 1 auto;
        text-align: center;
        margin-right: 0;
        margin-bottom: 2px;
        border-radius: 4px;
        font-size: 0.9em;
        padding: 10px 5px;
    }
    
    .tab-panel {
        border-radius: 4px;
    }

    .tab-button {
        padding: 10px 2px;
    }
}

ul {
    padding-inline-start: 40px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}