:root {
            --calc-primary: #005ca5;
            --calc-secondary: #f0f4f8;
            --calc-accent: #e63946;
        }
.calc-header {
    background: linear-gradient(135deg, #005ca5, #2c2c2c);
    color: #fff;
    padding: 0.5rem 0; /* Zadržavamo minimalnu visinu */
    min-height: 40px;
    text-align: center;
}

.calc-header h1 {
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1rem;
    margin-bottom: 0;
}

.calc-header .lead {
    font-size: 0.875rem;
    margin-bottom: 0;
}

#backToHomeBtn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    text-decoration: none;
    z-index: 10;
}

#backToHomeBtn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: #f39c12;
}

#backToHomeBtn i {
    font-size: 0.75rem;
}

/* Responsivni stilovi */
@media (max-width: 576px) {
    #backToHomeBtn {
        padding: 0.25rem;
        width: 42px;
        height: 22px;
        border-radius: 20%;
        justify-content: center;
    }
    #backToHomeBtn span {
        display: none;
    }
    .calc-header .container {
        justify-content: center; /* Centriranje na mobilnim uređajima */
    }
    .calc-header .header-content {
        display: block; /* Prikazivanje naslova u bloku */
        text-align: center;
    }
    .calc-header h1 {
        font-size: 1rem;
    }
    .calc-header .lead {
        font-size: 0.75rem;
    }
}

/* Prilagođavanje hedera za dugme i centriranje */
.calc-header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Default za desktop */
}

.calc-header .flex-grow-1 {
    flex-grow: 1;
    text-align: center;
}

.calc-header .header-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#backToHomeBtn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #fff; /* Bela boja za čitljivost na tamnoj pozadini */
    font-weight: 600;
    padding: 0.25rem 0.75rem; /* Smanjen padding za kompaktnost */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Smanjen senka */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px; /* Smanjen razmak između ikone i teksta */
    font-size: 0.85rem; /* Smanjen font */
    text-decoration: none;
    z-index: 10;
}

#backToHomeBtn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: #f39c12;
}

#backToHomeBtn i {
    font-size: 0.75rem; /* Smanjen font ikone */
}

/* Responsivni stilovi */
@media (max-width: 576px) {
    #backToHomeBtn {
        padding: 0.25rem;
        width: 42px; /* Smanjen sa 44px */
        height: 32px; /* Smanjen sa 44px */
        border-radius: 20%;
        justify-content: center;
    }
    #backToHomeBtn span {
        display: none;
    }
    .calc-header h1 {
        font-size: 1rem; /* Dodatno smanjenje za mobilne uređaje */
    }
    .calc-header .lead {
        font-size: 0.75rem; /* Dodatno smanjenje za mobilne uređaje */
    }
}

/* Prilagođavanje hedera za dugme */
.calc-header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
        .group-card {
            transition: transform .2s, box-shadow .2s;
            border: none;
            border-radius: 12px;
            overflow: hidden;
        }
        .group-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0,0,0,.2);
        }
        .group-card .card-body {
            padding: 1.5rem;
        }
        .group-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            cursor: help;
        }
        .group-title {
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .group-desc {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: 1rem;
        }
        .group-badge {
            font-size: 0.8rem;
            padding: 0.35rem 0.75rem;
        }
        .group-link {
            font-weight: 600;
            text-decoration: none;
            transition: color .2s;
        }
        .group-link:hover {
            color: var(--bs-primary);
        }
        .search-box {
            max-width: 600px;
            margin: 0 auto 2rem;
        }
        .no-results {
            display: none;
            color: #dc3545;
            text-align: center;
            margin-top: 1rem;
        }
        footer {
            background: #111;
            color: #aaa;
            padding: 2rem 0;
            font-size: .9rem;
        }
		
        .modal-body pre {
            max-height: 60vh;
            overflow-y: auto;
            font-size: 0.85rem;
        }
        .modal-title code {
            font-size: 0.9rem;
            background: rgba(255,255,255,.2);
            padding: 0.2rem 0.4rem;
            border-radius: 0.3rem;
        }		
        /* Boje po grupama */
        .group-1 .group-icon, .group-1 .group-link { color: #005ca5; }
        .group-1 .group-badge { background-color: #005ca5; color: #fff; }
        .group-2 .group-icon, .group-2 .group-link { color: #28a745; }
        .group-2 .group-badge { background-color: #28a745; color: #fff; }
        .group-3 .group-icon, .group-3 .group-link { color: #d4a017; }
        .group-3 .group-badge { background-color: #d4a017; color: #fff; }
        .group-4 .group-icon, .group-4 .group-link { color: #ff8c42; }
        .group-4 .group-badge { background-color: #ff8c42; color: #fff; }
        .group-5 .group-icon, .group-5 .group-link { color: #6c757d; }
        .group-5 .group-badge { background-color: #6c757d; color: #fff; }
        .group-6 .group-icon, .group-6 .group-link { color: #8a2be2; }
        .group-6 .group-badge { background-color: #8a2be2; color: #fff; }
        .group-7 .group-icon, .group-7 .group-link { color: #dc3545; }
        .group-7 .group-badge { background-color: #dc3545; color: #fff; }
        .group-8 .group-icon, .group-8 .group-link { color: #2e8b57; }
        .group-8 .group-badge { background-color: #2e8b57; color: #fff; }
        .group-9 .group-icon, .group-9 .group-link { color: #ff6b6b; }
        .group-9 .group-badge { background-color: #ff6b6b; color: #fff; }
        .group-10 .group-icon, .group-10 .group-link { color: #9b59b6; }
        .group-10 .group-badge { background-color: #9b59b6; color: #fff; }
        .group-11 .group-icon, .group-11 .group-link { color: #17a2b8; }
        .group-11 .group-badge { background-color: #17a2b8; color: #fff; }
        .group-12 .group-icon, .group-12 .group-link { color: #6f42c1; }
        .group-12 .group-badge { background-color: #6f42c1; color: #fff; }
        .group-13 .group-icon, .group-13 .group-link { color: #1e3a8a; }
        .group-13 .group-badge { background-color: #1e3a8a; color: #fff; }
		.group-14 .group-icon, .group-14 .group-link { color: #6f42c1; }
		.group-14 .group-badge { background-color: #6f42c1; color: #fff; }
		.group-15 .group-icon, .group-15 .group-link { color: #17a2b8; }
		.group-15 .group-badge { background-color: #17a2b8; color: #fff; }
        /* Tooltip stilovi */
        .tooltip-inner {
            max-width: 250px;
            font-size: 0.9rem;
            text-align: left;
        }
		/* === DUGME: Nazad na grupe (levo, 10px od margine) === */
		#backToGroupsBtn {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(8px);
			color: white;
			font-weight: 600;
			padding: 0.65rem 1rem;
			border-radius: 50px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 0.95rem;
			text-decoration: none;
			z-index: 10;
		}

		#backToGroupsBtn:hover {
			background: rgba(255, 255, 255, 0.25);
			transform: translateY(-50%) translateX(2px);
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
			color: #f39c12;
		}

		#backToGroupsBtn i {
			font-size: 0.9rem;
		}

		/* Responsive: na mobilnom samo ikona */
		@media (max-width: 576px) {
			#backToGroupsBtn {
				padding: 0.65rem;
				width: 44px;
				height: 34px;
				border-radius: 20%;
				justify-content: center;
			}
			#backToGroupsBtn span {
				display: none;
			}
		}

		/* Pomeranje glavnog sadržaja da ne preklapa dugme */
		.calc-header .container {
			position: relative;
			padding-left: 60px; /* prostor za dugme + 10px margina */
		}

		@media (max-width: 576px) {
			.calc-header .container {
				padding-left: 60px;
			}
		}

#backToHomeBtn {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #fff; /* Bela boja za čitljivost na tamnoj pozadini hedera */
    font-weight: 600;
    padding: 0.65rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    text-decoration: none;
    z-index: 10;
}

#backToHomeBtn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    color: #f39c12;
}

#backToHomeBtn i {
    font-size: 0.9rem;
}

/* Responsivni stilovi */
@media (max-width: 576px) {
    #backToHomeBtn {
        padding: 0.65rem;
        width: 54px;
        height: 44px;
        border-radius: 50%;
        justify-content: center;
    }
    #backToHomeBtn span {
        display: none;
    }
}

/* Prilagođavanje hedera za dugme */
.calc-header .container {
    background: linear-gradient(135deg, #005ca5, #2c2c2c);
    color: #fff;
    padding: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Pomera dugme ka levoj ivici */
}

.calc-header .flex-grow-1 {
    flex-grow: 1;
    text-align: center;
}