@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* Scoped to calculator only — does not affect layout header/footer */
#gkCalcRoot {
    font-family: 'Inter', sans-serif;
    overscroll-behavior: none;
}

    /* Force number input spinners (up/down arrows) to always be visible */
    #gkCalcRoot input[type="number"] {
        -moz-appearance: textfield;
        appearance: auto;
    }

        #gkCalcRoot input[type="number"]::-webkit-outer-spin-button,
        #gkCalcRoot input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: inner-spin-button;
            appearance: auto;
            opacity: 1;
            height: auto;
            cursor: pointer;
        }

    #gkCalcRoot #screenCanvas {
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        width: 100%;
        height: 500px;
        cursor: grab;
        touch-action: none;
    }

        #gkCalcRoot #screenCanvas:active {
            cursor: grabbing;
        }

    #gkCalcRoot .construction-stripe {
        background: repeating-linear-gradient( 45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px );
    }

    #gkCalcRoot .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

        /* Mobile order: 1) Params  2) Canvas  3) Save form */
        #gkCalcRoot .grid-container > .gk-params {
            order: 1;
        }

        #gkCalcRoot .grid-container > .gk-canvas {
            order: 2;
        }

        #gkCalcRoot .grid-container > .gk-save {
            order: 3;
        }

    #gkCalcRoot .print-only-section {
        display: none;
    }

    #gkCalcRoot .tab-btn {
        transition: all 0.2s;
        border-bottom: 3px solid transparent;
    }

    #gkCalcRoot .tab-active {
        background-color: #fff;
        border-bottom-color: #0f766e;
        color: #0f766e;
        font-weight: 700;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    }

    #gkCalcRoot .tab-inactive {
        background-color: #f1f5f9;
        color: #64748b;
    }

        #gkCalcRoot .tab-inactive:hover {
            background-color: #e2e8f0;
        }

    /* Projekt fülek stílusa - Javított vizuális csatlakozás */
    #gkCalcRoot .text-orange-600 {
        color: #0f766e !important
    }

    #gkCalcRoot .border-orange-500 {
        color: #0f766e !important
    }

    #gkCalcRoot .focus\:ring-orange-500:focus {
        --tw-ring-color: #0f766e !important;
    }

    #gkCalcRoot .project-tab {
        transition: all 0.2s;
        padding: 0.6rem 1rem;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
        margin-bottom: -1px;
    }

    #gkCalcRoot .project-tab-active {
        background-color: #ffffff;
        color: #0f766e;
        border-top: 3px solid #0f766e;
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
        border-bottom: 1px solid #ffffff;
        z-index: 10;
        position: relative;
    }

    #gkCalcRoot .project-tab-inactive {
        background-color: #e2e8f0;
        color: #0f766e !important;
        border: 1px solid transparent;
        border-bottom: 1px solid #e2e8f0;
    }

        #gkCalcRoot .project-tab-inactive:hover {
            background-color: #cbd5e1;
        }

    #gkCalcRoot .project-tab-summary {
        background-color: #1e293b;
        color: #fff;
        margin-bottom: 0;
    }

        #gkCalcRoot .project-tab-summary.active {
            background-color: #0f766e;
            color: #fff;
            border-top: 3px solid #c2410c;
        }

@media (min-width: 1024px) {
    #gkCalcRoot .grid-container {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto 1fr;
    }

        /* Desktop: params + save form stacked in left column, canvas in right */
        #gkCalcRoot .grid-container > .gk-params {
            order: unset;
            grid-column: 1;
            grid-row: 1;
        }

        #gkCalcRoot .grid-container > .gk-save {
            order: unset;
            grid-column: 1;
            grid-row: 2;
            align-self: start;
        }

        #gkCalcRoot .grid-container > .gk-canvas {
            order: unset;
            grid-column: 2;
            grid-row: 1 / 3;
        }
}

@media print {
    @page {
        margin: 10mm;
        size: auto;
    }

    body {
        margin: 0;
        padding: 0;
        background: white;
        -webkit-print-color-adjust: exact;
    }

    /* Hide layout elements: header, footer, copyright, alerts */
    header#header,
    .header_1,
    footer.footer,
    section.copyright,
    .navbar.fixed-bottom,
    .maintenance-modal {
        display: none !important;
    }

    /* Remove background from the outer wrapper sections */
    section.commonSection,
    section.homeService,
    .header_bg_1 {
        background: none !important;
        background-image: none !important;
        background-color: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .no-print, .screen-wrapper, header, #projectTabsContainer {
        display: none !important;
    }

    #gkCalcRoot .print-only-section {
        display: block !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    #gkCalcRoot .print-area {
        display: block;
        border: none !important;
        margin-top: 20px;
    }

    #gkCalcRoot .print-canvas-wrapper {
        page-break-inside: avoid;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        padding: 10px;
        background: #fff;
    }

        #gkCalcRoot .print-canvas-wrapper h3 {
            color: #000;
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
            margin-bottom: 10px;
            font-weight: bold;
        }

    #gkCalcRoot canvas {
        width: 100% !important;
        height: auto !important;
        border: 1px solid #666;
    }

    #gkCalcRoot .bg-slate-900 {
        background-color: #fff !important;
        color: #000 !important;
    }
}