/*
============================================================
SENTINEL CONTROL CENTER
UI Components
RC1.1-F1
============================================================
*/



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


.s-panel {

    background:
        var(--s-bg-panel);


    border:
        1px solid var(--s-border);


    border-radius:
        var(--s-radius);


    box-shadow:
        var(--s-shadow);


    backdrop-filter:
        blur(16px);


    padding:
        24px;

}



/* ==========================================================
   CARD
   ========================================================== */


.s-card {

    background:
        rgba(255,255,255,0.04);


    border:
        1px solid var(--s-border);


    border-radius:
        var(--s-radius);


    padding:
        24px;


    transition:
        var(--s-transition);


}



.s-card:hover {

    transform:
        translateY(-4px);

}



/* ==========================================================
   TITLES
   ========================================================== */


.s-title {

    color:
        var(--s-text-primary);


    font-size:
        2rem;


    font-weight:
        700;


}



.s-subtitle {

    color:
        var(--s-text-secondary);


    font-size:
        1rem;

}



/* ==========================================================
   BUTTONS
   ========================================================== */


.s-button {

    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    padding:
        12px 24px;


    border-radius:
        999px;


    border:
        1px solid transparent;


    cursor:
        pointer;


    transition:
        var(--s-transition);


    font-weight:
        600;

}



.s-button-primary {


    background:
        var(--s-gold);


    color:
        #07111D;


}



.s-button-primary:hover {


    background:
        var(--s-gold-light);


}



/* ==========================================================
   STATUS BADGES
   ========================================================== */


.s-status {


    display:
        inline-flex;


    align-items:
        center;


    padding:
        6px 14px;


    border-radius:
        999px;


    font-size:
        0.85rem;


    font-weight:
        600;

}



.s-status-online {


    background:
        rgba(0,200,120,0.15);


    color:
        #00d878;

}



.s-status-warning {


    background:
        rgba(216,176,0,0.15);


    color:
        var(--s-gold-light);

}



.s-status-error {


    background:
        rgba(220,70,70,0.15);


    color:
        #ff7070;

}



/* ==========================================================
   LOADER
   ========================================================== */


.s-loader {

    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        #07111D;

    z-index: 9999;

    opacity: 1;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.s-loader.hidden {

    opacity: 0;

    visibility: hidden;

}



.s-loader-content {

    text-align: center;

}



.s-loader-logo {

    width: 180px;

    max-width: 40vw;

    animation:
        sentinelPulse 2s infinite ease-in-out;

}



.s-loader-title {

    margin-top: 25px;

    font-size: 22px;

    letter-spacing: 4px;

    color: #D8B000;

}



.s-loader-status {

    margin-top: 12px;

    color: rgba(255,255,255,.65);

    font-size: 13px;

}



.s-loader-line {

    width: 220px;

    height: 2px;

    margin: 30px auto 0;

    background:

        linear-gradient(

            90deg,

            transparent,

            #D8B000,

            transparent

        );

    animation:

        loaderLine 2s infinite;

}



@keyframes sentinelPulse {


    0%,
    100% {

        transform: scale(1);

        opacity: .85;

    }


    50% {

        transform: scale(1.08);

        opacity: 1;

    }

}



@keyframes loaderLine {


    0% {

        transform: scaleX(.3);

    }


    50% {

        transform: scaleX(1);

    }


    100% {

        transform: scaleX(.3);

    }

}
.dashboard-grid {

    display:grid;

    grid-template-columns:

        repeat(2, 1fr);

    gap:20px;

}



.dashboard-card {

    background:

        rgba(255,255,255,.05);

    border:

        1px solid rgba(216,176,0,.25);

    border-radius:

        12px;

    padding:

        20px;

    backdrop-filter:

        blur(12px);

}



.dashboard-card h3 {


    color:

        #D8B000;


    letter-spacing:

        2px;


    margin-bottom:

        20px;


}



.status-row {

    display:flex;

    justify-content:space-between;

    padding:

        10px 0;

}



.online {

    color:#5CFF7A;

}



.resource-number {

    font-size:

        48px;

    color:

        #D8B000;

}

/* ==========================================================================
   STATUS INDICATOR
   ========================================================================== */


.status-indicator {

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 0;

}



.status-dot {

    width:9px;

    height:9px;

    border-radius:50%;

}



.status-dot.success {

    background:#5CFF7A;

    box-shadow:

        0 0 10px #5CFF7A;

}



.status-dot.warning {

    background:#D8B000;

}



.status-dot.error {

    background:#ff5555;

}



.status-value {

    margin-left:auto;

}





/* ==========================================================================
   METRIC
   ========================================================================== */


.metric {

    text-align:center;

}



.metric-value {

    font-size:48px;

    color:#D8B000;

    font-weight:600;

}



.metric-label {

    color:

        rgba(255,255,255,.65);

    margin-top:5px;

}

.operation-status {


    display:inline-block;


    margin-top:15px;


    padding:6px 18px;


    border-radius:20px;


    color:#07111D;


    background:#D8B000;


    font-weight:700;


    letter-spacing:2px;


}



.metrics-grid {


    display:grid;


    grid-template-columns:

        repeat(4,1fr);


    gap:15px;


}



.event-list {


    list-style:none;


    padding:0;


    margin:0;


}



.event-list li {


    padding:10px 0;


    border-bottom:

        1px solid rgba(255,255,255,.08);


    color:

        rgba(255,255,255,.8);


}

/* ==========================================================================
   DASHBOARD PRO LAYOUT
   ========================================================================== */


.dashboard-layout {


    display:grid;


    grid-template-columns:

        1fr 1fr;


    grid-template-rows:

        auto auto 1fr auto;


    gap:20px;


    width:100%;


}





.dashboard-panel {


    background:

        rgba(255,255,255,0.05);


    border:

        1px solid rgba(255,255,255,.08);


    border-radius:16px;


    padding:20px;


    backdrop-filter:

        blur(12px);


}





.system-panel {


    grid-column:

        1 / 3;


}





.operation-panel {


    grid-column:

        1;


}





.resource-panel {


    grid-column:

        2;


}





.map-panel {


    grid-column:

        1 / 3;


    min-height:

        320px;


}





.events-panel {


    grid-column:

        1 / 3;


}
/* ==========================================================================
   GIS MAP COMPONENT
   ========================================================================== */


.scc-map {


    height:

        420px;


    width:

        100%;


    border-radius:

        12px;


    overflow:

        hidden;


}

    height:320px;


    width:100%;


    border-radius:12px;


    background:


        linear-gradient(

            135deg,

            #101820,

            #1b2633

        );


    display:flex;


    align-items:center;


    justify-content:center;


    position:relative;


    overflow:hidden;


}





.map-overlay {


    text-align:center;


    color:white;


    opacity:.75;


}





.map-overlay span {


    display:block;


    font-size:22px;


    font-weight:600;


}





.map-overlay small {


    display:block;


    margin-top:10px;


    opacity:.7;


}

/* ==========================================================================
   GIS OPERATIONAL MARKERS
   ========================================================================== */


.scc-marker {


    background:

        transparent;


    border:

        none;


    font-size:

        28px;


    text-align:

        center;


}



.scc-marker-pca {


    filter:

        drop-shadow(0 0 6px #D8B000);


}



.scc-marker-node {


    filter:

        drop-shadow(0 0 6px #00ff66);


}



.scc-marker-team {


    filter:

        drop-shadow(0 0 6px #ffd43b);


}



.scc-marker-vehicle {


    filter:

        drop-shadow(0 0 6px #4da6ff);


}
/* ==========================================================================
   GIS MARKER STATUS
   ========================================================================== */


.scc-marker-online {


    filter:

        drop-shadow(

            0 0 8px

            #00ff66

        );


}



.scc-marker-warning {


    filter:

        drop-shadow(

            0 0 8px

            #ffd43b

        );


}



.scc-marker-offline {


    filter:

        drop-shadow(

            0 0 8px

            #ff5555

        );


}

/* ==========================================================================
   GIS POPUPS
   ========================================================================== */


.gis-popup {


    min-width:

        220px;


    color:

        #07111D;


}



.gis-popup h3 {


    margin-top:

        0;


    color:

        #07111D;


}



.gis-popup p {


    margin:

        8px 0;


}



.gis-online {


    color:

        #008f39;


    font-weight:

        700;


}

/* ==========================================================================
   GIS EVENT MARKER
   ========================================================================== */


.scc-marker-event {


    filter:

        drop-shadow(

            0 0 8px

            #ff9900

        );


}

/******************************************************************************
 * Sentinel Control Center
 *
 * UI-21.3b
 * Operational Command Panel Theme
 *
 ******************************************************************************/

/* ==========================================================================
   COMMAND PANEL MAIN CONTAINER
   ========================================================================== */


.scc-command-panel {

    width: 100%;

    padding: 22px;

    margin-top: 20px;


    background:

        rgba(7,17,29,0.78);


    border:

        1px solid rgba(216,176,0,0.35);


    border-radius:

        16px;


    box-shadow:

        0 0 25px rgba(0,0,0,0.45);


    backdrop-filter:

        blur(12px);


    color:

        #ffffff;

}





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


.command-header {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding-bottom:

        16px;


    margin-bottom:

        18px;


    border-bottom:

        1px solid rgba(216,176,0,0.25);

}





.command-header h2 {


    margin:0;


    font-size:

        20px;


    letter-spacing:

        1.5px;


    text-transform:

        uppercase;


    color:

        #ffffff;

}







.command-status {


    display:flex;


    align-items:center;


    gap:8px;


    padding:

        6px 14px;


    border-radius:

        20px;


    background:

        rgba(99,255,138,0.15);


    border:

        1px solid rgba(99,255,138,0.45);


    color:

        #63ff8a;


    font-size:

        12px;


    font-weight:

        700;


    letter-spacing:

        1px;

}





.command-status::before {


    content:"";


    width:

        8px;


    height:

        8px;


    border-radius:

        50%;


    background:

        #63ff8a;


    box-shadow:

        0 0 10px #63ff8a;

}





/* ==========================================================================
   SECTIONS
   ========================================================================== */


.command-section {


    margin-bottom:

        22px;

}





.command-section h3 {


    margin:

        0 0 12px 0;


    color:

        #D8B000;


    font-size:

        13px;


    letter-spacing:

        2px;


    text-transform:

        uppercase;

}







/* ==========================================================================
   EVENT LIST
   ========================================================================== */


.command-events {


    display:flex;


    flex-direction:column;


    gap:

        10px;

}





.command-event {


    display:flex;


    align-items:center;


    gap:

        12px;


    padding:

        12px;


    background:

        rgba(255,255,255,0.035);


    border-radius:

        10px;


    border-left:

        3px solid #D8B000;


    transition:

        0.25s ease;

}





.command-event:hover {


    transform:

        translateX(4px);


    background:

        rgba(255,255,255,0.07);

}





.event-icon {


    width:

        30px;


    text-align:

        center;


    font-size:

        18px;

}





.event-data {


    display:flex;


    flex-direction:column;


}





.event-data strong {


    font-size:

        14px;


    color:

        #ffffff;

}





.event-data small {


    margin-top:

        4px;


    font-size:

        12px;


    color:

        rgba(255,255,255,0.55);

}







/* ==========================================================================
   RESOURCES
   ========================================================================== */


.command-resources {


    display:grid;


    grid-template-columns:

        1fr;


    gap:

        10px;

}





.resource-item {


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:

        12px 14px;


    background:

        rgba(255,255,255,0.035);


    border-radius:

        10px;


    font-size:

        14px;

}





.resource-item strong {


    color:

        #D8B000;


    font-size:

        18px;

}







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


.command-empty {


    padding:

        18px;


    text-align:

        center;


    color:

        rgba(255,255,255,0.5);

}

.bootstrap-error .s-loader-status {
    max-width: 34rem;
    margin-inline: auto;
    color: #f2d675;
    font-size: .9rem;
    line-height: 1.55;
}

.bootstrap-error .s-loader-line {
    animation: none;
    opacity: .35;
}

.s-loader [data-bootstrap-retry] {
    margin-top: 1.25rem;
}

/* Operational hierarchy: GIS and active operation are the primary surface. */
.dashboard-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    align-items: stretch;
}

.map-card {
    grid-column: 1 / 8;
    grid-row: 1;
    min-width: 0;
    border-color: rgba(216, 176, 0, .42);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
}

.operation-card {
    grid-column: 8 / 13;
    grid-row: 1;
    min-width: 0;
}

.system-card {
    grid-column: 1 / 5;
    grid-row: 2;
}

.resources-card {
    grid-column: 5 / 9;
    grid-row: 2;
}

.scc-command-panel {
    grid-column: 9 / 13;
    grid-row: 2;
    min-width: 0;
}

.events-card {
    grid-column: 1 / 13;
    grid-row: 3;
}

.dashboard-primary {
    background:
        linear-gradient(145deg, rgba(216, 176, 0, .045), transparent 42%),
        rgba(255, 255, 255, .055);
}

.dashboard-secondary {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
}

.map-card .scc-map {
    height: clamp(430px, 58vh, 650px);
}

.operation-card,
.map-card {
    min-height: 520px;
}

.operation-card .card-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.operation-card .operation-summary {
    min-height: 0;
}

@media (max-width: 1200px) {
    .map-card {
        grid-column: 1 / 7;
    }

    .operation-card {
        grid-column: 7 / 13;
    }

    .system-card {
        grid-column: 1 / 7;
    }

    .resources-card {
        grid-column: 7 / 13;
    }

    .scc-command-panel {
        grid-column: 1 / 13;
        grid-row: 3;
    }

    .events-card {
        grid-row: 4;
    }
}

@media (max-width: 860px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .map-card,
    .operation-card,
    .system-card,
    .resources-card,
    .scc-command-panel,
    .events-card {
        grid-column: 1;
    }

    .map-card { grid-row: 1; }
    .operation-card { grid-row: 2; }
    .system-card { grid-row: 3; }
    .resources-card { grid-row: 4; }
    .scc-command-panel { grid-row: 5; }
    .events-card { grid-row: 6; }

    .map-card,
    .operation-card {
        min-height: auto;
    }

    .map-card .scc-map {
        height: clamp(320px, 52vh, 520px);
    }
}