/* ====================================================================
  CSS INDEX
  1) Fonts
  2) Theme tokens (CSS variables)
  3) Base / reset
  4) Header (top nav)
  5) Alerts / Overlay
  6) Left sidebar (main nav)
  7) Right sidebar (user menu)
  8) Right sidebare - Login UI (sidebar + embedded/page variants)
  9) Theme switch
  10) Cookie banner + preferences
  11) Footer


  7) Content + cards
  10) Buttons + links
  14) Page helpers + utilities (leagues, grids, pills)
  16) Auth pages (register / forgot)
  17) Autofill + form fixes
  18) Responsive (mobile)
  ==================================================================== */


/* ====================================================================
   1) Fonts
   ==================================================================== */

@charset "utf-8";
@font-face{
    font-family: 'Open Sans';
    src: url('OpenSans-Regular.woff') format('woff'),
         url('OpenSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ====================================================================
   2) Theme tokens (CSS variables)
   ==================================================================== */
:root{
  --header-h: 50px;
  --footer-h: 48px;
  --left-w: 240px;
  --right-w: 300px;
  --blue-1: rgba(7, 105, 185, 1);
  --blue-2: rgba(5, 68, 104, 1);

  /* Light Theme */
  --main-bg: rgba(245, 246, 250, 1);
  --main-panel: rgba(255, 255, 255, 1);
  --main-text: rgba(0,0,0,0.82);
  --main-link: rgba(0,0,0,0.82);
  --main-hover-bg: rgba(0,0,0,0.52);
  --main-hover-text: rgba(0,0,0,0.52);
  --leftbar-bg: rgba(255, 255, 255, 1);
  --leftbar-border: rgb(221, 221, 221);
  --leftbar-text: rgba(0,0,0,0.82);
  --leftbar-icon: rgba(0,0,0,0.82);
  --leftbar-hover-bg: rgba(160, 220, 255, 0.151);
  --leftbar-hover-text: rgba(0,0,0,0.82);
  --footer-bg: rgba(255, 255, 255, 1);
  --footer-text: rgb(44, 44, 44);
  --footer-hover: rgba(36, 48, 66, 1);
  --input-bg: rgba(255, 255, 255, 1);
  --input-text: rgba(0,0,0);
  --input-placeholder: rgba(128, 128, 128, 1);

  /*old to change */

  --muted: rgba(245,248,255,0.70);
  --icon-color: rgba(22, 22, 22, 1);
  --icon-background: rgba(255, 255, 255, 1);
  --icon-border: 1px solid rgba(223, 223, 223, 1);
  --panel-bg: rgba(255, 255, 255, 1);
  --panel-border: rgba(0,0,0,0.06);
  --card-bg: rgba(255, 255, 255, 1);
  --card-shadow: 0 6px 18px rgba(0,0,0,0.06);
  --hover: rgba(7,105,185,0.08);
  --footer-accept: rgba(255, 255, 255, 1);
  --footer-accept-color: rgba(18, 24, 33, 1);
  --footer-accept-border: rgba(18, 24, 33, 1);

}

/* Dark theme overrides */
html.theme-dark{
  --main-bg: rgba(15, 20, 26, 1);
  --main-panel: rgba(20, 27, 35, 1);
  --main-text: rgba(245,248,255,0.92);
  --main-link: rgba(245,248,255,0.92);
  --main-hover-bg: rgba(0,0,0,0.52);
  --main-hover-text: rgba(245,248,255,0.92);
  --leftbar-bg: rgba(20, 27, 35, 1);
  --leftbar-border: rgba(255,255,255,0.10);
  --leftbar-text: rgba(245,248,255,0.92);
  --leftbar-icon: rgba(0,0,0,0.82);
  --leftbar-hover-bg: rgba(160, 220, 255, 0.151);
  --leftbar-hover-text: rgba(245,248,255,0.92);
  --footer-bg: rgba(18, 24, 33, 1);
  --footer-text: rgba(255, 255, 255, 1);
  --footer-hover: rgba(255, 255, 255, 0.7);
  --input-bg: rgba(255, 255, 255, 1);
  --input-text: rgba(0,0,0);
  --input-placeholder: rgba(128, 128, 128, 1);

  /*old to change */

  --muted: rgba(245,248,255,0.70);
  --icon-color: rgba(223, 223, 223, 1);
  --icon-background: rgba(51, 51, 51, 1);
  --icon-border: 1px solid rgba(70, 70, 70);
  --panel-bg: rgba(20, 27, 35, 1);
  --panel-border: rgba(255,255,255,0.10);
  --card-bg: rgba(20, 27, 35, 1);
  --card-shadow: 0 10px 24px rgba(0,0,0,0.35);
  --hover: rgba(160, 220, 255, 0.151);
  --footer-accept: rgba(35, 134, 54, 1);
  --footer-accept-color: rgba(255, 255, 255, 1);
  --footer-accept-border: rgba(46, 160, 67, 1);

}

/* ====================================================================
   3) Base / reset
   ==================================================================== */
*{
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

/* only remove bullets where you actually want no bullets */
nav ul, nav ol,
.left_sidebar ul, .right_sidebar ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

body{
  background: var(--main-bg);
  color: var(--main-text);
  /* Make sure fixed header + footer never hide content */
  padding-top: var(--header-h);
  padding-bottom: var(--footer-h);
}
input, textarea, select {
  color: var(--input-text);
  caret-color: var(--input-text);
  background: var(--input-bg);
}

/* ====================================================================
   4) Header (top nav)
   ==================================================================== */

.top_navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--blue-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 120;
  gap: 12px;
}

/* Logo */
.top_navbar .brand{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.top_navbar .brand_link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.top_navbar .brand_logo{
  height: clamp(26px, 4.5vw, 34px);
  width: auto;
  max-width: clamp(120px, 40vw, 220px);
  object-fit: contain;
}

/* Header user avatar (shown when logged in) */
.top_navbar .user_nav_avatar{
  height: clamp(28px, 5vw, 36px);
  width: clamp(28px, 5vw, 36px);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.top_navbar .left_controls{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
}

.top_navbar .right_controls{
  display: flex;
  align-items: center;
  gap: 18px;
}

.iconbtn{
  color: rgba(244, 251, 255, 1);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.iconbtn:hover{ color: rgba(162, 236, 255, 1); }

/* Mail icon + badge (badge overlaps and icon width stays stable) */
.mailwrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* fixed so it never jumps */
  height: 34px;
}

.mailwrap .fa-envelope{
  font-size: 22px;
}

.dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-height: 20px;
  min-width: 20px;
  background-color: tomato;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.hamburger_left{
  width: 34px;
  height: 34px;
  padding: 0;
}

.hamburger_left .hb{
  width: 18px;
  height: 2px;
  background: currentColor;
  display: block;
  border-radius: 99px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.hamburger_left .hb + .hb{ margin-top: 4px; }
.hamburger_left.is-open .hb:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger_left.is-open .hb:nth-child(2){ opacity: 0; }
.hamburger_left.is-open .hb:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ====================================================================
   5) Overlay
   ==================================================================== */

#overlay{
  position: fixed;
  display: none;
  inset: 0;
  z-index: 125;
  background: rgba(0, 0, 0, 0.4);
}

#overlay.show{ display: block; }

.layout{
  display: flex;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
}

/* ====================================================================
   6) Left sidebar (main nav)
   ==================================================================== */

.left_sidebar{
  width: var(--left-w);
  background: var(--leftbar-bg);
  border-right: 1px solid var(--leftbar-border);
  padding: 14px 0;
}

.left_sidebar h4{
  padding: 0 18px 10px;
  color: var(--leftbar-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.left_sidebar a{
  display: block;
  padding: 8px 14px;
  color: var(--leftbar-text);
  font-size: 14px;
}

.left_sidebar a:hover{
  background: var(--leftbar-hover-bg);
  color: var(--leftbar-hover-text);
}

/* ====================================================================
   7) Right sidebar (user menu)
   ==================================================================== */

/*yes*/
.right_sidebar{
  background: var(--blue-2);
  position: fixed;
  z-index: 130; /* must sit above footer */
  top: var(--header-h);
  right: calc(var(--right-w) * -1);
  width: var(--right-w);
  height: calc(100vh - var(--header-h));
  padding: 20px 0;
  transition: right 0.25s ease;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/*yes*/
.right_sidebar.open{ right: 0; }

/*yes*/
.right_sidebar .profile{
  margin-bottom: 30px;
  text-align: center;
}

/*yes*/
.right_sidebar .profile img{
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}

/*yes*/
.right_sidebar .profile h3{
  color: rgba(255, 255, 255, 1);
  margin: 10px 0 5px;
  font-size: 16px;
}

/*yes*/
.right_sidebar .profile p{
  color: rgba(206, 240, 253, 1);
  font-size: 12px;
}

/*yes*/
.right_sidebar ul li a{
  display: block;
  width: 100%;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(16, 85, 141, 1);
  color: rgba(241, 237, 237, 1);
  font-size: 14px;
  position: relative;
  overflow-wrap: anywhere;
}


/*yes*/
.right_sidebar ul li a .icon{
  color: rgba(222, 228, 236, 1);
  width: 30px;
  display: inline-block;
  background: transparent !important;
}

/*yes*/
.right_sidebar ul li a:hover,
.right_sidebar ul li a.active{
  color: rgba(12, 125, 177, 1);
  background: rgba(255, 255, 255, 1);
  border-right: 2px solid var(--blue-2);
}

/*yes*/
.right_sidebar ul li a:hover .icon,
.right_sidebar ul li a.active .icon{ color: rgba(12, 125, 177, 1); }

/* ====================================================================
   8) Right sidebar - Login UI (sidebar + embedded/page variants)
   ==================================================================== */

.login_notice{
  margin: 0 20px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  color: rgba(255, 255, 255, 1);
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.12);
}

.login_profile_icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 6px auto 10px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255, 255, 255, 1);
  font-size: 22px;
}

/* Make login look like the site theme (glassy card on dark sidebar) */
.login_card{
  margin: 0 18px 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 12px;
}

.login_card .field span{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,1);
  margin-bottom: 6px;
}

.login_card input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 1);
  padding: 2px 0;
}

.login_card input::placeholder{ color: rgba(230,250,255,0.65); }

.login_input_wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 10px;
}

.login_input_wrap i{
  color: rgba(230,250,255,0.92);
  width: 18px;
  min-width: 18px;
  text-align: center;
  opacity: 0.9;
}
.login_input_wrap:focus-within{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.pw_toggle{
  border: 0;
  background: transparent;
  color: rgba(230,250,255,0.85);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
}
.pw_toggle:hover{ background: rgba(255,255,255,0.10); }


.login_row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.btn_primary{
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 11px 12px;
  font-weight: 800;
  cursor: pointer;
  background: var(--blue-2);
  color: rgba(255, 255, 255, 1);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn_primary:hover{ filter: brightness(0.98); }
/* Keep the login panel button as the original white style for contrast */
.login_card .btn_primary{
  border: 0;
  background: rgba(255, 255, 255, 1);
  color: var(--blue-2);
}

.login_help{
  font-size: 12px;
  color: rgba(230,250,255,0.95);
  line-height: 1.4;
  opacity: 0.95;
}

/*
  Custom checkbox so the tick is visible on mobile browsers.
  Some mobile UAs render a very faint/white checkmark that can disappear.
*/
.remember{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(230,250,255,0.95);
  font-size: 13px;
  user-select: none;
}
.remember input{
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.22);
  display: grid;
  place-content: center;
}
.remember input::before{
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 60ms ease-out;
  will-change: transform;
  background: rgba(255, 255, 255, 1);
  /* check shape */
  clip-path: polygon(14% 54%, 0 68%, 38% 100%, 100% 22%, 85% 8%, 37% 72%);
}
.remember input:checked::before{ transform: scale(1); }
.remember input:disabled{ opacity: 0.55; cursor: not-allowed; }

.login_link{
  color: rgba(230,250,255,0.9);
  font-size: 12px;
  opacity: 0.9;
  text-decoration: underline;
}
.login_link:hover{ opacity: 1; }

.consent_note{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.16);
  color: rgba(230,250,255,0.95);
  font-size: 12px;
  line-height: 1.35;
}
.consent_note a{ color: rgba(255, 255, 255, 1); text-decoration: underline; }

/* ====================================================================
   9) Theme switch
   ==================================================================== */

.theme_switch{
  padding: 0 16px 14px;
}
.theme_btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(230,250,255,0.92);
  cursor: pointer;
}
.theme_btn:hover{ background: rgba(255,255,255,0.14); }
.theme_btn_icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
}
.theme_btn_text{ font-size: 14px; font-weight: 700; }

/* ====================================================================
   10) Cookie banner + preferences
   ==================================================================== */

.cookie_banner{
  position: fixed;
  left: 0;
  right: 0;
  /* sit above footer so footer links remain clickable */
  bottom: calc(var(--footer-h) + 10px);
  z-index: 200;
  display: none;
  padding: 12px;
}
.cookie_banner.show{ display: block; }

.cookie_banner_inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,0.86);
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255,255,255,0.14);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}

.cookie_banner_title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.cookie_banner_text a{
  color:rgba(255, 255, 255, 1);
  text-decoration: underline; }

.cookie_banner_text{
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.95;
}

.cookie_banner_actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn_cookie{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: rgba(255, 255, 255, 1);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
}
.btn_cookie--accept{
  background: var(--footer-accept);
  border-color: var(--footer-accept-border);
  color: var(--footer-accept-color);
}
.btn_cookie:hover{ filter: brightness(1.20); }

/* ====================================================================
   11) Footer
   ==================================================================== */

.footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  background: var(--footer-bg);
  color: var(--footer-text);
  transition: color 0.3s ease;
  border-top: 1px solid var(--leftbar-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  z-index: 20;
}

.footer a {
  color: var(--footer-text);
  font-weight: bold;
}

.footer a:hover {
    color: var(--footer-hover);
}
.footer_text{
  font-size: 13px;
  color: var(--footer-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer_text a{
  color: var(--footer-text);
  text-decoration: underline;
}
.footer_text a:hover{ color: var(--footer-hover); }
.footer_sep{ opacity: 0.6; }





/* ====================================================================
   7) Content + cards
   ==================================================================== */

.layout{
  display: flex;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
}

.content{
  flex: 1;
  padding: 18px;
  max-width: 100%;
}

.card{
  background: var(--card-bg);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--card-shadow);
}
.card ul{
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.profile_icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 6px auto 10px;
  background: var(--icon-background);
  border: 1px solid var(--icon-border);
  color: var(--icon-color);
  font-size: 22px;
}
.input_wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 10px;
}

.input_wrap i{
  color: var(--text);
  width: 18px;
  min-width: 18px;
  text-align: center;
  opacity: 0.9;
}

.input_wrap:focus-within{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

/* ====================================================================
   10) Buttons + links
   ==================================================================== */

/* Make link-style actions on light pages visible */
.action_link{
  color: var(--blue-2);
  font-weight: 700;
  text-decoration: underline;
}

/* ====================================================================
   14) Page helpers + utilities
   ==================================================================== */

.page_head{
  padding: 18px 18px 0;
}
.page_head h1{
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

/* Secondary header used on /leagues to show the selected league */
.page_subhead{
  /* Sticks under the fixed top header while scrolling */
  position: sticky;
  top: var(--header-h);
  z-index: 60;

  margin: 10px 0 18px;
  padding: 14px 18px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page_subhead h2{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.page_subhead_meta{ display:flex; align-items:center; gap:10px; }
.pill{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

.muted{ color: var(--muted); }

/* Leagues page helpers */
.league_tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.league_tabs .tab{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
.league_tabs .tab.active{
  background: var(--blue-2);
}
.league_tabs .tab.disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.league_quickgrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.league_quick{
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(0,0,0,0.04);
}
.league_quick:hover{ background: rgba(0,0,0,0.07); }
.league_quick_abbr{ font-weight: 900; color: var(--text); }
.league_quick_name{ color: var(--muted); font-weight: 700; }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 10px 0px 18px;
}


/* Cookie preference button on light cards */
.btn_cookie--light{
  color: rgba(17, 17, 17, 1);
  border-color: rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.02);
}
.btn_cookie--light:hover{ background: rgba(0,0,0,0.05); }

/* Fix "Open cookie preferences" button in dark mode */
html.theme-dark .btn_cookie--light{
  color: rgba(245,248,255,0.92);
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
}
html.theme-dark .btn_cookie--light:hover{
  background: rgba(255,255,255,0.10);
}


/* Animated hamburger (mobile left menu) */
.hamburger_left{
  width: 34px;
  height: 34px;
  padding: 0;
}
.hamburger_left .hb{
  width: 18px;
  height: 2px;
  background: currentColor;
  display: block;
  border-radius: 99px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.hamburger_left .hb + .hb{ margin-top: 4px; }
.hamburger_left.is-open .hb:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger_left.is-open .hb:nth-child(2){ opacity: 0; }
.hamburger_left.is-open .hb:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* ====================================================================
   15) Theme switch
   ==================================================================== */

.theme_switch{
  padding: 0 16px 14px;
}
.theme_btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(230,250,255,0.92);
  cursor: pointer;
}
.theme_btn:hover{ background: rgba(255,255,255,0.14); }
.theme_btn_icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
}
.theme_btn_text{ font-size: 14px; font-weight: 700; }

/* ====================================================================
   16) Auth pages (register / forgot password)
   ==================================================================== */


.auth_card{
  max-width: 480px;
  margin: 14px auto;
  padding: 16px;
}

/* Subtitle text under the page title */
.auth_subtitle,
.page_head .auth_subtitle{
  margin-top: 6px;
  opacity: 0.85;
  line-height: 1.4;
  font-size: 0.95rem;
}

/* Notices (success / error) */
.auth_notice{
  max-width: 480px;
  margin: 14px auto;
  padding: 12px 14px;
  border-left: 4px solid currentColor;
}
.auth_notice.error{
  background: rgba(200,0,0,0.06);
}
.auth_notice.success{
  background: rgba(0,140,60,0.08);
}

.auth_footer{
  margin-top: 12px;
  font-size: 0.95rem;
  opacity: 0.85;
}
.auth_footer a{ font-weight: 600; }

.auth_links{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.auth_links a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(230,250,255,0.95);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
.auth_links a:visited{ color: rgba(230,250,255,0.95); }
.auth_links a:hover{ background: rgba(255,255,255,0.12); }
.auth_links i{
  width: 20px;
  text-align: center;
  opacity: 0.95;
}

/* ====================================================================
   16b) Auth form UI (Register + Profile) — theme-aware and separate from login
   ==================================================================== */

/*
  These styles intentionally do NOT touch the sidebar login UI.
  They are used by:
    - register.php (auth_form--page)
    - profile.php embedded panels (auth_form--embedded)
*/

.auth_form{
  max-width: 480px;
  margin: 14px auto;
  padding: 14px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--card-shadow);
  display: grid;
  gap: 12px;
}

.auth_form--embedded{
  max-width: 520px;
  margin: 0;
}

.auth_form .field span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.auth_input_wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 10px 10px;
}

.auth_input_wrap i{
  color: var(--muted);
  width: 18px;
  min-width: 18px;
  text-align: center;
  opacity: 0.95;
}

.auth_form input,
.auth_form textarea,
.auth_form select{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--input-text);
  padding: 2px 0;
}

.auth_form input::placeholder,
.auth_form textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.auth_input_wrap:focus-within{
  box-shadow: 0 0 0 3px rgba(7,105,185,0.18);
  transform: translateY(-1px);
}

/* Make the footer line under register blend with theme */
.auth_form .auth_footer{
  color: var(--muted);
}
.auth_form .auth_footer a{
  color: var(--blue-2);
}

/* ====================================================================
   17) Autofill + form fixes
   ==================================================================== */


/* =========================================
   STRONG Autofill Override (Login fields)
   ========================================= */

.login_card input:-webkit-autofill,
.login_card input:-webkit-autofill:hover,
.login_card input:-webkit-autofill:focus,
.login_card .input_wrap input:-webkit-autofill,
.login_card .input_wrap input:-webkit-autofill:hover,
.login_card .input_wrap input:-webkit-autofill:focus,
.login_card .input_wrap input:-webkit-autofill:active {
color: rgba(255, 255, 255, 1) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 1) !important;
caret-color: rgba(255, 255, 255, 1) !important;

  /* Paint over Chrome's autofill background */
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;

  border-radius: 14px !important;
  transition: background-color 9999s ease-out 0s;
}

/* =========================================
   GLOBAL AUTOFILL FIX (ALL INPUTS)
   ========================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
color: var(--input-text) !important;
-webkit-text-fill-color: var(--input-text) !important;
caret-color: var(--input-text) !important;

/* Keep your “clear / fallback” look */
-webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
}
input[autocomplete="one-time-code"]:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: currentColor !important;
}
input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -moz-text-fill-color: var(--input-text) !important;
}


/* =========================================
   FIX: "Remember me" checkbox visibility (desktop + mobile)
   Force native checkbox rendering so the box + tick always show.
   Scoped to login cards so it won't affect other form checkboxes.
   ========================================= */
.login_card .remember input[type="checkbox"]{
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;

  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;

  /* Ensure it stays visible on glass backgrounds */
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.75) !important;

  accent-color: rgba(255, 255, 255, 1); /* checked fill/tick contrast */
}



/* ====================================================================
   18) Responsive (mobile)
   ==================================================================== */

.hamburger_left{ display: none; }

@media (max-width: 820px){
  body{ padding-bottom: calc(var(--footer-h) + 6px); }
  .layout{ display: block; }

  /* left menu becomes off-canvas */
  .hamburger_left{ display: inline-block; }
  .left_sidebar{
    position: fixed;
    top: var(--header-h);
    left: calc(var(--left-w) * -1);
    height: calc(100vh - var(--header-h) - var(--footer-h));  
    width: var(--left-w);
    z-index: 128;
    transition: left 0.25s ease;
    box-shadow: 8px 0 18px rgba(0,0,0,0.12);
    overflow-y: auto;              /* allow vertical scrolling */
    -webkit-overflow-scrolling: touch;
  }
  .left_sidebar.open{ left: 0; }
  .left_sidebar .menu, 
  .left_sidebar ul {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content{ padding: 14px; }
  .right_sidebar{
    width: min(var(--right-w), 90vw);
    right: calc(min(var(--right-w), 90vw) * -1);
  }
  .grid2{ grid-template-columns: 1fr; }
  .alert_stack--banner{
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    transform: none;
  }

  .alert_stack--toast{
    right: 12px;
    left: auto;
    width: auto;
  }
}