/* ============================================================
   Minno CRM — Auth Pages (Login + Registration Wizard)
   macOS / iOS visual language
   ============================================================ */

/* ── Global reset for auth pages ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body.auth-desktop {
    font-family: "Google Sans", -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(ellipse at 25% 20%, rgba(0,180,216,.24) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 80%, rgba(0,119,182,.18) 0%, transparent 55%),
        linear-gradient(140deg, #caf0f8 0%, #90e0ef 40%, #b8e8f8 70%, #caf0f8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    overflow: auto;
}

/* ── Dialog card ──────────────────────────────────────────── */
.auth-dialog {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-radius: 20px;
    box-shadow:
        0 24px 80px rgba(0,119,182,.22),
        0 4px 20px rgba(0,119,182,.10),
        0 0 0 .5px rgba(0,119,182,.14);
    width: 100%;
    overflow: hidden;
    animation: authDialogPop .32s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes authDialogPop {
    from { opacity: 0; transform: scale(.90) translateY(16px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.auth-dialog-body   { padding: 36px 36px 24px; }
.auth-dialog-footer {
    padding: 14px 36px 16px;
    border-top: .5px solid rgba(0,0,0,.08);
    text-align: center;
    font-size: 13px;
    color: rgba(60,60,67,.55);
    background: rgba(0,0,0,.015);
}

/* ── App icon / branding ──────────────────────────────────── */
.auth-app-icon {
    width: 74px; height: 74px;
    border-radius: 19px;
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff;
    margin: 0 auto 14px;
    box-shadow: 0 8px 26px rgba(0,119,182,.38);
}

.auth-app-name {
    font-family: "Google Sans Display", sans-serif;
    font-size: 22px; font-weight: 700;
    color: #1c1c1e; text-align: center;
    letter-spacing: -.02em; margin-bottom: 3px;
}

.auth-app-subtitle {
    font-size: 13px; color: rgba(60,60,67,.52);
    text-align: center; margin-bottom: 26px;
}

/* ── Google button ────────────────────────────────────────── */
.btn-google-auth {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.16);
    border-radius: 12px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px; font-weight: 600; color: #1c1c1e;
    cursor: pointer; text-decoration: none;
    transition: background .14s, box-shadow .14s;
    box-shadow: 0 1px 4px rgba(0,0,0,.09);
    margin-bottom: 18px;
}
.btn-google-auth:hover {
    background: #f5f5f7;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    color: #1c1c1e;
}

/* ── Divider ──────────────────────────────────────────────── */
.auth-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 18px; font-size: 12px; color: rgba(60,60,67,.35);
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: .5px; background: rgba(0,0,0,.11);
}

/* ── Form fields ──────────────────────────────────────────── */
.auth-field { margin-bottom: 12px; }

.auth-label {
    display: block; font-size: 13px; font-weight: 500;
    color: rgba(60,60,67,.68); margin-bottom: 5px;
}

.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-left: 36px; }

.auth-iico {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: rgba(60,60,67,.32); font-size: 12px; pointer-events: none;
}

.auth-input {
    width: 100%; padding: 11px 13px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px; color: #1c1c1e;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-appearance: none;
    box-sizing: border-box;
}
.auth-input:focus {
    border-color: #0077b6;
    box-shadow: 0 0 0 3px rgba(0,119,182,.15);
    background: #fff;
}
.auth-input::placeholder { color: rgba(60,60,67,.30); }

.auth-textarea {
    width: 100%; padding: 11px 13px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px; color: #1c1c1e;
    outline: none; resize: vertical;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    min-height: 80px;
}
.auth-textarea:focus {
    border-color: #0077b6;
    box-shadow: 0 0 0 3px rgba(0,119,182,.15);
    background: #fff;
}
.auth-textarea::placeholder { color: rgba(60,60,67,.30); }

.auth-select {
    width: 100%; padding: 11px 13px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    font-family: "Google Sans", sans-serif;
    font-size: 14px; color: #1c1c1e;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}
.auth-select:focus { border-color: #0077b6; box-shadow: 0 0 0 3px rgba(0,119,182,.15); background: #fff; }

.auth-pass-toggle {
    position: absolute; right: 11px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: rgba(60,60,67,.38); padding: 3px; font-size: 13px;
}
.auth-pass-toggle:hover { color: #0077b6; }

/* ── Options row ──────────────────────────────────────────── */
.auth-options-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.auth-checkbox-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: rgba(60,60,67,.65); cursor: pointer;
}
.auth-checkbox {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid rgba(0,0,0,.22);
    accent-color: #0077b6; cursor: pointer;
}
.auth-link { font-size: 13px; color: #0077b6; text-decoration: none; font-weight: 500; }
.auth-link:hover { color: #005a8a; }

/* ── Buttons — shared base ────────────────────────────────── */
/* Applied to both <button> and <a> — identical dimensions */
.btn-auth-primary,
.btn-auth-secondary {
    /* layout */
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    /* typography */
    font-family: "Google Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    letter-spacing: -.01em;
    line-height: 1.4;
    /* shape */
    border-radius: 12px;
    border: none;
    cursor: pointer;
    /* transition */
    transition: opacity .14s ease, transform .1s ease, background .14s ease;
    /* prevent shrink in flex contexts */
    flex-shrink: 0;
}

.btn-auth-primary {
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,119,182,.32);
}
.btn-auth-primary:hover  { opacity: .90; color: #fff; }
.btn-auth-primary:active { transform: scale(.98); }

.btn-auth-secondary {
    background: rgba(0,0,0,.06);
    border: .5px solid rgba(0,0,0,.13);
    color: #1c1c1e;
    margin-top: 10px;
}
.btn-auth-secondary:hover  { background: rgba(0,0,0,.10); color: #1c1c1e; }
.btn-auth-secondary:active { transform: scale(.98); }

/* ── Alerts ───────────────────────────────────────────────── */
.auth-alert {
    display: flex; align-items: flex-start; gap: 12px;
    border-radius: 12px; padding: 13px 14px; margin-bottom: 18px;
    font-size: 13px;
}
.auth-alert i { margin-top: 1px; flex-shrink: 0; font-size: 1rem; }
.auth-alert-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.auth-alert-msg   { line-height: 1.55; color: rgba(60,60,67,.72); }
.auth-email-chip  { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #0077b6; background: rgba(0,119,182,.08); padding: 2px 9px; border-radius: 9999px; }

.auth-alert-warn  { background: rgba(0,90,138,.06); border: 1px solid rgba(0,90,138,.20); border-left: 4px solid #005a8a; }
.auth-alert-warn  i, .auth-alert-warn  .auth-alert-title { color: #005a8a; }
.auth-alert-danger{ background: rgba(0,61,92,.06);  border: 1px solid rgba(0,61,92,.18);  border-left: 4px solid #003d5c; }
.auth-alert-danger i, .auth-alert-danger .auth-alert-title { color: #003d5c; }
.auth-alert-info  { background: rgba(0,119,182,.06); border: 1px solid rgba(0,119,182,.20); border-left: 4px solid #0077b6; }
.auth-alert-info  i, .auth-alert-info  .auth-alert-title { color: #0077b6; }

/* ── Wizard step indicator ────────────────────────────────── */
.wizard-steps {
    display: flex; align-items: center; gap: 0;
    margin-bottom: 28px; justify-content: center;
}
.wstep {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(0,0,0,.14);
    transition: all .2s;
    flex-shrink: 0;
}
.wstep.active { background: #0077b6; width: 22px; border-radius: 5px; }
.wstep.done   { background: #00b4d8; }
.wstep-gap    { width: 6px; }

/* ── Wizard icon ──────────────────────────────────────────── */
.wizard-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
    margin: 0 auto 16px;
    box-shadow: 0 6px 20px rgba(0,119,182,.30);
}
.wizard-title    { font-family: "Google Sans Display", sans-serif; font-size: 20px; font-weight: 700; color: #1c1c1e; text-align: center; letter-spacing: -.015em; margin-bottom: 6px; }
.wizard-subtitle { font-size: 13px; color: rgba(60,60,67,.55); text-align: center; line-height: 1.6; margin-bottom: 24px; }

/* ── Section heading ──────────────────────────────────────── */
.auth-section-title {
    font-size: 11px; font-weight: 700; color: #0077b6;
    text-transform: uppercase; letter-spacing: .07em;
    padding-bottom: 8px; border-bottom: .5px solid rgba(0,0,0,.10);
    margin-bottom: 4px; margin-top: 20px;
}

/* ── OTP boxes ────────────────────────────────────────────── */
.otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.otp-box-mac {
    width: 48px; height: 58px; border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,.14);
    background: rgba(0,0,0,.04);
    font-family: "Google Sans Display", sans-serif;
    font-size: 1.5rem; font-weight: 700;
    text-align: center; color: #1c1c1e;
    outline: none; transition: all .14s;
    -webkit-appearance: none;
}
.otp-box-mac:focus  { border-color: #0077b6; box-shadow: 0 0 0 3px rgba(0,119,182,.18); background: #fff; }
.otp-box-mac.filled { background: rgba(0,119,182,.07); border-color: rgba(0,119,182,.35); color: #0077b6; }

/* ── Existing org cards ───────────────────────────────────── */
.org-card-mac {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; border-radius: 12px;
    background: rgba(0,0,0,.03);
    border: .5px solid rgba(0,0,0,.10);
    transition: all .14s; cursor: default;
    margin-bottom: 8px;
}
.org-card-mac:hover { background: rgba(0,119,182,.05); border-color: rgba(0,119,182,.22); }
.org-card-avatar-mac {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: #fff; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.org-card-name-mac { font-weight: 600; font-size: 14px; color: #1c1c1e; }
.org-card-meta-mac { font-size: 12px; color: rgba(60,60,67,.52); margin-top: 2px; }

/* ── Back link ────────────────────────────────────────────── */
.auth-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; color: #0077b6;
    text-decoration: none; background: none; border: none;
    cursor: pointer; padding: 0; margin-bottom: 20px;
    font-family: "Google Sans", sans-serif;
}
.auth-back-btn:hover { color: #005a8a; }

/* ── Grid for org form ────────────────────────────────────── */
.auth-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 520px) {
    .auth-grid-2, .auth-grid-3 { grid-template-columns: 1fr; }
}

/* ── Role badge ───────────────────────────────────────────── */
.auth-role-badge {
    display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; padding: 1px 7px; border-radius: 9999px;
    background: rgba(0,119,182,.10); color: #0077b6; margin-left: 6px;
}

/* ── Success animation ────────────────────────────────────── */
.success-circle-mac {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 26px rgba(0,180,216,.38);
    animation: successPop .5s cubic-bezier(.175,.885,.32,1.275) both;
    font-size: 2rem; color: #fff;
}
@keyframes successPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Approval chip ────────────────────────────────────────── */
.chip-pending  { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase; letter-spacing: .04em; background: rgba(0,119,182,.10); color: #0077b6; }
.chip-approved { background: rgba(40,200,64,.10); color: #1e8533; }
.chip-rejected { background: rgba(0,61,92,.10); color: #003d5c; }

/* ── Timer / resend ───────────────────────────────────────── */
.otp-timer { font-size: 12px; color: rgba(60,60,67,.45); text-align: center; margin-top: 14px; }
.otp-resend-btn {
    background: none; border: none; color: #0077b6; font-size: 13px;
    font-weight: 500; cursor: pointer; font-family: "Google Sans", sans-serif;
    padding: 0;
}
.otp-resend-btn:hover { color: #005a8a; }