:root {
  /* Primary brand colors */
  --w-color-primary: #5c99ff; /* Main brand color - primary (blue) */
  --w-color-primary-200: #1b3b6f; /* Lighter shade - primary light (blue) */
  --w-color-primary-400: #5c99ff; /* Main shade - primary (blue) */
  --w-color-primary-600: #1b3b6f; /* Darker shade - darkened primary */

  /* Secondary colors */
  --w-color-secondary: #8edd4f; /* Primary buttons, action links - secondary (green) */
  --w-color-secondary-600: #6bb03c; /* Hover states for two-tone buttons - darkened secondary */
  --w-color-secondary-400: #8edd4f; /* Two-tone buttons, hover states - secondary (green) */
  --w-color-secondary-100: #def2ce; /* UI element highlights over dark backgrounds - secondary light (green) */
  --w-color-secondary-75: #ecf9e1; /* UI element highlights over dark text - lightened secondary light */
  --w-color-secondary-50: #f5fcf0; /* Button backgrounds, highlighted fields background - very light secondary */

  --w-color-text-link-default: #1b3b6f; /* Default link color - primary (blue) */

  /* Info colors */
  --w-color-info-125: #e1efff; /* Hover background only, for information messages */
  --w-color-info-100: #ebf4ff; /* Background and icons for information messages */
  --w-color-info-75: #5c99ff; /* Info text in the dark theme - using primary (blue) */
  --w-color-info-50: #f5f9ff; /* Background only, for information messages */
}

main .content {
  border-top: 1rem solid var(--w-color-secondary); /* Top border for main content */
}

/* Branding container - normal state */
.sidebar-custom-branding {
  margin: 2rem 1rem; /* Control space around */
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo in normal state - take up available space */
.custom-logo {
  width: 100%; /* Take up all available width */
  height: auto; /* Maintain aspect ratio */
  color: var(--w-color-white);
  stroke-width: 0.198981;
}

/* Collapsed sidebar container */
.sidebar--slim .sidebar-custom-branding {
  margin: 1.5rem 0.25rem; /* Tighter margins in collapsed state */
  padding: 0;
}

/* Logo in collapsed state */
.sidebar--slim .custom-logo {
  width: 100%; /* Take all available width */
  height: auto;
}

/* Move the logo to the top using flexbox ordering */
.login .content-wrapper {
  display: flex;
  flex-direction: column;
}

/* Logo sizing and centering */
.login .login-logo-container {
  order: -2; /* Negative order makes it appear before other elements */
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.login .login-logo {
  width: 50%;
  max-width: 200px;
  height: auto;
  margin: 0;
}

.login h1 {
  order: -1; /* Make the title appear after the logo but before the form */
  margin: 1rem 0;
}

.login form {
  order: 0; /* Show the form after the logo and title */
}