body
{
    font-family: "Segoe UI", Arial, sans-serif;
    margin:0;
    background:#0f1720;
    color:#e6edf3;
}

/* HEADER */

.header
{
    background:#058d69;
    color:white;
    padding:15px;

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

    flex-wrap:wrap;   /* WICHTIG */
}

/* GRID */

#panelContainer
{
    padding:20px;

    display:grid;

    grid-template-columns: repeat(auto-fit,minmax(380px,1fr));

    gap:18px;
}

/* PANEL */

.datePanel
{
    background:#1a2430;

    border-radius:10px;

    padding:18px;

    border-left:6px solid #058d69;

    box-shadow:0 4px 10px rgba(0,0,0,0.4);

    transition:all .3s ease;
}

/* HEADER */

.panelHeader
{
    font-size:20px;
    font-weight:600;
}

/* DATE */

.panelDate
{
    margin-top:6px;
    color:#9fb3c8;
}

/* INFO */

.panelInfo
{
    margin-top:10px;
    font-size:14px;
}

/* WARNING */

.datePanel.warning
{
    border-left:6px solid #ff3b3b;
}

/* UPDATE FLASH */

.panelFlash
{
    animation:flashGreen 1s ease;
}

@keyframes flashGreen
{
    0% { background:#1a2430; }
    50% { background:#0c513d; }
    100% { background:#1a2430; }
}

/* ALARM PULSE */

.panelAlarm
{
    animation:pulseRed 2s infinite;
}

@keyframes pulseRed
{
    0%
    {
        box-shadow:0 0 0 0 rgba(255,0,0,0.7);
    }

    70%
    {
        box-shadow:0 0 15px 5px rgba(255,0,0,0);
    }

    100%
    {
        box-shadow:0 0 0 0 rgba(255,0,0,0);
    }
}

/* STATUS BAR */

#lastUpdate
{
    padding:12px 20px;
    background:#111820;
    border-top:1px solid #202b38;
    font-size:14px;
}

/* DEBUG */

#debug
{
    width:100%;
    height:120px;
    background:#0f1720;
    color:#8fa3b8;
    border:none;
    padding:10px;
}

.statusbar
{
    display:flex;
    gap:20px;
    font-weight:bold;
}

.statusbar span
{
    padding:6px 12px;
    border-radius:6px;
}

.ok
{
    background:#0c513d;
}

.warn
{
    background:#5a3b00;
}

.down
{
    background:#5a0000;
}

.systemPanels
{
    display:flex;
    gap:15px;
    padding:15px;
}

.systemPanel
{
    flex:1;

    background:white;

    border-radius:8px;

    padding:20px;

    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.systemValue
{
    font-size:28px;
    font-weight:bold;
}

/* ======================= */
/* GRAPH PANELS */
/* ======================= */

.graphContainer
{
    display:flex;
    gap:15px;
    padding:15px;
}

.graphPanel
{
    flex:1;

    background:#020617;

    border-radius:10px;

    padding:15px;

    box-shadow:
        0 0 25px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.6);
}

.graphPanel canvas
{
    width:100%;
    height:120px;
}

/* ======================= */
/* NOC GRAPH PANELS */
/* ======================= */

.graphContainer
{
    display:flex;
    gap:15px;
    padding:15px;
}

.graphPanel
{
    flex:1;

    background:#0f172a;
    color:white;

    border-radius:10px;

    padding:15px;

    box-shadow:
        0 0 20px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(0,0,0,0.4);
}

.graphPanel canvas
{
    width:100%;
    height:140px;
}

/* RAM Alarm */

.ramAlarm
{
    animation: ramPulse 1s infinite;
}

@keyframes ramPulse
{
    0% { box-shadow:0 0 0px red }
    50% { box-shadow:0 0 20px red }
    100% { box-shadow:0 0 0px red }
}

.pushStatus
{
    padding:4px 10px;

    border-radius:6px;

    background:#334155;

    font-size:12px;
}

.pushStatus.active
{
    background:#16a34a;
}

/* ======================= */
/* SYSTEM PANELS */
/* ======================= */

.systemContainer
{
    display:flex;
    gap:15px;
    padding:15px;
}

.systemPanel
{
    flex:1;

    background:#020617;

    border-radius:10px;

    padding:20px;

    color:white;

    box-shadow:
        0 0 25px rgba(0,0,0,0.8),
        inset 0 0 20px rgba(0,0,0,0.6);
}

.systemValue
{
    font-size:36px;
    font-weight:bold;

    margin-top:10px;
}

/* CPU Farbe */

.cpuPanel
{
    border-left:5px solid #1fd655;
}

/* RAM Farbe */

.ramPanel
{
    border-left:5px solid #058d69;
}

.cpuHigh
{
    border-left:5px solid #ff3b30;
}

.ramHigh
{
    border-left:5px solid #ff3b30;
}

.pushControls
{
    display:flex;
    gap:8px;
    flex-wrap:wrap;   
}

.pushControls button
{
    flex:1;
    min-width:90px;
}

.pushControls button:hover
{
background:#0284c7;
}

#pushStatus
{
background:#334155;
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

/* HEADER LAYOUT */

.header
{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;

padding:14px 20px;

background:#0b1f2a;
border-bottom:1px solid rgba(255,255,255,0.05);
}

/* TITLE */

.header h2
{
margin:0;
font-size:20px;
color:#fff;
}

/* STATUSBAR */

.statusbar
{
display:flex;
gap:16px;
font-size:14px;
}

/* PUSH BUTTONS */

.pushControls
{
display:flex;
gap:10px;
margin-top:8px;
}

/* BUTTON STYLE */

.pushControls button
{
background:#1f2d3a;
border:1px solid rgba(255,255,255,0.1);
color:#fff;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
font-size:13px;
transition:all .2s;
}

.pushControls button:hover
{
background:#2f4050;
}

/* MOBILE */

@media (max-width:700px)
{

.header
{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.statusbar
{
width:100%;
justify-content:space-between;
}

.pushControls
{
width:100%;
justify-content:space-between;
}

.pushControls button
{
flex:1;
}

}

body
{
padding-top: env(safe-area-inset-top);
}

/* ========================= */
/* MOBILE NOC EXTENSION */
/* ========================= */

.realtimeDot
{
width:10px;
height:10px;
border-radius:50%;
background:#777;
display:inline-block;
margin-right:6px;
}

.online .realtimeDot
{
background:#1fd655;
box-shadow:0 0 8px #1fd655;
}

.offline .realtimeDot
{
background:#ff3b30;
box-shadow:0 0 8px #ff3b30;
}

.connecting .realtimeDot
{
background:#ffaa00;
box-shadow:0 0 8px #ffaa00;
}

/* Push status */

#pushStatus
{
font-size:12px;
opacity:.8;
margin-left:10px;
}

/* Graph panels */

.systemPanel canvas
{
width:100%;
height:80px;
}

/* Smooth panel animation */

.datePanel
{
transition:
transform .25s,
box-shadow .25s;
}

.datePanel:active
{
transform:scale(.98);
}

/* Mobile layout */

@media (max-width:700px)
{

body
{
font-size:15px;
}

#panelContainer
{
grid-template-columns:1fr;
}

.datePanel
{
padding:18px;
border-radius:12px;
}

.systemPanel
{
padding:18px;
}

.panelHeader
{
font-size:18px;
}

.panelDate
{
font-size:14px;
}

}

/* iPhone Safe Area */

body
{
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}

@media (max-width:700px)
{

.header
{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.pushControls
{
    width:100%;
}

.pushControls button
{
    flex:1;
}

}

body
{
    overflow-x:hidden;
}

.flashGreen {
    animation: flashGreen 0.4s;
}

@keyframes flashGreen {
    0%   { background: #1fd655; }
    100% { background: inherit; }
}

.offlineBlink {
    animation: blinkRed 1s infinite;
}

@keyframes blinkRed {
    0%   { background: #ff3b30; }
    50%  { background: #2a0000; }
    100% { background: #ff3b30; }
}