/*
 * Design Tokens
 * Description: Global CSS variables for colors and UI basics.
 * Usage: Reference via var(--token) across components and states.
 */
:root {
  --GlobalBlue: #2a3647;
  --GlobalWhite: #ffffff;
  --GlobalBackgroundWhite: #f6f7f8;
  --GlobalLightBlue: #29abe2;
  --GlobalDarkblue: #091931;
  --CircleBadgeGray: #0c2e621f;
  --GlobalBorderColorGray: #a8a8a8;
  --GlobalInputGray: #D1D1D1;
  --GlobalBlack: #000000;
  --GlobalErrorRed: #E60026;
  --GlobalLinkGray: #CDCDCD;
  --GlobalBlueHover: #2A3D59;


  /* Task*/
  --taskLightBlue: #0038ff;

  /* Layout */
  --sidebar-w: 232px;
  --header-h: 96px;
}

/* =========================
   Global App Shell Layout
   ========================= */

/* Guest-Mode Styles */
body.guest-mode .header-right {
  display: none;
}

body.guest-mode .nav {
  display: none;
}

/* Container for sidebar, header, and content */
.app {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* This area now acts as the page canvas on every screen */
.main{
    position: fixed;
    left: var(--sidebar-w);
    top: var(--header-h);
    width: calc(100vw - var(--sidebar-w));
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--GlobalBackgroundWhite);
}

.canvas-area {
    padding: 64px 96px;
    max-width: 1920px;
}

/*
 * Font: Inter
 * Description: Embeds the "Inter" font family.
 * Note: Multiple format entries for broad browser support.
 */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
}

@font-face {
  font-family: inter;
  font-weight: 700;
  src: url('../assets/fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
}

/*
 * Global Body Font
 * Description: Sets Inter as default font for entire page
 */

body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  background-color: var(--GlobalBackgroundWhite);
}

html {
  height: 100%;
}

/*
 * Base Font
 * Description: Sets the primary font family for containers.
 */
.mainFont {
  font-family: 'Inter';
}

/**font sizes */
h1 {
  font-size: 61px;
  color: var(--GlobalBlack);
  font-weight: 700;
  line-height: 120%;
  margin: 0;
}

h2 {
  font-size: 20px;
  margin: 0;
}

h3 {
  font-size: 16px;
  margin: 0;
}

/*
 * Utility: Visual Separator
 * Purpose: Horizontal line for content separation
 */
.Separator {
  width: 150px;
  border: none;
  border-top: 3px solid var(--GlobalLightBlue);
}


/** InputFields Icons, Error Message**/

.InputWrapper {
  position: relative;
}

.InputField {
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
  height: 48px;
  border: 1px solid var(--GlobalInputGray);
  border-radius: 8px;
  padding-left: 16px;
  font-size: 20px;
}

.InputFieldError {
  border: 1px solid var(--GlobalErrorRed);
}

.InputField::placeholder {
  font-weight: 400;
  line-height: 120%;
  color: var(--GlobalInputGray);
}

.InputField:focus {
  outline: none;
  border: 1px solid var(--GlobalLightBlue);
} 

.InputFieldIcon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  pointer-events: none;
}

.InputFieldIcon.clickable {
  pointer-events: auto;
  cursor: pointer;
}

.InputErrorText {
  color: var(--GlobalErrorRed);
  text-align: center;
  display: block;
  min-height: 20px;
}

/** Buttons*/

.ButtonBlueFilled {
  border-radius: 8px;
  background-color: var(--GlobalBlue);
  color: var(--GlobalWhite);
  padding: 12px 16px 12px 16px;
  font-size: 21px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: 100ms;
}

.ButtonWhiteBlueOutline {
  border-radius: 8px;
  background-color: var(--GlobalWhite);
  padding: 12px 16px 12px 16px;
  font-size: 21px;
  font-weight: 700;
  border: 1px solid var(--GlobalBlue);
  color: var(--GlobalBlue);
  cursor: pointer;
  transition: 100ms;
}

.ButtonDarkBlueFilled {
  border-radius: 8px;
  background-color: var(--GlobalDarkblue);
  color: var(--GlobalWhite);
  padding: 12px 16px 12px 16px;
  font-size: 21px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: 100ms;
}

.ButtonWhiteDarkBlueOutline {
  border-radius: 8px;
  background-color: var(--GlobalWhite);
  padding: 12px 16px 12px 16px;
  font-size: 21px;
  font-weight: 700;
  border: 1px solid var(--GlobalDarkblue);
  color: var(--GlobalDarkblue);
  cursor: pointer;
  transition: ease-in-out 100ms;
}

.ButtonBlueFilled:hover,
.ButtonBlueFilled:focus {
  background-color: var(--GlobalLightBlue);
  box-shadow: 0px 4px 4px 0px #00000040;
  outline: none;
}

.ButtonBlueFilled:active {
  background-color: var(--GlobalDarkblue);
  box-shadow: none;
}

.ButtonWhiteBlueOutline:hover,
.ButtonWhiteBlueOutline:focus {
  border: 1px solid var(--GlobalLightBlue);
  outline: none;
  color: var(--GlobalLightBlue);
  box-shadow: 0px 4px 4px 0px #00000040;
}

.ButtonDarkBlueFilled:hover,
.ButtonDarkBlueFilled:focus {
  outline: none;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.ButtonBlueFilled:disabled {
  opacity: 0.5;
  cursor: not-allowed; 
  pointer-events: none;
}



/*
 * Component: Circle Badge (Avatar/Initials)
 * Purpose: Round badge to display initials or short labels.
 * Layout: Circle (48x48, radius 50%), centered bold text.
 * Colors: Outline --GlobalBlue, text --GlobalLightBlue, background --GlobalWhite.
 */
.circleBadge {
  border: solid 3px var(--GlobalBlue);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--GlobalLightBlue);
  background-color: var(--GlobalWhite);
}

/*
 * State: Hover for .circleBadge
 * Effect: Applies light gray background via --CircleBadgeGray.
 */
.circleBadge:hover {
  background-color: var(--CircleBadgeGray);
}

/* THIS is the round initials circle (JS uses .badge) */
.badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--GlobalWhite);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
  color: var(--GlobalWhite);

  flex: none;
}

/* Utility Classes */

/*
 * Utility: Screen Reader Only
 * Purpose: Hides element visually but keeps it accessible for screen readers
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
}


/* =========================
   Toast Notification
   ========================= */

.Toast {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--GlobalBlue);
  color: var(--GlobalWhite);
  padding: 16px 24px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 400;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  transition: bottom 300ms ease-in-out;
  z-index: 1000;
}

.ToastVisible {
  bottom: 50%;
  transform: translate(-50%, 50%);
}


/* =========================
   Auth Pages Layout (Login / Sign-up)
   ========================= */

.contentWrapper {
  position: relative;
  height: 100vh;
  display: flex;
  margin: 0 auto; 
  flex-direction: column;
  max-width: 1440px;
}

.loginMainContainer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginCard {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--GlobalWhite);
  border-radius: 30px;
  padding: 48px 115px;
  gap: 32px;
  box-shadow: 0px 0px 14px 3px #0000000a;
}

.loginInputs {
  width: 100%;
  max-width: 422px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loginFooter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;
  width: auto;
  text-align: center;
  line-height: 120%;
  font-size: 16px;
}

.loginFooterLink {
  padding: 12px;
  color: var(--GlobalBorderColorGray);
  cursor: pointer;
  text-decoration: none;
  transition: 100ms;
}

.loginFooterLink:hover {
  color: var(--GlobalLightBlue);
}

.displayFLEX{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.paddingBottom5{
    padding-bottom: 5px;
}

.paddingBottom15{
    padding-bottom: 15px;
}

.paddingTop15{
    padding-top: 15px;
}

.displayNone {
    display: none !important;
}

.rotate5deg {
    transform: rotate(5deg);
}

.marginleft10px{
    margin-left: 10px;
}

/* =========================
   Landscape-Sperre (Mobile)
   ========================= */

.landscapeOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--GlobalBackgroundWhite);
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 24px;
}

.landscapeOverlay img {
  width: 64px;
  height: 78px;
}

.landscapeOverlay p {
  font-size: 20px;
  color: var(--GlobalDarkBlue);
}

@media (max-height: 500px) and (orientation: landscape) {
  .landscapeOverlay {
    display: flex;
  }
}

/* =========================
   MOBILE RESPONSIVE (Global)
   ========================= */
@media (max-width: 768px) {
  /* Remove sidebar offset on mobile */
  .main {
    left: 0;
    width: 100vw;
    top: 80px;
    height: calc(100vh - 80px);
    padding-bottom: 100px; /* Space for bottom nav */
  }
}