/* ============================================================
   theme-v2/pages/login.min.css
   Login page (standalone HTML).
   Extracted from Views/Login/Index.cshtml
   ============================================================ */

        * { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; height: 100%; }
        body {
            font-family: 'Segoe UI', 'Helvetica Neue', system-ui, -apple-system, Roboto, Arial, sans-serif;
            background: #BDE9A1;
            color: #1F3D24;
            overflow-x: hidden;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ============================ Page wrapper ============================ */
        .page {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
            overflow: hidden;
        }

        /* ============================ Background graphics ============================ */
        .bg {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* Layered diamond/rhombus that frames the login card */
        .diamond-bg {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 92vmin;
            height: 92vmin;
            z-index: 0;
            pointer-events: none;
            filter: drop-shadow(0 30px 60px rgba(30, 80, 35, 0.10));
        }
        @media (max-width: 600px) {
            .diamond-bg { width: 110vmin; height: 110vmin; }
        }

        /* Scattered educational decorations — small, varied positions + rotations */
        .deco {
            position: fixed;
            z-index: 1;
            pointer-events: none;
            opacity: 0.7;
        }
        /* HALF-CLIPPED corner graphics — negative pixel offsets push half the SVG
           past the viewport edge so each illustration reads as a "peeking" half. */
        .deco-books    { top: -45px;   left: -45px;   width: 140px; transform: rotate(-12deg); }
        .deco-gradcap  { bottom: -50px; right: -45px; width: 150px; transform: rotate(-12deg); }
        .deco-book     { bottom: -32px; left: -32px;  width: 110px; transform: rotate(8deg); }
        .deco-pencil-l { top: 32%;     left: -22px;   width: 60px;  transform: rotate(-22deg); }
        .deco-notepad  { top: -28px;   right: -28px;  width: 90px;  transform: rotate(14deg); }
        .deco-pencil-r { bottom: 20%;  right: -22px;  width: 55px;  transform: rotate(38deg); }

        /* Circles (replacing the stars), kept at scattered positions */
        .deco-star-1   { top: 18%;  left: 22%;  width: 20px; opacity: 0.55; }
        .deco-star-2   { bottom: 16%; right: 22%; width: 18px; opacity: 0.5; }
        .deco-star-3   { top: 62%;  left: 20%;  width: 14px; opacity: 0.6; }
        .deco-star-4   { top: 28%;  right: 30%; width: 16px; opacity: 0.5; }
        .deco-aplus    { top: 8%;   left: 32%;  width: 32px; transform: rotate(-8deg); opacity: 0.55; }
        .deco-dot-1    { top: 50%;  right: 30%; width: 9px;  opacity: 0.55; }
        .deco-dot-2    { bottom: 40%; left: 30%; width: 10px; opacity: 0.6; }

        @media (max-width: 900px) {
            .deco-pencil-l, .deco-pencil-r, .deco-notepad,
            .deco-star-1, .deco-star-2, .deco-star-3, .deco-star-4,
            .deco-aplus, .deco-dot-1, .deco-dot-2 { display: none; }
        }
        @media (max-width: 600px) {
            .deco-books   { width: 90px;  top: -28px; left: -28px; }
            .deco-gradcap { width: 100px; bottom: -32px; right: -28px; }
            .deco-book    { width: 75px;  bottom: -22px; left: -22px; }
        }

        /* ============================ Login card ============================ */
        .card {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 440px;
            background: #ffffff;
            border-radius: 24px;
            padding: 44px 44px 36px;
            box-shadow:
                0 30px 80px rgba(30, 80, 35, 0.18),
                0 10px 30px rgba(30, 80, 35, 0.10),
                0 1px 0 rgba(255, 255, 255, 0.8) inset;
            animation: card-in .55s cubic-bezier(.22,.61,.36,1) both;
        }

        @keyframes card-in {
            from { transform: translateY(14px) scale(.985); opacity: 0; }
            to   { transform: translateY(0)    scale(1);     opacity: 1; }
        }

        /* Top brand mark */
        .brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 28px;
        }
        .brand-badge {
            width: 64px; height: 64px;
            border-radius: 18px;
            background: linear-gradient(135deg, #6BCD3E 0%, #2E8B30 100%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow:
                0 12px 28px rgba(46, 139, 48, 0.30),
                0 4px 8px rgba(46, 139, 48, 0.20);
            margin-bottom: 16px;
        }
        .brand-badge svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
        .brand h1 {
            margin: 0;
            font-size: 22px;
            font-weight: 700;
            color: #1F3D24;
            letter-spacing: -0.015em;
            text-align: center;
        }
        .brand .tagline {
            margin: 6px 0 0;
            color: #6B7770;
            font-size: 13px;
            text-align: center;
            font-weight: 500;
        }

        /* Field */
        .field {
            position: relative;
            margin-bottom: 16px;
        }
        .field label {
            display: block;
            font-size: 12px;
            color: #4A5A4D;
            font-weight: 600;
            margin-bottom: 6px;
            letter-spacing: 0.02em;
        }
        .field-control {
            position: relative;
            display: flex;
            align-items: center;
            background: transparent;
            border: 1.5px solid #E2EEDA;
            border-radius: 12px;
            padding: 0 16px;
            transition: border-color .2s, box-shadow .2s;
        }
        .field-control:hover {
            border-color: #CDE3BE;
        }
        .field-control:focus-within {
            border-color: #4CAF50;
            box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.16);
        }
        .field-icon {
            width: 20px; height: 20px;
            color: #6B8A6F;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
            transition: color .2s;
        }
        .field-control:focus-within .field-icon { color: #2E8B30; }
        .field input {
            flex: 1;
            background: transparent;
            border: none;
            font-family: inherit;
            font-size: 14px;
            color: #1F3D24;
            padding: 14px 0 14px 12px;
            outline: none;
            min-width: 0;
        }
        .field input::placeholder {
            color: #93A697;
            font-weight: 500;
        }
        
        
        

        .field input:-webkit-autofill,
        .field input:-webkit-autofill:hover,
        .field input:-webkit-autofill:focus,
        .field input:-webkit-autofill:active {
            -webkit-text-fill-color: #1F3D24 !important;
            -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
            box-shadow: 0 0 0 1000px #ffffff inset !important;
            caret-color: #1F3D24 !important;
            transition: background-color 9999s ease-in-out 0s;
        }
        .field-toggle {
            background: none;
            border: none;
            color: #6B8A6F;
            cursor: pointer;
            padding: 4px 0 4px 8px;
            display: inline-flex;
            align-items: center;
            transition: color .15s;
        }
        .field-toggle:hover { color: #2E8B30; }
        .field-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* Inline error banner */
        .login-error {
            margin-bottom: 18px;
            padding: 11px 14px;
            background: #FDE7E7;
            color: #9B1C1C;
            border: 1px solid #F4BCBC;
            border-radius: 10px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.4;
        }
        .login-error svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }

        /* Remember-me + forgot row */
        .row-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 6px 0 22px;
        }
        .check {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #4A5A4D;
            cursor: pointer;
            user-select: none;
            font-weight: 500;
        }
        .check input {
            appearance: none;
            -webkit-appearance: none;
            width: 16px; height: 16px;
            border: 1.5px solid #CDE3BE;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            position: relative;
            transition: background .15s, border-color .15s;
        }
        .check input:checked {
            background: #4CAF50;
            border-color: #4CAF50;
        }
        .check input:checked::after {
            content: '';
            position: absolute;
            left: 4px; top: 1px;
            width: 4px; height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .forgot {
            font-size: 13px;
            color: #2E8B30;
            font-weight: 600;
            text-decoration: none;
            transition: color .15s;
        }
        .forgot:hover { color: #1E6B27; text-decoration: underline; }

        /* Primary CTA */
        .btn-primary {
            width: 100%;
            padding: 14px 18px;
            background: linear-gradient(180deg, #4CAF50 0%, #2E8B30 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 12px 24px rgba(46, 139, 48, 0.28);
            transition: transform .15s, box-shadow .2s, filter .15s;
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 32px rgba(46, 139, 48, 0.34);
            filter: brightness(1.04);
        }
        .btn-primary:active { transform: translateY(0); }
        .btn-primary.is-loading {
            color: transparent;
            pointer-events: none;
            position: relative;
        }
        .btn-primary.is-loading::after {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 18px; height: 18px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin .9s linear infinite;
        }
        .btn-primary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Footer link */
        .card-footer {
            margin-top: 24px;
            text-align: center;
            font-size: 13px;
            color: #6B7770;
        }
        .card-footer a {
            color: #2E8B30;
            font-weight: 600;
            text-decoration: none;
        }
        .card-footer a:hover { color: #1E6B27; text-decoration: underline; }

        /* ============================ Toast notifications ============================ */
        .toasts {
            position: fixed;
            top: 32px;
            right: 28px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        .toast {
            pointer-events: auto;
            min-width: 300px;
            max-width: 380px;
            background: #ffffff;
            color: #1F3D24;
            border-radius: 12px;
            padding: 12px 14px 12px 14px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            box-shadow:
                0 18px 40px rgba(30, 80, 35, 0.18),
                0 6px 14px rgba(30, 80, 35, 0.10);
            border-left: 4px solid #2E8B30;
            transform: translateX(420px);
            opacity: 0;
            animation: toast-in .55s cubic-bezier(.22,.61,.36,1) forwards;
            will-change: transform, opacity;
        }
        .toast.is-leaving {
            animation: toast-out .35s cubic-bezier(.55,.085,.68,.53) forwards;
        }
        @keyframes toast-in {
            0%   { transform: translateX(420px); opacity: 0; }
            60%  { opacity: 1; }
            100% { transform: translateX(0);     opacity: 1; }
        }
        @keyframes toast-out {
            to { transform: translateX(420px); opacity: 0; }
        }
        /* Error variant — red accent for failed login / validation messages */
        .toast--error {
            border-left-color: #DC2626;
            box-shadow:
                0 18px 40px rgba(155, 28, 28, 0.18),
                0 6px 14px rgba(155, 28, 28, 0.10);
        }
        .toast--error .toast__icon {
            background: #FEE2E2;
            color: #DC2626;
        }
        .toast__icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #E8F5E9;
            color: #2E8B30;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .toast__icon svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .toast__body {
            flex: 1;
            min-width: 0;
            line-height: 1.35;
        }
        .toast__title {
            font-size: 13.5px;
            font-weight: 700;
            color: #1F3D24;
            margin: 0 0 2px;
        }
        .toast__msg {
            font-size: 12.5px;
            color: #5A6B5D;
            margin: 0;
        }
        .toast__close {
            background: none;
            border: none;
            color: #93A697;
            cursor: pointer;
            padding: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 6px;
            transition: color .15s, background .15s;
        }
        .toast__close:hover { color: #1F3D24; background: #F2FBE6; }
        .toast__close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

        /* ============================ Mobile reflow ============================ */
        @media (max-width: 520px) {
            .page { padding: 24px 16px; }
            .card { padding: 36px 26px 28px; border-radius: 18px; }
            .brand-badge { width: 56px; height: 56px; border-radius: 16px; }
            .brand h1 { font-size: 20px; }
            .toasts { top: 12px; right: 12px; left: 12px; }
            .toast { min-width: 0; max-width: none; }
        }