/* ============================================================
   BASE
   ============================================================ */

body,
html {
  font-size: 16px;
}

body {
  background-color: var(--bg-light-gray);
}


/* ============================================================
   CSS CUSTOM PROPERTIES — LIGHT THEME (default)
   ============================================================ */

:root,
[data-theme=light] {

  /* Brand */
  --brand-color: #0089ff;

  /* Pink */
  --pink-900: #5b1e34;
  --pink-800: #702440;
  --pink-700: #97264f;
  --pink-600: #d2326d;
  --pink-500: #f2508b;
  --pink-400: #f46b9e;
  --pink-300: #f584ae;
  --pink-200: #fab9d1;
  --pink-100: #fcdce8;
  --pink-50:  #feedf3;

  /* Blue */
  --blue-900: #1a4469;
  --blue-800: #154875;
  --blue-700: #1366ae;
  --blue-600: #1579d0;
  --blue-500: #2490ef;
  --blue-400: #50a6f2;
  --blue-300: #7cbcf5;
  --blue-200: #a7d3f9;
  --blue-100: #d3e9fc;
  --blue-50:  #f0f8fe;

  /* Cyan */
  --cyan-900: #006464;
  --cyan-800: #007272;
  --cyan-700: #008b8b;
  --cyan-600: #02c5c5;
  --cyan-500: #0ff;
  --cyan-400: #2ef8f8;
  --cyan-300: #6efcfc;
  --cyan-200: #a0f8f8;
  --cyan-100: #c7fcfc;
  --cyan-50:  #dafafa;

  /* Green */
  --green-900: #2d401d;
  --green-800: #44622a;
  --green-700: #518b21;
  --green-600: #68ab30;
  --green-500: #8ccf54;
  --green-400: #a5d97a;
  --green-300: #bce39b;
  --green-200: #d2ecbd;
  --green-100: #e9f6de;
  --green-50:  #f4faee;

  /* Dark Green */
  --dark-green-900: #1f3e2b;
  --dark-green-800: #29593b;
  --dark-green-700: #286840;
  --dark-green-600: #2e844e;
  --dark-green-500: #2f9d58;
  --dark-green-400: #59b179;
  --dark-green-300: #82c49b;
  --dark-green-200: #acd8bc;
  --dark-green-100: #dfeee5;
  --dark-green-50:  #eaf5ee;

  /* Gray */
  --gray-900: #1f272e;
  --gray-800: #333c44;
  --gray-700: #505a62;
  --gray-600: #687178;
  --gray-500: #98a1a9;
  --gray-400: #c0c6cc;
  --gray-300: #dce0e3;
  --gray-200: #ebeef0;
  --gray-100: #f4f5f6;

  /* Red */
  --red-900: #631d1d;
  --red-800: #802121;
  --red-700: #9b2c2c;
  --red-600: #c53030;
  --red-500: #e24c4c;
  --red-400: #ec645e;
  --red-300: #fca4a4;
  --red-200: #fcc8c8;
  --red-100: #ffecec;
  --red-50:  #fff5f5;

  /* Yellow */
  --yellow-900: #5f370e;
  --yellow-800: #744210;
  --yellow-700: #975a16;
  --yellow-600: #b7791f;
  --yellow-500: #d69e2e;
  --yellow-400: #ecb64b;
  --yellow-300: #f6c35e;
  --yellow-200: #fad489;
  --yellow-100: #fee9bf;
  --yellow-50:  #fef4e2;

  /* Orange */
  --orange-900: #653019;
  --orange-800: #7b3a1e;
  --orange-700: #9c4621;
  --orange-600: #cb5a2a;
  --orange-500: #f8814f;
  --orange-400: #f9966c;
  --orange-300: #fdae8c;
  --orange-200: #fecdb8;
  --orange-100: #ffeae1;
  --orange-50:  #fff5f0;

  /* Purple */
  --purple-900: #343360;
  --purple-800: #45438f;
  --purple-700: #4946bf;
  --purple-600: #6461d6;
  --purple-500: #8684ff;
  --purple-400: #9897f7;
  --purple-300: #b9b8fa;
  --purple-200: #dad9f7;
  --purple-100: #eaeafb;
  --purple-50:  #f2f2fd;

  /* Spacing — padding */
  --padding-xs:  5px;
  --padding-sm:  10px;
  --padding-md:  15px;
  --padding-lg:  20px;
  --padding-xl:  30px;
  --padding-2xl: 40px;

  /* Spacing — margin */
  --margin-xs:  5px;
  --margin-sm:  8px;
  --margin-md:  15px;
  --margin-lg:  20px;
  --margin-xl:  30px;
  --margin-2xl: 40px;

  /* Typography */
  --font-stack: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
                "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
                "Droid Sans", "Helvetica Neue", sans-serif;

  /* Shadows */
  --shadow-xs:   rgba(0,0,0,0.05) 0px 0.5px 0px 0px,
                 rgba(0,0,0,0.08) 0px 0px 0px 1px,
                 rgba(0,0,0,0.05) 0px 2px 4px 0px;
  --shadow-sm:   0px 1px 2px rgba(25,39,52,0.05), 0px 0px 4px rgba(25,39,52,0.1);
  --shadow-base: 0px 4px 8px rgba(25,39,52,0.06), 0px 0px 4px rgba(25,39,52,0.12);
  --shadow-md:   0px 8px 14px rgba(25,39,52,0.08), 0px 2px 6px rgba(25,39,52,0.04);
  --shadow-lg:   0px 18px 22px rgba(25,39,52,0.1),
                 0px 1px 10px rgba(0,0,0,0.06),
                 0px 0.5px 5px rgba(25,39,52,0.04);
  --modal-shadow: var(--shadow-md);
  --card-shadow:  var(--shadow-sm);
  --btn-shadow:   var(--shadow-xs);

  /* Semantic text colours */
  --text-muted:  var(--gray-600);
  --text-light:  var(--gray-800);
  --text-color:  var(--gray-900);
  --heading-color: var(--gray-900);

  /* Icon */
  --icon-fill:    transparent;
  --icon-fill-bg: var(--fg-color);
  --icon-stroke:  var(--gray-900);

  /* Background colour helpers */
  --bg-blue:       var(--blue-100);
  --bg-light-blue: var(--blue-50);
  --bg-dark-blue:  var(--blue-300);
  --bg-green:      var(--dark-green-50);
  --bg-yellow:     var(--yellow-50);
  --bg-orange:     var(--orange-50);
  --bg-red:        var(--red-50);
  --bg-gray:       var(--gray-200);
  --bg-light-gray: var(--gray-100);
  --bg-purple:     var(--purple-100);
  --bg-pink:       var(--pink-50);
  --bg-cyan:       var(--cyan-50);

  /* Text-on-background helpers */
  --text-on-light-blue: var(--blue-500);
  --text-on-dark-blue:  var(--blue-700);
  --text-on-blue:       var(--blue-600);
  --text-on-green:      var(--dark-green-500);
  --text-on-yellow:     var(--yellow-500);
  --text-on-orange:     var(--orange-500);
  --text-on-red:        var(--red-500);
  --text-on-gray:       var(--gray-600);
  --text-on-light-gray: var(--gray-800);
  --text-on-purple:     var(--purple-500);
  --text-on-pink:       var(--pink-500);
  --text-on-cyan:       var(--cyan-600);

  /* Alert colours */
  --alert-text-danger:  var(--red-600);
  --alert-text-warning: var(--yellow-700);
  --alert-text-info:    var(--blue-700);
  --alert-text-success: var(--green-700);
  --alert-bg-danger:    var(--red-50);
  --alert-bg-warning:   var(--yellow-50);
  --alert-bg-info:      var(--blue-50);
  --alert-bg-success:   var(--green-50);

  /* Surface colours */
  --bg-color:    var(--gray-50);
  --fg-color:    #fff;
  --navbar-bg:   #fff;
  --fg-hover-color: var(--gray-100);
  --card-bg:     var(--fg-color);

  /* Control / input */
  --disabled-text-color:  var(--gray-700);
  --disabled-control-bg:  var(--gray-50);
  --control-bg:           var(--gray-100);
  --control-bg-on-gray:   var(--gray-200);
  --awesomebar-focus-bg:  var(--fg-color);
  --awesomplete-hover-bg: var(--control-bg);

  /* Overlays */
  --modal-bg:   #fff;
  --popover-bg: #fff;

  /* Sidebar / scrollbar */
  --sidebar-select-color:  var(--gray-200);
  --scrollbar-thumb-color: var(--gray-400);
  --scrollbar-track-color: var(--gray-200);

  /* Borders & highlights */
  --shadow-inset:        inset 0px -1px 0px var(--gray-300);
  --border-color:        var(--gray-100);
  --dark-border-color:   var(--gray-300);
  --table-border-color:  var(--gray-200);
  --highlight-color:     var(--gray-50);
  --yellow-highlight-color: var(--yellow-50);

  /* Code blocks */
  --code-block-bg:   var(--gray-900);
  --code-block-text: var(--gray-400);

  /* Border radius */
  --border-radius-sm:   4px;
  --border-radius:      6px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-full: 999px;

  /* Misc UI */
  --primary-color:  #2490ef;
  --btn-height:     28px;

  /* Font sizes */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-md:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  22px;
  --text-bold: 500;

  /* Layout */
  --navbar-height:      60px;
  --page-head-height:   75px;
  --page-bottom-margin: 60px;

  /* Appreciation / criticism */
  --appreciation-color: var(--dark-green-600);
  --appreciation-bg:    var(--dark-green-100);
  --criticism-color:    var(--red-600);
  --criticism-bg:       var(--red-100);
  --error-bg:           var(--red-50);

  /* Inputs */
  --input-height:      calc(1.5em + 0.75rem + 2px);
  --input-disabled-bg: var(--gray-200);

  /* Checkbox */
  --checkbox-right-margin: var(--margin-xs);
  --checkbox-size:         14px;
  --checkbox-focus-shadow: 0 0 0 2px var(--gray-300);

  /* Timeline */
  --timeline-item-icon-size:    34px;
  --timeline-item-left-margin:  var(--margin-xl);
  --timeline-item-bottom-margin: var(--margin-sm);
  --timeline-content-max-width: 700px;
  --timeline-left-padding:      calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);

  /* Mentions */
  --user-mention-bg-color:  var(--fg-color);
  --group-mention-bg-color: var(--bg-purple);

  /* Skeleton */
  --skeleton-bg: var(--gray-100);

  /* SVG arrows */
  --right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --left-arrow-svg:  url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
}


/* ============================================================
   SHARED ACROSS ALL THEMES
   ============================================================ */

:root,
[data-theme=dark],
[data-theme=light] {
  --gray-50:      #f9fafa;
  --toast-bg:     var(--modal-bg);
  --error-border: var(--red-400);
}


/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme=dark] {

  /* Gray scale (inverted) */
  --gray-100: #f7fafc;
  --gray-200: #edf2f7;
  --gray-300: #c9d0d6;
  --gray-400: #7a838c;
  --gray-500: #575e66;
  --gray-600: #434a52;
  --gray-700: #242a30;
  --gray-800: #1c2126;
  --gray-900: #161a1f;

  /* Text */
  --text-muted:    var(--gray-400);
  --text-light:    var(--gray-300);
  --text-color:    var(--gray-50);
  --heading-color: var(--gray-50);

  /* Icons */
  --icon-fill:   transparent;
  --icon-stroke: var(--gray-300);

  /* Errors */
  --error-bg: var(--red-70);

  /* Surfaces */
  --bg-color:       var(--gray-900);
  --fg-color:       var(--gray-800);
  --navbar-bg:      var(--gray-800);
  --fg-hover-color: var(--gray-700);
  --card-bg:        var(--gray-800);

  /* Controls */
  --disabled-text-color:  var(--gray-400);
  --disabled-control-bg:  var(--gray-700);
  --control-bg:           var(--gray-700);
  --control-bg-on-gray:   var(--gray-800);
  --awesomebar-focus-bg:  var(--control-bg);
  --awesomplete-hover-bg: var(--gray-700);

  /* Overlays */
  --modal-bg:   var(--gray-700);
  --popover-bg: var(--bg-color);

  /* Background helpers */
  --bg-blue:       var(--blue-600);
  --bg-light-blue: var(--blue-400);
  --bg-dark-blue:  var(--blue-900);
  --bg-green:      var(--dark-green-500);
  --bg-yellow:     var(--yellow-500);
  --bg-orange:     var(--orange-500);
  --bg-red:        var(--red-500);
  --bg-gray:       var(--gray-600);
  --bg-light-gray: var(--gray-700);
  --bg-purple:     var(--purple-600);

  /* Text-on-background helpers */
  --text-on-blue:       var(--blue-50);
  --text-on-light-blue: var(--blue-100);
  --text-on-dark-blue:  var(--blue-300);
  --text-on-green:      var(--dark-green-50);
  --text-on-yellow:     var(--yellow-50);
  --text-on-orange:     var(--orange-100);
  --text-on-red:        var(--red-50);
  --text-on-gray:       var(--gray-300);
  --text-on-light-gray: var(--gray-100);
  --text-on-purple:     var(--purple-100);

  /* Alert colours */
  --alert-text-danger:  var(--red-300);
  --alert-text-warning: var(--yellow-300);
  --alert-text-info:    var(--blue-300);
  --alert-text-success: var(--green-300);
  --alert-bg-danger:    var(--red-900);
  --alert-bg-warning:   var(--yellow-900);
  --alert-bg-info:      var(--blue-900);
  --alert-bg-success:   var(--green-900);

  /* Sidebar / scrollbar */
  --sidebar-select-color:  var(--gray-800);
  --scrollbar-thumb-color: var(--gray-600);
  --scrollbar-track-color: var(--gray-700);

  /* Borders & highlights */
  --shadow-inset:           var(--fg-color);
  --border-color:           var(--gray-700);
  --dark-border-color:      var(--gray-600);
  --table-border-color:     var(--gray-600);
  --highlight-color:        var(--gray-700);
  --yellow-highlight-color: var(--yellow-700);

  /* Inputs */
  --input-disabled-bg: none;

  /* Checkbox */
  --checkbox-focus-shadow: 0 0 0 2px var(--gray-600);

  color-scheme: dark;

  /* Skeleton */
  --skeleton-bg: var(--gray-800);

  /* SVG arrows */
  --right-arrow-svg: url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --left-arrow-svg:  url("data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
}


/* ============================================================
   DARK THEME — COMPONENT OVERRIDES
   ============================================================ */

[data-theme=dark] .frappe-card .btn-default {
  background-color: var(--bg-color);
}

[data-theme=dark] .frappe-card .btn-default:hover {
  background-color: var(--fg-hover-color);
}

[data-theme=dark] .form-in-grid,
[data-theme=dark] .modal {
  --control-bg:   var(--gray-800);
  --border-color: var(--gray-600);
}

[data-theme=dark] .print-format {
  --text-color:   var(--gray-900);
  --border-color: var(--gray-100);
}

[data-theme=dark] .ql-editor {
  color: var(--text-on-gray);
}

[data-theme=dark] .ql-editor.read-mode p,
[data-theme=dark] .ql-editor.read-mode span:not(.mention),
[data-theme=dark] .ql-editor.read-mode strong,
[data-theme=dark] .ql-editor.read-mode u {
  background-color: inherit !important;
  color: inherit !important;
}

/* Charts */
[data-theme=dark] .chart-container {
  --charts-label-color:                  var(--gray-300);
  --charts-axis-line-color:              var(--gray-500);
  --charts-stroke-width:                 5px;
  --charts-dataset-circle-stroke:        #fff;
  --charts-dataset-circle-stroke-width:  var(--charts-stroke-width);
  --charts-tooltip-title:                var(--charts-label-color);
  --charts-tooltip-label:                var(--charts-label-color);
  --charts-tooltip-value:                #fff;
  --charts-tooltip-bg:                   var(--gray-900);
  --charts-legend-label:                 var(--charts-label-color);
}

[data-theme=dark] .heatmap-chart g > rect[fill="#ebedf0"] {
  fill: var(--gray-700);
}

/* Rating */
[data-theme=dark] .rating {
  --star-fill: var(--gray-500);
}

[data-theme=dark] .rating .star-hover {
  --star-fill: var(--gray-400);
}

/* Selection */
[data-theme=dark] ::-moz-selection {
  color: var(--text-color);
  background: var(--gray-500);
}

[data-theme=dark] ::selection {
  color: var(--text-color);
  background: var(--gray-500);
}


/* ============================================================
   AUTH PAGE LAYOUT
   ============================================================ */

.for-login,
.for-forgot,
.for-signup,
.for-email-login {
  padding: Max(15vh, 70px) 0;
}

.for-forgot,
.for-signup,
.for-email-login {
  display: none;
}

/* Page card */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card {
  max-width: 320px;
  margin-left: auto;
  border-radius: var(--border-radius-md);
}

@media (min-width: 576px) {
  .for-login .page-card,
  .for-forgot .page-card,
  .for-signup .page-card,
  .for-email-login .page-card {
    padding-top: 45px;
    padding-bottom: 45px;
    background-color: #fff;
    box-shadow: var(--shadow-base);
  }
}

/* Form inside page card */
.for-login .page-card form,
.for-forgot .page-card form,
.for-signup .page-card form,
.for-email-login .page-card form {
  max-width: 320px;
  margin: 0 auto;
}

.for-login .page-card form .form-group,
.for-forgot .page-card form .form-group,
.for-signup .page-card form .form-group,
.for-email-login .page-card form .form-group {
  margin-bottom: var(--margin-sm);
}

.for-login .page-card .page-card-actions,
.for-forgot .page-card .page-card-actions,
.for-signup .page-card .page-card-actions,
.for-email-login .page-card .page-card-actions {
  margin-top: var(--margin-lg);
}

/* Placeholders */
.for-login .page-card .page-card-body :-ms-input-placeholder,
.for-forgot .page-card .page-card-body :-ms-input-placeholder,
.for-signup .page-card .page-card-body :-ms-input-placeholder,
.for-email-login .page-card .page-card-body :-ms-input-placeholder {
  color: var(--text-light);
  opacity: 1;
}

.for-login .page-card .page-card-body ::-ms-input-placeholder,
.for-login .page-card .page-card-body ::placeholder,
.for-forgot .page-card .page-card-body ::-ms-input-placeholder,
.for-forgot .page-card .page-card-body ::placeholder,
.for-signup .page-card .page-card-body ::-ms-input-placeholder,
.for-signup .page-card .page-card-body ::placeholder,
.for-email-login .page-card .page-card-body ::-ms-input-placeholder,
.for-email-login .page-card .page-card-body ::placeholder {
  color: var(--text-light);
  opacity: 1;
}

/* Text inputs */
.for-login .page-card .page-card-body input[type=email],
.for-login .page-card .page-card-body input[type=password],
.for-login .page-card .page-card-body input[type=text],
.for-forgot .page-card .page-card-body input[type=email],
.for-forgot .page-card .page-card-body input[type=password],
.for-forgot .page-card .page-card-body input[type=text],
.for-signup .page-card .page-card-body input[type=email],
.for-signup .page-card .page-card-body input[type=password],
.for-signup .page-card .page-card-body input[type=text],
.for-email-login .page-card .page-card-body input[type=email],
.for-email-login .page-card .page-card-body input[type=password],
.for-email-login .page-card .page-card-body input[type=text] {
  border: none;
  color: var(--text-color);
  font-size: var(--text-base);
  background-color: var(--control-bg);
  margin-bottom: 1rem;
}

/* Invalid state */
.for-login .page-card .page-card-body.invalid input[type=email],
.for-login .page-card .page-card-body.invalid input[type=password],
.for-login .page-card .page-card-body.invalid input[type=text],
.for-forgot .page-card .page-card-body.invalid input[type=email],
.for-forgot .page-card .page-card-body.invalid input[type=password],
.for-forgot .page-card .page-card-body.invalid input[type=text],
.for-signup .page-card .page-card-body.invalid input[type=email],
.for-signup .page-card .page-card-body.invalid input[type=password],
.for-signup .page-card .page-card-body.invalid input[type=text],
.for-email-login .page-card .page-card-body.invalid input[type=email],
.for-email-login .page-card .page-card-body.invalid input[type=password],
.for-email-login .page-card .page-card-body.invalid input[type=text] {
  border: 1px solid var(--red-500);
}

/* Form label */
.for-login .page-card .page-card-body .form-label,
.for-forgot .page-card .page-card-body .form-label,
.for-signup .page-card .page-card-body .form-label,
.for-email-login .page-card .page-card-body .form-label {
  font-size: var(--text-base);
}

/* Forgot password link */
.for-login .page-card .page-card-body .forgot-password-message,
.for-forgot .page-card .page-card-body .forgot-password-message,
.for-signup .page-card .page-card-body .forgot-password-message,
.for-email-login .page-card .page-card-body .forgot-password-message {
  text-align: right;
  line-height: 1;
}

.for-login .page-card .page-card-body .forgot-password-message > *,
.for-forgot .page-card .page-card-body .forgot-password-message > *,
.for-signup .page-card .page-card-body .forgot-password-message > *,
.for-email-login .page-card .page-card-body .forgot-password-message > * {
  color: var(--text-light);
  font-size: var(--text-sm);
}

/* Field icon */
.for-login .page-card .page-card-body .field-icon,
.for-forgot .page-card .page-card-body .field-icon,
.for-signup .page-card .page-card-body .field-icon,
.for-email-login .page-card .page-card-body .field-icon {
  left: 9px;
  top: 8px;
  position: absolute;
  z-index: 2;
}

/* Email & password field wrappers */
.for-login .page-card .page-card-body .email-field,
.for-login .page-card .page-card-body .password-field,
.for-forgot .page-card .page-card-body .email-field,
.for-forgot .page-card .page-card-body .password-field,
.for-signup .page-card .page-card-body .email-field,
.for-signup .page-card .page-card-body .password-field,
.for-email-login .page-card .page-card-body .email-field,
.for-email-login .page-card .page-card-body .password-field {
  position: relative;
}

.for-login .page-card .page-card-body .email-field input,
.for-login .page-card .page-card-body .password-field input,
.for-forgot .page-card .page-card-body .email-field input,
.for-forgot .page-card .page-card-body .password-field input,
.for-signup .page-card .page-card-body .email-field input,
.for-signup .page-card .page-card-body .password-field input,
.for-email-login .page-card .page-card-body .email-field input,
.for-email-login .page-card .page-card-body .password-field input {
  padding-left: 35px;
}

/* Show/hide password toggle */
.for-login .page-card .page-card-body .email-field .toggle-password,
.for-login .page-card .page-card-body .password-field .toggle-password,
.for-forgot .page-card .page-card-body .email-field .toggle-password,
.for-forgot .page-card .page-card-body .password-field .toggle-password,
.for-signup .page-card .page-card-body .email-field .toggle-password,
.for-signup .page-card .page-card-body .password-field .toggle-password,
.for-email-login .page-card .page-card-body .email-field .toggle-password,
.for-email-login .page-card .page-card-body .password-field .toggle-password {
  right: 9px;
  top: 9px;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  font-size: 12px;
}

/* Login option buttons (OAuth, SSO, etc.) */
.for-login .page-card .page-card-body .btn-login-option,
.for-forgot .page-card .page-card-body .btn-login-option,
.for-signup .page-card .page-card-body .btn-login-option,
.for-email-login .page-card .page-card-body .btn-login-option {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-gray-700);
  background: var(--gray-100);
  box-shadow: none;
  border: none;
  display: flex;
  place-content: center;
}

.for-login .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-forgot .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-signup .page-card .page-card-body .btn-login-option.btn-salesforce i,
.for-email-login .page-card .page-card-body .btn-login-option.btn-salesforce i {
  color: var(--blue-400);
}

.for-login .page-card .page-card-body .btn-login-option img,
.for-forgot .page-card .page-card-body .btn-login-option img,
.for-signup .page-card .page-card-body .btn-login-option img,
.for-email-login .page-card .page-card-body .btn-login-option img {
  margin-right: var(--padding-xs);
}

.for-login .page-card .page-card-body .btn-login-option:hover,
.for-forgot .page-card .page-card-body .btn-login-option:hover,
.for-signup .page-card .page-card-body .btn-login-option:hover,
.for-email-login .page-card .page-card-body .btn-login-option:hover {
  border: none;
  background: var(--gray-300);
}

/* Social login section */
.for-login .page-card .page-card-body .social-logins,
.for-forgot .page-card .page-card-body .social-logins,
.for-signup .page-card .page-card-body .social-logins,
.for-email-login .page-card .page-card-body .social-logins {
  margin: var(--margin-md) 0;
  font-size: var(--text-md);
}

.for-login .page-card .page-card-body .social-logins .social-login-buttons,
.for-forgot .page-card .page-card-body .social-logins .social-login-buttons,
.for-signup .page-card .page-card-body .social-logins .social-login-buttons,
.for-email-login .page-card .page-card-body .social-logins .social-login-buttons {
  margin-top: var(--margin-md);
}

.for-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-forgot .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-signup .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
.for-email-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper {
  min-width: 50%;
  padding: 0 4px;
  margin-bottom: var(--margin-sm);
}

@media (min-width: 768px) {
  .for-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
  .for-forgot .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
  .for-signup .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper,
  .for-email-login .page-card .page-card-body .social-logins .social-login-buttons .login-button-wrapper {
    min-width: 33.33%;
  }
}

/* Login divider */
.for-login .page-card .page-card-body .login-divider,
.for-forgot .page-card .page-card-body .login-divider,
.for-signup .page-card .page-card-body .login-divider,
.for-email-login .page-card .page-card-body .login-divider {
  margin: var(--margin-md) 0;
}

/* Page card header */
.for-login .page-card-head,
.for-forgot .page-card-head,
.for-signup .page-card-head,
.for-email-login .page-card-head {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0 auto 2.5rem;
}

.for-login .page-card-head img,
.for-forgot .page-card-head img,
.for-signup .page-card-head img,
.for-email-login .page-card-head img {
  max-height: 42px;
  margin-bottom: var(--margin-lg, 30px);
}

.for-login .page-card-head h4,
.for-forgot .page-card-head h4,
.for-signup .page-card-head h4,
.for-email-login .page-card-head h4 {
  font-size: var(--text-xl);
  color: var(--text-color);
}

/* Sign-up prompt */
.for-login .sign-up-message,
.for-forgot .sign-up-message,
.for-signup .sign-up-message,
.for-email-login .sign-up-message {
  margin-top: 2rem;
  color: var(--text-light);
  font-size: var(--text-md);
}

.for-login .sign-up-message a,
.for-forgot .sign-up-message a,
.for-signup .sign-up-message a,
.for-email-login .sign-up-message a {
  font-size: var(--text-md);
  color: var(--primary);
}


/* ============================================================
   INVALID LOGIN ANIMATION
   ============================================================ */

.for-login .invalid-login,
.for-forgot .invalid-login,
.for-signup .invalid-login,
.for-email-login .invalid-login {
  -webkit-animation: wiggle 0.5s linear;
}

@-webkit-keyframes wiggle {
  0%,  100% { -webkit-transform: translateX(0); }
  8%,  41%  { -webkit-transform: translateX(-10px); }
  25%, 58%  { -webkit-transform: translateX(10px); }
  75%        { -webkit-transform: translateX(-5px); }
  92%        { -webkit-transform: translateX(5px); }
}