body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
    background-image: url('/tempRepo/combatIntel/images/background.jpg'); /* Placeholder for a space background */
    background-size: cover;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items with space between */
    padding: 10px 20px;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.header-title {
    font-size: 24px;
    color: #00aaff;
    margin-right: 20px;
}

.intel-form {
    display: flex;
    align-items: center;
}

.intel-input {
    width: 300px;
    padding: 8px;
    border: 1px solid #333;
    background-color: #2a2a2a;
    color: #fff;
    margin-right: 10px;
}

.intel-button {
    padding: 8px 15px;
    border: 1px solid #00aaff;
    background-color: #0077cc;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.intel-button:hover {
    background-color: #0055aa;
}

.top-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-nav .menu-item {
    position: relative;
    margin-left: 20px;
}

.top-nav .menu-item a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.top-nav .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1a1a1a;
    border: 1px solid #333;
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-nav .menu-item:hover .dropdown {
    display: block;
}

.top-nav .dropdown li a {
    padding: 10px 20px;
    color: #ccc;
}

.top-nav .dropdown li a:hover {
    color: #00aaff;
}

.main-content {
    display: flex;
    padding: 20px;
    gap: 20px;
    align-items: flex-start; /* Align columns to the top */
    font-size: 12px;
}

.info-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
}

.info-box {
    background-color: #1a1a1a;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    height: 40vh; /* Fixed height based on viewport */
}

.info-box-header {
    background-color: #2a2a2a;
    padding: 10px;
    font-size: 18px;
    color: #00aaff;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.entity-links a {
    color: #00aaff;
    text-decoration: none;
    margin-left: 10px;
    font-size: 14px;
}

.info-box-content {
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto; /* Add vertical scroll for overflow */
}

.info-box-content p {
    margin: 5px 0; /* Reduced line spacing */
}

.chart-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distribute space evenly */
    gap: 5px; /* Reduced gap for tighter packing */
}

.chart-container canvas {
    flex-grow: 1;
    flex-basis: 0; /* Allow canvases to shrink and grow proportionally */
    width: 100%; /* Ensure canvas takes full width */
}

.info-column:nth-child(3) .chart-container canvas {
    max-height: 20%; /* Limit individual chart height in the Top Stats box */
}

.info-column:nth-child(3) .chart-container canvas {
    max-height: 20%; /* Limit individual chart height in the Top Stats box */
}

.chart-container h4 {
    margin: 0; /* Remove default margins */
    padding-top: 5px; /* Add some padding above the title */
    color: #00aaff;
    flex-shrink: 0; /* Prevent h4 from shrinking */
}

.full-height {
    height: calc(80vh + 20px); /* 2x box height + gap */
}

.zkb-link {
    color: #888; /* Lighter color for ZKB links */
    font-size: 0.9em; /* Slightly smaller font size for ZKB links */
}

.text-green {
    color: #28a745; /* Green */
}

.text-orange {
    color: #fd7e14; /* Orange */
}

.text-red {
    color: #dc3545; /* Red */
}