@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
    --bg-color: #050505;
    --cyan: #00ffff;
    --green: #39ff14;
    --red: #ff2020;
    --white: #e0e0e0;
    --blue-border: #1e3a8a;
    --font-main: 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-color);
    color: var(--cyan);
    font-family: var(--font-main);
    /* OVDJE JE TVOJA MARGINA - 60px gore/dolje, 10% širine ekrana lijevo/desno */
    padding: 60px 10%; 
    line-height: 1.2;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

/* --- GLAVNI GRID --- */
.dashboard {
    width: 100%;
    max-width: 1450px;
    display: grid;
    grid-template-columns: 2fr 1.1fr 1.1fr;
    grid-template-rows: auto auto; 
    gap: 25px;
}

/* --- POZICIONIRANJE I PORAVNANJE --- */

/* Gornji red - SVE KUĆICE ĆE IMATI PORAVNATO DNO */
#comp-ascii-clock { grid-column: 1; grid-row: 1; }
#comp-network     { grid-column: 2; grid-row: 1; }
#comp-systems     { grid-column: 3; grid-row: 1; }

/* Donji red - VRHOVI ĆE BITI U SAVRŠENOJ RAVNINI */
#comp-status      { grid-column: 1; grid-row: 2; align-self: start; }
#comp-news-feed   { grid-column: 2 / span 2; grid-row: 2; align-self: start; }

/* --- RESPONSIVE ZA MOBITEL --- */
@media (max-width: 1100px) {
    body { padding: 20px; } /* Manja margina na malim ekranima */
    .dashboard {
        grid-template-columns: 1fr; /* Sve ide u jedan stupac */
    }
    #comp-ascii-clock, #comp-network, #comp-systems, #comp-status, #comp-news-feed {
        grid-column: 1;
        grid-row: auto;
    }
    .top-left-grid { grid-template-columns: 1fr !important; }
}

/* --- OKVIRI (Fieldsets) --- */
fieldset {
    border: 2px solid var(--blue-border);
    padding: 20px;
    background: rgba(0,0,0,0.3);
    height: 100%; /* Prisiljava sve kućice u istom redu na istu visinu (Ravna dna!) */
    display: flex;
    flex-direction: column;
}

legend { 
    color: var(--white); 
    padding: 0 15px; 
    margin: 0 auto; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-size: 0.9em; 
}

/* Unutrašnji raspored za Sat, Kalendar, Meteo i Moon (2x2) */

.naked-clock {
    padding: 15px; /* Isti padding koji imaju i fieldseti da sve bude u ravnini */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-left-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 15px;
    height: 100%;
}

/* --- RAZMACI I GLOW EFEKT --- */
.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 6px;
}

.item-name a, .clickable .item-name {
    color: var(--cyan);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* GLOW na hover */
.status-row a:hover, 
.status-row.clickable:hover .item-name {
    color: var(--white) !important;
    text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
    cursor: pointer;
}

/* --- OSTALI DETALJI --- */
.time-large { font-size: 4.5em; font-weight: bold; line-height: 0.9; margin-bottom: 8px; }
.date-info { font-size: 0.9em; text-transform: uppercase; opacity: 0.9; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 0.75em; }
.calendar-day.today { color: var(--red); border: 1px solid var(--red); font-weight: bold; }

.state-online { color: var(--green); }
.state-offline { color: var(--red); }

#rss-list, .ss-list { list-style: none; padding: 0; }
#rss-list li, .ss-list li { color: var(--white); margin-bottom: 6px; display: flex; font-size: 0.9em; }

.ss-list li:not(:empty)::before { content: "> "; margin-right: 12px; color: var(--green); font-weight: bold; }
#rss-list li::before { content: "■ "; color: var(--blue-border); margin-right: 10px; }
#rss-list a { color: var(--white); text-decoration: none; }
#rss-list a:hover { color: var(--cyan); }

.section-title { color: var(--cyan); margin: 12px 0 8px 0; text-transform: uppercase; border-left: 2px solid var(--blue-border); padding-left: 10px; font-weight: bold; }

.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02)); background-size: 100% 3px, 3px 100%; pointer-events: none; z-index: 1000; }