/****************************************************************/
/* Define root variables */
/****************************************************************/
:root {
  --primary-color: var(--fleet-primary-color, #e0a241);
  --secondary-color: var(--fleet-secondary-color, #d5a040);
  --accent-color: var(--fleet-accent-color, #f2c97d);
  --page-background: var(--fleet-page-background, #0e0e0e);
  --background-dark: var(--fleet-background-dark, #121212);
  --background-panel: var(--fleet-background-panel, #1a1a1a);
  --text-white: var(--fleet-text-white, #ffffff);
  --text-light: var(--fleet-text-light, #bcbcbc);
  --text-dark: var(--fleet-text-dark, #000000);
  --text-black: var(--fleet-text-black, #000000);
  --label-text-color: var(--fleet-label-text-color, #e0a241);

/* Button & UI Theme */
  --input-border-radius: var(--fleet-input-border-radius, 8px);
  --button-gradient-start: var(--fleet-button-gradient-start, #e0a241);
  --button-gradient-end: var(--fleet-button-gradient-end, #ffcc73);
  --button-border-color: var(--fleet-button-border-color, #e0a241);
  --button-text-color: var(--fleet-button-text-color, #000000);
  --button-primary-color: var(--fleet-button-primary-color, #e0a241);
  --button-hover-color: var(--fleet-button-hover-color, #f2c97d);
  --button-active-color: var(--fleet-button-active-color, #d5a040);

  /* Delete / Danger Theme */
  --color-delete: var(--fleet-color-delete, #3b0000);
  --color-delete-hover: var(--fleet-color-delete-hover, #730000);

  /* Notifications */
  --notification-background: var(--fleet-notification-background, #3b0000);

  /* Theme system mapping */
  --theme_accent: var(--primary-color);
  --theme_accent_hover: var(--secondary-color);
  --theme_alt_accent: var(--primary-color);
  --datepicker-months-desktop: var(--fleet-datepicker-months-desktop, 2);
  --datepicker-months-mobile: var(--fleet-datepicker-months-mobile, 1);
}



/* Custom Login styles go here */
.fleet-login-wrapper h2 {
  color: var(--theme_accent) !important;
}

.login-form {
  background-color: var(--background-panel);
  color: var(--text-light);
}

.login-form label {
  color: var(--label-text-color);
  font-weight: 600;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  background-color: var(--background-panel);
  color: var(--text-light);
  border: 1px solid var(--theme_accent);
  border-radius: var(--input-border-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
  border-color: var(--theme_accent) !important;
  box-shadow: 0 0 6px var(--theme_accent) !important;
  outline: none !important;
}

.login-form button[name="fleet_login_submit"] {
  background-image: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end)) !important;

  color: var(--button-text-color) !important;
  border: none !important;
  border-radius: var(--input-border-radius) !important;

  transition: all 0.3s ease !important;
}

.login-form button[type="submit"]:hover {
  box-shadow: 0 4px 12px var(--theme_accent);
}

.login-form p a {
  color: var(--theme_alt_accent);
}

.login-form p a:hover {
  color: var(--theme_accent_hover);
}