/* ======================================================================
   SHADOWSKINGS — TOWER PANEL
   SERVER-AUTHORITATIVE OUTER TOWER UI
   ====================================================================== */


/* ======================================================================
   PANEL
   ====================================================================== */

.tower-panel {
    padding: 8px;

    background:
        rgba(10, 10, 18, 0.9);

    border:
        1px solid #333;

    border-radius:
        4px;

    color:
        #e5e7eb;
}


/* ======================================================================
   BUILDING ENTRY
   ====================================================================== */

.tower-building-entry {
    padding: 10px;

    background:
        rgba(18, 18, 28, 0.95);

    border:
        1px solid #333;

    border-radius:
        4px;
}


/* ======================================================================
   HEADER
   ====================================================================== */

.tower-building-entry .building-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        6px;

    margin-bottom:
        6px;

    border-bottom:
        1px solid #333;
}


.tower-building-entry .building-name {
    font-size:
        14px;

    font-weight:
        600;

    color:
        #f0e6d2;
}


.tower-building-entry .building-effect {
    font-size:
        12px;

    color:
        #a8b0bd;

    text-align:
        right;
}


/* ======================================================================
   DESCRIPTION
   ====================================================================== */

.tower-building-entry .building-desc {
    margin-bottom:
        10px;

    font-size:
        13px;

    line-height:
        1.4;

    color:
        #b8bec8;
}


/* ======================================================================
   TOWER STATS
   ====================================================================== */

.tower-stat-grid {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        6px;

    margin-bottom:
        10px;
}


.tower-stat {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        6px;

    background:
        rgba(10, 10, 18, 0.75);

    border:
        1px solid #30303c;

    border-radius:
        3px;

    text-align:
        center;
}


.tower-stat span {
    margin-bottom:
        3px;

    font-size:
        11px;

    color:
        #8f98a6;
}


.tower-stat strong {
    font-size:
        14px;

    font-weight:
        600;

    color:
        #f0e6d2;
}


/* ======================================================================
   UPGRADE REQUIREMENTS
   ====================================================================== */

.tower-building-entry .building-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px 14px;

    padding:
        7px 0;

    margin-top:
        4px;

    border-top:
        1px solid #2b2b35;

    font-size:
        12px;

    color:
        #a8b0bd;
}


.tower-building-entry .building-meta span {
    white-space:
        nowrap;
}


/* ======================================================================
   CONSTRUCTION STATUS
   ====================================================================== */

.tower-construction-status {
    margin-top:
        8px;

    padding:
        7px 8px;

    background:
        rgba(55, 48, 72, 0.6);

    border:
        1px solid #665b7a;

    border-radius:
        3px;

    font-size:
        12px;

    color:
        #ddd3ef;

    text-align:
        center;
}


/* ======================================================================
   ACTIONS
   ====================================================================== */

.tower-building-entry .building-actions {
    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        10px;
}


.tower-upgrade-button {
    padding:
        6px 12px;

    background:
        #1f2933;

    border:
        1px solid #475569;

    border-radius:
        3px;

    color:
        #e5e7eb;

    font-size:
        12px;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.tower-upgrade-button:hover:not(:disabled) {
    background:
        #273549;

    border-color:
        #64748b;
}


.tower-upgrade-button:disabled {
    background:
        #181820;

    border-color:
        #30303a;

    color:
        #777;

    cursor:
        default;

    opacity:
        0.75;
}


/* ======================================================================
   EMPTY / ERROR STATE
   ====================================================================== */

.tower-panel .tower-empty {
    padding:
        12px 0;

    color:
        #888;

    text-align:
        center;
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media (max-width: 600px) {

    .tower-panel {
        padding:
            8px 10px;

        font-size:
            12px;
    }


    .tower-building-entry {
        padding:
            8px;
    }


    .tower-building-entry .building-header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            3px;
    }


    .tower-building-entry .building-effect {
        text-align:
            left;
    }


    .tower-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            6px;
    }


    .tower-stat {
        min-height:
            48px;
    }


    .tower-building-entry .building-meta {
        flex-direction:
            column;

        gap:
            4px;
    }


    .tower-building-entry .building-meta span {
        white-space:
            normal;
    }


    .tower-building-entry .building-actions {
        width:
            100%;
    }


    .tower-upgrade-button {
        width:
            100%;

        padding:
            9px 12px;

        font-size:
            13px;

        text-align:
            center;
    }


    .tower-construction-status {
        padding:
            8px;
    }
}