.floating-inspector-card {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: var(--inspector-width, clamp(20rem, 29vw, 28rem));
    padding-bottom: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
    overflow-y: auto;
    background-color: #061527e0;
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(14, 165, 233, 0.3); /* Subtle edge highlight */
    padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    box-sizing: border-box;
    color: #f8fafc;
    font-family: "Oxanium", sans-serif;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 0.65rem + 0.4vw, 1rem); /* consistent spacing between main sections */
}

/* Centered title with a subtle gradient effect */
.inspector-card-title {
    font-size: clamp(1.6rem, 1.05rem + 1.7vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    text-align: center;
}

.inspector-card-content-highlight {
    font-size: clamp(1.45rem, 1rem + 1.4vw, 2rem);
    font-weight: 600;
    margin: 0.25rem 0 0 0;
    text-align: center;
}

.inspector-inline-link {
    color: inherit;
    text-decoration: underline;
    transition: color 0.2s ease;
}

#inspector-card-content p:not(.inspector-card-content-highlight) {
    text-align: justify;
}


/* --- HEADER / RANK SECTION --- */
.inspector-card-rank-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inspector-card-rank-number {
    font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4rem);
    font-weight: 700;
    margin: 0;
    background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.inspector-card-rank-display {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 0.25rem; /* Space between rank number and subtext */
}

.inspector-card-rank-subtext {
    font-size: clamp(0.9rem, 0.78rem + 0.45vw, 1.12rem);
    color: #94a3b8;
    margin: 0;
    padding: 0 0 clamp(0.45rem, 0.3rem + 0.5vw, 0.95rem) 0; /* Padding to align with the rank number */
}

/* --- INCIDENT SUB-CARDS --- */
.inspector-card-incident-info {
    background: rgba(255, 255, 255, 0.03); /* Slight glass effect */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.38rem;
    padding: clamp(0.75rem, 0.65rem + 0.45vw, 1rem);
    margin-bottom: clamp(0.55rem, 0.45rem + 0.35vw, 0.75rem);
    transition: background 0.2s ease;
}

.inspector-card-incident-info:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Contextual left-borders based on threat type */
.incident-card-attacker {
    border-left: 3px solid #ef4444; /* Cyber Red */
}
.incident-card-receiver {
    border-left: 3px solid #0ea5e9; /* Cyber Cyan */
}

.inspector-card-incident-name {
    font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.12rem);
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #f1f5f9;
    letter-spacing: 0.5px;
}

/* --- METADATA GRID --- */
.incident-meta-grid {
    display: grid;
    grid-template-columns: 16ch auto; /* Two columns */
    gap: 0.75rem 0.5rem;
    margin-bottom: 1rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: clamp(0.62rem, 0.56rem + 0.18vw, 0.75rem);
    font-weight: 600;
    color: #64748b; /* Muted slate */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.meta-value {
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.88rem);
    color: #cbd5e1;
    text-overflow: ellipsis;
}

/* --- DESCRIPTION --- */
.incident-description-container {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 0.75rem;
}

.incident-list-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1.0em 0.88rem;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
}

.incident-list-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.88rem);
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.incident-list-card summary::-webkit-details-marker {
    display: none;
}

.incident-list-card summary::after {
    content: "▾";
    font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.88rem);
    color: #f8fafc;
    transition: transform 0.2s ease;
}

.incident-list-card[open] > summary::after {
    transform: rotate(180deg);
}

.incident-list-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.incident-description-toggle {
    cursor: pointer;
}

.inspector-card-incident-description {
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.88rem);
    line-height: 1.5;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
    text-align: left;
}


.inspector-card-threat-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.inspector-card-threat-bar-name {
    margin-top: 0.25rem;
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.88rem);
    color: #f1f5f9;
}

.inspector-card-threat-bar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: clamp(0.62rem, 0.56rem + 0.18vw, 0.75rem);
}

.inspector-card-incidents-per-year {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 0.75rem 0.88rem;
    background: rgba(255, 255, 255, 0.03);
}

.inspector-card-incidents-per-year-title {
    margin: 0 0 0.5rem 0;
    font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.88rem);
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.inspector-card-incidents-per-year-graph {
    width: 100%;
    height: clamp(10rem, 5rem + 6vw, 10.8rem);
}

.inspector-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: clamp(9rem, 7rem + 8vw, 15rem);
    object-fit: contain;
    height: auto;
    margin: 0 0 0.38rem 0;
}

.inspector-card-country-subheading {
    text-align: right;
    margin: 0;
    padding: 0;
}

/* OVERLAY & ANIMATION */
@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.incident-info-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.85rem, 0.65rem + 0.9vw, 1.5rem);
    background: rgba(2, 6, 23, 0.65); /* Slightly more transparent */
    backdrop-filter: blur(8px); /* Stronger blur for depth */
}

/* MAIN MODAL WINDOW */
.incident-info-modal {
    position: relative;
    width: min(57.5rem, 100%);
    max-height: min(88vh, 57.5rem);
    overflow-y: auto;
    border-radius: clamp(0.8rem, 0.65rem + 0.45vw, 1rem);
    padding: clamp(1rem, 0.7rem + 1.2vw, 2rem); /* Increased breathing room */
    background: linear-gradient(145deg, rgba(15, 30, 50, 0.95) 0%, rgba(2, 6, 23, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255,255,255,0.05) inset, /* Inner glass border */
        0 10px 30px rgba(56, 189, 248, 0.05); /* Subtle cool glow */
    color: #f8fafc;
    animation: modalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* HEADER SECTION */
.incident-info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(0.85rem, 0.65rem + 0.8vw, 1.5rem);
    margin-bottom: clamp(0.7rem, 0.5rem + 0.8vw, 1.25rem);
    padding-bottom: clamp(0.7rem, 0.5rem + 0.8vw, 1.25rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.incident-info-modal-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.incident-info-modal-title {
    margin: 0;
    font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #ffffff 0%, #cbd5e1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.incident-info-modal-incident-name {
    margin: 0;
    font-size: clamp(0.88rem, 0.78rem + 0.35vw, 1.12rem);
    font-weight: 600;
    color: #38bdf8;
}

/* RANK PILL - Redesigned as a sleek badge */
.incident-info-modal-rank-pill {
    display: inline-flex;
    align-items: center; /* Changed from baseline for better symmetry */
    gap: 0.5rem;
    padding: 0.38rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.02));
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.05);
    white-space: nowrap; /* No text break to keep the pill compact */
}

.incident-info-modal-rank-number {
    font-size: clamp(1rem, 0.82rem + 0.7vw, 1.5rem);
    font-weight: 700;
    margin: 0;
    color: #38bdf8; /* Accent color to make it pop */
}

/* FLAG CARD */
.incident-info-modal-flag-card {
    flex-shrink: 0;
    width: clamp(9.5rem, 8.2rem + 4.3vw, 13.75rem); /* Fixed width prevents awkward scaling */
    padding: clamp(0.65rem, 0.5rem + 0.6vw, 1rem);
    border-radius: clamp(0.5rem, 0.4rem + 0.35vw, 0.75rem);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.incident-info-modal-flag-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.04);
}

.incident-info-modal-flag {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.38rem;
    object-fit: contain;
}

/* BODY SECTION */
.incident-info-modal-body {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* SHARED CARD STYLES */
.incident-info-modal-threat-card,
.incident-info-modal-description-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: clamp(0.55rem, 0.45rem + 0.4vw, 0.75rem);
    padding: clamp(0.8rem, 0.6rem + 0.9vw, 1.5rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* THREAT CARD SPECIFICS */
.incident-info-modal-threat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 0.63rem;
    width: fit-content;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.incident-info-modal-description-card {
    width: 100%;
    flex: 1;
}

/* TYPOGRAPHY UPDATES */
.inspector-card-incident-name {
    margin: 0 0 1rem 0;
    font-size: clamp(1rem, 0.86rem + 0.5vw, 1.25rem);
    font-weight: 600;
    color: #f1f5f9;
}

.meta-label {
    font-size: clamp(0.58rem, 0.54rem + 0.15vw, 0.69rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #94a3b8; /* Slate gray for secondary text */
}

.incident-info-modal-metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 0.88rem 0 1rem 0;
}

.incident-info-modal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.63rem 0.75rem;
    border-radius: 0.63rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.incident-info-modal-meta-item .meta-value {
    color: #f8fafc;
    font-size: clamp(0.69rem, 0.63rem + 0.2vw, 0.82rem);
    line-height: 1.5;
}

.incident-info-modal-description {
    font-size: clamp(0.8rem, 0.74rem + 0.25vw, 0.94rem);
    line-height: 1.7;
    margin: 0.5rem 0 0 0;
    color: #cbd5e1; /* Slightly muted text for better readability */
}