<!doctype html>
<html lang="el">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Κράτος φιλικό προς τον πολίτη — Είσοδος</title>
    <!-- Canonical favicon — ίδιο file με case-tracker-ng-ui + madp-ng-ui (consistency). -->
    <link rel="icon" type="image/x-icon"
          href="/api/auth/resources/images/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@digigov/css@0.38.3/dist/digigov.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet">
    <style>
        html, body { height: 100%; margin: 0; }
        .govgr-layout-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
        .govgr-layout-wrapper .govgr-bottom { margin-top: auto; }

        /* Compact header (revert) — μόνο ο header title παραμένει μεγάλος */
        .govgr-header { padding: 0.5rem 0; }
        .govgr-header__logo { max-height: 36px !important; width: auto !important; }
        .govgr-header__title {
            font-size: 1.75rem !important;
            font-weight: 500;
            color: #fff !important;
            padding-left: 1rem;
            text-decoration: none;
            line-height: 1.2;
        }
        /* Desktop: logo + title side by side */
        .govgr-header__content { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem; }
        .govgr-header__link { flex: 0 0 auto; }
        .govgr-header__title { flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; }

        /* Mobile: stacked header (logo on row 1, title on row 2) */
        @media (max-width: 640px) {
            .govgr-width-container {
                max-width: 100% !important;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
            .govgr-header__container {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
            .govgr-header__content {
                display: contents;
            }
            .govgr-header__link {
                order: 1;
                flex: 0 0 auto;
            }
            .govgr-header__title {
                order: 2;
                flex: 1 0 100%;
                margin-top: 0.5rem;
                font-size: 1.125rem !important;
                padding-left: 0 !important;
            }
            .govgr-header__logo { max-height: 32px !important; }

            /* Full-width buttons on mobile */
            .login-stack .govgr-btn {
                align-self: stretch !important;
                justify-content: center;
                width: 100%;
                text-align: center;
            }

            /* Compact service card */
            .service-card {
                padding: 1rem 1.25rem;
                margin: 1rem 0;
            }

            /* Smaller intro text */
            .app-intro {
                font-size: 1rem;
                padding: 0.75rem 1rem;
                margin: 1rem 0 1.5rem;
            }

            /* Footer adjustments */
            .app-footer__content {
                gap: 1.5rem;
            }
            .app-footer__logo { height: 40px; }
            .app-footer__logo--gsis { height: 50px; }
        }

        /* Wider content. Root cause: digigov σε desktop κάνει το .govgr-main-wrapper
           CSS grid με `repeat(3, minmax(0, 1fr))`, οπότε ένα single child πέφτει σε 1/3.
           Override σε block layout — έχουμε μόνο ένα main, no sidebar. */
        .govgr-width-container { max-width: 1280px !important; padding-left: 1.5rem; padding-right: 1.5rem; }
        .vlogin-main { padding-top: 2rem; padding-bottom: 2rem; }
        .govgr-main-wrapper {
            display: block !important;
            grid-template-columns: none !important;
            padding-top: 0 !important;
        }
        #main-content { width: 100%; max-width: 100%; float: none; padding: 0; }

        /* --- Πύλη (app- extension, design.md §10) ------------------------------ */
        :root { --app-brand-blue: #1c4584; --app-ink: #1d1d1b; }

        .app-portal { margin: 0 auto; max-width: 68rem; }
        .app-portal *, .app-portal *::before, .app-portal *::after { box-sizing: border-box; }
        .app-portal__title {
            color: var(--app-brand-blue);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.4;
            text-align: center;
            margin: 1rem auto 3.5rem;
            max-width: 56rem;
        }
        .app-portal__grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 3rem 3.5rem;
            justify-items: center;
        }
        .app-portal__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 19rem;
        }
        /* Σταθερό ύψος: τα τρία εικονίδια έχουν διαφορετικές αναλογίες και χωρίς αυτό
           οι ασπίδες ξεκινούσαν σε διαφορετικό ύψος. */
        .app-portal__icon {
            display: block;
            width: auto;
            height: 72px;
            object-fit: contain;
            margin-bottom: 1.5rem;
        }
        /* Ασπίδα: αναλογία πλάτους προς ύψος 0.76 (172x225 στη μακέτα του φορέα). */
        .app-portal__shield {
            background: var(--app-brand-blue);
            color: #fff;
            font-size: 1.0625rem;
            font-weight: 700;
            line-height: 1.45;
            width: 11rem;
            min-height: 14.5rem;
            margin: 0;
            padding: 1.75rem 1.125rem 3.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px 8px 50% 50% / 8px 8px 22% 22%;
        }
        .app-portal__text {
            color: var(--app-brand-blue);
            font-size: 0.9375rem;
            line-height: 1.55;
            margin: 1.75rem 0 1.25rem;
        }
        .app-portal__link { font-weight: 700; }

        @media (max-width: 900px) {
            .app-portal__grid { grid-template-columns: 1fr; gap: 3rem; }
            .app-portal__title { text-align: left; margin-bottom: 2.5rem; }
        }

        /* Top intro — pull-quote με brand-blue accent bar αριστερά */
        .app-intro {
            margin: 1.5rem 0 2rem;
            padding: 1rem 1.5rem;
            border-left: 4px solid #1c4584;
            background: transparent;
            font-style: italic;
            font-size: 1.125rem;
            line-height: 1.5;
            color: #1d1d1b;
        }
        .app-intro b { font-style: normal; }

        /* Service card */
        .service-card {
            background: #f3f2f1;
            padding: 1.5rem 1.75rem;
            margin: 1.5rem 0;
            border-left: 6px solid #1c4584;
        }
        .service-card h2 { margin-top: 0; }
        .login-stack { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
        .login-stack .govgr-btn { display: inline-flex; align-items: center; align-self: flex-start; }

        /* Footer color match με header (govgr primary blue). Λευκά πλακίδια γύρω από
           τα μπλε logos για να παραμένουν αναγνώσιμα μέχρι να έρθει το νέο ΓΓΠΣ logo. */
        .govgr-bottom { background: #1c4584; }
        .govgr-footer { background: #1c4584 !important; padding: 1rem 0; }
        .govgr-footer .govgr-section-break { display: none; }
        .app-footer__content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5rem;
            flex-wrap: wrap;
        }
        .app-footer__logo-link {
            display: inline-flex;
            align-items: center;
            background: transparent;
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
        }
        .app-footer__logo { height: 48px; width: auto; display: block; background: transparent; }
        .app-footer__logo--gsis { height: 60px; }
    </style>
</head>
<body>
<div class="govgr-layout-wrapper">

    <div class="govgr-top">
        <header role="banner" class="govgr-header" data-module="govgr-header">
            <div class="govgr-header__container">
                <div class="govgr-header__content">
                    <a href="https://www.gov.gr/" class="govgr-header__link"
                       target="_blank" rel="noreferrer noopener"
                       aria-label="gov.gr (ανοίγει σε καινούρια καρτέλα)">
                        <img class="govgr-header__logo"
                             src="/api/auth/resources/images/gov_gr_logo.svg" alt="gov.gr logo">
                    </a>
                    <a href="/api/auth/vlogin" class="govgr-header__title">Κράτος φιλικό προς τον πολίτη</a>
                </div>
            </div>
        </header>
    </div>

    <div class="govgr-width-container vlogin-main" style="flex: 1;">
        <div class="govgr-main-wrapper">
            <main class="govgr-grid-column-full" id="main-content">

                <!-- ΠΥΛΗ: ένα πλαίσιο ανά εφαρμογή. Τα εικονίδια είναι ΠΡΟΣΩΡΙΝΑ
                     (γραμμικά placeholders) μέχρι να δοθούν τα κανονικά assets. -->
                

                <p class="app-intro">
                    Με τις <b>«Παρεμβάσεις για ένα κράτος πιο φιλικό στους πολίτες»</b>
                    καταπολεμάται η γραφειοκρατία και απλοποιούνται οι συναλλαγές των πολιτών
                    με το Δημόσιο.
                </p>

                <div class="govgr-warning-text">
                    <span class="govgr-warning-text__icon" aria-hidden="true">!</span>
                    <strong class="govgr-warning-text__text">
                        <span class="govgr-visually-hidden">Προειδοποίηση:</span>
                        Δεν έχουν δηλωθεί πάροχοι αυθεντικοποίησης.
                    </strong>
                </div>

                <!-- Επιλογή τρόπου εισόδου για μία εφαρμογή (/vlogin/<app>). Ίδιο μοτίβο με
                     το βήμα «Επιλέξτε Ενέργεια» του gov.gr: ομάδα radio + «Συνέχεια».
                     Χωρίς JavaScript — η επιλογή υποβάλλεται ως GET και ο controller
                     επικυρώνει τον πάροχο πριν το redirect. -->
                

            </main>
        </div>
    </div>

    <div class="govgr-bottom">
        <footer role="contentinfo" class="govgr-footer">
            <div class="govgr-width-container">
                <hr class="govgr-section-break govgr-section-break--visible">
                <div class="govgr-footer__meta">
                    <div class="govgr-footer__meta-item govgr-footer__meta-item--grow">
                        <div class="govgr-footer__content app-footer__content">
                            <!-- ΥΨηΔ first — λευκή εκδοχή για σκούρο μπλε footer. -->
                            <a href="https://www.mindigital.gr/" target="_blank" rel="noreferrer noopener"
                               class="app-footer__logo-link"
                               aria-label="Υπουργείο Ψηφιακής Διακυβέρνησης (ανοίγει σε καινούρια καρτέλα)">
                                <img class="app-footer__logo"
                                     src="/api/auth/resources/images/mindigital-newlogo.png"
                                     alt="Υπουργείο Ψηφιακής Διακυβέρνησης">
                            </a>
                            <!-- ΓΓΠΣΨΔ second -->
                            <a href="https://www.gsis.gr/" target="_blank" rel="noreferrer noopener"
                               class="app-footer__logo-link"
                               aria-label="Γενική Γραμματεία Πληροφοριακών Συστημάτων και Ψηφιακής Διακυβέρνησης (ανοίγει σε καινούρια καρτέλα)">
                                <img class="app-footer__logo app-footer__logo--gsis"
                                     src="/api/auth/resources/images/logo_gsis.svg"
                                     alt="ΓΓΠΣΨΔ">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>

</div>
  <!-- UserWay accessibility widget. Ίδιος λογαριασμός με το az-vouchers
       (voucher-client-web-ui/index.html), χρώμα στο μπλε του ΚΦΠ. Πρέπει να υπάρχει σε
       ΟΛΕΣ τις σελίδες της πλατφόρμας: οι προτιμήσεις του χρήστη κρατιούνται ανά origin,
       οπότε ό,τι επιλέξει στην είσοδο τον ακολουθεί μέσα στις εφαρμογές. Αν μπει CSP,
       πρέπει να επιτραπεί το cdn.userway.org. Βλ. .knowledge/patterns/userway-accessibility-widget.md -->
  <script>
    (function (d) {
      var s = d.createElement("script");
      s.setAttribute("data-position", 3);
      s.setAttribute("data-language", "el");
      s.setAttribute("data-color", "#1c4584");
      s.setAttribute("data-account", "ydkYbVzTya");
      s.setAttribute("src", "https://cdn.userway.org/widget.js");
      (d.body || d.head).appendChild(s);
    })(document);
  </script>
</body>
</html>
