/* ============================================
   AUTHENTICATION PAGES - STYLESHEET
   Majesty Oil Mills Auto Reports System
   ============================================ */

/* Import existing design system variables from managereports.css */

/* ============================================
   BASE AUTHENTICATION LAYOUT
   ============================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a252f 0%, #2c3e50 50%, #34495e 100%);
    padding: var(--mar-space-lg, 1.5rem);
    font-family: var(--mar-font-family, 'Segoe UI', sans-serif);
}

.auth-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px;
    width: 100%;
    background: var(--mar-bg-primary, #ffffff);
    border-radius: var(--mar-radius-xl, 1rem);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.auth-container-centered {
    grid-template-columns: 1fr;
    max-width: 700px;
}

/* ============================================
   BRAND PANEL (LEFT SIDE)
   ============================================ */
.auth-brand-panel {
    background: linear-gradient(135deg, var(--mar-primary, #2c3e50) 0%, var(--mar-primary-light, #34495e) 100%);
    padding: var(--mar-space-3xl, 4rem) var(--mar-space-xl, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mar-white, #ffffff);
    position: relative;
    overflow: hidden;
}

    .auth-brand-panel::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: auth-pulse 15s ease-in-out infinite;
    }

@keyframes auth-pulse {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-20%, 20%) scale(1.1);
        opacity: 0.5;
    }
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--mar-radius-xl, 1rem);
    font-size: 3rem;
    margin-bottom: var(--mar-space-xl, 2rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.auth-brand-title {
    font-size: var(--mar-font-size-3xl, 1.875rem);
    font-weight: var(--mar-font-weight-bold, 700);
    margin: 0 0 var(--mar-space-sm, 0.5rem) 0;
    line-height: var(--mar-line-height-tight, 1.25);
}

.auth-brand-subtitle {
    font-size: var(--mar-font-size-lg, 1.125rem);
    font-weight: var(--mar-font-weight-normal, 400);
    margin: 0 0 var(--mar-space-3xl, 4rem) 0;
    opacity: 0.9;
}

.auth-brand-features {
    display: flex;
    flex-direction: column;
    gap: var(--mar-space-lg, 1.5rem);
    align-items: flex-start;
    max-width: 320px;
    margin: 0 auto;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: var(--mar-space-md, 1rem);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--mar-space-md, 1rem);
    border-radius: var(--mar-radius-md, 0.5rem);
    width: 100%;
    backdrop-filter: blur(5px);
    transition: all var(--mar-transition-base, 200ms);
}

    .auth-feature:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateX(8px);
    }

    .auth-feature i {
        font-size: var(--mar-font-size-2xl, 1.5rem);
        flex-shrink: 0;
    }

    .auth-feature span {
        font-size: var(--mar-font-size-base, 1rem);
        font-weight: var(--mar-font-weight-medium, 500);
    }

/* ============================================
   FORM PANEL (RIGHT SIDE)
   ============================================ */
.auth-form-panel {
    padding: var(--mar-space-3xl, 4rem) var(--mar-space-xl, 2rem);
    display: flex;
    align-items: center;
    background: var(--mar-bg-primary, #ffffff);
}

.auth-form-content {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.auth-form-header {
    margin-bottom: var(--mar-space-xl, 2rem);
}

.auth-form-title {
    font-size: var(--mar-font-size-2xl, 1.5rem);
    font-weight: var(--mar-font-weight-bold, 700);
    color: var(--mar-text-primary, #1c1e21);
    margin: 0 0 var(--mar-space-xs, 0.25rem) 0;
}

.auth-form-description {
    font-size: var(--mar-font-size-base, 1rem);
    color: var(--mar-text-secondary, #606770);
    margin: 0;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--mar-space-lg, 1.5rem);
}

.auth-form-group {
    display: flex;
    flex-direction: column;
}

.auth-label {
    display: flex;
    align-items: center;
    gap: var(--mar-space-xs, 0.25rem);
    font-size: var(--mar-font-size-sm, 0.875rem);
    font-weight: var(--mar-font-weight-semibold, 600);
    color: var(--mar-text-primary, #1c1e21);
    margin-bottom: var(--mar-space-xs, 0.25rem);
}

    .auth-label i {
        color: var(--mar-accent, #3498db);
        font-size: var(--mar-font-size-base, 1rem);
    }

.auth-input {
    width: 100%;
    padding: var(--mar-space-md, 1rem);
    border: 2px solid var(--mar-border-color, #dcdee3);
    border-radius: var(--mar-radius-md, 0.5rem);
    font-size: var(--mar-font-size-base, 1rem);
    font-family: var(--mar-font-family, 'Segoe UI', sans-serif);
    color: var(--mar-text-primary, #1c1e21);
    background-color: var(--mar-bg-primary, #ffffff);
    transition: all var(--mar-transition-base, 200ms);
}

    .auth-input:focus {
        outline: none;
        border-color: var(--mar-accent, #3498db);
        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    }

    .auth-input::placeholder {
        color: var(--mar-text-tertiary, #8b92a4);
    }

.auth-hint {
    font-size: var(--mar-font-size-xs, 0.75rem);
    color: var(--mar-text-tertiary, #8b92a4);
    margin-top: var(--mar-space-xs, 0.25rem);
    font-style: italic;
}

.auth-error {
    display: block;
    font-size: var(--mar-font-size-xs, 0.75rem);
    color: var(--mar-danger, #e74c3c);
    margin-top: var(--mar-space-xs, 0.25rem);
    font-weight: var(--mar-font-weight-medium, 500);
}

/* ============================================
   CHECKBOX
   ============================================ */
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: var(--mar-space-sm, 0.5rem);
    cursor: pointer;
}

.auth-checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mar-accent, #3498db);
}

.auth-checkbox-label {
    font-size: var(--mar-font-size-sm, 0.875rem);
    color: var(--mar-text-primary, #1c1e21);
    user-select: none;
}

/* ============================================
   BUTTONS
   ============================================ */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mar-space-sm, 0.5rem);
    padding: var(--mar-space-md, 1rem) var(--mar-space-xl, 2rem);
    border: none;
    border-radius: var(--mar-radius-md, 0.5rem);
    font-size: var(--mar-font-size-base, 1rem);
    font-weight: var(--mar-font-weight-semibold, 600);
    font-family: var(--mar-font-family, 'Segoe UI', sans-serif);
    cursor: pointer;
    transition: all var(--mar-transition-base, 200ms);
    text-decoration: none;
    white-space: nowrap;
}

    .auth-btn i {
        font-size: var(--mar-font-size-lg, 1.125rem);
    }

.auth-btn-primary {
    background: linear-gradient(135deg, var(--mar-accent, #3498db) 0%, var(--mar-accent-dark, #2980b9) 100%);
    color: var(--mar-white, #ffffff);
    box-shadow: 0 4px 6px -1px rgba(52, 152, 219, 0.3);
}

    .auth-btn-primary:hover {
        background: linear-gradient(135deg, var(--mar-accent-light, #5dade2) 0%, var(--mar-accent, #3498db) 100%);
        box-shadow: 0 10px 15px -3px rgba(52, 152, 219, 0.4);
        transform: translateY(-2px);
    }

.auth-btn-secondary {
    background-color: var(--mar-bg-tertiary, #f0f2f5);
    color: var(--mar-text-primary, #1c1e21);
    border: 2px solid var(--mar-border-color, #dcdee3);
}

    .auth-btn-secondary:hover {
        background-color: var(--mar-bg-hover, #e4e6eb);
        border-color: var(--mar-accent, #3498db);
    }

/* ============================================
   ALERTS
   ============================================ */
.auth-alert {
    display: flex;
    gap: var(--mar-space-md, 1rem);
    padding: var(--mar-space-md, 1rem) var(--mar-space-lg, 1.5rem);
    border-radius: var(--mar-radius-md, 0.5rem);
    margin-bottom: var(--mar-space-lg, 1.5rem);
    border-left: 4px solid;
}

    .auth-alert i {
        font-size: var(--mar-font-size-xl, 1.25rem);
        flex-shrink: 0;
        margin-top: 2px;
    }

.auth-alert-message {
    margin: var(--mar-space-xs, 0.25rem) 0;
    font-size: var(--mar-font-size-sm, 0.875rem);
}

.auth-alert-danger {
    background-color: var(--mar-danger-bg, #fadbd8);
    color: var(--mar-danger, #e74c3c);
    border-left-color: var(--mar-danger, #e74c3c);
}

/* ============================================
   INFO BOX
   ============================================ */
.auth-info-box {
    display: flex;
    gap: var(--mar-space-md, 1rem);
    padding: var(--mar-space-lg, 1.5rem);
    background: linear-gradient(135deg, var(--mar-info-bg, #d6eaf8) 0%, rgba(52, 152, 219, 0.05) 100%);
    border: 2px solid var(--mar-info, #3498db);
    border-radius: var(--mar-radius-lg, 0.75rem);
    margin-bottom: var(--mar-space-xl, 2rem);
}

    .auth-info-box i {
        font-size: var(--mar-font-size-2xl, 1.5rem);
        color: var(--mar-info, #3498db);
        flex-shrink: 0;
    }

    .auth-info-box strong {
        display: block;
        font-weight: var(--mar-font-weight-semibold, 600);
        color: var(--mar-text-primary, #1c1e21);
        margin-bottom: var(--mar-space-xs, 0.25rem);
    }

    .auth-info-box p {
        margin: 0;
        font-size: var(--mar-font-size-sm, 0.875rem);
        color: var(--mar-text-secondary, #606770);
        line-height: var(--mar-line-height-normal, 1.5);
    }

    .auth-info-box ul {
        margin: var(--mar-space-sm, 0.5rem) 0 0 0;
        padding-left: var(--mar-space-lg, 1.5rem);
        font-size: var(--mar-font-size-sm, 0.875rem);
        color: var(--mar-text-secondary, #606770);
    }

    .auth-info-box li {
        margin-bottom: var(--mar-space-xs, 0.25rem);
    }

.auth-info-box-neutral {
    background: var(--mar-bg-tertiary, #f0f2f5);
    border-color: var(--mar-border-color, #dcdee3);
}

/* ============================================
   DIVIDER
   ============================================ */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--mar-space-md, 1rem);
    margin: var(--mar-space-xl, 2rem) 0;
}

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--mar-border-color, #dcdee3);
    }

    .auth-divider span {
        font-size: var(--mar-font-size-sm, 0.875rem);
        color: var(--mar-text-tertiary, #8b92a4);
        font-weight: var(--mar-font-weight-medium, 500);
    }

/* ============================================
   LINKS
   ============================================ */
.auth-links {
    display: flex;
    flex-direction: column;
    gap: var(--mar-space-md, 1rem);
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mar-space-sm, 0.5rem);
    font-size: var(--mar-font-size-sm, 0.875rem);
    color: var(--mar-text-secondary, #606770);
    text-decoration: none;
    transition: all var(--mar-transition-fast, 150ms);
    padding: var(--mar-space-sm, 0.5rem);
    border-radius: var(--mar-radius-sm, 0.25rem);
}

    .auth-link:hover {
        color: var(--mar-accent, #3498db);
        background-color: var(--mar-bg-tertiary, #f0f2f5);
    }

    .auth-link i {
        font-size: var(--mar-font-size-base, 1rem);
    }

.auth-link-primary {
    color: var(--mar-accent, #3498db);
    font-weight: var(--mar-font-weight-semibold, 600);
}

    .auth-link-primary:hover {
        color: var(--mar-accent-dark, #2980b9);
        background-color: var(--mar-info-bg, #d6eaf8);
    }

/* ============================================
   FOOTER
   ============================================ */
.auth-footer {
    margin-top: var(--mar-space-2xl, 3rem);
    padding-top: var(--mar-space-lg, 1.5rem);
    border-top: 1px solid var(--mar-border-light, #e4e6eb);
}

.auth-footer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mar-space-xs, 0.25rem);
    font-size: var(--mar-font-size-xs, 0.75rem);
    color: var(--mar-text-tertiary, #8b92a4);
    margin: 0;
}

    .auth-footer-text i {
        font-size: var(--mar-font-size-sm, 0.875rem);
    }

/* ============================================
   CONFIRMATION PAGE
   ============================================ */
.auth-confirmation-panel {
    padding: var(--mar-space-3xl, 4rem) var(--mar-space-xl, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-confirmation-content {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.auth-confirmation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 4rem;
    margin: 0 auto var(--mar-space-xl, 2rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.auth-confirmation-icon-pending {
    background: linear-gradient(135deg, var(--mar-warning-bg, #fcf3cf) 0%, rgba(243, 156, 18, 0.2) 100%);
    color: var(--mar-warning, #f39c12);
    border: 4px solid var(--mar-warning, #f39c12);
}

.auth-confirmation-title {
    font-size: var(--mar-font-size-3xl, 1.875rem);
    font-weight: var(--mar-font-weight-bold, 700);
    color: var(--mar-text-primary, #1c1e21);
    margin: 0 0 var(--mar-space-sm, 0.5rem) 0;
}

.auth-confirmation-subtitle {
    font-size: var(--mar-font-size-lg, 1.125rem);
    color: var(--mar-text-secondary, #606770);
    margin: 0 0 var(--mar-space-2xl, 3rem) 0;
}

.auth-confirmation-info {
    background: var(--mar-bg-secondary, #f8f9fa);
    border-radius: var(--mar-radius-lg, 0.75rem);
    padding: var(--mar-space-xl, 2rem);
    margin-bottom: var(--mar-space-2xl, 3rem);
}

.auth-confirmation-detail {
    display: flex;
    align-items: center;
    gap: var(--mar-space-md, 1rem);
    text-align: left;
}

    .auth-confirmation-detail i {
        font-size: var(--mar-font-size-2xl, 1.5rem);
        color: var(--mar-accent, #3498db);
        flex-shrink: 0;
    }

    .auth-confirmation-detail strong {
        display: block;
        font-weight: var(--mar-font-weight-semibold, 600);
        color: var(--mar-text-primary, #1c1e21);
        margin-bottom: var(--mar-space-xs, 0.25rem);
        font-size: var(--mar-font-size-sm, 0.875rem);
    }

    .auth-confirmation-detail p {
        margin: 0;
        font-size: var(--mar-font-size-base, 1rem);
        color: var(--mar-text-secondary, #606770);
        word-break: break-all;
    }

.auth-confirmation-divider {
    height: 1px;
    background: var(--mar-border-light, #e4e6eb);
    margin: var(--mar-space-xl, 2rem) 0;
}

/* ============================================
   STEPS DISPLAY
   ============================================ */
.auth-confirmation-steps {
    display: flex;
    flex-direction: column;
    gap: var(--mar-space-lg, 1.5rem);
    text-align: left;
}

.auth-step {
    display: flex;
    gap: var(--mar-space-md, 1rem);
    align-items: flex-start;
}

.auth-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--mar-font-size-xl, 1.25rem);
}

.auth-step-complete .auth-step-icon {
    background: linear-gradient(135deg, var(--mar-success, #27ae60) 0%, var(--mar-success-light, #2ecc71) 100%);
    color: var(--mar-white, #ffffff);
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
}

.auth-step-pending .auth-step-icon {
    background: linear-gradient(135deg, var(--mar-warning, #f39c12) 0%, var(--mar-warning-light, #f1c40f) 100%);
    color: var(--mar-white, #ffffff);
    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

.auth-step-future .auth-step-icon {
    background: var(--mar-gray-200, #e4e6eb);
    color: var(--mar-gray-500, #8b92a4);
}

.auth-step-content {
    flex: 1;
    padding-top: var(--mar-space-xs, 0.25rem);
}

    .auth-step-content strong {
        display: block;
        font-weight: var(--mar-font-weight-semibold, 600);
        color: var(--mar-text-primary, #1c1e21);
        margin-bottom: var(--mar-space-xs, 0.25rem);
        font-size: var(--mar-font-size-base, 1rem);
    }

    .auth-step-content p {
        margin: 0;
        font-size: var(--mar-font-size-sm, 0.875rem);
        color: var(--mar-text-secondary, #606770);
        line-height: var(--mar-line-height-normal, 1.5);
    }

/* ============================================
   CONFIRMATION ACTIONS
   ============================================ */
.auth-confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mar-space-md, 1rem);
    margin-bottom: var(--mar-space-xl, 2rem);
}

    .auth-confirmation-actions .auth-btn {
        width: 100%;
    }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 968px) {
    .auth-container {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel {
        padding: var(--mar-space-2xl, 3rem) var(--mar-space-lg, 1.5rem);
    }

    .auth-brand-features {
        display: none;
    }

    .auth-logo {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .auth-form-panel {
        padding: var(--mar-space-2xl, 3rem) var(--mar-space-lg, 1.5rem);
    }

    .auth-confirmation-panel {
        padding: var(--mar-space-2xl, 3rem) var(--mar-space-lg, 1.5rem);
    }
}

@media (max-width: 640px) {
    .auth-page {
        padding: var(--mar-space-md, 1rem);
    }

    .auth-brand-panel {
        padding: var(--mar-space-xl, 2rem) var(--mar-space-md, 1rem);
    }

    .auth-brand-title {
        font-size: var(--mar-font-size-xl, 1.25rem);
    }

    .auth-brand-subtitle {
        font-size: var(--mar-font-size-base, 1rem);
    }

    .auth-logo {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .auth-form-panel {
        padding: var(--mar-space-xl, 2rem) var(--mar-space-md, 1rem);
    }

    .auth-form-title {
        font-size: var(--mar-font-size-xl, 1.25rem);
    }

    .auth-confirmation-icon {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }

    .auth-confirmation-title {
        font-size: var(--mar-font-size-2xl, 1.5rem);
    }

    .auth-confirmation-actions {
        flex-direction: column;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.auth-input:focus,
.auth-btn:focus,
.auth-link:focus,
.auth-checkbox-input:focus {
    outline: 3px solid var(--mar-accent, #3498db);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .auth-input,
    .auth-btn {
        border: 2px solid currentColor;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .auth-brand-panel,
    .auth-footer {
        display: none;
    }

    .auth-container {
        box-shadow: none;
        border: 1px solid var(--mar-border-color, #dcdee3);
    }
}