/**
 * Login Page Styles - Multi-Step Company Login
 */

/* CSS Variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --error-color: #dc3545;
    /* Same as the dashboard sidebar (--sidebar-bg in style.css) */
    --sidebar-bg: #2c3e50;
    --text-color: #2c3e50;
    --border-color: #ddd;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

/* Container & Layout */
.useraccess-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Background Decorative Shapes */
.background-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
}

.shape-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
}

.shape-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 10%;
}

/* Main Content Area */
.useraccess-content {
    position: relative;
    z-index: 10;
    max-width: 550px;
    width: 100%;
}

/* Brand Section */
.brand-section {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInDown 0.6s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.brand-name {
    display: inline-block;
    margin-bottom: 0.75rem;
    line-height: 0;
}

.brand-name img {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.brand-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

/* Form Container */
.form-container {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    animation: fadeInUp 0.6s ease;
}

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

/* Form Steps */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.form-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.form-subtitle {
    color: var(--secondary-color);
    font-size: 0.95rem;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* Inputs: the icon sits in its own box joined to the left of the input.
   Labels carry text only (blue, no icon). */
.input-icon-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.input-icon-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.input-icon-group:has(.form-control.error) {
    border-color: var(--error-color);
}

.input-icon-group:has(.form-control.success) {
    border-color: var(--success-color);
}

.input-icon-addon {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: var(--primary-color);
    border-right: 2px solid var(--border-color);
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.input-icon-group:focus-within .input-icon-addon {
    border-right-color: var(--primary-color);
}

.input-icon-group .form-control,
.input-icon-group .form-control:focus {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.input-icon-group .country-select-wrapper {
    flex: 1;
    min-width: 0;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--transition-speed);
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-control.error {
    border-color: var(--error-color);
}

.form-control.success {
    border-color: var(--success-color);
}

/* Email / phone verification pages */
.verification-code-input {
    text-transform: uppercase;
}

.resend-code-btn {
    margin-top: 1rem;
}

.input-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Error & Success Messages */
.error-message,
.success-message {
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message {
    background: #fee;
    color: var(--error-color);
    border: 1px solid #fcc;
}

.success-message {
    background: #efe;
    color: var(--success-color);
    border: 1px solid #cfc;
}

/* Company Info Display */
.company-info-display {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.info-card {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition-speed);
}

.info-card:hover {
    background: #e9ecef;
}

.info-icon {
    display: none;
}

.info-content {
    flex: 1;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e9ecef;
}

.info-content:last-child {
    border-bottom: none;
}

.info-content label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.info-content label i {
    font-size: 0.75rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.info-content p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

/* Buttons */
.btn {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

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

.btn-secondary {
    background: #6c757d;
    color: white;
    border: 2px solid #6c757d;
}

.btn-secondary:hover {
    background: #5a6268;
    color: white;
}

.button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Forgot Password Link */
.forgot-password-link {
    margin-top: 0.5rem;
    text-align: right;
}

.forgot-password-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--transition-speed);
}

.forgot-password-link a:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Form Links */
.form-links {
    margin-top: 1.5rem;
    text-align: center;
}

.form-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.form-links a:hover {
    color: #0056b3;
    text-decoration: none;
}

.form-divider {
    margin: 1rem 0;
    text-align: center;
    position: relative;
}

.form-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

.form-divider span {
    position: relative;
    padding: 0 1rem;
    background: white;
    color: var(--secondary-color);
    font-size: 0.875rem;
}

/* Footer */
.useraccess-footer {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

/* Loading State */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 0.5rem;
}

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

/* Alert Messages */
.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    animation: slideInRight 0.3s ease;
}

.alert-success {
    background: var(--success-color);
    color: white;
}

.alert-error {
    background: var(--error-color);
    color: white;
}

/* Responsive Design */
@media (max-width: 576px) {
    .useraccess-container {
        padding: 1rem;
    }
    
    .form-container {
        padding: 1.5rem;
    }
    
    .brand-name img {
        height: 1.75rem;
    }
    
    .form-title {
        font-size: 1.5rem;
    }

    .progress-steps {
        flex-direction: column;
        gap: 0.5rem;
    }

    .step {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
    }

    .step-divider {
        display: none;
    }

    .step-label {
        text-align: left;
    }

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

@media (max-width: 768px) {
    .useraccess-content {
        max-width: 100%;
    }
}

/* Desktop View - Reduce form width by 15% */
@media (min-width: 1024px) {
    .useraccess-content {
        max-width: 468px; /* 550px reduced by 15% */
    }
}

/* Toast built by showAlert() in the page scripts: red unless it is a success */
.alert.js-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    animation: slideInRight 0.3s ease;
}

.alert.js-alert.alert-success {
    background: #28a745;
}

/* Added by showAlert() just before the toast is removed */
.alert.is-leaving {
    animation: slideOutRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==========================================================================
   Compact layout — about 38% shorter than the original spacing above
   (30%, then a further 10%, then 3% taller again), and narrower: 30% on desktop, 15% on phones
   and tablets (768px and below).
   Identical in login.css and register.css across all the apps (CUSTOMER,
   STAFF, OFFICE, COMPANY, AI) except the width numbers, which are each
   file's own original widths reduced — change every copy together.
   It sits last in the file so it wins over the rules above, including the
   phone rules, which get their own compact values below.
   ========================================================================== */
.useraccess-container {
    padding: 0.75rem;
    line-height: 1.45;
}

.brand-section {
    margin-bottom: 0.7rem;
}

.logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.35rem;
}

.brand-name {
    margin-bottom: 0.3rem;
}

.brand-name img {
    height: 1.5rem;
}

.brand-tagline {
    font-size: 0.875rem;
}

.form-container {
    padding: 1.2rem 1.4rem;
}

.form-header {
    margin-bottom: 0.85rem;
}

.form-title {
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

.form-subtitle {
    font-size: 0.85rem;
}

.form-group {
    margin-bottom: 0.9rem;
}

.form-group label {
    margin-bottom: 0.25rem;
}

.form-control {
    padding: 0.5rem 0.8rem;
}

.btn {
    padding: 0.6rem;
}

.forgot-password-link {
    margin-top: 0.3rem;
}

.form-text,
.input-hint {
    margin-top: 0.2rem;
}

.resend-code-btn {
    margin-top: 0.5rem;
}

.form-links {
    margin-top: 0.85rem;
}

.form-divider {
    margin: 0.6rem 0;
}

.register-link {
    padding: 0.3rem 0.8rem;
    margin-top: 0.25rem;
}

.company-info-display {
    margin-bottom: 0.75rem;
}

.useraccess-footer {
    margin-top: 0.85rem;
}

@media (max-width: 576px) {
    .useraccess-container {
        padding: 0.6rem;
    }

    .form-container {
        padding: 1rem;
    }

    .brand-name img {
        height: 1.35rem;
    }

    .form-title {
        font-size: 1.15rem;
    }
}

/* Width: 30% narrower than the original, then widened by 10% (desktop and phones); was 550px (468px at 1024px and wider);
   phones and tablets were 15% narrower before the same 10% widening. */
.useraccess-content {
    max-width: 424px;
}

@media (min-width: 1024px) {
    .useraccess-content {
        max-width: 361px;
    }
}

@media (max-width: 768px) {
    .useraccess-content {
        width: 93.5%;
        max-width: 515px;
    }
}