/**
 * Login Page Styles
 */

/* 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);
    overflow-x: hidden;
}

/* 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: 450px;
    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;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 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-header {
    text-align: center;
    margin-bottom: 2rem;
}

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

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

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

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

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

/* Forgot Password Link (below password input) */
.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;
    font-weight: 500;
    transition: color var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

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

.forgot-password-link a i {
    font-size: 0.85rem;
}

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

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

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

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

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

/* 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;
    text-decoration: none;
}

.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: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

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

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

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

.text-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color var(--transition-speed);
}

.text-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.form-divider {
    margin: 1.5rem 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;
}

.register-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.register-link:hover {
    background: #e9ecef;
}

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

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

/* 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: 9999;
    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 450px;
   phones and tablets were 15% narrower before the same 10% widening. */
.useraccess-content {
    max-width: 346px;
}

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