/* L&C Global Consultant Branding Styles */

/* Brand Colors - Based on logo */
:root {
    --lnc-primary: #00A651;        /* Main green from logo */
    --lnc-primary-dark: #00843D;   /* Darker green for hover */
    --lnc-primary-light: #00C865;  /* Lighter green for accents */
    --lnc-secondary: #FFFFFF;       /* White */
    --lnc-text: #1F2937;           /* Dark gray for text */
    --lnc-text-light: #6B7280;     /* Light gray for secondary text */
    --lnc-accent: #F3F4F6;         /* Light gray background */
}

/* Chainlit Header Branding */
.cl-header {
    background: var(--lnc-primary) !important;
    border-bottom: 2px solid var(--lnc-primary-dark);
    padding: 0.75rem 1rem !important;
}

.cl-header .cl-logo,
.cl-header img[src*="logo"],
.cl-header .cl-logo img,
.cl-header img,
header img[src*="logo"],
header .cl-logo {
    filter: brightness(0) invert(1); /* Make logo white on green background */
    max-width: 240px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Buttons and Actions */
.cl-button-primary,
.cl-button[type="submit"],
button[type="submit"] {
    background: var(--lnc-primary) !important;
    color: var(--lnc-secondary) !important;
    border-color: var(--lnc-primary) !important;
}

.cl-button-primary:hover,
.cl-button[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--lnc-primary-dark) !important;
    border-color: var(--lnc-primary-dark) !important;
}

/* Links */
a {
    color: var(--lnc-primary);
}

a:hover {
    color: var(--lnc-primary-dark);
}

/* Login Page Branding */
#auth-container {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Center login form */
#auth-container form {
    width: 100%;
    max-width: 400px;
}

/* Login page logo/image sizing - ONLY for login page */
.cl-auth-page img,
.cl-auth-container img,
.auth-page img {
    max-width: 600px !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 2rem auto !important;
    display: block !important;
}

/* Center login page content */
.cl-auth-page,
.cl-auth-container,
.auth-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 100vh !important;
}

/* Login form styling */
#auth-container form {
    background: var(--lnc-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#auth-container input[type="text"],
#auth-container input[type="email"],
#auth-container input[type="password"] {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

#auth-container input[type="text"]:focus,
#auth-container input[type="email"]:focus,
#auth-container input[type="password"]:focus {
    border-color: var(--lnc-primary);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1);
    outline: none;
}

/* Registration link styling */
.register-link {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: var(--lnc-accent);
    border-radius: 8px;
}

.register-link p {
    color: var(--lnc-text-light);
    font-size: 14px;
    margin-bottom: 8px;
}

.register-link a {
    display: inline-block;
    padding: 10px 24px;
    background: var(--lnc-primary);
    color: var(--lnc-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.register-link a:hover {
    background: var(--lnc-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3);
}

/* Sidebar Branding */
.cl-sidebar {
    background: var(--lnc-secondary);
    border-right: 1px solid var(--lnc-accent);
}

/* Avatar styling */
.cl-avatar,
.cl-avatar img {
    border: 2px solid var(--lnc-primary);
    max-width: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
}

/* Loading indicators */
.cl-loading {
    color: var(--lnc-primary);
}

/* Error messages */
.cl-error {
    background: #FEE2E2;
    color: #991B1B;
    border-left: 3px solid #DC2626;
}

/* Success messages */
.cl-success {
    background: #D1FAE5;
    color: #065F46;
    border-left: 3px solid var(--lnc-primary);
}

/* Focus states */
*:focus {
    outline-color: var(--lnc-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--lnc-accent);
}

::-webkit-scrollbar-thumb {
    background: var(--lnc-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lnc-primary-dark);
}