/*// Define your custom primary color
$primary: #ff5733; // Change to your desired primary color

// Import Bootstrap functions and variables*/
/*@import "../../lib/bootstrap/scss/functions";
@import "../../lib/bootstrap/scss/variables";*/
/*//@import "../../lib/bootstrap/scss";

// Override the primary color in both light and dark mode
:root, [data-bs-theme="light"] {
    --bs-primary: #ff5733; // Custom primary for light mode
    --bs-primary-rgb: 255, 87, 51;
}

[data-bs-theme="dark"] {
    --bs-primary: #ff7844; // Custom primary for dark mode (optional, can be different)
    --bs-primary-rgb: 255, 120, 68;
}

// Re-import Bootstrap to apply changes
//@import "../../lib/bootstrap/scss";*/
/** Colours
    SCSS which is unique to every project, implements the unique style colours/fonts for this project.
*/
/*//Fonts
$base-font-family: var(--bs-body-font-family);*/
/*Arial, Helvetica, sans-serif;*/
/*$base-font-size: var(--bs-body-font-size);*/
/*9pt;*/
/*$base-phone-font-size: 14px;

*/
/* Identity Pages Override Styles */
/* This stylesheet is loaded only on Identity pages (Login, Register, etc.) */
/* ------------------ Color Variables ------------------ */
/* These match TheFieldGameBootstrapOverrides.scss for consistency */
/* ------------------ Typography ------------------ */
/* ------------------ Shadows & Borders ------------------ */
/* ------------------ Breakpoints ------------------ */
/* ------------------ Identity Page Specific Styles ------------------ */
.login-bg {
  position: relative;
  background: #4193F6;
  color: #FFFFFF;
  overflow-x: hidden;
}

.form-title {
  color: #FFFFFF;
}

.form-check-input {
  background-color: transparent;
}

.form-check-input:checked {
  background-color: transparent;
  border-color: #FFFFFF;
}

#forgot-password-view {
  background: rgba(245, 245, 245, 0.3);
  padding: 1.8rem 1rem;
}

#forgot-password-view img.img-japanesegardens {
  display: inline;
  position: absolute;
  bottom: -95px;
  left: -60px;
  width: 100%;
  height: auto;
  max-width: 350px;
  --base-transform: scale(1.2);
  transform: var(--base-transform);
  z-index: -1;
}

#forgot-password-confirmation-view {
  background: rgba(245, 245, 245, 0.3);
  color: var(--bs-secondary);
  padding: 1.8rem 1rem;
}

#forgot-password-confirmation-view img.img-gnomeparachute {
  display: inline;
  position: absolute;
  top: 22px;
  left: -40px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#logout-view {
  background: rgba(245, 245, 245, 0.3);
  color: var(--bs-secondary);
  padding: 1.8rem 1rem;
}

#logout-view img.img-gnomerope {
  display: inline;
  position: absolute;
  top: -170px;
  right: -100px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#logout-view img.img-japanesegardens {
  display: inline;
  position: absolute;
  bottom: -95px;
  left: -60px;
  width: 100%;
  height: auto;
  max-width: 350px;
  --base-transform: scale(1.2);
  transform: var(--base-transform);
  z-index: -1;
}

#landing-view {
  /* ===== CONTAINER ===== */
  /* ===== VIEWS ===== */
  /* ===== HEADER ===== */
  /* ===== BACK BUTTON ===== */
  /* ===== LANDING BUTTONS ===== */
}

#landing-view img.img-gnomelogo {
  display: inline;
  position: absolute;
  top: 6%;
  left: 50%;
  width: 100%;
  height: auto;
  max-width: 450px;
  --base-transform: translate(-50%, 0);
  transform: var(--base-transform);
  z-index: -1;
}

#landing-view img.img-tabletop {
  display: inline;
  position: absolute;
  bottom: -130px;
  right: -130px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#landing-view img.img-empire {
  display: inline;
  position: absolute;
  top: -50px;
  left: -172px;
  width: 100%;
  height: auto;
  max-width: 350px;
  --base-transform: scaleX(-1);
  transform: var(--base-transform);
  z-index: -1;
}

#landing-view img.img-grandcentral {
  display: inline;
  position: absolute;
  top: -95px;
  right: -120px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#landing-view img.img-clocktower {
  display: inline;
  position: absolute;
  top: 20%;
  right: -174px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#landing-view img.img-japanesegardens {
  display: inline;
  position: absolute;
  top: 39%;
  left: -140px;
  width: 100%;
  height: auto;
  max-width: 350px;
  --base-transform: scale(1.3);
  transform: var(--base-transform);
  z-index: -1;
}

#landing-view .identity-view {
  /* Base styles for all views (landing, login, register) */
}

#landing-view .identity-landing {
  /* Landing view specific styles */
  color: #FFFFFF;
}

#landing-view .identity-login {
  /* Login view specific styles */
  color: #FFFFFF;
}

#landing-view .identity-register {
  /* Register view specific styles */
  color: #FFFFFF;
}

#landing-view .identity-header {
  color: #FFFFFF;
  margin-bottom: 0px;
}

#landing-view .identity-title {
  text-transform: uppercase;
  text-align: right;
  color: #FFFFFF !important;
  margin-bottom: 0px;
}

#landing-view .identity-tagline {
  text-align: right;
  color: #FFFFFF !important;
}

#landing-view .btn-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#landing-view .btn-back:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#landing-view .btn-back .material-symbols-outlined {
  font-size: 1.5rem;
}

#landing-view .identity-actions {
  background: rgba(245, 245, 245, 0.3);
  color: #FFFFFF !important;
  border-radius: 5px;
  padding: 2.5rem 2rem;
  text-align: center;
}

#landing-view .identity-actions > h3 {
  color: #FFFFFF !important;
  margin-bottom: 1.2rem;
}

#landing-view .identity-btn {
  /* Base style for identity buttons */
  border-radius: 5rem;
}

#landing-view .identity-btn-login {
  /* Log In button on landing page */
}

#landing-view .identity-btn-signup {
  background: rgba(245, 245, 245, 0.25);
  color: #FFFFFF;
  border-color: rgba(245, 245, 245, 0.25);
  margin-bottom: 0.5rem;
}

/* ===== TABS ===== */
.identity-tabs {
  /* Tab container for login/register toggle */
}

.identity-tab {
  /* Individual tab button */
}

.identity-tab-login {
  /* Login tab */
}

.identity-tab-signup {
  /* Sign up tab */
}

/* ===== FORM SECTION ===== */
.identity-form-section {
  /* Container wrapping the form */
}

.identity-form {
  /* Base form styles */
}

.identity-login-form {
  /* Login form specific styles */
}

.identity-register-form {
  /* Register form specific styles */
}

/* ===== PASSWORD TOGGLE ===== */
.password-input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.password-input-wrapper .form-floating {
  flex: 1;
}

.password-input-wrapper .password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.5);
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  line-height: 1;
  height: auto;
  width: auto;
}

.password-input-wrapper .password-toggle:hover {
  color: rgba(0, 0, 0, 0.8);
  background: none !important;
}

.password-input-wrapper .password-toggle:focus {
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.password-input-wrapper .password-toggle:active {
  background: none !important;
}

.password-input-wrapper .password-toggle .material-symbols-outlined {
  font-size: 1.25rem;
}

/* ===== FORM FIELDS ===== */
.identity-field {
  /* Container for each form field */
}

.identity-field-label {
  color: #FFFFFF;
}

.identity-field-username {
  /* Username/email field container */
}

.identity-field-email {
  /* Email field container */
}

.identity-field-password {
  /* Password field container */
}

.identity-field-confirm-password {
  /* Confirm password field container */
}

.identity-input {
  /* Input field styling */
}

.identity-field-error {
  /* Validation error message */
}

.identity-validation-summary {
  /* Summary of all validation errors */
}

/* ===== FORM OPTIONS ===== */
.identity-options {
  /* Container for remember me and forgot password */
}

.identity-remember-me {
  color: #FFFFFF;
}

.identity-forgot-password {
  color: #FFFFFF;
}

.identity-link {
  color: #FFFFFF;
}

/* ===== SUBMIT BUTTON ===== */
.identity-submit {
  /* Submit button container */
  position: relative;
}

.identity-submit-btn {
  /* Submit button styling */
}

/* ===== EXTERNAL PROVIDERS ===== */
.identity-external-section {
  /* Section containing external login options */
}

.identity-divider-text {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  margin: 2rem 0;
}

.identity-divider-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 1px;
  background: #FFFFFF;
}

.identity-divider-text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 30%;
  height: 1px;
  background: #FFFFFF;
}

.identity-external-form {
  /* Form containing external provider buttons */
}

.identity-external-providers {
  /* Container for provider buttons */
}

.identity-external-provider {
  /* Individual provider button container */
}

.identity-external-btn {
  /* External provider button (Google, Facebook, etc.) */
}

/* ===== DISCLAIMER ===== */
.identity-disclaimer {
  /* Terms and privacy disclaimer text */
}

/* #region Login Screen */
#login-view {
  background: rgba(245, 245, 245, 0.3);
  padding: 1.8rem 1rem;
  /* ===== CONTAINER ===== */
  /* ===== VIEWS ===== */
  /* ===== HEADER ===== */
  /* ===== BACK BUTTON ===== */
  /* ===== LANDING BUTTONS ===== */
}

#login-view img.img-tabletop {
  display: inline;
  position: absolute;
  bottom: -110px;
  right: -120px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#login-view img.img-gnomehanging {
  display: inline;
  position: absolute;
  top: 98%;
  left: 40px;
  width: 100%;
  height: auto;
  max-width: 50px;
  z-index: -1;
}

#login-view img.img-gnomeparachute {
  display: inline;
  position: absolute;
  top: -110px;
  left: -60px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#login-view img.img-gnomerope {
  display: inline;
  position: absolute;
  top: -170px;
  right: -100px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#login-view .identity-landing {
  /* Landing view specific styles */
  color: #FFFFFF;
}

#login-view .identity-login {
  /* Login view specific styles */
  color: #FFFFFF;
}

#login-view .identity-register {
  /* Register view specific styles */
  color: #FFFFFF;
}

#login-view .identity-header {
  color: #FFFFFF;
  margin-bottom: 0px;
}

#login-view .identity-title {
  text-transform: uppercase;
  text-align: right;
  color: #FFFFFF !important;
  margin-bottom: 0px;
}

#login-view .identity-tagline {
  text-align: right;
  color: #FFFFFF !important;
}

#login-view .btn-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#login-view .btn-back:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#login-view .btn-back .material-symbols-outlined {
  font-size: 1.5rem;
}

#login-view .identity-actions {
  background: rgba(245, 245, 245, 0.3);
  color: #FFFFFF !important;
  border-radius: 5px;
  padding: 2.5rem 2rem;
  text-align: center;
}

#login-view .identity-actions > h3 {
  color: #FFFFFF !important;
  margin-bottom: 1.2rem;
}

#login-view .identity-btn {
  /* Base style for identity buttons */
  border-radius: 5rem;
}

#login-view .identity-btn-login {
  /* Log In button on landing page */
}

#login-view .identity-btn-signup {
  background: rgba(245, 245, 245, 0.25);
  color: #FFFFFF;
  border-color: rgba(245, 245, 245, 0.25);
  margin-bottom: 0.5rem;
}

/* #endregion */
/* #region Register Screen */
#register-view {
  background: rgba(245, 245, 245, 0.3);
  padding: 1.8rem 1rem;
  /* ===== BACK BUTTON ===== */
  /* ===== DISCLAIMER ===== */
}

#register-view img.img-gnomehanging {
  display: inline;
  position: absolute;
  top: 98%;
  left: 40px;
  width: 100%;
  height: auto;
  max-width: 50px;
  z-index: -1;
}

#register-view img.img-gnomeparachute {
  display: inline;
  position: absolute;
  top: -110px;
  left: -60px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#register-view img.img-gnomerope {
  display: inline;
  position: absolute;
  top: -233px;
  right: -100px;
  width: 100%;
  height: auto;
  max-width: 350px;
  z-index: -1;
}

#register-view .btn-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#register-view .btn-back:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#register-view .btn-back .material-symbols-outlined {
  font-size: 1.5rem;
}

#register-view .identity-disclaimer {
  margin-top: 1.5rem;
  text-align: center;
  color: #FFFFFF;
  opacity: 0.8;
}

/* #endregion */