/**
 * User Forms & Components
 * Standardized styles for all user-related pages and forms
 * Uses CSS variables from modern-elveron.css
 */

/* ================================================
   LOGIN / REGISTRATION COMPONENTS
   ================================================ */

/* Registration intro box */
.registration-intro {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-sm);
    padding: 15px;
    margin-bottom: 20px;
}

.registration-intro h3 {
    color: var(--color-text-primary);
    margin-top: 0;
    font-size: var(--font-size-lg);
}

.registration-intro p {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* Login form specific styles */
.login-form {
    /* Uses global form styles from modern-elveron.css */
}

/* Register/forgot password link */
.register-link {
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border-card);
}

.register-link p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 10px;
}

.btn-register {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(117, 45, 32, 0.6);
    color: var(--color-text-primary);
    border: 1px solid var(--color-accent-button-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.btn-register:hover {
    background: rgba(117, 45, 32, 0.9);
    transform: translateY(-1px);
}

.btn-register i {
    margin-right: 5px;
}

/* ================================================
   USER PROFILE / OVERVIEW SECTION
   ================================================ */

.overview-section {
    background: rgba(44, 33, 27, 0.95);
    border: 1px solid var(--color-border-form);
    border-radius: var(--radius-sm);
    padding: 15px;
}

.profile-row {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--color-border-form);
}

.profile-row:last-child {
    border-bottom: none;
}

.profile-label {
    flex: 0 0 200px;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-label i {
    color: var(--color-text-special);
    width: 16px;
    text-align: center;
}

.profile-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-value input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border-form);
    color: var(--color-text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    width: 100%;
    max-width: 300px;
}

.profile-value input:read-only {
    background: rgba(0, 0, 0, 0.3);
}

.buy-button {
    background: var(--color-accent-button-dark);
    color: var(--color-text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
    border: 1px solid var(--color-accent-button-border);
}

.buy-button:hover {
    filter: brightness(130%);
}

/* ================================================
   CHARACTER CARDS
   ================================================ */

.characters-section {
    /* Container for character cards */
}

.character-card {
    background: rgba(44, 33, 27, 0.95);
    border: 1px solid var(--color-border-form);
    border-radius: var(--radius-sm);
    padding: 15px;
    margin-bottom: 15px;
}

.character-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.character-info {
    flex: 1;
}

.player-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.player-name i {
    color: var(--color-text-special);
    margin-right: 8px;
}

.player-link {
    color: var(--color-text-accent);
    text-decoration: none;
}

.player-link:hover {
    text-decoration: underline;
}

.character-guild {
    color: var(--color-text-accent);
    font-size: var(--font-size-base);
    margin-bottom: 5px;
}

.character-guild i {
    color: var(--color-text-special);
    margin-right: 5px;
}

.character-details {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.character-details i {
    color: var(--color-text-special);
    margin-right: 5px;
}

.character-actions {
    /* Container for action buttons */
}

/* Empty state for characters */
.empty-characters {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-secondary);
}

.empty-characters i {
    font-size: 48px;
    color: var(--color-text-special);
    margin-bottom: 20px;
    display: block;
}

.empty-characters h3 {
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
}

/* ================================================
   COLLAPSIBLE CARDS (Settings/Security)
   ================================================ */

.card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.card-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-form);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header i {
    color: var(--color-text-special);
    font-size: 18px;
}

.card-header.collapse {
    cursor: pointer;
    user-select: none;
}

.card-header.collapse span {
    margin-right: 5px;
    color: var(--color-text-accent);
}

.card-body {
    padding: 20px;
}

/* Security scroll areas */
.security-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* ================================================
   DEVICE MANAGEMENT
   ================================================ */

.devices-table {
    background: rgba(44, 33, 27, 0.95);
    border: 1px solid var(--color-border-form);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: 15px;
}

.devices-header,
.login-history-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-bottom: 1px solid var(--color-border-form);
    display: grid;
    gap: 15px;
    color: var(--color-text-primary);
    font-weight: bold;
    font-size: var(--font-size-base);
}

.devices-header {
    grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
}

.login-history-header {
    grid-template-columns: 2fr 1fr 2fr;
}

.device-row,
.login-history-row {
    padding: 12px;
    border-bottom: 1px solid var(--color-border-form);
    display: grid;
    gap: 15px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    align-items: center;
}

.device-row {
    grid-template-columns: 2fr 1fr 2fr 1fr 1fr;
}

.login-history-row {
    grid-template-columns: 2fr 1fr 2fr;
}

.device-row:last-child,
.login-history-row:last-child {
    border-bottom: none;
}

.device-actions {
    display: flex;
    gap: 8px;
}

/* Device status badges */
.text-success {
    color: var(--color-accent-green) !important;
}

.text-danger {
    color: var(--color-accent-red) !important;
}

.text-warning,
.text-info {
    color: var(--color-text-accent) !important;
}

/* Auth message */
.auth-message {
    text-align: center;
    padding: 40px 20px;
}

.auth-message i {
    font-size: 48px;
    color: var(--color-text-special);
    margin-bottom: 20px;
    display: block;
}

.auth-message h2 {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin: 0 0 15px 0;
}

/* ================================================
   TOOLS SECTION
   ================================================ */

.tool-section {
    /* Container for tool forms */
}

.tool-header {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.tool-header h3 {
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
    font-size: var(--font-size-lg);
}

.tool-header h3 i {
    color: var(--color-text-special);
    margin-right: 8px;
}

.tool-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

.characters-grid {
    display: grid;
    gap: 15px;
}

.character-tool-card {
    background: rgba(44, 33, 27, 0.95);
    border: 1px solid var(--color-border-form);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.character-tool-card h4 {
    color: var(--color-text-primary);
    margin: 0 0 5px 0;
    font-size: var(--font-size-lg);
}

.character-tool-card h4 a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.character-tool-card h4 a:hover {
    color: var(--color-text-accent);
}

/* ================================================
   TAB SYSTEM (Hidden/Active)
   ================================================ */

/* Hide all tab content by default */
div[data-tab] {
    display: none !important;
}

/* Show active tab */
div[data-tab].active {
    display: block !important;
}

/* ================================================
   FORGOT PASSWORD / STANDALONE PAGES
   ================================================ */

.forgot-password-header {
    text-align: center;
    margin-bottom: 30px;
}

.forgot-password-header i {
    font-size: 48px;
    color: var(--color-text-special);
    margin-bottom: 15px;
    display: block;
}

.forgot-password-header h3 {
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
    font-size: var(--font-size-xl);
}

.forgot-password-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Info boxes */
.info-box {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-sm);
    padding: 15px;
    margin-bottom: 20px;
}

.info-box p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.info-box i {
    color: var(--color-text-special);
    margin-right: 8px;
}

/* Alert boxes */
.alert {
    padding: 15px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.alert-info {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-card);
    color: var(--color-text-secondary);
}

.alert-danger {
    background: rgba(255, 107, 107, 0.2);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: var(--color-accent-red);
}

.alert-success {
    background: rgba(89, 187, 125, 0.2);
    border: 1px solid rgba(89, 187, 125, 0.4);
    color: var(--color-accent-green);
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

/* ================================================
   FORM ENHANCEMENTS
   ================================================ */

/* Form labels with icons */
.form-label {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    font-size: var(--font-size-base);
}

.form-label i {
    color: var(--color-text-special);
    margin-right: 5px;
}

/* Password requirements list */
.password-requirements {
    list-style-type: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.password-requirements li {
    color: var(--color-text-accent);
    font-size: var(--font-size-sm);
    margin-bottom: 4px;
}

.password-requirements li::before {
    content: '✓ ';
    margin-right: 4px;
}

/* Form help text */
small.form-text {
    display: block;
    margin-top: 4px;
    color: var(--color-text-special);
    font-size: var(--font-size-xs);
}

/* reCAPTCHA info */
.recaptcha-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 15px;
    text-align: center;
}

/* Form validation states */
.form-control:focus {
    border-color: var(--color-text-special) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 115, 68, 0.2);
}

.form-control:invalid:not(:placeholder-shown) {
    border-color: rgba(255, 107, 107, 0.5);
}

.form-control:valid:not(:placeholder-shown) {
    border-color: rgba(89, 187, 125, 0.5);
}

/* Submit button states */
#registerSubmitButton:disabled,
#forgotPasswordSubmitButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#registerSubmitButton:hover:not(:disabled),
#forgotPasswordSubmitButton:hover:not(:disabled) {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

/* Character tool card hover effect */
.character-tool-card:hover {
    background: rgba(44, 33, 27, 1);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* Number input styling (for safebox password) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]:focus {
    outline: none;
    border-color: var(--color-text-special);
    box-shadow: 0 0 0 2px rgba(204, 115, 68, 0.2);
}

/* ================================================
   ACTIVATION / SUCCESS PAGES
   ================================================ */

.activation-success {
    text-align: center;
}

.success-box {
    background: rgba(89, 187, 125, 0.15);
    border: 1px solid rgba(89, 187, 125, 0.3);
    border-radius: var(--radius-md);
    padding: 30px;
    margin-bottom: 25px;
}

.success-box h2 {
    color: var(--color-accent-green);
    margin: 0 0 15px 0;
    font-size: var(--font-size-xl);
}

.success-box p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.redirect-message {
    color: var(--color-text-special);
    font-size: var(--font-size-base);
    margin-bottom: 20px;
}

.manual-link-section {
    padding-top: 20px;
    border-top: 1px solid var(--color-border-card);
}

.manual-link-section p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 10px;
}

.activation-success i.fa-check-circle {
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.activation-success .btn-main:hover {
    transform: translateY(-2px);
}

/* Error Box */
.error-box {
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius-md);
    padding: 30px;
    margin-bottom: 25px;
}

.error-box h2 {
    color: var(--color-accent-red);
    margin: 0 0 15px 0;
    font-size: var(--font-size-xl);
}

.error-box p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.activation-error {
    text-align: center;
}

.activation-error i.fa-exclamation-triangle {
    animation: shake 0.5s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.activation-error .btn-main:hover,
.activation-error .btn:hover {
    transform: translateY(-2px);
}

/* Action buttons container */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;
}

.action-buttons .btn-main,
.action-buttons .btn {
    display: inline-block;
    width: auto;
    min-width: 160px;
}

/* Reasons list */
.reasons-list {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 25px;
    text-align: left;
}

.reasons-list p {
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    margin: 0 0 15px 0;
}

.reasons-list ul {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
    padding-left: 25px;
}

.reasons-list ul li {
    margin-bottom: 8px;
}

.reasons-list ul li:last-child {
    margin-bottom: 0;
}

/* Warning Box */
.warning-box {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin: 25px 0;
}

.warning-box p {
    color: var(--color-text-accent);
    font-size: var(--font-size-base);
    margin: 0;
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
    .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .profile-label {
        flex: none;
    }

    .profile-value {
        width: 100%;
    }

    .profile-value input {
        max-width: 100%;
    }

    .character-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .devices-header,
    .device-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .login-history-header,
    .login-history-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .character-tool-card {
        flex-direction: column;
        align-items: flex-start;
    }
}