/* ============================================================================
 * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
 * ============================================================================
 *
 * file_id: d0d3e455-137f-4753-969e-77a7e27a46ca
 * generated_timestamp: 2026-06-03T12:08:35.970202+00:00Z
 * database_name: rezeptx_cdb
 *
 * ============================================================================
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN.CSS - Standalone Stylesheet for Login/Onboarding Pages
   ═══════════════════════════════════════════════════════════════════════════
   
   This file is FULLY STANDALONE - no dependency on app.css.
   All styles needed for the login page are self-contained here.
   
   Sections:
   1. CSS Variables (Design Tokens) - Copied from app.css
   2. Base Reset
   3. App Header - Copied from app.css
   4. User Dropdown Menu - Copied from app.css
   5. Toggle Group - Copied from app.css
   6. Button System - Copied from app.css
   7. Login Page Layout
   8. Auth Form Elements
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* F34/GDPR: fonts loaded LOCALLY only — zero web-font calls. Source Sans Pro @font-face (weights 200-900) lives in fonts.css, same /static/css dir as this file. Public auth pages link public.css but NOT base.html (which links fonts.css directly), so public.css must self-import its font faces here. Google Fonts removed 2026-05-27 (was an external web-font @import for Source Sans Pro weights 400;500;600;700). Weight 500 not vendored locally — browser falls back to nearest (600); acceptable, matches authenticated shell. */
@import url('fonts.css');

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLES (DESIGN TOKENS)
   Copied from app.css for standalone operation
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* =================================
       Light Mode Theme Colors
       ================================= */

    /* Background Colors */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f9fafb;
    --theme-bg-tertiary: #f3f4f6;

    /* Primary Brand Colors */
    --theme-primary: #0b6361;

    /* Surface Colors */
    --theme-surface: #ffffff;
    --theme-surface-variant: #f9fafb;
    --theme-surface-raised: #f3f4f6;

    /* Background Colors - Page & Sections */
    --theme-background: #eeeeee;
    --theme-background-subtle: #e5e7eb;
    --theme-header-bg: #dddddd;
    --theme-header-border: #bbbbbb;

    /* Text Colors */
    --theme-text-primary: #111827;
    --theme-text-secondary: #4b5563;
    --theme-text-muted: #9ca3af;
    --theme-text-on-primary: #ffffff;

    /* Action Button Colors */
    --color-action-blue: #1D4ED8;
    --color-action-blue-hover: #1e40af;

    /* Semantic Text Colors */
    --color-text-inverse: #ffffff;

    /* Border Colors */
    --theme-border: #d1d5db;
    --theme-border-subtle: #e5e7eb;
    --theme-border-strong: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-input: #d1d5db;

    /* State Colors */
    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #3b82f6;

    /* Surface Colors - Semantic tokens */
    --color-surface-card: #ffffff;
    --color-surface-section: #f9fafb;
    --color-surface-hover: #f3f4f6;

    /* Focus Ring */
    --color-focus-ring: rgb(190, 149, 255);
    --color-focus-ring-shadow: rgba(190, 149, 255, 0.1);

    /* Logo Gradient Colors */
    --color-logo-gradient-start: #4b7c7a;
    --color-logo-gradient-end: #5a8885;

    /* Layout Tokens */
    --layout-padding-x: 20px;
    --layout-padding-y: 1rem;
    --header-height: 3rem;

    /* Transition Tokens */
    --transition-fast: 0.12s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index Tokens */
    --z-header: 1000;
    --z-dropdown: 1050;
    --z-modal: 1100;
    --z-overlay: 999;

    /* Public pages domain color */
    --domaincolor-public: #0b6361;

    /* Login-specific variables */
    --login-focus-color: #0e7f7b;
    --login-focus-ring: rgba(14, 127, 123, 0.2);

    /* Legacy color tokens (for dropdown compatibility) */
    --color-white: #ffffff;
    --color-almost-black: #111827;
    --color-light-grey: #f3f4f6;
    --color-grey-disabled: #d1d5db;
    --color-button: #1D4ED8;
    --color-danger: #dc2626;
    --color-danger-bg-hover: #fee2e2;

    /* Login Page Gradient */
    --bg-gradient-start: #094542;
    --bg-gradient-end: #0c7270;

    /* Form controls */
    --login-input-bg: #FFFFFF;
    --login-input-border: rgba(255, 255, 255, 0.3);
    --login-input-text: #111827;
    --login-input-focus-ring: rgba(20, 184, 166, 0.3);
}

/* =================================
   Dark Mode Theme Colors
   ================================= */
.dark {
    /* Dark mode background colors */
    --theme-bg-primary: #0f1419;
    --theme-bg-secondary: #1a1f2e;
    --theme-bg-tertiary: #242937;

    /* Primary Brand Colors */
    --theme-primary: #0b6361;

    /* Surface Colors */
    --theme-surface: #1f2937;
    --theme-surface-variant: #111827;
    --theme-surface-raised: #374151;

    /* Background Colors */
    --theme-background: #111827;
    --theme-background-subtle: #1f2937;
    --theme-header-bg: #2d3748;
    --theme-header-border: #4b5563;

    /* Text Colors */
    --theme-text-primary: #d1d5db;
    --theme-text-secondary: #9ca3af;
    --theme-text-muted: #52525b;
    --theme-text-on-primary: #111827;

    /* Border Colors */
    --theme-border: #374151;
    --theme-border-subtle: #1f2937;
    --theme-border-strong: #4b5563;
    --color-border: #374151;
    --color-border-input: #4b5563;

    /* State Colors - Brighter for dark mode */
    --theme-success: #22c55e;
    --theme-warning: #fbbf24;
    --theme-error: #f87171;
    --theme-info: #60a5fa;

    /* Surface Colors - Dark mode variants */
    --color-surface-card: #1f2937;
    --color-surface-section: #111827;
    --color-surface-hover: #374151;

    /* Focus Ring */
    --color-focus-ring: rgb(190, 149, 255);
    --color-focus-ring-shadow: rgba(190, 149, 255, 0.15);

    /* Logo Gradient - Muted for dark mode */
    --color-logo-gradient-start: #4b7c7a;
    --color-logo-gradient-end: #5a8885;

    /* Legacy color tokens - Dark mode */
    --color-white: #ffffff;
    --color-almost-black: #f3f4f6;
    --color-light-grey: #374151;
    --color-grey-disabled: #4b5563;
    --color-button: #3b82f6;
    --color-danger: #f87171;
    --color-danger-bg-hover: rgba(254, 226, 226, 0.2);

    /* Login Page Gradient - Darker version */
    --bg-gradient-start: #062f2d;
    --bg-gradient-end: #084d49;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE RESET
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Alpine.js cloak - hide until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. APP HEADER
   Copied from app.css for login page header
   ═══════════════════════════════════════════════════════════════════════════ */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header, 1000);
}

.app-header-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 var(--layout-padding-x);
    background: var(--theme-primary);
    gap: 1rem;
    z-index: var(--z-header, 1000);
}

.dark .app-header-bar {
    background: var(--theme-primary);
}

/* Nav Zone (left) */
.app-header-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Search Zone (middle - takes remaining space) */
.app-header-search {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1rem;
}

/* Tools Zone (right) */
.app-header-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Header Logo */
.app-header .app-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-left: var(--layout-padding-x);
}

.app-header .app-header-logo-text {
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--theme-text-on-primary, #fff);
    letter-spacing: -0.5px;
}

/* User Button */
.app-header-user {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: none;
    color: var(--theme-text-on-primary, #fff);
    font-size: 1.125rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.app-header-user:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* User Menu (dropdown) */
.app-header-user-menu {
    position: absolute;
    top: 100%;
    right: var(--layout-padding-x);
    min-width: 220px;
    background: var(--theme-bg-primary, #fff);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--z-dropdown, 1050);
}

.dark .app-header-user-menu {
    background: var(--theme-bg-secondary, #1f2937);
}

.app-header-user-menu-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.app-header-user-menu-item {
    padding: 0;
}

.app-header-user-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease;
}

.app-header-user-menu-link:hover {
    background: var(--theme-bg-tertiary);
}

.app-header-user-menu-link--danger {
    color: var(--color-danger, #dc2626);
}

.app-header-user-menu-email {
    padding: 0 1rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.app-header-user-menu-separator {
    height: 1px;
    margin: 0.5rem 0;
    background: var(--theme-border);
}

.app-header-user-menu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
}

.app-header-user-menu-label {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    text-decoration: none;
}

.app-header-user-menu-toggles {
    display: flex;
    gap: 0.25rem;
}

.app-header-user-menu-toggle {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--theme-bg-tertiary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--theme-text-secondary);
}

.app-header-user-menu-toggle.is-active {
    background: var(--theme-primary);
    color: var(--theme-text-on-primary, #fff);
}

.app-header-user-menu-divider {
    border-top: 1px solid var(--theme-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. USER DROPDOWN - Profile menu in header
   Copied from app.css
   ═══════════════════════════════════════════════════════════════════════════ */

.user-dropdown {
    position: absolute;
    right: 0.75rem;
    top: 100%;
    margin-top: 0.5rem;
    width: 260px;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background-color: var(--color-white);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    z-index: var(--z-dropdown);
}

.user-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-dropdown-item {
    /* Base container for all menu items */
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-almost-black);
    text-decoration: none;
}

.user-dropdown-link:hover {
    background-color: var(--color-light-grey);
}

.user-dropdown-link .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.user-dropdown-link--danger {
    color: var(--color-danger);
}

.user-dropdown-link--danger:hover {
    background-color: var(--color-danger-bg-hover);
}

.user-dropdown-email {
    padding: 0 0.75rem 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-almost-black);
}

.user-dropdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
}

.user-dropdown-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-almost-black);
}

.user-dropdown-toggle-group {
    display: flex;
    gap: 0.25rem;
}

.user-dropdown-toggle {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--color-light-grey);
    color: var(--color-almost-black);
    border: none;
    cursor: pointer;
}

.user-dropdown-toggle:hover {
    background-color: var(--color-grey-disabled);
}

.user-dropdown-toggle.active {
    background-color: var(--color-button);
    color: var(--color-white);
}

.user-dropdown-toggle.active:hover {
    background-color: var(--color-button);
}

.user-dropdown-divider {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. TOGGLE GROUP COMPONENT
   Copied from app.css
   ═══════════════════════════════════════════════════════════════════════════ */

.toggle-group {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background-color: var(--theme-background-subtle);
    border-radius: 0.5rem;
}

.toggle-item {
    padding: 0.5rem 1rem;
    min-height: 2.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--theme-text-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.toggle-item:hover:not(.active) {
    background-color: var(--color-surface-hover);
}

.toggle-item:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

.toggle-item.active {
    background-color: var(--theme-primary);
    color: var(--theme-text-on-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-item.active:hover {
    background-color: var(--theme-primary);
}

/* Compact Variant */
.toggle-group--compact {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    background-color: var(--theme-background-subtle);
    border-radius: 0.375rem;
}

.toggle-group--compact .toggle-item {
    padding: 0.25rem 0.625rem;
    min-height: 1.75rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

/* Dark Mode Toggle */
.dark .toggle-group,
.dark .toggle-group--compact {
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. BUTTON SYSTEM
   Copied from app.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared button properties */
.button-header-action-pill,
.button-regular,
.button-small,
.button-secondary {
    appearance: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 150ms ease, transform 100ms ease;
}

/* 4px safe zone for touch targets */
.button-header-action-pill::after,
.button-regular::after,
.button-small::after,
.button-secondary::after {
    content: '';
    position: absolute;
    inset: -4px;
}

/* Hover state - saturate for vibrancy */
.button-header-action-pill:hover,
.button-regular:hover,
.button-small:hover {
    filter: saturate(1.3) contrast(1.05);
}

/* Active state - micro-scale for tactile feedback */
.button-header-action-pill:active,
.button-regular:active,
.button-small:active,
.button-secondary:active {
    transform: scale(0.98);
}

/* Disabled state */
.button-header-action-pill:disabled,
.button-regular:disabled,
.button-small:disabled,
.button-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.button-header-action-pill:disabled:hover,
.button-regular:disabled:hover,
.button-small:disabled:hover {
    filter: none;
}

/* button-regular - Standard form action button */
.button-regular {
    min-height: 2.5rem;
    min-width: 100px;
    padding: 0 1.25rem;
    font-size: 1rem;
    border-radius: 4px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-weight: 500;
    background-color: var(--button-background, var(--color-action-blue));
    color: var(--color-text-inverse);
}

/* button-small - Compact button for inline actions */
.button-small {
    height: 1.4rem;
    padding: 0 0.6rem;
    font-size: 0.875rem;
    border-radius: 2px;
    text-transform: uppercase;
    background-color: var(--button-background, var(--color-action-blue));
    color: var(--color-text-inverse);
}

/* button-secondary - Underlined text link style */
.button-secondary {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--button-background, var(--color-action-blue));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.button-secondary:hover {
    text-decoration-thickness: 2px;
}

/* Color Context Classes */
.context-action { --button-background: var(--color-action-blue); }
.context-error { --button-background: var(--theme-error); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. LOGIN PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.login-page {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--theme-text-on-primary);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport for mobile browsers */
    display: flex;
    flex-direction: column;
}

.public-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--domaincolor-public);
    /* margin-top removed - flex layout handles positioning with header in column */
}

.public-content {
    width: 100%;
    max-width: 420px;
    padding: 3rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. AUTH FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-form-title {
    text-align: center;
    padding-bottom: 0.5rem;
}

.auth-form-title h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-on-primary);
    margin: 0;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-field label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-on-primary);
}

.auth-field input {
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background: var(--login-input-bg) !important;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    color: var(--login-input-text) !important;
    transition: box-shadow 150ms ease;
}

.auth-field input::placeholder {
    color: rgba(17, 24, 39, 0.5);
}

.auth-field input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--login-focus-ring);
}

.auth-field .auth-spacer {
    display: block;
    height: 0.75rem;
}

.auth-error {
    padding: 0.75rem 1rem;
    background-color: rgba(254, 226, 226, 0.95);
    border: 1px solid #FCA5A5;
    border-radius: 4px;
    color: #991B1B;
    font-size: 0.875rem;
    text-align: center;
}

.dark .auth-error {
    background-color: rgba(254, 226, 226, 0.2);
    border-color: rgba(252, 165, 165, 0.4);
    color: #FCA5A5;
}

/* Submit Button - Uses button-regular but with full width */
.auth-form button[type="submit"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    background-color: var(--color-action-blue);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
}

.auth-form button[type="submit"]:hover {
    filter: saturate(1.3) contrast(1.05);
}

.auth-form button[type="submit"]:active {
    transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Layout Padding Responsive */
@media (min-width: 1280px) {
    :root {
        --layout-padding-x: 24px;
    }
}

@media (min-width: 1536px) {
    :root {
        --layout-padding-x: 32px;
    }
}