/* Top Navigation Panel - Copied from styles.css and adjusted */
#top-nav {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    background: linear-gradient(to bottom, #2F353A, black); /* Gradient to witness page background (now black) */
    padding: 1em 2em; /* Keep padding */
    color: #F7682C; /* Default gold text */
    border-bottom: 2px solid #F7682C; /* Gold bottom border */
    text-align: center; /* Center text for inline elements */
    /* position: fixed; /* Keep nav fixed at the top */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* z-index: 999; /* Ensure it's above most content */
    box-sizing: border-box;
}

#logo {
    height: 130px; /* Keep consistent height */
    width: auto;
    margin-bottom: 1em;
    flex-shrink: 0;
}

#nav-content {
    width: 100%;
    text-align: center;
}

/* Style h2 specifically within the nav panel */
#top-nav h1 {
    color: #FFFFFF; /* Match previous user preference */
    text-align: center !important; /* Force center alignment */
    margin-top: 0;
    margin-bottom: 0.8em;
    font-size: 2em; /* Match previous user preference */
}

.nav-links {
    text-align: center;
}

.nav-links a {
    color: #F7682C;
    text-decoration: none;
    margin: 0 0.75em;
    font-size: 0.9em;
    transition: color 0.2s ease;
    display: inline-block;
}

.nav-links a:hover,
.nav-links a:focus {
    color: #d49d57;
    text-decoration: underline;
}
/* End of Top Nav Styles */

body {
    background-color: black; /* Change background to black */
    color: #eee;
    font-family: sans-serif;
    margin: 0;
    /* Adjust body margin for fixed widget height */
    margin-bottom: 190px; /* Based on 150px widget height + buffer */
    padding: 0;
}

.trainer-container {
    padding: 2em;
    max-width: 900px;
    margin: 2em auto; /* Keep auto horizontal margin */
    margin-top: 0.1em; /* Adjust top margin for nav */
    /* Add padding-top if using fixed nav: */
    /* padding-top: 230px; /* Approximate height of nav */
}

.trainer-container h1 {
    color: #aef;
    border-bottom: 1px solid #555;
    padding-bottom: 0.3em;
    margin-bottom: 0.5em;
}

.trainer-container h2 {
    color: #eee;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.trainer-container p {
    line-height: 1.6;
    color: #ddd;
}

.trainer-container ul,
.trainer-container ol {
    padding-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.trainer-container li {
    margin-bottom: 0.5em;
}

/* Back link styling */
a {
    color: #8af;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Results Panel Styles */
#results-panel {
    display: none; /* Hidden by default - This should be the only display property here */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Increased Size */
    width: 80%;
    max-width: 800px; /* Increased from 600px */
    height: 80%;
    max-height: 650px; /* Increased from 500px */
    /* Dark Theme */
    background-color: #282828; /* Dark background */
    border: 1px solid #555;    /* Darker border */
    color: #eee;               /* Light text */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Adjusted shadow for dark */
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    /* display: flex; <-- REMOVED: JS will set display when showing */
    flex-direction: column;
}
#results-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    /* Dark Theme */
    background-color: #1e1e1e; /* Very dark background for content */
    border: 1px solid #444;    /* Dark border */
    color: #ddd;               /* Slightly dimmer text */
    padding: 15px; /* Slightly more padding */
    margin-top: 15px;
    white-space: pre-wrap;
    font-family: inherit; /* Inherit font from body */
}
#results-panel .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #131528; /* Use nav blue */
    border: 1px solid #3a3d5b; /* Slightly lighter border */
    color: #eee;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-weight: bold;
    cursor: pointer;
    line-height: 23px; /* Adjust for vertical centering */
    text-align: center; /* Center the X */
}
#results-panel .close-button:hover {
    background: #1b1e3a; /* Slightly lighter blue */
}
#results-status-message.victory {
    color: #4CAF50; /* Standard green */
    font-weight: bold;
    font-size: 1.2em;
}
#results-status-message.defeat {
    color: #F44336; /* Standard red */
    font-weight: bold;
    font-size: 1.2em;
}
#results-wait-note {
    font-size: 0.9em;
    color: #aaa; /* Lighter grey for dark theme */
}

/* Style for Download PDF Button */
#download-pdf-button {
    padding: 5px 10px;
    margin-left: 10px; /* Keep some space from status */
    margin-right: 20px; /* Add space from the right edge/close button */
    cursor: pointer;
    /* Add shared button styles */
    background-color: #3498db; /* Use a primary blue */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
#download-pdf-button:hover {
    background-color: #1b1e3a; /* Darker blue on hover */
}
#download-pdf-button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Style for Check Results Button */
#check-results-button {
    margin-top: 20px;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #2F353A;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
#check-results-button:hover {
    background-color: #1b1e3a;
}

/* Shared styles for action buttons */
.action-button {
    padding: 10px 15px;
    cursor: pointer;
    background-color: #2F353A; /* Use nav blue */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    display: inline-block; /* Allow margin */
}

.action-button:hover {
    background-color: #1b1e3a; /* Slightly lighter blue on hover */
}

/* Specific style for print notes button */
#print-notes-button {
    margin-top: 1em; /* Space above the button */
    /* You can add specific colors or styles here if needed */
}

/* Loader animation */
.loader {
    border: 4px solid #555; /* Darker grey */
    border-top: 4px solid #3498db; /* Blue remains */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block; /* Controlled by JS */
    margin-left: 10px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Agent card specific styles */
.agent-image {
    display: block;
    max-width: 300px;
    height: auto;
    margin: 1em auto 1.5em auto;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.clickable-agent-card {
    cursor: pointer;
}

.clickable-agent-card:hover {
    border-color: #aef;
    box-shadow: 0 0 15px rgba(170, 238, 255, 0.5);
}

.clickable-agent-card.audio-playing {
    border-color: #4CAF50; /* Green border when playing */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
}

/* Specific witness glow colors - can be customized */
.sales-trainer-chris-johnson .clickable-agent-card.audio-playing {
    border-color: #4CAF50; /* Example: Gold for John */
    box-shadow: 0 0 15px #4CAF50;
}

/* Tab System - General Styling */
.tab-container {
    display: flex;
    border-bottom: 2px solid #555; /* Darker border */
}

.tab-button {
    padding: 0.8em 1.2em;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: #F7682C; /* Gold color for tabs */
    font-size: 1em;
    margin-right: 5px;
    border-bottom: 3px solid transparent; /* For active indicator */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    position: relative;
    top: 2px;
}

.tab-button:hover {
    color: #ffffff; /* White on hover */
}

.tab-button.active {
    color: #ffffff; /* White color for active tab text */
    border-bottom-color: #F7682C; /* Gold border for active tab */
    font-weight: bold;
}

.tab-content-container {
    /* Add padding or borders if desired for the content area */
    padding: 1em 0;
}

.tab-pane {
    display: none; /* Hide all panes by default */
    animation: fadeIn 0.5s ease-in-out; /* Optional fade-in */
}

.tab-pane.active {
    display: block; /* Show the active pane */
}

.notes-textarea {
    width: 98%;
    height: 400px;
    background-color: #222;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0.5em;
    font-family: inherit;
    font-size: 0.95em;
    margin-top: 0.5em;
}

/* Optional Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ensure headings within tabs are aligned left */
.tab-pane h2,
.tab-pane h3 {
    text-align: left;
    margin-top: 0; /* Reset top margin for headings inside tabs */
}
.tab-pane h2 {
     margin-bottom: 0.8em;
}
.tab-pane h3 {
     margin-bottom: 0.5em;
}

/* Adjust list styles within tabs if needed */
.tab-pane ul,
.tab-pane ol {
    text-align: left;
    margin-left: 1.5em; /* Indent lists slightly */
    margin-bottom: 1em;
}
.tab-pane li {
     margin-bottom: 0.4em;
}

/* Collapsible Rules Panel */
.rules-engagement-panel {
    margin-top: 2em;
    margin-bottom: 1.5em;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #222; /* Slightly different background */
}

.collapsible-button {
    background-color: #2F353A; /* Use nav blue */
    color: #eee;
    cursor: pointer;
    padding: 12px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px 5px 0 0; /* Match panel top corners */
    transition: background-color 0.2s ease;
}

.collapsible-button:hover {
    background-color: #1b1e3a; /* Slightly lighter blue */
}

/* Style for the active state if needed */
.collapsible-button.active {
     background-color: #1e2144; /* Even lighter blue for active */
     border-radius: 5px 5px 0 0; /* Keep top corners rounded */
}

.collapsible-content {
    padding: 0 18px; /* Left/right padding matches button */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background-color: #282828; /* Slightly lighter than button */
    border-radius: 0 0 5px 5px; /* Match panel bottom corners */
}

/* When active, set max-height to allow expansion and add padding */
.collapsible-content.active {
    max-height: 500px; /* Adjust as needed, large enough for content */
    padding: 15px 18px;
}

/* Styles for the list inside the collapsible content */
.collapsible-content ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.5em; /* Adjust list indentation */
    text-align: left; /* Ensure list text is left-aligned */
}

.collapsible-content li {
    color: #ccc; /* Lighter text color for list items */
    margin-bottom: 0.6em; /* Adjust spacing */
}

/* Center the Run ID paragraph */
.run-id-paragraph {
    text-align: center;
    margin-bottom: 0.5em; /* Adjust spacing */
    color: #aaa; /* Slightly dimmer color */
}