/* =========================================================================
   Apex Prime — Authentication Pages (Sign In / Sign Up)
   File: css/auth.css
   Minimal, light theme. No brand/blue panel. Compact centered card.
   ========================================================================= */

:root {
    --ap-primary:        #3451B2;
    --ap-primary-dark:   #2A3F8F;
    --ap-bg:             #F5F7FB;
    --ap-card:           #FFFFFF;
    --ap-text:           #0F172A;
    --ap-text-muted:     #64748B;
    --ap-border:         #E2E8F0;
    --ap-input-bg:       #F8FAFC;
    --ap-error:          #DC2626;
    --ap-error-bg:       #FEE2E2;
    --ap-success:        #16A34A;
    --ap-success-bg:     #DCFCE7;
    --ap-shadow-sm:      0 1px 2px rgba(15, 23, 42, .05);
    --ap-shadow-md:      0 4px 16px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.auth-page {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ap-text);
    background: var(--ap-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ap-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Shell — single column, centered
   --------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* Hide the brand panel entirely (kept in markup for backward-compat) */
.auth-brand { display: none; }

.auth-panel {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: var(--ap-shadow-md);
}

/* ---------------------------------------------------------------
   Header — small inline logo + title
   --------------------------------------------------------------- */
.auth-head {
    text-align: center;
    margin-bottom: 20px;
}

.auth-head::before {
    content: "\2680";  /* placeholder hidden; we use a real logo via ::before? skip */
    display: none;
}

.auth-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 0 0 4px;
    color: var(--ap-text);
}
.auth-sub {
    font-size: 13px;
    color: var(--ap-text-muted);
    margin: 0;
}

/* Tiny logo above the title (drawn via background to avoid markup changes) */
.auth-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border-radius: 9px;
    background:
        radial-gradient(circle at 50% 38%, #fff 0 28%, transparent 29%),
        var(--ap-primary);
    box-shadow: 0 4px 10px rgba(52, 81, 178, .25);
}

/* ---------------------------------------------------------------
   Tabs — kept compatible if present, otherwise harmless
   --------------------------------------------------------------- */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ap-input-bg);
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
}
.auth-tab {
    text-align: center;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-text-muted);
    border-radius: 7px;
    transition: all .15s ease;
}
.auth-tab:hover { text-decoration: none; color: var(--ap-text); }
.auth-tab.is-active {
    background: #fff;
    color: var(--ap-primary);
    box-shadow: var(--ap-shadow-sm);
}

/* ---------------------------------------------------------------
   Alerts
   --------------------------------------------------------------- */
.auth-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.auth-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}
.auth-alert i { font-size: 16px; flex-shrink: 0; }
.auth-alert--error   { background: var(--ap-error-bg);   color: var(--ap-error);   border-color: #FECACA; }
.auth-alert--success { background: var(--ap-success-bg); color: var(--ap-success); border-color: #BBF7D0; }

/* ---------------------------------------------------------------
   Form fields
   --------------------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: 12px; }

.field { display: flex; flex-direction: column; }

.field-row { display: grid; gap: 10px; }
.field-row--2 { grid-template-columns: 1fr 1fr; }

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-text);
    margin-bottom: 5px;
    letter-spacing: .1px;
}
.field-opt { color: var(--ap-text-muted); font-weight: 400; }

.field-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-primary);
}

.field-input {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ap-input-bg);
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field-input:focus-within {
    border-color: var(--ap-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52, 81, 178, .12);
}
.field-input > i {
    color: #94A3B8;
    font-size: 16px;
    padding: 0 10px 0 12px;
    flex-shrink: 0;
}
.field-input input {
    flex: 1;
    height: 42px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ap-text);
    padding: 0 12px 0 0;
    outline: none;
    width: 100%;
}
.field-input input::placeholder { color: #94A3B8; }

.field-toggle {
    background: transparent;
    border: none;
    color: #94A3B8;
    padding: 0 12px;
    height: 42px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.field-toggle:hover { color: var(--ap-primary); }

.field-hint {
    font-size: 11px;
    color: var(--ap-text-muted);
    margin-top: 5px;
    line-height: 1.4;
}

/* Password strength meter */
.pw-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 6px;
}
.pw-meter span {
    height: 3px;
    background: var(--ap-border);
    border-radius: 3px;
    transition: background .25s ease;
}
.pw-meter[data-strength="1"] span:nth-child(-n+1) { background: #EF4444; }
.pw-meter[data-strength="2"] span:nth-child(-n+2) { background: #F59E0B; }
.pw-meter[data-strength="3"] span:nth-child(-n+3) { background: #3B82F6; }
.pw-meter[data-strength="4"] span                  { background: #16A34A; }

/* Checkbox */
.field-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--ap-text-muted);
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
}
.field-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ap-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: all .15s ease;
}
.field-check input[type="checkbox"]:checked {
    background: var(--ap-primary);
    border-color: var(--ap-primary);
}
.field-check input[type="checkbox"]: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);
}
.field-check a { font-weight: 600; }

/* ---------------------------------------------------------------
   Submit button — solid, flat
   --------------------------------------------------------------- */
.btn-auth {
    margin-top: 4px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--ap-primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.btn-auth:hover    { background: var(--ap-primary-dark); }
.btn-auth:active   { transform: translateY(1px); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; }
.btn-auth i { font-size: 16px; }

/* ---------------------------------------------------------------
   Footer link
   --------------------------------------------------------------- */
.auth-foot {
    text-align: center;
    font-size: 13px;
    color: var(--ap-text-muted);
    margin: 12px 0 0;
}
.auth-foot a { font-weight: 600; }

/* ---------------------------------------------------------------
   Small screens
   --------------------------------------------------------------- */
@media (max-width: 380px) {
    .field-row--2 { grid-template-columns: 1fr; }
    .auth-card { padding: 24px 20px; }
}


/* ---------------------------------------------------------------
   Inline SVG eye icon (password show/hide)
   --------------------------------------------------------------- */
.field-toggle .ico-eye {
    width: 18px;
    height: 18px;
    color: #94A3B8;
    transition: color .15s ease;
}
.field-toggle:hover .ico-eye { color: var(--ap-primary); }