/* -----------------------------------------------------------------------
   @Filename:    sawa-branding.css
   @Project:     SAWA-AAI Frontend
   @Author:      Andrei Sergeev (AGS)
   @Created:     Feb 04, 2026
   @Description: SAWA Branding CSS - Colors and styling based on SAWA logo
                 Color Palette from SAWA Logo:
                 - Blue (S): #4A9FD8
                 - Purple (A): #9B7FBB
                 - Green (W): #6FBB8E
                 - Coral (A): #F5A76C
                 - Globe Green: #7BC8A0

   Copyright (c) 2026. CloudBreezy, Inc. (https://cloudbreezy.com). All rights reserved.
   ----------------------------------------------------------------------- */

/* ====================================================================
   Root Variables - SAWA Color Palette
   ==================================================================== */

:root {
  /* Primary SAWA Colors */
  --sawa-blue: #4A9FD8;
  --sawa-purple: #9B7FBB;
  --sawa-green: #6FBB8E;
  --sawa-coral: #F5A76C;
  --sawa-globe-green: #7BC8A0;

  /* Supporting Colors */
  --sawa-light-blue: #E8F3F9;
  --sawa-light-purple: #F0EBF7;
  --sawa-light-green: #EBF7F0;
  --sawa-light-coral: #FEF3ED;

  /* Neutral Colors */
  --sawa-dark: #1F2937;
  --sawa-light: #F9FAFB;
  --sawa-border: #E5E7EB;
  --sawa-text: #374151;
  --sawa-text-light: #6B7280;
}

/* ====================================================================
   Chainlit Authentication Form - Custom Styling
   ==================================================================== */

/* Login Page Background and Container */
.cl-auth-page,
.cl-authentication,
.auth-page {
  background: linear-gradient(135deg, var(--sawa-light-blue) 0%, var(--sawa-light-green) 100%);
  min-height: 100vh;
}

/* Auth Form Container */
.cl-auth-form,
.auth-form,
[class*="auth"][class*="form"] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(74, 159, 216, 0.15);
  padding: 40px;
}

/* ====================================================================
   Logo Styling
   ==================================================================== */


/* Logo Container */
.cl-logo-container,
[class*="logo-container"],
.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.cl-logo-container img,
[class*="logo-container"] img,
.header-logo img {
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

/* ====================================================================
   Form Title and Description
   ==================================================================== */

.cl-auth-title,
.auth-title,
[class*="title"],
h1, h2, h3 {
  color: var(--sawa-blue);
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.cl-auth-description,
.auth-description,
[class*="description"],
p {
  color: var(--sawa-text-light);
  font-size: 14px;
  line-height: 1.5;
}

/* ====================================================================
   Input Fields - Username/Email and Password
   ==================================================================== */

/* Input Container */
.cl-auth-input-group,
.auth-input-group,
.input-group,
[class*="input-group"] {
  margin-bottom: 20px;
}

/* Input Labels */
label,
.cl-auth-label,
.auth-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--sawa-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Username/Email Input Field */
input[type="text"],
input[type="email"],
input[type="username"],
input[name="username"],
input[name="email"],
.cl-auth-input,
.auth-input,
[class*="input"]:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid var(--sawa-border);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--sawa-text);
  transition: all 0.3s ease;
  font-family: inherit;
  box-sizing: border-box;
}

/* Input Focus State - Blue Primary Color */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="username"]:focus,
input[name="username"]:focus,
input[name="email"]:focus,
.cl-auth-input:focus,
.auth-input:focus,
[class*="input"]:focus {
  outline: none;
  border-color: var(--sawa-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 216, 0.1);
  background-color: var(--sawa-light-blue);
}

/* Input Hover State */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="username"]:hover,
input[name="username"]:hover,
input[name="email"]:hover,
.cl-auth-input:hover,
.auth-input:hover {
  border-color: var(--sawa-blue);
  background-color: var(--sawa-light-blue);
}

/* ====================================================================
   Password Input Field
   ==================================================================== */

input[type="password"],
input[name="password"],
.password-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid var(--sawa-border);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--sawa-text);
  transition: all 0.3s ease;
  font-family: inherit;
  box-sizing: border-box;
}

/* Password Input Focus - Purple Accent Color */
input[type="password"]:focus,
input[name="password"]:focus,
.password-input:focus {
  outline: none;
  border-color: var(--sawa-purple);
  box-shadow: 0 0 0 3px rgba(155, 127, 187, 0.1);
  background-color: var(--sawa-light-purple);
}

/* Password Input Hover */
input[type="password"]:hover,
input[name="password"]:hover,
.password-input:hover {
  border-color: var(--sawa-purple);
  background-color: var(--sawa-light-purple);
}

/* ====================================================================
   Sign In / Submit Button
   ==================================================================== */

/* Button Base Styling - Green Accent */
button[type="submit"],
.cl-auth-button,
.auth-button,
.sign-in-button,
.login-button,
[class*="submit"],
[class*="button"]:not([class*="secondary"]):not([class*="cancel"]) {
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  background: linear-gradient(135deg, var(--sawa-green) 0%, var(--sawa-globe-green) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(111, 187, 142, 0.25);
}

/* Button Hover State */
button[type="submit"]:hover,
.cl-auth-button:hover,
.auth-button:hover,
.sign-in-button:hover,
.login-button:hover,
[class*="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(111, 187, 142, 0.35);
  background: linear-gradient(135deg, #63B080 0%, #72D4A8 100%);
}

/* Button Active/Pressed State */
button[type="submit"]:active,
.cl-auth-button:active,
.auth-button:active,
.sign-in-button:active,
.login-button:active,
[class*="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(111, 187, 142, 0.2);
}

/* Button Disabled State */
button[type="submit"]:disabled,
.cl-auth-button:disabled,
.auth-button:disabled,
.sign-in-button:disabled,
.login-button:disabled,
[class*="submit"]:disabled {
  background: linear-gradient(135deg, #CBD5E1 0%, #E2E8F0 100%);
  color: #94A3B8;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

/* ====================================================================
   Secondary/Cancel Buttons
   ==================================================================== */

button[class*="secondary"],
button[class*="cancel"],
[class*="button"][class*="secondary"],
[class*="button"][class*="cancel"] {
  background-color: transparent;
  color: var(--sawa-blue);
  border: 2px solid var(--sawa-border);
  transition: all 0.3s ease;
}

button[class*="secondary"]:hover,
button[class*="cancel"]:hover {
  background-color: var(--sawa-light-blue);
  border-color: var(--sawa-blue);
  color: var(--sawa-blue);
}

/* ====================================================================
   Links and Error Messages
   ==================================================================== */

a, .link {
  color: var(--sawa-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

a:hover, .link:hover {
  color: var(--sawa-purple);
  text-decoration: underline;
}

/* Error Messages - Coral Accent */
.error,
.error-message,
.cl-error,
[class*="error"],
.alert-error {
  background-color: #FEE2E2;
  color: #DC2626;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #DC2626;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Success Messages - Green */
.success,
.success-message,
.cl-success,
[class*="success"],
.alert-success {
  background-color: var(--sawa-light-green);
  color: var(--sawa-green);
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--sawa-green);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Warning Messages - Coral */
.warning,
.warning-message,
[class*="warning"],
.alert-warning {
  background-color: var(--sawa-light-coral);
  color: #B45309;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--sawa-coral);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ====================================================================
   Form Group and Layout
   ==================================================================== */

.form-group,
.cl-form-group,
.auth-form-group {
  margin-bottom: 20px;
}

form {
  width: 100%;
}

/* Remember me / Checkbox Styling */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
  accent-color: var(--sawa-blue);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid var(--sawa-blue);
  outline-offset: 2px;
}

/* ====================================================================
   Registration/Additional Links
   ==================================================================== */

.auth-footer,
.auth-links,
.form-footer,
[class*="footer"] {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sawa-border);
}

.auth-footer p,
.auth-links p {
  color: var(--sawa-text-light);
  font-size: 13px;
  margin: 8px 0;
}

.auth-footer a,
.auth-links a {
  color: var(--sawa-blue);
  font-weight: 600;
  transition: color 0.3s ease;
}

.auth-footer a:hover,
.auth-links a:hover {
  color: var(--sawa-purple);
}

/* ====================================================================
   Animations
   ==================================================================== */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cl-auth-form,
.auth-form,
[class*="auth"][class*="form"] {
  animation: slideInUp 0.5s ease-out;
}

/* ====================================================================
   Responsive Design
   ==================================================================== */

@media (max-width: 768px) {
  .cl-auth-form,
  .auth-form,
  [class*="auth"][class*="form"] {
    padding: 30px 20px;
    margin: 20px;
    border-radius: 12px;
  }

  .cl-auth-title,
  .auth-title,
  h1, h2, h3 {
    font-size: 24px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="username"],
  input[name="username"],
  input[name="email"],
  input[name="password"] {
    padding: 14px 16px;
    font-size: 16px;
  }

  button[type="submit"],
  .cl-auth-button,
  .auth-button {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* ====================================================================
   Chainlit Specific Overrides
   ==================================================================== */

/* Override Chainlit default colors */
.cl-message-icon {
  color: var(--sawa-blue);
}

.cl-button {
  background-color: var(--sawa-green);
  color: white;
}

.cl-button:hover {
  background-color: var(--sawa-globe-green);
}

/* Sidebar */
.cl-side-menu {
  background-color: var(--sawa-light);
  border-right: 1px solid var(--sawa-border);
}

/* Main Content Area */
.cl-main {
  background-color: white;
}

/* Chat messages */
.cl-message {
  border-radius: 8px;
}

.cl-message.assistant {
  background-color: var(--sawa-light-blue);
}

.cl-message.user {
  background-color: var(--sawa-light-green);
}


/* ====================================================================
   End of sawa-branding.css
   ==================================================================== */