/* ============================================================
   CSS Variables — mirrors erp_base.css (both themes)
   ============================================================ */
:root {
    --erp-bg:           #0f1117;
    --erp-surface:      #181c25;
    --erp-border:       rgba(255, 255, 255, 0.07);
    --erp-text:         #e8eaf0;
    --erp-text-muted:   #7a8099;
    --erp-accent:       #3d7fff;
    --erp-accent-dim:   rgba(61, 127, 255, 0.12);
    --erp-danger:       #f87171;

    /* Type scale — mirrors erp_base.css (login.css is standalone, no shared stylesheet) */
    --erp-font-xs:   0.625rem;   /* 10px */
    --erp-font-sm:   0.75rem;    /* 12px */
    --erp-font-base: 0.8125rem;  /* 13px */
    --erp-font-lg:   1rem;       /* 16px */
}

[data-theme="light"] {
    --erp-bg:           #f0f2f7;
    --erp-surface:      #ffffff;
    --erp-border:       rgba(0, 0, 0, 0.08);
    --erp-text:         #1a1e2e;
    --erp-text-muted:   #7a8099;
    --erp-accent:       #2563eb;
    --erp-accent-dim:   rgba(37, 99, 235, 0.10);
    --erp-danger:       #dc2626;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Mono', 'Courier New', monospace;
    background: var(--erp-bg);
    color: var(--erp-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
}

/* ============================================================
   Login Wrapper
   ============================================================ */
.login-wrap {
    width: 100%;
    max-width: 480px;
    padding: 40px 24px;
}

/* ============================================================
   Header row (breadcrumb + theme toggle)
   ============================================================ */
.login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}


.login-theme-btn {
    background: none;
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--erp-text-muted);
    font-size: var(--erp-font-lg);
    transition: background 0.15s, color 0.15s;
}

.login-theme-btn:hover {
    background: var(--erp-accent-dim);
    color: var(--erp-accent);
}

.login-divider {
    border: none;
    border-top: 1px solid var(--erp-border);
    margin-bottom: 32px;
}

/* ============================================================
   Badge
   ============================================================ */
/* ============================================================
   Logo
   ============================================================ */
.login-logo {
    display: inline-block;
    background: var(--erp-accent-dim);
    color: var(--erp-accent);
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}

.login-logo span {
    color: var(--erp-text-muted);
    font-weight: 400;
}

.login-badge {
    display: inline-block;
    background: var(--erp-accent-dim);
    color: var(--erp-accent);
    font-size: var(--erp-font-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ============================================================
   Heading
   ============================================================ */
.login-heading {
    font-size: 2.25rem;
    font-weight: 500;
    color: var(--erp-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 8px;
}

/* ============================================================
   Form Fields
   ============================================================ */
.login-field {
    margin-bottom: 18px;
}

.login-label {
    display: block;
    font-size: var(--erp-font-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--erp-text-muted);
    margin-bottom: 6px;
}

.login-input {
    width: 100%;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--erp-text);
    font-family: inherit;
    font-size: var(--erp-font-base);
    transition: border-color 0.15s;
}

.login-input:focus {
    outline: none;
    border-color: var(--erp-accent);
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--erp-surface) inset;
    -webkit-text-fill-color: var(--erp-text);
    transition: background-color 5000s ease-in-out 0s;
    border-color: var(--erp-border);
    caret-color: var(--erp-text);
}

.login-input.is-invalid {
    border-color: var(--erp-danger);
}

/* ============================================================
   Remember / Reset row
   ============================================================ */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: var(--erp-font-sm);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--erp-text-muted);
    cursor: pointer;
    user-select: none;
}

.login-remember input[type="checkbox"] {
    accent-color: var(--erp-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.login-reset {
    background: none;
    border: none;
    color: var(--erp-text-muted);
    font-family: inherit;
    font-size: var(--erp-font-sm);
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.login-reset:hover {
    color: var(--erp-accent);
}

/* ============================================================
   Submit Button
   ============================================================ */
.login-submit {
    width: 100%;
    background: var(--erp-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-family: inherit;
    font-size: var(--erp-font-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
}

.login-submit:hover {
    opacity: 0.88;
}

/* ============================================================
   Error Alert
   ============================================================ */
.login-error {
    background: var(--erp-danger-dim);
    border: 1px solid var(--erp-danger);
    border-radius: 6px;
    color: var(--erp-danger);
    font-size: var(--erp-font-sm);
    padding: 10px 12px;
    margin-bottom: 20px;
}