/* assets/css/pflegegradrechner-mobile.css */

/* ==========================================================
   KamCura Pflegegradrechner Free 1.1.1
   - https://www.kamcura.de
   - https://www.pflege-wissen.com
   Mobile Overrides
   ========================================================== */

@media (max-width: 767px) {

    html {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        width: 100%;
        padding: 8px;
        overflow-x: hidden;
        font-size: 14px;
    }

    .pgr-shell {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .pgr-app {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pgr-sidebar {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        order: 1;
    }

    .pgr-content {
        width: 100%;
        min-width: 0;
        order: 2;
        overflow: visible;
    }

    /* =========================
       Modulnavigation
       ========================= */

    .pgr-moduleNav {
        width: 100%;
    }

    .pgr-moduleHeader {
        padding: 10px 12px;
    }

    .pgr-moduleBtn {
        min-height: auto;
        padding: 11px 12px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
    }

    .pgr-moduleIcon {
        font-size: 16px;
    }

    .pgr-moduleTopLine {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .pgr-moduleText strong {
        font-size: 13px;
        line-height: 1.25;
    }

    .pgr-moduleAnsweredBadge {
        padding: 4px 6px;
        font-size: 11px;
    }

    .pgr-modulePointLine {
        flex-wrap: wrap;
        white-space: normal;
        font-size: 10px;
        row-gap: 3px;
    }

    /* =========================
       Ergebnis / Grenzen / Aktionen
       ========================= */

    .pgr-resultBox {
        padding: 16px 12px;
    }

    .pgr-resultBox strong {
        font-size: 40px;
    }

    .pgr-resultLine {
        padding: 9px 12px;
        font-size: 12px;
    }

    .pgr-progressWrap,
    .pgr-gradeTable,
    .pgr-gradeHint {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pgr-actionGroupTitle {
        margin-left: 12px;
        margin-right: 12px;
    }

    .pgr-actionBtn {
        width: calc(100% - 24px);
        min-height: 46px;
        margin-left: 12px;
        margin-right: 12px;
    }

    /* =========================
       Content Header
       ========================= */

    .pgr-contentHeader {
        padding: 14px 12px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pgr-contentHeader > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pgr-contentHeader h1 {
        font-size: 18px;
        line-height: 1.25;
    }

    .pgr-contentHeader p {
        justify-self: start;
        font-size: 13px;
        padding: 6px 8px;
    }

    .pgr-infoBtn {
        width: 100%;
        min-height: 44px;
        justify-self: stretch;
    }

    /* =========================
       Haupttabellen Module 1,2,3,4,6
       CSS-Card-Layout ohne PHP-Änderung
       ========================= */

    .pgr-table {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
        gap: 10px;
        padding: 10px;
    }

    .pgr-tableHead {
        display: none;
    }

    .pgr-cell {
        min-height: 0;
        border-right: 0;
        border-bottom: 0;
    }

    /*
       Die PHP-Struktur ist:
       Code | Kriterium | Antwort 1 | Antwort 2 | Antwort 3 | Antwort 4
       Mobil wird daraus je Kriterium eine optische Card.
    */

    .pgr-colCode {
        padding: 12px 12px 6px;
        border: 1px solid var(--pgr-border-soft);
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        background: #ffffff;
    }

    .pgr-colQuestion {
        padding: 6px 12px 12px;
        border-left: 1px solid var(--pgr-border-soft);
        border-right: 1px solid var(--pgr-border-soft);
        background: #ffffff;
    }

    .pgr-colQuestion strong {
        font-size: 15px;
        line-height: 1.35;
    }

    .pgr-inlineHint {
        margin-top: 7px;
        font-size: 12px;
    }

    .pgr-answerCell {
        min-height: 48px;
        justify-content: flex-start;
        padding: 10px 44px 10px 12px;
        border-left: 1px solid var(--pgr-border-soft);
        border-right: 1px solid var(--pgr-border-soft);
        border-top: 1px solid var(--pgr-border-soft);
        background: #ffffff;
    }

    .pgr-answerCell:nth-of-type(6n) {
        border-bottom: 1px solid var(--pgr-border-soft);
        border-radius: 0 0 4px 4px;
        margin-bottom: 2px;
    }

    .pgr-radioWrap {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 28px;
    }

    .pgr-radioWrap input {
        width: 22px;
        height: 22px;
    }

    .pgr-answerInfo {
        top: 50%;
        right: 10px;
        width: 28px;
        height: 28px;
        border: 1px solid var(--pgr-border-soft);
        border-radius: 4px;
        transform: translateY(-50%);
        font-size: 11px;
    }

    .pgr-codeBadge {
        font-size: 12px;
        padding: 6px 9px;
    }

    /* =========================
       Modul 4 Inline-Versorgung
       ========================= */

    .pgr-inlineCareBox {
        margin-top: 10px;
        padding: 10px;
    }

    .pgr-inlineCareOptions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .pgr-inlineCareOption {
        width: 100%;
        min-height: 38px;
        padding: 8px 9px;
        font-size: 12px;
    }

	/* =========================
	   Modul 5 Sonderlayout
	   ========================= */

	.pgr-tableM5 {
		display: grid;
		grid-template-columns: 1fr;
		min-width: 0;
		width: 100%;
		gap: 10px;
		padding: 10px;
	}

	/* Kopfzeile ausblenden */
	.pgr-tableM5 .pgr-tableHead {
		display: none;
	}

	/* Code */
	.pgr-tableM5 .pgr-colCode {
		padding: 12px 12px 6px;
		border: 1px solid var(--pgr-border-soft);
		border-bottom: 0;
		border-radius: 4px 4px 0 0;
		background: #ffffff;
	}

	/* Frage */
	.pgr-tableM5 .pgr-colQuestion {
		padding: 6px 12px 12px;
		border-left: 1px solid var(--pgr-border-soft);
		border-right: 1px solid var(--pgr-border-soft);
		background: #ffffff;
	}

	/* Entfällt + Selbständig */
	.pgr-tableM5 .pgr-answerCell {
		position: relative;
		justify-content: flex-start;
		padding: 12px 12px 12px 46px;

		border-left: 1px solid var(--pgr-border-soft);
		border-right: 1px solid var(--pgr-border-soft);
		border-top: 1px solid var(--pgr-border-soft);
		background: #ffffff;
	}

	.pgr-tableM5 .pgr-answerCell .pgr-radioWrap {
		position: absolute;
		left: 12px;
	}

	/* Erstes Feld */
	.pgr-tableM5 .pgr-answerCell:nth-of-type(5n + 3)::before {
		content: "Entfällt";
		font-size: 13px;
		font-weight: 700;
	}

	/* Zweites Feld */
	.pgr-tableM5 .pgr-answerCell:nth-of-type(5n + 4)::before {
		content: "Selbständig";
		font-size: 13px;
		font-weight: 700;
	}

	/* Häufigkeit */
	.pgr-m5FreqCell {
		display: grid;
		grid-template-columns: 34px 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 10px;
		align-items: center;

		padding: 12px;

		border-left: 1px solid var(--pgr-border-soft);
		border-right: 1px solid var(--pgr-border-soft);
		border-top: 1px solid var(--pgr-border-soft);
		border-bottom: 1px solid var(--pgr-border-soft);
		border-radius: 0 0 4px 4px;

		background: #ffffff;
	}

	/* Radio oben links */
	.pgr-m5FreqCell .pgr-radioWrap {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	/* Text "Häufigkeit" neben Radio */
	.pgr-m5FreqCell::after {
		content: "Häufigkeit";
		grid-column: 2 / 4;
		grid-row: 1;

		font-size: 13px;
		font-weight: 700;
		align-self: center;
	}

	/* Anzahl Feld */
	.pgr-m5Number {
		grid-column: 2;
		grid-row: 2;

		width: 100%;
		min-height: 42px;
		font-size: 14px;
	}

	/* Dropdown daneben */
	.pgr-m5Select {
		grid-column: 3;
		grid-row: 2;

		width: 100%;
		min-height: 42px;
		font-size: 14px;
	}

	/* Alternative Skalen */
	.pgr-m5ScaleCell {
		grid-column: auto;

		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;

		padding: 12px;

		border-left: 1px solid var(--pgr-border-soft);
		border-right: 1px solid var(--pgr-border-soft);
		border-top: 1px solid var(--pgr-border-soft);
		border-bottom: 1px solid var(--pgr-border-soft);
		border-radius: 0 0 4px 4px;

		background: #ffffff;
	}

	.pgr-m5ScaleOption {
		position: relative;
		width: 100%;
		min-height: 42px;
		padding: 10px 42px 10px 10px;
	}

	.pgr-m5ScaleOption .pgr-answerInfo {
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
	}

    /* =========================
       Besondere Bedarfskonstellation
       ========================= */

    .pgr-specialBox {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 12px;
    }

    .pgr-specialIcon {
        width: 38px;
        height: 38px;
    }

    .pgr-specialTop strong {
        font-size: 15px;
    }

    .pgr-specialCheck {
        padding: 10px;
        font-size: 13px;
    }

    .pgr-specialNote {
        padding-left: 0;
        font-size: 12px;
    }

    /* =========================
       Modal
       ========================= */

    .pgr-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .pgr-modalBox {
        width: 100%;
        max-height: 88vh;
        padding: 20px 16px 18px;
        border-radius: 4px;
    }

    #pgr-modal-title {
        padding-right: 34px;
        font-size: 18px;
        line-height: 1.3;
    }

    #pgr-modal-content {
        font-size: 14px;
        line-height: 1.55;
    }

    .pgr-modalClose {
        right: 10px;
        top: 10px;
        width: 34px;
        height: 34px;
    }

    /* =========================
       Footer
       ========================= */

    .pgr-footer {
        margin-top: 10px;
    }

    .pgr-footerGrid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px 14px;
    }

    .pgr-footerDivider {
        width: 100%;
        height: 1px;
        min-height: 1px;
        background: linear-gradient(
            to right,
            transparent,
            #d9dde4,
            transparent
        );
    }

    .pgr-footerCol p {
        align-items: flex-start;
        font-size: 12px;
    }

    .pgr-footerBottom {
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.45;
    }
	
	/* Mobile Antwortlabels für Module 1, 4 und 6 */
	.pgr-mobileModul-1 .pgr-answerCell:nth-of-type(6n + 3)::before,
	.pgr-mobileModul-4 .pgr-answerCell:nth-of-type(6n + 3)::before,
	.pgr-mobileModul-6 .pgr-answerCell:nth-of-type(6n + 3)::before {
		content: "Selbständig";
	}

	.pgr-mobileModul-1 .pgr-answerCell:nth-of-type(6n + 4)::before,
	.pgr-mobileModul-4 .pgr-answerCell:nth-of-type(6n + 4)::before,
	.pgr-mobileModul-6 .pgr-answerCell:nth-of-type(6n + 4)::before {
		content: "Überwiegend selbständig";
	}

	.pgr-mobileModul-1 .pgr-answerCell:nth-of-type(6n + 5)::before,
	.pgr-mobileModul-4 .pgr-answerCell:nth-of-type(6n + 5)::before,
	.pgr-mobileModul-6 .pgr-answerCell:nth-of-type(6n + 5)::before {
		content: "Überwiegend unselbständig";
	}

	.pgr-mobileModul-1 .pgr-answerCell:nth-of-type(6n + 6)::before,
	.pgr-mobileModul-4 .pgr-answerCell:nth-of-type(6n + 6)::before,
	.pgr-mobileModul-6 .pgr-answerCell:nth-of-type(6n + 6)::before {
		content: "Unselbständig";
	}

	/* Modul 2 */
	.pgr-mobileModul-2 .pgr-answerCell:nth-of-type(6n + 3)::before {
		content: "Fähigkeit vorhanden";
	}

	.pgr-mobileModul-2 .pgr-answerCell:nth-of-type(6n + 4)::before {
		content: "Größtenteils vorhanden";
	}

	.pgr-mobileModul-2 .pgr-answerCell:nth-of-type(6n + 5)::before {
		content: "In geringem Maße vorhanden";
	}

	.pgr-mobileModul-2 .pgr-answerCell:nth-of-type(6n + 6)::before {
		content: "Nicht vorhanden";
	}

	/* Modul 3 */
	.pgr-mobileModul-3 .pgr-answerCell:nth-of-type(6n + 3)::before {
		content: "Nie oder sehr selten";
	}

	.pgr-mobileModul-3 .pgr-answerCell:nth-of-type(6n + 4)::before {
		content: "Selten";
	}

	.pgr-mobileModul-3 .pgr-answerCell:nth-of-type(6n + 5)::before {
		content: "Häufig";
	}

	.pgr-mobileModul-3 .pgr-answerCell:nth-of-type(6n + 6)::before {
		content: "Täglich";
	}

	/* Darstellung der Labels */
	.pgr-answerCell::before {
		display: block;
		margin-left: 12px;
		margin-right: auto;
		color: var(--pgr-text);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.25;
	}

	/* Radio links, Label mittig/rechts daneben */
	.pgr-answerCell {
		gap: 10px;
	}

	.pgr-answerCell .pgr-radioWrap {
		flex-shrink: 0;
	}
	
	/* ==========================================================
	   Header Mobile
	   ========================================================== */

	.pgr-topHeader {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 10px;
	}

	.pgr-topHeaderLogoBox,
	.pgr-topHeaderContentBox {
		min-height: auto;
	}

	.pgr-topHeaderLogoBox {
		padding: 12px;
	}

	.pgr-topHeaderLogo {
		width: min(260px, 100%);
	}

	.pgr-topHeaderContentBox {
		display: none;
	}
	
}