/* styles.css */

/* Definisanje CSS promenljivih za boje */
:root {
	--tamno-zelena: #046463;
    --zuta-glavna: #ffb41c;
    --svetlo-zelena: #72c2b0;
    --zelena2: #016560;
    --pozadina-blaga: #f4f7f6; /* nova blaga pozadina */
	--mint-akcenat: #a2ded0;
	
    --tamno-plava: #163947;
    --narandzasta1: #eea242;
    --narandzasta2: #fd9435;
    --narandzasta3: #fc9d44;
    --narandzasta4: #f8963e;
    --zelena1: #30b791;
    --zelena2: #0eae8c;
    --svetlo-plava: #156c87;
    --bela: #ffffff;
    --tamna_siva: #333333;
}

/* Opšti stilovi */
body {
    background-color: var(--tamna_siva);
    color: white;
    font-family: 'Roboto', sans-serif; /* Koristi Google font Roboto */
}

.form-wrapper {
    background-color: var(--bela); /* Bela pozadina */
    color: var(--tamna_siva); /* Tamna boja teksta za čitljivost */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Poboljšane senke */
    border-radius: 12px; /* Zaobljene ivice */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animacije */
}

.form-wrapper:hover {
    /*transform: translateY(-5px);  Lagano podizanje pri hoveru */
    box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* Intenzivnije senke */
}

h2, h1 {
    color: var(--tamno-zelena);
    margin-bottom: 20px;
    font-weight: 700;
}

.text-center a {
    color: var(--tamno-zelena);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.form-label {
    color: var(--tamno-zelena);
    font-weight: 500;
}

.input-group-text {
    background-color: var(--tamno-zelena);
    border: none;
    color: var(--bela);
    border-radius: 0.375rem 0 0 0.375rem;
}

.form-control {
    background-color: #f8f9fa;
    border: 1px solid var(--svetlo-zelena);
    color: var(--tamna_siva);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--tamno-zelena);
    box-shadow: 0 0 5px var(--tamno-zelena);
}

.btn-primary {
    background-color: var(--zuta-glavna);
    border-color: var(--zuta-glavna);
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease;
	color: #101010;
}

.btn-primary:hover {
    background-color: var(--tamno-zelena);
    border-color: var(--tamno-zelena);
}

.form-check-label {
    color: var(--svetlo-zelena);
    font-weight: 500;
}

.footer {
    margin-top: 20px;
    text-align: center;
    color: var(--tamno-zelena);
    font-size: 0.9rem;
}

/* Stil za logo */
.logo {
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1); /* Blago povećanje pri hoveru */
}

/* Prilagođena klasa za Navbar */
.navbar-custom {
    background-color: var(--tamna_siva) !important;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-text {
    color: var(--bela) !important; /* Bijela boja teksta */
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
    color: var(--zuta-glavna) !important; /* Promena boje teksta pri hoveru */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Blaga pozadina pri hoveru */
    border-radius: 5px;
}

.navbar-custom .nav-link.active {
    color: var(--bela) !important;
    background-color: var(--narandzasta2) !important; /* Zelena pozadina za aktivni link */
    border-radius: 5px;
}

.navbar-custom .dropdown-menu {
    background-color: var(--bela) !important; /* Bela pozadina dropdown menija */
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.navbar-custom .dropdown-item {
    color: var(--tamna_siva) !important; /* Tamno siva boja teksta */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    background-color: var(--zuta-glavna) !important; /* Zelena pozadina pri hoveru */
    color: var(--bela) !important; /* Bijela boja teksta */
}

.navbar-custom .dropdown-divider {
    border-top: 1px solid #e9ecef;
}

.navbar-custom .material-icons {
    color: var(--zuta-glavna);
	vertical-align: middle;
}

/* Stilovi za dropdown stavke sa ikonicama */
.navbar-custom .dropdown-item .material-icons {
    margin-right: 8px;
    vertical-align: middle;
}

/* Hover efekti za ikone unutar dropdown stavki */
.navbar-custom .dropdown-item:hover .material-icons,
.navbar-custom .dropdown-item:focus .material-icons {
    color: var(--bela);
}

/* Stilizovanje linka unutar checkbox oznake */
.form-check-label a {
    color: var(--tamno-zelena); /* Koristi zelenu boju iz tvoje palete */
    text-decoration: none; /* Uklanja podvlačenje */
    font-weight: 500; /* Povećava debljinu fonta za bolju čitljivost */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Glatke tranzicije prilikom hovera */
}

.form-check-label a:hover {
    color: var(--zuta-glavna); /* Tamnija zelena boja pri hoveru */
    text-decoration: underline; /* Dodaje podvlačenje pri hoveru */
}

/* Responsive prilagođavanja */
@media (min-width: 768px) {
    .form-wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 992px) {
    .form-wrapper {
        padding-left: 60px;
        padding-right: 60px;
    }
}

/* Stil za toggle password dugme */
#togglePassword {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Prilagođavanje boja za nav-pills */
.nav-pills .nav-link {
    background-color: #f8f9fa; /* Svetla pozadina */
    color: #fff; /* Tamna boja teksta */
    border-radius: 0.25rem; /* Blago zaobljeni uglovi */
    margin-right: 5px; /* Razmak između dugmića */
    transition: background-color 0.3s, color 0.3s;
}

.nav-pills .nav-link:hover {
    background-color: #e2e6ea; /* Tamnija pozadina na hover */
    color: #343a40; /* Tamnija boja teksta na hover */
}

.nav-pills .nav-link.active {
    background-color: #0d6efd; /* Primarna boja aktivnog dugmića */
    color: #fff; /* Bijeli tekst za aktivni dugmić */
}

/* Prilagođavanje boja za nav-tabs (ako odlučiš da ostaneš sa nav-tabs) */
.nav-tabs .nav-link {
    background-color: transparent;
    color: #0eae8c;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;
    margin-right: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.nav-tabs .nav-link:hover {
    background-color: #e2e6ea;
    color: #343a40;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .nav-link.active {
    color: #101010;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.btn-link {
	color: #30b791;
}
		
.btn-link:hover {
	color: #f8963e;
}	

.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 150px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 40px;
    text-align:center;
	text-transform: uppercase;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-5 {
    background-image: linear-gradient(
        to right,
        var(--tamno-zelena),
        var(--zelena2),
        var(--svetlo-zelena),
        var(--mint-akcenat)
    );
    background-size: 300% 100%;
    box-shadow: 0 4px 15px 0 rgba(4, 100, 99, 0.5);
    color: white;
    transition: all 0.4s ease-in-out;
}

.btn-hover.color-5:hover {
    background-position: 100% 0;
    box-shadow: 0 6px 20px rgba(114, 194, 176, 0.6); /* svetlija senka */
    color: #043e3d;
}

.card-title {
	color:var(--tamno-zelena);
}

/* === Dropdown za login/signup stranice === */
/* === Jezički dropdown za login/signup === */

.language-login {
    color: var(--zuta-glavna);
    font-weight: 500;
    display: flex;
    align-items: center; /* Centriranje ikonice sa tekstom */
    gap: 5px; /* Mali razmak između ikonice i teksta */
    text-transform: uppercase;
}

.language-login:hover {
    color: white;
}

.language-login .material-icons {
    font-size: 20px;
    vertical-align: middle;
    transition: color 0.3s ease;
    color: var(--zuta-glavna); /* Osnovna boja ikonice */
}

.language-login:hover .material-icons {
    color: white; /* Ikonica postaje bela pri hoveru */
}

.dropdown-login .dropdown-item {
    color: var(--tamna_siva);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-login .dropdown-item:hover,
.dropdown-login .dropdown-item:focus {
    background-color: var(--zuta-glavna);
    color: white;
}

.dropdown-login .dropdown-item:hover .material-icons,
.dropdown-login .dropdown-item:focus .material-icons {
    color: white;
}

.btn-primary {
    /*width: 150px;*/
    padding: 0 20px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    background-image: linear-gradient(
        to right,
        var(--tamno-zelena),
        var(--zelena2),
        var(--svetlo-zelena),
        var(--mint-akcenat)
    );
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 15px 0 rgba(4, 100, 99, 0.5);
}

.btn-primary:hover {
    background-position: 100% 0;
    box-shadow: 0 6px 20px rgba(114, 194, 176, 0.6);
    color: #043e3d;
}


#notesToggleBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
}
#notesSidebar {
            display: none;
            position: fixed;
            bottom: 0;
            right: 0;
            width: 600px;
            height: 800px;
            background: #fff;
            border-left: 1px solid #ddd;
            border-top: 1px solid #ddd;
            box-shadow: -2px -2px 5px rgba(0,0,0,0.1);
            padding: 15px;
            z-index: 1040;
}
#notesArea {
            width: 100%;
            height: 120px;
            resize: vertical;
}
#whiteboard {
            border: 1px solid #ccc;
            width: 100%;
            height: 250px;
            touch-action: none;
            cursor: crosshair;
}
        
        

.mathlive-keyboard {
    position: fixed !important;
    bottom: 10px !important;
    right: 10px !important;
    z-index: 9999 !important;
    max-width: 480px;
    width: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 8px;
}

/* Dugme: varijanta u narandžastoj */
.btn-orange {
    /*width: 150px;*/
    padding: 0 20px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    background-image: linear-gradient(
        to right,
        var(--narandzasta1),
        var(--narandzasta2),
        var(--narandzasta3),
        var(--narandzasta4)
    );
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 15px 0 rgba(253, 148, 53, 0.5);
}

.btn-orange:hover {
    background-position: 100% 0;
    box-shadow: 0 6px 20px rgba(253, 148, 53, 0.6);
    color: #101010;
}

/* Dugme: varijanta u plavoj */
.btn-blue {
    /*width: 150px;*/
    padding: 0 20px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    border: none;
    background-image: linear-gradient(
        to right,
        var(--tamno-plava),
        var(--svetlo-plava),
        #1982a0,
        #50b6c2
    );
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 15px 0 rgba(21, 108, 135, 0.4);
}

.btn-blue:hover {
    background-position: 100% 0;
    box-shadow: 0 6px 20px rgba(21, 108, 135, 0.6);
    color: #101010;
}


/* =========================================================
   WELCOME USER — LIGHT REDESIGN
========================================================= */

body.oa-welcome-user-page {
    background:
        radial-gradient(circle at top left, rgba(162, 222, 208, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(162, 222, 208, 0.12), transparent 24%),
        #f6f8f7;
    min-height: 100vh;
    color: #172126;
}

.oa-welcome-user-container {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* HERO */

.oa-user-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    margin-bottom: 2rem;
    padding: 2rem 2.25rem;

    border: 1px solid rgba(4, 100, 99, 0.12);
    border-radius: 24px;

    background: linear-gradient(135deg, #f8fcfb 0%, #eef7f4 100%);
    box-shadow: 0 12px 30px rgba(22, 57, 71, 0.08);
}

.oa-user-hero-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.oa-user-hero-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;

    background: linear-gradient(135deg, #016560 0%, #0e866c 100%);
    color: #ffb41c;
    box-shadow: 0 10px 24px rgba(4, 100, 99, 0.18);
}

.oa-user-hero-icon .material-icons {
    font-size: 2.2rem;
}

.oa-user-hero-text h1 {
    margin: 0 0 0.4rem;
    font-size: 2.2rem;
    font-weight: 700;
    color: #0d2a33;
}

.oa-user-hero-text p {
    margin: 0;
    font-size: 1.05rem;
    color: #56656c;
}


/* KARTICE */

.oa-user-card {
    border: 1px solid rgba(22, 57, 71, 0.1);
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 57, 71, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oa-user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(22, 57, 71, 0.12);
}

.oa-user-card .card-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(22, 57, 71, 0.08);
    padding: 1.15rem 1.25rem;
}

.oa-user-card .card-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: #0f5f5a;
}

.oa-user-card .card-body {
    padding: 1.35rem 1.25rem 1.4rem;
    color: #24353c;
}


/* BEDŽEVI */

.oa-user-card img[title] {
    transition: transform 0.2s ease;
}

.oa-user-card img[title]:hover {
    transform: translateY(-3px) scale(1.04);
}


/* LISTA KURSEVA */

.oa-user-card .list-group-item {
    border: none;
    border-bottom: 1px solid rgba(22, 57, 71, 0.08);
    padding: 0.95rem 0;
    background: transparent;
    color: #172126;
}

.oa-user-card .list-group-item:last-child {
    border-bottom: none;
}

.oa-user-card .list-group-item .material-icons {
    color: #0f6a63;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.oa-user-card .btn-link {
    color: #0f6a63;
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.6rem;
}

.oa-user-card .btn-link:hover {
    color: #ffb41c;
}


/* DUGMAD */

.oa-user-card .btn-hover.color-5,
.oa-user-card .btn-primary,
.oa-user-card .btn-secondary {
    border: none;
    border-radius: 999px;
    min-width: 160px;
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(4, 100, 99, 0.16);
}

.oa-user-card .btn-hover.color-5 {
    background: linear-gradient(135deg, #016560 0%, #2f9f8a 100%);
    color: #fff;
}

.oa-user-card .btn-hover.color-5:hover {
    color: #fff;
    opacity: 0.96;
}

.oa-user-card .btn-primary {
    background: linear-gradient(135deg, #016560 0%, #2f9f8a 100%);
}

.oa-user-card .btn-secondary {
    background: #eef4f2;
    color: #0f5f5a;
}


/* BADGE ZA BROJ PORUKA */

.oa-user-card .badge.bg-danger {
    background: #d84b63 !important;
    font-size: 0.82rem;
    padding: 0.45rem 0.58rem;
    border-radius: 999px;
}


/* TYPOGRAPHY */

.oa-user-card p {
    color: #4f5f66;
    line-height: 1.65;
}

.oa-user-card h5,
.oa-user-card h6 {
    color: #172126;
}


/* RESPONSIVE */

@media (max-width: 991.98px) {
    .oa-user-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .oa-user-hero-illustration {
        align-self: flex-end;
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 767.98px) {
    .oa-welcome-user-container {
        padding-top: 1.5rem;
    }

    .oa-user-hero {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .oa-user-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .oa-user-hero-icon {
        width: 70px;
        height: 70px;
    }

    .oa-user-hero-text h1 {
        font-size: 1.7rem;
    }

    .oa-user-hero-illustration {
        display: none;
    }

    .oa-user-card {
        border-radius: 18px;
    }
}

/* =========================================================
   WELCOME USER — ISTAKNUTE KARTICE
========================================================= */

body.oa-welcome-user-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(114, 194, 176, 0.13),
            transparent 26%
        ),
        #edf3f1;

    color: #172126;
}


/* Osnovna kartica */

.oa-user-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(22, 57, 71, 0.13);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(22, 57, 71, 0.1);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


/* Gornja akcentna linija */

.oa-user-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    z-index: 2;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-user-card:hover {
    transform: translateY(-4px);

    border-color: rgba(4, 100, 99, 0.23);

    box-shadow:
        0 20px 42px rgba(22, 57, 71, 0.15);
}


/* Header kartice */

.oa-user-card .card-header {
    position: relative;

    min-height: 62px;
    padding: 18px 20px 14px;

    border-bottom: 1px solid rgba(22, 57, 71, 0.1);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5faf8
        );
}


.oa-user-card .card-title {
    margin: 0;

    color: var(--tamno-zelena);

    font-size: 1.2rem;
    font-weight: 700;
}


/* Telo kartice */

.oa-user-card .card-body {
    display: flex;
    flex-direction: column;

    padding: 20px;

    color: #172126;
}


.oa-user-card .card-body p {
    color: #3f4f56;
    line-height: 1.6;
}


/* Dugmad ostaju pri dnu kartice */

.oa-user-card .card-body > .btn-hover {
    align-self: flex-start;

    margin: auto 0 0;
    margin-top: 24px;
}


/* Specifični akcenti */

.oa-user-card-badges::before {
    background:
        linear-gradient(
            90deg,
            var(--zuta-glavna),
            var(--narandzasta2)
        );
}


.oa-user-card-badges .card-header {
    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.11),
            #ffffff 70%
        );
}


.oa-user-card-messages::before {
    background:
        linear-gradient(
            90deg,
            var(--svetlo-plava),
            #50b6c2
        );
}


.oa-user-card-messages .card-header {
    background:
        linear-gradient(
            135deg,
            rgba(21, 108, 135, 0.09),
            #ffffff 70%
        );
}


.oa-user-card-news::before {
    background:
        linear-gradient(
            90deg,
            var(--narandzasta2),
            var(--zuta-glavna)
        );
}


.oa-user-card-news .card-header {
    background:
        linear-gradient(
            135deg,
            rgba(253, 148, 53, 0.1),
            #ffffff 70%
        );
}


.oa-user-card-courses::before {
    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--zelena1)
        );
}


.oa-user-card-courses .card-header {
    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.2),
            #ffffff 70%
        );
}


.oa-user-card-homework::before {
    background:
        linear-gradient(
            90deg,
            var(--zelena2),
            var(--mint-akcenat)
        );
}


.oa-user-card-homework .card-header {
    background:
        linear-gradient(
            135deg,
            rgba(114, 194, 176, 0.16),
            #ffffff 70%
        );
}


/* Lista kurseva */

.oa-user-card-courses .list-group-item {
    margin-bottom: 9px;
    padding: 14px 16px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 12px;

    background: #f7faf9;
}


.oa-user-card-courses .list-group-item:last-child {
    margin-bottom: 0;
}


/* Mobilni prikaz */

@media (max-width: 767.98px) {
    .oa-user-card {
        border-radius: 17px;
    }

    .oa-user-card .card-header {
        padding-right: 17px;
        padding-left: 17px;
    }

    .oa-user-card .card-body {
        padding: 18px 17px;
    }
}

/* =========================================================
   WELCOME USER — CARD HEADER ICONS
========================================================= */

.oa-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.oa-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.oa-card-title-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;

    background: rgba(1, 101, 96, 0.10);
    color: #0f6a63;
}

.oa-card-title-icon .material-icons {
    font-size: 1.25rem;
    margin: 0;
}

.oa-user-card .card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #145b59;
    line-height: 1.2;
}

/* Lepši badge za broj poruka */

.oa-card-count {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;

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

    border-radius: 999px;

    background: linear-gradient(135deg, #d94d66 0%, #c8435b 100%);
    color: #fff;

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;

    box-shadow: 0 8px 16px rgba(201, 67, 91, 0.22);
}

/* Varijacije boje ikonice po kartici */

.oa-user-card-badges .oa-card-title-icon {
    background: rgba(255, 180, 28, 0.16);
    color: #b87600;
}

.oa-user-card-messages .oa-card-title-icon {
    background: rgba(71, 148, 187, 0.14);
    color: #2f7b9f;
}

.oa-user-card-news .oa-card-title-icon {
    background: rgba(253, 148, 53, 0.14);
    color: #d87415;
}

.oa-user-card-courses .oa-card-title-icon {
    background: rgba(1, 101, 96, 0.10);
    color: #0f6a63;
}

.oa-user-card-homework .oa-card-title-icon {
    background: rgba(114, 194, 176, 0.18);
    color: #22846f;
}

/* =========================================================
   SMART BUTTONS — WELCOME USER
========================================================= */

.oa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 46px;
    padding: 0.72rem 1.35rem;

    border-radius: 14px;
    border: 1px solid transparent;

    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.oa-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.oa-btn .material-icons {
    font-size: 1.15rem;
    margin: 0;
}


/* Primarno zeleno dugme */

.oa-btn-primary {
    background: linear-gradient(135deg, #015a57 0%, #2d9b87 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(4, 100, 99, 0.18);
}

.oa-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(4, 100, 99, 0.24);
}


/* Svetlije / soft dugme */

.oa-btn-soft {
    background: #edf7f4;
    border-color: rgba(1, 101, 96, 0.16);
    color: #0f6761;
    box-shadow: 0 8px 18px rgba(22, 57, 71, 0.06);
}

.oa-btn-soft:hover {
    background: #e4f2ee;
    color: #0c5b56;
    border-color: rgba(1, 101, 96, 0.22);
    box-shadow: 0 12px 22px rgba(22, 57, 71, 0.09);
}


/* Ako želiš užu varijantu za manje kartice */

.oa-btn-sm {
    min-height: 42px;
    padding: 0.65rem 1.15rem;
    font-size: 0.92rem;
}


/* Full width za mobilni ako zatreba */

@media (max-width: 575.98px) {
    .oa-btn-mobile-full {
        width: 100%;
    }
}

/* =========================================================
   WELCOME USER — FINALNO DUGMAD I POZICIONIRANJE
========================================================= */

.oa-user-card .card-body {
    display: flex;
    flex-direction: column;
}

/* Osnovni stil svih dugmadi na welcome stranici */

.oa-user-card .oa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: fit-content !important;
    min-width: 0;
    min-height: 42px;

    padding: 0.62rem 1.15rem;

    border-radius: 12px;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;

    white-space: nowrap;
}

.oa-user-card .oa-btn .material-icons {
    margin: 0;
    font-size: 1.05rem;
}


/* Zeleno popunjeno */

.oa-user-card .oa-btn-primary {
    border: 1px solid transparent;

    background:
        linear-gradient(
            110deg,
            #075f5b,
            #55a88f
        );

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(4, 100, 99, 0.19);
}

.oa-user-card .oa-btn-primary:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 23px rgba(4, 100, 99, 0.26);
}


/* Svetlo dugme */

.oa-user-card .oa-btn-soft {
    border: 1px solid rgba(4, 100, 99, 0.16);

    background: #edf7f4;
    color: #075f5b;

    box-shadow:
        0 7px 15px rgba(22, 57, 71, 0.06);
}

.oa-user-card .oa-btn-soft:hover {
    border-color: rgba(4, 100, 99, 0.25);

    background: #e3f2ed;
    color: #064f4c;

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(22, 57, 71, 0.1);
}


/* =========================================================
   POJEDINAČNE DIMENZIJE I POZICIJE
========================================================= */

/* Svi bedževi */

.oa-btn-badges {
    min-width: 190px !important;

    margin-top: auto;
    align-self: flex-start;
}


/* Sve poruke */

.oa-btn-messages {
    min-width: 155px !important;

    margin-top: auto;
    align-self: flex-start;
}


/* Svi zadaci */

.oa-btn-homework {
    min-width: 150px !important;

    margin-top: auto;
    align-self: flex-end;
}


/* Otvori kurs */

.oa-btn-course {
    min-width: 130px !important;
    min-height: 40px !important;

    margin-left: auto;
    padding: 0.55rem 0.95rem !important;

    font-size: 0.78rem !important;
}


/* Lista kurseva */

.oa-user-card-courses .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 66px;
    padding: 11px 14px;
}

.oa-user-card-courses .list-group-item > .material-icons {
    flex: 0 0 auto;
}


/* Jednake pozicije dugmadi u gornjim karticama */

.oa-user-card-badges .card-body,
.oa-user-card-messages .card-body {
    min-height: 170px;
}


/* Malo finiji tekst kartica */

.oa-user-card .card-title {
    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.oa-user-card .card-body {
    font-family: "Open Sans", "Segoe UI", sans-serif;
    font-size: 0.91rem;
}


/* Mobilni prikaz */

@media (max-width: 575.98px) {
    .oa-btn-badges,
    .oa-btn-messages,
    .oa-btn-homework {
        width: 100% !important;
        min-width: 0 !important;
        align-self: stretch;
    }

    .oa-user-card-courses .list-group-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-btn-course {
        margin-left: 0;
    }
}

/* =========================================================
   WELCOME USER — HOMEWORK STATUS
========================================================= */

.oa-homework-card-body {
    display: flex;
    justify-content: center;
    padding: 28px 30px !important;
}

.oa-homework-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    width: 100%;
}

.oa-homework-status {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
}

.oa-homework-status-icon {
    display: grid;
    flex: 0 0 76px;

    width: 76px;
    height: 76px;

    place-items: center;

    border: 10px solid rgba(162, 222, 208, 0.25);
    border-radius: 50%;

    background: rgba(162, 222, 208, 0.32);
    color: var(--tamno-zelena);
}

.oa-homework-status-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}

.oa-homework-status-content {
    min-width: 0;
}

.oa-homework-number-row {
    display: flex;
    align-items: baseline;
    gap: 11px;
}

.oa-homework-number {
    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1;
}

.oa-homework-number-label {
    color: #4e5d63;

    font-family: "Open Sans", "Segoe UI", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
}

.oa-homework-status-text {
    margin: 8px 0 0 !important;

    color: #6b787e !important;

    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}

.oa-user-card-homework .oa-btn-homework {
    flex: 0 0 auto;
    align-self: center;

    min-width: 150px !important;
    margin: 0;
}


/* Tablet */

@media (max-width: 767.98px) {
    .oa-homework-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .oa-user-card-homework .oa-btn-homework {
        align-self: flex-start;
    }
}


/* Manji mobilni ekrani */

@media (max-width: 479.98px) {
    .oa-homework-card-body {
        padding: 22px 18px !important;
    }

    .oa-homework-status {
        align-items: flex-start;
    }

    .oa-homework-status-icon {
        flex-basis: 62px;

        width: 62px;
        height: 62px;

        border-width: 7px;
    }

    .oa-homework-number-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .oa-homework-number {
        font-size: 2.2rem;
    }

    .oa-user-card-homework .oa-btn-homework {
        width: 100% !important;
    }
}

.oa-user-hero-illustration {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 330px;
    width: 330px;
    height: 180px;

    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.oa-user-hero-image {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    object-fit: contain;
}

/* Kompaktniji welcome banner */

.oa-user-hero {
    min-height: 0;
    margin-bottom: 1.5rem;
    padding: 1.25rem 2rem;
}

.oa-user-hero-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
}

.oa-user-hero-icon .material-icons {
    font-size: 1.9rem;
}

.oa-user-hero-text h1 {
    margin-bottom: 0.25rem;
    font-size: 1.9rem;
}

.oa-user-hero-text p {
    font-size: 0.95rem;
}

.oa-user-hero-illustration {
    flex: 0 0 285px;
    width: 285px;
    height: 125px;
    overflow: hidden;
}

.oa-user-hero-image {
    width: 340px;
    max-width: none;
    height: auto;
    transform: translateX(16px);
}

/* =========================================================
   SMARTCLASS — PROFESSOR DASHBOARD
========================================================= */

.oa-welcome-professor-page .oa-user-hero {
    margin-bottom: 24px;
}


/* Objava */

.oa-professor-announcement-title {
    margin: 0 0 9px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


/* Glavna sekcija kurseva */

.oa-professor-courses-section {
    margin-top: 26px;
    padding: 24px;

    border: 1px solid rgba(22, 57, 71, 0.1);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 251, 250, 0.96)
        );

    box-shadow:
        0 12px 32px rgba(22, 57, 71, 0.08);
}


.oa-professor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);
}


.oa-professor-section-header h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}


.oa-professor-section-label,
.oa-professor-course-label {
    display: block;

    color: #708087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-course-count {
    display: grid;

    min-width: 36px;
    height: 36px;
    padding: 0 10px;

    place-items: center;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.35);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
}


/* Pojedinačna kartica kursa */

.oa-professor-course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding: 21px;

    border: 1px solid rgba(22, 57, 71, 0.1);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 24px rgba(22, 57, 71, 0.07);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.oa-professor-course-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-professor-course-card:hover {
    transform: translateY(-4px);

    border-color: rgba(4, 100, 99, 0.2);

    box-shadow:
        0 16px 34px rgba(22, 57, 71, 0.12);
}


.oa-professor-course-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 17px;
}


.oa-professor-course-icon {
    display: grid;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.25);
    color: var(--tamno-zelena);
}


.oa-professor-course-icon .material-icons {
    margin: 0;
    font-size: 1.35rem;
}


.oa-professor-course-card h3 {
    margin: 3px 0 0;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}


.oa-professor-course-description {
    flex: 1;

    min-height: 73px;
    margin: 0 0 21px;

    color: #56656c;

    font-size: 0.86rem;
    line-height: 1.6;
}


/* Akcije kursa */

.oa-professor-course-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: auto;
}


.oa-professor-live-form {
    margin: 0;
}


.oa-professor-course-open,
.oa-professor-live-start,
.oa-professor-live-active {
    min-height: 40px !important;
    padding: 0.58rem 0.9rem !important;

    font-size: 0.75rem !important;
}


.oa-professor-course-open {
    min-width: 120px;
}


.oa-professor-live-start {
    min-width: 150px;
}


/* Aktivni čas */

.oa-professor-live-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 150px;

    border: 1px solid rgba(255, 180, 28, 0.45);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffb41c,
            #fd9435
        );

    color: #163947;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-weight: 700;
    text-decoration: none;

    box-shadow:
        0 8px 18px rgba(255, 180, 28, 0.23);
}


.oa-professor-live-active:hover {
    transform: translateY(-2px);

    color: #163947;

    box-shadow:
        0 12px 24px rgba(255, 180, 28, 0.3);
}


.oa-live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #016560;

    box-shadow:
        0 0 0 4px rgba(1, 101, 96, 0.14);
}


/* Prazno stanje */

.oa-professor-courses-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 180px;

    color: #6d7c82;
    text-align: center;
}


.oa-professor-courses-empty .material-icons {
    margin: 0 0 10px;

    color: var(--svetlo-zelena);

    font-size: 2.7rem;
}


.oa-professor-courses-empty p {
    margin: 0;
}


/* Responsive */

@media (max-width: 767.98px) {
    .oa-professor-courses-section {
        padding: 19px 17px;
    }

    .oa-professor-course-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-professor-course-actions .oa-btn,
    .oa-professor-live-form,
    .oa-professor-live-form button {
        width: 100%;
    }
}

/* =========================================================
   PROFESSOR DASHBOARD — ISTAKNUTE KARTICE KURSEVA
========================================================= */

.oa-professor-courses-section {
    background:
        linear-gradient(
            145deg,
            rgba(247, 251, 250, 0.98),
            rgba(238, 246, 243, 0.96)
        );

    border-color: rgba(4, 100, 99, 0.13);
}


/* Pojedinačni kurs */

.oa-professor-course-card {
    border: 1px solid rgba(4, 100, 99, 0.22);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fbf9 100%
        );

    box-shadow:
        0 11px 27px rgba(22, 57, 71, 0.11),
        inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}


/* Izraženija gornja linija */

.oa-professor-course-card::before {
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--mint-akcenat)
        );
}


/* Hover */

.oa-professor-course-card:hover {
    transform: translateY(-5px);

    border-color: rgba(4, 100, 99, 0.38);

    box-shadow:
        0 19px 40px rgba(22, 57, 71, 0.16),
        inset 0 0 0 1px rgba(4, 100, 99, 0.04);
}


/* Ikonica kursa */

.oa-professor-course-icon {
    border: 1px solid rgba(4, 100, 99, 0.12);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.34),
            rgba(238, 247, 244, 0.95)
        );
}


/* Akcije odvojene od opisa */

.oa-professor-course-actions {
    padding-top: 15px;

    border-top: 1px solid rgba(22, 57, 71, 0.08);
}

/* =========================================================
   SMARTCLASS — MESSAGES PAGE
========================================================= */

body.oa-messages-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(114, 194, 176, 0.13),
            transparent 25%
        ),
        #edf3f1;

    color: #172126;
}


.oa-messages-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-messages-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 25px;
    padding: 25px 29px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-messages-hero-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-messages-hero-icon {
    display: grid;
    flex: 0 0 66px;

    width: 66px;
    height: 66px;

    place-items: center;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #3d947f
        );

    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(4, 100, 99, 0.2);
}


.oa-messages-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-messages-kicker,
.oa-messages-panel-label {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-messages-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-messages-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


/* Statistika */

.oa-messages-stats {
    display: flex;
    align-items: stretch;
    gap: 10px;
}


.oa-messages-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-width: 105px;
    min-height: 68px;
    padding: 10px 15px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.8);
}


.oa-messages-stat strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}


.oa-messages-stat span {
    margin-top: 6px;

    color: #718087;

    font-size: 0.67rem;
    font-weight: 600;
    text-align: center;
}


.oa-messages-stat-unread {
    border-color: rgba(201, 67, 91, 0.15);
    background: rgba(216, 75, 99, 0.07);
}


.oa-messages-stat-unread strong {
    color: #c94660;
}


/* Glavni inbox panel */

.oa-messages-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 13px 34px rgba(22, 57, 71, 0.1);
}


.oa-messages-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;

    border-top: 4px solid var(--svetlo-plava);
    border-bottom: 1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(21, 108, 135, 0.07),
            #ffffff 60%
        );
}


.oa-messages-panel-header h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


/* Lista poruka */

.oa-messages-list {
    display: grid;
}


.oa-message-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;

    padding: 17px 21px;

    border-bottom: 1px solid rgba(22, 57, 71, 0.08);

    background: #ffffff;
    color: #172126;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.oa-message-item:last-child {
    border-bottom: 0;
}


.oa-message-item:hover {
    z-index: 1;

    transform: translateY(-1px);

    background: #f7fbf9;
    color: #172126;

    box-shadow:
        0 8px 20px rgba(22, 57, 71, 0.08);
}


/* Nepročitana poruka */

.oa-message-unread {
    background:
        linear-gradient(
            90deg,
            rgba(162, 222, 208, 0.18),
            #ffffff 38%
        );
}


.oa-message-unread::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


/* Avatar */

.oa-message-avatar {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 14px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena);
}


.oa-message-unread .oa-message-avatar {
    background: rgba(162, 222, 208, 0.34);
}


.oa-message-avatar .material-icons {
    margin: 0;
    font-size: 1.35rem;
}


/* Sadržaj poruke */

.oa-message-content {
    min-width: 0;
}


.oa-message-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}


.oa-message-top-row h3 {
    overflow: hidden;

    margin: 0;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-message-unread .oa-message-top-row h3 {
    color: var(--tamno-zelena);
    font-weight: 700;
}


.oa-message-top-row time {
    flex: 0 0 auto;

    color: #7b898e;

    font-size: 0.69rem;
    white-space: nowrap;
}


.oa-message-content > p {
    overflow: hidden;

    margin: 5px 0 9px;

    color: #536269;

    font-size: 0.82rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Status i akcija */

.oa-message-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.oa-message-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #78868b;

    font-size: 0.67rem;
    font-weight: 600;
}


.oa-message-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a9b4b7;
}


.oa-message-unread .oa-message-status {
    color: var(--tamno-zelena);
}


.oa-message-unread .oa-message-status-dot {
    background: var(--zelena1);

    box-shadow:
        0 0 0 4px rgba(48, 183, 145, 0.13);
}


.oa-message-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
}


.oa-message-open .material-icons {
    margin: 0;
    font-size: 0.95rem;

    transition: transform 0.18s ease;
}


.oa-message-item:hover .oa-message-open .material-icons {
    transform: translateX(3px);
}


/* Prazno stanje */

.oa-messages-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 280px;
    padding: 35px;

    color: #718087;
    text-align: center;
}


.oa-messages-empty > .material-icons {
    margin: 0 0 12px;

    color: var(--svetlo-zelena);

    font-size: 3rem;
}


.oa-messages-empty h3 {
    margin: 0 0 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
}


.oa-messages-empty p {
    margin: 0;

    font-size: 0.84rem;
}


/* Alert poruke */

.oa-messages-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 767.98px) {
    .oa-messages-main {
        padding: 24px 0 55px;
    }

    .oa-messages-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-messages-stats {
        width: 100%;
    }

    .oa-messages-stat {
        flex: 1;
        min-width: 0;
    }

    .oa-message-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;

        padding: 15px;
    }

    .oa-message-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .oa-message-top-row {
        flex-direction: column;
        gap: 4px;
    }

    .oa-message-content > p {
        white-space: normal;
    }
}


@media (max-width: 479.98px) {
    .oa-messages-hero-heading {
        align-items: flex-start;
    }

    .oa-messages-hero-icon {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }

    .oa-messages-hero h1 {
        font-size: 1.4rem;
    }

    .oa-message-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* =========================================================
   SMARTCLASS — VIEW MESSAGE
========================================================= */

body.oa-message-view-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(114, 194, 176, 0.13),
            transparent 25%
        ),
        #edf3f1;

    color: #172126;
}


.oa-message-view-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-message-view-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 24px;
    padding: 23px 27px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-message-view-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}


.oa-message-view-hero-icon {
    display: grid;
    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #3d947f
        );

    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(4, 100, 99, 0.2);
}


.oa-message-view-hero-icon .material-icons {
    margin: 0;
    font-size: 1.85rem;
}


.oa-message-view-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-message-view-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
}


.oa-message-view-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-message-back-top {
    flex: 0 0 auto;
}


/* Glavna kartica poruke */

.oa-message-detail-card {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(22, 57, 71, 0.11);
}


.oa-message-detail-card::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--svetlo-plava),
            var(--svetlo-zelena),
            var(--mint-akcenat)
        );
}


/* Zaglavlje poruke */

.oa-message-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    padding: 22px 25px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(21, 108, 135, 0.07),
            #ffffff 58%
        );
}


.oa-message-detail-sender {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}


.oa-message-detail-avatar {
    display: grid;
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    place-items: center;

    border: 1px solid rgba(4, 100, 99, 0.12);
    border-radius: 14px;

    background: rgba(162, 222, 208, 0.26);
    color: var(--tamno-zelena);
}


.oa-message-detail-avatar .material-icons {
    margin: 0;
    font-size: 1.4rem;
}


.oa-message-detail-label {
    display: block;

    margin-bottom: 3px;

    color: #76858a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.oa-message-detail-sender h2 {
    overflow: hidden;

    margin: 0;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Datum */

.oa-message-detail-date {
    display: flex;
    align-items: center;
    gap: 9px;

    flex: 0 0 auto;

    color: #718087;
}


.oa-message-detail-date > .material-icons {
    margin: 0;

    color: var(--svetlo-plava);

    font-size: 1.25rem;
}


.oa-message-detail-date div {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}


.oa-message-detail-date span {
    font-size: 0.64rem;
    font-weight: 600;
}


.oa-message-detail-date time {
    margin-top: 2px;

    color: #3f4f56;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
}


/* Sadržaj poruke */

.oa-message-detail-content {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 17px;

    min-height: 220px;
    padding: 32px 30px;
}


.oa-message-detail-content-icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.19);
    color: var(--tamno-zelena);
}


.oa-message-detail-content-icon .material-icons {
    margin: 0;
    font-size: 1.35rem;
}


.oa-message-detail-text {
    color: #34454c;

    font-size: 0.93rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}


/* Akcije */

.oa-message-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 18px 25px;

    border-top:
        1px solid rgba(22, 57, 71, 0.09);

    background: #f8fbfa;
}


.oa-message-delete-form {
    margin: 0;
}


/* Diskretno crveno dugme */

.oa-btn-danger-soft {
    border: 1px solid rgba(190, 54, 72, 0.17);

    background: rgba(216, 75, 99, 0.08);
    color: #b73e53;

    box-shadow:
        0 7px 15px rgba(190, 54, 72, 0.07);
}


.oa-btn-danger-soft:hover {
    transform: translateY(-2px);

    border-color: rgba(190, 54, 72, 0.28);

    background: rgba(216, 75, 99, 0.13);
    color: #9e3046;

    box-shadow:
        0 10px 20px rgba(190, 54, 72, 0.12);
}


/* Responsive */

@media (max-width: 767.98px) {
    .oa-message-view-main {
        padding: 24px 0 55px;
    }

    .oa-message-view-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-message-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-message-detail-date {
        padding-left: 62px;
    }

    .oa-message-detail-date div {
        align-items: flex-start;
    }

    .oa-message-detail-content {
        grid-template-columns: 1fr;

        min-height: 180px;
        padding: 25px 21px;
    }

    .oa-message-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-message-detail-actions .oa-btn,
    .oa-message-delete-form,
    .oa-message-delete-form button {
        width: 100%;
    }
}


@media (max-width: 479.98px) {
    .oa-message-view-heading {
        align-items: flex-start;
    }

    .oa-message-view-hero-icon {
        flex-basis: 52px;

        width: 52px;
        height: 52px;
    }

    .oa-message-view-hero h1 {
        font-size: 1.35rem;
    }

    .oa-message-detail-sender {
        align-items: flex-start;
    }

    .oa-message-detail-date {
        padding-left: 0;
    }
}

/* =========================================================
   SMARTCLASS — PROFILE PAGE
========================================================= */

body.oa-profile-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(114, 194, 176, 0.13),
            transparent 25%
        ),
        #edf3f1;

    color: #172126;
}


.oa-profile-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 25px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-profile-hero-content {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-profile-avatar {
    display: grid;
    flex: 0 0 70px;

    width: 70px;
    height: 70px;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #4fa88e
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 1.22rem;
    font-weight: 700;

    box-shadow:
        0 10px 24px rgba(4, 100, 99, 0.2);
}


.oa-profile-kicker,
.oa-profile-card-label {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-profile-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-profile-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


.oa-profile-hero-icon {
    display: grid;
    flex: 0 0 82px;

    width: 82px;
    height: 82px;

    place-items: center;

    border-radius: 20px;

    background: rgba(162, 222, 208, 0.17);
    color: rgba(4, 100, 99, 0.72);
}


.oa-profile-hero-icon .material-icons {
    margin: 0;
    font-size: 2.8rem;
}


/* Zajednička kartica */

.oa-profile-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-profile-card::before {
    content: "";

    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-profile-finance-card {
    margin-top: 24px;
}


.oa-profile-finance-card::before {
    background:
        linear-gradient(
            90deg,
            var(--zuta-glavna),
            var(--narandzasta2)
        );
}


.oa-profile-password-card::before {
    background:
        linear-gradient(
            90deg,
            var(--svetlo-plava),
            var(--svetlo-zelena)
        );
}


.oa-profile-card-header {
    padding: 17px 20px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.1),
            #ffffff 68%
        );
}


.oa-profile-finance-card .oa-profile-card-header {
    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.09),
            #ffffff 68%
        );
}


.oa-profile-card-header h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


.oa-profile-card-body {
    padding: 22px;
}


/* Lični podaci */

.oa-profile-info-row {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);
}


.oa-profile-info-row:first-child {
    padding-top: 0;
}


.oa-profile-info-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


.oa-profile-info-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena);
}


.oa-profile-info-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-profile-info-row > div {
    display: flex;
    flex-direction: column;
}


.oa-profile-info-row span {
    color: #77858a;

    font-size: 0.69rem;
    font-weight: 600;
}


.oa-profile-info-row strong {
    margin-top: 2px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}


/* Finansije */

.oa-profile-finance-intro {
    margin: 0 0 18px;

    color: #5d6b71;

    font-size: 0.84rem;
    line-height: 1.6;
}


.oa-profile-total {
    padding: 17px 18px;

    border: 1px solid rgba(255, 180, 28, 0.18);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.1),
            rgba(255, 255, 255, 0.9)
        );
}


.oa-profile-total > span {
    display: block;

    margin-bottom: 6px;

    color: #7d6b49;

    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-profile-total strong {
    display: block;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
}


.oa-profile-total small {
    display: block;

    margin-top: 5px;

    color: #7a878c;
    font-size: 0.72rem;
}


/* Forma za lozinku */

.oa-profile-password-note {
    margin: 0 0 22px;

    color: #5d6b71;

    font-size: 0.84rem;
    line-height: 1.6;
}


.oa-profile-password-form {
    display: grid;
    gap: 18px;
}


.oa-profile-form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
}


.oa-profile-input-wrap {
    position: relative;
}


.oa-profile-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #59988a;

    font-size: 1.15rem;

    transform: translateY(-50%);
}


.oa-profile-input-wrap .form-control {
    min-height: 48px;
    padding: 0.7rem 0.9rem 0.7rem 43px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #f8fbfa;
    color: #172126;

    box-shadow: none;
}


.oa-profile-input-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.45);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.09);
}


.oa-profile-save-button {
    align-self: flex-start;

    min-width: 165px;
    margin-top: 3px;
}


/* Alerti */

.oa-profile-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-profile-password-card {
        min-height: auto;
    }
}


@media (max-width: 767.98px) {
    .oa-profile-main {
        padding: 24px 0 55px;
    }

    .oa-profile-hero {
        padding: 21px;
    }

    .oa-profile-hero-icon {
        display: none;
    }

    .oa-profile-card-body {
        padding: 19px;
    }
}


@media (max-width: 479.98px) {
    .oa-profile-hero-content {
        align-items: flex-start;
    }

    .oa-profile-avatar {
        flex-basis: 56px;

        width: 56px;
        height: 56px;

        font-size: 1rem;
    }

    .oa-profile-hero h1 {
        font-size: 1.4rem;
    }

    .oa-profile-save-button {
        width: 100%;
    }
}

/* =========================================================
   SMARTCLASS — BADGES PAGE
========================================================= */

body.oa-badges-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.09),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-badges-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-badges-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 25px;
    padding: 24px 29px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(244, 250, 248, 0.97)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-badges-hero-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-badges-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #d9951a,
            var(--zuta-glavna)
        );

    color: var(--tamno-plava);

    box-shadow:
        0 10px 23px rgba(255, 180, 28, 0.25);
}


.oa-badges-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-badges-kicker,
.oa-badges-panel-label {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-badges-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-badges-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


/* Napredak kolekcije */

.oa-badges-summary {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 280px;
    padding: 14px 17px;

    border: 1px solid rgba(255, 180, 28, 0.18);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.1),
            rgba(255, 255, 255, 0.88)
        );
}


.oa-badges-summary-number {
    display: flex;
    align-items: baseline;
    gap: 3px;

    flex: 0 0 auto;
}


.oa-badges-summary-number strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
}


.oa-badges-summary-number span {
    color: #77858a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}


.oa-badges-summary-text {
    flex: 1;
}


.oa-badges-summary-text > span {
    display: block;

    margin-bottom: 7px;

    color: #56656c;

    font-size: 0.7rem;
    font-weight: 700;
}


.oa-badges-progress {
    overflow: hidden;

    height: 7px;

    border-radius: 999px;

    background: rgba(22, 57, 71, 0.1);
}


.oa-badges-progress > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-badges-summary-text small {
    display: block;

    margin-top: 5px;

    color: #7b898e;

    font-size: 0.64rem;
    text-align: right;
}


/* Glavni panel */

.oa-badges-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(248, 252, 250, 0.98),
            rgba(238, 246, 243, 0.96)
        );

    box-shadow:
        0 13px 34px rgba(22, 57, 71, 0.1);
}


.oa-badges-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;

    border-top: 4px solid var(--zuta-glavna);
    border-bottom: 1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.07),
            #ffffff 58%
        );
}


.oa-badges-panel-header h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


/* Legenda */

.oa-badges-legend {
    display: flex;
    align-items: center;
    gap: 16px;
}


.oa-badges-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #718087;

    font-size: 0.68rem;
    font-weight: 600;
}


.oa-badge-legend-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.oa-badge-dot-owned {
    background: var(--zelena1);

    box-shadow:
        0 0 0 4px rgba(48, 183, 145, 0.12);
}


.oa-badge-dot-locked {
    background: #adb7ba;
}


/* Grid */

.oa-badges-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 16px;

    padding: 23px;
}


/* Pojedinačna kartica */

.oa-badge-card {
    position: relative;
    overflow: hidden;

    min-height: 205px;
    padding: 15px 13px 18px;

    border: 1px solid rgba(22, 57, 71, 0.11);
    border-radius: 17px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.07);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.oa-badge-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;
}


.oa-badge-card-owned::before {
    background:
        linear-gradient(
            90deg,
            var(--zuta-glavna),
            var(--narandzasta2)
        );
}


.oa-badge-card-locked::before {
    background:
        linear-gradient(
            90deg,
            #c5ccce,
            #e1e5e6
        );
}


.oa-badge-card-owned:hover {
    transform: translateY(-5px);

    border-color: rgba(255, 180, 28, 0.32);

    box-shadow:
        0 16px 31px rgba(22, 57, 71, 0.12);
}


.oa-badge-card-locked {
    background:
        linear-gradient(
            145deg,
            #f7f9f8,
            #edf1f0
        );
}


/* Status */

.oa-badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 23px;
    padding: 4px 8px;

    border-radius: 999px;

    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-badge-card-owned .oa-badge-status {
    background: rgba(48, 183, 145, 0.1);
    color: var(--tamno-zelena);
}


.oa-badge-card-locked .oa-badge-status {
    background: rgba(120, 134, 139, 0.1);
    color: #7f8c90;
}


.oa-badge-status .material-icons {
    margin: 0;
    font-size: 0.9rem;
}


/* Slika */

.oa-badge-image-wrap {
    position: relative;

    width: 92px;
    height: 92px;
    margin: 15px auto 13px;
}


.oa-badge-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 9px rgba(22, 57, 71, 0.13)
        );

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


.oa-badge-card-owned:hover .oa-badge-image {
    transform: translateY(-3px) scale(1.04);
}


.oa-badge-card-locked .oa-badge-image {
    opacity: 0.22;
    filter: grayscale(1);
}


.oa-badge-lock-overlay {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;
}


.oa-badge-lock-overlay .material-icons {
    display: grid;

    width: 34px;
    height: 34px;

    margin: 0;

    place-items: center;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.88);
    color: #849195;

    font-size: 1rem;

    box-shadow:
        0 5px 13px rgba(22, 57, 71, 0.1);
}


.oa-badge-card h3 {
    margin: 0;

    color: #24353c;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}


.oa-badge-card-locked h3 {
    color: #899598;
}


/* Prazno stanje */

.oa-badges-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 260px;
    padding: 35px;

    color: #718087;
    text-align: center;
}


.oa-badges-empty > .material-icons {
    margin: 0 0 12px;

    color: var(--zuta-glavna);

    font-size: 3rem;
}


.oa-badges-empty h3 {
    margin: 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-badges-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .oa-badges-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 991.98px) {
    .oa-badges-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-badges-summary {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 767.98px) {
    .oa-badges-main {
        padding: 24px 0 55px;
    }

    .oa-badges-hero {
        padding: 21px;
    }

    .oa-badges-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-badges-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 12px;
        padding: 17px;
    }
}


@media (max-width: 575.98px) {
    .oa-badges-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-badge-card {
        min-height: 190px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .oa-badge-image-wrap {
        width: 78px;
        height: 78px;
    }
}


@media (max-width: 399.98px) {
    .oa-badges-hero-heading {
        align-items: flex-start;
    }

    .oa-badges-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-badges-hero h1 {
        font-size: 1.35rem;
    }
}

/* =========================================================
   SMARTCLASS WORKSHEETS — HOMEWORK PAGE
========================================================= */

body.oa-homework-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-homework-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-homework-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 22px;
    padding: 24px 29px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-homework-hero-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-homework-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-homework-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-homework-kicker,
.oa-homework-panel-label {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-homework-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-homework-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


/* Broj aktivnih zadataka */

.oa-homework-hero-summary {
    display: flex;
    gap: 10px;
}


.oa-homework-hero-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-width: 105px;
    min-height: 70px;
    padding: 10px 15px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.82);
}


.oa-homework-hero-stat strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}


.oa-homework-hero-stat span {
    margin-top: 6px;

    color: #718087;

    font-size: 0.68rem;
    font-weight: 600;
}


.oa-homework-hero-pending {
    border-color: rgba(255, 180, 28, 0.22);
    background: rgba(255, 180, 28, 0.08);
}


.oa-homework-hero-pending strong {
    color: #c78312;
}


/* Statistika */

.oa-homework-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 24px;
}


.oa-homework-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 88px;
    padding: 16px 18px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-homework-stat-icon {
    display: grid;
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-homework-stat-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


.oa-homework-stat-card > div {
    display: flex;
    flex-direction: column;
}


.oa-homework-stat-card span {
    color: #748287;

    font-size: 0.68rem;
    font-weight: 600;
}


.oa-homework-stat-card strong {
    margin-top: 3px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}


.oa-homework-stat-correct .oa-homework-stat-icon {
    background: rgba(48, 183, 145, 0.13);
    color: #218267;
}


.oa-homework-stat-accuracy .oa-homework-stat-icon {
    background: rgba(21, 108, 135, 0.11);
    color: var(--svetlo-plava);
}


/* Glavni panel */

.oa-homework-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(248, 252, 250, 0.98),
            rgba(238, 246, 243, 0.96)
        );

    box-shadow:
        0 13px 34px rgba(22, 57, 71, 0.1);
}


.oa-homework-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;

    border-top: 4px solid var(--svetlo-zelena);
    border-bottom: 1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.13),
            #ffffff 60%
        );
}


.oa-homework-panel-header h2 {
    margin: 2px 0 2px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


.oa-homework-panel-header p {
    margin: 0;

    color: #718087;

    font-size: 0.72rem;
}


.oa-homework-panel-count,
.oa-homework-history-count {
    display: grid;
    flex: 0 0 auto;

    min-width: 36px;
    height: 36px;
    padding: 0 10px;

    place-items: center;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.3);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
}


/* Lista aktivnih zadataka */

.oa-homework-task-list {
    display: grid;
    gap: 16px;

    padding: 22px;
}


.oa-homework-task-card {
    position: relative;
    overflow: hidden;

    padding: 19px 20px 17px;

    border: 1px solid rgba(4, 100, 99, 0.17);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.08);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.oa-homework-task-card::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;
}


.oa-homework-task-pending::before {
    background:
        linear-gradient(
            180deg,
            var(--zuta-glavna),
            var(--narandzasta2)
        );
}


.oa-homework-task-submitted::before {
    background:
        linear-gradient(
            180deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-homework-task-card:hover {
    transform: translateY(-3px);

    border-color: rgba(4, 100, 99, 0.3);

    box-shadow:
        0 15px 31px rgba(22, 57, 71, 0.12);
}


/* Gornji red */

.oa-homework-task-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 17px;
}


.oa-homework-course-chip,
.oa-homework-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 29px;
    padding: 5px 10px;

    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 600;
}


.oa-homework-course-chip {
    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-homework-due-chip {
    border: 1px solid rgba(255, 180, 28, 0.19);

    background: rgba(255, 180, 28, 0.08);
    color: #77633e;
}


.oa-homework-course-chip .material-icons,
.oa-homework-due-chip .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-homework-due-chip strong {
    color: #634e2c;
    font-weight: 700;
}


/* Pitanje */

.oa-homework-question {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;

    padding: 17px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 14px;

    background: #f8fbfa;
}


.oa-homework-question-icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena);
}


.oa-homework-question-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-homework-question-label {
    display: block;

    margin-bottom: 6px;

    color: #76858a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.oa-homework-question-text {
    color: #26383f;

    font-size: 0.87rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}


/* Donji red */

.oa-homework-task-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 16px;
}


.oa-homework-task-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 31px;
    padding: 6px 10px;

    border-radius: 999px;

    font-size: 0.67rem;
    font-weight: 700;
}


.oa-homework-task-status .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-homework-status-submitted {
    background: rgba(48, 183, 145, 0.11);
    color: #21775f;
}


.oa-homework-status-pending {
    background: rgba(255, 180, 28, 0.11);
    color: #a36b0c;
}


.oa-homework-submit-button {
    min-width: 150px;
}


/* Prazno stanje */

.oa-homework-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 245px;
    padding: 35px;

    color: #718087;
    text-align: center;
}


.oa-homework-empty > .material-icons {
    margin: 0 0 12px;

    color: var(--svetlo-zelena);

    font-size: 3rem;
}


.oa-homework-empty h3 {
    margin: 0 0 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
}


.oa-homework-empty p {
    margin: 0;

    font-size: 0.82rem;
}


/* =========================================================
   PROŠLI ZADACI
========================================================= */

.oa-homework-history {
    margin-top: 24px;
}


.oa-homework-history .accordion-item {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px !important;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-homework-history .accordion-button {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 18px 22px;

    border-top: 4px solid var(--svetlo-plava);

    background:
        linear-gradient(
            135deg,
            rgba(21, 108, 135, 0.08),
            #ffffff 62%
        );

    color: var(--tamno-zelena);

    box-shadow: none;
}


.oa-homework-history .accordion-button:not(.collapsed) {
    background:
        linear-gradient(
            135deg,
            rgba(21, 108, 135, 0.11),
            #ffffff 62%
        );

    color: var(--tamno-zelena);

    box-shadow: none;
}


.oa-homework-history .accordion-button:focus {
    border-color: rgba(4, 100, 99, 0.18);

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.07);
}


.oa-homework-history-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 1;
}


.oa-homework-history-heading > span:last-child {
    display: flex;
    flex-direction: column;
}


.oa-homework-history-heading small {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-homework-history-heading strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-homework-history-heading em {
    margin-top: 2px;

    color: #718087;

    font-size: 0.69rem;
    font-style: normal;
    font-weight: 400;
}


.oa-homework-history-count {
    margin-left: auto;
    margin-right: 15px;
}


.oa-homework-history .accordion-body {
    padding: 20px;

    border-top: 1px solid rgba(22, 57, 71, 0.08);

    background: #f4f8f7;
}


.oa-homework-history-list {
    display: grid;
    gap: 15px;
}


/* Pojedinačni prošli zadatak */

.oa-homework-history-item {
    padding: 18px;

    border: 1px solid rgba(22, 57, 71, 0.12);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 57, 71, 0.06);
}


.oa-homework-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 11px;
}


.oa-homework-result {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.66rem;
    font-weight: 700;
}


.oa-homework-result .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-homework-result-correct {
    background: rgba(48, 183, 145, 0.11);
    color: #21775f;
}


.oa-homework-result-incorrect {
    background: rgba(216, 75, 99, 0.1);
    color: #b73e53;
}


.oa-homework-result-missed {
    background: rgba(120, 134, 139, 0.1);
    color: #6f7d81;
}


.oa-homework-history-date {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 14px;

    color: #76858a;

    font-size: 0.68rem;
}


.oa-homework-history-date .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-homework-history-date strong {
    color: #526168;
}


.oa-homework-history-question {
    padding: 14px 15px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 13px;

    background: #f8fbfa;
}


.oa-homework-history-question > span,
.oa-homework-answer-box > span {
    display: block;

    margin-bottom: 6px;

    color: #76858a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.oa-homework-history-question > div,
.oa-homework-answer-box > div {
    color: #304149;

    font-size: 0.82rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}


.oa-homework-answer-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 13px;

    margin-top: 13px;
}


.oa-homework-answer-box {
    padding: 14px 15px;

    border: 1px solid rgba(21, 108, 135, 0.11);
    border-radius: 13px;

    background: rgba(21, 108, 135, 0.04);
}


.oa-homework-correct-answer {
    border-color: rgba(48, 183, 145, 0.14);

    background: rgba(48, 183, 145, 0.05);
}


/* Alerti */

.oa-homework-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-homework-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .oa-homework-main {
        padding: 24px 0 55px;
    }

    .oa-homework-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-homework-hero-summary {
        width: 100%;
    }

    .oa-homework-hero-stat {
        flex: 1;
        min-width: 0;
    }

    .oa-homework-panel-header {
        align-items: flex-start;
    }

    .oa-homework-task-list {
        padding: 16px;
    }

    .oa-homework-task-card {
        padding: 17px 16px 15px;
    }

    .oa-homework-task-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-homework-submit-button {
        width: 100%;
    }

    .oa-homework-answer-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {
    .oa-homework-stats {
        grid-template-columns: 1fr;
    }

    .oa-homework-hero-heading {
        align-items: flex-start;
    }

    .oa-homework-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-homework-hero h1 {
        font-size: 1.4rem;
    }

    .oa-homework-question {
        grid-template-columns: 1fr;
    }

    .oa-homework-due-chip {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-homework-history .accordion-button {
        padding: 16px;
    }

    .oa-homework-history-count {
        display: none;
    }

    .oa-homework-history .accordion-body {
        padding: 14px;
    }
}

/* =========================================================
   SMARTCLASS WORKSHEETS — SUBMIT HOMEWORK
========================================================= */

body.oa-homework-submit-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-homework-submit-main {
    padding: 38px 0 70px;
}


/* Naslovni panel */

.oa-homework-submit-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 24px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-homework-submit-hero-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-homework-submit-hero-icon {
    display: grid;
    flex: 0 0 66px;

    width: 66px;
    height: 66px;

    place-items: center;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-homework-submit-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-homework-submit-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-homework-submit-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
}


.oa-homework-submit-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-homework-submit-back {
    flex: 0 0 auto;
}


/* Glavna kartica */

.oa-homework-submit-card {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(22, 57, 71, 0.11);
}


.oa-homework-submit-card::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


/* Informacije o kursu i roku */

.oa-homework-submit-card-header {
    padding: 18px 22px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.11),
            #ffffff 62%
        );
}


.oa-homework-submit-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}


.oa-homework-submit-course,
.oa-homework-submit-due {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;
    padding: 6px 11px;

    border-radius: 999px;

    font-size: 0.69rem;
}


.oa-homework-submit-course {
    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-homework-submit-due {
    border: 1px solid rgba(255, 180, 28, 0.2);

    background: rgba(255, 180, 28, 0.08);
    color: #775f36;
}


.oa-homework-submit-course .material-icons,
.oa-homework-submit-due .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-homework-submit-course > span:not(.material-icons),
.oa-homework-submit-due > span:not(.material-icons) {
    color: #738186;
    font-weight: 600;
}


.oa-homework-submit-course strong,
.oa-homework-submit-due strong {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}


/* Unutrašnjost */

.oa-homework-submit-card-body {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.8fr);
}


/* Zajednički naslovi sekcija */

.oa-homework-submit-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}


.oa-homework-submit-section-icon {
    display: grid;
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-homework-submit-section-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-homework-submit-section-heading > div {
    display: flex;
    flex-direction: column;
}


.oa-homework-submit-section-heading > div > span {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-homework-submit-section-heading h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}


/* Pitanje */

.oa-homework-submit-question {
    min-height: 330px;
    padding: 27px;

    border-right:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbf9
        );
}


.oa-homework-submit-question-content {
    min-height: 190px;
    padding: 21px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 15px;

    background: #ffffff;
    color: #26383f;

    font-size: 0.93rem;
    line-height: 1.8;
    overflow-wrap: anywhere;

    box-shadow:
        inset 0 1px 3px rgba(22, 57, 71, 0.03);
}


/* Odgovor */

.oa-homework-submit-answer {
    padding: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(241, 248, 246, 0.96),
            rgba(255, 255, 255, 0.98)
        );
}


.oa-homework-answer-form {
    display: flex;
    flex-direction: column;
}


.oa-homework-answer-label {
    display: block;

    margin-bottom: 8px;

    color: #42535a;

    font-size: 0.78rem;
    font-weight: 600;
}


.oa-homework-answer-input-wrap {
    position: relative;
}


.oa-homework-answer-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 15px;

    z-index: 2;

    margin: 0;

    color: #59988a;

    font-size: 1.2rem;

    transform: translateY(-50%);
}


.oa-homework-answer-input-wrap .form-control {
    min-height: 54px;
    padding: 0.8rem 1rem 0.8rem 47px;

    border: 1px solid rgba(4, 100, 99, 0.19);
    border-radius: 14px;

    background: #ffffff;
    color: #172126;

    font-size: 0.93rem;

    box-shadow:
        0 7px 17px rgba(22, 57, 71, 0.05);
}


.oa-homework-answer-input-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.48);

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.09),
        0 8px 19px rgba(22, 57, 71, 0.06);
}


.oa-homework-answer-help {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin: 10px 0 21px;

    color: #728086;

    font-size: 0.69rem;
    line-height: 1.5;
}


.oa-homework-answer-help .material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    color: var(--svetlo-plava);

    font-size: 1rem;
}


/* Dugmad */

.oa-homework-submit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: auto;
    padding-top: 18px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);
}


.oa-homework-final-submit {
    min-width: 155px;
}


/* Success i error stanje */

.oa-homework-submit-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 360px;
    padding: 45px 30px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 14px 36px rgba(22, 57, 71, 0.1);
}


.oa-homework-submit-state-icon {
    display: grid;

    width: 76px;
    height: 76px;
    margin-bottom: 18px;

    place-items: center;

    border-radius: 50%;
}


.oa-homework-submit-state-icon .material-icons {
    margin: 0;
    font-size: 2.35rem;
}


.oa-homework-submit-success .oa-homework-submit-state-icon {
    background: rgba(48, 183, 145, 0.13);
    color: #218267;

    box-shadow:
        0 0 0 10px rgba(48, 183, 145, 0.05);
}


.oa-homework-submit-error .oa-homework-submit-state-icon {
    background: rgba(216, 75, 99, 0.11);
    color: #b73e53;

    box-shadow:
        0 0 0 10px rgba(216, 75, 99, 0.04);
}


.oa-homework-submit-state h2 {
    margin: 0 0 8px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}


.oa-homework-submit-state p {
    max-width: 540px;
    margin: 0 0 22px;

    color: #617077;

    font-size: 0.88rem;
    line-height: 1.65;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-homework-submit-card-body {
        grid-template-columns: 1fr;
    }

    .oa-homework-submit-question {
        min-height: auto;

        border-right: 0;
        border-bottom:
            1px solid rgba(22, 57, 71, 0.09);
    }
}


@media (max-width: 767.98px) {
    .oa-homework-submit-main {
        padding: 24px 0 55px;
    }

    .oa-homework-submit-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-homework-submit-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-homework-submit-course,
    .oa-homework-submit-due {
        width: 100%;
        border-radius: 13px;
    }

    .oa-homework-submit-question,
    .oa-homework-submit-answer {
        padding: 21px;
    }
}


@media (max-width: 575.98px) {
    .oa-homework-submit-hero-heading {
        align-items: flex-start;
    }

    .oa-homework-submit-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-homework-submit-hero h1 {
        font-size: 1.35rem;
    }

    .oa-homework-submit-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .oa-homework-submit-actions .oa-btn,
    .oa-homework-submit-actions button {
        width: 100%;
    }

    .oa-homework-submit-question-content {
        padding: 17px;
    }

    .oa-homework-submit-state {
        min-height: 310px;
        padding: 35px 21px;
    }
}

/* =========================================================
   SMARTCLASS — COURSE CATALOGUE
========================================================= */

body.oa-course-catalogue-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-course-catalogue-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-course-catalogue-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 22px;
    padding: 24px 29px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-course-catalogue-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-course-catalogue-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-course-catalogue-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-course-catalogue-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-course-catalogue-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-course-catalogue-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


/* Hero statistika */

.oa-course-catalogue-stats {
    display: flex;
    gap: 10px;
}


.oa-course-catalogue-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-width: 105px;
    min-height: 70px;
    padding: 10px 15px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.82);
}


.oa-course-catalogue-stat strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.35rem;
    line-height: 1;
}


.oa-course-catalogue-stat span {
    margin-top: 6px;

    color: #718087;

    font-size: 0.67rem;
    font-weight: 600;
    text-align: center;
}


.oa-course-catalogue-owned-stat {
    border-color: rgba(255, 180, 28, 0.2);
    background: rgba(255, 180, 28, 0.08);
}


.oa-course-catalogue-owned-stat strong {
    color: #bd7a0e;
}


/* Pretraga i filteri */

.oa-course-catalogue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
    padding: 15px 17px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-course-search-wrap {
    position: relative;
    flex: 1;

    max-width: 470px;
}


.oa-course-search-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #5c9588;

    font-size: 1.2rem;

    transform: translateY(-50%);
}


.oa-course-search-wrap .form-control {
    min-height: 45px;
    padding-left: 43px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #f8fbfa;

    box-shadow: none;
}


.oa-course-search-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.42);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-course-language-filters {
    display: flex;
    align-items: center;
    gap: 7px;
}


.oa-course-filter-button {
    min-width: 49px;
    min-height: 37px;
    padding: 7px 13px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 999px;

    background: #f5f9f8;
    color: #597077;

    font-family: "Montserrat", sans-serif;
    font-size: 0.69rem;
    font-weight: 700;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.oa-course-filter-button:hover,
.oa-course-filter-button.active {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


/* Grid */

.oa-course-catalogue-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* Kartica kursa */

.oa-catalogue-course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    min-height: 390px;

    border: 1px solid rgba(4, 100, 99, 0.19);
    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbf9
        );

    box-shadow:
        0 11px 27px rgba(22, 57, 71, 0.1);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.oa-catalogue-course-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


.oa-catalogue-course-card:hover {
    transform: translateY(-5px);

    border-color: rgba(4, 100, 99, 0.34);

    box-shadow:
        0 18px 37px rgba(22, 57, 71, 0.15);
}


.oa-catalogue-course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 18px 19px 4px;
}


.oa-catalogue-course-icon {
    display: grid;

    width: 43px;
    height: 43px;

    place-items: center;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 13px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-catalogue-course-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


/* Jezičke oznake */

.oa-catalogue-course-languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}


.oa-course-language-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-height: 25px;
    padding: 4px 8px;

    border: 1px solid rgba(22, 57, 71, 0.12);
    border-radius: 999px;

    background: #f2f5f4;
    color: #68777c;

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
}


.oa-course-language-owned {
    border-color: rgba(48, 183, 145, 0.2);

    background: rgba(48, 183, 145, 0.1);
    color: var(--tamno-zelena);
}


.oa-course-language-chip .material-icons {
    margin: 0;
    font-size: 0.82rem;
}


/* Sadržaj kartice */

.oa-catalogue-course-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 15px 20px 18px;
}


.oa-catalogue-course-label {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-catalogue-course-body h2 {
    min-height: 48px;
    margin: 5px 0 11px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
}


.oa-catalogue-course-description {
    display: -webkit-box;
    overflow: hidden;
    flex: 1;

    margin: 0 0 15px;

    color: #56656c;

    font-size: 0.81rem;
    line-height: 1.65;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}


.oa-catalogue-course-topics {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    min-height: 54px;
    padding: 10px 11px;

    border: 1px solid rgba(4, 100, 99, 0.09);
    border-radius: 12px;

    background: rgba(162, 222, 208, 0.09);
    color: #526168;

    font-size: 0.69rem;
    line-height: 1.5;
}


.oa-catalogue-course-topics .material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    color: var(--tamno-zelena);

    font-size: 1rem;
}


.oa-catalogue-course-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;

    margin-top: 16px;
    padding-top: 14px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);
}


.oa-catalogue-course-price span {
    color: #718087;

    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-catalogue-course-price strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


/* Akcije */

.oa-catalogue-course-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;

    padding: 15px 19px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);

    background: rgba(244, 249, 247, 0.86);
}


.oa-catalogue-course-actions .oa-btn {
    flex: 1;
    min-width: 0;

    padding-right: 0.75rem;
    padding-left: 0.75rem;

    font-size: 0.7rem;
}


.oa-catalogue-course-actions small {
    margin-left: 3px;

    font-size: 0.58rem;
}


/* Prazno stanje */

.oa-course-catalogue-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 300px;
    padding: 35px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 20px;

    background: #ffffff;

    color: #718087;
    text-align: center;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.08);
}


.oa-course-catalogue-empty .material-icons {
    margin: 0 0 12px;

    color: var(--svetlo-zelena);

    font-size: 3rem;
}


.oa-course-catalogue-empty h2 {
    margin: 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-course-catalogue-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


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

.oa-course-modal {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    box-shadow:
        0 24px 60px rgba(22, 57, 71, 0.22);
}


.oa-course-modal::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


.oa-course-modal-header {
    padding: 18px 21px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.12),
            #ffffff 65%
        );
}


.oa-course-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}


.oa-course-modal-icon {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-course-modal-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


.oa-course-modal-title-wrap > div > span {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-course-modal-title-wrap h2 {
    margin: 2px 0 0;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


.oa-course-modal-body {
    padding: 22px;
}


.oa-course-modal-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 19px;
}


.oa-course-modal-language {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 35px;
    padding: 6px 11px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 999px;

    background: #f5f9f8;
    color: #607278;

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
}


.oa-course-modal-language small {
    color: #258168;
    font-size: 0.56rem;
}


.oa-course-modal-language.active {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-course-modal-language.active small {
    color: #d9fff4;
}


.oa-course-modal-section {
    margin-bottom: 17px;
    padding: 16px 17px;

    border: 1px solid rgba(22, 57, 71, 0.09);
    border-radius: 14px;

    background: #f8fbfa;
}


.oa-course-modal-section-title {
    display: block;

    margin-bottom: 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-course-modal-section p {
    margin: 0;

    color: #45575e;

    font-size: 0.82rem;
    line-height: 1.7;
    white-space: pre-line;
}


.oa-course-modal-price {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 17px;

    border: 1px solid rgba(255, 180, 28, 0.18);
    border-radius: 14px;

    background: rgba(255, 180, 28, 0.08);
}


.oa-course-modal-price span {
    color: #79653d;

    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-course-modal-price strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
}


.oa-course-purchase-box {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    margin-top: 17px;
    padding: 16px 17px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.13),
            rgba(255, 255, 255, 0.95)
        );
}


.oa-course-purchase-box[hidden] {
    display: none;
}


.oa-course-purchase-icon {
    display: grid;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 12px;

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-course-purchase-icon .material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-course-purchase-box h3 {
    margin: 0 0 5px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
}


.oa-course-purchase-box p {
    margin: 0;

    color: #596a70;

    font-size: 0.75rem;
    line-height: 1.6;
}


.oa-course-modal-footer {
    padding: 16px 21px;

    border-top:
        1px solid rgba(22, 57, 71, 0.09);

    background: #f7faf9;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .oa-course-catalogue-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .oa-course-catalogue-main {
        padding: 24px 0 55px;
    }

    .oa-course-catalogue-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-course-catalogue-stats {
        width: 100%;
    }

    .oa-course-catalogue-stat {
        flex: 1;
        min-width: 0;
    }

    .oa-course-catalogue-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-course-search-wrap {
        width: 100%;
        max-width: none;
    }

    .oa-course-catalogue-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 479.98px) {
    .oa-course-catalogue-heading {
        align-items: flex-start;
    }

    .oa-course-catalogue-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-course-catalogue-hero h1 {
        font-size: 1.4rem;
    }

    .oa-catalogue-course-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-catalogue-course-actions .oa-btn {
        width: 100%;
    }

    .oa-course-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-course-modal-footer .oa-btn {
        width: 100%;
    }
}

/* =========================================================
   SMARTCLASS — PROFESSOR DASHBOARD
========================================================= */

body.oa-professor-dashboard-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-professor-dashboard-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-professor-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 24px;
    padding: 24px 29px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-professor-dashboard-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-professor-dashboard-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-professor-dashboard-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-dashboard-kicker,
.oa-professor-course-label,
.oa-professor-section-label {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-professor-dashboard-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-professor-dashboard-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.9rem;
}


/* Statistika */

.oa-professor-dashboard-stats {
    display: flex;
    gap: 10px;
}


.oa-professor-dashboard-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-width: 105px;
    min-height: 70px;
    padding: 10px 15px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.84);
}


.oa-professor-dashboard-stat strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.35rem;
    line-height: 1;
}


.oa-professor-dashboard-stat span {
    margin-top: 6px;

    color: #718087;

    font-size: 0.67rem;
    font-weight: 600;
}


.oa-professor-student-stat {
    border-color: rgba(255, 180, 28, 0.2);
    background: rgba(255, 180, 28, 0.08);
}


.oa-professor-student-stat strong {
    color: #bd7a0e;
}


/* Lista kurseva */

.oa-professor-course-list {
    display: grid;
    gap: 25px;
}


.oa-professor-course-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.18);
    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 14px 35px rgba(22, 57, 71, 0.1);
}


.oa-professor-course-panel::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


/* Naslov kursa */

.oa-professor-course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 23px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.13),
            #ffffff 62%
        );
}


.oa-professor-course-title {
    display: flex;
    align-items: center;
    gap: 14px;
}


.oa-professor-course-icon {
    display: grid;
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius: 15px;

    background: rgba(162, 222, 208, 0.24);
    color: var(--tamno-zelena);
}


.oa-professor-course-icon .material-icons {
    margin: 0;
    font-size: 1.45rem;
}


.oa-professor-course-title h2 {
    margin: 2px 0 5px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
}


.oa-professor-course-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}


.oa-professor-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #718087;

    font-size: 0.67rem;
    font-weight: 600;
}


.oa-professor-course-meta .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-professor-open-course {
    flex: 0 0 auto;
}


/* Alati */

.oa-professor-course-tools {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;

    padding: 20px 22px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background: #f7faf9;
}


.oa-professor-tool-form {
    display: block;
    margin: 0;
}


.oa-professor-tool-button {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    min-height: 70px;
    padding: 12px 13px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 14px;

    background: #ffffff;
    color: #33464d;

    font-family: inherit;
    text-align: left;
    text-decoration: none;

    box-shadow:
        0 6px 16px rgba(22, 57, 71, 0.05);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.oa-professor-tool-button:hover {
    transform: translateY(-2px);

    border-color: rgba(4, 100, 99, 0.3);

    color: var(--tamno-zelena);

    box-shadow:
        0 11px 23px rgba(22, 57, 71, 0.09);
}


.oa-professor-live-tool {
    appearance: none;
}


.oa-professor-tool-icon {
    display: grid;
    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena);
}


.oa-professor-tool-icon .material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-professor-live-tool .oa-professor-tool-icon {
    background: rgba(255, 180, 28, 0.15);
    color: #bd7a0e;
}


.oa-professor-tool-button > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-professor-tool-button strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
}


.oa-professor-tool-button small {
    margin-top: 3px;

    color: #7a878c;

    font-size: 0.63rem;
    line-height: 1.35;
}


/* Sekcija učenika */

.oa-professor-students-section {
    padding: 0 22px 22px;
}


.oa-professor-students-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 0 15px;
}


.oa-professor-students-header h3 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}


.oa-professor-student-count {
    display: grid;

    min-width: 35px;
    height: 35px;
    padding: 0 10px;

    place-items: center;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.28);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
}


.oa-professor-student-list {
    display: grid;
    gap: 10px;
}


.oa-professor-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 13px 14px;

    border: 1px solid rgba(22, 57, 71, 0.1);
    border-radius: 14px;

    background: #f9fbfa;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


.oa-professor-student-row:hover {
    border-color: rgba(4, 100, 99, 0.2);
    background: #ffffff;
}


.oa-professor-student-info {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}


.oa-professor-student-avatar {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #50a58f
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}


.oa-professor-student-info > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-professor-student-info strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.77rem;
}


.oa-professor-student-info a {
    overflow: hidden;

    margin-top: 3px;

    color: #718087;

    font-size: 0.67rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-professor-student-info a:hover {
    color: var(--tamno-zelena);
}


.oa-professor-student-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


.oa-professor-student-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 34px;
    padding: 6px 10px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 10px;

    background: #ffffff;
    color: var(--tamno-zelena);

    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


.oa-professor-student-action:hover {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-professor-student-action .material-icons {
    margin: 0;
    font-size: 1rem;
}


/* Prazno stanje učenika */

.oa-professor-students-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 230px;
    padding: 30px;

    border: 1px dashed rgba(4, 100, 99, 0.18);
    border-radius: 15px;

    background: #f8fbfa;

    text-align: center;
}


.oa-professor-students-empty > .material-icons {
    margin: 0 0 10px;

    color: #8c9a9e;

    font-size: 2.6rem;
}


.oa-professor-students-empty h4 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.93rem;
}


.oa-professor-students-empty p {
    margin: 0 0 17px;

    color: #718087;

    font-size: 0.75rem;
}


/* Prazan dashboard */

.oa-professor-dashboard-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 350px;
    padding: 45px 30px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.08);
}


.oa-professor-dashboard-empty-icon {
    display: grid;

    width: 75px;
    height: 75px;
    margin-bottom: 17px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-professor-dashboard-empty-icon .material-icons {
    margin: 0;
    font-size: 2.3rem;
}


.oa-professor-dashboard-empty h2 {
    margin: 0 0 8px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
}


.oa-professor-dashboard-empty p {
    margin: 0;

    color: #718087;

    font-size: 0.8rem;
}


.oa-professor-dashboard-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


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

.oa-professor-message-modal {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 19px;

    box-shadow:
        0 24px 60px rgba(22, 57, 71, 0.22);
}


.oa-professor-message-modal::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-professor-message-modal-header {
    padding: 18px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.13),
            #ffffff 65%
        );
}


.oa-professor-message-title {
    display: flex;
    align-items: center;
    gap: 11px;
}


.oa-professor-message-title-icon {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-professor-message-title-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-professor-message-title > div > span {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-message-title h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}


.oa-professor-message-modal-body {
    padding: 21px;
}


.oa-professor-message-recipient {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
    padding: 12px 13px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 13px;

    background: #f7faf9;
}


.oa-professor-message-recipient > .material-icons {
    margin: 0;

    color: var(--tamno-zelena);

    font-size: 1.25rem;
}


.oa-professor-message-recipient > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-message-recipient span:not(.material-icons) {
    color: #718087;

    font-size: 0.62rem;
    font-weight: 600;
}


.oa-professor-message-recipient strong {
    margin-top: 2px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
}


.oa-professor-message-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}


.oa-professor-message-field textarea {
    resize: vertical;

    min-height: 145px;

    border: 1px solid rgba(4, 100, 99, 0.17);
    border-radius: 13px;

    background: #f9fbfa;

    box-shadow: none;
}


.oa-professor-message-field textarea:focus {
    border-color: rgba(4, 100, 99, 0.45);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-professor-message-modal-footer {
    padding: 15px 20px;

    background: #f7faf9;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-professor-course-tools {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .oa-professor-dashboard-main {
        padding: 24px 0 55px;
    }

    .oa-professor-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-professor-dashboard-stats {
        width: 100%;
    }

    .oa-professor-dashboard-stat {
        flex: 1;
        min-width: 0;
    }

    .oa-professor-course-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-open-course {
        width: 100%;
    }

    .oa-professor-student-row {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-professor-student-actions {
        width: 100%;
    }

    .oa-professor-student-action {
        flex: 1;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-dashboard-heading {
        align-items: flex-start;
    }

    .oa-professor-dashboard-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-professor-dashboard-hero h1 {
        font-size: 1.4rem;
    }

    .oa-professor-course-tools {
        grid-template-columns: 1fr;
    }

    .oa-professor-course-header,
    .oa-professor-course-tools,
    .oa-professor-students-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .oa-professor-student-actions {
        flex-direction: column;
    }

    .oa-professor-student-action {
        width: 100%;
    }

    .oa-professor-message-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-professor-message-modal-footer .oa-btn {
        width: 100%;
    }
}

/* =========================================================
   PROFESSOR DASHBOARD — SEARCH, FILTERS AND COLLAPSE
========================================================= */

/* Kontrolna traka */

.oa-professor-dashboard-toolbar {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(210px, 0.45fr)
        auto;
    align-items: center;
    gap: 12px;

    margin-bottom: 21px;
    padding: 15px 17px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-professor-student-search,
.oa-professor-course-filter {
    position: relative;
}


.oa-professor-student-search > .material-icons,
.oa-professor-course-filter > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #579589;

    font-size: 1.18rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-professor-student-search .form-control,
.oa-professor-course-filter .form-select {
    min-height: 45px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background-color: #f8fbfa;
    color: #26383f;

    font-size: 0.78rem;

    box-shadow: none;
}


.oa-professor-student-search .form-control {
    padding-left: 43px;
}


.oa-professor-course-filter .form-select {
    padding-left: 42px;
}


.oa-professor-student-search .form-control:focus,
.oa-professor-course-filter .form-select:focus {
    border-color: rgba(4, 100, 99, 0.44);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-professor-collapse-all {
    min-height: 45px;
    white-space: nowrap;
}


.oa-professor-result-summary {
    grid-column: 1 / -1;

    min-height: 15px;

    color: #748287;

    font-size: 0.66rem;
    font-weight: 600;
}


/* Kompaktni naslov kursa */

.oa-professor-course-header {
    gap: 14px;
}


.oa-professor-course-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    flex: 1;

    min-width: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;
}


.oa-professor-course-toggle:hover
.oa-professor-course-name {
    color: #308a74;
}


.oa-professor-course-title {
    min-width: 0;
}


.oa-professor-course-title > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-professor-course-name {
    overflow: hidden;

    margin: 2px 0 5px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color 0.18s ease;
}


.oa-professor-course-chevron {
    flex: 0 0 auto;

    margin: 0;

    color: var(--tamno-zelena);

    font-size: 1.55rem;

    transition: transform 0.22s ease;
}


.oa-professor-course-toggle[aria-expanded="true"]
.oa-professor-course-chevron {
    transform: rotate(180deg);
}


.oa-professor-course-collapse {
    background: #ffffff;
}


/* Prikaži još učenika */

.oa-professor-show-more-wrap {
    display: flex;
    justify-content: center;

    padding-top: 14px;
}


.oa-professor-show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 38px;
    padding: 7px 15px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 999px;

    background: #f4f9f7;
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.67rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.oa-professor-show-more:hover {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-professor-show-more .material-icons {
    margin: 0;
    font-size: 1rem;
}


/* Nema rezultata pretrage */

.oa-professor-search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 275px;
    padding: 35px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 12px 30px rgba(22, 57, 71, 0.08);
}


.oa-professor-search-empty[hidden],
.oa-professor-course-panel[hidden],
.oa-professor-student-row[hidden],
.oa-professor-show-more[hidden] {
    display: none !important;
}


.oa-professor-search-empty > .material-icons {
    margin: 0 0 12px;

    color: #78aa9e;

    font-size: 3rem;
}


.oa-professor-search-empty h2 {
    margin: 0 0 7px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
}


.oa-professor-search-empty p {
    margin: 0;

    color: #718087;

    font-size: 0.78rem;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-professor-dashboard-toolbar {
        grid-template-columns:
            minmax(240px, 1fr)
            minmax(190px, 0.6fr);
    }

    .oa-professor-collapse-all {
        grid-column: 1 / -1;
        justify-self: flex-start;
    }
}


@media (max-width: 767.98px) {
    .oa-professor-dashboard-toolbar {
        grid-template-columns: 1fr;
    }

    .oa-professor-collapse-all,
    .oa-professor-result-summary {
        grid-column: auto;
    }

    .oa-professor-collapse-all {
        width: 100%;
    }

    .oa-professor-course-toggle {
        width: 100%;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-course-name {
        max-width: 210px;
        font-size: 0.95rem;
    }

    .oa-professor-course-chevron {
        font-size: 1.35rem;
    }
}

/* =========================================================
   SMARTCLASS WORKSHEETS — PROFESSOR ASSIGN HOMEWORK
========================================================= */

body.oa-professor-homework-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-professor-homework-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-professor-homework-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 24px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-professor-homework-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-professor-homework-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-professor-homework-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-homework-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-professor-homework-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-professor-homework-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-professor-homework-back {
    flex: 0 0 auto;
}


/* Glavna kartica */

.oa-professor-homework-card {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.17);
    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 14px 36px rgba(22, 57, 71, 0.11);
}


.oa-professor-homework-card::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


/* Podaci o kursu */

.oa-professor-homework-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 19px 23px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.13),
            #ffffff 64%
        );
}


.oa-professor-homework-course {
    display: flex;
    align-items: center;
    gap: 13px;
}


.oa-professor-homework-course-icon {
    display: grid;
    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.24);
    color: var(--tamno-zelena);
}


.oa-professor-homework-course-icon .material-icons {
    margin: 0;
    font-size: 1.35rem;
}


.oa-professor-homework-course > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-homework-course > div > span {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.oa-professor-homework-course h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}


.oa-professor-homework-course-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


.oa-professor-homework-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 29px;
    padding: 5px 9px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f4f8f7;
    color: #607177;

    font-size: 0.65rem;
    font-weight: 700;
}


.oa-professor-homework-course-meta .material-icons {
    margin: 0;
    color: var(--tamno-zelena);
    font-size: 0.95rem;
}


/* Forma */

.oa-professor-homework-form {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(360px, 0.75fr);
}


.oa-professor-homework-form-section {
    padding: 27px;
}


.oa-professor-homework-settings {
    border-left:
        1px solid rgba(22, 57, 71, 0.09);

    background:
        linear-gradient(
            145deg,
            rgba(243, 249, 247, 0.97),
            rgba(255, 255, 255, 0.98)
        );
}


/* Naslov sekcije */

.oa-professor-homework-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;
}


.oa-professor-homework-section-icon {
    display: grid;
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-professor-homework-section-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-professor-homework-section-heading > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-homework-section-heading > div > span {
    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-homework-section-heading h3 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}


.oa-professor-homework-section-heading p {
    margin: 0;

    color: #718087;

    font-size: 0.71rem;
    line-height: 1.5;
}


/* Polja */

.oa-professor-homework-label {
    display: block;

    margin-bottom: 8px;

    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
}


.oa-professor-homework-label > span {
    color: #d45467;
}


.oa-professor-homework-label small {
    margin-left: 5px;

    color: #879397;

    font-family: "Open Sans", sans-serif;
    font-size: 0.63rem;
    font-weight: 600;
}


.oa-professor-homework-textarea {
    min-height: 220px;
    padding: 15px 16px;

    border: 1px solid rgba(4, 100, 99, 0.17);
    border-radius: 14px;

    background: #f9fbfa;
    color: #26383f;

    font-size: 0.87rem;
    line-height: 1.65;

    resize: vertical;

    box-shadow: none;
}


.oa-professor-homework-textarea:focus {
    border-color: rgba(4, 100, 99, 0.46);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


/* MathJax pomoć */

.oa-professor-homework-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 14px;
    padding: 13px 14px;

    border: 1px solid rgba(21, 108, 135, 0.11);
    border-radius: 13px;

    background: rgba(21, 108, 135, 0.045);
}


.oa-professor-homework-help > .material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    color: var(--svetlo-plava);
    font-size: 1.2rem;
}


.oa-professor-homework-help strong {
    display: block;

    margin-bottom: 3px;

    color: #315a68;

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
}


.oa-professor-homework-help p {
    margin: 0;

    color: #63777e;

    font-size: 0.67rem;
    line-height: 1.55;
}


.oa-professor-homework-help code {
    padding: 1px 4px;

    border-radius: 4px;

    background: rgba(21, 108, 135, 0.08);
    color: #24596a;

    font-size: 0.65rem;
}


/* Podešavanja */

.oa-professor-homework-fields {
    display: grid;
    gap: 21px;
}


.oa-professor-homework-field {
    padding: 16px;

    border: 1px solid rgba(22, 57, 71, 0.09);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.88);
}


.oa-professor-homework-input-wrap {
    position: relative;
}


.oa-professor-homework-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #59988a;
    font-size: 1.15rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-professor-homework-input-wrap .form-control {
    min-height: 49px;
    padding-left: 43px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #f9fbfa;
    color: #26383f;

    font-size: 0.81rem;

    box-shadow: none;
}


.oa-professor-homework-input-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.46);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-professor-homework-field-help {
    margin: 8px 0 0;

    color: #77858a;

    font-size: 0.65rem;
    line-height: 1.5;
}


/* Akcije */

.oa-professor-homework-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;

    grid-column: 1 / -1;

    padding: 17px 23px;

    border-top:
        1px solid rgba(22, 57, 71, 0.09);

    background: #f7faf9;
}


.oa-professor-homework-save {
    min-width: 165px;
}


.oa-professor-homework-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-professor-homework-form {
        grid-template-columns: 1fr;
    }

    .oa-professor-homework-settings {
        border-top:
            1px solid rgba(22, 57, 71, 0.09);

        border-left: 0;
    }
}


@media (max-width: 767.98px) {
    .oa-professor-homework-main {
        padding: 24px 0 55px;
    }

    .oa-professor-homework-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-professor-homework-back {
        width: 100%;
    }

    .oa-professor-homework-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-homework-form-section {
        padding: 21px;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-homework-heading {
        align-items: flex-start;
    }

    .oa-professor-homework-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-professor-homework-hero h1 {
        font-size: 1.4rem;
    }

    .oa-professor-homework-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .oa-professor-homework-actions .oa-btn,
    .oa-professor-homework-actions button {
        width: 100%;
    }
}

/* =========================================================
   SMARTCLASS WORKSHEETS — HOMEWORK OVERVIEW
========================================================= */

body.oa-homework-overview-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-homework-overview-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-homework-overview-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-homework-overview-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-homework-overview-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-homework-overview-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-homework-overview-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-homework-overview-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-homework-overview-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-homework-overview-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


/* Kurs */

.oa-homework-overview-course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
    padding: 17px 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-homework-overview-course-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


.oa-homework-overview-course-icon {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-homework-overview-course-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


.oa-homework-overview-course-title > div {
    display: flex;
    flex-direction: column;
}


.oa-homework-overview-course-title > div > span {
    color: #718087;

    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-homework-overview-course-title h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.03rem;
    font-weight: 700;
}


.oa-homework-overview-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.oa-homework-overview-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f5f9f8;
    color: #607177;

    font-size: 0.65rem;
    font-weight: 700;
}


.oa-homework-overview-course-meta .material-icons {
    margin: 0;
    color: var(--tamno-zelena);
    font-size: 0.95rem;
}


/* Statistika */

.oa-homework-overview-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 20px;
}


.oa-homework-overview-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 84px;
    padding: 15px 17px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.07);
}


.oa-homework-overview-stat-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-homework-overview-stat-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-homework-overview-stat-card > div {
    display: flex;
    flex-direction: column;
}


.oa-homework-overview-stat-card span {
    color: #748287;

    font-size: 0.67rem;
    font-weight: 600;
}


.oa-homework-overview-stat-card strong {
    margin-top: 3px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
}


.oa-homework-stat-submission
.oa-homework-overview-stat-icon {
    background: rgba(255, 180, 28, 0.14);
    color: #bd7a0e;
}


.oa-homework-stat-accuracy
.oa-homework-overview-stat-icon {
    background: rgba(48, 183, 145, 0.13);
    color: #218267;
}


/* Analitika */

.oa-homework-overview-analysis {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);
    gap: 18px;

    margin-bottom: 20px;
}


.oa-homework-overview-chart-card,
.oa-homework-overview-summary-card {
    padding: 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 11px 28px rgba(22, 57, 71, 0.08);
}


.oa-homework-overview-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}


.oa-homework-overview-card-icon {
    display: grid;
    flex: 0 0 41px;

    width: 41px;
    height: 41px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-homework-overview-card-icon .material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-homework-overview-card-heading > div {
    display: flex;
    flex-direction: column;
}


.oa-homework-overview-card-heading > div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-homework-overview-card-heading h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
}


.oa-homework-overview-card-heading p {
    margin: 0;

    color: #718087;

    font-size: 0.68rem;
    line-height: 1.5;
}


.oa-homework-chart-wrap {
    position: relative;

    height: 300px;
    margin-top: 15px;
}


.oa-homework-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 260px;

    color: #718087;
    text-align: center;
}


.oa-homework-chart-empty .material-icons {
    margin: 0 0 9px;
    font-size: 2.5rem;
}


.oa-homework-chart-empty p {
    margin: 0;
    font-size: 0.75rem;
}


/* Sažetak */

.oa-homework-overview-summary-list {
    display: grid;
    gap: 10px;

    margin-top: 18px;
}


.oa-homework-summary-row {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 13px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 13px;

    background: #f8fbfa;
}


.oa-homework-summary-dot {
    flex: 0 0 12px;

    width: 12px;
    height: 12px;

    border-radius: 50%;
}


.oa-homework-summary-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}


.oa-homework-summary-row span:not(.oa-homework-summary-dot) {
    color: #627279;
    font-size: 0.7rem;
    font-weight: 600;
}


.oa-homework-summary-row strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.87rem;
}


.oa-summary-correct .oa-homework-summary-dot {
    background: #30b791;
}


.oa-summary-incorrect .oa-homework-summary-dot {
    background: #e76f70;
}


.oa-summary-review .oa-homework-summary-dot {
    background: #ffb41c;
}


.oa-summary-missing .oa-homework-summary-dot {
    background: #aab7bb;
}


.oa-homework-overview-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 14px;
    padding: 12px 13px;

    border: 1px solid rgba(255, 180, 28, 0.18);
    border-radius: 13px;

    background: rgba(255, 180, 28, 0.08);
    color: #715c35;
}


.oa-homework-overview-notice .material-icons {
    margin: 0;
    color: #bd7a0e;
    font-size: 1.15rem;
}


.oa-homework-overview-notice p {
    margin: 0;

    font-size: 0.68rem;
    line-height: 1.5;
}


/* Toolbar */

.oa-homework-overview-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(190px, 0.35fr)
        auto;
    align-items: center;
    gap: 11px;

    margin-bottom: 16px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.06);
}


.oa-homework-overview-search,
.oa-homework-overview-filter {
    position: relative;
}


.oa-homework-overview-search > .material-icons,
.oa-homework-overview-filter > .material-icons {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 2;

    margin: 0;

    color: #579589;
    font-size: 1.15rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-homework-overview-search .form-control,
.oa-homework-overview-filter .form-select {
    min-height: 44px;
    padding-left: 41px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 12px;

    background-color: #f8fbfa;
    font-size: 0.76rem;

    box-shadow: none;
}


.oa-homework-overview-search .form-control:focus,
.oa-homework-overview-filter .form-select:focus {
    border-color: rgba(4, 100, 99, 0.44);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


#homeworkOverviewResultCount {
    color: #718087;

    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Panel zadataka */

.oa-homework-overview-task-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #f5f9f7;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-homework-overview-task-panel-header {
    padding: 18px 20px;

    border-top: 4px solid var(--svetlo-zelena);
    border-bottom: 1px solid rgba(22, 57, 71, 0.08);

    background: #ffffff;
}


.oa-homework-overview-task-list {
    display: grid;
    gap: 14px;

    padding: 18px;
}


/* Kartica zadatka */

.oa-homework-overview-task-card {
    padding: 17px 18px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 57, 71, 0.06);
}


.oa-homework-overview-task-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 13px;
}


.oa-homework-task-number {
    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
}


.oa-homework-task-deadline {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.64rem;
    font-weight: 600;
}


.oa-homework-task-deadline .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-homework-task-deadline strong {
    margin-left: 3px;
}


.oa-homework-deadline-active {
    background: rgba(48, 183, 145, 0.1);
    color: #23775f;
}


.oa-homework-deadline-expired {
    background: rgba(120, 134, 139, 0.1);
    color: #6f7d81;
}


.oa-homework-overview-question {
    padding: 14px 15px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 13px;

    background: #f8fbfa;
}


.oa-homework-overview-question > span {
    display: block;

    margin-bottom: 5px;

    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.oa-homework-overview-question > div {
    color: #304149;

    font-size: 0.8rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}


/* Metrike */

.oa-homework-task-metrics {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 8px;

    margin-top: 13px;
}


.oa-homework-task-metrics > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;

    padding: 9px 10px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 11px;

    background: #fafcfb;
}


.oa-homework-task-metrics span {
    color: #748287;
    font-size: 0.61rem;
    font-weight: 600;
}


.oa-homework-task-metrics strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
}


.oa-task-metric-correct {
    background: rgba(48, 183, 145, 0.05) !important;
}


.oa-task-metric-incorrect {
    background: rgba(231, 111, 112, 0.05) !important;
}


.oa-task-metric-review {
    background: rgba(255, 180, 28, 0.06) !important;
}


/* Progress */

.oa-homework-task-progress-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 14px;
}


.oa-homework-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 6px;
}


.oa-homework-progress-label span {
    color: #718087;
    font-size: 0.62rem;
    font-weight: 600;
}


.oa-homework-progress-label strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.67rem;
}


.oa-homework-progress-track {
    overflow: hidden;

    height: 8px;

    border-radius: 999px;

    background: rgba(22, 57, 71, 0.09);
}


.oa-homework-progress-track > span {
    display: block;

    height: 100%;

    border-radius: inherit;
}


.oa-homework-progress-submitted {
    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-homework-progress-correct {
    background:
        linear-gradient(
            90deg,
            #30b791,
            #77d5b7
        );
}


/* Empty states */

.oa-homework-overview-search-empty,
.oa-homework-overview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 290px;
    padding: 35px;

    text-align: center;
}


.oa-homework-overview-search-empty[hidden],
.oa-homework-overview-task-card[hidden] {
    display: none !important;
}


.oa-homework-overview-search-empty .material-icons {
    margin: 0 0 9px;

    color: #83a79e;
    font-size: 2.7rem;
}


.oa-homework-overview-search-empty h3,
.oa-homework-overview-empty h2 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-homework-overview-search-empty p,
.oa-homework-overview-empty p {
    margin: 0;

    color: #718087;
    font-size: 0.74rem;
}


.oa-homework-overview-empty {
    min-height: 360px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.08);
}


.oa-homework-overview-empty p {
    margin-bottom: 18px;
}


.oa-homework-overview-empty-icon {
    display: grid;

    width: 72px;
    height: 72px;
    margin-bottom: 15px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-homework-overview-empty-icon .material-icons {
    margin: 0;
    font-size: 2.2rem;
}


.oa-homework-overview-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-homework-overview-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-homework-overview-analysis {
        grid-template-columns: 1fr;
    }

    .oa-homework-task-metrics {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .oa-homework-overview-main {
        padding: 24px 0 55px;
    }

    .oa-homework-overview-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-homework-overview-hero-actions {
        width: 100%;
    }

    .oa-homework-overview-hero-actions .oa-btn {
        flex: 1;
    }

    .oa-homework-overview-course {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-homework-overview-toolbar {
        grid-template-columns: 1fr;
    }

    .oa-homework-task-progress-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {
    .oa-homework-overview-heading {
        align-items: flex-start;
    }

    .oa-homework-overview-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-homework-overview-hero h1 {
        font-size: 1.35rem;
    }

    .oa-homework-overview-stats {
        grid-template-columns: 1fr;
    }

    .oa-homework-task-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-homework-overview-task-list {
        padding: 13px;
    }

    .oa-homework-overview-task-card {
        padding: 15px;
    }

    .oa-homework-chart-wrap {
        height: 270px;
    }
}

/* =========================================================
   SMARTCLASS CONTENT — LIBRARY AND BOOKS
========================================================= */

body.oa-professor-content-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-professor-content-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-professor-content-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-professor-content-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-professor-content-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-professor-content-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-content-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-professor-content-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-professor-content-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


/* Kurs */

.oa-professor-content-course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
    padding: 17px 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-professor-content-course-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


.oa-professor-content-course-icon {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-professor-content-course-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


.oa-professor-content-course-title > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-content-course-title > div > span {
    color: #718087;

    font-size: 0.61rem;
    font-weight: 700;
    text-transform: uppercase;
}


.oa-professor-content-course-title h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.03rem;
    font-weight: 700;
}


.oa-professor-content-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.oa-professor-content-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f5f9f8;
    color: #607177;

    font-size: 0.65rem;
    font-weight: 700;
}


.oa-professor-content-course-meta .material-icons {
    margin: 0;
    color: var(--tamno-zelena);
    font-size: 0.95rem;
}


/* Moduli */

.oa-professor-content-modules {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-bottom: 20px;
}


.oa-professor-content-module {
    position: relative;

    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 112px;
    padding: 17px 18px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.06);
}


.oa-content-module-active {
    border-color: rgba(4, 100, 99, 0.25);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            rgba(162, 222, 208, 0.14)
        );
}


.oa-content-module-future {
    border-style: dashed;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            rgba(255, 180, 28, 0.06)
        );
}


.oa-professor-content-module-icon {
    display: grid;
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-content-module-future
.oa-professor-content-module-icon {
    background: rgba(255, 180, 28, 0.13);
    color: #b5740d;
}


.oa-professor-content-module-icon .material-icons {
    margin: 0;
    font-size: 1.4rem;
}


.oa-professor-content-module > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-professor-content-module > div > span {
    color: #718087;

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.oa-professor-content-module h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
}


.oa-professor-content-module p {
    margin: 0;

    color: #718087;

    font-size: 0.67rem;
    line-height: 1.45;
}


.oa-professor-content-module > strong {
    margin-left: auto;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
}


.oa-professor-content-coming {
    margin-left: auto;
    padding: 5px 9px;

    border-radius: 999px;

    background: rgba(255, 180, 28, 0.12);
    color: #a86b0b;

    font-size: 0.61rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Library panel */

.oa-professor-library-panel {
    overflow: hidden;

    margin-bottom: 20px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-professor-library-panel::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


.oa-professor-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 19px 21px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.11),
            #ffffff 65%
        );
}


.oa-professor-library-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}


.oa-professor-library-heading-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-professor-library-heading-icon .material-icons {
    margin: 0;
    font-size: 1.22rem;
}


.oa-professor-library-heading > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-library-heading > div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-library-heading h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
}


.oa-professor-library-heading p {
    margin: 0;

    color: #718087;

    font-size: 0.68rem;
}


.oa-professor-library-stats {
    display: flex;
    gap: 8px;
}


.oa-professor-library-stats > span {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border-radius: 999px;

    background: #f3f8f6;
    color: #718087;

    font-size: 0.62rem;
    font-weight: 600;
}


.oa-professor-library-stats strong {
    color: var(--tamno-zelena);
    font-family: "Montserrat", sans-serif;
}


/* Forma */

.oa-professor-library-form {
    padding: 20px 21px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background: #f7faf9;
}


.oa-professor-library-form-fields {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.45fr)
        minmax(300px, 1fr);
    gap: 13px;
}


.oa-professor-library-field label {
    display: block;

    margin-bottom: 7px;

    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
}


.oa-professor-library-field label > span {
    color: #d45467;
}


.oa-professor-library-input-wrap {
    position: relative;
}


.oa-professor-library-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 2;

    margin: 0;

    color: #589589;
    font-size: 1.12rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-professor-library-input-wrap .form-control {
    min-height: 47px;
    padding-left: 42px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #ffffff;
    color: #26383f;

    font-size: 0.78rem;

    box-shadow: none;
}


.oa-professor-library-input-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.45);

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-professor-library-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 15px;
}


/* Video switch */

.oa-professor-library-video-toggle {
    display: flex;
    align-items: center;
    gap: 11px;

    cursor: pointer;
}


.oa-professor-library-video-toggle > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.oa-professor-library-switch {
    position: relative;

    flex: 0 0 43px;

    width: 43px;
    height: 24px;

    border-radius: 999px;

    background: #bec9cc;

    transition: background-color 0.2s ease;
}


.oa-professor-library-switch::after {
    content: "";

    position: absolute;
    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 2px 5px rgba(22, 57, 71, 0.22);

    transition: transform 0.2s ease;
}


.oa-professor-library-video-toggle
input:checked
+ .oa-professor-library-switch {
    background: var(--tamno-zelena);
}


.oa-professor-library-video-toggle
input:checked
+ .oa-professor-library-switch::after {
    transform: translateX(19px);
}


.oa-professor-library-video-copy {
    display: flex;
    flex-direction: column;
}


.oa-professor-library-video-copy strong {
    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
}


.oa-professor-library-video-copy small {
    margin-top: 2px;

    color: #718087;

    font-size: 0.62rem;
}


.oa-professor-library-add {
    flex: 0 0 auto;
}


/* Lista materijala */

.oa-professor-library-list {
    display: grid;
    gap: 10px;

    padding: 18px 21px 21px;
}


.oa-professor-library-item {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 13px 14px;

    border: 1px solid rgba(22, 57, 71, 0.09);
    border-radius: 14px;

    background: #f9fbfa;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}


.oa-professor-library-item:hover {
    transform: translateY(-1px);

    border-color: rgba(4, 100, 99, 0.21);
    background: #ffffff;
}


.oa-professor-library-item-icon {
    display: grid;
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    place-items: center;

    border-radius: 13px;
}


.oa-professor-library-item-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-library-video-icon {
    background: rgba(255, 148, 53, 0.12);
    color: #c76719;
}


.oa-library-resource-icon {
    background: rgba(162, 222, 208, 0.24);
    color: var(--tamno-zelena);
}


.oa-professor-library-item-content {
    min-width: 0;
    flex: 1;
}


.oa-professor-library-item-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


.oa-professor-library-item-title h3 {
    margin: 0;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
}


.oa-professor-library-item-title > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 0.57rem;
    font-weight: 700;
}


.oa-professor-library-item-title
.material-icons {
    margin: 0;
    font-size: 0.82rem;
}


.oa-library-type-video {
    background: rgba(255, 148, 53, 0.11);
    color: #b65a13;
}


.oa-library-type-resource {
    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-professor-library-url {
    display: block;
    overflow: hidden;

    margin-top: 4px;

    color: #4d7770;

    font-size: 0.65rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-professor-library-url:hover {
    color: var(--tamno-zelena);
    text-decoration: underline;
}


.oa-professor-library-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 6px;
}


.oa-professor-library-item-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #849095;

    font-size: 0.58rem;
}


.oa-professor-library-item-meta .material-icons {
    margin: 0;
    font-size: 0.82rem;
}


.oa-professor-library-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


.oa-professor-library-item-actions form {
    margin: 0;
}


.oa-professor-library-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-height: 34px;
    padding: 6px 9px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 9px;

    background: #ffffff;
    color: var(--tamno-zelena);

    font-family: inherit;
    font-size: 0.61rem;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;
}


.oa-professor-library-action:hover {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-professor-library-action .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-library-delete-action {
    border-color: rgba(198, 72, 82, 0.18);
    color: #b64852;
}


.oa-library-delete-action:hover {
    border-color: #b64852;

    background: #b64852;
    color: #ffffff;
}


/* Library prazno stanje */

.oa-professor-library-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 245px;
    padding: 35px;

    text-align: center;
}


.oa-professor-library-empty-icon {
    display: grid;

    width: 65px;
    height: 65px;
    margin-bottom: 13px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-professor-library-empty-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-library-empty h3 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
}


.oa-professor-library-empty p {
    max-width: 430px;
    margin: 0;

    color: #718087;

    font-size: 0.72rem;
}


/* Digital Books placeholder */

.oa-professor-books-placeholder {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px 22px;

    border: 1px dashed rgba(255, 180, 28, 0.35);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            rgba(255, 180, 28, 0.07)
        );

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.05);
}


.oa-professor-books-placeholder-icon {
    display: grid;
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    place-items: center;

    border-radius: 15px;

    background: rgba(255, 180, 28, 0.14);
    color: #b5740d;
}


.oa-professor-books-placeholder-icon
.material-icons {
    margin: 0;
    font-size: 1.5rem;
}


.oa-professor-books-placeholder-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
}


.oa-professor-books-placeholder-copy > span {
    color: #9a761f;

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-books-placeholder-copy h2 {
    margin: 2px 0 4px;

    color: #655120;

    font-family: "Montserrat", sans-serif;
    font-size: 0.94rem;
}


.oa-professor-books-placeholder-copy p {
    max-width: 680px;
    margin: 0;

    color: #7a6e4f;

    font-size: 0.68rem;
    line-height: 1.5;
}


.oa-professor-books-placeholder-status {
    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(255, 180, 28, 0.13);
    color: #9d680d;

    font-size: 0.61rem;
    font-weight: 700;
    white-space: nowrap;
}


.oa-professor-content-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-professor-library-form-fields {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767.98px) {
    .oa-professor-content-main {
        padding: 24px 0 55px;
    }

    .oa-professor-content-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-professor-content-hero > .oa-btn {
        width: 100%;
    }

    .oa-professor-content-course {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-content-modules {
        grid-template-columns: 1fr;
    }

    .oa-professor-library-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-library-form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-professor-library-add {
        width: 100%;
    }

    .oa-professor-library-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-professor-library-item-actions {
        width: 100%;
        padding-left: 56px;
    }

    .oa-professor-library-item-actions > *,
    .oa-professor-library-item-actions form {
        flex: 1;
    }

    .oa-professor-library-action {
        width: 100%;
    }

    .oa-professor-books-placeholder {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-professor-books-placeholder-status {
        margin-left: 67px;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-content-heading {
        align-items: flex-start;
    }

    .oa-professor-content-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-professor-content-hero h1 {
        font-size: 1.35rem;
    }

    .oa-professor-content-module {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-professor-content-module > strong,
    .oa-professor-content-coming {
        margin-left: 62px;
    }

    .oa-professor-library-stats {
        flex-wrap: wrap;
    }

    .oa-professor-library-item-actions {
        padding-left: 0;
    }

    .oa-professor-books-placeholder-status {
        margin-left: 0;
    }
}

/* =========================================================
   SMARTCLASS — PROFESSOR COURSE ACCESS
========================================================= */

body.oa-professor-access-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-professor-access-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-professor-access-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-professor-access-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-professor-access-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-professor-access-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-access-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-professor-access-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-professor-access-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


/* Kurs */

.oa-professor-access-course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
    padding: 17px 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-professor-access-course-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


.oa-professor-access-course-icon {
    display: grid;
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-professor-access-course-icon .material-icons {
    margin: 0;
    font-size: 1.3rem;
}


.oa-professor-access-course-title > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-access-course-title > div > span {
    color: #718087;

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.oa-professor-access-course-title h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.03rem;
    font-weight: 700;
}


.oa-professor-access-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.oa-professor-access-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f5f9f8;
    color: #607177;

    font-size: 0.65rem;
    font-weight: 700;
}


.oa-professor-access-course-meta .material-icons {
    margin: 0;
    color: var(--tamno-zelena);
    font-size: 0.95rem;
}


/* Layout */

.oa-professor-access-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr);
    align-items: start;
    gap: 19px;
}


/* Forma kartica */

.oa-professor-access-card {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-professor-access-card::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


.oa-professor-access-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 20px 22px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.11),
            #ffffff 65%
        );
}


.oa-professor-access-card-icon {
    display: grid;
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-professor-access-card-icon .material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-professor-access-card-header > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-access-card-header > div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-access-card-header h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}


.oa-professor-access-card-header p {
    margin: 0;

    color: #718087;

    font-size: 0.68rem;
    line-height: 1.5;
}


/* Forma */

.oa-professor-access-form {
    padding: 23px;
}


.oa-professor-access-fields-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 18px;
}


.oa-professor-access-field {
    min-width: 0;
}


.oa-professor-access-form >
.oa-professor-access-field + 
.oa-professor-access-field {
    margin-top: 18px;
}


.oa-professor-access-field label {
    display: block;

    margin-bottom: 8px;

    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.71rem;
    font-weight: 700;
}


.oa-professor-access-field label > span {
    color: #d45467;
}


.oa-professor-access-field label small {
    margin-left: 5px;

    color: #879397;

    font-family: "Open Sans", sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
}


.oa-professor-access-input-wrap {
    position: relative;
}


.oa-professor-access-input-wrap >
.material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #589589;
    font-size: 1.15rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-professor-access-input-wrap
.form-control,
.oa-professor-access-input-wrap
.form-select {
    min-height: 49px;
    padding-left: 43px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background-color: #f9fbfa;
    color: #26383f;

    font-size: 0.79rem;

    box-shadow: none;
}


.oa-professor-access-input-wrap
.form-control:focus,
.oa-professor-access-input-wrap
.form-select:focus,
.oa-professor-access-textarea:focus,
.oa-professor-access-rate
.form-control:focus {
    border-color: rgba(4, 100, 99, 0.45);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-professor-access-amount-wrap
.form-control {
    padding-right: 60px;
}


.oa-professor-access-amount-wrap >
strong {
    position: absolute;
    top: 50%;
    right: 14px;

    color: #718087;

    font-size: 0.66rem;

    transform: translateY(-50%);
}


.oa-professor-access-textarea {
    min-height: 105px;
    padding: 13px 14px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #f9fbfa;
    color: #26383f;

    font-size: 0.79rem;
    line-height: 1.55;

    resize: vertical;

    box-shadow: none;
}


/* Email napomena */

.oa-professor-access-field-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 8px;
}


.oa-professor-access-field-note
.material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    color: #b77a16;
    font-size: 1rem;
}


.oa-professor-access-field-note p {
    margin: 0;

    color: #7a6e52;

    font-size: 0.63rem;
    line-height: 1.45;
}


/* Rate */

.oa-professor-access-rate {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 18px;
    padding: 15px;

    border: 1px solid rgba(255, 180, 28, 0.2);
    border-radius: 14px;

    background: rgba(255, 180, 28, 0.07);
}


.oa-professor-access-rate[hidden] {
    display: none !important;
}


.oa-professor-access-rate-icon {
    display: grid;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 12px;

    background: rgba(255, 180, 28, 0.16);
    color: #aa6c0b;
}


.oa-professor-access-rate-icon
.material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-professor-access-rate
.oa-professor-access-field {
    flex: 1;
}


.oa-professor-access-rate
.form-control {
    min-height: 46px;

    border: 1px solid rgba(178, 118, 18, 0.2);
    border-radius: 12px;

    background: #ffffff;

    font-size: 0.76rem;

    box-shadow: none;
}


.oa-professor-access-rate small {
    display: block;

    margin-top: 7px;

    color: #7c6c4d;

    font-size: 0.61rem;
}


/* Akcije */

.oa-professor-access-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin: 23px -23px -23px;
    padding: 16px 23px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);

    background: #f7faf9;
}


.oa-professor-access-save {
    min-width: 165px;
}


/* Sidebar */

.oa-professor-access-sidebar {
    display: grid;
    gap: 14px;
}


.oa-professor-access-info-card,
.oa-professor-access-steps {
    padding: 19px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-professor-access-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            rgba(162, 222, 208, 0.12)
        );
}


.oa-professor-access-info-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-professor-access-info-icon
.material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-professor-access-info-card >
div {
    display: flex;
    flex-direction: column;
}


.oa-professor-access-info-card
div > span,
.oa-professor-access-steps
header > span {
    color: #718087;

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-access-info-card h2,
.oa-professor-access-steps h2 {
    margin: 2px 0 5px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
}


.oa-professor-access-info-card p {
    margin: 0;

    color: #65767b;

    font-size: 0.67rem;
    line-height: 1.55;
}


/* Koraci */

.oa-professor-access-steps header {
    margin-bottom: 13px;
}


.oa-professor-access-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 10px 0;

    border-top:
        1px solid rgba(22, 57, 71, 0.07);
}


.oa-professor-access-step > span {
    display: grid;
    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
}


.oa-professor-access-step p {
    margin: 3px 0 0;

    color: #68787e;

    font-size: 0.66rem;
    line-height: 1.5;
}


/* Reminder */

.oa-professor-access-reminder {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 14px 15px;

    border: 1px dashed rgba(255, 180, 28, 0.3);
    border-radius: 14px;

    background: rgba(255, 180, 28, 0.07);
}


.oa-professor-access-reminder
.material-icons {
    flex: 0 0 auto;

    margin: 0;

    color: #ac6e0c;
    font-size: 1.15rem;
}


.oa-professor-access-reminder p {
    margin: 0;

    color: #786a4c;

    font-size: 0.64rem;
    line-height: 1.5;
}


.oa-professor-access-alert {
    margin-bottom: 20px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-professor-access-layout {
        grid-template-columns: 1fr;
    }

    .oa-professor-access-sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-professor-access-reminder {
        grid-column: 1 / -1;
    }
}


@media (max-width: 767.98px) {
    .oa-professor-access-main {
        padding: 24px 0 55px;
    }

    .oa-professor-access-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-professor-access-hero > .oa-btn {
        width: 100%;
    }

    .oa-professor-access-course {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-access-fields-row {
        grid-template-columns: 1fr;
    }

    .oa-professor-access-sidebar {
        grid-template-columns: 1fr;
    }

    .oa-professor-access-reminder {
        grid-column: auto;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-access-heading {
        align-items: flex-start;
    }

    .oa-professor-access-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-professor-access-hero h1 {
        font-size: 1.35rem;
    }

    .oa-professor-access-form {
        padding: 19px;
    }

    .oa-professor-access-actions {
        align-items: stretch;
        flex-direction: column-reverse;

        margin:
            20px -19px -19px;
        padding:
            15px 19px;
    }

    .oa-professor-access-actions
    .oa-btn,
    .oa-professor-access-actions
    button {
        width: 100%;
    }

    .oa-professor-access-rate {
        flex-direction: column;
    }
}

/* =========================================================
   SMARTCLASS ACHIEVEMENTS — PROFESSOR ASSIGN BADGE
========================================================= */

body.oa-professor-badge-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.09),
            transparent 25%
        ),
        #edf3f1;

    color: #172126;
}


.oa-professor-badge-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-professor-badge-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-professor-badge-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-professor-badge-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #d88616,
            var(--zuta-glavna)
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(215, 139, 22, 0.25);
}


.oa-professor-badge-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-professor-badge-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-professor-badge-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-professor-badge-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


/* Učenik */

.oa-professor-badge-student {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 17px 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-professor-badge-student-info {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}


.oa-professor-badge-avatar {
    display: grid;
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #4fa58e
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;

    box-shadow:
        0 7px 17px rgba(4, 100, 99, 0.18);
}


.oa-professor-badge-student-info > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-professor-badge-student-info > div > span,
.oa-professor-badge-student-courses > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.oa-professor-badge-student-info h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}


.oa-professor-badge-student-info a {
    overflow: hidden;

    color: #718087;

    font-size: 0.66rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-professor-badge-student-info a:hover {
    color: var(--tamno-zelena);
    text-decoration: underline;
}


.oa-professor-badge-student-courses {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}


.oa-professor-badge-student-courses > div {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}


.oa-professor-badge-student-courses > div > span {
    padding: 5px 8px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f3f8f6;
    color: var(--tamno-zelena);

    font-size: 0.6rem;
    font-weight: 700;
}


/* Statistika */

.oa-professor-badge-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 13px;

    margin-bottom: 17px;
}


.oa-professor-badge-stat {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 78px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(22, 57, 71, 0.06);
}


.oa-professor-badge-stat-icon {
    display: grid;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-professor-badge-stat-icon .material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-professor-badge-stat > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-badge-stat > div > span {
    color: #718087;

    font-size: 0.65rem;
    font-weight: 600;
}


.oa-professor-badge-stat strong {
    margin-top: 2px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
}


.oa-badge-stat-owned
.oa-professor-badge-stat-icon {
    background: rgba(48, 183, 145, 0.13);
    color: #218267;
}


.oa-badge-stat-available
.oa-professor-badge-stat-icon {
    background: rgba(255, 180, 28, 0.15);
    color: #b9780e;
}


/* Toolbar */

.oa-professor-badge-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(190px, 0.35fr)
        auto;
    align-items: center;
    gap: 11px;

    margin-bottom: 17px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.06);
}


.oa-professor-badge-search,
.oa-professor-badge-filter {
    position: relative;
}


.oa-professor-badge-search > .material-icons,
.oa-professor-badge-filter > .material-icons {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 2;

    margin: 0;

    color: #579589;
    font-size: 1.15rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-professor-badge-search .form-control,
.oa-professor-badge-filter .form-select {
    min-height: 44px;
    padding-left: 41px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 12px;

    background-color: #f8fbfa;
    color: #26383f;

    font-size: 0.76rem;

    box-shadow: none;
}


.oa-professor-badge-search .form-control:focus,
.oa-professor-badge-filter .form-select:focus {
    border-color: rgba(4, 100, 99, 0.44);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


#professorBadgeResultCount {
    color: #718087;

    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Panel */

.oa-professor-badge-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-professor-badge-panel::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna),
            var(--narandzasta)
        );
}


.oa-professor-badge-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 19px 21px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.1),
            #ffffff 65%
        );
}


.oa-professor-badge-panel-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 12px;

    background: rgba(255, 180, 28, 0.14);
    color: #b6750d;
}


.oa-professor-badge-panel-icon .material-icons {
    margin: 0;
    font-size: 1.22rem;
}


.oa-professor-badge-panel-header > div {
    display: flex;
    flex-direction: column;
}


.oa-professor-badge-panel-header > div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-badge-panel-header h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}


.oa-professor-badge-panel-header p {
    margin: 0;

    color: #718087;

    font-size: 0.68rem;
}


/* Grid */

.oa-professor-badge-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 15px;

    padding: 20px;
}


.oa-professor-badge-card {
    position: relative;

    display: flex;
    overflow: hidden;
    flex-direction: column;

    min-width: 0;

    border: 1px solid rgba(22, 57, 71, 0.1);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 7px 19px rgba(22, 57, 71, 0.06);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.oa-professor-badge-available:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 180, 28, 0.42);

    box-shadow:
        0 13px 27px rgba(22, 57, 71, 0.11);
}


.oa-professor-badge-owned {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(162, 222, 208, 0.1)
        );
}


.oa-professor-badge-image-wrap {
    position: relative;

    display: grid;

    min-height: 165px;
    padding: 18px;

    place-items: center;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.07);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 180, 28, 0.08),
            rgba(247, 250, 249, 0.95)
        );
}


.oa-professor-badge-image-wrap img {
    display: block;

    width: 100%;
    max-width: 135px;
    max-height: 135px;

    object-fit: contain;
}


.oa-professor-badge-owned
.oa-professor-badge-image-wrap img {
    filter: saturate(0.86);
}


.oa-professor-badge-owned-mark {
    position: absolute;
    top: 11px;
    right: 11px;

    display: grid;

    width: 29px;
    height: 29px;

    place-items: center;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #30b791;
    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(48, 183, 145, 0.25);
}


.oa-professor-badge-owned-mark .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-professor-badge-card-body {
    display: flex;
    align-items: center;
    flex: 1;
    flex-direction: column;

    padding: 14px;

    text-align: center;
}


.oa-professor-badge-code {
    color: #879397;

    font-family: "Montserrat", sans-serif;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-professor-badge-card-body h3 {
    margin: 5px 0 13px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}


.oa-professor-badge-form {
    width: 100%;
    margin-top: auto;
}


.oa-professor-badge-assign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    min-height: 38px;
    padding: 7px 11px;

    border: 1px solid rgba(255, 180, 28, 0.38);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--zuta-glavna),
            var(--narandzasta)
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;

    box-shadow:
        0 6px 14px rgba(255, 148, 53, 0.2);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.oa-professor-badge-assign:hover {
    transform: translateY(-1px);

    box-shadow:
        0 9px 18px rgba(255, 148, 53, 0.27);
}


.oa-professor-badge-assign .material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-professor-badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    min-height: 38px;
    margin-top: auto;
    padding: 7px 11px;

    border-radius: 10px;

    font-family: "Montserrat", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
}


.oa-badge-status-owned {
    border: 1px solid rgba(48, 183, 145, 0.2);

    background: rgba(48, 183, 145, 0.09);
    color: #22775f;
}


.oa-professor-badge-status .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


/* Prazna stanja */

.oa-professor-badge-empty,
.oa-professor-badge-empty-search {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 280px;
    padding: 35px;

    text-align: center;
}


.oa-professor-badge-card[hidden],
.oa-professor-badge-empty-search[hidden] {
    display: none !important;
}


.oa-professor-badge-empty-icon {
    display: grid;

    width: 68px;
    height: 68px;
    margin-bottom: 13px;

    place-items: center;

    border-radius: 50%;

    background: rgba(255, 180, 28, 0.13);
    color: #b6750d;
}


.oa-professor-badge-empty-icon .material-icons,
.oa-professor-badge-empty-search > .material-icons {
    margin: 0;
    font-size: 2.15rem;
}


.oa-professor-badge-empty-search > .material-icons {
    margin-bottom: 10px;

    color: #83a79e;
    font-size: 2.7rem;
}


.oa-professor-badge-empty h3,
.oa-professor-badge-empty-search h3 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.96rem;
}


.oa-professor-badge-empty p,
.oa-professor-badge-empty-search p {
    margin: 0;

    color: #718087;

    font-size: 0.72rem;
}


.oa-professor-badge-alert {
    margin-bottom: 18px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 1199.98px) {
    .oa-professor-badge-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991.98px) {
    .oa-professor-badge-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767.98px) {
    .oa-professor-badge-main {
        padding: 24px 0 55px;
    }

    .oa-professor-badge-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-professor-badge-hero > .oa-btn {
        width: 100%;
    }

    .oa-professor-badge-student {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-badge-student-courses {
        align-items: flex-start;
    }

    .oa-professor-badge-student-courses > div {
        justify-content: flex-start;
    }

    .oa-professor-badge-toolbar {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {
    .oa-professor-badge-heading {
        align-items: flex-start;
    }

    .oa-professor-badge-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-professor-badge-hero h1 {
        font-size: 1.35rem;
    }

    .oa-professor-badge-stats {
        grid-template-columns: 1fr;
    }

    .oa-professor-badge-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .oa-professor-badge-image-wrap {
        min-height: 145px;
    }
}

.oa-professor-badge-assign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 100%;
    min-height: 40px;
    padding: 8px 12px;

    appearance: none;

    border: 1px solid #e29a16 !important;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #ffca42,
            #ff9f32
        ) !important;

    color: #173b38 !important;

    font-family: "Montserrat", sans-serif;
    font-size: 0.67rem;
    font-weight: 700;

    box-shadow:
        0 6px 14px rgba(255, 148, 53, 0.22);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.oa-professor-badge-assign .material-icons {
    margin: 0;

    color: #173b38 !important;
    font-size: 1.05rem;
}


.oa-professor-badge-assign:hover,
.oa-professor-badge-assign:focus {
    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #ffd35c,
            #ffad48
        ) !important;

    color: #102f2c !important;

    box-shadow:
        0 9px 19px rgba(255, 148, 53, 0.3);
}


.oa-professor-badge-assign:active {
    transform: translateY(0);
}

/* =========================================================
   SMARTCLASS WORKSHEETS — INDIVIDUAL STUDENT STATS
========================================================= */

body.oa-student-homework-stats-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-student-homework-stats-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-student-homework-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-student-homework-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-student-homework-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-student-homework-hero-icon
.material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-student-homework-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-student-homework-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-student-homework-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-student-homework-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


/* Kontekst */

.oa-student-homework-context {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-bottom: 18px;
}


.oa-student-homework-student,
.oa-student-homework-course {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px 19px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-student-homework-avatar {
    display: grid;
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #4fa58e
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;

    box-shadow:
        0 7px 17px rgba(4, 100, 99, 0.18);
}


.oa-student-homework-course-icon {
    display: grid;
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    place-items: center;

    border-radius: 15px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-student-homework-course-icon
.material-icons {
    margin: 0;
    font-size: 1.4rem;
}


.oa-student-homework-student > div,
.oa-student-homework-course > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-student-homework-student div > span,
.oa-student-homework-course div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.oa-student-homework-student h2,
.oa-student-homework-course h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
}


.oa-student-homework-student a {
    overflow: hidden;

    color: #718087;

    font-size: 0.66rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-student-homework-student a:hover {
    color: var(--tamno-zelena);
    text-decoration: underline;
}


.oa-student-homework-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 3px;
}


.oa-student-homework-course-meta > span {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;

    padding: 3px 7px;

    border-radius: 999px;

    background: #f3f8f6;
    color: #607177 !important;

    font-size: 0.58rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


.oa-student-homework-course-meta
.material-icons {
    margin: 0;

    color: var(--tamno-zelena);
    font-size: 0.82rem;
}


/* Statistika */

.oa-student-homework-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;

    margin-bottom: 18px;
}


.oa-student-homework-stat {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 82px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.06);
}


.oa-student-homework-stat-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 13px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-student-homework-stat-icon
.material-icons {
    margin: 0;
    font-size: 1.25rem;
}


.oa-student-homework-stat > div {
    display: flex;
    flex-direction: column;
}


.oa-student-homework-stat div > span {
    color: #718087;

    font-size: 0.65rem;
    font-weight: 600;
}


.oa-student-homework-stat strong {
    margin-top: 3px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 1.18rem;
}


.oa-student-stat-submitted
.oa-student-homework-stat-icon {
    background: rgba(255, 180, 28, 0.14);
    color: #b8780d;
}


.oa-student-stat-correct
.oa-student-homework-stat-icon {
    background: rgba(48, 183, 145, 0.13);
    color: #218267;
}


.oa-student-stat-accuracy
.oa-student-homework-stat-icon {
    background: rgba(21, 108, 135, 0.11);
    color: #27748c;
}


/* Analitika */

.oa-student-homework-analysis {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);
    gap: 18px;

    margin-bottom: 18px;
}


.oa-student-homework-chart-card,
.oa-student-homework-summary-card {
    padding: 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 11px 28px rgba(22, 57, 71, 0.08);
}


.oa-student-homework-card-heading,
.oa-student-homework-task-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}


.oa-student-homework-card-icon {
    display: grid;
    flex: 0 0 41px;

    width: 41px;
    height: 41px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-student-homework-card-icon
.material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-student-homework-card-heading > div,
.oa-student-homework-task-panel-header > div {
    display: flex;
    flex-direction: column;
}


.oa-student-homework-card-heading
div > span,
.oa-student-homework-task-panel-header
div > span {
    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-student-homework-card-heading h2,
.oa-student-homework-task-panel-header h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
}


.oa-student-homework-card-heading p,
.oa-student-homework-task-panel-header p {
    margin: 0;

    color: #718087;

    font-size: 0.68rem;
    line-height: 1.5;
}


.oa-student-homework-chart-wrap {
    position: relative;

    height: 300px;
    margin-top: 15px;
}


/* Sažetak */

.oa-student-homework-summary-list {
    display: grid;
    gap: 10px;

    margin-top: 18px;
}


.oa-student-summary-row {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 13px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 13px;

    background: #f8fbfa;
}


.oa-student-summary-dot {
    flex: 0 0 12px;

    width: 12px;
    height: 12px;

    border-radius: 50%;
}


.oa-student-summary-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
}


.oa-student-summary-row
span:not(.oa-student-summary-dot) {
    color: #627279;

    font-size: 0.7rem;
    font-weight: 600;
}


.oa-student-summary-row strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.87rem;
}


.oa-student-summary-correct
.oa-student-summary-dot {
    background: #30b791;
}


.oa-student-summary-incorrect
.oa-student-summary-dot {
    background: #e76f70;
}


.oa-student-summary-pending
.oa-student-summary-dot {
    background: #ffb41c;
}


.oa-student-summary-missing
.oa-student-summary-dot {
    background: #aab7bb;
}


.oa-student-homework-rate {
    margin-top: 16px;
    padding: 13px;

    border: 1px solid rgba(4, 100, 99, 0.1);
    border-radius: 13px;

    background: #f7faf9;
}


.oa-student-homework-rate > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}


.oa-student-homework-rate span {
    color: #68787e;

    font-size: 0.65rem;
    font-weight: 600;
}


.oa-student-homework-rate strong {
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.73rem;
}


.oa-student-homework-rate-track {
    overflow: hidden;

    height: 8px;

    border-radius: 999px;

    background: rgba(22, 57, 71, 0.09);
}


.oa-student-homework-rate-track > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena)
        );
}


.oa-student-homework-review-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 13px;
    padding: 12px 13px;

    border: 1px solid rgba(255, 180, 28, 0.18);
    border-radius: 13px;

    background: rgba(255, 180, 28, 0.08);
    color: #715c35;
}


.oa-student-homework-review-notice
.material-icons {
    margin: 0;

    color: #b8780d;
    font-size: 1.15rem;
}


.oa-student-homework-review-notice p {
    margin: 0;

    font-size: 0.68rem;
    line-height: 1.5;
}


/* Toolbar */

.oa-student-homework-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        minmax(190px, 0.35fr)
        auto;
    align-items: center;
    gap: 11px;

    margin-bottom: 16px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 21px rgba(22, 57, 71, 0.06);
}


.oa-student-homework-search,
.oa-student-homework-filter {
    position: relative;
}


.oa-student-homework-search >
.material-icons,
.oa-student-homework-filter >
.material-icons {
    position: absolute;
    top: 50%;
    left: 13px;

    z-index: 2;

    margin: 0;

    color: #579589;
    font-size: 1.15rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-student-homework-search
.form-control,
.oa-student-homework-filter
.form-select {
    min-height: 44px;
    padding-left: 41px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 12px;

    background-color: #f8fbfa;
    color: #26383f;

    font-size: 0.76rem;

    box-shadow: none;
}


.oa-student-homework-search
.form-control:focus,
.oa-student-homework-filter
.form-select:focus {
    border-color: rgba(4, 100, 99, 0.44);

    background-color: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


#studentHomeworkResultCount {
    color: #718087;

    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Panel zadataka */

.oa-student-homework-task-panel {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #f5f9f7;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-student-homework-task-panel-header {
    padding: 18px 20px;

    border-top: 4px solid var(--svetlo-zelena);
    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background: #ffffff;
}


.oa-student-homework-task-list {
    display: grid;
    gap: 14px;

    padding: 18px;
}


/* Kartica zadatka */

.oa-student-homework-task-card {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 57, 71, 0.06);
}


.oa-student-homework-task-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    padding: 13px 16px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background: #f8fbfa;
}


.oa-student-homework-task-number {
    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
}


.oa-student-homework-task-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.oa-student-homework-deadline,
.oa-student-homework-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 700;
}


.oa-student-homework-deadline
.material-icons,
.oa-student-homework-status
.material-icons {
    margin: 0;
    font-size: 0.92rem;
}


.oa-student-deadline-active {
    background: rgba(48, 183, 145, 0.09);
    color: #23775f;
}


.oa-student-deadline-expired {
    background: rgba(120, 134, 139, 0.1);
    color: #6f7d81;
}


.oa-student-status-correct {
    background: rgba(48, 183, 145, 0.11);
    color: #23775f;
}


.oa-student-status-incorrect {
    background: rgba(231, 111, 112, 0.11);
    color: #ad4e50;
}


.oa-student-status-pending {
    background: rgba(255, 180, 28, 0.13);
    color: #a86b0b;
}


.oa-student-status-not-submitted {
    background: rgba(139, 151, 155, 0.12);
    color: #6f7d81;
}


.oa-student-homework-question,
.oa-student-homework-answer {
    margin: 15px 16px 0;
    padding: 14px 15px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 13px;

    background: #f8fbfa;
}


.oa-student-homework-answer {
    margin-bottom: 15px;

    background: #ffffff;
}


.oa-student-homework-question > span,
.oa-student-homework-answer > span {
    display: block;

    margin-bottom: 6px;

    color: #718087;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.oa-student-homework-question > div,
.oa-student-homework-answer > div {
    color: #304149;

    font-size: 0.79rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}


.oa-student-homework-no-answer {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #7a878c !important;

    font-style: italic;
}


.oa-student-homework-no-answer
.material-icons {
    margin: 0;
    font-size: 1.1rem;
}


/* Placeholder ručne provere */

.oa-student-homework-task-actions {
    display: flex;
    justify-content: flex-end;

    padding: 13px 16px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);

    background: rgba(255, 180, 28, 0.05);
}


.oa-student-homework-review-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 38px;
    padding: 7px 11px;

    border: 1px dashed rgba(178, 118, 18, 0.35);
    border-radius: 10px;

    background: rgba(255, 180, 28, 0.08);
    color: #8d6a28;

    font-family: "Montserrat", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;

    cursor: not-allowed;
    opacity: 1;
}


.oa-student-homework-review-placeholder
.material-icons {
    margin: 0;
    font-size: 1rem;
}


.oa-student-homework-review-placeholder
small {
    margin-left: 2px;
    padding: 2px 5px;

    border-radius: 999px;

    background: rgba(255, 180, 28, 0.16);
    color: #8a651f;

    font-size: 0.53rem;
    text-transform: uppercase;
}


/* Prazna stanja */

.oa-student-homework-search-empty,
.oa-student-homework-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 290px;
    padding: 35px;

    text-align: center;
}


.oa-student-homework-task-card[hidden],
.oa-student-homework-search-empty[hidden] {
    display: none !important;
}


.oa-student-homework-search-empty
.material-icons {
    margin: 0 0 9px;

    color: #83a79e;
    font-size: 2.7rem;
}


.oa-student-homework-search-empty h3,
.oa-student-homework-empty h2 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-student-homework-search-empty p,
.oa-student-homework-empty p {
    margin: 0;

    color: #718087;
    font-size: 0.73rem;
}


.oa-student-homework-empty {
    min-height: 360px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.08);
}


.oa-student-homework-empty p {
    margin-bottom: 18px;
}


.oa-student-homework-empty-icon {
    display: grid;

    width: 70px;
    height: 70px;
    margin-bottom: 14px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-student-homework-empty-icon
.material-icons {
    margin: 0;
    font-size: 2.15rem;
}


.oa-student-homework-alert {
    margin-bottom: 18px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-student-homework-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-student-homework-analysis {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767.98px) {
    .oa-student-homework-stats-main {
        padding: 24px 0 55px;
    }

    .oa-student-homework-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-student-homework-hero-actions {
        width: 100%;
    }

    .oa-student-homework-hero-actions
    .oa-btn {
        flex: 1;
    }

    .oa-student-homework-context {
        grid-template-columns: 1fr;
    }

    .oa-student-homework-toolbar {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {
    .oa-student-homework-heading {
        align-items: flex-start;
    }

    .oa-student-homework-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-student-homework-hero h1 {
        font-size: 1.35rem;
    }

    .oa-student-homework-stats {
        grid-template-columns: 1fr;
    }

    .oa-student-homework-task-list {
        padding: 13px;
    }

    .oa-student-homework-task-badges {
        width: 100%;
    }

    .oa-student-homework-deadline,
    .oa-student-homework-status {
        flex: 1;
        justify-content: center;
    }

    .oa-student-homework-task-actions {
        justify-content: stretch;
    }

    .oa-student-homework-review-placeholder {
        width: 100%;
    }

    .oa-student-homework-chart-wrap {
        height: 270px;
    }
}

/* =========================================================
   SMARTCLASS STUDY GROUP
========================================================= */

body.oa-study-group-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(162, 222, 208, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255, 180, 28, 0.08),
            transparent 24%
        ),
        #edf3f1;

    color: #172126;
}


.oa-study-group-main {
    padding: 38px 0 70px;
}


/* Hero */

.oa-study-group-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;

    margin-bottom: 22px;
    padding: 23px 28px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(240, 249, 246, 0.96)
        );

    box-shadow:
        0 13px 32px rgba(22, 57, 71, 0.09);
}


.oa-study-group-heading {
    display: flex;
    align-items: center;
    gap: 17px;
}


.oa-study-group-hero-icon {
    display: grid;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #48a28a
        );

    color: #ffffff;

    box-shadow:
        0 10px 23px rgba(4, 100, 99, 0.23);
}


.oa-study-group-hero-icon .material-icons {
    margin: 0;
    font-size: 2rem;
}


.oa-study-group-kicker {
    display: block;

    color: #718087;

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.oa-study-group-hero h1 {
    margin: 2px 0 4px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}


.oa-study-group-hero p {
    margin: 0;

    color: #5b6a70;

    font-size: 0.88rem;
}


.oa-study-group-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


/* Kurs */

.oa-study-group-course {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 17px;
    padding: 17px 20px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 9px 23px rgba(22, 57, 71, 0.07);
}


.oa-study-group-course-title {
    display: flex;
    align-items: center;
    gap: 12px;
}


.oa-study-group-course-icon {
    display: grid;
    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    place-items: center;

    border-radius: 14px;

    background: rgba(162, 222, 208, 0.23);
    color: var(--tamno-zelena);
}


.oa-study-group-course-icon .material-icons {
    margin: 0;
    font-size: 1.35rem;
}


.oa-study-group-course-title > div {
    display: flex;
    flex-direction: column;
}


.oa-study-group-course-title div > span {
    color: #718087;

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.oa-study-group-course-title h2 {
    margin: 2px 0 0;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1.03rem;
    font-weight: 700;
}


.oa-study-group-course-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


.oa-study-group-course-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 999px;

    background: #f5f9f8;
    color: #607177;

    font-size: 0.64rem;
    font-weight: 700;
}


.oa-study-group-course-meta .material-icons {
    margin: 0;
    font-size: 0.93rem;
}


/* Role oznake */

.oa-study-role-professor {
    border-color: rgba(255, 180, 28, 0.22) !important;

    background: rgba(255, 180, 28, 0.11) !important;
    color: #9e660b !important;
}


.oa-study-role-student {
    border-color: rgba(4, 100, 99, 0.13) !important;

    background: rgba(162, 222, 208, 0.18) !important;
    color: var(--tamno-zelena) !important;
}


/* Statistika */

.oa-study-group-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 13px;

    margin-bottom: 18px;
}


.oa-study-group-stat {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 77px;
    padding: 14px 16px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(22, 57, 71, 0.06);
}


.oa-study-group-stat-icon {
    display: grid;
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-study-group-stat-icon .material-icons {
    margin: 0;
    font-size: 1.2rem;
}


.oa-study-group-stat > div {
    display: flex;
    flex-direction: column;
}


.oa-study-group-stat div > span {
    color: #718087;

    font-size: 0.64rem;
    font-weight: 600;
}


.oa-study-group-stat strong {
    margin-top: 2px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 1.14rem;
}


.oa-study-stat-replies
.oa-study-group-stat-icon {
    background: rgba(255, 180, 28, 0.14);
    color: #b8780d;
}


.oa-study-stat-participants
.oa-study-group-stat-icon {
    background: rgba(21, 108, 135, 0.11);
    color: #27748c;
}


/* Layout */

.oa-study-group-layout {
    display: grid;
    grid-template-columns:
        minmax(290px, 0.35fr)
        minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}


/* Composer */

.oa-study-group-composer {
    position: sticky;
    top: 20px;
}


.oa-study-group-composer-card,
.oa-study-group-discussions {
    overflow: hidden;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 31px rgba(22, 57, 71, 0.09);
}


.oa-study-group-composer-card::before,
.oa-study-group-discussions::before {
    content: "";
    display: block;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--tamno-zelena),
            var(--svetlo-zelena),
            var(--zuta-glavna)
        );
}


.oa-study-group-composer-header,
.oa-study-group-discussions-header {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 19px 20px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.11),
            #ffffff 65%
        );
}


.oa-study-group-composer-icon,
.oa-study-group-discussions-icon {
    display: grid;
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 12px;

    background: rgba(162, 222, 208, 0.22);
    color: var(--tamno-zelena);
}


.oa-study-group-composer-icon .material-icons,
.oa-study-group-discussions-icon .material-icons {
    margin: 0;
    font-size: 1.22rem;
}


.oa-study-group-composer-header > div,
.oa-study-group-discussions-header > div {
    display: flex;
    flex-direction: column;
}


.oa-study-group-composer-header div > span,
.oa-study-group-discussions-header div > span {
    color: #718087;

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.oa-study-group-composer-header h2,
.oa-study-group-discussions-header h2 {
    margin: 2px 0 3px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
}


.oa-study-group-composer-header p,
.oa-study-group-discussions-header p {
    margin: 0;

    color: #718087;

    font-size: 0.67rem;
    line-height: 1.5;
}


/* Trenutni korisnik */

.oa-study-group-current-user {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 17px 18px 0;
    padding: 11px 12px;

    border: 1px solid rgba(4, 100, 99, 0.1);
    border-radius: 13px;

    background: #f6faf8;
}


.oa-study-group-avatar {
    display: grid;
    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena),
            #4fa58e
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
}


.oa-study-avatar-professor {
    background:
        linear-gradient(
            135deg,
            #cb8112,
            var(--zuta-glavna)
        );

    color: #493207;
}


.oa-study-group-current-user > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-study-group-current-user div > span {
    color: #718087;

    font-size: 0.57rem;
    font-weight: 600;
}


.oa-study-group-current-user strong {
    overflow: hidden;

    margin-top: 2px;

    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Forma nove diskusije */

.oa-study-group-new-form {
    padding: 18px;
}


.oa-study-group-field + .oa-study-group-field {
    margin-top: 15px;
}


.oa-study-group-field label {
    display: block;

    margin-bottom: 7px;

    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.69rem;
    font-weight: 700;
}


.oa-study-group-field label > span {
    color: #d45467;
}


.oa-study-group-field .form-control {
    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 12px;

    background: #f9fbfa;
    color: #26383f;

    font-size: 0.75rem;

    box-shadow: none;
}


.oa-study-group-field input.form-control {
    min-height: 45px;
}


.oa-study-group-field textarea.form-control {
    min-height: 145px;
    padding: 12px 13px;

    line-height: 1.55;
    resize: vertical;
}


.oa-study-group-field .form-control:focus,
.oa-study-group-reply-form .form-control:focus {
    border-color: rgba(4, 100, 99, 0.44);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-study-group-publish {
    width: 100%;
    margin-top: 17px;
}


/* Diskusije */

.oa-study-group-topic-list {
    display: grid;
    gap: 14px;

    padding: 18px;

    background: #f5f9f7;
}


.oa-study-group-topic {
    overflow: hidden;

    scroll-margin-top: 20px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 57, 71, 0.06);
}


.oa-study-group-topic:target {
    border-color: rgba(255, 180, 28, 0.55);

    box-shadow:
        0 0 0 4px rgba(255, 180, 28, 0.1),
        0 10px 24px rgba(22, 57, 71, 0.09);
}


.oa-study-group-topic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 13px 15px;

    border-bottom:
        1px solid rgba(22, 57, 71, 0.08);

    background: #f8fbfa;
}


.oa-study-group-author {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}


.oa-study-group-author > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


.oa-study-group-author-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}


.oa-study-group-author-line strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
}


.oa-study-group-author-role,
.oa-study-group-you {
    display: inline-flex;
    align-items: center;

    padding: 2px 6px;

    border-radius: 999px;

    font-size: 0.52rem;
    font-weight: 700;
}


.oa-study-group-you {
    background: rgba(21, 108, 135, 0.09);
    color: #27748c;
}


.oa-study-group-author time {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 3px;

    color: #849095;

    font-size: 0.57rem;
}


.oa-study-group-author time .material-icons {
    margin: 0;
    font-size: 0.8rem;
}


.oa-study-group-reply-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.18);
    color: var(--tamno-zelena);

    font-size: 0.58rem;
    font-weight: 700;
}


.oa-study-group-reply-count .material-icons {
    margin: 0;
    font-size: 0.85rem;
}


/* Sadržaj teme */

.oa-study-group-topic-content {
    padding: 17px 18px;
}


.oa-study-group-topic-content h3 {
    margin: 0 0 9px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.4;
}


.oa-study-group-topic-content > div {
    color: #3e4f55;

    font-size: 0.76rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}


/* Odgovori */

.oa-study-group-replies {
    display: grid;
    gap: 10px;

    padding: 0 18px 16px;
}


.oa-study-group-reply {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-left: 23px;
}


.oa-study-group-reply-line {
    position: absolute;
    top: -13px;
    bottom: 50%;
    left: -17px;

    width: 15px;

    border-bottom:
        2px solid rgba(4, 100, 99, 0.14);
    border-left:
        2px solid rgba(4, 100, 99, 0.14);
    border-bottom-left-radius: 10px;
}


.oa-study-group-reply-avatar {
    flex-basis: 34px;

    width: 34px;
    height: 34px;

    font-size: 0.55rem;
}


.oa-study-group-reply-body {
    min-width: 0;
    flex: 1;

    padding: 11px 12px;

    border: 1px solid rgba(22, 57, 71, 0.08);
    border-radius: 12px;

    background: #f8fbfa;
}


.oa-study-group-reply-body header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 6px;
}


.oa-study-group-reply-body header > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}


.oa-study-group-reply-body header strong {
    color: #26383f;

    font-family: "Montserrat", sans-serif;
    font-size: 0.66rem;
}


.oa-study-group-reply-body time {
    flex: 0 0 auto;

    color: #879397;
    font-size: 0.54rem;
}


.oa-study-group-reply-content {
    color: #45565c;

    font-size: 0.69rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}


/* Odgovaranje */

.oa-study-group-topic-footer {
    padding: 12px 15px;

    border-top:
        1px solid rgba(22, 57, 71, 0.08);

    background: #fafcfb;
}


.oa-study-group-reply-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 34px;
    padding: 6px 10px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 9px;

    background: #ffffff;
    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}


.oa-study-group-reply-toggle:hover,
.oa-study-group-reply-toggle[aria-expanded="true"] {
    border-color: var(--tamno-zelena);

    background: var(--tamno-zelena);
    color: #ffffff;
}


.oa-study-group-reply-toggle .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-study-group-reply-form {
    margin-top: 12px;
    padding: 13px;

    border: 1px solid rgba(4, 100, 99, 0.1);
    border-radius: 12px;

    background: #f6faf8;
}


.oa-study-group-reply-form[hidden] {
    display: none !important;
}


.oa-study-group-reply-form textarea {
    min-height: 85px;

    border: 1px solid rgba(4, 100, 99, 0.15);
    border-radius: 11px;

    background: #ffffff;

    font-size: 0.72rem;
    line-height: 1.55;
    resize: vertical;

    box-shadow: none;
}


.oa-study-group-reply-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 9px;
}


/* Prazno stanje */

.oa-study-group-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 330px;
    padding: 40px;

    text-align: center;
}


.oa-study-group-empty-icon {
    display: grid;

    width: 70px;
    height: 70px;
    margin-bottom: 14px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.21);
    color: var(--tamno-zelena);
}


.oa-study-group-empty-icon .material-icons {
    margin: 0;
    font-size: 2.15rem;
}


.oa-study-group-empty h3 {
    margin: 0 0 6px;

    color: var(--tamno-zelena);

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}


.oa-study-group-empty p {
    max-width: 430px;
    margin: 0;

    color: #718087;

    font-size: 0.72rem;
    line-height: 1.5;
}


.oa-study-group-alert {
    margin-bottom: 18px;
    border-radius: 14px;
}


/* Responsive */

@media (max-width: 991.98px) {
    .oa-study-group-layout {
        grid-template-columns: 1fr;
    }

    .oa-study-group-composer {
        position: static;
    }
}


@media (max-width: 767.98px) {
    .oa-study-group-main {
        padding: 24px 0 55px;
    }

    .oa-study-group-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 21px;
    }

    .oa-study-group-hero-actions {
        width: 100%;
    }

    .oa-study-group-hero-actions .oa-btn {
        flex: 1;
    }

    .oa-study-group-course {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-study-group-stats {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {
    .oa-study-group-heading {
        align-items: flex-start;
    }

    .oa-study-group-hero-icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

    .oa-study-group-hero h1 {
        font-size: 1.35rem;
    }

    .oa-study-group-topic-list {
        padding: 13px;
    }

    .oa-study-group-topic-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-study-group-reply {
        margin-left: 8px;
    }

    .oa-study-group-reply-line {
        display: none;
    }

    .oa-study-group-reply-body header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-study-group-reply-actions .oa-btn {
        width: 100%;
    }
}

/* =========================================================
   SMARTCLASS AUTH — LOGIN
========================================================= */

body.oa-auth-page {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(162, 222, 208, 0.26),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(255, 180, 28, 0.13),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #eaf3f0,
            #f7faf9
        );

    color: #172126;

    font-family: "Open Sans", sans-serif;
}


/* =========================================================
   TOP BAR
========================================================= */

.oa-auth-topbar {
    position: relative;
    z-index: 20;

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

    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px 28px 0;
}


.oa-auth-home-link,
.oa-auth-language-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 40px;
    padding: 8px 12px;

    border: 1px solid rgba(4, 100, 99, 0.13);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.78);
    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;

    box-shadow:
        0 5px 15px rgba(22, 57, 71, 0.06);

    backdrop-filter: blur(10px);

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}


.oa-auth-home-link:hover,
.oa-auth-language-button:hover {
    transform: translateY(-1px);

    border-color: rgba(4, 100, 99, 0.3);

    background: #ffffff;
    color: var(--tamno-zelena, #016560);
}


.oa-auth-home-link .material-icons,
.oa-auth-language-button .material-icons {
    margin: 0;
    font-size: 1.05rem;
}


.oa-auth-language-button {
    border: 1px solid rgba(4, 100, 99, 0.13);
}


.oa-auth-language .dropdown-menu {
    min-width: 155px;
    margin-top: 7px;
    padding: 6px;

    border: 1px solid rgba(4, 100, 99, 0.12);
    border-radius: 12px;

    box-shadow:
        0 14px 35px rgba(22, 57, 71, 0.14);
}


.oa-auth-language .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 10px;

    border-radius: 8px;

    color: #34474d;

    font-size: 0.73rem;
    font-weight: 600;
}


.oa-auth-language .dropdown-item:hover {
    background: rgba(162, 222, 208, 0.17);
    color: var(--tamno-zelena, #016560);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.oa-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: calc(100vh - 60px);
    padding: 30px 24px 55px;
}


.oa-auth-shell {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 0.75fr);

    overflow: hidden;

    width: 100%;
    max-width: 1080px;
    min-height: 650px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 27px;

    background: #ffffff;

    box-shadow:
        0 28px 70px rgba(22, 57, 71, 0.16);
}


/* =========================================================
   BRAND PANEL
========================================================= */

.oa-auth-brand-panel {
    position: relative;

    overflow: hidden;

    padding: 43px 45px;

    background:
        linear-gradient(
            145deg,
            rgba(1, 101, 96, 0.98),
            rgba(3, 77, 74, 0.98)
        );

    color: #ffffff;
}


.oa-auth-brand-panel::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -110px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        rgba(162, 222, 208, 0.12);
}


.oa-auth-brand-panel::after {
    content: "";

    position: absolute;
    bottom: -170px;
    left: -120px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    background:
        rgba(255, 180, 28, 0.05);
}


.oa-auth-brand-content {
    position: relative;
    z-index: 2;

    display: flex;
    height: 100%;
    flex-direction: column;
}


.oa-auth-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    align-self: flex-start;

    color: #ffffff;
    text-decoration: none;
}


.oa-auth-brand-logo img {
    width: 70px;
    height: 70px;

    object-fit: contain;
}


.oa-auth-brand-logo > span {
    display: flex;
    flex-direction: column;
}


.oa-auth-brand-logo strong {
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
}


.oa-auth-brand-logo small {
    margin-top: 2px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.oa-auth-brand-copy {
    margin-top: 75px;
}


.oa-auth-brand-kicker {
    display: block;

    color: var(--zuta-glavna, #ffb41c);

    font-family: "Montserrat", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.oa-auth-brand-copy h1 {
    max-width: 440px;
    margin: 8px 0 13px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 700;
    line-height: 1.13;
}


.oa-auth-brand-copy p {
    max-width: 430px;
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 0.88rem;
    line-height: 1.75;
}


.oa-auth-feature-list {
    display: grid;
    gap: 12px;

    margin-top: 37px;
}


.oa-auth-feature {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 13px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;

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

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.74rem;
    font-weight: 600;

    backdrop-filter: blur(8px);
}


.oa-auth-feature-icon {
    display: grid;
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    place-items: center;

    border-radius: 10px;

    background: rgba(255, 180, 28, 0.14);
    color: var(--zuta-glavna, #ffb41c);
}


.oa-auth-feature-icon .material-icons {
    margin: 0;
    font-size: 1.05rem;
}


.oa-auth-brand-footer {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: auto;
    padding-top: 35px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.65rem;
    font-weight: 600;
}


.oa-auth-brand-footer .material-icons {
    margin: 0;

    color: var(--zuta-glavna, #ffb41c);
    font-size: 1rem;
}


/* =========================================================
   FORM PANEL
========================================================= */

.oa-auth-form-panel {
    display: flex;
    justify-content: center;
    flex-direction: column;

    padding: 45px 52px;
}


.oa-auth-mobile-logo {
    display: none;
}


.oa-auth-form-heading {
    margin-bottom: 26px;
}


.oa-auth-form-kicker {
    display: block;

    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.oa-auth-form-heading h2 {
    margin: 5px 0 7px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
}


.oa-auth-form-heading p {
    max-width: 440px;
    margin: 0;

    color: #718087;

    font-size: 0.75rem;
    line-height: 1.6;
}


/* Alerts */

.oa-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 20px;
    padding: 11px 13px;

    border-radius: 12px;

    font-size: 0.68rem;
    line-height: 1.5;
}


.oa-auth-alert .material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    font-size: 1.05rem;
}


/* Forma */

.oa-auth-form {
    display: grid;
    gap: 18px;
}


.oa-auth-field label {
    display: block;

    margin: 0;

    color: #31434a;

    font-family: "Montserrat", sans-serif;
    font-size: 0.69rem;
    font-weight: 700;
}


.oa-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 7px;
}


.oa-auth-label-row a {
    color: var(--tamno-zelena, #016560);

    font-size: 0.62rem;
    font-weight: 700;
    text-decoration: none;
}


.oa-auth-label-row a:hover {
    text-decoration: underline;
}


.oa-auth-input-wrap {
    position: relative;
}


.oa-auth-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;

    z-index: 2;

    margin: 0;

    color: #589589;
    font-size: 1.12rem;

    pointer-events: none;

    transform: translateY(-50%);
}


.oa-auth-input-wrap .form-control {
    min-height: 51px;
    padding: 10px 44px 10px 43px;

    border: 1px solid rgba(4, 100, 99, 0.16);
    border-radius: 13px;

    background: #f8fbfa;
    color: #26383f;

    font-size: 0.78rem;

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


.oa-auth-input-wrap .form-control:focus {
    border-color: rgba(4, 100, 99, 0.47);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.08);
}


.oa-auth-input-wrap .form-control::placeholder {
    color: #9aa5a8;
}


.oa-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;

    z-index: 3;

    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #6f7f84;

    cursor: pointer;

    transform: translateY(-50%);
}


.oa-auth-password-toggle:hover,
.oa-auth-password-toggle:focus-visible {
    background: rgba(162, 222, 208, 0.18);
    color: var(--tamno-zelena, #016560);
}


.oa-auth-password-toggle .material-icons {
    margin: 0;
    font-size: 1.1rem;
}


/* Submit */

.oa-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    min-height: 49px;
    margin-top: 2px;
    padding: 10px 16px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--tamno-zelena, #016560),
            #3d9884
        );

    color: #ffffff;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;

    box-shadow:
        0 9px 20px rgba(4, 100, 99, 0.22);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.oa-auth-submit:hover {
    transform: translateY(-1px);

    color: #ffffff;

    box-shadow:
        0 12px 25px rgba(4, 100, 99, 0.28);

    filter: brightness(1.04);
}


.oa-auth-submit:disabled {
    cursor: wait;
    opacity: 0.82;
}


.oa-auth-submit .material-icons {
    margin: 0;
    font-size: 1.05rem;
}


.oa-auth-spinner {
    display: inline-block;

    width: 15px;
    height: 15px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation:
        oa-auth-spin 0.8s linear infinite;
}


@keyframes oa-auth-spin {
    to {
        transform: rotate(360deg);
    }
}


/* Separator */

.oa-auth-separator {
    position: relative;

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

    margin: 23px 0 18px;

    text-align: center;
}


.oa-auth-separator::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 0;
    left: 0;

    height: 1px;

    background: rgba(22, 57, 71, 0.1);
}


.oa-auth-separator span {
    position: relative;
    z-index: 2;

    padding: 0 11px;

    background: #ffffff;
    color: #879397;

    font-size: 0.61rem;
    font-weight: 600;
}


/* Google */

.oa-auth-google {
    display: flex;
    align-items: center;
    flex-direction: column;
}


.oa-auth-google-button {
    display: flex;
    justify-content: center;

    width: 100%;
    min-height: 44px;
}


.oa-auth-google-status {
    width: 100%;
    margin-top: 10px;
    padding: 9px 11px;

    border-radius: 10px;

    font-size: 0.64rem;
    text-align: center;
}


.oa-auth-google-loading {
    background: rgba(162, 222, 208, 0.15);
    color: var(--tamno-zelena, #016560);
}


.oa-auth-google-error {
    background: rgba(214, 75, 86, 0.09);
    color: #a5414a;
}


/* Registracija */

.oa-auth-register {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 21px;

    color: #718087;

    font-size: 0.68rem;
}


.oa-auth-register a {
    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-decoration: none;
}


.oa-auth-register a:hover {
    text-decoration: underline;
}


.oa-auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin-top: 22px;

    color: #8b9699;

    font-size: 0.58rem;
}


.oa-auth-security .material-icons {
    margin: 0;

    color: #68a598;
    font-size: 0.85rem;
}


.oa-auth-copyright {
    margin-top: 12px;

    color: #a0aaad;

    font-size: 0.57rem;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .oa-auth-shell {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(390px, 1fr);
    }

    .oa-auth-brand-panel {
        padding: 36px 32px;
    }

    .oa-auth-form-panel {
        padding: 42px 38px;
    }

    .oa-auth-brand-copy {
        margin-top: 58px;
    }
}


@media (max-width: 767.98px) {
    .oa-auth-topbar {
        padding: 15px 16px 0;
    }

    .oa-auth-main {
        align-items: flex-start;

        min-height: auto;
        padding: 22px 14px 40px;
    }

    .oa-auth-shell {
        display: block;

        max-width: 540px;
        min-height: 0;

        border-radius: 21px;
    }

    .oa-auth-brand-panel {
        display: none;
    }

    .oa-auth-form-panel {
        padding: 30px 27px;
    }

    .oa-auth-mobile-logo {
        display: flex;
        align-items: center;
        gap: 10px;

        margin-bottom: 28px;
    }

    .oa-auth-mobile-logo img {
        width: 58px;
        height: 58px;

        object-fit: contain;
    }

    .oa-auth-mobile-logo > div {
        display: flex;
        flex-direction: column;
    }

    .oa-auth-mobile-logo strong {
        color: var(--tamno-zelena, #016560);

        font-family: "Montserrat", sans-serif;
        font-size: 0.82rem;
    }

    .oa-auth-mobile-logo span {
        margin-top: 2px;

        color: #718087;

        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
}


@media (max-width: 575.98px) {
    .oa-auth-home-link,
    .oa-auth-language-button {
        min-height: 37px;
        padding: 7px 9px;

        font-size: 0.62rem;
    }

    .oa-auth-form-panel {
        padding: 27px 20px;
    }

    .oa-auth-form-heading h2 {
        font-size: 1.48rem;
    }

    .oa-auth-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .oa-auth-input-wrap .form-control {
        min-height: 49px;
    }
}

/* =========================================================
   SMARTCLASS AUTH — SIGNUP
========================================================= */

.oa-signup-main {
    padding-top: 24px;
}


.oa-signup-shell {
    grid-template-columns:
        minmax(360px, 0.72fr)
        minmax(530px, 1fr);

    max-width: 1180px;
    min-height: 720px;
}


.oa-signup-brand-panel {
    padding-right: 40px;
    padding-left: 40px;
}


.oa-signup-brand-copy {
    margin-top: 62px;
}


.oa-signup-form-panel {
    padding: 39px 48px;
}


.oa-signup-form-heading {
    margin-bottom: 14px;
}


.oa-signup-required-note {
    display: block;

    margin-top: 8px;

    color: #8a9699;

    font-size: 0.59rem;
    font-weight: 600;
}


.oa-signup-login-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-bottom: 19px;
    padding: 10px 12px;

    border: 1px solid rgba(4, 100, 99, 0.1);
    border-radius: 11px;

    background: rgba(162, 222, 208, 0.1);
    color: #718087;

    font-size: 0.66rem;
}


.oa-signup-login-link a {
    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-decoration: none;
}


.oa-signup-login-link a:hover {
    text-decoration: underline;
}


/* Forma */

.oa-signup-form {
    gap: 16px;
}


.oa-signup-fields-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 13px;
}


.oa-auth-required {
    margin-left: 2px;
    color: #d45467;
}


/* Pravila za lozinku */

.oa-signup-password-rules {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;

    margin-top: 9px;
    padding: 10px 11px;

    border: 1px solid rgba(4, 100, 99, 0.09);
    border-radius: 11px;

    background: #f7faf9;
}


.oa-signup-password-rules-title {
    width: 100%;

    margin-bottom: 1px;

    color: #627278;

    font-size: 0.6rem;
    font-weight: 700;
}


.oa-signup-password-rule {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #899497;

    font-size: 0.58rem;
    font-weight: 600;

    transition: color 0.18s ease;
}


.oa-signup-password-rule .material-icons {
    margin: 0;

    color: #aab4b7;
    font-size: 0.88rem;

    transition: color 0.18s ease;
}


.oa-signup-rule-valid {
    color: #278168;
}


.oa-signup-rule-valid .material-icons {
    color: #30a981;
}


.oa-signup-password-error {
    margin-top: 8px;
    padding: 8px 10px;

    border: 1px solid rgba(202, 68, 78, 0.16);
    border-radius: 9px;

    background: rgba(202, 68, 78, 0.07);
    color: #a33f48;

    font-size: 0.61rem;
    line-height: 1.45;
}


.oa-signup-password-error[hidden] {
    display: none !important;
}


/* Browser validacija */

.oa-signup-form.was-validated
.form-control:invalid {
    border-color: rgba(205, 71, 82, 0.52);

    background-color: rgba(205, 71, 82, 0.025);

    box-shadow:
        0 0 0 4px rgba(205, 71, 82, 0.06);
}


.oa-signup-form.was-validated
.form-control:valid {
    border-color: rgba(48, 169, 129, 0.35);
}


/* Uslovi korišćenja */

.oa-signup-terms {
    padding: 13px 14px;

    border: 1px solid rgba(4, 100, 99, 0.11);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(247, 250, 249, 0.98),
            rgba(162, 222, 208, 0.08)
        );
}


.oa-signup-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 0;

    cursor: pointer;
}


.oa-signup-terms
.form-check-input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
    margin: 2px 0 0;

    border: 1px solid rgba(4, 100, 99, 0.35);

    cursor: pointer;

    box-shadow: none;
}


.oa-signup-terms
.form-check-input:checked {
    border-color: var(--tamno-zelena, #016560);

    background-color: var(--tamno-zelena, #016560);
}


.oa-signup-terms
.form-check-input:focus {
    border-color: var(--tamno-zelena, #016560);

    box-shadow:
        0 0 0 4px rgba(4, 100, 99, 0.09);
}


.oa-signup-checkbox-copy {
    color: #68787e;

    font-size: 0.64rem;
    line-height: 1.6;
}


.oa-signup-checkbox-copy a {
    color: var(--tamno-zelena, #016560);

    font-weight: 700;
    text-decoration: none;
}


.oa-signup-checkbox-copy a:hover {
    text-decoration: underline;
}


.oa-signup-submit {
    margin-top: 1px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1099.98px) {
    .oa-signup-shell {
        grid-template-columns:
            minmax(320px, 0.7fr)
            minmax(490px, 1fr);
    }

    .oa-signup-form-panel {
        padding-right: 36px;
        padding-left: 36px;
    }
}


@media (max-width: 991.98px) {
    .oa-signup-shell {
        grid-template-columns:
            minmax(280px, 0.62fr)
            minmax(450px, 1fr);
    }

    .oa-signup-brand-panel {
        padding-right: 28px;
        padding-left: 28px;
    }

    .oa-signup-brand-copy {
        margin-top: 48px;
    }

    .oa-signup-form-panel {
        padding: 36px 30px;
    }
}


@media (max-width: 767.98px) {
    .oa-signup-main {
        padding-top: 22px;
    }

    .oa-signup-shell {
        display: block;

        max-width: 600px;
        min-height: 0;
    }

    .oa-signup-brand-panel {
        display: none;
    }

    .oa-signup-form-panel {
        padding: 30px 27px;
    }
}


@media (max-width: 575.98px) {
    .oa-signup-form-panel {
        padding: 27px 20px;
    }

    .oa-signup-fields-row {
        grid-template-columns: 1fr;
    }

    .oa-signup-password-rules {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .oa-signup-password-rules-title {
        margin-bottom: 2px;
    }

    .oa-signup-login-link {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   SMARTCLASS AUTH — FORGOT PASSWORD
========================================================= */

.oa-forgot-password-main {
    padding-top: 25px;
}


.oa-forgot-password-shell {
    grid-template-columns:
        minmax(340px, 0.88fr)
        minmax(410px, 0.82fr);

    max-width: 980px;
    min-height: 590px;
}


.oa-forgot-password-brand {
    padding: 39px 41px;
}


.oa-forgot-password-brand-copy {
    margin-top: 65px;
}


.oa-forgot-password-form-panel {
    padding: 45px 49px;
}


.oa-forgot-password-icon {
    display: grid;

    width: 63px;
    height: 63px;
    margin-bottom: 19px;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.28),
            rgba(162, 222, 208, 0.12)
        );

    color: var(--tamno-zelena, #016560);

    box-shadow:
        0 8px 20px rgba(4, 100, 99, 0.1);
}


.oa-forgot-password-icon .material-icons {
    margin: 0;
    font-size: 1.8rem;
}


.oa-forgot-password-heading {
    margin-bottom: 24px;
}


.oa-forgot-password-field-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 8px;
}


.oa-forgot-password-field-note .material-icons {
    flex: 0 0 auto;

    margin: 1px 0 0;

    color: #a97620;
    font-size: 0.98rem;
}


.oa-forgot-password-field-note p {
    margin: 0;

    color: #7a6e53;

    font-size: 0.61rem;
    line-height: 1.5;
}


.oa-forgot-password-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    align-self: center;

    margin-top: 19px;

    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    text-decoration: none;
}


.oa-forgot-password-back:hover {
    color: #034b48;
    text-decoration: underline;
}


.oa-forgot-password-back .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-forgot-password-security {
    align-items: flex-start;

    max-width: 390px;
    margin-top: 25px;

    line-height: 1.5;
    text-align: center;
}


@media (max-width: 767.98px) {
    .oa-forgot-password-shell {
        display: block;

        max-width: 540px;
        min-height: 0;
    }

    .oa-forgot-password-brand {
        display: none;
    }

    .oa-forgot-password-form-panel {
        padding: 31px 28px;
    }

    .oa-forgot-password-icon {
        width: 56px;
        height: 56px;
    }
}


@media (max-width: 575.98px) {
    .oa-forgot-password-form-panel {
        padding: 27px 20px;
    }

    .oa-forgot-password-icon {
        margin-bottom: 16px;
    }
}

/* =========================================================
   SMARTCLASS AUTH — RESET PASSWORD
========================================================= */

.oa-reset-password-main {
    padding-top: 24px;
}


.oa-reset-password-shell {
    grid-template-columns:
        minmax(340px, 0.84fr)
        minmax(440px, 0.9fr);

    max-width: 1020px;
    min-height: 650px;
}


.oa-reset-password-brand {
    padding: 40px 42px;
}


.oa-reset-password-brand-copy {
    margin-top: 66px;
}


.oa-reset-password-form-panel {
    padding: 42px 49px;
}


.oa-reset-password-icon {
    display: grid;

    width: 63px;
    height: 63px;
    margin-bottom: 18px;

    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(162, 222, 208, 0.28),
            rgba(162, 222, 208, 0.11)
        );

    color: var(--tamno-zelena, #016560);

    box-shadow:
        0 8px 20px rgba(4, 100, 99, 0.1);
}


.oa-reset-password-icon .material-icons {
    margin: 0;
    font-size: 1.8rem;
}


.oa-reset-password-heading {
    margin-bottom: 23px;
}


.oa-reset-password-form {
    gap: 17px;
}


.oa-reset-password-form
.oa-auth-field > label {
    margin-bottom: 7px;
}


.oa-reset-password-match {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 8px;
    padding: 8px 10px;

    border-radius: 9px;

    font-size: 0.61rem;
    font-weight: 600;
}


.oa-reset-password-match[hidden] {
    display: none !important;
}


.oa-reset-password-match .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-reset-match-valid {
    border: 1px solid rgba(48, 169, 129, 0.16);

    background: rgba(48, 169, 129, 0.08);
    color: #247b61;
}


.oa-reset-match-invalid {
    border: 1px solid rgba(205, 71, 82, 0.16);

    background: rgba(205, 71, 82, 0.07);
    color: #a33f48;
}


.oa-reset-password-request-link {
    text-decoration: none;
}


.oa-reset-password-request-link:hover {
    color: #ffffff;
}


.oa-reset-password-security {
    align-items: flex-start;

    max-width: 390px;
    margin-top: 24px;

    line-height: 1.5;
    text-align: center;
}


.oa-reset-password-form.was-validated
.form-control:invalid {
    border-color: rgba(205, 71, 82, 0.52);

    background-color: rgba(205, 71, 82, 0.025);

    box-shadow:
        0 0 0 4px rgba(205, 71, 82, 0.06);
}


.oa-reset-password-form.was-validated
.form-control:valid {
    border-color: rgba(48, 169, 129, 0.35);
}


@media (max-width: 767.98px) {
    .oa-reset-password-shell {
        display: block;

        max-width: 560px;
        min-height: 0;
    }

    .oa-reset-password-brand {
        display: none;
    }

    .oa-reset-password-form-panel {
        padding: 31px 28px;
    }

    .oa-reset-password-icon {
        width: 56px;
        height: 56px;
    }
}


@media (max-width: 575.98px) {
    .oa-reset-password-form-panel {
        padding: 27px 20px;
    }

    .oa-reset-password-icon {
        margin-bottom: 16px;
    }
}

/* =========================================================
   SMARTCLASS AUTH — ACCOUNT VERIFICATION
========================================================= */

.oa-verify-main {
    padding-top: 25px;
}


.oa-verify-shell {
    grid-template-columns:
        minmax(340px, 0.88fr)
        minmax(410px, 0.82fr);

    max-width: 960px;
    min-height: 580px;
}


.oa-verify-brand-panel {
    padding: 39px 41px;
}


.oa-verify-brand-copy {
    margin-top: 64px;
}


.oa-verify-status-panel {
    align-items: center;

    padding: 45px 49px;

    text-align: center;
}


.oa-verify-status {
    display: flex;
    align-items: center;
    flex-direction: column;

    width: 100%;
}


.oa-verify-status-label {
    display: block;

    margin-bottom: 16px;

    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.oa-verify-icon {
    display: grid;

    width: 82px;
    height: 82px;
    margin-bottom: 21px;

    place-items: center;

    border-radius: 24px;

    box-shadow:
        0 11px 26px rgba(22, 57, 71, 0.12);
}


.oa-verify-icon .material-icons {
    margin: 0;
    font-size: 2.45rem;
}


.oa-verify-icon-success {
    border: 1px solid rgba(48, 169, 129, 0.17);

    background:
        linear-gradient(
            135deg,
            rgba(48, 183, 145, 0.2),
            rgba(162, 222, 208, 0.15)
        );

    color: #238368;
}


.oa-verify-icon-error {
    border: 1px solid rgba(205, 71, 82, 0.16);

    background:
        linear-gradient(
            135deg,
            rgba(205, 71, 82, 0.14),
            rgba(255, 180, 28, 0.08)
        );

    color: #b24851;
}


.oa-verify-status h2 {
    margin: 0 0 11px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
}


.oa-verify-status-message {
    margin: 0;

    color: #405158;

    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.6;
}


.oa-verify-support-text {
    max-width: 400px;
    margin: 10px 0 0;

    color: #718087;

    font-size: 0.69rem;
    line-height: 1.65;
}


.oa-verify-login-button {
    max-width: 330px;
    margin-top: 25px;

    text-decoration: none;
}


.oa-verify-login-button:hover {
    color: #ffffff;
}


.oa-verify-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    margin-top: 17px;

    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.63rem;
    font-weight: 700;
    text-decoration: none;
}


.oa-verify-home-link:hover {
    color: #034b48;
    text-decoration: underline;
}


.oa-verify-home-link .material-icons {
    margin: 0;
    font-size: 0.95rem;
}


.oa-verify-security {
    align-items: flex-start;

    max-width: 390px;
    margin-top: 28px;

    line-height: 1.5;
    text-align: center;
}


@media (max-width: 767.98px) {
    .oa-verify-shell {
        display: block;

        max-width: 540px;
        min-height: 0;
    }

    .oa-verify-brand-panel {
        display: none;
    }

    .oa-verify-status-panel {
        padding: 32px 28px;
    }

    .oa-verify-status-panel
    .oa-auth-mobile-logo {
        align-self: flex-start;
        width: 100%;

        text-align: left;
    }

    .oa-verify-icon {
        width: 72px;
        height: 72px;
    }

    .oa-verify-icon .material-icons {
        font-size: 2.15rem;
    }
}


@media (max-width: 575.98px) {
    .oa-verify-status-panel {
        padding: 27px 20px;
    }

    .oa-verify-status h2 {
        font-size: 1.3rem;
    }

    .oa-verify-login-button {
        max-width: none;
    }
}

.oa-auth-password-toggle {
    z-index: 10 !important;
    pointer-events: auto !important;
}

.oa-auth-password-toggle .material-icons {
    pointer-events: none;
}

/* =========================================================
   SMARTCLASS COURSE STATUS PAGES
========================================================= */

body.oa-course-status-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(162, 222, 208, 0.2),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 180, 28, 0.08),
            transparent 25%
        ),
        #edf3f1;

    color: #172126;
}


.oa-course-status-main {
    display: flex;
    align-items: center;

    min-height: calc(100vh - 90px);
    padding: 45px 0 70px;
}


.oa-course-status-card {
    position: relative;

    overflow: hidden;

    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 45px 52px;

    border: 1px solid rgba(4, 100, 99, 0.14);
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(246, 251, 249, 0.98)
        );

    text-align: center;

    box-shadow:
        0 24px 60px rgba(22, 57, 71, 0.14);
}


.oa-course-status-card::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 6px;
}


.oa-course-status-card-warning::before {
    background:
        linear-gradient(
            90deg,
            #ffb41c,
            #fd9435
        );
}


.oa-course-status-card-danger::before {
    background:
        linear-gradient(
            90deg,
            #d95a63,
            #f08b69
        );
}


.oa-course-status-decoration {
    position: absolute;
    top: -55px;
    right: -45px;

    display: grid;

    width: 175px;
    height: 175px;

    place-items: center;

    border-radius: 50%;

    background: rgba(162, 222, 208, 0.1);
    color: rgba(1, 101, 96, 0.08);

    transform: rotate(12deg);
}


.oa-course-status-decoration .material-icons {
    margin: 0;
    font-size: 6rem;
}


.oa-course-status-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-direction: column;
}


.oa-course-status-eyebrow {
    display: block;

    margin-bottom: 19px;

    color: var(--tamno-zelena, #016560);

    font-family: "Montserrat", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.oa-course-status-icon {
    display: grid;

    width: 88px;
    height: 88px;
    margin-bottom: 18px;

    place-items: center;

    border-radius: 25px;

    box-shadow:
        0 12px 28px rgba(22, 57, 71, 0.12);
}


.oa-course-status-icon .material-icons {
    margin: 0;
    font-size: 2.6rem;
}


.oa-course-status-card-warning
.oa-course-status-icon {
    border:
        1px solid rgba(255, 180, 28, 0.22);

    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 28, 0.2),
            rgba(253, 148, 53, 0.11)
        );

    color: #b8730d;
}


.oa-course-status-card-danger
.oa-course-status-icon {
    border:
        1px solid rgba(217, 90, 99, 0.19);

    background:
        linear-gradient(
            135deg,
            rgba(217, 90, 99, 0.16),
            rgba(240, 139, 105, 0.09)
        );

    color: #b44b54;
}


.oa-course-status-reference {
    display: inline-flex;

    margin-bottom: 9px;
    padding: 4px 9px;

    border-radius: 999px;

    background: rgba(162, 222, 208, 0.16);
    color: var(--tamno-zelena, #016560);

    font-size: 0.58rem;
    font-weight: 700;
}


.oa-course-status-card h1 {
    margin: 0 0 13px;

    color: #172126;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
}


.oa-course-status-primary-text {
    max-width: 600px;
    margin: 0;

    color: #405158;

    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.65;
}


.oa-course-status-secondary-text {
    max-width: 590px;
    margin: 8px 0 0;

    color: #718087;

    font-size: 0.7rem;
    line-height: 1.65;
}


.oa-course-status-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 27px;
}


.oa-course-status-actions .oa-btn {
    min-width: 175px;
}


.oa-course-status-help {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    width: 100%;
    max-width: 590px;
    margin-top: 30px;
    padding: 15px 16px;

    border: 1px solid rgba(4, 100, 99, 0.1);
    border-radius: 14px;

    background: #f6faf8;

    text-align: left;
}


.oa-course-status-help-icon {
    display: grid;
    flex: 0 0 37px;

    width: 37px;
    height: 37px;

    place-items: center;

    border-radius: 11px;

    background: rgba(162, 222, 208, 0.2);
    color: var(--tamno-zelena, #016560);
}


.oa-course-status-card-warning
.oa-course-status-help-icon {
    background: rgba(255, 180, 28, 0.13);
    color: #a86b0b;
}


.oa-course-status-card-danger
.oa-course-status-help-icon {
    background: rgba(217, 90, 99, 0.1);
    color: #ad4b53;
}


.oa-course-status-help-icon .material-icons {
    margin: 0;
    font-size: 1.1rem;
}


.oa-course-status-help > div {
    display: flex;
    flex-direction: column;
}


.oa-course-status-help strong {
    color: #304149;

    font-family: "Montserrat", sans-serif;
    font-size: 0.69rem;
}


.oa-course-status-help p {
    margin: 4px 0 0;

    color: #718087;

    font-size: 0.65rem;
    line-height: 1.55;
}


@media (max-width: 767.98px) {
    .oa-course-status-main {
        align-items: flex-start;

        min-height: auto;
        padding: 28px 0 55px;
    }

    .oa-course-status-card {
        padding: 38px 27px;

        border-radius: 21px;
    }

    .oa-course-status-decoration {
        width: 145px;
        height: 145px;
    }

    .oa-course-status-icon {
        width: 76px;
        height: 76px;
    }

    .oa-course-status-icon .material-icons {
        font-size: 2.25rem;
    }
}


@media (max-width: 575.98px) {
    .oa-course-status-card {
        padding: 34px 19px;
    }

    .oa-course-status-actions {
        width: 100%;
    }

    .oa-course-status-actions .oa-btn {
        width: 100%;
    }

    .oa-course-status-help {
        padding: 13px;
    }
}

/* =========================================================
   HOMEWORK — GROUPS BY COURSE
========================================================= */

.oa-homework-course-list {
    display: grid;
    gap: 28px;
}

.oa-homework-course-group {
    padding: 20px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}

.oa-homework-course-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(1, 101, 96, 0.12);
}

.oa-homework-course-group-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.oa-homework-course-group-title .material-icons {
    color: #016560;
    font-size: 25px;
}

.oa-homework-course-group-title h3 {
    margin: 0;
    color: #016560;
    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.oa-homework-course-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
    font-weight: 700;
}

@media (max-width: 576px) {
    .oa-homework-course-group {
        padding: 15px;
        border-radius: 16px;
    }

    .oa-homework-course-group-header {
        margin-bottom: 15px;
    }

    .oa-homework-course-group-title h3 {
        font-size: 0.98rem;
    }
}

/* =========================================================
   HOMEWORK — SUBMISSION PREVIEW
========================================================= */

.oa-homework-submission-preview {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 16px;
    background: rgba(1, 101, 96, 0.035);
}

.oa-homework-submission-preview-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #016560;
}

.oa-homework-submission-preview-title .material-icons {
    font-size: 21px;
}

.oa-homework-submission-text {
    margin-bottom: 14px;
}

.oa-homework-submission-text > span {
    display: block;
    margin-bottom: 6px;
    color: #6a7574;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oa-homework-submission-text > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    color: #263331;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.oa-homework-submission-links {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}

.oa-homework-submission-links .oa-btn {
    max-width: 100%;
}

.oa-homework-submission-links .oa-btn small {
    display: block;
    max-width: 260px;
    margin-top: 2px;
    overflow: hidden;
    color: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-homework-history-attachments {
    margin-top: 16px;
}

@media (max-width: 576px) {
    .oa-homework-submission-links {
        flex-direction: column;
    }

    .oa-homework-submission-links .oa-btn {
        width: 100%;
        justify-content: center;
    }

    .oa-homework-submission-links .oa-btn small {
        max-width: 190px;
    }
}

/* =========================================================
   PROFESSOR — STUDENT HOMEWORK SUBMISSION
========================================================= */

.oa-student-homework-submitted-at {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: #718087;
    font-size: 0.84rem;
}

.oa-student-homework-submitted-at .material-icons {
    color: #016560;
    font-size: 18px;
}

.oa-student-homework-written-answer {
    margin-bottom: 15px;
}

.oa-student-homework-written-answer > small {
    display: block;
    margin-bottom: 7px;
    color: #718087;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.oa-student-homework-written-answer > div {
    padding: 14px 16px;
    border: 1px solid rgba(1, 101, 96, 0.12);
    border-radius: 13px;
    background: #ffffff;
    color: #263331;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.oa-student-homework-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.oa-student-homework-attachments .oa-btn {
    max-width: 100%;
}

.oa-student-homework-attachments .oa-btn small {
    display: block;
    max-width: 280px;
    margin-top: 2px;
    overflow: hidden;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-student-homework-feedback {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(1, 101, 96, 0.15);
    border-left: 4px solid #016560;
    border-radius: 14px;
    background: rgba(1, 101, 96, 0.045);
}

.oa-student-homework-feedback-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #016560;
}

.oa-student-homework-feedback-heading .material-icons {
    font-size: 20px;
}

.oa-student-homework-feedback > div:not(
    .oa-student-homework-feedback-heading
) {
    color: #34413f;
    line-height: 1.6;
}

.oa-student-homework-feedback > small {
    display: block;
    margin-top: 10px;
    color: #718087;
}

@media (max-width: 576px) {
    .oa-student-homework-attachments {
        flex-direction: column;
    }

    .oa-student-homework-attachments .oa-btn {
        width: 100%;
        justify-content: center;
    }

    .oa-student-homework-attachments .oa-btn small {
        max-width: 190px;
    }
}

/* =========================================================
   PROFESSOR — MANUAL HOMEWORK REVIEW
========================================================= */

.oa-student-homework-review {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 180, 28, 0.35);
    border-radius: 18px;
    background: rgba(255, 180, 28, 0.055);
}

.oa-student-homework-review-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
}

.oa-student-homework-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255, 180, 28, 0.16);
    color: #ad7200;
}

.oa-student-homework-review-heading > div > span {
    display: block;
    margin-bottom: 3px;
    color: #ad7200;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.oa-student-homework-review-heading h3 {
    margin: 0 0 4px;
    color: #293735;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.oa-student-homework-review-heading p {
    margin: 0;
    color: #718087;
    font-size: 0.86rem;
}

.oa-student-homework-review-current,
.oa-student-homework-review-pending {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.8);
}

.oa-student-homework-review-current > .material-icons {
    color: #016560;
    font-size: 25px;
}

.oa-student-homework-review-current div {
    display: grid;
    gap: 2px;
}

.oa-student-homework-review-current span,
.oa-student-homework-review-current small {
    color: #718087;
    font-size: 0.76rem;
}

.oa-student-homework-review-current strong {
    color: #293735;
}

.oa-student-homework-review-pending {
    color: #ad7200;
    font-weight: 600;
}

.oa-student-homework-review-pending .material-icons {
    font-size: 21px;
}

.oa-student-homework-review-field label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 8px;
    color: #293735;
    font-weight: 700;
}

.oa-student-homework-review-field label small {
    color: #879391;
    font-size: 0.75rem;
    font-weight: 400;
}

.oa-student-homework-review-field textarea {
    min-height: 110px;
    resize: vertical;
}

.oa-student-homework-review-help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #718087;
    font-size: 0.78rem;
}

.oa-student-homework-review-help .material-icons {
    font-size: 17px;
}

.oa-student-homework-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.oa-student-homework-review-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 10px 16px;
    border: 2px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.oa-student-homework-review-button:hover {
    transform: translateY(-1px);
}

.oa-student-homework-review-button .material-icons {
    font-size: 23px;
}

.oa-student-homework-review-button span:last-child {
    display: grid;
    text-align: left;
    line-height: 1.15;
}

.oa-student-homework-review-button span:last-child {
    font-size: 0.72rem;
}

.oa-student-homework-review-button strong {
    font-size: 0.9rem;
}

.oa-student-review-correct {
    background: rgba(48, 183, 145, 0.11);
    color: #14775d;
}

.oa-student-review-correct:hover,
.oa-student-review-correct.is-selected {
    border-color: #30b791;
    box-shadow: 0 7px 18px rgba(48, 183, 145, 0.16);
}

.oa-student-review-incorrect {
    background: rgba(231, 111, 112, 0.11);
    color: #a83f43;
}

.oa-student-review-incorrect:hover,
.oa-student-review-incorrect.is-selected {
    border-color: #e76f70;
    box-shadow: 0 7px 18px rgba(231, 111, 112, 0.15);
}

.oa-student-homework-review-submit-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 11px 0 0;
    color: #718087;
    font-size: 0.75rem;
    text-align: center;
}

.oa-student-homework-review-submit-note .material-icons {
    font-size: 16px;
}

@media (max-width: 576px) {
    .oa-student-homework-review {
        padding: 16px;
    }

    .oa-student-homework-review-actions {
        grid-template-columns: 1fr;
    }

    .oa-student-homework-review-button {
        width: 100%;
    }
}

/* =========================================================
   PROFESSOR — HOMEWORK TASK SUBMISSIONS
========================================================= */

.oa-homework-task-submissions-main {
    padding: 34px 0 70px;
}

.oa-task-submissions-hero,
.oa-task-submissions-context,
.oa-task-submissions-question,
.oa-task-submissions-panel {
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(26, 53, 50, 0.055);
}

.oa-task-submissions-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px;
    margin-bottom: 22px;
}

.oa-task-submissions-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.oa-task-submissions-hero-icon,
.oa-task-submissions-context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-task-submissions-kicker {
    display: block;
    margin-bottom: 4px;
    color: #016560;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.oa-task-submissions-heading h1 {
    margin: 0 0 5px;
    color: #263331;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
}

.oa-task-submissions-heading p {
    margin: 0;
    color: #718087;
}

.oa-task-submissions-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.oa-task-submissions-alert {
    margin-bottom: 20px;
}

.oa-task-submissions-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
    margin-bottom: 20px;
}

.oa-task-submissions-course,
.oa-task-submissions-deadline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oa-task-submissions-course > div > span,
.oa-task-submissions-deadline > div > span {
    display: block;
    color: #718087;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.oa-task-submissions-course h2,
.oa-task-submissions-deadline h2 {
    margin: 3px 0 5px;
    color: #263331;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.oa-task-submissions-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #718087;
    font-size: 0.8rem;
}

.oa-task-submissions-course-meta > span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oa-task-submissions-course-meta .material-icons {
    font-size: 16px;
}

.oa-task-submissions-deadline small {
    color: #718087;
}

.oa-task-submissions-question {
    padding: 22px;
    margin-bottom: 20px;
}

.oa-task-submissions-question header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.oa-task-submissions-question header > span {
    color: #718087;
    font-size: 0.8rem;
    font-weight: 700;
}

.oa-task-submissions-question header strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.76rem;
}

.oa-task-submissions-question header .material-icons {
    font-size: 18px;
}

.oa-task-review-manual {
    background: rgba(255, 180, 28, 0.13);
    color: #a76f00;
}

.oa-task-review-automatic {
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-task-submissions-question > div {
    color: #263331;
    line-height: 1.7;
}

.oa-task-submissions-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.oa-task-submissions-stats article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 16px;
    background: #ffffff;
}

.oa-task-submissions-stats article > .material-icons {
    color: #016560;
    font-size: 25px;
}

.oa-task-submissions-stats article div {
    display: grid;
}

.oa-task-submissions-stats article span:not(
    .material-icons
) {
    color: #718087;
    font-size: 0.75rem;
}

.oa-task-submissions-stats article strong {
    color: #263331;
    font-size: 1.35rem;
}

.oa-task-submissions-stats article small {
    color: #718087;
}

.oa-task-stat-correct > .material-icons {
    color: #30b791 !important;
}

.oa-task-stat-incorrect > .material-icons {
    color: #e76f70 !important;
}

.oa-task-stat-pending > .material-icons {
    color: #ffb41c !important;
}

.oa-task-submissions-accuracy {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 15px;
    background: rgba(1, 101, 96, 0.055);
}

.oa-task-submissions-accuracy > span {
    color: #718087;
}

.oa-task-submissions-accuracy > strong {
    color: #016560;
}

.oa-task-submissions-accuracy > div {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(1, 101, 96, 0.12);
}

.oa-task-submissions-accuracy > div > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #30b791;
}

.oa-task-submissions-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(200px, 260px) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.oa-task-submissions-search,
.oa-task-submissions-filter {
    position: relative;
}

.oa-task-submissions-search > .material-icons,
.oa-task-submissions-filter > .material-icons {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: #718087;
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.oa-task-submissions-search input,
.oa-task-submissions-filter select {
    padding-left: 42px;
}

#taskSubmissionsResultCount {
    color: #718087;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.oa-task-submissions-panel {
    overflow: hidden;
}

.oa-task-submissions-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 21px 23px;
    border-bottom: 1px solid rgba(1, 101, 96, 0.09);
}

.oa-task-submissions-panel-header > .material-icons {
    color: #016560;
    font-size: 29px;
}

.oa-task-submissions-panel-header > div > span {
    display: block;
    color: #016560;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.oa-task-submissions-panel-header h2 {
    margin: 3px 0;
    color: #263331;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.oa-task-submissions-panel-header p {
    margin: 0;
    color: #718087;
    font-size: 0.85rem;
}

.oa-task-submissions-list {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.oa-task-submission-card {
    padding: 19px;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 17px;
    background: #fbfdfd;
    scroll-margin-top: 20px;
}

.oa-task-submission-student {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.oa-task-submission-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.oa-task-submission-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: #016560;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
}

.oa-task-submission-person h3 {
    margin: 0 0 3px;
    color: #263331;
    font-family: "Montserrat", sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
}

.oa-task-submission-person a {
    color: #718087;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.oa-task-submission-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.oa-task-submission-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.oa-task-submission-status .material-icons {
    font-size: 17px;
}

.oa-task-submission-status-correct {
    background: rgba(48, 183, 145, 0.12);
    color: #167b61;
}

.oa-task-submission-status-incorrect {
    background: rgba(231, 111, 112, 0.12);
    color: #a84246;
}

.oa-task-submission-status-pending {
    background: rgba(255, 180, 28, 0.14);
    color: #9e6900;
}

.oa-task-submission-status-not-submitted {
    background: rgba(170, 183, 187, 0.18);
    color: #657376;
}

.oa-task-submission-time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: #718087;
    font-size: 0.8rem;
}

.oa-task-submission-time .material-icons {
    color: #016560;
    font-size: 17px;
}

.oa-task-submission-answer > span {
    display: block;
    margin-bottom: 9px;
    color: #718087;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.oa-task-submission-answer-text > small {
    display: block;
    margin-bottom: 6px;
    color: #718087;
    font-size: 0.74rem;
}

.oa-task-submission-answer-text > div {
    padding: 14px 16px;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 13px;
    background: #ffffff;
    color: #263331;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.oa-task-submission-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 13px;
}

.oa-task-submission-attachments .oa-btn small {
    display: block;
    max-width: 260px;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oa-task-submission-no-content,
.oa-task-submission-missing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 13px;
    background: rgba(170, 183, 187, 0.1);
    color: #657376;
}

.oa-task-submission-missing p {
    margin: 3px 0 0;
    font-size: 0.82rem;
}

.oa-task-submission-review {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid rgba(255, 180, 28, 0.32);
    border-radius: 15px;
    background: rgba(255, 180, 28, 0.055);
}

.oa-task-submission-review > header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    color: #a26b00;
}

.oa-task-submission-review > header > div > span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.oa-task-submission-review h4 {
    margin: 2px 0 0;
    color: #263331;
    font-size: 0.95rem;
    font-weight: 700;
}

.oa-task-submission-current-review {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
}

.oa-task-submission-current-review > .material-icons {
    color: #016560;
}

.oa-task-submission-current-review div {
    display: grid;
}

.oa-task-submission-current-review span,
.oa-task-submission-current-review small {
    color: #718087;
    font-size: 0.73rem;
}

.oa-task-submission-review-form label {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 7px;
    color: #263331;
    font-weight: 700;
}

.oa-task-submission-review-form label small {
    color: #718087;
    font-size: 0.72rem;
    font-weight: 400;
}

.oa-task-submission-review-form textarea {
    resize: vertical;
}

.oa-task-submission-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.oa-task-review-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.oa-task-review-button .material-icons {
    font-size: 20px;
}

.oa-task-review-correct {
    background: rgba(48, 183, 145, 0.12);
    color: #167b61;
}

.oa-task-review-correct:hover,
.oa-task-review-correct.is-selected {
    border-color: #30b791;
}

.oa-task-review-incorrect {
    background: rgba(231, 111, 112, 0.12);
    color: #a84246;
}

.oa-task-review-incorrect:hover,
.oa-task-review-incorrect.is-selected {
    border-color: #e76f70;
}

.oa-task-submission-feedback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
    padding: 14px;
    border-left: 4px solid #016560;
    border-radius: 12px;
    background: rgba(1, 101, 96, 0.055);
}

.oa-task-submission-feedback > .material-icons {
    color: #016560;
}

.oa-task-submission-feedback p {
    margin: 5px 0 0;
    color: #34413f;
}

.oa-task-submissions-empty-search {
    padding: 45px 20px;
    text-align: center;
}

.oa-task-submissions-empty-search > .material-icons {
    color: #aab7bb;
    font-size: 43px;
}

.oa-task-submissions-empty-search h3 {
    margin: 10px 0 5px;
    color: #263331;
    font-size: 1rem;
}

.oa-task-submissions-empty-search p {
    margin: 0;
    color: #718087;
}

@media (max-width: 992px) {
    .oa-task-submissions-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .oa-task-submissions-hero,
    .oa-task-submission-student {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-task-submissions-context {
        grid-template-columns: 1fr;
    }

    .oa-task-submissions-toolbar {
        grid-template-columns: 1fr;
    }

    .oa-task-submission-header-actions {
        justify-content: flex-start;
    }

    .oa-task-submissions-accuracy {
        grid-template-columns: auto auto;
    }

    .oa-task-submissions-accuracy > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .oa-homework-task-submissions-main {
        padding-top: 20px;
    }

    .oa-task-submissions-hero,
    .oa-task-submissions-context,
    .oa-task-submissions-question {
        padding: 17px;
    }

    .oa-task-submissions-heading {
        align-items: flex-start;
    }

    .oa-task-submissions-hero-actions,
    .oa-task-submissions-hero-actions .oa-btn {
        width: 100%;
    }

    .oa-task-submissions-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oa-task-submissions-list {
        padding: 13px;
    }

    .oa-task-submission-card {
        padding: 15px;
    }

    .oa-task-submission-attachments,
    .oa-task-submission-attachments .oa-btn {
        width: 100%;
    }

    .oa-task-submission-review-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HOMEWORK OVERVIEW — TASK ACTIONS
========================================================= */

.oa-homework-overview-task-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
}

.oa-homework-overview-task-action-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.oa-homework-overview-task-action-info > .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(1, 101, 96, 0.08);
    color: #016560;
    font-size: 21px;
}

.oa-homework-overview-task-action-info > div {
    display: grid;
    min-width: 0;
}

.oa-homework-overview-task-action-info strong {
    color: #263331;
    font-size: 0.86rem;
}

.oa-homework-overview-task-action-info small {
    margin-top: 2px;
    color: #718087;
    font-size: 0.76rem;
}

.oa-homework-overview-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    margin-left: 3px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 700;
}

.oa-btn-soft .oa-homework-overview-review-badge {
    background: rgba(255, 180, 28, 0.16);
    color: #9e6900;
}

@media (max-width: 650px) {
    .oa-homework-overview-task-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-homework-overview-task-actions .oa-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   STUDENT HOMEWORK — REVIEW RESULT AND FEEDBACK
========================================================= */

.oa-homework-submission-result {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 14px;
}

.oa-homework-submission-result > .material-icons {
    font-size: 25px;
}

.oa-homework-submission-result > div {
    display: grid;
    gap: 2px;
}

.oa-homework-submission-result small {
    color: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
}

.oa-homework-submission-result strong {
    color: inherit;
    font-size: 0.9rem;
}

.oa-homework-submission-result span:not(
    .material-icons
) {
    margin-top: 2px;
    color: inherit;
    font-size: 0.75rem;
    opacity: 0.75;
}

.oa-homework-submission-result-pending {
    background: rgba(255, 180, 28, 0.13);
    color: #9d6800;
}

.oa-homework-submission-result-correct {
    background: rgba(48, 183, 145, 0.12);
    color: #14775d;
}

.oa-homework-submission-result-incorrect {
    background: rgba(231, 111, 112, 0.12);
    color: #a83f43;
}

.oa-homework-result-review {
    background: rgba(255, 180, 28, 0.14);
    color: #9d6800;
}

.oa-homework-professor-feedback {
    margin-top: 16px;
    padding: 15px 17px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-left: 4px solid #016560;
    border-radius: 14px;
    background: rgba(1, 101, 96, 0.045);
}

.oa-homework-professor-feedback header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #016560;
}

.oa-homework-professor-feedback header .material-icons {
    font-size: 20px;
}

.oa-homework-professor-feedback > div {
    color: #34413f;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.oa-homework-professor-feedback > div em {
    color: #718087;
}

.oa-homework-professor-feedback > small {
    display: block;
    margin-top: 9px;
    color: #718087;
    font-size: 0.75rem;
}

/* =========================================================
   ASSIGN HOMEWORK — OPTIONAL LIBRARY MATERIAL
========================================================= */

.oa-professor-homework-library {
    margin-top: 16px;
    padding: 17px;
    border: 1px solid rgba(1, 101, 96, 0.13);
    border-radius: 15px;
    background: rgba(1, 101, 96, 0.035);
}

.oa-professor-homework-library-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.oa-professor-homework-library-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-professor-homework-library-heading > div > span {
    display: block;
    color: #016560;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.oa-professor-homework-library-heading h4 {
    margin: 2px 0 4px;
    color: #263331;
    font-family: "Montserrat", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
}

.oa-professor-homework-library-heading p {
    margin: 0;
    color: #718087;
    font-size: 0.8rem;
    line-height: 1.5;
}

.oa-professor-homework-library-toggle,
.oa-professor-homework-library-video-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    cursor: pointer;
}

.oa-professor-homework-library-toggle input,
.oa-professor-homework-library-video-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.oa-professor-homework-library-switch {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #bdc9c8;
    transition: background 0.2s ease;
}

.oa-professor-homework-library-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(25, 45, 43, 0.2);
    transition: transform 0.2s ease;
}

.oa-professor-homework-library-toggle input:checked
+ .oa-professor-homework-library-switch,
.oa-professor-homework-library-video-toggle input:checked
+ .oa-professor-homework-library-switch {
    background: #016560;
}

.oa-professor-homework-library-toggle input:checked
+ .oa-professor-homework-library-switch::after,
.oa-professor-homework-library-video-toggle input:checked
+ .oa-professor-homework-library-switch::after {
    transform: translateX(18px);
}

.oa-professor-homework-library-toggle > span:last-child {
    color: #34413f;
    font-size: 0.82rem;
    font-weight: 600;
}

.oa-professor-homework-library-fields {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
}

.oa-professor-homework-library-fields[hidden] {
    display: none;
}

.oa-professor-homework-library-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 13px;
}

.oa-professor-homework-library-video-toggle > span:last-child {
    display: grid;
}

.oa-professor-homework-library-video-toggle strong {
    color: #263331;
    font-size: 0.82rem;
}

.oa-professor-homework-library-video-toggle small {
    color: #718087;
    font-size: 0.73rem;
}

.oa-professor-homework-library-preview {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 180, 28, 0.1);
    color: #805600;
}

.oa-professor-homework-library-preview > .material-icons {
    font-size: 20px;
}

.oa-professor-homework-library-preview strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.78rem;
}

.oa-professor-homework-library-preview p {
    margin: 0;
    font-size: 0.77rem;
    line-height: 1.5;
}

.oa-professor-homework-library-existing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    color: #016560;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.oa-professor-homework-library-existing:hover {
    text-decoration: underline;
}

.oa-professor-homework-library-existing .material-icons {
    font-size: 17px;
}

@media (max-width: 700px) {
    .oa-professor-homework-library-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HOMEWORK — COURSE LINK
========================================================= */

.oa-homework-course-group-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oa-homework-open-course {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(1, 101, 96, 0.16);
    border-radius: 10px;
    background: rgba(1, 101, 96, 0.06);
    color: #016560;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.oa-homework-open-course:hover {
    border-color: rgba(1, 101, 96, 0.28);
    background: rgba(1, 101, 96, 0.11);
    color: #016560;
    transform: translateY(-1px);
}

.oa-homework-open-course .material-icons {
    font-size: 17px;
}

@media (max-width: 600px) {
    .oa-homework-course-group-header {
        align-items: flex-start;
        gap: 12px;
    }

    .oa-homework-course-group-actions {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 7px;
    }

    .oa-homework-open-course {
        padding: 7px 9px;
        font-size: 0.7rem;
    }
}

/* =========================================================
   PROFILE – LEGAL DOCUMENTS
========================================================= */

.oa-profile-legal-intro {
    margin: 0 0 18px;

    color: #687774;

    font-size: 0.86rem;
    line-height: 1.65;
}


.oa-profile-legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.oa-profile-legal-link {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    padding: 16px;

    border: 1px solid rgba(1, 101, 96, 0.13);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.045),
            rgba(255, 180, 28, 0.035)
        );

    color: #263331;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.oa-profile-legal-link:hover {
    border-color: rgba(1, 101, 96, 0.3);

    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.08),
            rgba(255, 180, 28, 0.055)
        );

    color: #263331;

    box-shadow:
        0 10px 26px rgba(29, 62, 58, 0.09);

    transform: translateY(-2px);
}


.oa-profile-legal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;
    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: #016560;
    color: #ffffff;
}


.oa-profile-legal-icon .material-icons {
    font-size: 22px;
}


.oa-profile-legal-copy {
    display: grid;
    flex: 1;
    gap: 3px;

    min-width: 0;
}


.oa-profile-legal-copy strong {
    overflow: hidden;

    color: #263331;

    font-family: "Montserrat", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.oa-profile-legal-copy small {
    color: #71807d;
    font-size: 0.72rem;
}


.oa-profile-legal-arrow {
    flex: 0 0 auto;

    color: #016560;
    font-size: 19px;

    transition: transform 0.2s ease;
}


.oa-profile-legal-link:hover .oa-profile-legal-arrow {
    transform: translate(2px, -2px);
}


/* Status prihvatanja */

.oa-profile-terms-status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 17px;
    padding: 12px 14px;

    border-radius: 12px;

    font-size: 0.76rem;
}


.oa-profile-terms-status > .material-icons {
    flex: 0 0 auto;
    font-size: 20px;
}


.oa-profile-terms-status > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}


.oa-profile-terms-status strong {
    font-weight: 700;
}


.oa-profile-terms-status.is-accepted {
    border: 1px solid rgba(26, 145, 86, 0.15);

    background: rgba(26, 145, 86, 0.075);
    color: #176e45;
}


.oa-profile-terms-status.is-not-accepted {
    border: 1px solid rgba(255, 180, 28, 0.22);

    background: rgba(255, 180, 28, 0.1);
    color: #7a570b;
}


@media (max-width: 767.98px) {
    .oa-profile-legal-grid {
        grid-template-columns: 1fr;
    }

    .oa-profile-legal-link {
        padding: 14px;
    }
}


/* =========================================================
   SMARTCLASS HEADER – CLEAN DARK GREEN
========================================================= */

.navbar-custom {
    position: relative;
    z-index: 100;

    min-height: 96px;
    padding: 8px 28px;

    border: 0;
    border-bottom: 3px solid #ffb41c;

    background: #073f3a;

    box-shadow:
        0 8px 24px rgba(20, 52, 49, 0.16);

    font-family: "Open Sans", sans-serif;
}


.navbar-custom .container-fluid {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   LOGO
========================================================= */

.navbar-custom .navbar-brand {
    margin-right: 38px;
    padding: 0;
}


.navbar-custom .logo {
    width: 78px !important;
    height: auto;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));

    transition:
        transform 0.2s ease;
}


.navbar-custom .navbar-brand:hover .logo {
    transform: translateY(-1px);
}


/* =========================================================
   GLAVNA NAVIGACIJA
========================================================= */

.navbar-custom .navbar-nav {
    align-items: center;
}


.navbar-custom .navbar-nav.me-auto {
    gap: 6px;
}


.navbar-custom .nav-item {
    position: relative;
}


.navbar-custom .nav-link-custom {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;
    padding: 9px 15px !important;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


.navbar-custom .nav-link-custom .material-icons {
    color: #ffb41c;

    font-size: 20px;
    line-height: 1;
}


.navbar-custom .navbar-nav.me-auto .nav-link-custom::after {
    position: absolute;
    right: 15px;
    bottom: 3px;
    left: 15px;

    height: 2px;

    border: 0;
    border-radius: 999px;

    background: #ffb41c;

    opacity: 0;

    content: "";

    transform: scaleX(0.35);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.navbar-custom .navbar-nav.me-auto .nav-link-custom:hover,
.navbar-custom .navbar-nav.me-auto .nav-link-custom:focus {
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff !important;
}


.navbar-custom .navbar-nav.me-auto .nav-link-custom:hover::after,
.navbar-custom .navbar-nav.me-auto .nav-link-custom:focus::after,
.navbar-custom .navbar-nav.me-auto .nav-link-custom.active::after,
.navbar-custom .navbar-nav.me-auto .nav-link-custom[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}


.navbar-custom .navbar-nav.me-auto .nav-link-custom.active,
.navbar-custom .navbar-nav.me-auto .nav-link-custom[aria-current="page"] {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff !important;
}


/* =========================================================
   DESNA STRANA – JEZIK I KORISNIK
========================================================= */

.navbar-custom .navbar-nav.ms-auto {
    align-items: center;
    gap: 10px;
}


.navbar-custom .navbar-nav.ms-auto > .nav-item {
    margin-right: 0 !important;
}


.navbar-custom .navbar-nav.ms-auto .nav-link-custom {
    min-height: 45px;
    padding: 8px 14px !important;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

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

    color: rgba(255, 255, 255, 0.94) !important;
}


.navbar-custom .navbar-nav.ms-auto .nav-link-custom:hover,
.navbar-custom .navbar-nav.ms-auto .nav-link-custom:focus,
.navbar-custom .navbar-nav.ms-auto .nav-link-custom.show {
    border-color: rgba(255, 180, 28, 0.45);

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

    color: #ffffff !important;
}


/* Jezik */

.navbar-custom .navbar-nav.ms-auto > .nav-item:first-child .nav-link-custom {
    min-width: 92px;
    justify-content: center;
}


/* Korisnik */

.navbar-custom #userDropdown {
    min-width: 160px;
    justify-content: flex-start;
}


.navbar-custom #userDropdown > .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;
    width: 31px;
    height: 31px;

    margin-right: 2px !important;

    border-radius: 50%;

    background: #ffb41c;
    color: #073f3a;

    font-size: 21px;
}


/* Bootstrap strelica */

.navbar-custom .dropdown-toggle::after {
    margin-left: 9px;

    border-top-color: rgba(255, 255, 255, 0.72);

    transition:
        transform 0.2s ease;
}


.navbar-custom .dropdown-toggle.show::after {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
========================================================= */

.navbar-custom .dropdown-menu {
    min-width: 215px;

    margin-top: 10px !important;
    padding: 7px;

    border: 1px solid rgba(7, 63, 58, 0.11);
    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 16px 38px rgba(24, 52, 49, 0.18);
}


.navbar-custom .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 43px;
    padding: 9px 11px;

    border-radius: 9px;

    color: #293735;

    font-size: 0.86rem;
    font-weight: 600;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}


.navbar-custom .dropdown-item .material-icons {
    color: #016560;

    font-size: 20px;
}


.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
    background: rgba(255, 180, 28, 0.16);
    color: #173b37;
}


.navbar-custom .dropdown-item.text-danger {
    color: #b94040 !important;
}


.navbar-custom .dropdown-item.text-danger .material-icons {
    color: #d04d47;
}


.navbar-custom .dropdown-item.text-danger:hover,
.navbar-custom .dropdown-item.text-danger:focus {
    background: rgba(208, 77, 71, 0.08);
    color: #a83434 !important;
}


.navbar-custom .dropdown-divider {
    margin: 6px 4px;

    border-color: rgba(7, 63, 58, 0.1);
}


/* =========================================================
   MOBILNI MENI
========================================================= */

.navbar-custom .navbar-toggler {
    padding: 8px 10px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;

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

    box-shadow: none;
}


.navbar-custom .navbar-toggler:focus {
    border-color: rgba(255, 180, 28, 0.55);

    box-shadow:
        0 0 0 3px rgba(255, 180, 28, 0.12);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .navbar-custom {
        min-height: 82px;
        padding: 7px 15px;
    }

    .navbar-custom .navbar-brand {
        margin-right: 0;
    }

    .navbar-custom .logo {
        width: 65px !important;
    }

    .navbar-custom .navbar-collapse {
        margin-top: 10px;
        padding: 12px;

        border-top: 1px solid rgba(255, 255, 255, 0.11);

        background: #073f3a;
    }

    .navbar-custom .navbar-nav {
        align-items: stretch;
        gap: 5px;
    }

    .navbar-custom .nav-item {
        width: 100%;
    }

    .navbar-custom .nav-link-custom,
    .navbar-custom .navbar-nav.ms-auto .nav-link-custom,
    .navbar-custom #userDropdown {
        justify-content: flex-start;

        width: 100%;
        min-width: 0;
    }

    .navbar-custom .navbar-nav.me-auto .nav-link-custom::after {
        display: none;
    }

    .navbar-custom .navbar-nav.ms-auto {
        margin-top: 10px;
        padding-top: 10px;

        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-custom .dropdown-menu {
        width: 100%;
        margin-top: 5px !important;

        box-shadow: none;
    }
}


@media (max-width: 575.98px) {
    .navbar-custom {
        padding-inline: 10px;
    }

    .navbar-custom .logo {
        width: 59px !important;
    }

    .navbar-custom .navbar-collapse {
        padding-inline: 5px;
    }

    .navbar-custom .nav-link-custom {
        min-height: 42px;
        padding: 8px 11px !important;

        font-size: 0.87rem;
    }
}

/* =========================================================
   HEADER – FINAL GREEN OVERRIDE
========================================================= */

nav.navbar.navbar-custom {
    background: #064b43 !important;
    background-color: #064b43 !important;
    background-image: none !important;

    border-bottom: 3px solid #ffb41c !important;

    box-shadow:
        0 8px 24px rgba(7, 63, 58, 0.2) !important;
}
nav.navbar.navbar-custom {
    background:
        linear-gradient(
            90deg,
            #063f39 0%,
            #07534a 52%,
            #063f39 100%
        ) !important;

    border-bottom: 2px solid rgba(255, 180, 28, 0.9) !important;

    box-shadow:
        0 8px 24px rgba(6, 63, 57, 0.2) !important;
}

/* Notes mora biti iznad platformskog headera */
.sc-notes-panel {
    z-index: 1070 !important;
}

.sc-notes-toggle-button {
    z-index: 1071 !important;
}


/* =========================================================
   SMARTCLASS COURSE PAGE
========================================================= */

body.sc-course-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 18% 8%,
            rgba(1, 101, 96, 0.045),
            transparent 32%
        ),
        #edf4f2;

    color: #253431;

    font-family: "Open Sans", sans-serif;
}


.sc-course-main {
    padding: 42px 0 72px;
}


.sc-course-container {
    width: min(1500px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.sc-course-hero {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(460px, 0.78fr);
    align-items: center;
    gap: 28px;

    margin-bottom: 24px;
    padding: 26px 30px;

    overflow: hidden;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(1, 101, 96, 0.07),
            transparent 34%
        ),
        #ffffff;

    box-shadow:
        0 16px 38px rgba(37, 67, 63, 0.08);
}


.sc-course-identity {
    display: flex;
    align-items: center;
    gap: 18px;

    min-width: 0;
}


.sc-course-identity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 72px;
    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #016560,
            #5ba889
        );

    color: #ffb41c;

    box-shadow:
        0 12px 24px rgba(1, 101, 96, 0.18);
}


.sc-course-identity-icon .material-icons {
    font-size: 34px;
}


.sc-course-identity-copy {
    min-width: 0;
}


.sc-course-kicker {
    display: block;

    margin-bottom: 5px;

    color: #016560;

    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.sc-course-title {
    margin: 0;

    overflow-wrap: anywhere;

    color: #172a27;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.12;
}


.sc-course-professors {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin: 10px 0 0;

    color: #536763;

    font-size: 0.84rem;
    line-height: 1.5;
}


.sc-course-professors .material-icons {
    flex: 0 0 auto;

    margin-top: 1px;

    color: #016560;
    font-size: 18px;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.sc-course-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.sc-course-hero-action {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 88px;
    padding: 15px 17px;

    border-radius: 16px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.sc-course-hero-action:hover {
    transform: translateY(-2px);
}


.sc-course-hero-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;
    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
}


.sc-course-hero-action-icon .material-icons {
    font-size: 24px;
}


.sc-course-hero-action-copy {
    display: grid;
    flex: 1;
    gap: 3px;

    min-width: 0;
}


.sc-course-hero-action-copy strong {
    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
}


.sc-course-hero-action-copy small {
    font-size: 0.71rem;
    line-height: 1.4;
}


.sc-course-hero-action-arrow {
    flex: 0 0 auto;

    font-size: 20px;
}


.sc-course-live-action {
    border: 1px solid rgba(1, 101, 96, 0.18);

    background:
        linear-gradient(
            135deg,
            #176e63,
            #70b291
        );

    color: #ffffff;

    box-shadow:
        0 11px 24px rgba(1, 101, 96, 0.16);
}


.sc-course-live-action:hover {
    color: #ffffff;

    box-shadow:
        0 15px 30px rgba(1, 101, 96, 0.22);
}


.sc-course-live-action .sc-course-hero-action-icon {
    color: #016560;
}


.sc-course-live-action.is-inactive {
    cursor: default;

    border-color: rgba(1, 101, 96, 0.12);

    background:
        linear-gradient(
            135deg,
            #e8f2ef,
            #f4f8f7
        );

    color: #46645f;

    box-shadow: none;
}


.sc-course-live-action.is-inactive:hover {
    transform: none;
}


.sc-course-study-action {
    border: 1px solid rgba(255, 164, 20, 0.34);

    background:
        linear-gradient(
            135deg,
            #ff971e,
            #ffc461
        );

    color: #5c3b00;

    box-shadow:
        0 11px 24px rgba(255, 151, 30, 0.2);
}


.sc-course-study-action:hover {
    color: #5c3b00;

    box-shadow:
        0 15px 30px rgba(255, 151, 30, 0.26);
}


.sc-course-study-action .sc-course-hero-action-icon {
    color: #e6800f;
}


/* =========================================================
   GLAVNI RASPORED
========================================================= */

.sc-course-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.82fr)
        minmax(330px, 0.98fr);
    align-items: start;
    gap: 24px;
}


.sc-course-primary,
.sc-course-sidebar {
    display: grid;
    gap: 20px;

    min-width: 0;
}


/* =========================================================
   ZAJEDNIČKE KARTICE
========================================================= */

.sc-course-card {
    overflow: hidden;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 13px 30px rgba(37, 67, 63, 0.075);
}


.sc-course-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;

    min-height: 62px;
    padding: 14px 17px;

    border-bottom: 1px solid #e8efed;
}


.sc-course-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}


.sc-course-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: rgba(1, 101, 96, 0.09);
    color: #016560;
}


.sc-course-card-icon .material-icons {
    font-size: 20px;
}


.sc-course-card-heading h2 {
    margin: 0;

    color: #174b45;

    font-family: "Montserrat", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
}


.sc-course-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 31px;
    padding: 0 9px;

    border-radius: 999px;

    background: #016560;
    color: #ffffff;

    font-size: 0.76rem;
    font-weight: 700;
}


.sc-course-header-link {
    color: #016560;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;
}


.sc-course-header-link:hover {
    color: #014c48;
    text-decoration: underline;
}


/* =========================================================
   VIDEO PLAYER
========================================================= */

.sc-course-video-card {
    padding: 16px;
}


.sc-course-media-stage {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid rgba(1, 101, 96, 0.18);
    border-radius: 14px;

    background: #071d1a;
}


.sc-course-media-stage video,
.sc-course-media-stage iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #000000;

    object-fit: contain;
}


.sc-course-media-stage [hidden] {
    display: none !important;
}


.sc-course-empty-video {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    height: 100%;
    padding: 30px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.84rem;
    text-align: center;
}


.sc-course-empty-video .material-icons {
    color: #ffb41c;
    font-size: 28px;
}


.sc-course-video-controls {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 13px;
}


.sc-course-video-nav {
    display: flex;
    gap: 9px;
}


.sc-course-video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 124px;
    min-height: 40px;
    padding: 8px 14px;

    border: 1px solid rgba(1, 101, 96, 0.15);
    border-radius: 11px;

    background: #f8fbfa;
    color: #315a54;

    font-size: 0.74rem;
    font-weight: 700;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}


.sc-course-video-button:hover:not(:disabled) {
    border-color: rgba(1, 101, 96, 0.32);

    background: rgba(1, 101, 96, 0.07);
    color: #016560;
}


.sc-course-video-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}


.sc-course-video-button .material-icons {
    font-size: 18px;
}


.sc-course-auto-next {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;

    color: #536662;

    font-size: 0.73rem;
    font-weight: 600;
}


.sc-course-auto-next input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #016560;
}


/* =========================================================
   VIDEO LISTA
========================================================= */

.sc-course-playlist {
    max-height: 310px;
    overflow-y: auto;

    scrollbar-color: #91b8b0 #eef4f2;
    scrollbar-width: thin;
}


.sc-course-video-list {
    display: grid;
}


.sc-course-video-item {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 11px;

    width: 100%;
    min-height: 54px;
    padding: 10px 16px;

    border: 0;
    border-bottom: 1px solid #e9efee;

    background: #ffffff;
    color: #344743;

    text-align: left;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}


.sc-course-video-item:last-child {
    border-bottom: 0;
}


.sc-course-video-item:hover {
    background: #f5faf8;
    color: #016560;
}


.sc-course-video-item.is-active {
    background:
        linear-gradient(
            90deg,
            rgba(1, 101, 96, 0.12),
            rgba(1, 101, 96, 0.035)
        );

    color: #016560;

    box-shadow:
        inset 3px 0 0 #016560;
}


.sc-course-video-number {
    color: #82908d;

    font-size: 0.7rem;
    font-weight: 700;
}


.sc-course-video-title {
    overflow: hidden;

    font-size: 0.78rem;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sc-course-video-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #788682;

    font-size: 0.68rem;
}


.sc-course-video-meta .material-icons {
    color: #016560;
    font-size: 17px;
}


/* =========================================================
   LIBRARY
========================================================= */

.sc-course-library-card {
    border-top: 3px solid #ffb41c;
}


.sc-course-library-list {
    max-height: 285px;
    overflow-y: auto;

    scrollbar-color: #91b8b0 #eef4f2;
    scrollbar-width: thin;
}


.sc-course-library-item {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 10px;

    min-height: 51px;
    padding: 10px 15px;

    border-bottom: 1px solid #e9efee;

    color: #344743;
    text-decoration: none;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}


.sc-course-library-item:last-child {
    border-bottom: 0;
}


.sc-course-library-item:hover {
    background: #f5faf8;
    color: #016560;
}


.sc-course-library-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;
    width: 31px;
    height: 31px;

    border-radius: 9px;

    background: rgba(1, 101, 96, 0.08);
    color: #016560;
}


.sc-course-library-item-icon .material-icons {
    font-size: 17px;
}


.sc-course-library-title {
    overflow: hidden;

    font-size: 0.75rem;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sc-course-library-open {
    color: #016560;
    font-size: 17px;
}


/* =========================================================
   HOMEWORK
========================================================= */

.sc-course-homework-card {
    border-top: 3px solid #ffb41c;
}


.sc-course-homework-list {
    max-height: 600px;
    padding: 10px;

    overflow-y: auto;

    background: #fbfcfc;

    scrollbar-color: #91b8b0 #eef4f2;
    scrollbar-width: thin;
}


.sc-course-homework-item {
    margin-bottom: 8px;
    padding: 12px;

    border: 1px solid rgba(1, 101, 96, 0.09);
    border-radius: 12px;

    background: #ffffff;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.sc-course-homework-item:last-child {
    margin-bottom: 0;
}


.sc-course-homework-item:hover {
    border-color: rgba(1, 101, 96, 0.22);

    box-shadow:
        0 7px 17px rgba(31, 67, 61, 0.07);
}


.sc-course-homework-top {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}


.sc-course-homework-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;
    width: 31px;
    height: 31px;

    border-radius: 9px;

    background: rgba(1, 101, 96, 0.09);
    color: #016560;
}


.sc-course-homework-icon .material-icons {
    font-size: 18px;
}


.sc-course-homework-copy {
    flex: 1;
    min-width: 0;
}


.sc-course-homework-title {
    margin: 0 0 4px;

    color: #2c403c;

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}


.sc-course-homework-preview,
.sc-course-homework-full {
    color: #576965;

    font-size: 0.69rem;
    line-height: 1.5;
}


.sc-course-homework-toggle {
    display: inline-block;

    margin-top: 4px;

    color: #016560;

    font-size: 0.68rem;
    font-weight: 700;

    text-decoration: underline;
}


.sc-course-homework-toggle:hover {
    color: #014b47;
}


.sc-course-homework-due {
    display: block;

    margin-top: 5px;

    color: #83908d;

    font-size: 0.65rem;
}


.sc-course-homework-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 9px;
}


.sc-course-solve-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 88px;
    min-height: 32px;
    padding: 6px 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #016560,
            #4d9b7e
        );

    color: #ffffff;

    font-size: 0.68rem;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 6px 13px rgba(1, 101, 96, 0.15);
}


.sc-course-solve-button:hover {
    color: #ffffff;

    box-shadow:
        0 8px 17px rgba(1, 101, 96, 0.23);

    transform: translateY(-1px);
}


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

.sc-course-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 110px;
    padding: 20px;

    color: #788783;

    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}


.sc-course-empty-state .material-icons {
    color: #016560;
    font-size: 22px;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.sc-course-playlist::-webkit-scrollbar,
.sc-course-library-list::-webkit-scrollbar,
.sc-course-homework-list::-webkit-scrollbar {
    width: 7px;
}


.sc-course-playlist::-webkit-scrollbar-track,
.sc-course-library-list::-webkit-scrollbar-track,
.sc-course-homework-list::-webkit-scrollbar-track {
    background: #eef4f2;
}


.sc-course-playlist::-webkit-scrollbar-thumb,
.sc-course-library-list::-webkit-scrollbar-thumb,
.sc-course-homework-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: #91b8b0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {
    .sc-course-hero {
        grid-template-columns: 1fr;
    }

    .sc-course-layout {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(310px, 0.95fr);
    }
}


@media (max-width: 991.98px) {
    .sc-course-main {
        padding-top: 26px;
    }

    .sc-course-layout {
        grid-template-columns: 1fr;
    }

    .sc-course-homework-list {
        max-height: 500px;
    }
}


@media (max-width: 767.98px) {
    .sc-course-container {
        width: min(100% - 20px, 1500px);
    }

    .sc-course-hero {
        padding: 21px;
    }

    .sc-course-identity {
        align-items: flex-start;
    }

    .sc-course-identity-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

    .sc-course-identity-icon .material-icons {
        font-size: 28px;
    }

    .sc-course-hero-actions {
        grid-template-columns: 1fr;
    }

    .sc-course-video-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .sc-course-video-nav {
        width: 100%;
    }

    .sc-course-video-button {
        flex: 1;
        min-width: 0;
    }

    .sc-course-auto-next {
        margin-left: 0;
    }
}


@media (max-width: 479.98px) {
    .sc-course-hero {
        padding: 18px 16px;
    }

    .sc-course-identity {
        gap: 12px;
    }

    .sc-course-identity-icon {
        flex-basis: 49px;
        width: 49px;
        height: 49px;
    }

    .sc-course-identity-icon .material-icons {
        font-size: 24px;
    }

    .sc-course-title {
        font-size: 1.55rem;
    }

    .sc-course-professors {
        font-size: 0.75rem;
    }

    .sc-course-hero-action {
        min-height: 78px;
    }

    .sc-course-video-card {
        padding: 10px;
    }

    .sc-course-card-header {
        padding-inline: 13px;
    }
}

/* =========================================================
   PROFESSOR – POSLATE PORUKE UČENIKU
========================================================= */

.oa-professor-sent-messages-main {
    min-height: calc(100vh - 80px);
    padding: 34px 0 64px;
}

.oa-professor-sent-messages-back {
    margin-bottom: 18px;
}

.oa-professor-sent-messages-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    margin-bottom: 26px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.08),
            rgba(255, 180, 28, 0.08)
        ),
        #ffffff;
    box-shadow: 0 16px 40px rgba(23, 43, 58, 0.08);
}

.oa-professor-sent-messages-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.oa-professor-sent-messages-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #016560;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(1, 101, 96, 0.22);
}

.oa-professor-sent-messages-kicker {
    display: block;
    margin-bottom: 4px;
    color: #016560;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oa-professor-sent-messages-heading h1,
.oa-professor-sent-messages-section-header h2 {
    margin: 0;
    color: #1c2f3a;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.oa-professor-sent-messages-heading h1 {
    font-size: clamp(25px, 3vw, 36px);
}

.oa-professor-sent-messages-heading p {
    margin: 6px 0 10px;
    color: #657580;
}

.oa-professor-sent-messages-course {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(1, 101, 96, 0.09);
    color: #016560;
    font-size: 13px;
    font-weight: 700;
}

.oa-professor-sent-messages-course .material-icons {
    font-size: 17px;
}

.oa-professor-sent-messages-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 12px;
    flex: 0 0 auto;
}

.oa-professor-sent-messages-stat {
    min-width: 110px;
    padding: 16px;
    border: 1px solid rgba(1, 101, 96, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.oa-professor-sent-messages-stat strong {
    display: block;
    color: #016560;
    font-family: "Montserrat", sans-serif;
    font-size: 26px;
    line-height: 1;
}

.oa-professor-sent-messages-stat span {
    display: block;
    margin-top: 7px;
    color: #687883;
    font-size: 12px;
    font-weight: 600;
}

.oa-professor-sent-messages-section {
    padding: 28px;
    border: 1px solid rgba(24, 55, 70, 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(23, 43, 58, 0.07);
}

.oa-professor-sent-messages-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(24, 55, 70, 0.1);
}

.oa-professor-sent-messages-section-header h2 {
    font-size: 23px;
}

.oa-professor-sent-messages-list {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.oa-professor-sent-message-card {
    padding: 20px;
    border: 1px solid rgba(24, 55, 70, 0.11);
    border-radius: 18px;
    background: #fbfcfc;
}

.oa-professor-sent-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.oa-professor-sent-message-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #687883;
    font-size: 13px;
    font-weight: 600;
}

.oa-professor-sent-message-date .material-icons {
    color: #016560;
    font-size: 18px;
}

.oa-professor-message-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.oa-professor-message-status .material-icons {
    font-size: 17px;
}

.oa-professor-message-status.is-read {
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-professor-message-status.is-unread {
    background: rgba(255, 180, 28, 0.18);
    color: #8a5a00;
}

.oa-professor-sent-message-content {
    color: #354953;
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.oa-professor-sent-messages-empty {
    padding: 54px 20px;
    text-align: center;
}

.oa-professor-sent-messages-empty > .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: rgba(1, 101, 96, 0.09);
    color: #016560;
    font-size: 34px;
}

.oa-professor-sent-messages-empty h3 {
    margin-bottom: 8px;
    color: #1c2f3a;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.oa-professor-sent-messages-empty p {
    max-width: 520px;
    margin: 0 auto 22px;
    color: #687883;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .oa-professor-sent-messages-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-professor-sent-messages-stats {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .oa-professor-sent-messages-main {
        padding-top: 22px;
    }

    .oa-professor-sent-messages-hero,
    .oa-professor-sent-messages-section {
        padding: 20px;
        border-radius: 19px;
    }

    .oa-professor-sent-messages-heading {
        align-items: flex-start;
    }

    .oa-professor-sent-messages-avatar {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 20px;
    }

    .oa-professor-sent-messages-stats {
        grid-template-columns: 1fr;
    }

    .oa-professor-sent-messages-section-header,
    .oa-professor-sent-message-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-professor-sent-messages-section-header .oa-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   SMARTCLASS SUPPORT
========================================================= */

.oa-support-page {
    background: #f5f8f8;
}

.oa-support-main {
    min-height: calc(100vh - 80px);
    padding: 34px 0 64px;
}

.oa-support-back {
    margin-bottom: 18px;
}

.oa-support-hero {
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.09),
            rgba(255, 180, 28, 0.09)
        ),
        #ffffff;
    box-shadow: 0 16px 40px rgba(23, 43, 58, 0.08);
}

.oa-support-heading {
    display: flex;
    align-items: center;
    gap: 22px;
}

.oa-support-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    background: #016560;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(1, 101, 96, 0.24);
}

.oa-support-hero-icon .material-icons {
    font-size: 38px;
}

.oa-support-kicker,
.oa-support-card-label {
    display: block;
    color: #016560;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oa-support-heading h1 {
    margin: 4px 0 8px;
    color: #1c2f3a;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
}

.oa-support-heading p {
    max-width: 760px;
    margin: 0;
    color: #637580;
    font-size: 16px;
    line-height: 1.7;
}

.oa-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
}

.oa-support-card {
    padding: 28px;
    border: 1px solid rgba(24, 55, 70, 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 43, 58, 0.07);
}

.oa-support-contact-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.oa-support-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 17px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-support-card-icon .material-icons {
    font-size: 28px;
}

.oa-support-card h2 {
    margin: 5px 0 10px;
    color: #1c2f3a;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.oa-support-card p {
    margin: 0 0 22px;
    color: #687883;
    line-height: 1.7;
}

.oa-support-email-button {
    margin-top: auto;
}

.oa-support-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.oa-support-card-header .oa-support-card-icon {
    margin-bottom: 0;
}

.oa-support-checklist {
    display: grid;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.oa-support-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #3e525d;
    line-height: 1.6;
}

.oa-support-checklist .material-icons {
    margin-top: 2px;
    color: #016560;
    font-size: 20px;
}

.oa-support-security-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    margin-top: 24px;
    border: 1px solid rgba(255, 180, 28, 0.32);
    border-radius: 18px;
    background: rgba(255, 180, 28, 0.1);
}

.oa-support-security-note > .material-icons {
    color: #8a5a00;
    font-size: 25px;
}

.oa-support-security-note strong {
    display: block;
    margin-bottom: 4px;
    color: #624100;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}

.oa-support-security-note p {
    margin: 0;
    color: #755d2f;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   SUPPORT RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .oa-support-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .oa-support-main {
        padding-top: 22px;
    }

    .oa-support-hero,
    .oa-support-card {
        padding: 21px;
        border-radius: 19px;
    }

    .oa-support-heading {
        align-items: flex-start;
    }

    .oa-support-hero-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .oa-support-hero-icon .material-icons {
        font-size: 29px;
    }

    .oa-support-email-button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   SMARTCLASS LIVE
========================================================= */

.oa-live-page {
    background: #f4f7f7;
}

.oa-live-main {
    min-height: calc(100vh - 80px);
    padding: 28px 0 56px;
}

.oa-live-container {
    max-width: 1680px;
    padding-right: 28px;
    padding-left: 28px;
}


/* =========================================================
   LIVE HERO
========================================================= */

.oa-live-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 26px;
    margin-bottom: 20px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.09),
            rgba(255, 180, 28, 0.08)
        ),
        #ffffff;
    box-shadow: 0 14px 36px rgba(23, 43, 58, 0.07);
}

.oa-live-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.oa-live-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #016560;
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(1, 101, 96, 0.22);
}

.oa-live-heading-icon .material-icons {
    font-size: 32px;
}

.oa-live-kicker,
.oa-live-card-label {
    display: block;
    margin-bottom: 4px;
    color: #016560;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.oa-live-heading h1 {
    margin: 0;
    color: #1d313c;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 700;
}

.oa-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

.oa-live-status,
.oa-live-role {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.oa-live-status {
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.oa-live-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1faa76;
    box-shadow: 0 0 0 4px rgba(31, 170, 118, 0.13);
    animation: oa-live-pulse 1.8s infinite;
}

.oa-live-role {
    background: rgba(255, 180, 28, 0.16);
    color: #805500;
}

.oa-live-role .material-icons {
    font-size: 17px;
}

.oa-live-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}


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

.oa-live-card {
    overflow: hidden;
    border: 1px solid rgba(24, 55, 70, 0.12);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(20, 37, 48, 0.11);
}

.oa-live-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 17px 22px;
    border-bottom: 1px solid rgba(24, 55, 70, 0.11);
    background: #ffffff;
}

.oa-live-card-header h2 {
    margin: 0;
    color: #263d48;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.oa-live-secure-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 520px;
    color: #687983;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.oa-live-secure-note .material-icons {
    color: #016560;
    font-size: 18px;
}


/* =========================================================
   JITSI STAGE
========================================================= */

.oa-live-stage {
    position: relative;
    width: 100%;
    height: clamp(520px, 72vh, 900px);
    min-height: 520px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at top,
            #243744,
            #111b24 70%
        );
}

#jitsi-container {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

#jitsi-container iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.oa-live-stage [hidden] {
    display: none !important;
}


/* =========================================================
   LOADING I ZAVRŠNI PANELI
========================================================= */

.oa-live-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 32px;
    background:
        radial-gradient(
            circle at top,
            rgba(1, 101, 96, 0.32),
            rgba(11, 22, 30, 0.97) 68%
        );
    color: #ffffff;
    text-align: center;
}

.oa-live-overlay h2 {
    margin: 20px 0 8px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
}

.oa-live-overlay p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.7;
}

.oa-live-loader {
    width: 52px;
    height: 52px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffb41c;
    border-radius: 50%;
    animation: oa-live-spin 0.85s linear infinite;
}

.oa-live-result-panel {
    background:
        radial-gradient(
            circle at top,
            rgba(1, 101, 96, 0.34),
            rgba(11, 22, 30, 0.98) 68%
        );
}

.oa-live-error-panel {
    background:
        radial-gradient(
            circle at top,
            rgba(166, 55, 55, 0.34),
            rgba(25, 16, 19, 0.98) 68%
        );
}

.oa-live-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffb41c;
}

.oa-live-result-icon .material-icons {
    font-size: 37px;
}

.oa-live-error-panel .oa-live-result-icon {
    color: #ffb4a9;
}

.oa-live-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 25px;
}


/* =========================================================
   LIVE DANGER BUTTON
========================================================= */

.oa-btn-danger {
    border: 1px solid #c63e3e;
    background: #c63e3e;
    color: #ffffff;
}

.oa-btn-danger:hover,
.oa-btn-danger:focus {
    border-color: #a82f2f;
    background: #a82f2f;
    color: #ffffff;
}


/* =========================================================
   ANIMACIJE
========================================================= */

@keyframes oa-live-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes oa-live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.65;
        transform: scale(0.88);
    }
}


/* =========================================================
   LIVE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
    .oa-live-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-live-hero-actions {
        justify-content: flex-start;
    }

    .oa-live-stage {
        height: 68vh;
        min-height: 500px;
    }
}

@media (max-width: 767.98px) {
    .oa-live-main {
        padding-top: 18px;
    }

    .oa-live-container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .oa-live-hero {
        padding: 19px;
        border-radius: 18px;
    }

    .oa-live-heading {
        align-items: flex-start;
    }

    .oa-live-heading-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .oa-live-heading-icon .material-icons {
        font-size: 27px;
    }

    .oa-live-hero-actions,
    .oa-live-hero-actions form,
    .oa-live-hero-actions .oa-btn {
        width: 100%;
    }

    .oa-live-hero-actions .oa-btn {
        justify-content: center;
    }

    .oa-live-card {
        border-radius: 18px;
    }

    .oa-live-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 15px 17px;
    }

    .oa-live-secure-note {
        text-align: left;
    }

    .oa-live-stage {
        height: 72vh;
        min-height: 480px;
    }

    .oa-live-overlay {
        padding: 24px 17px;
    }

    .oa-live-result-actions,
    .oa-live-result-actions form,
    .oa-live-result-actions .oa-btn {
        width: 100%;
    }

    .oa-live-result-actions .oa-btn {
        justify-content: center;
    }
}

/* =========================================================
   SMARTCLASS COURSE ORGANIZATION
========================================================= */

.sc-course-organization {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    margin: 0 0 22px;
}

/*
 * Ako postoji samo raspored ili samo obaveštenje,
 * jedna kartica koristi celu širinu.
 */
.sc-course-organization-card:only-child {
    grid-column: 1 / -1;
}

.sc-course-organization-card {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 9px 25px rgba(31, 42, 55, 0.06);
}

.sc-course-organization-header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.sc-course-organization-header h2 {
    margin: 2px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
}

.sc-course-organization-header .sc-course-count-badge {
    margin-left: auto;
}

.sc-course-organization-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 12px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.sc-course-organization-icon .material-icons {
    font-size: 21px;
}

.sc-course-organization-kicker {
    display: block;
    color: #016560;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-course-notice-list {
    display: grid;
    gap: 12px;
}

.sc-course-schedule-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.sc-course-schedule-notice.is-cancelled {
    border-color: rgba(190, 41, 41, 0.18);
    background: rgba(190, 41, 41, 0.07);
}

.sc-course-schedule-notice.is-rescheduled {
    border-color: rgba(255, 180, 28, 0.3);
    background: rgba(255, 180, 28, 0.12);
}

.sc-course-schedule-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
}

.sc-course-schedule-notice-icon .material-icons {
    font-size: 19px;
}

.sc-course-schedule-notice.is-cancelled
.sc-course-schedule-notice-icon {
    color: #b42318;
}

.sc-course-schedule-notice.is-rescheduled
.sc-course-schedule-notice-icon {
    color: #9a6700;
}

.sc-course-schedule-notice-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sc-course-schedule-notice-copy > strong {
    font-family: "Montserrat", sans-serif;
    font-size: 0.94rem;
}

.sc-course-schedule-notice-copy > span {
    font-size: 0.84rem;
    line-height: 1.45;
}

.sc-course-schedule-notice-copy p {
    margin: 4px 0 0;
    color: #5f6770;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sc-course-announcement {
    padding: 13px 14px;
    border: 1px solid rgba(1, 101, 96, 0.12);
    border-radius: 14px;
    background: #f9fbfb;
}

.sc-course-announcement.is-important {
    border-color: rgba(255, 180, 28, 0.38);
    background: rgba(255, 180, 28, 0.09);
}

.sc-course-announcement.is-unread {
    box-shadow: inset 4px 0 0 #016560;
}

.sc-course-announcement-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.sc-course-announcement-top time {
    color: #727a82;
    font-size: 0.8rem;
    white-space: nowrap;
}

.sc-course-announcement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sc-course-announcement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sc-course-announcement-badge.is-important {
    background: #ffb41c;
    color: #523500;
}

.sc-course-announcement-badge.is-new {
    background: #016560;
    color: #ffffff;
}

.sc-course-announcement h3 {
    margin: 0 0 7px;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.sc-course-announcement-text {
    color: #3f474f;
    line-height: 1.65;
}

.sc-course-announcement-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.sc-course-announcement h3 {
    margin: 0 0 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.sc-course-announcement-text {
    color: #3f474f;
    font-size: 0.9rem;
    line-height: 1.55;
}

.sc-course-announcement-top time {
    color: #727a82;
    font-size: 0.75rem;
    white-space: nowrap;
}

.sc-course-live-change-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 180, 28, 0.18);
    color: #825700;
    font-size: 0.72rem;
    font-weight: 700;
}

.sc-course-live-change-label .material-icons {
    font-size: 15px;
}

@media (max-width: 991px) {
    .sc-course-organization {
        grid-template-columns: 1fr;
    }

    .sc-course-organization-card:only-child {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .sc-course-organization-card {
        padding: 17px;
        border-radius: 18px;
    }

    .sc-course-announcement-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .sc-course-announcement-top time {
        white-space: normal;
    }
}

/* =========================================================
   COURSE INFORMATION TOOLS
========================================================= */

.sc-course-info-tools {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin: -4px 0 18px;
}

.sc-course-info-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid rgba(1, 101, 96, 0.15);
    border-radius: 13px;
    background: #ffffff;
    color: #164944;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(31, 42, 55, 0.05);
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.sc-course-info-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(1, 101, 96, 0.35);
    box-shadow: 0 8px 22px rgba(31, 42, 55, 0.08);
}

.sc-course-info-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: rgba(1, 101, 96, 0.09);
    color: #016560;
}

.sc-course-info-trigger-icon .material-icons {
    font-size: 17px;
}

.sc-course-info-badge {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sc-course-info-badge.is-new {
    background: #016560;
    color: #ffffff;
}

.sc-course-info-badge.is-change {
    background: rgba(255, 180, 28, 0.2);
    color: #815700;
}

.sc-course-info-badge.is-important {
    background: #ffb41c;
    color: #523500;
}


/* =========================================================
   COURSE INFORMATION MODALS
========================================================= */

.sc-course-info-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(24, 39, 52, 0.2);
}

.sc-course-info-modal .modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(1, 101, 96, 0.1);
    background: #f8fbfa;
}

.sc-course-info-modal .modal-body {
    padding: 20px;
}

.sc-course-info-modal .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
}

.sc-course-modal-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.sc-course-modal-title > div {
    min-width: 0;
}

.sc-course-modal-title > div > span {
    display: block;
    color: #016560;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-course-modal-title h2 {
    margin: 1px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
}

.sc-course-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 12px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
}

.sc-course-modal-section + .sc-course-modal-section {
    margin-top: 24px;
}

.sc-course-modal-section > h3 {
    margin: 0 0 11px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
}

.sc-course-modal-list {
    display: grid;
    gap: 10px;
}

.sc-course-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 14px;
    background: #f9fbfb;
}

.sc-course-modal-item > div {
    display: grid;
    gap: 3px;
}

.sc-course-modal-item span {
    font-size: 0.86rem;
}

.sc-course-modal-item p {
    margin: 4px 0 0;
    color: #667078;
    font-size: 0.85rem;
}

.sc-course-modal-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #ffffff;
    color: #016560;
}

.sc-course-change-item.is-cancelled {
    border-color: rgba(180, 35, 24, 0.18);
    background: rgba(180, 35, 24, 0.06);
}

.sc-course-change-item.is-rescheduled {
    border-color: rgba(255, 180, 28, 0.28);
    background: rgba(255, 180, 28, 0.09);
}

.sc-course-modal-announcement {
    padding: 14px 15px;
    border: 1px solid rgba(1, 101, 96, 0.12);
    border-radius: 15px;
    background: #f9fbfb;
}

.sc-course-modal-announcement.is-important {
    border-color: rgba(255, 180, 28, 0.34);
    background: rgba(255, 180, 28, 0.08);
}

.sc-course-modal-announcement.is-new {
    box-shadow: inset 4px 0 0 #016560;
}

.sc-course-modal-announcement-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sc-course-modal-announcement-top time {
    color: #737c84;
    font-size: 0.76rem;
}

.sc-course-modal-announcement h3 {
    margin: 0 0 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
}

.sc-course-modal-announcement > div:last-child {
    color: #40484f;
    font-size: 0.9rem;
    line-height: 1.58;
}

@media (max-width: 767px) {
    .sc-course-info-tools {
        justify-content: stretch;
    }

    .sc-course-info-trigger {
        flex: 1 1 auto;
        justify-content: center;
    }

    .sc-course-info-modal .modal-dialog {
        margin: 12px;
    }

    .sc-course-info-modal .modal-content {
        border-radius: 18px;
    }

    .sc-course-modal-announcement-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   WELCOME USER — COURSE ANNOUNCEMENT BADGE
========================================================= */

.oa-user-course-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oa-user-course-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

.oa-user-course-icon {
    flex: 0 0 auto;
    color: #016560;
    font-size: 21px;
}

.oa-user-course-name {
    min-width: 0;
    color: #22312f;
    font-weight: 600;
}

.oa-course-announcement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #016560;
    color: #ffffff;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(1, 101, 96, 0.17);
}

.oa-user-course-item .oa-btn-course {
    flex: 0 0 auto;
    margin-left: auto;
}


/* Mobilni prikaz */
@media (max-width: 575px) {
    .oa-user-course-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .oa-user-course-info {
        flex: 1 1 100%;
    }

    .oa-user-course-item .oa-btn-course {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

/* =========================================================
   ADMIN DASHBOARD
========================================================= */

.oa-admin-dashboard-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 180, 28, 0.1),
            transparent 30%
        ),
        #f5f8f7;
}

.oa-admin-dashboard-main {
    padding: 38px 0 64px;
}


/* =========================================================
   ADMIN HERO
========================================================= */

.oa-admin-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 26px;
    padding: 28px 30px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #016560 0%,
            #087b74 100%
        );
    color: #ffffff;
    box-shadow:
        0 18px 46px
        rgba(1, 101, 96, 0.18);
}

.oa-admin-dashboard-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.oa-admin-dashboard-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 20px;
    background:
        rgba(255, 255, 255, 0.14);
    color: #ffcf68;
}

.oa-admin-dashboard-hero-icon .material-icons {
    font-size: 33px;
}

.oa-admin-dashboard-kicker {
    display: block;
    margin-bottom: 5px;
    color: #ffd982;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.oa-admin-dashboard-heading h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 700;
}

.oa-admin-dashboard-heading p {
    max-width: 650px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.83);
    line-height: 1.6;
}

.oa-admin-dashboard-heading p strong {
    color: #ffffff;
}

.oa-admin-dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(108px, 1fr));
    gap: 10px;
    flex: 0 0 auto;
}

.oa-admin-dashboard-stat {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 118px;
    padding: 11px 12px;
    border:
        1px solid
        rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background:
        rgba(255, 255, 255, 0.1);
}

.oa-admin-dashboard-stat > .material-icons {
    color: #ffd982;
    font-size: 23px;
}

.oa-admin-dashboard-stat div {
    display: grid;
}

.oa-admin-dashboard-stat strong {
    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    line-height: 1;
}

.oa-admin-dashboard-stat span:last-child {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.77);
    font-size: 0.7rem;
    line-height: 1.25;
}


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

.oa-admin-alert {
    margin-bottom: 22px;
    border: 0;
    border-radius: 15px;
}

.oa-admin-card,
.oa-admin-payments-card {
    border:
        1px solid
        rgba(1, 101, 96, 0.11);
    border-radius: 22px;
    background: #ffffff;
    box-shadow:
        0 12px 34px
        rgba(31, 42, 55, 0.065);
}

.oa-admin-card {
    display: flex;
    flex-direction: column;
    padding: 21px;
}

.oa-admin-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.oa-admin-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 14px;
    background:
        rgba(1, 101, 96, 0.09);
    color: #016560;
}

.oa-admin-card-icon .material-icons {
    font-size: 22px;
}

.oa-admin-card-kicker {
    display: block;
    color: #016560;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.oa-admin-card-header h2 {
    margin: 2px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.04rem;
    font-weight: 700;
}

.oa-admin-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    min-height: 29px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #b42318;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
}


/* =========================================================
   ADMIN QUICK ACTIONS
========================================================= */

.oa-admin-action-list {
    display: grid;
    gap: 9px;
    margin-top: 19px;
}

.oa-admin-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border:
        1px solid
        rgba(1, 101, 96, 0.1);
    border-radius: 14px;
    background: #f9fbfb;
    color: #263b38;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.oa-admin-action-item:hover {
    transform: translateY(-1px);
    border-color:
        rgba(1, 101, 96, 0.28);
    background: #f3f9f8;
    color: #016560;
}

.oa-admin-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: #ffffff;
    color: #016560;
}

.oa-admin-action-icon .material-icons {
    font-size: 19px;
}

.oa-admin-action-copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.oa-admin-action-copy strong {
    font-size: 0.88rem;
}

.oa-admin-action-copy small {
    margin-top: 2px;
    color: #727c7a;
    font-size: 0.74rem;
}


/* =========================================================
   ADMIN MESSAGES AND NEWS
========================================================= */

.oa-admin-message-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 23px 0;
    padding: 15px;
    border-radius: 16px;
    background:
        rgba(1, 101, 96, 0.055);
}

.oa-admin-message-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 15px;
    background: #ffffff;
    color: #016560;
}

.oa-admin-message-summary strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 0.91rem;
}

.oa-admin-message-summary p {
    margin: 4px 0 0;
    color: #68716f;
    font-size: 0.85rem;
}

.oa-admin-card-button {
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

.oa-admin-news-content {
    flex: 1 1 auto;
    margin: 20px 0;
}

.oa-admin-news-content h3 {
    margin: 0 0 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.98rem;
}

.oa-admin-news-text {
    max-height: 145px;
    overflow-y: auto;
    padding-right: 5px;
    color: #505a58;
    font-size: 0.87rem;
    line-height: 1.6;
}

.oa-admin-empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 27px 18px;
    text-align: center;
}

.oa-admin-empty-state .material-icons {
    color: #8c9996;
    font-size: 38px;
}

.oa-admin-empty-state strong {
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
}

.oa-admin-empty-state p {
    margin: 0;
    color: #77817f;
    font-size: 0.84rem;
}


/* =========================================================
   ADMIN PAYMENTS
========================================================= */

.oa-admin-payments-card {
    margin-top: 24px;
    padding: 22px;
}

.oa-admin-payments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.oa-admin-payments-header
.oa-admin-card-header p {
    margin: 5px 0 0;
    color: #6e7876;
    font-size: 0.85rem;
}

.oa-admin-payment-count {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 5px 11px;
    border-radius: 999px;
    background:
        rgba(255, 180, 28, 0.17);
    color: #795100;
    font-size: 0.75rem;
    font-weight: 800;
}

.oa-admin-payment-list {
    display: grid;
    gap: 9px;
    max-height: 430px;
    overflow-y: auto;
    padding-right: 5px;
}

.oa-admin-payment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border:
        1px solid
        rgba(1, 101, 96, 0.1);
    border-radius: 15px;
    background: #f9fbfb;
    color: #263b38;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.oa-admin-payment-item:hover {
    transform: translateY(-1px);
    border-color:
        rgba(1, 101, 96, 0.27);
    background: #f3f9f8;
    color: #016560;
}

.oa-admin-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 13px;
    background:
        rgba(255, 180, 28, 0.16);
    color: #8c5d00;
}

.oa-admin-payment-copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.oa-admin-payment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.oa-admin-payment-top strong {
    overflow-wrap: anywhere;
    font-size: 0.88rem;
}

.oa-admin-payment-top time {
    flex: 0 0 auto;
    color: #7a8381;
    font-size: 0.75rem;
}

.oa-admin-payment-note {
    margin-top: 4px;
    color: #606a68;
    font-size: 0.82rem;
    line-height: 1.45;
}

.oa-admin-payment-arrow {
    flex: 0 0 auto;
    color: #8b9693;
}

.oa-admin-payment-empty {
    padding: 35px 18px;
}


/* =========================================================
   ADMIN RESPONSIVE
========================================================= */

@media (max-width: 1199px) {
    .oa-admin-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-admin-dashboard-stats {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .oa-admin-dashboard-main {
        padding: 25px 0 45px;
    }

    .oa-admin-dashboard-hero {
        padding: 21px;
        border-radius: 21px;
    }

    .oa-admin-dashboard-heading {
        align-items: flex-start;
    }

    .oa-admin-dashboard-hero-icon {
        width: 51px;
        height: 51px;
        flex-basis: 51px;
        border-radius: 16px;
    }

    .oa-admin-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .oa-admin-dashboard-stat {
        width: 100%;
    }

    .oa-admin-payments-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-admin-payment-count {
        align-self: flex-start;
    }

    .oa-admin-payment-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (max-width: 575px) {
    .oa-admin-dashboard-heading {
        flex-direction: column;
    }

    .oa-admin-card,
    .oa-admin-payments-card {
        padding: 17px;
        border-radius: 18px;
    }

    .oa-admin-payment-item {
        align-items: flex-start;
    }

    .oa-admin-payment-arrow {
        display: none;
    }
}

/* =========================================================
   ADMIN TOOLS DASHBOARD
========================================================= */

.oa-admin-tools-description {
    margin: 18px 0 0;
    color: #687370;
    font-size: 0.87rem;
    line-height: 1.6;
}


/* =========================================================
   PROFESSOR LIST
========================================================= */

.oa-admin-count-badge.is-neutral {
    background: #016560;
}

.oa-admin-compact-list {
    display: grid;
    gap: 8px;
    max-height: 230px;
    margin-top: 18px;
    overflow-y: auto;
    padding-right: 4px;
}

.oa-admin-compact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(1, 101, 96, 0.09);
    border-radius: 13px;
    background: #f9fbfb;
}

.oa-admin-compact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border-radius: 11px;
    background: #ffffff;
    color: #016560;
}

.oa-admin-compact-icon .material-icons {
    font-size: 18px;
}

.oa-admin-compact-copy {
    display: grid;
    min-width: 0;
}

.oa-admin-compact-copy strong {
    overflow-wrap: anywhere;
    color: #263b38;
    font-size: 0.84rem;
}

.oa-admin-compact-copy small {
    overflow-wrap: anywhere;
    color: #707a78;
    font-size: 0.75rem;
}

.oa-admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.oa-admin-card-actions .oa-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 135px;
}


/* =========================================================
   COURSE REPORT LINKS
========================================================= */

.oa-admin-report-list {
    display: grid;
    gap: 9px;
    margin: 18px 0;
}

.oa-admin-report-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 14px;
    background: #f9fbfb;
    color: #263b38;
    font-size: 0.87rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.oa-admin-report-item:hover {
    transform: translateY(-1px);
    border-color: rgba(1, 101, 96, 0.28);
    background: #f3f9f8;
    color: #016560;
}

.oa-admin-report-item > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

.oa-admin-report-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: #ffffff;
    color: #016560;
}

.oa-admin-report-icon .material-icons {
    font-size: 19px;
}


/* =========================================================
   CREATE COURSE
========================================================= */

.oa-admin-course-create {
    display: grid;
    justify-items: center;
    flex: 1 1 auto;
    gap: 8px;
    margin: 22px 0;
    padding: 25px 18px;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(1, 101, 96, 0.07),
            rgba(255, 180, 28, 0.09)
        );
    text-align: center;
}

.oa-admin-course-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    border-radius: 19px;
    background: #ffffff;
    color: #016560;
    box-shadow:
        0 9px 24px
        rgba(31, 42, 55, 0.08);
}

.oa-admin-course-create-icon .material-icons {
    font-size: 29px;
}

.oa-admin-course-create h3 {
    margin: 4px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.oa-admin-course-create p {
    max-width: 320px;
    margin: 0;
    color: #687370;
    font-size: 0.84rem;
    line-height: 1.55;
}


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

.oa-admin-tools-form {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.oa-admin-form-group {
    display: grid;
    gap: 6px;
}

.oa-admin-tools-form .form-label {
    margin: 0;
    color: #263b38;
    font-size: 0.82rem;
    font-weight: 700;
}

.oa-admin-tools-form .form-control,
.oa-admin-tools-form .form-select {
    min-height: 44px;
    border-color: rgba(1, 101, 96, 0.16);
    border-radius: 12px;
    background-color: #fbfdfc;
    box-shadow: none;
}

.oa-admin-tools-form textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.oa-admin-tools-form .form-control:focus,
.oa-admin-tools-form .form-select:focus {
    border-color: rgba(1, 101, 96, 0.5);
    box-shadow:
        0 0 0 0.2rem
        rgba(1, 101, 96, 0.09);
}

.oa-admin-tools-form > .oa-btn {
    justify-self: start;
}


/* =========================================================
   USER AUTOCOMPLETE
========================================================= */

.oa-admin-autocomplete {
    position: relative;
}

.oa-admin-user-results {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    z-index: 1080;
    max-height: 250px;
    margin: 0;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(1, 101, 96, 0.15);
    border-radius: 13px;
    background: #ffffff;
    box-shadow:
        0 15px 35px
        rgba(31, 42, 55, 0.15);
    list-style: none;
}

.oa-admin-user-results[hidden] {
    display: none;
}

.oa-admin-user-result {
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #263b38;
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.oa-admin-user-result:hover,
.oa-admin-user-result:focus {
    outline: none;
    background: rgba(1, 101, 96, 0.08);
    color: #016560;
}

.oa-admin-user-result-empty {
    padding: 11px;
    color: #77817f;
    font-size: 0.82rem;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .oa-admin-card-actions {
        flex-direction: column;
    }

    .oa-admin-card-actions .oa-btn {
        width: 100%;
    }

    .oa-admin-tools-form > .oa-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   ADMIN SUBPAGE HERO
========================================================= */

.oa-admin-subpage-hero {
    margin-bottom: 24px;
}

.oa-admin-subpage-back {
    flex: 0 0 auto;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.oa-admin-subpage-back:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}


/* =========================================================
   ADMIN ACCESS FORM
========================================================= */

.oa-admin-access-card {
    overflow: hidden;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 14px 38px
        rgba(31, 42, 55, 0.07);
}

.oa-admin-access-section {
    padding: 27px 29px;
}

.oa-admin-access-section + .oa-admin-access-section {
    border-top: 1px solid rgba(1, 101, 96, 0.1);
}

.oa-admin-access-section-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 23px;
}

.oa-admin-access-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 14px;
    background: rgba(1, 101, 96, 0.09);
    color: #016560;
}

.oa-admin-access-section-icon .material-icons {
    font-size: 22px;
}

.oa-admin-access-section-header > div > span {
    display: block;
    color: #016560;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oa-admin-access-section-header h2 {
    margin: 2px 0 0;
    color: #173b37;
    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
}

.oa-admin-access-section-header p {
    margin: 5px 0 0;
    color: #6c7674;
    font-size: 0.86rem;
    line-height: 1.55;
}

.oa-admin-access-card .form-label {
    color: #263b38;
    font-size: 0.83rem;
    font-weight: 700;
}

.oa-admin-access-card .form-control,
.oa-admin-access-card .form-select,
.oa-admin-access-card .input-group-text {
    min-height: 45px;
    border-color: rgba(1, 101, 96, 0.16);
    background-color: #fbfdfc;
    box-shadow: none;
}

.oa-admin-access-card .form-control,
.oa-admin-access-card .form-select {
    border-radius: 12px;
}

.oa-admin-access-card .input-group .form-control {
    border-radius: 12px 0 0 12px;
}

.oa-admin-access-card .input-group-text {
    border-radius: 0 12px 12px 0;
    color: #51605d;
    font-size: 0.82rem;
    font-weight: 700;
}

.oa-admin-access-card textarea.form-control {
    min-height: 115px;
    resize: vertical;
}

.oa-admin-access-card .form-control:focus,
.oa-admin-access-card .form-select:focus {
    border-color: rgba(1, 101, 96, 0.52);
    box-shadow:
        0 0 0 0.2rem
        rgba(1, 101, 96, 0.09);
}

.oa-admin-access-card .form-text {
    margin-top: 6px;
    color: #7a8482;
    font-size: 0.76rem;
}


/* =========================================================
   ACCESS NOTE
========================================================= */

.oa-admin-access-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 180, 28, 0.27);
    border-radius: 14px;
    background: rgba(255, 180, 28, 0.09);
}

.oa-admin-access-note .material-icons {
    color: #936100;
    font-size: 20px;
}

.oa-admin-access-note p {
    margin: 0;
    color: #675734;
    font-size: 0.81rem;
    line-height: 1.5;
}


/* =========================================================
   RADIO OPTIONS
========================================================= */

.oa-admin-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.oa-admin-radio-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 14px;
    border: 1px solid rgba(1, 101, 96, 0.15);
    border-radius: 12px;
    background: #fbfdfc;
    color: #344744;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.oa-admin-radio-option:hover {
    border-color: rgba(1, 101, 96, 0.34);
}

.oa-admin-radio-option input {
    accent-color: #016560;
}


/* =========================================================
   CHOICES.JS
========================================================= */

.oa-admin-access-card .choices {
    margin-bottom: 0;
}

.oa-admin-access-card
.choices__inner {
    min-height: 47px;
    padding: 6px 10px;
    border: 1px solid rgba(1, 101, 96, 0.16);
    border-radius: 12px;
    background: #fbfdfc;
    font-size: 0.86rem;
}

.oa-admin-access-card
.is-focused
.choices__inner,
.oa-admin-access-card
.is-open
.choices__inner {
    border-color: rgba(1, 101, 96, 0.52);
    box-shadow:
        0 0 0 0.2rem
        rgba(1, 101, 96, 0.09);
}

.oa-admin-access-card
.choices__list--multiple
.choices__item {
    border: 0;
    border-radius: 999px;
    background: #016560;
    color: #ffffff;
    font-size: 0.75rem;
}

.oa-admin-access-card
.choices__list--multiple
.choices__item.is-highlighted {
    background: #084f4b;
}

.oa-admin-access-card
.choices__button {
    border-left-color: rgba(255, 255, 255, 0.35);
}

.oa-admin-access-card
.choices__list--dropdown,
.oa-admin-access-card
.choices__list[aria-expanded] {
    z-index: 1100;
    border-color: rgba(1, 101, 96, 0.18);
    border-radius: 12px;
    box-shadow:
        0 14px 34px
        rgba(31, 42, 55, 0.14);
}


/* =========================================================
   ACCESS FORM FOOTER
========================================================= */

.oa-admin-access-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 29px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
    background: #f8fbfa;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .oa-admin-subpage-hero {
        align-items: stretch;
    }

    .oa-admin-subpage-back {
        width: 100%;
        justify-content: center;
    }

    .oa-admin-access-section {
        padding: 21px 18px;
    }

    .oa-admin-access-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 18px;
    }

    .oa-admin-access-footer .oa-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   ADMIN ACCESS — CHOICES.JS TEXT COLORS
========================================================= */

.oa-admin-access-card
.choices__list--dropdown
.choices__item,
.oa-admin-access-card
.choices__list[aria-expanded]
.choices__item {
    background: #ffffff;
    color: #263b38;
}

.oa-admin-access-card
.choices__list--dropdown
.choices__item--selectable.is-highlighted,
.oa-admin-access-card
.choices__list[aria-expanded]
.choices__item--selectable.is-highlighted {
    background: rgba(1, 101, 96, 0.08);
    color: #016560;
}

.oa-admin-access-card
.choices__input {
    background: #ffffff;
    color: #263b38;
}

.oa-admin-access-card
.choices__input::placeholder {
    color: #7a8482;
    opacity: 1;
}

.oa-admin-access-card
.choices__placeholder {
    color: #7a8482;
    opacity: 1;
}

/* =========================================================
   ADMIN REVOKE ACCESS
========================================================= */

.oa-admin-revoke-card {
    overflow: visible;
    padding: 27px 29px;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 14px 38px
        rgba(31, 42, 55, 0.07);
}

.oa-admin-revoke-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 23px;
}

.oa-admin-revoke-header h2,
.oa-admin-revoke-results-header h2 {
    margin: 2px 0 0;
    color: #173b37;
    font-family: "Montserrat", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
}

.oa-admin-revoke-header p {
    margin: 5px 0 0;
    color: #6c7674;
    font-size: 0.86rem;
    line-height: 1.55;
}


/* =========================================================
   USER SEARCH
========================================================= */

.oa-admin-revoke-search {
    position: relative;
}

.oa-admin-revoke-search .form-label {
    color: #263b38;
    font-size: 0.83rem;
    font-weight: 700;
}

.oa-admin-revoke-input-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.oa-admin-revoke-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.oa-admin-revoke-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #72807d;
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.oa-admin-revoke-input-wrap .form-control {
    min-height: 46px;
    padding-left: 44px;
    border-color: rgba(1, 101, 96, 0.16);
    border-radius: 12px;
    background: #fbfdfc;
    box-shadow: none;
}

.oa-admin-revoke-input-wrap .form-control:focus {
    border-color: rgba(1, 101, 96, 0.52);
    box-shadow:
        0 0 0 0.2rem
        rgba(1, 101, 96, 0.09);
}


/* =========================================================
   RESULTS
========================================================= */

.oa-admin-revoke-results {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
}

.oa-admin-revoke-results-header {
    margin-bottom: 16px;
}

.oa-admin-revoke-courses {
    min-height: 145px;
}

.oa-admin-revoke-empty,
.oa-admin-revoke-loading {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 32px 20px;
    border: 1px dashed rgba(1, 101, 96, 0.2);
    border-radius: 17px;
    background: #f9fbfb;
    text-align: center;
}

.oa-admin-revoke-empty > .material-icons {
    color: #879491;
    font-size: 39px;
}

.oa-admin-revoke-empty strong,
.oa-admin-revoke-loading strong {
    color: #334643;
    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;
}

.oa-admin-revoke-empty p {
    max-width: 440px;
    margin: 0;
    color: #74807d;
    font-size: 0.83rem;
    line-height: 1.5;
}

.oa-admin-revoke-empty.is-error {
    border-color: rgba(180, 35, 24, 0.25);
    background: rgba(180, 35, 24, 0.05);
}

.oa-admin-revoke-empty.is-error > .material-icons {
    color: #b42318;
}


/* =========================================================
   LOADING
========================================================= */

.oa-admin-revoke-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(1, 101, 96, 0.16);
    border-top-color: #016560;
    border-radius: 50%;
    animation:
        oa-admin-revoke-spin
        0.8s linear infinite;
}

@keyframes oa-admin-revoke-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   AJAX COURSE LIST
========================================================= */

/*
 * Stilovi su namerno dovoljno opšti da obuhvate
 * postojeći HTML koji vraća get_user_courses.php.
 */

.oa-admin-revoke-courses .list-group {
    display: grid;
    gap: 9px;
}

.oa-admin-revoke-courses .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 14px;
    background: #f9fbfb;
}

.oa-admin-revoke-courses .list-group-item + .list-group-item {
    border-top-width: 1px;
}

.oa-admin-revoke-courses
.revoke-access-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid rgba(180, 35, 24, 0.25);
    border-radius: 10px;
    background: rgba(180, 35, 24, 0.06);
    color: #b42318;
    font-size: 0.78rem;
    font-weight: 700;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.oa-admin-revoke-courses
.revoke-access-btn:hover {
    border-color: #b42318;
    background: #b42318;
    color: #ffffff;
}

.oa-admin-revoke-courses
.revoke-access-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .oa-admin-revoke-card {
        padding: 21px 18px;
        border-radius: 20px;
    }

    .oa-admin-revoke-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .oa-admin-revoke-input-row .oa-btn {
        width: 100%;
        justify-content: center;
    }

    .oa-admin-revoke-courses .list-group-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-admin-revoke-courses
    .revoke-access-btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN ASSIGN PROFESSOR ROLE
========================================================= */

.oa-admin-role-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 30px;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 14px 38px
        rgba(31, 42, 55, 0.07);
}

.oa-admin-role-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 25px;
}

.oa-admin-role-header h2 {
    margin: 2px 0 0;
    color: #173b37;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.oa-admin-role-header p {
    margin: 5px 0 0;
    color: #6c7674;
    font-size: 0.86rem;
    line-height: 1.55;
}

.oa-admin-role-card .form-label {
    color: #263b38;
    font-size: 0.83rem;
    font-weight: 700;
}

.oa-admin-role-card .form-text {
    margin-top: 6px;
    color: #7a8482;
    font-size: 0.76rem;
}

.oa-admin-role-input-wrap {
    position: relative;
}

.oa-admin-role-input-wrap > .material-icons {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    color: #72807d;
    font-size: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.oa-admin-role-input-wrap .form-control {
    min-height: 46px;
    padding-left: 44px;
    border-color: rgba(1, 101, 96, 0.16);
    border-radius: 12px;
    background: #fbfdfc;
    box-shadow: none;
}

.oa-admin-role-input-wrap .form-control:focus {
    border-color: rgba(1, 101, 96, 0.52);
    box-shadow:
        0 0 0 0.2rem
        rgba(1, 101, 96, 0.09);
}

.oa-admin-role-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 22px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 180, 28, 0.27);
    border-radius: 14px;
    background: rgba(255, 180, 28, 0.09);
}

.oa-admin-role-notice > .material-icons {
    flex: 0 0 auto;
    color: #936100;
    font-size: 21px;
}

.oa-admin-role-notice strong {
    color: #5d4c28;
    font-size: 0.84rem;
}

.oa-admin-role-notice p {
    margin: 3px 0 0;
    color: #675734;
    font-size: 0.81rem;
    line-height: 1.55;
}

.oa-admin-role-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 25px -30px -28px;
    padding: 19px 30px;
    border-top: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 0 0 24px 24px;
    background: #f8fbfa;
}

@media (max-width: 767px) {
    .oa-admin-role-card {
        padding: 21px 18px;
        border-radius: 20px;
    }

    .oa-admin-role-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        margin:
            22px -18px -21px;
        padding: 18px;
        border-radius:
            0 0 20px 20px;
    }

    .oa-admin-role-footer .oa-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   ADMIN ALL PAYMENTS
========================================================= */

.oa-admin-payments-page-card {
    overflow: hidden;
    border: 1px solid rgba(1, 101, 96, 0.11);
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 14px 38px
        rgba(31, 42, 55, 0.07);
}


/* =========================================================
   PAYMENTS SUMMARY
========================================================= */

.oa-admin-payments-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 28px;
    border-bottom: 1px solid rgba(1, 101, 96, 0.1);
}

.oa-admin-payments-summary
.oa-admin-card-header p {
    margin: 5px 0 0;
    color: #6e7876;
    font-size: 0.84rem;
}

.oa-admin-payments-summary-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(95px, 1fr));
    gap: 9px;
}

.oa-admin-payments-summary-stats > div {
    display: grid;
    min-width: 100px;
    padding: 11px 12px;
    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 14px;
    background: #f8fbfa;
    text-align: center;
}

.oa-admin-payments-summary-stats strong {
    color: #016560;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
}

.oa-admin-payments-summary-stats span {
    margin-top: 3px;
    color: #73807d;
    font-size: 0.69rem;
}


/* =========================================================
   PAYMENT TABS
========================================================= */

.oa-admin-payment-tabs {
    display: flex;
    gap: 8px;
    padding: 18px 28px 0;
}

.oa-admin-payment-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 15px;
    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 12px;
    background: #f8fbfa;
    color: #52615e;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.oa-admin-payment-tab > .material-icons {
    font-size: 19px;
}

.oa-admin-payment-tab:hover {
    border-color: rgba(1, 101, 96, 0.32);
    color: #016560;
}

.oa-admin-payment-tab.is-active {
    border-color: #016560;
    background: #016560;
    color: #ffffff;
}

.oa-admin-payment-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    min-height: 23px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
    font-size: 0.7rem;
}

.oa-admin-payment-tab.is-active
.oa-admin-payment-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}


/* =========================================================
   PAYMENT PANELS
========================================================= */

.oa-admin-payment-panel {
    padding: 20px 28px 27px;
}

.oa-admin-payment-panel[hidden] {
    display: none;
}

.oa-admin-all-payments-list {
    max-height: 650px;
}


/* =========================================================
   PAYMENT RECORD
========================================================= */

.oa-admin-payment-record {
    align-items: flex-start;
    cursor: default;
}

.oa-admin-payment-record:hover {
    transform: none;
    border-color: rgba(1, 101, 96, 0.18);
    background: #f9fbfb;
    color: #263b38;
}

.oa-admin-payment-user {
    display: grid;
    min-width: 0;
}

.oa-admin-payment-user strong {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

.oa-admin-payment-id {
    margin-top: 2px;
    color: #7b8583;
    font-size: 0.71rem;
}

.oa-admin-payment-value {
    flex: 0 0 auto;
}

.oa-admin-payment-amount {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(1, 101, 96, 0.1);
    color: #016560;
    font-size: 0.78rem;
    white-space: nowrap;
}

.oa-admin-payment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 8px;
}

.oa-admin-payment-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #687370;
    font-size: 0.75rem;
}

.oa-admin-payment-meta .material-icons {
    color: #73817e;
    font-size: 16px;
}

.oa-admin-payment-method {
    font-weight: 700;
}

.oa-admin-payment-comment {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 11px;
    background: #ffffff;
    color: #55615f;
    font-size: 0.8rem;
    line-height: 1.5;
}

.oa-admin-payment-comment > .material-icons {
    flex: 0 0 auto;
    color: #8b9693;
    font-size: 17px;
}

.oa-admin-payment-comment.is-empty {
    color: #87918f;
    font-style: italic;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {
    .oa-admin-payments-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .oa-admin-payments-summary-stats {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .oa-admin-payments-summary {
        padding: 21px 18px;
    }

    .oa-admin-payments-summary-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .oa-admin-payments-summary-stats > div {
        min-width: 0;
    }

    .oa-admin-payment-tabs {
        padding: 17px 18px 0;
    }

    .oa-admin-payment-tab {
        flex: 1 1 50%;
        padding: 8px 10px;
    }

    .oa-admin-payment-panel {
        padding: 18px;
    }

    .oa-admin-payment-record {
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .oa-admin-payments-page-card {
        border-radius: 20px;
    }

    .oa-admin-payment-top {
        align-items: flex-start;
    }

    .oa-admin-payment-value {
        margin-top: 3px;
    }

    .oa-admin-payment-meta {
        flex-direction: column;
        gap: 5px;
    }
}

/* =========================================================
   COURSE PAGE — DIGITAL BOOKS
========================================================= */

.sc-course-books-card {
    border-color: rgba(1, 101, 96, 0.22);
}

.sc-course-book-item {
    align-items: center;
    background:
        linear-gradient(
            135deg,
            #f4fbfa,
            #ffffff
        );
    border-color: #bddbd8;
}

.sc-course-book-item:hover {
    background:
        linear-gradient(
            135deg,
            #eaf7f5,
            #ffffff
        );
    border-color: #78bdb8;
}

.sc-course-book-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
}

.sc-course-book-copy small {
    color: #6b7d7a;
    font-size: 0.73rem;
    line-height: 1.35;
}

.sc-course-book-item
.sc-course-library-item-icon {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #016560,
            #004d49
        );
}

.sc-course-book-item
.sc-course-library-open {
    color: #016560;
}

/* =========================================================
   PROFESSOR DASHBOARD CTA
========================================================= */

.oa-professor-dashboard-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 28px;
    padding: 26px 28px;

    background:
        linear-gradient(
            110deg,
            rgba(1, 101, 96, 0.08),
            rgba(255, 180, 28, 0.05)
        ),
        #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.14);
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(18, 55, 53, 0.08);

    overflow: hidden;
}


/* žuti detalj na vrhu */
.oa-professor-dashboard-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #016560,
        #ffb41c,
        #fd9435
    );
}


.oa-professor-dashboard-cta-content {
    display: flex;
    align-items: center;
    gap: 18px;
}


.oa-professor-dashboard-cta-icon {
    width: 58px;
    height: 58px;

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

    flex-shrink: 0;

    border-radius: 18px;

    background: #016560;
    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(1, 101, 96, 0.18);
}


.oa-professor-dashboard-cta-icon .material-icons {
    font-size: 29px;
}


.oa-professor-dashboard-label {
    display: block;

    margin-bottom: 3px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: #016560;
}


.oa-professor-dashboard-cta-text h2 {
    margin: 0 0 5px;

    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    font-weight: 700;

    color: #153b39;
}


.oa-professor-dashboard-cta-text p {
    margin: 0;

    font-family: "Open Sans", sans-serif;
    font-size: 14px;

    color: #5c6e6d;
}


/* Dugme */
.oa-professor-dashboard-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex-shrink: 0;

    min-height: 48px;
    padding: 0 22px;

    border-radius: 14px;

    background: #016560;
    color: #ffffff;

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 8px 20px rgba(1, 101, 96, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.oa-professor-dashboard-button:hover {
    background: #015752;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 11px 25px rgba(1, 101, 96, 0.24);
}


.oa-professor-dashboard-button .material-icons {
    font-size: 19px;

    transition: transform 0.2s ease;
}


.oa-professor-dashboard-button:hover .material-icons {
    transform: translateX(3px);
}


/* Responsive */
@media (max-width: 767px) {

    .oa-professor-dashboard-cta {
        align-items: stretch;
        flex-direction: column;

        padding: 23px 21px;
    }

    .oa-professor-dashboard-cta-content {
        align-items: flex-start;
    }

    .oa-professor-dashboard-button {
        width: 100%;
    }

}

/* =========================================================
   SMARTCLASS STUDY GROUP - THREAD NAVIGATION
========================================================= */

.oa-study-group-composer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


/* ---------------------------------------------------------
   THREAD PANEL
--------------------------------------------------------- */

.oa-study-group-thread-panel {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.12);
    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(25, 60, 58, 0.08);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.oa-study-group-thread-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1.2rem 1.25rem 1rem;

    border-bottom: 1px solid rgba(1, 101, 96, 0.08);
}


.oa-study-group-thread-panel-header > div {
    min-width: 0;
}


.oa-study-group-thread-panel-header span:first-child {
    display: block;

    margin-bottom: 0.2rem;

    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #6c8280;
}


.oa-study-group-thread-panel-header h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;

    color: #123f3c;
}


.oa-study-group-thread-total {
    flex: 0 0 auto;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 34px;

    margin: 0 !important;

    border-radius: 999px;

    background: rgba(1, 101, 96, 0.1);

    font-family: "Montserrat", sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;

    color: #016560 !important;
}


/* ---------------------------------------------------------
   SEARCH
--------------------------------------------------------- */

.oa-study-group-search {
    position: relative;

    display: flex;
    align-items: center;

    margin: 1rem 1rem 0.85rem;
}


.oa-study-group-search > .material-icons {
    position: absolute;
    left: 0.9rem;

    z-index: 1;

    pointer-events: none;

    font-size: 1.15rem;

    color: #54736f;
}


.oa-study-group-search input {
    width: 100%;

    padding: 0.78rem 0.9rem 0.78rem 2.65rem;

    border: 1px solid rgba(1, 101, 96, 0.15);
    border-radius: 13px;

    outline: none;

    background: #f7faf9;

    font-family: "Open Sans", sans-serif;
    font-size: 0.86rem;

    color: #173f3c;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.oa-study-group-search input::placeholder {
    color: #80918f;
}


.oa-study-group-search input:focus {
    border-color: rgba(1, 101, 96, 0.5);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(1, 101, 96, 0.08);
}


/* ---------------------------------------------------------
   THREAD LIST
--------------------------------------------------------- */

.oa-study-group-thread-list {
    display: flex;
    flex-direction: column;

    padding: 0 0.7rem 0.8rem;
}


.oa-study-group-thread-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;

    padding: 0.85rem 0.75rem;

    border-radius: 13px;

    color: inherit;
    text-decoration: none;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.oa-study-group-thread-link + .oa-study-group-thread-link {
    border-top: 1px solid rgba(1, 101, 96, 0.07);
}


.oa-study-group-thread-link:hover {
    background: rgba(1, 101, 96, 0.055);

    color: inherit;

    transform: translateX(2px);
}


.oa-study-group-thread-link-main {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}


.oa-study-group-thread-link-main strong {
    overflow: hidden;

    font-family: "Montserrat", sans-serif;
    font-size: 0.83rem;
    font-weight: 700;

    color: #173f3c;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.oa-study-group-thread-link-main small {
    overflow: hidden;

    font-size: 0.73rem;

    color: #748784;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   REPLY COUNT
--------------------------------------------------------- */

.oa-study-group-thread-replies {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    min-width: 40px;

    padding: 0.32rem 0.48rem;

    border-radius: 999px;

    background: rgba(1, 101, 96, 0.07);

    font-size: 0.72rem;
    font-weight: 700;

    color: #016560;
}


.oa-study-group-thread-replies .material-icons {
    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   EMPTY SEARCH
--------------------------------------------------------- */

.oa-study-group-search-empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    margin: 0 1rem 1rem;
    padding: 0.85rem;

    border-radius: 12px;

    background: #f7faf9;

    font-size: 0.8rem;

    color: #6b7e7b;
}


.oa-study-group-search-empty .material-icons {
    font-size: 1.1rem;

    color: #78918e;
}


/*
 * Osigurava da JS hidden atribut uvek
 * zaista sakrije filtrirane elemente.
 */
.oa-study-group-thread-link[hidden],
.oa-study-group-search-empty[hidden],
.oa-study-group-topic[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   TARGET TOPIC
   Kada korisnik klikne temu u levoj navigaciji.
--------------------------------------------------------- */

.oa-study-group-topic:target {
    scroll-margin-top: 1.5rem;

    box-shadow:
        0 0 0 3px rgba(255, 180, 28, 0.22),
        0 12px 32px rgba(25, 60, 58, 0.08);
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 991.98px) {

    .oa-study-group-thread-panel {
        border-radius: 18px;
    }


    .oa-study-group-thread-list {
        max-height: 330px;
        overflow-y: auto;
    }

}

/* =========================================================
   STUDY GROUP - COLLAPSIBLE NEW DISCUSSION
========================================================= */

.oa-study-group-composer-collapsible {
    overflow: hidden;
}


.oa-study-group-composer-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 0.85rem;

    padding: 1.1rem 1.2rem;

    border: 0;
    background: transparent;

    text-align: left;

    cursor: pointer;
}


.oa-study-group-composer-toggle:hover {
    background: rgba(1, 101, 96, 0.035);
}


.oa-study-group-composer-toggle-copy {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}


.oa-study-group-composer-toggle-copy > span {
    margin-bottom: 0.1rem;

    font-family: "Montserrat", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #718582;
}


.oa-study-group-composer-toggle-copy strong {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;

    color: #016560;
}


.oa-study-group-composer-toggle-copy small {
    margin-top: 0.15rem;

    font-size: 0.76rem;
    line-height: 1.4;

    color: #687b78;
}


.oa-study-group-composer-chevron {
    flex: 0 0 auto;

    font-size: 1.4rem;

    color: #016560;

    transition: transform 0.2s ease;
}


.oa-study-group-composer-toggle[aria-expanded="true"]
.oa-study-group-composer-chevron {
    transform: rotate(180deg);
}


.oa-study-group-composer-collapse-body {
    padding: 1.15rem 1.2rem 1.25rem;

    border-top: 1px solid rgba(1, 101, 96, 0.08);
}

/* =========================================================
   SMARTCLASS - STUDENT ACTIVITY ANALYTICS
========================================================= */

.oa-student-activity-page {
    background: #f5f8f7;
    color: #183c39;
}


.oa-student-activity-main {
    padding: 2rem 0 4rem;
}


/* =========================================================
   HERO
========================================================= */

.oa-student-activity-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    margin-bottom: 1.5rem;
    padding: 1.6rem 1.75rem;

    background: #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(25, 60, 58, 0.07);
}


.oa-student-activity-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.oa-student-activity-hero-icon {
    flex: 0 0 auto;

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

    width: 58px;
    height: 58px;

    border-radius: 18px;

    background: rgba(1, 101, 96, 0.1);

    color: #016560;
}


.oa-student-activity-hero-icon .material-icons {
    font-size: 1.8rem;
}


.oa-student-activity-kicker {
    display: block;

    margin-bottom: 0.25rem;

    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #6b8582;
}


.oa-student-activity-heading h1 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 700;

    color: #123f3c;
}


.oa-student-activity-heading p {
    margin: 0.35rem 0 0;

    font-size: 0.92rem;
    line-height: 1.5;

    color: #647976;
}


/* =========================================================
   STUDENT + COURSE CONTEXT
========================================================= */

.oa-student-activity-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;

    background: #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 20px;

    box-shadow:
        0 8px 24px rgba(25, 60, 58, 0.05);
}


.oa-student-activity-context > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.9rem;

    min-width: 0;
}


.oa-student-activity-avatar {
    flex: 0 0 auto;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #016560;

    font-family: "Montserrat", sans-serif;
    font-weight: 700;

    color: #ffffff;
}


.oa-student-activity-context > div:first-child > div > span,
.oa-student-activity-course > span {
    display: block;

    margin-bottom: 0.18rem;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #718582;
}


.oa-student-activity-context h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;

    color: #173f3c;
}


.oa-student-activity-context small {
    display: block;

    margin-top: 0.12rem;

    font-size: 0.8rem;

    color: #738784;
}


.oa-student-activity-course {
    min-width: 220px;

    padding: 0.8rem 1rem;

    border-radius: 14px;

    background: #f5f9f8;

    text-align: right;
}


.oa-student-activity-course strong {
    display: block;

    font-family: "Montserrat", sans-serif;
    font-size: 0.92rem;

    color: #016560;
}


/* =========================================================
   METRICS
========================================================= */

.oa-student-activity-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;

    margin-bottom: 1.5rem;
}


.oa-student-activity-stat {
    min-width: 0;

    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    padding: 1.1rem;

    background: #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 18px;

    box-shadow:
        0 8px 22px rgba(25, 60, 58, 0.05);
}


.oa-student-activity-stat > .material-icons {
    flex: 0 0 auto;

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

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: rgba(1, 101, 96, 0.08);

    font-size: 1.2rem;

    color: #016560;
}


.oa-student-activity-stat > div {
    min-width: 0;
}


.oa-student-activity-stat span:not(.material-icons) {
    display: block;

    margin-bottom: 0.25rem;

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;

    color: #718582;
}


.oa-student-activity-stat strong {
    display: block;

    font-family: "Montserrat", sans-serif;
    font-size: 1.12rem;
    font-weight: 700;

    color: #173f3c;
}


.oa-student-activity-stat small {
    display: block;

    margin-top: 0.18rem;

    font-size: 0.68rem;

    color: #879895;
}


/* =========================================================
   ACTIVITY HISTORY
========================================================= */

.oa-student-activity-history {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(1, 101, 96, 0.1);
    border-radius: 22px;

    box-shadow:
        0 12px 32px rgba(25, 60, 58, 0.06);
}


.oa-student-activity-history > header {
    padding: 1.3rem 1.5rem;

    border-bottom: 1px solid rgba(1, 101, 96, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(1, 101, 96, 0.045),
            rgba(255, 180, 28, 0.035)
        );
}


.oa-student-activity-history > header span {
    display: block;

    margin-bottom: 0.2rem;

    font-family: "Montserrat", sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #708582;
}


.oa-student-activity-history > header h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;

    color: #123f3c;
}


/* =========================================================
   TIMELINE LIST
========================================================= */

.oa-student-activity-list {
    padding: 0.35rem 1.5rem 0.7rem;
}


.oa-student-activity-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.9rem;

    padding: 0.9rem 0;
}


.oa-student-activity-item:not(:last-child) {
    border-bottom: 1px solid rgba(1, 101, 96, 0.07);
}


.oa-student-activity-item-icon {
    flex: 0 0 auto;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(1, 101, 96, 0.08);

    color: #016560;
}


.oa-student-activity-item-icon .material-icons {
    font-size: 1.08rem;
}


.oa-student-activity-item > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    width: 100%;
    min-width: 0;
}


.oa-student-activity-item strong {
    font-family: "Montserrat", sans-serif;
    font-size: 0.86rem;
    font-weight: 600;

    color: #244b48;
}


.oa-student-activity-item time {
    flex: 0 0 auto;

    font-size: 0.75rem;

    color: #81928f;
}


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

.oa-student-activity-empty {
    padding: 3rem 1.5rem;

    text-align: center;
}


.oa-student-activity-empty > .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 0.9rem;

    border-radius: 50%;

    background: rgba(1, 101, 96, 0.08);

    font-size: 1.7rem;

    color: #016560;
}


.oa-student-activity-empty h3 {
    margin: 0 0 0.4rem;

    font-family: "Montserrat", sans-serif;
    font-size: 1rem;

    color: #173f3c;
}


.oa-student-activity-empty p {
    margin: 0;

    font-size: 0.86rem;

    color: #738784;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199.98px) {

    .oa-student-activity-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 767.98px) {

    .oa-student-activity-main {
        padding-top: 1.25rem;
    }


    .oa-student-activity-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 1.3rem;
    }


    .oa-student-activity-hero > .oa-btn {
        width: 100%;
        justify-content: center;
    }


    .oa-student-activity-context {
        align-items: stretch;
        flex-direction: column;

        padding: 1.2rem;
    }


    .oa-student-activity-course {
        min-width: 0;

        text-align: left;
    }


    .oa-student-activity-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .oa-student-activity-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }

}


@media (max-width: 479.98px) {

    .oa-student-activity-heading {
        align-items: flex-start;
    }


    .oa-student-activity-hero-icon {
        width: 48px;
        height: 48px;

        border-radius: 15px;
    }


    .oa-student-activity-stats {
        grid-template-columns: 1fr;
    }


    .oa-student-activity-stat {
        align-items: center;
    }


    .oa-student-activity-item > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

}