/* ===========================================================
   COBOL THEME – CLEAN VERSION
   =========================================================== */

/* Global vars */
:root {
    --cobol-green: #00ff00;
    --cobol-dark: #0a0a0a;
    --cobol-dark-gray: #1a1a1a;
    --cobol-light-gray: #cccccc;
    --cobol-border: #145c14;
    --cobol-dim-green: #00cc00;    /* Prigušena zelena */
    --cobol-bright-green: #90ff90; /* Veoma svetla zelena za isticanje */
    --cobol-highlight-bg: rgba(0, 153, 0, 0.15); /* Pozadina za isticanje */
    
    
}

/* Body */


body {
    background-color: var(--cobol-dark);
    color: var(--cobol-green);
    font-family: 'Courier New', 'Monaco', monospace;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



/* Terminal effect */
.terminal-effect {
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

/* CRT effect */
.crt-effect::after {
    content: "";
    position: fixed;
    inset: 0;
    display: block;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 2px;
    pointer-events: none;
    z-index: 9999;
}

/* ===========================================================
   TABLES
   =========================================================== */

.table-cobol {
    background-color: var(--cobol-dark);
    color: var(--cobol-green);
    border: 1px solid var(--cobol-border);
    font-family: monospace;
    border-collapse: collapse; /* Dodato kao poboljsanje */
}
.table-cobol th {
    background-color: #111;
    color: var(--cobol-green);
    border-bottom: 2px solid var(--cobol-border);
    padding: 12px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
.table-cobol td {
    padding: 10px 12px;
    border-bottom: 1px solid #333;
    vertical-align: middle;
}
/* Dodato poboljsanje */
.table-cobol th:not(:last-child)::after,
.table-cobol td:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    right: 0;
    height: 80%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--cobol-border),
        transparent
    );
}

.table-cobol tr:hover {
    background-color: rgba(0, 255, 0, 0.05);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

/* Actions */
.table-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.table-action-btn {
    background: none;
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
    padding: 4px 12px;
    font-size: 0.85em;
    transition: 0.2s;
}
.table-action-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}
/* ===========================================================
        TABLES - NOVE KLASE ZA ĆELIJE
   =========================================================== */

/* Isticanje ključnih ćelija (npr. Ukupno, Status OK) */

.table-cobol .cobol-success-cell {
    background-color: rgba(0, 200, 0, 0.1); /* Suptilna, tamno zelena pozadina */
    color: var(--cobol-bright-green); /* Svetliji font */
    font-weight: bold;
}

/* Isticanje ćelija za upozorenje (npr. Prekoračena vrednost) */
.table-cobol .cobol-warning-cell {
    background-color: rgba(255, 204, 0, 0.08); /* Suptilna žuta pozadina */
    color: #ffcc00; /* Žuti font */
    font-weight: bold;
}

/* Isticanje kritičnih ćelija (npr. Greška, Nula) */
.table-cobol .cobol-danger-cell {
    background-color: rgba(255, 51, 0, 0.08); /* Suptilna crvena pozadina */
    color: #ff3300; /* Crveni font */
    font-weight: bold;
}

/* Isticanje važne ćelije (Opšti naglasak) */
.table-cobol .cobol-highlight-cell {
    background-color: var(--cobol-highlight-bg); /* Koristimo varijablu iz root-a */
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.3); /* Dodaje blagi unutrašnji sjaj */
}


/* ===========================================================
   FORMS
   =========================================================== */

.form-cobol .form-label {
    color: var(--cobol-green);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.form-cobol .form-control,
.form-cobol .form-select {
    background-color: #111;
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
    font-family: monospace;
    padding: 8px 12px;
}
.form-cobol .form-control:focus,
.form-cobol .form-select:focus {
    background-color: var(--cobol-dark);
    border-color: var(--cobol-green);
    box-shadow: 0 0 0 0.25rem rgba(0, 255, 0, 0.25);
}
.form-cobol .form-text {
    color: #888;
    font-size: 0.85em;
}

/* Checkboxes */
.form-check-input:checked {
    background-color: var(--cobol-green);
    border-color: var(--cobol-green);
}
.form-check-label {
    color: var(--cobol-light-gray);
}


/* ===========================================================
   CARDS
   =========================================================== */

.card-cobol {
    background-color: var(--cobol-dark-gray);
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
    font-family: monospace;
}
.card-cobol .card-header,
.card-cobol .card-footer {
    background-color: #111;
    border-color: var(--cobol-border);
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: bold;
}
.card-cobol .card-body { padding: 20px; }


/* ===========================================================
   ALERTS
   =========================================================== */

.alert-cobol {
    background-color: #111;
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
    font-family: monospace;
    padding: 15px;
    margin-bottom: 20px;
}
.alert-cobol-success {
    border-color: #00cc00;
    background-color: rgba(0, 204, 0, 0.05);
}
.alert-cobol-warning {
    border-color: #ffcc00;
    background-color: rgba(255, 204, 0, 0.05);
    color: #ffcc00;
}
.alert-cobol-danger {
    border-color: #ff3300;
    background-color: rgba(255, 51, 0, 0.05);
    color: #ff3300;
}
.alert-cobol-info {
    border-color: #0099cc;
    background-color: rgba(0, 153, 204, 0.05);
    color: #0099cc;
}


/* ===========================================================
   PAGINATION
   =========================================================== */

.pagination-cobol .page-link {
    background-color: #111;
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
    font-family: monospace;
}
.pagination-cobol .page-item.active .page-link {
    background-color: var(--cobol-green);
    border-color: var(--cobol-green);
    color: #000;
}
.pagination-cobol .page-item.disabled .page-link {
    background-color: #333;
    color: #666;
}


/* ===========================================================
   MODAL
   =========================================================== */

.modal-cobol .modal-content {
    background-color: var(--cobol-dark-gray);
    border: 2px solid var(--cobol-border);
    color: var(--cobol-green);
}
.modal-cobol .modal-header,
.modal-cobol .modal-footer {
    background-color: #111;
    border-color: var(--cobol-border);
}
.modal-cobol .btn-close {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(90deg);
}


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

.loader-cobol {
    border: 3px solid #333;
    border-top: 3px solid var(--cobol-green);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-cobol 1s linear infinite;
}
@keyframes spin-cobol {
    to { transform: rotate(360deg); }
}


/* ===========================================================
   TOOLTIP
   =========================================================== */

.tooltip-cobol .tooltip-inner {
    background-color: var(--cobol-dark);
    border: 1px solid var(--cobol-border);
    color: var(--cobol-green);
}
.tooltip-cobol .tooltip-arrow::before {
    border-top-color: var(--cobol-border);
}


/* ===========================================================
   TEXT UTILITIES
   =========================================================== */

.text-cobol { color: var(--cobol-green); font-family: monospace; }
.text-cobol-bright { color: #00ff00; text-shadow: 0 0 8px rgba(0,255,0,0.5); }
/* Tekst za manje važne podatke */
.text-cobol-dim { color: var(--cobol-dim-green); opacity: 0.8; }
/* Tekst za upozorenja ili kritične podatke */
.text-cobol-danger { color: #ff3300; font-weight: bold; } 
/* Tekst za pozitivne vrednosti ili potvrde */
.text-cobol-success { color: #33ff33; font-weight: bold; } 

/* Tekst za VEOMA važne, istaknute podatke (sa blagim sjajem) */
.text-cobol-bright { 
    color: var(--cobol-bright-green); 
    text-shadow: 0 0 8px rgba(144, 255, 144, 0.5); 
}


/* Blink */
.blink-cobol {
    animation: blink 1s step-end infinite;
}



@keyframes blink {
    50% { opacity: 0.3; }
}




/* ===========================================================
   SIDEBAR + TOPBAR
   =========================================================== */
/* -------- SIDEBAR WRAPPER -------- */
.dash-sidebar {
    width: 250px;
    min-height: 100vh;
    background: var(--cobol-dark); /* ← umesto #1e1e2f */
    border-right: 2px solid var(--cobol-border); /* ← umesto dashed */
    
    padding: 15px 0;
    margin-top: 75px;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
    border-right: 2px dashed; 
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}
/* -------- PARENT ITEM -------- */
.sidebar-parent {
    display: block; /* blok element */
    margin-bottom: 5px;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    color: lime;
    justify-content: space-between;
    align-items: center;
    border: 1px solid ; /* inicijalno bez boje */
    transition: border-color 0.2s ease; /* tranzicija samo za border */
}
.sidebar-parent:hover {
   border-left-color: lime; /* samo border boja se menja */
    background: inherit;      /* uklanja prethodni background */
    box-shadow: none;         /* uklanja senku */
    text-shadow: none;        /* uklanja efekat teksta */
}
.sidebar-parent .caret {
    transition: transform 0.3s ease;
}
.sidebar-parent.open .caret {
    transform: rotate(90deg);
}

.child-container {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.35s ease-out;
    overflow-y: auto;      /* vertikalni scroll ako ima više stavki */
}

.child-container.open {
    max-height: 800px;
    opacity: 1;
}

.child-item {
    display: block;
    padding: 8px 25px;
    color: #bfc0d4;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s, padding-left 0.2s;
}

.child-item:hover {
    background: #31314a;
    padding-left: 32px;
}

.child-item.active {
    background: #4c8bf5;
    color: white;
}
/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 768px) {
    .dash-sidebar {
        width: 100%;
        max-height: 60vh;
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
        transform: translateY(100%);
        transition: transform .3s;
        padding-top: 0;
        margin-top: 0;
        color:#00cc00;
        background-color: black;
    }
    .dash-sidebar.mobile-open { transform: translateY(0); }

    .dash-topbar { left: 0; }

    .dash-content { margin-left: 0; margin-top: 60px; }

    .mobile-sidebar-toggle {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: var(--cobol-green);
        color: #000;
        border-radius: 50%;
        border: none;
        font-size: 20px;
        z-index: 1002;
    }
}
/* ===========================================================
   BOOTSTRAP TWEAKS
   =========================================================== */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1a1a1a !important;
    border-color: var(--cobol-green);
    color: var(--cobol-green) !important;
}
.btn-primary:hover {
    background-color: #2a2a2a !important;
    border-color: var(--cobol-green);
}
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #333 !important;
    border-color: #ccc;
    color: #ccc !important;
}
.btn-secondary:hover {
    background-color: #444 !important;
    color: #fff !important;
}
/* Dark striped table fix */
.table-dark.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.05);
}
/* ===========================================================
   SVASTA PO MALO
   =========================================================== */
.naslov {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    padding-left: 10px;
}

.naslov::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;       /* debljina linije */
    background: green; /* boja linije */
}

/*
 * Klasa: Crna pozadina sa Jarko Zelenom konturom (obrisom ikone)
 */
.fa-crno-zeleno {
  /* 1. Boja pozadine elementa (kontejnera) */
  background-color: black;
  
  /* 2. Boja same ikone (crna) - ovo je boja fonta */
  color: black;
  
  /* 3. Ključni deo: Simliranje konture (obruba) pomoću senke teksta */
  /* Sintaksa: horizontalna_senka vertikalna_senka zamućenje boja */
  text-shadow:
    1px 1px 0 #39FF14,  /* Senka desno-dole */
    -1px 1px 0 #39FF14, /* Senka levo-dole */
    1px -1px 0 #39FF14, /* Senka desno-gore */
    -1px -1px 0 #39FF14; /* Senka levo-gore */
    /* Koristio sam #39FF14 za jarko neonsko zelenu */
    
  /* DODATNA PODEŠAVANJA ZA IZGLED */
  padding: 0.1em 0.2em; /* Dodavanje malog razmaka oko ikone */
  border-radius: 4px; /* Blagi zaobljeni uglovi */
  line-height: 1; /* Osigurava da je visina linije dobra za ikonu */
}
/* Glitch efekat - savršen za retro terminal naslove */
.glitch-cobol {
    position: relative;
    animation: glitch 3s infinite;
}

.glitch-cobol::before,
.glitch-cobol::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-cobol::before {
    animation: glitch-top 1s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch-cobol::after {
    animation: glitch-bottom 1.5s infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
    2%, 64% {
        transform: translate(2px, 0) skew(0deg);
    }
    4%, 60% {
        transform: translate(-2px, 0) skew(0deg);
    }
    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

@keyframes glitch-top {
    2%, 64% {
        transform: translate(2px, -2px);
    }
    4%, 60% {
        transform: translate(-2px, 2px);
    }
    62% {
        transform: translate(13px, -1px) skew(-13deg);
    }
}

@keyframes glitch-bottom {
    2%, 64% {
        transform: translate(-2px, 0);
    }
    4%, 60% {
        transform: translate(-2px, 0);
    }
    62% {
        transform: translate(-22px, 5px) skew(21deg);
    }
}
/*======================================
POBOLJSANJE TABELA
=========================================*/
/* Zaglavlje tabele sa CRT efektom */
.table-cobol thead {
    position: relative;
    overflow: hidden;
}

.table-cobol thead::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 0, 0.1),
        transparent
    );
    animation: scanline 3s linear infinite;
}

@keyframes scanline {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Numeričke ćelije sa desnim poravnanjem i monospace fontom */
.table-cobol .numeric-cell {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* Zebra striping sa fade efektom */
.table-cobol tbody tr:nth-child(odd) {
    background-color: rgba(0, 255, 0, 0.02);
}

.table-cobol tbody tr:nth-child(even) {
    background-color: rgba(0, 255, 0, 0.01);
}

/* ===============================================
 Progress bar u COBOL stilu 
 =================================================*/
.cobol-progress {
    height: 20px;
    background-color: #111;
    border: 1px solid var(--cobol-border);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.cobol-progress-bar {
    background: linear-gradient(90deg, 
        var(--cobol-green) 0%, 
        #00cc00 50%, 
        var(--cobol-green) 100%);
    position: relative;
    animation: pulse-bar 2s infinite alternate;
}

.cobol-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
}

@keyframes pulse-bar {
    from { opacity: 0.7; }
    to { opacity: 1; }
}


/* ===================================
ASCII art tooltip 
======================================*/

.ascii-tooltip {
    position: relative;
    cursor: help;
}

.ascii-tooltip::before {
    content: "+--------------------------------+";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border: 1px solid var(--cobol-border);
    padding: 5px 10px;
    white-space: pre;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--cobol-green);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.ascii-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border: 1px solid var(--cobol-border);
    padding: 10px;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--cobol-green);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.ascii-tooltip:hover::before,
.ascii-tooltip:hover::after {
    opacity: 1;
}

.ascii-tooltip::after {
    content: "+--------------------------------+\A| " attr(data-tooltip) " |\A+--------------------------------+";
    white-space: pre;
    text-align: center;
    min-width: 200px;
}


/*==================================
 LED indikatori 
 ====================================*/
.led-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px currentColor;
}

.led-green {
    background-color: #00ff00;
    animation: led-pulse 2s infinite;
}

.led-yellow {
    background-color: #ffff00;
    animation: led-blink 1s infinite;
}

.led-red {
    background-color: #ff0000;
    animation: led-blink-fast 0.5s infinite;
}

@keyframes led-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes led-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes led-blink-fast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.1; }
}
/* ========================================
Typewriter efekat 
==========================================*/
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--cobol-green);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end),
               blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--cobol-green) }
}
/*======================================
 Terminal stil scrollbar-a 
 =======================================*/
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #111;
    border: 1px solid var(--cobol-border);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        var(--cobol-green),
        #00cc00,
        var(--cobol-green)
    );
    border: 1px solid #000;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        to bottom,
        #00ff00,
        #00ee00,
        #00ff00
    );
}
/*-------------------------
 Lightbox stilovi
 -------------------------- */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid var(--cobol-border);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    animation: lightboxAppear 0.3s ease-out;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--cobol-green);
    font-size: 30px;
    cursor: pointer;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--cobol-border);
}

.lightbox-close:hover {
    background: rgba(0, 255, 0, 0.2);
    transform: scale(1.1);
}

@keyframes lightboxAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stil za sliku koja je klikabilna */
.gumice-image.clickable {
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.gumice-image.clickable:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}
canvas {
    display: block !important;
    max-width: 100%;
}


#rolnePieChart {
    width: 100% !important;
    height: 100% !important;
}

/* ===========================================================
   FOOTER STYLES
   =========================================================== */

.footer-cobol {
    background-color: var(--cobol-dark-gray);
    border-top: 3px solid var(--cobol-border);
    color: var(--cobol-green);
    font-family: 'Courier New', monospace;
    padding: 20px 0;
    margin-top: auto;
}

.footer-section {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--cobol-border);
    border-radius: 4px;
    height: 100%;
}

.footer-section h5 {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cobol-border);
}

.footer-section ul li {
    transition: all 0.3s ease;
}

.footer-section ul li:hover {
    transform: translateX(5px);
}

.social-links .social-link {
    display: block;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
    background-color: rgba(0, 0, 0, 0.5);
}

.social-links .social-link:hover {
    background-color: rgba(0, 255, 0, 0.1);
    transform: translateX(10px);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.hover-green {
    transition: color 0.3s ease;
}

.hover-green:hover {
    color: var(--cobol-bright-green) !important;
    text-decoration: underline;
}

.system-status {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--cobol-border);
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 0.85em;
}



.footer-cobol {
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-cobol {
        margin-left: 0 !important;
    }
    
    .system-status .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .system-status .d-flex > div {
        margin-bottom: 10px;
    }
    
    .social-links .social-link {
        text-align: center;
 
     }
}

.main-content {
        margin-left: 0;
        width: 100%;
    }

    /* Na desktopu (ekran veći od 768px) */
    @media (min-width: 768px) {
        .main-content {
            margin-left: 250px; /* Širina  sidebar-a */
                       }
                       
 .dash-sidebar {
        background-color: #000000 !important;
        color: #00cc00 !important;
        border-right: 1px solid #00cc00 !important;
    }
}

/* Parent meni stavke - COBOL stil */
.dash-sidebar .parent-item {
    background-color: #000000 !important;
    color: #00cc00 !important;
    border-bottom: 1px solid #003300 !important;
    padding: 6px 8px !important;
    font-weight: 500;
    font-family: 'Courier New', monospace !important;
}

.dash-sidebar .parent-item:hover {
    background-color: #003300 !important;
    color: #00ff00 !important;
}

/* Caret (strelica) */
.dash-sidebar .caret {
    color: #00cc00 !important;
    border-top-color: #00cc00 !important;
}

/* Child meni stavke */
.dash-sidebar .child-item {
    background-color: #0a0a0a !important;
    color: #00aa00 !important;
    padding: 10px 15px 10px 30px !important;
    border-bottom: 1px solid #003300 !important;
    display: block;
    text-decoration: none;
    font-family: 'Courier New', monospace !important;
}

.dash-sidebar .child-item:hover {
    background-color: #002200 !important;
    color: #00ff00 !important;
    padding-left: 35px !important;
}

/* Aktivna child stavka */
.dash-sidebar .child-item.active {
    background-color: #003300 !important;
    color: #00ff00 !important;
    font-weight: bold;
    border-left: 4px solid #00ff00 !important;
}

/* Child container */
.dash-sidebar .child-container {
    background-color: #050505 !important;
}

/* Linkovi */
.dash-sidebar a {
    color: #00cc00 !important;
    text-decoration: none;
}

.dash-sidebar a:hover {
    color: #00ff00 !important;
}