@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
    --green-deep:  #2D6A4F;
    --green-mid:   #7aaa50;
    --green-soft:  #7f9a7b;
    --green-light: #F2F5F0;
    --text-dark:   #1e2d24;
    --text-muted:  #6b7f6e;
    --shadow-card: 0 24px 80px rgba(30, 45, 36, .35), 0 0 0 1px rgba(255,255,255,.18);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Body / background ───────────────────────────────────── */
body {
    font-family: 'DM Sans', sans-serif;
    background: linear-gradient(150deg, #1e2d24 0%, var(--green-deep) 45%, var(--green-mid) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

/* Decorative background blobs */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
}
body::before {
    width: 680px; height: 680px;
    background: radial-gradient(circle, var(--green-light) 0%, transparent 70%);
    opacity: .08;
    top: -220px; right: -160px;
}
body::after {
    width: 460px; height: 460px;
    background: radial-gradient(circle, var(--green-deep) 0%, transparent 70%);
    opacity: .2;
    bottom: -160px; left: -120px;
}

/* ── Card ────────────────────────────────────────────────── */
.login-card {
    width: 100%;
    max-width: 480px;
    background: rgba(242, 245, 240, .97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: none;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

/* Accent bar at the top of the card */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green-deep), var(--green-mid));
    border-radius: 1.5rem 1.5rem 0 0;
}

/* ── Logo circle ─────────────────────────────────────────── */
.login-logo {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 28px rgba(45, 106, 79, .4);
}
.login-logo i { font-size: 2rem; color: #fff; }

/* ── Site title & subtitle ───────────────────────────────── */
.site-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.7rem, 5vw, 2.3rem);
    letter-spacing: .05em;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: .2rem;
}
.site-sub {
    font-size: clamp(.78rem, 1.6vw, .88rem);
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

/* ── Tabs ────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid rgba(127, 154, 123, .22);
    gap: .25rem;
}
.nav-tabs .nav-link {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.82rem, 1.5vw, .92rem);
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .55rem 1.1rem;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--green-deep);
    border-bottom-color: rgba(45, 106, 79, .3);
}
.nav-tabs .nav-link.active {
    color: var(--green-deep);
    font-weight: 700;
    border-bottom-color: var(--green-mid);
    background: transparent;
}

/* ── Form labels ─────────────────────────────────────────── */
.form-label {
    font-size: clamp(.72rem, 1.3vw, .8rem);
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .35rem;
}

/* ── Input group ─────────────────────────────────────────── */
.input-group-text {
    background: var(--green-light);
    border-color: #cdd9c9;
    color: var(--green-soft);
    font-size: 1rem;
    transition: border-color .2s;
}
.form-control {
    background: #fff;
    border-color: #cdd9c9;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.85rem, 1.5vw, .95rem);
    transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: #b5c9b5; }
.form-control:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 .2rem rgba(122, 170, 80, .22);
}
.input-group:focus-within .input-group-text {
    border-color: var(--green-mid);
}

/* ── Submit button ───────────────────────────────────────── */
.btn-primary-custom {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(.9rem, 1.5vw, 1rem);
    font-weight: 600;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
    border: none;
    color: #fff;
    border-radius: .65rem;
    padding: .72rem;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(45, 106, 79, .38);
}
.btn-primary-custom:hover {
    opacity: .9;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(45, 106, 79, .48);
}
.btn-primary-custom:active { transform: translateY(0); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    font-size: clamp(.78rem, 1.4vw, .86rem);
    border-radius: .65rem;
    border-left-width: 4px;
}
.alert-info {
    background: rgba(122, 170, 80, .1);
    border-color: rgba(122, 170, 80, .4);
    color: var(--green-deep);
}
.alert-success {
    background: rgba(45, 106, 79, .1);
    border-color: rgba(45, 106, 79, .4);
    color: var(--green-deep);
}
.alert-danger {
    background: rgba(180, 60, 60, .07);
    border-color: rgba(180, 60, 60, .3);
    color: #7a2020;
}