/* ============================================================
   login-v1.css — Login page styles (v1)
   Used by: php/login.php
   Depends on shared vars from css/theme.css (--card-bg, --text-*, ...)
   ============================================================ */

/* ===== LOGIN-SPECIFIC THEME VARIABLES ===== */
:root[data-theme="dark"] {
    --card-shadow: 0 32px 64px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10);
    --label-c: rgba(255, 255, 255, .70);
    --input-bg: rgba(255, 255, 255, .06);
    --input-border: rgba(255, 255, 255, .14);
    --input-focus-bg: rgba(102, 126, 234, .12);
    --input-focus-bd: #7c8ff0;
    --input-focus-sh: 0 0 0 4px rgba(102, 126, 234, .20);
    --input-c: #fff;
    --input-ph: rgba(255, 255, 255, .28);
    --igt-bg: rgba(255, 255, 255, .06);
    --igt-border: rgba(255, 255, 255, .14);
    --igt-c: rgba(255, 255, 255, .50);
    --igt-hover-bg: rgba(255, 255, 255, .12);
    --igt-hover-c: rgba(255, 255, 255, .85);
    --alert-bg: rgba(220, 53, 69, .13);
    --alert-border: rgba(220, 53, 69, .30);
    --alert-c: #f87171;
    --logo-shadow: 0 10px 28px rgba(102, 126, 234, .45);
    --accent-line: linear-gradient(90deg, #667eea, #764ba2, #00c6fb);
}

:root[data-theme="light"] {
    --card-shadow: 0 20px 56px rgba(102, 126, 234, .20), inset 0 1px 0 rgba(255, 255, 255, .85);
    --label-c: #4c4a7a;
    --input-bg: rgba(255, 255, 255, .92);
    --input-border: rgba(102, 126, 234, .20);
    --input-focus-bg: rgba(102, 126, 234, .06);
    --input-focus-bd: #667eea;
    --input-focus-sh: 0 0 0 4px rgba(102, 126, 234, .16);
    --input-c: #1e1b4b;
    --input-ph: #a0a0c0;
    --igt-bg: rgba(102, 126, 234, .07);
    --igt-border: rgba(102, 126, 234, .18);
    --igt-c: #7c7aaa;
    --igt-hover-bg: rgba(102, 126, 234, .13);
    --igt-hover-c: #4c4a7a;
    --alert-bg: rgba(220, 53, 69, .08);
    --alert-border: rgba(220, 53, 69, .22);
    --alert-c: #dc2626;
    --logo-shadow: 0 10px 28px rgba(102, 126, 234, .35);
    --accent-line: linear-gradient(90deg, #667eea, #764ba2, #00c6fb);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes logoPulse {
    0%, 100% { box-shadow: var(--logo-shadow); }
    50%      { box-shadow: 0 14px 36px rgba(102, 126, 234, .55); }
}

/* ===== WRAPPER ===== */
.page-wrap {
    width: 100%;
    max-width: 440px;
    padding: 24px 16px 48px;
    position: relative;
    z-index: 1;
}

/* ===== CARD ===== */
.card-glass {
    background: var(--card-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--card-border) !important;
    border-radius: 28px !important;
    box-shadow: var(--card-shadow);
    animation: slideUp .5s cubic-bezier(.16, 1, .3, 1) both;
    transition: background .35s, border-color .35s, box-shadow .35s;
    position: relative;
    overflow: hidden;
}

/* Thin gradient accent bar along the top edge */
.card-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-line);
}

/* ===== LOGO ===== */
.logo-wrap {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: var(--logo-shadow);
    animation: logoPulse 3.2s ease-in-out infinite;
}

/* ===== TEXTS ===== */
.hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 6px;
    letter-spacing: -.3px;
}

.hero-sub {
    font-size: .875rem;
    color: var(--text-secondary);
    margin: 0;
    transition: color .3s;
}

/* ===== FORM FIELD STAGGERED ENTRANCE ===== */
.field-anim {
    animation: fadeIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
.field-anim:nth-of-type(1) { animation-delay: .05s; }
.field-anim:nth-of-type(2) { animation-delay: .10s; }

/* ===== LABEL ===== */
.form-label-custom {
    color: var(--label-c);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-bottom: .45rem;
    transition: color .3s;
}

/* ===== INPUT ===== */
.form-control-custom {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-c) !important;
    padding-top: .65rem;
    padding-bottom: .65rem;
    transition: background .2s, border-color .2s, box-shadow .2s, color .3s;
}

.form-control-custom:focus {
    background: var(--input-focus-bg) !important;
    border-color: var(--input-focus-bd) !important;
    box-shadow: var(--input-focus-sh) !important;
    color: var(--input-c) !important;
}

.form-control-custom::placeholder {
    color: var(--input-ph);
}

/* ===== INPUT GROUP TEXT ===== */
.igt-custom {
    background: var(--igt-bg) !important;
    border-color: var(--igt-border) !important;
    color: var(--igt-c) !important;
    transition: background .2s, color .2s;
}

.igt-custom.btn-igt:hover {
    background: var(--igt-hover-bg) !important;
    color: var(--igt-hover-c) !important;
}

/* ===== ALERT ===== */
.alert-err {
    background: var(--alert-bg);
    border: 1px solid var(--alert-border);
    border-radius: 14px;
    color: var(--alert-c);
    font-size: .875rem;
    animation: fadeIn .3s ease both;
    transition: background .3s, border-color .3s, color .3s;
}

/* ===== SUBMIT BTN ===== */
.btn-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(102, 126, 234, .38);
    transition: opacity .2s, transform .15s, box-shadow .2s;
}

.btn-gradient:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, .5);
}

.btn-gradient:active {
    opacity: 1;
    transform: translateY(0);
}

.btn-gradient:disabled {
    opacity: .6;
    transform: none;
    cursor: not-allowed;
}

.spin {
    display: inline-block;
    animation: spin .7s linear infinite;
}

[v-cloak] {
    display: none;
}

/* ===== PASSKEY BTN ===== */
.btn-passkey {
    background: linear-gradient(135deg, #00c6fb, #005bea);
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0, 91, 234, .30);
    transition: opacity .2s, transform .15s, box-shadow .2s;
}

.btn-passkey:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 91, 234, .48);
}

.btn-passkey:active {
    opacity: 1;
    transform: translateY(0);
}

.btn-passkey:disabled {
    opacity: .6;
    transform: none;
    cursor: not-allowed;
}

/* ===== DIVIDER ===== */
.divider-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-secondary);
    font-size: .8rem;
    margin: 1.1rem 0;
}

.divider-or::before,
.divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-border);
}