/* font-awesome icons library */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Custom variables */
:root {
    --quadriga-main: #00305e;
    --quadriga-main-45: #818bac;
    --quadriga-main-web: #c1d3e0;
}

/* Reset ALL default admonition icons */
.admonition-title::before {
    content: none !important;
}

/* Exercise/Übung styling */
div.exercise {
    background-color: rgba(66, 165, 245, 0.03) !important;
    border-left-color: #7baac7 !important;
}

div.exercise > .admonition-title {
    background-color: rgba(66, 165, 245, 0.1) !important;
    color: #222832 !important;
}

div.exercise > .admonition-title::after {
    content: "\f44b" !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1 em !important;
    color: #4a90c9 !important;
}


/* Solution/Lösung styling */
div.solution {
    background-color: #e8f5e931 !important;
    border-left-color: #66bb6a !important;
}

div.solution > .admonition-title {
    background-color: rgba(102, 187, 106, 0.1) !important;
    color: #222832 !important;
}

div.solution > .admonition-title::after {
    content: "\f06e" !important;  /* FontAwesome eye icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1em !important;
    color: #43a047 !important;
}

/* keypoint styling */
div.keypoint {
    background-color: #fff6e026 !important;
    border-left-color: #f2a541 !important;
}

div.keypoint > .admonition-title {
    background-color: rgba(251, 140, 0, 0.1) !important;
    color: #222832 !important;
}

div.keypoint > .admonition-title::after {
    content: "\f0eb" !important;  /* FontAwesome lightbulb icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1em !important;
    color: #f2a541 !important;
}

/* Hinweis styling */
div.hinweis {
    background-color: rgba(108, 160, 216, 0.03) !important;
    border-left-color: #6ca0d8e3 !important;
}

div.hinweis > .admonition-title {
    background-color: rgba(108, 160, 216, 0.2) !important;
    color: #222832 !important;
}

div.hinweis > .admonition-title::after {
    content: "\f08d" !important;  /* FontAwesome thumbtack icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1.2em !important;
    color: #679bd3 !important;
}

/* Caution styling */
div.caution {
    background-color: #ffe6e61f !important;
    border-left-color: #f08a8a !important;
}

div.caution > .admonition-title {
    background-color: rgba(211, 47, 47, 0.1) !important;
    color: #222832 !important;
}

div.caution > .admonition-title::after {
    content: "\f071" !important;  /* FontAwesome exclamation-triangle icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1 em !important;
    color: #c85454 !important;
}

/* Dark mode overrides for admonitions titles */
html[data-theme='dark'] div.caution > .admonition-title,
html[data-theme='dark'] div.hinweis > .admonition-title,
html[data-theme='dark'] div.keypoint > .admonition-title,
html[data-theme='dark'] div.solution > .admonition-title,
html[data-theme='dark'] div.exercise > .admonition-title {
    color: #CED6DD !important;
}

/* lernziele styling */
div.lernziele {
    background-color: #f7fbff !important;
    border-left-color: #00305e !important;
}

div.lernziele > .admonition-title {
    background-color: rgba(0, 48, 94, 0.1) !important;
    color: #00305e !important;
}

div.lernziele > .admonition-title::after {
    content: "\f19d" !important;  /* FontAwesome graduation-cap icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1 em !important;
    color: #00305e !important;
}

/* Dark mode overrides for lernziele */
html[data-theme='dark'] div.lernziele {
    background-color: rgba(193, 211, 224, 0.1) !important;
    border-left-color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.lernziele > .admonition-title {
    background-color: rgba(193, 211, 224, 0.15) !important;
    color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.lernziele > .admonition-title::after {
    color: var(--quadriga-main-web) !important;
}


/* Externer Link mit ↗ */
.external-link:after {
    color: var(--quadriga-main);
    content: "↗";
}

/* Dark mode override for external link */
html[data-theme='dark'] .external-link:after {
    color: var(--quadriga-main-web);
}

/* mailto: link mit 📧 */
a[href^="mailto:"]:after {
    color: var(--quadriga-main);
    content: "📧";
}

/* margin for frage-feedback styling */
div.frage-feedback {
    background-color: #f7fbff !important;
    border-left-color: #00305e !important;
}

div.frage-feedback  > .admonition-title {
    background-color: rgba(0, 48, 94, 0.1) !important;
    color: #00305e !important;
}

div.frage-feedback  > .admonition-title::after {
    content: "\f059";  /* FontAwesome question-circle icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1 em !important;
    color: #00305e !important;
}

/* Dark mode overrides for frage-feedback */
html[data-theme='dark'] div.frage-feedback {
    background-color: rgba(193, 211, 224, 0.1) !important;
    border-left-color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.frage-feedback > .admonition-title {
    background-color: rgba(193, 211, 224, 0.15) !important;
    color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.frage-feedback > .admonition-title::after {
    color: var(--quadriga-main-web) !important;
}


/* citation information styling */
div.citation-information {
    background-color: #f7fbff !important;
    border-left-color: #00305e !important;
}

div.citation-information  > .admonition-title {
    background-color: rgba(0, 48, 94, 0.1) !important;
    color: #00305e !important;
}

div.citation-information  > .admonition-title::after {
    content: "\f10d";  /* FontAwesome quote left icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1 em !important;
    color: #00305e !important;
}
html[data-theme='dark'] div.citation-information {
    background-color: rgba(193, 211, 224, 0.1) !important;
    border-left-color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.citation-information > .admonition-title {
    background-color: rgba(193, 211, 224, 0.15) !important;
    color: var(--quadriga-main-web) !important;
}

html[data-theme='dark'] div.citation-information > .admonition-title::after {
    color: var(--quadriga-main-web) !important;
}

/* Dark mode styling for Jupyter notebook cells */
html[data-theme='dark'] div.cell div.cell_input,
html[data-theme='dark'] div.cell details.above-input > summary {
    background-color: #29313d !important;
    color: #f7fbff !important;
}


/* Zeitinfo/Bearbeitungszeit styling */
div.zeitinfo {
    background-color: #fff9f4 !important;             /* sehr helles Apricot */
    border-left-color: #e59d7e !important;            /* weiches Apricot */
}

div.zeitinfo > .admonition-title {
    background-color: rgba(229, 157, 126, 0.12) !important;
    color: #cc6f53 !important;                        /* kräftigerer Apricot-Ton */
}

div.zeitinfo > .admonition-title::after {
    content: "\f017" !important;                      /* Font Awesome clock */
    float: left !important;
    padding-right: 0.5rem !important;
    font-size: 1em !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #cc6f53 !important;                  /* Apricot-Farbe für das Icon */
}

/* Dark mode overrides for zeitinfo */
html[data-theme='dark'] div.zeitinfo {
    background-color: rgba(229, 157, 126, 0.1) !important;
    border-left-color: #e59d7e !important;
}

html[data-theme='dark'] div.zeitinfo > .admonition-title {
    background-color: rgba(229, 157, 126, 0.15) !important;
    color: #e59d7e !important;
}

html[data-theme='dark'] div.zeitinfo > .admonition-title::after {
    color: #e59d7e !important;
}