/* =========================================================
   QR Encrypt – Design Tokens + Light Theme
   ========================================================= */



/* ---------- Design Tokens (same accents, light page) ---------- */
:root {
  /* Light page + surfaces */
  --qre-page:           #f6f8fb;   /* page background (light) */
  --qre-surface:        #ffffff;   /* primary cards/surfaces */
  --qre-surface-weak:   #f9fbff;   /* very light tint */
  --qre-surface-strong: #eef3fa;   /* pastel band/tables */

  /* Borders & text on light */
  --qre-border-light:   #d8dee8;
  --qre-border-strong:  #c7d0de;
  --qre-on-light:       #1a2530;
  --qre-on-light-muted: #556170;
  --qre-heading-pastel: #2b3947;

  /* Header/Nav (light) */
  --qre-header-top-bg:  #000000;   /* replaces dark band */
  --qre-header-top-fg:  var(--qre-on-light);
  --qre-nav-bg:         #1a1a1a;   /* replaces dark band */
  --qre-nav-fg:         var(--qre-on-light);
  --qre-nav-border:     var(--qre-border-light);

  /* Dropdowns (light) */
  --qre-dd-bg:          #ffffff;
  --qre-dd-fg:          var(--qre-on-light);
  --qre-dd-hover:       #f2f6fb;

  /* Accent palette (unchanged) */
  --accent-encode:  #009f50;
  --accent-decode:  #00aeef;
  --accent-profile: #ffcb08;
  --accent-team:    #ec008c;
  --accent-invite:  #19d3d3;

  /* Pastel fills (unchanged) */
  --accent-encode-100:  #207a47;
  --accent-decode-100:  #3887c4;
  --accent-profile-100: #fff2db;
  --accent-team-100:    #972a7a;
  --accent-invite-100:  #e7ffff;

  /* RGB versions of accents */
  --accent-encode-rgb: 0,159,80;   /* #009f50 */
  --accent-decode-rgb: 0,174,239;  /* #00aeef */
  --accent-profile-rgb: 255,203,8; /* #ffcb08 */
  --accent-team-rgb: 236,0,140;    /* #ec008c */

  --page-bg: #ffffff;
  --page-tint-rgb: var(--accent-encode-rgb); /* default */

  /* Focus rings */
  --focus-ring: rgba(9, 90, 186, .18);

  /* Font token */
  --qre-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  /* Also tell Bootstrap to use it */
  --bs-font-sans-serif: var(--qre-font-sans);
  --bs-body-font-family: var(--qre-font-sans);

  --qre-btn-radius: 0.7rem;

}

/* Pick tint by page flag coming from header’s data-page */
body[data-page="create"]  { --page-tint-rgb: var(--accent-encode-rgb); }
body[data-page="decode"]  { --page-tint-rgb: var(--accent-decode-rgb); }
body[data-page="profile"] { --page-tint-rgb: var(--accent-profile-rgb); }
body[data-page="team"]    { --page-tint-rgb: var(--accent-team-rgb); }

/* ---- Gradient (fallback first) ---- */
body.page-gradient{
  background-color: var(--page-bg);
  /* broad support fallback */
  background-image:
    linear-gradient(
      to top left,
      rgba(var(--page-tint-rgb), 0.12) 0%,
      rgba(var(--page-tint-rgb), 0.00) 60%
    ) !important; /* ensure it survives earlier body backgrounds */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Prefer color-mix when supported (slightly nicer blending) */
@supports (color: color-mix(in srgb, white, black)){
  body.page-gradient{
    background-image:
      linear-gradient(
        to top left,
        color-mix(in srgb, rgb(var(--page-tint-rgb)) 12%, transparent) 0%,
        transparent 60%
      ) !important;
  }
}

/* Make .btn.link-team behave like a text link */
.btn.link-team {
  /* kill Bootstrap's button backgrounds/borders */
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 0,0,0;

  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  color: var(--accent-team) !important;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* mobile */
}

/* =========================================================
   Page & Layout (Light-first)
   ========================================================= */

/* Page default font */
body.theme-light{
  font-family: var(--qre-font-sans);
}

.btn[class*="btn-qre-"]{
  --bs-btn-border-radius: var(--qre-btn-radius);
  border-radius: var(--qre-btn-radius);
}

body.theme-light .btn[class*="btn-qre-"]{
  --bs-btn-border-radius: var(--qre-btn-radius) !important;
  border-radius: var(--qre-btn-radius) !important;
}

.h1-encode {
  font-size: 26px;
  color: var(--accent-encode);
  text-transform: uppercase;
  letter-spacing: 4px;
}
.h1-decode {
  font-size: 26px;
  color: var(--accent-decode-100);
  text-transform: uppercase;
  letter-spacing: 4px;
}
.h1-team {
  font-size: 26px;
  color: var(--accent-team-100);
  text-transform: uppercase;
  letter-spacing: 4px;
}


h2 {
  font-size: 14px;
  line-height: 20px;
  color: var(--qre-nav-bg)
}

h3 {
  font-size: 18px;
  line-height: 20px;
  color: var(--qre-nav-bg)
}

/* Make form controls & buttons inherit the app font (WP often overrides these) */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.form-select,
textarea,
.navbar,
.dropdown-menu {
  font-family: var(--qre-font-sans) !important;
}

/* Your CTAs – make sure weight is right */
.btn.btn-qre-create,
.btn.btn-qre-decode,
.btn-encode,
.btn-decode,
.btn-outline-encode,
.btn-outline-decode {
  font-weight: 600;
}

/* END FONT SETUP */

  
body.theme-light {
  background-color: var(--qre-page);
  color: var(--qre-on-light);
  min-height: 100vh;
}

/* Header bands – keep your existing class names, but make them light */
.bg-app-dark {
  background-color: var(--qre-header-top-bg) !important;
  color: var(--qre-header-top-fg) !important;
  border-bottom: 1px solid var(--qre-border-light);
}

.bg-app-darker {
  background-color: var(--qre-nav-bg) !important;
  color: var(--qre-nav-fg) !important;
  border-bottom: 1px solid var(--qre-nav-border);
}

/* Container width */
@media (min-width: 1400px){
  .container { max-width: 1200px; }
}

/* =========================================================
   Cards (Light surfaces by default)
   ========================================================= */

.theme-light .card {
  background: var(--qre-surface);
  color: var(--qre-on-light);
  border: 1px solid var(--qre-border-light);
  border-radius: .75rem;
}
.theme-light .card .text-muted { color: var(--qre-on-light-muted) !important; }

/* Optional “tinted” card for side panels */
.theme-light .card-tinted {
  background: var(--qre-surface-weak) !important;
  border-color: var(--qre-border-light) !important;
}

/* =========================================================
   Section headers (pastel band)
   ========================================================= */

.section-title {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--qre-heading-pastel);
  padding: .35rem .25rem;
  margin: 0 0 .5rem;
  border: 1px solid var(--qre-border-light);
  background: var(--qre-surface-weak);
  border-radius: .5rem;
}

/* Pastel heading accents (unchanged) */
.title-encode  { background: var(--accent-encode-100); }
.title-decode  { background: var(--accent-decode-100); }
.title-profile { background: var(--accent-profile-100); }
.title-team    { background: var(--accent-team-100); }
.title-invite  { background: var(--accent-invite-100); }

/* Borders in accent (unchanged) */
.border-encode  { border-color: var(--accent-encode) !important; }
.border-decode  { border-color: var(--accent-decode) !important; }
.border-profile { border-color: var(--accent-profile) !important; }
.border-team    { border-color: var(--accent-team) !important; }
.border-invite  { border-color: var(--accent-invite) !important; }

/* Chips (unchanged) */
.chip {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
}
.chip-encode  { background: var(--accent-encode-100);  color: var(--qre-on-light); }
.chip-decode  { background: var(--accent-decode-100);  color: var(--qre-on-light); }
.chip-profile { background: var(--accent-profile-100); color: var(--qre-on-light); }
.chip-team    { background: var(--accent-team-100);    color: var(--qre-on-light); }
.chip-invite  { background: var(--accent-invite-100);  color: var(--qre-on-light); }

/* =========================================================
   Header / Nav / Dropdowns (Light)
   ========================================================= */

.app-logo { height: 64px; width: auto; }
@media (min-width: 992px){ .app-logo { height: 72px; } }

.app-brand-title {
  color: var(--qre-surface);
  font-size: 1.35rem;
  letter-spacing: .2px;
  margin: 0;
}

.app-avatar-outline {
  border: 2px solid rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 0 2px rgba(248, 248, 248, 0.3);
  object-fit: cover;
}

/* Your HTML uses .navbar-dark – we override its colors for light look */
.theme-light .navbar.navbar-dark { background: var(--qre-nav-bg) !important; }
.theme-light .navbar-dark .navbar-nav .nav-link { color: var(--qre-on-light); }
.theme-light .navbar-dark .navbar-nav .nav-link:hover { color: #000; }

/* Dropdowns (light) */
.theme-light .navbar-dark .dropdown-menu {
  background: var(--qre-dd-bg);
  color: var(--qre-dd-fg);
  border: 1px solid var(--qre-border-light);
}
.theme-light .navbar-dark .dropdown-item { color: var(--qre-dd-fg); }
.theme-light .navbar-dark .dropdown-item:hover {
  background: var(--qre-dd-hover);
  color: var(--qre-on-light);
}

/* ================================
   CREATE (Encode / Green) — as-is
   ================================ */

/* stronger selector to beat theme */
.btn.btn-qre-create{
  background: var(--accent-encode);
  border-color: var(--accent-encode);
  color:#fafafa;
}

/* guard against theme overrides */
.btn.btn-qre-create:hover,
.btn.btn-qre-create:focus{
  color: white;
  background: var(--accent-encode-100) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-encode) 28%, transparent);
}

.btn-qre-create{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: #06140d;
  --bs-btn-bg: var(--accent-encode);
  --bs-btn-border-color: var(--accent-encode);

  --bs-btn-hover-color: #06140d;
  --bs-btn-hover-bg: var(--accent-encode);
  --bs-btn-hover-border-color: var(--accent-encode);

  --bs-btn-focus-shadow-rgb: 39,196,107; /* #27c46b */
  --bs-btn-active-color: #06140d;
  --bs-btn-active-bg: var(--accent-encode);
  --bs-btn-active-border-color: var(--accent-encode);

  background-image: none;
}


/* ================================
   DECODE (Blue)
   ================================ */

.btn.btn-qre-decode{
  background: var(--accent-decode) !important;
  border-color: var(--accent-decode) !important;
  color: var(--accent-decode);
}
.btn.btn-qre-decode:hover,
.btn.btn-qre-decode:focus{
  background: var(--accent-decode-100) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-decode) 28%, transparent);
}
.btn-qre-decode{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: var(--accent-decode);
  --bs-btn-bg: var(--accent-decode);
  --bs-btn-border-color: var(--accent-decode-100);

  --bs-btn-hover-color: var(--accent-decode);
  --bs-btn-hover-bg: var(--accent-decode-100);
  --bs-btn-hover-border-color: var(--accent-decode);

  --bs-btn-focus-shadow-rgb: 60,169,255; /* #3ca9ff */
  --bs-btn-active-color: #04121d;
  --bs-btn-active-bg: var(--accent-decode);
  --bs-btn-active-border-color: var(--accent-decode);

  background-image: none;
}


/* ================================
   PROFILE (Orange/Gold)
   ================================ */

.btn.btn-qre-profile{
  background: var(--accent-profile);
  border-color: var(--accent-profile);
  color:#3b2300;
}
.btn.btn-qre-profile:hover,
.btn.btn-qre-profile:focus{
  background: var(--accent-profile-100) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-profile) 28%, transparent);
}
.btn-qre-profile{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: #2e1a00;
  --bs-btn-bg: var(--accent-profile);
  --bs-btn-border-color: var(--accent-profile);

  --bs-btn-hover-color: #2e1a00;
  --bs-btn-hover-bg: var(--accent-profile);
  --bs-btn-hover-border-color: var(--accent-profile);

  --bs-btn-focus-shadow-rgb: 211,138,0; /* #d38a00 */
  --bs-btn-active-color: #2e1a00;
  --bs-btn-active-bg: var(--accent-profile);
  --bs-btn-active-border-color: var(--accent-profile);

  background-image: none;
}


/* ================================
   TEAM (Magenta)
   ================================ */

.btn.btn-qre-team{
  background: var(--accent-team);
  border-color: var(--accent-team);
  color:#3a0d2c;
}
.btn.btn-qre-team:hover,
.btn.btn-qre-team:focus{
  background: var(--accent-team-100) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-team) 28%, transparent);
}
.btn-qre-team{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: #22081a;
  --bs-btn-bg: var(--accent-team);
  --bs-btn-border-color: var(--accent-team);

  --bs-btn-hover-color: #22081a;
  --bs-btn-hover-bg: var(--accent-team);
  --bs-btn-hover-border-color: var(--accent-team);

  --bs-btn-focus-shadow-rgb: 219,62,177; /* #db3eb1 */
  --bs-btn-active-color: #22081a;
  --bs-btn-active-bg: var(--accent-team);
  --bs-btn-active-border-color: var(--accent-team);

  background-image: none;
}


/* ================================
   INVITE (Cyan)
   ================================ */

.btn.btn-qre-invite{
  background: var(--accent-invite);
  border-color: var(--accent-invite);
  color:#003336;
}
.btn.btn-qre-invite:hover,
.btn.btn-qre-invite:focus{
  background: var(--accent-invite-100) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-invite) 28%, transparent);
}
.btn-qre-invite{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: #002525;
  --bs-btn-bg: var(--accent-invite);
  --bs-btn-border-color: var(--accent-invite);

  --bs-btn-hover-color: #002525;
  --bs-btn-hover-bg: var(--accent-invite);
  --bs-btn-hover-border-color: var(--accent-invite);

  --bs-btn-focus-shadow-rgb: 25,211,211; /* #19d3d3 */
  --bs-btn-active-color: #002525;
  --bs-btn-active-bg: var(--accent-invite);
  --bs-btn-active-border-color: var(--accent-invite);

  background-image: none;
}


/* ================================
   NEUTRAL (Charcoal)
   ================================ */

.btn.btn-qre-neutral{
  background: var(--qre-on-light-muted);
  border-color: var(--qre-on-light-muted);
  color:rgb(243, 243, 243);
}
.btn.btn-qre-neutral:hover,
.btn.btn-qre-neutral:focus{
  color: white;
  background: var(--qre-on-light) !important;
  filter: brightness(0.95);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--qre-on-light-muted) 28%, transparent);
}
.btn-qre-neutral{
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: .6rem;

  --bs-btn-color: #002525;
  --bs-btn-bg: var(--qre-on-light-muted);
  --bs-btn-border-color: var(--qre-on-light-muted);

  --bs-btn-hover-color: #002525;
  --bs-btn-hover-bg: var(--qre-on-light-muted);
  --bs-btn-hover-border-color: var(--qre-on-light-muted);

  --bs-btn-focus-shadow-rgb: 25,211,211; /* #19d3d3 */
  --bs-btn-active-color: #002525;
  --bs-btn-active-bg: var(--qre-on-light-muted);
  --bs-btn-active-border-color: var(--qre-on-light-muted);

  background-image: none;
}



/* Navbar spacing + alignment (unchanged) */
.app-navbar .navbar-nav .nav-item .btn { margin: 0 .25rem; }
.navbar .navbar-toggler { padding: .6rem .8rem; border-width: 2px; }
.navbar .navbar-toggler-icon { width: 1.75em; height: 1.75em; }
.navbar-nav .nav-link { padding: .6rem .8rem; font-size: 1rem; }
@media (min-width: 992px){ .navbar-nav .nav-link { font-size: 1.05rem; } }
@media (min-width: 992px){
  .navbar .navbar-collapse { justify-content: flex-end !important; }
  .navbar .navbar-nav { margin-left: auto !important; }
}
.navbar-nav, .navbar-nav ul, .navbar-nav > li {
  list-style: none !important; padding-left: 0 !important; margin-left: 0 !important;
}
.navbar-nav li::marker { content: ''; }

/* =========================================================
   Links & Text (Light areas)
   ========================================================= */

/* Links inside header/nav (now light) */
.theme-light .bg-app-dark a,
.theme-light .bg-app-darker a {
  color: var(--qre-on-light);
  text-decoration: none;
}
.theme-light .bg-app-dark a:hover,
.theme-light .bg-app-darker a:hover { color: #000; }

/* Generic link system with variants (unchanged accents) */
a.link { text-decoration: none; }
a.link:hover { text-decoration: underline; }

a.link-encode  { color: color-mix(in srgb, var(--accent-encode) 90%, black); }
a.link-decode  { color: color-mix(in srgb, var(--accent-decode) 90%, black); }
a.link-profile { color: color-mix(in srgb, var(--accent-profile) 90%, black); }
a.link-team    { color: color-mix(in srgb, var(--accent-team) 90%, black); }
a.link-invite  { color: color-mix(in srgb, var(--accent-invite) 90%, black); }

/* When you purposely place content on a dark surface */
.on-dark a.link-encode  { color: var(--accent-encode); }
.on-dark a.link-decode  { color: var(--accent-decode); }
.on-dark a.link-profile { color: var(--accent-profile); }
.on-dark a.link-team    { color: var(--accent-team); }
.on-dark a.link-invite  { color: var(--accent-invite); }

/* muted text */
.text-muted-light { color: var(--qre-on-light-muted) !important; }

/* =========================================================
   Buttons (semantic variants – unchanged)
   ========================================================= */

.btn-encode  { background: var(--accent-encode);  border-color: var(--accent-encode);  color:#06140d; }
.btn-decode  { background: var(--accent-decode);  border-color: var(--accent-decode);  color:#04121d; }
.btn-profile { background: var(--accent-profile); border-color: var(--accent-profile); color:#2e1a00; }
.btn-team    { background: var(--accent-team);    border-color: var(--accent-team);    color:#22081a; }
.btn-invite  { background: var(--accent-invite);  border-color: var(--accent-invite);  color:#002525; }
.btn-encode:hover, .btn-decode:hover,
.btn-profile:hover, .btn-team:hover, .btn-invite:hover { filter: brightness(0.95); }

.btn-outline-encode  { color: var(--accent-encode);  border-color: var(--accent-encode); }
.btn-outline-decode  { color: var(--accent-decode);  border-color: var(--accent-decode); }
.btn-outline-profile { color: var(--accent-profile); border-color: var(--accent-profile); }
.btn-outline-team    { color: var(--accent-team);    border-color: var(--accent-team); }
.btn-outline-invite  { color: var(--accent-invite);  border-color: var(--accent-invite); }
.btn-outline-encode:hover  { background: var(--accent-encode-100); }
.btn-outline-decode:hover  { background: var(--accent-decode-100); }
.btn-outline-profile:hover { background: var(--accent-profile-100); }
.btn-outline-team:hover    { background: var(--accent-team-100); }
.btn-outline-invite:hover  { background: var(--accent-invite-100); }

/* =========================================================
   Forms / Inputs / Selects
   ========================================================= */

.form-select, .form-select option {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: 1px !important;
}
.form-select, .form-select option { font-family: inherit !important; }
.form-select option:checked { font-weight: 700; }

input.short { width: 180px; outline: 1px; }

textarea { width:100%; max-width:600px; font-family: monospace; padding:10px; font-size:14px; }
textarea { font-size: 10px !important; } /* if you need tiny textareas */

.form-control:focus, .form-select:focus, .btn:focus {
  box-shadow: 0 0 0 .1rem var(--accent-encode) 50% !important;
  outline: 1px !important;
}

/* =========================================================
   Page-specific helpers (unchanged)
   ========================================================= */
.encode-surface    { border-color: var(--accent-encode) !important; }
.encode-title      { background: var(--accent-encode-100); }
.encode-link a     { color: var(--accent-encode); }

.decode-surface    { border-color: var(--accent-decode) !important; }
.decode-title      { background: var(--accent-decode-100); }
.decode-link a     { color: var(--accent-decode); }

.profile-title     { background: var(--accent-profile-100); }
.team-title        { background: var(--accent-team-100); }
.team-surface      { background: var(--accent-team); }
.invite-title      { background: var(--accent-invite-100); }

/* =========================================================
   Utility / Misc (unchanged)
   ========================================================= */

.navbar .nectar-button.see-through {
  border: 1px solid !important;
  margin-top: 8px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.hp-field {
  position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
}

/* Dropzone watermark */
#decodeDropzone { position: relative; overflow: hidden; }
#decodeDropzone .dz-watermark {
  position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  opacity: .12; filter: grayscale(100%); pointer-events:none; user-select:none; z-index:0;
}
#decodeDropzone .dz-watermark img { max-width: 70%; height: auto; }
#decodeDropzone .dz-content { position: relative; z-index: 1; }

/* Typography tweaks */
h4 { font-size: 18px; font-weight: 700; }
h3 { font-size: 14px; }


.btn.link-team:hover,
.btn.link-team:focus,
.btn.link-team:active {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--accent-team-800) !important;
  text-decoration: none;
  outline: none;
}

/* keep a visible focus ring for a11y */
.btn.link-team:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Text-style button (no background, no border) */
.btn-link,
.link-team {
  background: none !important;
  border: none !important;
  color: var(--accent-team) !important; /* your themed color */
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

/* Hover/focus for accessibility */
.btn-link:hover,
.link-team:hover,
.btn-link:focus,
.link-team:focus {
  background: none !important;
  border: none !important;
  color: var(--accent-team-800) !important; /* darker tone on hover */
  text-decoration: none;
  outline: none;
}

/* Optional “small link” variant */
.link-team.small {
  font-size: 0.8rem;
}