/* Börjar stängda */
.page-wrapper.problemlosning .kategori-sub,
.page-wrapper.problemlosning .uppgifter {
    display: none;
}

/* Indentering: varje nivå 1em in från sin förälder */
.page-wrapper.problemlosning ul {
    list-style: none; /* tar bort standard bullets om du vill */
    margin-left: 0;   /* första nivån startar utan indentering */
    padding-left: 0;
}

.page-wrapper.problemlosning ul ul {
    margin-left: 1em; /* andra nivån */
}

.page-wrapper.problemlosning ul ul ul {
    margin-left: 2em; /* tredje nivån, öka för fler nivåer */
}

/* Pekfingermus för alla togglar */
.page-wrapper.problemlosning .toggle {
    cursor: pointer;
    user-select: none;
}

/* Pil-symbol */
.page-wrapper.problemlosning .arrow {
    display: inline-block;
    width: 1em;
}





/* =========================
   Problem header
   ========================= */
.problem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================
   Problem actions (knappar)
   ========================= */
.problem-actions {
    display: flex;
    gap: 10px;              /* jämnt mellanrum mellan knappar */
    align-items: center;
}

/* Alla knappar/ikoner i .problem-actions */
.problem-actions button,
.problem-actions a, 
.problem-actions .eye-indicator {
    flex: 1 1 50px;          /* lika mycket plats för alla */
    display: flex;
    justify-content: center;  /* ikon centrerad horisontellt */
    align-items: center;      /* ikon centrerad vertikalt */
    padding: 8px 0;
    font-size: 30px;          /* enhetlig ikon-storlek */
    border: none;
    background: none;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

/* Alla knappar/ikoner i .problem-actions */
.problem-actions button,
.problem-actions a, {
    cursor: pointer;
}

/* Ta bort fokusram */
.prev-btn:focus,
.next-btn:focus,
.star-btn:focus,
.check-btn:focus,
.random-btn:focus,
.pdf-btn:focus {
    outline: none;
}

/* =========================
   Star-knappar (problem-actions) 
   ========================= */
.star-btn {
    font-size: 22px;         /* behåller originalstorlek */
    color: #d4a800;
}

.star-btn.filled {
    color: #f2c200;
}

/* =========================
   Check-knappar (problem-actions)
   ========================= */
.check-btn {
    transition: 0.15s;
}

/* =========================
   TOC
   ========================= */

/* Gör hela listan till flex-container */
.toc-item {
    display: flex;
    justify-content: space-between; /* Länk till vänster, ikoner till höger */
    align-items: center;            /* Vertikal centering */
    padding: 4px 0;                 /* lite vertikalt utrymme */
}

/* Ikon-container för star, eye, check */
.toc-item .icon-group {
    display: flex;
    gap: 6px;       /* jämnt avstånd mellan ikonerna */
    align-items: center;
}

/* Ikoner – behåll befintliga TOC-stilar */
.toc-star,
.toc-check {
    cursor: default;
    font-size: 18px;  /* justera storlek efter smak */
	transform: translateY(-20%);
}

/* Star och check fyllning som tidigare */
.toc-star.filled {
    color: #f2c200;
	opacity: 1;
}

.toc-check.checked {
    opacity: 1;
    color: #2ca24c;
}

.toc-star,
.toc-check {
    opacity: 0.25;
    color: #888;
}

.page-wrapper.problemlosning .toc {
    border: none;
	max-height: 70vh;
}

/* =========================
   Eye-indikator
   ========================= */
.eye-indicator {
    font-size: 30px;
    opacity: 0.25;
	cursor: none;
}

.toc-eye {
	opacity: 0.25;
	cursor: none;
    font-size: 18px;  /* justera storlek efter smak */
	transform: translateY(-20%);
}

.problem-actions .eye-indicator {
    cursor: none;
	opacity: 0.25
}

.eye-indicator.seen, .toc-eye.seen {
    opacity: 1;
}

/* =========================
   PDF modal
   ========================= */
#pdf-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

.pdf-content {
    position: absolute;
    width: 80%;
    height: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
}

.pdf-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#close-pdf {
    position: absolute;
    right: 100px;
    top: 100px;
    z-index: 10;
    cursor: pointer;
}


.check-btn, .toc-check{
	opacity:0.25; 
	color:#888; 
	} 
	
.check-btn.checked, .toc-check.checked {
	opacity:1; 
	color:#2ca24c; 
	}
	


.random-btn {
    display: inline-block;       /* viktigt för transform */
}

.random-btn.spin {
    animation: spin 1s linear forwards;  /* 2 sek, jämn rotation, behåll slutposition */
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Gör hela listan till flex-container */
.visibility-settings {
    display: flex;
    justify-content: space-between; /* Länk till vänster, ikoner till höger */
    align-items: center;            /* Vertikal centering */
    padding: 0;                 /* lite vertikalt utrymme */
}


.visibility-icon-group {
    display: flex;
    gap: 6px;       /* jämnt avstånd mellan ikonerna */
    align-items: center;
}


.visibility-star,
.visibility-check,
.visibility-eye {
    cursor: pointer;
    font-size: 18px;  /* justera storlek efter smak */
	transform: translateY(-20%);
	border: none;
    background: none;
	padding: 0;
}

.visibility-star:focus,
.visibility-check:focus,
.visibility-eye:focus {
    outline: none;
}

.rensa-uppgifter {
    cursor: pointer;
	border: none;
    background: none;
	padding: 0;
}

.rensa-uppgifter:focus {
    outline: none;
}