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

/* Fonts (Inter + Ubuntu Sans) are imported once, in design-tokens.css. */

/* CSS Variables for Patitur Brand Colors - Updated for White Theme */
:root {
    --patitur-main-bg: var(--bg-app);
    --patitur-sidebar-bg: var(--bg-sidebar);
    --patitur-green-primary: var(--color-brand-green-bright);
    --patitur-green-secondary: var(--color-brand-green-secondary);
    --patitur-green-accent: var(--color-brand-green-bright);
    --patitur-text-primary: var(--fg-2);
    --patitur-text-secondary: var(--chart-axis-fg);
    --patitur-text-muted: var(--fg-placeholder);
    --patitur-text-white: var(--fg-on-dark);
    --patitur-dark-bg: var(--bg-sidebar);
    --patitur-card-bg: var(--bg-card);
    --patitur-border: var(--border-base);
    --patitur-shadow: 0px 4px 4px 0px var(--shadow-color);
    --patitur-glow: 0px 0px 15px 2px var(--patitur-green-primary);
}

/* Base Styles for Auth Pages */
.patitur-auth-page {
    font-family: var(--font-base);
    background: var(--patitur-main-bg);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Apply Patitur background to all pages */
body {
    /* `background` and `min-height` stood here and were DEAD — both lost to
       section-improvements.css's `!important`. Deleted 2026-08-23. The four
       below DO apply, app-wide, from an *auth* stylesheet; that leak is
       Finding 2 and is deliberately not changed here, because dropping
       `overflow-x: hidden` globally can surface horizontal scrollbars and
       wants its own visual pass. */
    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%,
            color-mix(in srgb, var(--color-brand-teal) 10%, transparent) 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%,
            color-mix(in srgb, var(--color-brand-teal) 10%, transparent) 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%,
            color-mix(in srgb, var(--color-brand-green-bright) 18%, transparent)
                0%,
            transparent 60%
        ),
        radial-gradient(
            circle at 80% 20%,
            color-mix(in srgb, var(--color-brand-green-bright) 10%, transparent)
                0%,
            transparent 55%
        ),
        radial-gradient(
            circle at 45% 80%,
            color-mix(
                    in srgb,
                    var(--color-brand-green-secondary) 8%,
                    transparent
                )
                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 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 2rem;
}

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

.patitur-logo .logo-icon {
    display: inline-block;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background-image: url("/static/img/patitur-logo-green.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 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: var(--fs-base);
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: left;
    letter-spacing: 0.025em;
}

/* 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;
}

/* The overlay needs BOTH children in the same cell. Grid places explicitly
   positioned items before auto-placed ones, so the button alone claiming
   ``1 / 1`` pushed the auto-placed input into row 2 — the toggle rendered
   ABOVE the field instead of inside it. The input is placed explicitly too,
   and given room on the right so its text cannot run under the icon. */
.patitur-input-group > .field-input {
    grid-area: 1 / 1;
    padding-right: 40px;
}

.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 var(--color-brand-teal) gradient, var(--auth-btn-fg) text,
   0.75rem 1.5rem padding, box-shadow) are section-improvements' winners — NOT this
   sheet's former var-gradient/2rem padding. The var(--color-brand-teal) teal differs from brand
   var(--color-brand-green); 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,
        var(--color-brand-teal) 0%,
        var(--color-brand-green) 100%
    );
    color: var(--auth-btn-fg);
    border: none;
    border-radius: 8px;
    font-size: var(--fs-md);
    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,
        color-mix(in srgb, var(--fg-on-dark) 20%, transparent),
        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: color-mix(in srgb, var(--danger-bright-fg) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger-bright-fg) 30%, transparent);
    color: var(--auth-error-fg);
}

.patitur-alert-success {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-brand-teal) 30%, transparent);
    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: var(--fs-sm);
    color: var(--patitur-text-muted);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* .patitur-page-title / .patitur-page-subtitle / .patitur-main-page-title DELETED
   — duplicate CSS (title/header consolidation). Deleting the
   `.patitur-main-page-title` copy is what stopped the load-order cascade bug
   where this auth sheet silently won; that part was right.

   CORRECTION 2026-08-23: the claim that the two `.patitur-page-*` classes had
   "zero template references" was FALSE. They had six each — every page under
   `flask_app/auth/templates/auth/`, which is a SECOND template directory the
   original check did not search. Deleting their CSS left twelve class
   attributes referencing nothing.

   Nothing rendered wrong, as it happens: the elements are `<h2>` and `<p>` and
   picked up the global element rules (Ubuntu Sans 24px, Inter 14px), so the
   classes were merely inert rather than load-bearing. The twelve attributes have
   now been removed from those templates, since a class that resolves to nothing
   is noise. Had the rules carried anything the globals do not, six auth pages
   would have silently lost it. */

/* Loading States */
.patitur-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--fg-on-dark) 30%, transparent);
    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: var(--fs-xl);
    }
}

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

    .patitur-logo h1 {
        font-size: var(--fs-xl);
    }

    .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-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: color-mix(
            in srgb,
            var(--color-brand-teal) 50%,
            transparent
        );
        --patitur-text-muted: var(--border-medium);
    }
}

/* 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: var(--fs-base);
    line-height: 1;
}

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

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

/* .navbar / .navbar.bg-light DELETED — no template renders a `.navbar`
   (grep: zero `navbar`/`bg-light` usages app-wide). The bare `.navbar` was
   merged into current_user_main.css earlier; the `.navbar.bg-light !important`
   override was dead weight removed in the p_rolaguard_engine-2su audit. */

.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);
    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: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
}

.patitur-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--patitur-text-white);
    border-bottom: 1px solid var(--patitur-border);
    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: color-mix(in srgb, var(--color-brand-teal) 5%, transparent);
}

.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: var(--font-mono);
    font-size: 0.9rem;
}

.patitur-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: var(--fs-sm);
    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: color-mix(in srgb, var(--fg-on-dark) 10%, transparent);
    color: var(--patitur-text-white);
}

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

.patitur-badge-inactive {
    background: var(--sev-dot-medium);
    color: white;
}

.patitur-date {
    color: var(--patitur-text-muted);
    font-size: 0.9rem;
    font-family: var(--font-mono);
}

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

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

.patitur-btn-edit {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    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: color-mix(in srgb, var(--danger-delete-fg) 10%, transparent);
    color: var(--danger-delete-fg);
    border: 1px solid var(--danger-delete-fg);
}

.patitur-btn-delete:hover {
    background: var(--danger-delete-fg);
    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;
    }
}

/* ==========================================================================
   SETUP-SUCCESS PAGE

   This page was written entirely in inline styles — sixteen of them, a third
   of every inline style left in the tree. They are named here because that is
   where the rest of the auth chrome already lives, and because a declaration
   in a style attribute is invisible to every drift gate we have.
   ========================================================================== */

/* The card runs wider than a login form: it carries a reset link that must be
   readable in one line. */
.patitur-auth-card--wide {
    max-width: 600px;
}

.auth-success-mark {
    margin: 1.25rem 0 0.75rem;
}

/* The confirmation badge. A gradient is allowed here, unlike on chrome: this
   is a decorative mark, not a surface a control sits on. */
.auth-success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--patitur-green-primary),
        var(--patitur-green-secondary)
    );
}

.auth-success-badge i {
    color: var(--patitur-dark-bg);
    font-size: var(--fs-md);
}

/* A heading inside a callout on this page: tight to the text beneath it, and
   tinted to the callout it sits in. */
.auth-callout-title {
    margin: 0 0 0.5rem;
    color: var(--patitur-green-primary);
}

.auth-callout-title--info {
    color: var(--flash-info-fg);
}

.auth-callout-line {
    margin: 0;
}

.auth-callout-line--spaced {
    margin: 0 0 0.75rem;
}

.auth-reset-link-group {
    margin-bottom: 0.75rem;
}

/* The reset link itself. Long, unbroken, and read rather than typed, so it
   wraps anywhere and sits on the card ground rather than the dark field. */
.auth-reset-link-input {
    background: var(--bg-card);
    font-size: var(--fs-sm);
    text-align: left;
    word-break: break-all;
}

.auth-success-steps {
    margin-top: 0;
}

/* Two equal actions, side by side. */
.auth-action-row {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.auth-action-row > .patitur-btn {
    flex: 1;
}

.auth-action-row .patitur-btn i {
    margin-right: 0.5rem;
}

/* The "Back to login" / "Forgot your password" line under an auth form. Three
   pages spelled it as an inline margin-top on a .text-center div. */
.patitur-auth-footer {
    margin-top: 1.5rem;
    text-align: center;
}

/* The password field leaves room for the toggle overlaid on its right edge.
   reset_password.html had this as an inline padding-right, alongside inline
   position/display rules that overrode .patitur-input-group's grid overlay
   with a flex+absolute one — the component already does this, and login.html
   uses it bare. */
.field-input--with-toggle {
    padding-right: 40px;
}

/* The error page's status code, and the rule under it. Both were inline
   declarations naming the same token twice. */
.error-code {
    color: var(--color-brand-green-secondary);
}

.error-rule {
    background-color: var(--color-brand-green-secondary);
}