/* BACK-NAVIGATION-351: jedinstveni izgled i čitljivost svih STVARNIH natrag kontrola.
   Primjenjuje se isključivo na .arena-back351 (dodaje se uz postojeće kontekstne klase).
   Ne dira: klizače, karusele, next/previous kontrole, otvaranje/zatvaranje panela.
   Učitava se POSLJEDNJI u <head> svakog renderera i svih samostalnih dokumenata. */

html body .arena-back351.arena-back351 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* kontrola se nikad ne smije skupiti (smanjiti) u uskom flex/grid retku zaglavlja */
    flex: 0 0 auto !important;
    gap: 6px !important;
    box-sizing: border-box !important;

    /* kvadratne kontrole pretvorene u horizontalne oznake sa tekstom */
    width: auto !important;
    /* max-content = nikad uže od sadržaja (ikona + natpis); uz min-height 44px
       time i dalje ostvaruje cilj dodira veći od 44x44 */
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 12px !important;

    white-space: nowrap !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer;
}

/* Skriveno stanje ostaje skriveno. Gornji display:inline-flex !important inače bi
   otkrio skrivene statefulne kontrole (npr. data-clock-return) koje JS vrti
   hidden atributom. Ovdje se [hidden] vraća na display:none bez ijednog drugog
   utjecaja na vidljive kontrole. */
html body .arena-back351.arena-back351[hidden] {
    display: none !important;
}

/* ikona: canonical assets/icons/robo-arena/back.svg, uvijek 28px */
html body .arena-back351.arena-back351 > img,
html body .arena-back351.arena-back351 > svg {
    display: block !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

/* vidljiva kratka oznaka (standardno "Natrag"), 14px podebljano */
html body .arena-back351.arena-back351 > span {
    display: block !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal;
    white-space: nowrap !important;
}

/* Tekstualni natrag natpis koji se prikazuje umjesto prazne slike */
html body .arena-back351.arena-back351 .arena-back351__label {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Konteksti koji su kvadratni gumbi: poništava samo širinu/visinu/padding na ovoj klasi.
   Boje, pozicija, border i hover ostaju kako ih je zadao kontekst. */
html body :is(
    .results-back,
    .lb326-back,
    .tasks304-back,
    .mail310-back,
    .class316-back,
    .dashboard-back,
    .reward321-back,
    .rewards-back,
    .teacher-management-back,
    .devices315-back,
    .inbox308-back,
    .clock337-back,
    .p347-icon,
    .install318-back,
    .install-reference-back,
    .parent-forgot-back,
    .parent-verify-back,
    .parent-login-v2-back,
    .parent-register-v2-back,
    .teacher-signin-reference-back,
    .teacher-register-reference-back,
    .child-id-back,
    .foundation-back,
    .trainer-back,
    .ra-game-back,
    .switch-back,
    .t329-back,
    .d335-back,
    .pc347-back,
    .back
).arena-back351.arena-back351 {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 12px !important;
}

/* zaglavlja s fiksnim pozicioniranjem: oznaka ostaje uz strelicu, ne preklapa sadržaj */
html body .arena-back351.arena-back351 > img + span,
html body .arena-back351.arena-back351 > svg + span {
    align-self: center !important;
}

/* === IZMJERENO 2026-10-08: tri konkretna preklapanja koja generičko pravilo nije
   moglo popraviti jer ih kontekstni stilovi pobjeđuju specifičnošću. ===

   1) /play.php – body.palace-setup-318 #game-setup .trainer-back (1,2,1 !important)
      držao je kvadrat 46x46 s overflow:hidden, pa je natpis "Natrag" rezan.
      Novi selektor (1,4,2) pobjeđuje; position/inset ostaju iz palace-setup-318
      (kontrola ostaje apsolutno pozicionirana), samo je mjerenje/visina/padding
      usklađeno s oznakom. */

/* ---------- 1) dječja priprema /play.php (palace-setup-318) ---------- */
html body.palace-setup-318 #game-setup .trainer-back.arena-back351.arena-back351 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 22px !important;
    overflow: visible !important;
    /* position / inset / background / border ostaju kako ih je zadao palace-setup-318 */
}

html body.palace-setup-318 #game-setup .trainer-back.arena-back351.arena-back351 > img,
html body.palace-setup-318 #game-setup .trainer-back.arena-back351.arena-back351 > svg {
    display: block !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

/* ---------- 2) /games.php?view=tasks – .tasks304-back u mreži zaglavlja ----------
   Prvi stupac mreže bio je 44px, pa je width:auto razvukao kontrolu na 44px i
   natpis je izlazio iz pilota. Kontrola sada sama određuje širinu, a zaglavlje
   dobiva stupac od 100px; logo (92/90/112px) i zvono od 44px ostaju na svojim
   mjestima i ne dodiruju se ni na 360px (100 + 12 + 1fr + 12 + 44 = 332px). */
html body .tasks304 .tasks304-header > .tasks304-back.arena-back351.arena-back351 {
    min-width: max-content !important;
    justify-self: start !important;
    flex: none !important;
}

html body .tasks304 .tasks304-header {
    grid-template-columns: 100px 112px 1fr 48px;
}

@media (max-width: 900px) {
    html body .tasks304 .tasks304-header {
        grid-template-columns: 100px 90px 1fr 44px;
    }
}

@media (max-width: 600px) {
    html body .tasks304 .tasks304-header {
        grid-template-columns: 100px 1fr 44px;
    }
}

/* ---------- 3) Nastavničko zaglavlje (.teacher-app-header) ----------
   Zaglavlje je tamnoplavo, a .arena-back-button je transparentan i nasljeđuje
   tamnu boju teksta -> nečitljivo. Kontrola dobije bijelu pilotu s tamnoplavim
   tekstom, polumjer 22px i min-visinu 44px. Pozicija (absolute/top/left/z-index)
   ostaje kako ju je zadao nastavnički kontekst. */
html body .teacher-app-header > .arena-back351.arena-back351 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(4, 26, 82, .24) !important;
    color: #0d3c91 !important;
}

html body .teacher-app-header > .arena-back351.arena-back351:hover,
html body .teacher-app-header > .arena-back351.arena-back351:active {
    background: #fff !important;
    background-image: none !important;
}

html body .teacher-app-header > .arena-back351.arena-back351 > span {
    color: #0d3c91 !important;
}

html body .teacher-app-header > .arena-back351.arena-back351 > img,
html body .teacher-app-header > .arena-back351.arena-back351 > svg {
    display: block !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}

/* Uski zasloni (360px i manje): kontrola ostaje >= 44px i tekst se ne skriva */
@media (max-width: 420px) {
    html body .arena-back351.arena-back351 {
        min-height: 44px !important;
        /* ostaje max-content (ne 44px) inače bi se na malim zaslonima ponovno
           ukrilao natpis; cilj > 44px i dalje vrijedi preko min-height + sadržaja */
        min-width: max-content !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }

    html body .arena-back351.arena-back351 > img,
    html body .arena-back351.arena-back351 > svg {
        width: 28px !important;
        height: 28px !important;
    }

    html body .arena-back351.arena-back351 > span {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
}