/* Patitur Auth Pages - Modern Dark Theme with Green Accents */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* CSS Variables for Patitur Brand Colors - Updated for White Theme */
:root {
    --patitur-main-bg: #ffffff;
    --patitur-sidebar-bg: #1e2939;
    --patitur-green-primary: #01e4bf;
    --patitur-green-secondary: #0fb39c;
    --patitur-green-accent: #01e4bf;
    --patitur-text-primary: #333333;
    --patitur-text-secondary: #666666;
    --patitur-text-muted: #999999;
    --patitur-text-white: #ffffff;
    --patitur-dark-bg: #1e2939;
    --patitur-card-bg: #ffffff;
    --patitur-border: #e5e7eb;
    --patitur-shadow: 0px 4px 4px 0px #00000040;
    --patitur-glow: 0px 0px 15px 2px
        var(--sds-color-background-positive-secondary-hover);
}

/* Base Styles for Auth Pages */
.patitur-auth-page {
    font-family:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    background: var(--patitur-main-bg);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Apply Patitur background to all pages */
body {
    font-family:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    background: var(--patitur-main-bg);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Animated background for all pages */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(
            circle at 20% 50%,
            rgba(0, 212, 170, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 245, 212, 0.08) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 40% 80%,
            rgba(0, 184, 148, 0.06) 0%,
            transparent 50%
        );
    animation: backgroundFloat 20s ease-in-out infinite;
    z-index: -1;
}

/* Animated Background Pattern */
.patitur-auth-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(
            circle at 20% 50%,
            rgba(0, 212, 170, 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 245, 212, 0.08) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 40% 80%,
            rgba(0, 184, 148, 0.06) 0%,
            transparent 50%
        );
    animation: backgroundFloat 20s ease-in-out infinite;
    z-index: 0;
}

/* Dark hero variant for auth flows */
.patitur-auth-page--dark {
    background: var(--patitur-dark-bg);
}

.patitur-auth-page--dark::before {
    background-image:
        radial-gradient(
            circle at 25% 55%,
            rgba(1, 228, 191, 0.18) 0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(1, 228, 191, 0.1) 0%,
            transparent 55%
        ),
        radial-gradient(
            circle at 45% 80%,
            rgba(15, 179, 156, 0.08) 0%,
            transparent 55%
        );
}

@keyframes backgroundFloat {
    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

/* Auth Container */
.patitur-auth-container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* Auth Card */
.patitur-auth-card {
    background: var(--patitur-card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--patitur-border);
    border-radius: 16px;
    box-shadow: var(--patitur-shadow);
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    overflow: hidden;
}

.patitur-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--patitur-green-primary),
        var(--patitur-green-accent)
    );
    border-radius: 16px 16px 0 0;
}

/* Logo and Branding */
.patitur-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.patitur-logo h1 {
    color: var(--patitur-text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.patitur-logo .logo-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #4a90e2;
    background-image: url("/static/img/patitur-logo-green.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    margin-right: 12px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* Form Styles */
.patitur-form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.patitur-form-label {
    display: block;
    color: var(--patitur-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: left;
    letter-spacing: 0.025em;
}

.patitur-form-input {
    width: 100%;
    max-width: 300px; /* governs both email and password width */
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--patitur-border);
    border-radius: 8px;
    color: var(--patitur-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-align: center;
}

.patitur-form-input::placeholder {
    color: var(--patitur-text-muted);
}

.patitur-form-input:focus {
    outline: none;
    border-color: var(--patitur-green-primary);
    box-shadow: var(--patitur-glow);
    background: rgba(255, 255, 255, 0.08);
}

.patitur-form-input:focus::placeholder {
    color: var(--patitur-text-secondary);
}

/* Input Group for Password Toggle */
.patitur-input-group {
    position: relative;
    display: inline-grid; /* overlay icon on top of the input and shrink-wrap */
    width: auto;
    max-width: 300px;
}

.patitur-input-group .patitur-form-input {
    padding-right: 2.5rem; /* reserve space for eye button inside input */
    grid-area: 1 / 1; /* same cell as the eye */
}

.patitur-toggle-password {
    grid-area: 1 / 1; /* overlay over the input */
    justify-self: end;
    align-self: center;
    margin-right: 0.75rem;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: var(--patitur-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 2; /* above input */
}

.patitur-toggle-password:hover {
    color: var(--patitur-green-primary);
}

/* Button Styles */
/* Sole .patitur-btn definition. Merged from two dups that previously composed at
   runtime: section-improvements.css set 8 props with !important (they WON despite
   loading earlier), and this sheet supplied the layout orphans. This block reproduces
   that exact rendered result in one place, so the !important is no longer needed.
   The conflicting values below (hardcoded #00d4aa gradient, #0a1a1f text,
   0.75rem 1.5rem padding, box-shadow) are section-improvements' winners — NOT this
   sheet's former var-gradient/2rem padding. The #00d4aa teal differs from brand
   #25af88; that pre-existing inconsistency is preserved here, not introduced. */
.patitur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
    color: #0a1a1f;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
}

.patitur-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.patitur-btn:hover::before {
    left: 100%;
}

.patitur-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);
}

.patitur-btn:active {
    transform: translateY(0);
}

.patitur-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Secondary Button */
.patitur-btn-secondary {
    background: transparent;
    color: var(--patitur-green-primary);
    border: 1px solid var(--patitur-green-primary);
}

.patitur-btn-secondary:hover {
    background: var(--patitur-green-primary);
    color: var(--patitur-dark-bg);
    box-shadow: var(--patitur-glow);
}

/* Link Styles */
.patitur-link {
    color: var(--patitur-green-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.patitur-link:hover {
    color: var(--patitur-green-accent);
    text-decoration: none;
}

/* Alert Styles */
.patitur-alert {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 1px solid;
    backdrop-filter: blur(10px);
}

.patitur-alert-error {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ff6b7a;
}

.patitur-alert-success {
    background: rgba(0, 212, 170, 0.1);
    border-color: rgba(0, 212, 170, 0.3);
    color: var(--patitur-green-accent);
}
.patitur-alert-info {
    background: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.3);
    color: var(--patitur-text-primary);
}

/* Form Help Text */
.patitur-form-help {
    font-size: 0.75rem;
    color: var(--patitur-text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* .patitur-page-title / .patitur-page-subtitle / .patitur-main-page-title DELETED
   — dead + duplicate CSS (title/header consolidation). The two `.patitur-page-*`
   classes have zero template references; `.patitur-main-page-title` is now defined
   once, canonically, in design-tokens.css (deleting this copy is what stopped the
   load-order cascade bug where this auth sheet silently won). */

/* Loading States */
.patitur-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--patitur-text-white);
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .patitur-auth-container {
        padding: 1rem 0.5rem;
    }

    .patitur-auth-card {
        padding: 2rem 1.5rem;
        margin: 0 0.5rem;
    }

    .patitur-logo h1 {
        font-size: 1.75rem;
    }

    .patitur-page-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .patitur-auth-card {
        padding: 1.5rem 1rem;
    }

    .patitur-logo h1 {
        font-size: 1.5rem;
    }

    .patitur-page-title {
        font-size: 1.25rem;
    }
}

/* Animation for form elements */
.patitur-auth-card {
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus visible for accessibility */
.patitur-form-input:focus-visible,
.patitur-btn:focus-visible,
.patitur-toggle-password:focus-visible {
    outline: 2px solid var(--patitur-green-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --patitur-border: rgba(0, 212, 170, 0.5);
        --patitur-text-muted: #c0c0c0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .patitur-auth-page::before,
    .patitur-btn::before,
    .patitur-auth-card {
        animation: none;
    }

    .patitur-btn:hover {
        transform: none;
    }
}

/* Profile Page Styles */
.patitur-profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--patitur-main-bg);
    min-height: 100vh;
    color: var(--patitur-text-primary);
}
/* .patitur-section-title (+ i) DELETED — dead CSS (zero template references). */

.patitur-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* Logout Button Styling - matches Figma (Green/100) */
.patitur-logout-btn {
    background: var(--color-brand-green);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
}

.patitur-logout-btn:hover {
    background: var(--color-brand-green-hover);
}

.patitur-logout-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Fix navbar background to match Patitur theme */
.navbar.bg-light {
    background: transparent !important;
    border: none !important;
}

/* .navbar DELETED — merged into current_user_main.css (its orphan padding /
   border-radius / margin-bottom / box-shadow already owned the rendered result). */

.patitur-profile-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
/* Users Management Page Styles */
.patitur-users-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--patitur-dark-bg);
    min-height: 100vh;
}

.patitur-users-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2rem;
}

.patitur-header-content {
    flex: 1;
}

.patitur-header-actions {
    flex-shrink: 0;
}

.patitur-users-card {
    background: var(--patitur-card-bg);
    border: 1px solid var(--patitur-border-color);
    border-radius: 12px;
    padding: 0;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* .patitur-table-container DELETED here — redundant. section-improvements.css
   defines it with `overflow-x: auto !important` (+ width/margin/padding), which
   wins regardless of load order, so this plain copy contributed nothing. */

.patitur-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--patitur-text-white);
}

.patitur-table thead {
    background: rgba(0, 212, 170, 0.1);
}

.patitur-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--patitur-text-white);
    border-bottom: 1px solid var(--patitur-border-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.patitur-table td {
    padding: 1rem;
    vertical-align: middle;
}

.patitur-table tbody tr:hover {
    background: rgba(0, 212, 170, 0.05);
}

.patitur-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.patitur-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--patitur-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--patitur-dark-bg);
    font-size: 0.9rem;
}

.patitur-user-name {
    font-weight: 500;
    color: var(--patitur-text-white);
}

.patitur-user-email {
    color: var(--patitur-text-muted);
    font-family: "Monaco", "Menlo", monospace;
    font-size: 0.9rem;
}

.patitur-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.patitur-badge-admin {
    background: var(--patitur-green-primary);
    color: var(--patitur-dark-bg);
}

.patitur-badge-user {
    background: rgba(255, 255, 255, 0.1);
    color: var(--patitur-text-white);
}

.patitur-badge-active {
    background: var(--patitur-green-primary);
    color: var(--patitur-dark-bg);
}

.patitur-badge-inactive {
    background: #f39c12;
    color: white;
}

.patitur-date {
    color: var(--patitur-text-muted);
    font-size: 0.9rem;
    font-family: "Monaco", "Menlo", monospace;
}

.patitur-action-buttons {
    display: flex;
    gap: 0.5rem;
}

.patitur-btn-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: left;
    justify-content: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.patitur-btn-edit {
    background: rgba(0, 212, 170, 0.1);
    color: var(--patitur-green-primary);
    border: 1px solid var(--patitur-green-primary);
}

.patitur-btn-edit:hover {
    background: var(--patitur-green-primary);
    color: var(--patitur-dark-bg);
}

.patitur-btn-delete {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.patitur-btn-delete:hover {
    background: #e74c3c;
    color: white;
}

.patitur-empty-state {
    text-align: center;
    padding: 3rem;
}

.patitur-empty-content {
    color: var(--patitur-text-muted);
}

.patitur-empty-content i {
    font-size: 3rem;
    color: var(--patitur-text-muted);
    margin-bottom: 1rem;
}

.patitur-empty-content h3 {
    color: var(--patitur-text-white);
    margin-bottom: 0.5rem;
}

.patitur-empty-content p {
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .patitur-users-container {
        padding: 1rem;
    }

    .patitur-users-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .patitur-header-actions {
        align-self: stretch;
    }

    .patitur-table th,
    .patitur-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .patitur-user-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .patitur-action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
}