/* =====================================================================
   knxtc-user.css
   Teilnehmer-Bereich — Grün (#2e7d32)
   Muss NACH knxtc-base.css geladen werden.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) Bereichsfarben überschreiben die Base-Tokens
   --------------------------------------------------------------------- */
:root {
    --knx-primary:       #2e7d32;
    --knx-primary-dark:  #1b5e20;
    --knx-primary-light: #e8f5e9;
    --knx-primary-rgb:   46, 125, 50;

    --knx-area-accent:   #66bb6a;   /* helleres Grün für Akzente */
    --knx-area-name:     "Teilnehmer";
}


/* ---------------------------------------------------------------------
   2) Area-Badge innerhalb der Navbar (links neben Ausloggen)
   --------------------------------------------------------------------- */
.knx-navbar-badge--user {
    color: #fff;
    background: rgba(102, 187, 106, 0.5);
    border-color: rgba(255, 255, 255, 0.45);
}

.knx-navbar-badge--user::before {
    background-color: #c8f7c5;
    box-shadow: 0 0 6px rgba(200, 247, 197, 0.9);
}


/* ---------------------------------------------------------------------
   3) Navbar — spezifische User-Optik
   --------------------------------------------------------------------- */
.knx-navbar--user {
    background: linear-gradient(135deg,
                var(--knx-primary) 0%,
                var(--knx-primary-dark) 100%);
}

.knx-navbar--user .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.knx-navbar--user .navbar-brand::before {
    content: "● ";
    opacity: 0.7;
    font-size: 0.9em;
}


/* ---------------------------------------------------------------------
   4) Seiten-Dekoration (dezenter Hinweis, dass man im User-Bereich ist)
   --------------------------------------------------------------------- */
body.knx-user {
    border-top: 3px solid var(--knx-primary);
}


/* ---------------------------------------------------------------------
   5) Rücksichten auf bestehende User-Klassen im alten Markup
   --------------------------------------------------------------------- */
body.knx-user h1,
body.knx-user h2,
body.knx-user h3 {
    color: var(--knx-primary);
}

body.knx-user .custom-navbar {
    background-color: var(--knx-primary) !important;
}

body.knx-user a.button,
body.knx-user .button {
    background-color: var(--knx-primary);
}

body.knx-user a.button:hover,
body.knx-user .button:hover {
    background-color: var(--knx-primary-dark);
}

body.knx-user .submit-button {
    background-color: var(--knx-primary);
}

body.knx-user .submit-button:hover {
    background-color: var(--knx-primary-dark);
}

body.knx-user .back-link {
    color: var(--knx-primary);
}

body.knx-user .menu-card h2 {
    color: var(--knx-primary);
}

body.knx-user .menu-btn {
    background-color: var(--knx-primary);
    color: #fff;
}

body.knx-user .menu-btn:hover {
    background-color: var(--knx-primary-dark);
}


/* ---------------------------------------------------------------------
   6) User-spezifische Komponenten
   --------------------------------------------------------------------- */

/* User-Dashboard: großzügigere Karten */
body.knx-user .knx-menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Countdown-/Info-Block */
.knx-user-countdown {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--knx-primary);
    text-align: center;
    padding: var(--knx-space-4);
    background-color: var(--knx-primary-light);
    border-radius: var(--knx-radius);
    margin: var(--knx-space-4) 0;
}

/* Freundlicher Willkommens-Header */
.knx-user-welcome {
    background: linear-gradient(135deg,
                var(--knx-primary-light) 0%,
                var(--knx-white) 100%);
    padding: var(--knx-space-6);
    border-radius: var(--knx-radius);
    border-left: 4px solid var(--knx-primary);
    margin-bottom: var(--knx-space-6);
}

.knx-user-welcome h1 {
    margin-top: 0;
    color: var(--knx-primary-dark);
}

/* Hinweis-Box */
.knx-user-notice {
    background-color: var(--knx-primary-light);
    border-left: 4px solid var(--knx-primary);
    padding: var(--knx-space-3) var(--knx-space-4);
    margin: var(--knx-space-4) 0;
    border-radius: var(--knx-radius-sm);
}


/* ---------------------------------------------------------------------
   7) Voucher/Gutschein Feedback
   --------------------------------------------------------------------- */
.knx-user-voucher-feedback {
    background-color: var(--knx-primary-light);
    border: 1px solid var(--knx-primary);
    border-radius: var(--knx-radius-sm);
    padding: var(--knx-space-3) var(--knx-space-4);
    margin: var(--knx-space-3) auto;
    max-width: 600px;
}