/* wwwroot/css/ip-map.css - Fixed Size & Explicit Bottom/Right Borders */

:root
{
    --grid-line-color: #adb5bd; /* Medium gray lines */
    --container-border-color: #343a40; /* Darker gray frame */
    --map-fixed-size: 512px;
}

.ip-map-container
{
    display: grid;
    grid-template-columns: repeat(var(--map-dimension, 64), 1fr);
    grid-template-rows: repeat(var(--map-dimension, 64), 1fr);
    width: var(--map-fixed-size);
    height: var(--map-fixed-size);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    /* --- Border on Container provides TOP and LEFT edges --- */
    border-top: 1px solid var(--grid-line-color); /* Use line color for consistency */
    border-left: 1px solid var(--grid-line-color);
    /* No border-right or border-bottom needed on container */

    padding: 0;
    box-sizing: border-box;
    background-color: #f8f9fa; /* Optional background */
    overflow: hidden; /* Hide anything poking out */
}

.ip-map-cell
{
    background-color: #e9ecef; /* Default/Unclaimed */
    background-image: none; /* Ensure no other backgrounds */
    /* --- Explicit Bottom & Right Borders ONLY --- */
    border: none; /* Remove any previous border shorthand */
    border-bottom: 1px solid var(--grid-line-color);
    border-right: 1px solid var(--grid-line-color);
    box-sizing: border-box; /* CRITICAL: Keep border inside the cell's box */
    /* --- End Border Method --- */

    position: relative;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

    /* Specific state background colors */
    .ip-map-cell.unclaimed
    {
        background-color: #e9ecef;
    }

    .ip-map-cell.partial
    {
        background-color: #ffc107;
    }

    .ip-map-cell.full
    {
        background-color: #dc3545;
    }

    /* Hover effect - Outline */
    .ip-map-cell:hover
    {
        outline: 2px solid rgba(0, 0, 0, 0.7); /* Kept outline */
        outline-offset: -1px;
        z-index: 10;
    }