/**
 * MESHMOG Framework - Login & 404 Styles
 * 
 * Diese Datei nutzt die zentralen CSS-Variablen aus omm-variables.css.
 * Fallback-Werte für eigenständiges Rendering (ohne Framework-Kontext).
 */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--omm-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--omm-sidebar-bg, #f5f9f8) 0%, var(--omm-surface-container-high, #e8f4f2) 100%);
}

/* Login Page */
.omm-login-container {
    width: 100%;
    max-width: 400px;
    padding: var(--omm-space-4, 16px);
}

.omm-login-card {
    background: var(--omm-surface-container-lowest, #ffffff);
    border-radius: var(--omm-radius-lg, 16px);
    box-shadow: var(--omm-shadow-3, 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3));
    padding: var(--omm-space-10, 40px);
    text-align: center;
}

.omm-login-logo {
    max-width: 120px;
    max-height: 60px;
    margin-bottom: var(--omm-space-6, 24px);
}

.omm-login-title {
    font-size: var(--omm-type-headline-small, 24px);
    font-weight: var(--omm-weight-medium, 500);
    color: var(--omm-on-surface, #1c1b1f);
    margin-bottom: var(--omm-space-6, 24px);
}

.omm-login-error {
    background: var(--omm-error-container, #ffdad6);
    border-left: 4px solid var(--omm-error, #ba1a1a);
    color: var(--omm-on-error-container, #410002);
    padding: var(--omm-space-3, 12px) var(--omm-space-4, 16px);
    border-radius: 0 var(--omm-radius-sm, 8px) var(--omm-radius-sm, 8px) 0;
    margin-bottom: var(--omm-space-5, 20px);
    text-align: left;
    font-size: var(--omm-type-body-medium, 14px);
}

.omm-login-form {
    text-align: left;
}

.omm-input-group {
    margin-bottom: var(--omm-space-5, 20px);
}

.omm-input-group label {
    display: block;
    font-size: var(--omm-type-label-medium, 12px);
    font-weight: var(--omm-weight-medium, 500);
    color: var(--omm-on-surface-variant, #49454e);
    margin-bottom: var(--omm-space-2, 8px);
}

.omm-input-group input {
    width: 100%;
    padding: var(--omm-space-3, 12px) var(--omm-space-4, 16px);
    border: 1px solid var(--omm-outline, #79747e);
    border-radius: var(--omm-radius-sm, 8px);
    font-size: var(--omm-type-body-large, 16px);
    color: var(--omm-on-surface, #1c1b1f);
    background: var(--omm-surface, #fefbff);
    transition: border-color var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease),
                box-shadow var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease);
}

.omm-input-group input:focus {
    outline: none;
    border-color: var(--omm-primary, #78b0a7);
    box-shadow: var(--omm-focus-ring, 0 0 0 3px rgba(120, 176, 167, 0.4));
}

.omm-remember-group {
    margin-bottom: var(--omm-space-6, 24px);
}

.omm-remember-group label {
    display: flex;
    align-items: center;
    gap: var(--omm-space-2, 8px);
    font-size: var(--omm-type-body-medium, 14px);
    color: var(--omm-on-surface-variant, #49454e);
    cursor: pointer;
}

.omm-remember-group input {
    width: 18px;
    height: 18px;
    accent-color: var(--omm-primary, #78b0a7);
}

.omm-login-btn {
    width: 100%;
    padding: var(--omm-space-3, 12px);
    background: var(--omm-primary, #78b0a7);
    color: var(--omm-on-primary, #ffffff);
    border: none;
    border-radius: var(--omm-radius-full, 9999px);
    font-size: var(--omm-type-body-large, 16px);
    font-weight: var(--omm-weight-medium, 500);
    cursor: pointer;
    transition: background var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease),
                box-shadow var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease);
}

.omm-login-btn:hover {
    background: var(--omm-primary-dark, #5a9189);
    box-shadow: var(--omm-shadow-2, 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15));
}

.omm-login-btn:focus {
    outline: none;
    box-shadow: var(--omm-focus-ring, 0 0 0 3px rgba(120, 176, 167, 0.4));
}

/* 404 Page */
.omm-404-container {
    text-align: center;
    padding: var(--omm-space-8, 32px);
}

.omm-404-content {
    background: var(--omm-surface-container-lowest, #ffffff);
    border-radius: var(--omm-radius-lg, 16px);
    box-shadow: var(--omm-shadow-3, 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3));
    padding: 60px var(--omm-space-10, 40px);
    max-width: 500px;
    margin: 0 auto;
}

.omm-404-code {
    font-size: 120px;
    font-weight: var(--omm-weight-bold, 700);
    color: var(--omm-primary, #78b0a7);
    line-height: 1;
    margin-bottom: var(--omm-space-4, 16px);
}

.omm-404-content h1 {
    font-size: var(--omm-type-headline-small, 24px);
    font-weight: var(--omm-weight-medium, 500);
    color: var(--omm-on-surface, #1c1b1f);
    margin-bottom: var(--omm-space-3, 12px);
}

.omm-404-content p {
    font-size: var(--omm-type-body-large, 16px);
    color: var(--omm-on-surface-variant, #49454e);
    margin-bottom: var(--omm-space-8, 32px);
}

.omm-404-link {
    display: inline-flex;
    align-items: center;
    gap: var(--omm-space-2, 8px);
    padding: var(--omm-space-3, 12px) var(--omm-space-6, 24px);
    background: var(--omm-primary, #78b0a7);
    color: var(--omm-on-primary, #ffffff);
    border-radius: var(--omm-radius-full, 9999px);
    font-weight: var(--omm-weight-medium, 500);
    text-decoration: none;
    transition: background var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease),
                box-shadow var(--omm-duration-short-4, 200ms) var(--omm-easing-standard, ease);
}

.omm-404-link:hover {
    background: var(--omm-primary-dark, #5a9189);
    box-shadow: var(--omm-shadow-2, 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15));
}