/* Markdown-Styles */

:root {
    /* alert-box */
    --alert-color-bg: #f8d7da;
    --alert-color: #721c24;
    --alert-color-border: #f5c6cb;
    --alert-color-border-left: #ec4a5a;

    /* warning-box */
    --warning-color-bg: #fff3cd;
    --warning-color: #856404;
    --warning-color-border: #ffe28a;
    --warning-color-border-left: #e7c247;

    /* info-box */
    --info-color-bg: #d1ecf1;
    --info-color: #0c5460;
    --info-color-border: #bee5eb;
    --info-color-border-left: #0cb7d1;
    
    /* anleitung, öppe Windows... */
    --anleitung-color-bg: #ddd;
    --anleitung-color: #444;
    --anleitung-color-border: #ccc;
    --anleitung-color-border-left: #555;
    
    /* mac */
    --mac-color-bg: #FABF8F;
    --mac-color: #000;
    --mac-color-expanded: #fff;
    --mac-color-border: #f7b077;
    --mac-color-border-left: #f89b50;

    /* Aufgabe */
    --aufgabe-color-bg: #f7f7f7;
    --aufgabe-color: #000;
    --aufgabe-color-border: #dddbdb;
    --aufgabe-color-border-left: #636363;
	
    /* Antwortbox (Status open)*/
    --antwort-color-bg: #fff;
    --antwort-color: #000;
    --antwort-color-border: #000;
    --antwort-color-border-left: #000;

	/* Definition */
    --def-color-bg: #E9F2F9;
    --def-color: #000;
    --def-color-border: #C3DCEF;
    --def-color-border-left: #0364B8;

    /* Aufgabe erledigt */
    --done-color-bg: #e9f7e9;
    --done-color: #444;
    --done-color-border: #2e772a;
    --done-color-border-left: #2e772a;

    /* Warten auf Lehrperson */
    --ask-color-bg: #f5d6b0;
    --ask-color: #444;
    --ask-color-border: #f9af10;
    --ask-color-border-left: #f9af10;

    /* Aufgabe falsch */
    --wrong-color-bg: #f9caca;
    --wrong-color: #444;
    --wrong-color-border: #772a2a;
    --wrong-color-border-left: #772a2a;

}

b {
    font-weight: bold;
}

h3 {
    font-size: 1.7rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.3rem;
}





/* ================= Alert-Boxen ================ */

/* endlich verschachteltes CSS ;-) */

div.notice {
    padding: 2px 10px 2px 10px;
    margin: 0px 10px 20px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

    &.alert {
        background-color: var(--alert-color-bg);
        border-color: var(--alert-color-border);
        color: var(--alert-color);
        border-left: 5px solid var(--alert-color-border-left);
    }

    &.warning {
        background-color: var(--warning-color-bg);
        border-color: var(--warning-color-border);
        color: var(--warning-color);
        border-left: 5px solid var(--warning-color-border-left);
    }

    &.info {
        background-color: var(--info-color-bg);
        border-color: var(--info-color-border);
        color: var(--info-color);
        border-left: 5px solid var(--info-color-border-left);
    }

    &.aufgabe {
        background-color: var(--aufgabe-color-bg);
        border-color: var(--aufgabe-color-border);
        color: var(--aufgabe-color);
        border-left: 5px solid var(--aufgabe-color-border-left);
    }
	
	&.def {
        background-color: var(--def-color-bg);
        border-color: var(--def-color-border);
        color: var(--def-color);
        border-left: 5px solid var(--def-color-border-left);
    }
	

}

div.notice-complex {
    margin: 0px 10px 20px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    
    &.alert {
        border-left: 5px solid var(--alert-color-border-left) !important;
        background-color: var(--alert-color-bg);
        color: var(--alert-color);
        border-color: var(--alert-color-border);
    }

    &.warning {
        border-left: 5px solid var(--warning-color-border-left) !important;
        background-color: var(--warning-color-bg);
        color: var(--warning-color);
        border-color: var(--warning-color-border);
    }

    &.info {
        background-color: var(--info-color-bg);
        border-color: var(--info-color-border);
        color: var(--info-color);
        border-left: 5px solid var(--info-color-border-left) !important;
    }

    &.aufgabe {
            background-color: var(--aufgabe-color-bg);
            border-color: var(--aufgabe-color-border);
            color: var(--aufgabe-color);
            border-left: 5px solid var(--aufgabe-color-border-left) !important;
    
            &.done {
                background-color: var(--done-color-bg);
                border-color: var(--done-color-border);
                color: var(--done-color);
                border-left: 5px solid var(--done-color-border-left) !important;
            }

            &.ask {
                background-color: var(--ask-color-bg);
                border-color: var(--ask-color-border);
                color: var(--ask-color);
                border-left: 5px solid var(--ask-color-border-left) !important;
            }

            &.wrong {
                background-color: var(--wrong-color-bg);
                border-color: var(--wrong-color-border);
                color: var(--wrong-color);
                border-left: 5px solid var(--wrong-color-border-left) !important;
            }
    }

	&.def {
            background-color: var(--def-color-bg);
            border-color: var(--def-color-border);
            color: var(--def-color);
            border-left: 5px solid var(--def-color-border-left) !important;
    }

    div.notice-header {
        display: flex;
        font-weight: bold;
        margin-bottom: 5px;
        padding: 4px 10px 4px 10px;
        
        &.alert {
            color: var(--alert-color);
            border-bottom: 1px solid var(--alert-color-border-left);
        }

        &.warning {
            color: var(--warning-color);
            border-bottom: 1px solid var(--warning-color-border-left);
        }

        &.info {
            color: var(--info-color);
            border-bottom: 1px solid var(--info-color-border-left);
        }
		
		&.aufgabe {
		    color: var(--aufgabe-color);
            border-bottom: 1px solid var(--aufgabe-color-border-left);
		}
		
		&.def {
			color: var(--def-color);
            border-bottom: 1px solid var(--def-color-border-left);
		}

        & .checkbox {
            margin-right: 10px;
            font-size: 1.5rem;
            transform: translateY(1px);
        }
    }

    div.notice-content {
        padding: 4px 10px 4px 10px;
    }
}

/* Die Antwort- resp. Task-Felder im Skript */

.task_toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin: 0 0 3px 4px;
    padding-bottom: 0;
    line-height: 1.5rem;
}

.task_toolbar button {
    margin: 0;
    padding: 0 6px;
    border: none;
    color: white;
    font-size: 0.8rem;
    height: 1.8rem;
    border-radius: 4px;
    cursor: pointer;
    min-width: 30px;
}

.toolbar-sep {
    width: 1px;
    height: 24px;
    background: #ccc;
    margin: 0 6px;
}

/* Die Checkbox im Aufgabenblock */
button.task-checkbox {
    background-color:transparent;
    padding: 0;
    margin: 0;
    transition: transform 0.1s ease;

    &:active {
        transform: scale(0.98);
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }

    & i {
        font-size: 1.4rem;
        font-weight: bold;
        
        &.dh-task-open{
            color: black;
        }
        &.dh-task-wrong{
            color: red;
        }
        &.dh-task-done{
            color: green;
        }
        &.dh-task-ask{
            color: rgb(255, 123, 0);
        }
    }
}



.task-entry {
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    background-color: var(--antwort-color-bg);
    border-color: var(--antwort-color-border);
    color: var(--antwort-color);
    border-left: 5px solid var(--antwort-color-border-left);
    margin-top: 0;
    padding: 5px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue",
             Arial, sans-serif;
}   

.task-entry:focus {
  outline: 5px solid #007BFF; /* z. B. Bootstrap-Blau */
  outline-offset: -5px;
}

.task-entry-container {
    position: relative;
}

.task-entry-container .save-task-status {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 25px;
    font-size: 0.7rem;
    font-weight:100 !important; 
    text-align: right;
}


div.accordion {
    margin: 0px 10px 20px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    
    &.alert {
        border-left: 5px solid var(--alert-color-border-left) !important;
        background-color: var(--alert-color-bg);
        color: var(--alert-color);
        border-color: var(--alert-color-border);
    }

    &.warning {
        border-left: 5px solid var(--warning-color-border-left) !important;
        background-color: var(--warning-color-bg);
        color: var(--warning-color);
        border-color: var(--warning-color-border);
    }

    &.info {
        background-color: var(--info-color-bg);
        border-color: var(--info-color-border);
        color: var(--info-color);
        border-left: 5px solid var(--info-color-border-left) !important;
    }

    &.anleitung {
        background-color: var(--anleitung-color-bg);
        border-color: var(--anleitung-color-border);
        color: var(--anleitung-color);
        border-left: 5px solid var(--anleitung-color-border-left) !important;
    }

    &.mac {
        background-color: var(--mac-color-bg);
        border-color: var(--mac-color-border);
        color: var(--mac-color);
        border-left: 5px solid var(--mac-color-border-left) !important;
    }


    div.accordion-header {
        /* font-weight: bold; */
        margin-bottom: -1px;
        padding: 4px 10px 4px 10px;
        cursor: pointer;

        i.icon {
            display: inline-block;
            font-size: 0.8rem;
            vertical-align: top;
            position: relative;
            /* top: 2px; */
            transform-origin: 50% 60%;
            transition: transform 0.3s;
            padding-top: -3px;

            &.expanded {
                padding-top: 0px;
                transform: rotate(90deg);
            }
        }

        &.alert {
            color: var(--alert-color);
            border-bottom: 1px solid var(--alert-color-border);

            &:hover {
                background-color: var(--alert-color-border-left);
                color: var(--alert-color-bg);
            }

            &.expanded {
                background-color: var(--alert-color-border-left);
                color: var(--alert-color-bg);
            }
        }

        &.warning {
            color: var(--warning-color);
            border-bottom: 1px solid var(--warning-color-border);

            &:hover {
                background-color: var(--warning-color-border-left);
                color: var(--warning-color-bg);
            }

            &.expanded {
                background-color: var(--warning-color-border-left);
                color: var(--warning-color-bg);
            }
        }

        &.info {
            color: var(--info-color);
            border-bottom: 1px solid var(--info-color-border);

            &:hover {
                background-color: var(--info-color-border-left);
                color: var(--info-color-bg);
            }

            &.expanded {
                background-color: var(--info-color-border-left);
                color: var(--info-color-bg);
            }
        }

        &.anleitung {
            color: var(--anleitung-color);
            border-bottom: 1px solid var(--anleitung-color-border);
        
            &:hover {
                background-color: var(--anleitung-color-border-left);
                color: var(--anleitung-color-bg);
            }

            &.expanded {
                background-color: var(--anleitung-color-border-left);
                color: var(--anleitung-color-bg);
            }
        }

        &.mac {
            color: var(--mac-color);
            border-bottom: 1px solid var(--mac-color-border);
        
            &:hover {
                background-color: var(--mac-color-border-left);
                color: var(--mac-color-expanded);
            }

            &.expanded {
                background-color: var(--mac-color-border-left);
                color: var(--mac-color-expanded);
            }
        }
    }

    div.accordion-content {
        padding: 0px 10px 0px 10px;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        overflow: hidden;
        max-height: 0;
    }
}


/* =================== Code-Boxen  und inline-Code ============================*/

/* Inline-Code */
code {
    background-color: #f4f4f4;
    color: #0d47a1;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: Consolas, Menlo, DejaVu Sans Mono, Liberation Mono, Lucida Console, monospace;
    font-weight: 300;
    /* font-family: 'Courier New', Courier, monospace; */
}

/* Code-Box */
pre {
    /* background-color: #272822; */
    background-color: #2F2F2F;
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 10px 10px 10px;
    margin: 0px 10px 20px 5px;
    border: 1px solid #444;
    border-radius: 4px;
    overflow: auto; /* Scrollbar */
    font-size: 90%;
    white-space: pre-wrap;
    line-height: 1.1;

    & code {
        color: #f8f8f2;
        padding: initial;
        background-color: #2F2F2F;
    }
}





/* ===================== Code-Highlighting =====================*/
span.keyword1 {
    color: #DCDCAA;
    font-weight: bold;
}

span.keyword2 {
    color: #C586C0;
    font-weight: bold;
}

span.library {
    color: #4EC9B0;
    font-weight: bold;
}

span.comment {
    color: #6A9953;
}

span.brackets {
    color: white;
}

span.string {
    color: #C98870;
}

/* ======================= Inline-Formate =====================*/
kbd {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #f4f4f4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
}

img {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* =================== Markdown-Fehler hervorheben ==============*/
.md_error{
    border: 4px dashed red;
}

/* ===================== Listen in MD =========================== */

@counter-style alpha_with_paranthese {
  system: extends lower-alpha;
  suffix: ') ';
}

ul.md, ol.md {
    padding-left: 1.2rem;
}

ol.md[type="a"]{
    list-style: alpha_with_paranthese;

}