/*
 * =====================================================
 * ICD-10-GM SYSTEMATIK – RESPONSIVE
 * =====================================================
 *
 * Breakpoints:
 * 1200 px = kompakter Desktop / Tablet quer
 *  900 px = Tablet / einspaltiges Layout
 *  700 px = Smartphone
 *  480 px = kleines Smartphone
 */


/*
 * =====================================================
 * BIS 1200 PX
 * =====================================================
 */

@media (max-width: 1200px) {
    .icd-tree-layout {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(320px, .8fr);
    }

    .icd-tree-node-button {
        grid-template-columns:
            76px
            minmax(0, 1fr)
            auto;

        gap: 10px;
    }

    .icd-tree-panel-inner,
    .icd-tree-detail {
        padding: 16px;
    }
}


/*
 * =====================================================
 * BIS 900 PX
 * =====================================================
 */

@media (max-width: 900px) {
    .icd-tree-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    .icd-tree-view-switch {
        align-self: flex-start;
        margin-top: 0;
    }

    .icd-tree-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .icd-tree-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        margin-top: 0;
        padding: 0;
    }

    .icd-tree-action-button {
        width: 100%;
        justify-content: center;
    }

    .icd-tree-layout {
        grid-template-columns: 1fr;
    }

    .icd-tree-detail-panel {
        position: static;
    }
}


/*
 * =====================================================
 * BIS 700 PX
 * =====================================================
 */

@media (max-width: 700px) {
    .icd-tree-subtitle {
        font-size: 28px;
    }

    .icd-tree-view-switch {
        width: 100%;
    }

    .icd-tree-view-button {
        flex: 1 1 50%;
        min-width: 0;

        padding-inline: 10px;

        text-align: center;
    }

    .icd-tree-toolbar-actions {
        grid-template-columns: 1fr;
    }

    .icd-tree-panel-inner,
    .icd-tree-detail {
        padding: 12px;
    }

    /*
     * Mobile Baumdarstellung:
     * kompakter und tabellenähnlich
     */

    .icd-tree-node-row {
        align-items: flex-start;
    }

    .icd-tree-toggle {
        width: 30px;
        min-width: 30px;
        height: 30px;

        margin-top: 7px;
        margin-right: 3px;
    }

    .icd-tree-node-button {
        grid-template-columns: 1fr;
        gap: 3px;

        min-height: 52px;

        padding: 8px 10px;

        border: 1px solid transparent;
        border-radius: 4px;
    }

    .icd-tree-node-button:hover {
        border-color: #d7e2ed;
    }

    .icd-tree-node-button.is-selected {
        border-color: #bdd2e8;
        background: #eaf2fb;
    }

    /*
     * Desktopinformationen mobil ausblenden
     */

    .icd-tree-node-code,
    .icd-tree-node-kind {
        display: none;
    }

    /*
     * Mobile Bezeichnung:
     * Kapitel IV / Block E00–E07 / Kategorie E03
     */

    .icd-tree-node-mobile-label {
        display: block;
        grid-row: 1;

        color: #1f5f9f;

        font-size: 12px;
        line-height: 1.25;
        font-weight: 700;
    }

    .icd-tree-node-title {
        grid-row: 2;

        color: #333333;

        font-size: 13px;
        line-height: 1.35;
    }

    /*
     * Kompaktere Baumlinien auf dem Smartphone
     */

    .icd-tree-children {
        margin-left: 10px;
        padding-left: 10px;
    }

    .icd-tree-children
    > .icd-tree-list
    > .icd-tree-node
    > .icd-tree-node-row::before {
        left: -10px;
        width: 10px;
    }

    .icd-tree-children
    > .icd-tree-list
    > .icd-tree-node:last-child::after {
        left: -11px;
    }

    /*
     * Suchergebnisse
     */

    .icd-tree-search-result {
        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap: 8px;
    }

    .icd-tree-search-result-kind {
        grid-column: 2;
        padding-top: 0;
    }

    /*
     * Detailansicht
     */

    .icd-tree-detail-code {
        font-size: 27px;
    }

    .icd-tree-detail-title {
        font-size: 23px;
    }

    /*
     * Nach-oben-Button
     */

	.icd-scroll-top {
		--icd-scroll-top-gap: 14px;

		right: 14px;

		width: 42px;
		height: 42px;

		font-size: 16px;
	}
}


/*
 * =====================================================
 * BIS 480 PX
 * =====================================================
 */

@media (max-width: 480px) {
    .icd-tree-view-switch {
        flex-direction: column;
    }

    .icd-tree-view-button {
        width: 100%;
        flex-basis: auto;
    }

    /*
     * Toolbar
     */

    .icd-tree-toolbar-actions {
        grid-template-columns: 1fr;
    }

    /*
     * Baumstruktur
     */

    .icd-tree-panel-inner {
        padding: 10px;
    }

    .icd-tree-node-button {
        min-height: 48px;
        padding: 7px 8px;
    }

    .icd-tree-node-mobile-label {
        font-size: 11px;
    }

    .icd-tree-node-title {
        font-size: 12px;
        line-height: 1.35;
    }

    .icd-tree-toggle {
        width: 28px;
        min-width: 28px;
        height: 28px;

        margin-top: 6px;
        margin-right: 2px;
    }

    .icd-tree-children {
        margin-left: 8px;
        padding-left: 8px;
    }

    .icd-tree-children
    > .icd-tree-list
    > .icd-tree-node
    > .icd-tree-node-row::before {
        left: -8px;
        width: 8px;
    }

    .icd-tree-children
    > .icd-tree-list
    > .icd-tree-node:last-child::after {
        left: -9px;
    }

    /*
     * Suchfeld und Treffer
     */

    .icd-tree-search-input {
        font-size: 16px;
    }

    .icd-tree-search-result {
        grid-template-columns: 1fr;
    }

    .icd-tree-search-result-kind {
        grid-column: 1;
    }

    /*
     * Detailansicht
     */

    .icd-tree-detail {
        padding: 10px;
    }

    .icd-tree-detail-code {
        font-size: 24px;
    }

    .icd-tree-detail-title {
        font-size: 20px;
    }

    /*
     * Nach-oben-Button
     */

	.icd-scroll-top {
		--icd-scroll-top-gap: 10px;

		right: 10px;
	}
}