/* Welora App shell — mobile-first bottom nav · dark-first design tokens */
@import url("welora-tokens.css");

html{height:100%}
html,body{color-scheme:dark}

/* Hex fallbacks: if tokens.css lags/@import fails, never paint black-on-navy */
html{
  background:var(--bg-app, #121A28);
  color:var(--text-primary, #F4F1E8);
}

body.welora-shell{
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg-app, #121A28);
  color:var(--text-primary, #F4F1E8);
  margin:0;
  padding:16px 16px 88px;
  max-width:480px;
  margin-inline:auto;
  box-sizing:border-box;
}

/* Shared chrome helpers — light text on navy/cards (forbid black copy) */
.welora-shell .card,
.welora-shell .badge-card,
.welora-shell .hs-card,
.welora-shell .goal-card,
.welora-shell .check-item,
.welora-card{
  background:var(--bg-surface, #1A2536);
  border:1px solid var(--border-default, #2F3D54);
  border-radius:14px;
  color:var(--text-primary, #F4F1E8);
}
.welora-shell h1,
.welora-shell h2,
.welora-shell h3{
  color:var(--text-primary, #F4F1E8);
}
.welora-shell label{
  color:var(--text-secondary, #A8B0C0);
}
.welora-shell .muted,
.welora-muted{color:var(--text-secondary, #A8B0C0)}
/* Link gold — exclude gold CTAs/tabs. Avoid ID-bearing :not() on bottom-nav
   (that pattern inflated specificity and beat CTA navy text). Bottom-nav keeps
   its own #weloraBottomNav rules (ID wins over this class stack). */
.welora-shell a:not(.pillar):not(.nav):not(.btn):not(.btn-primary):not(.cta):not(.welora-btn-primary):not(.on),
.welora-link{color:var(--link, #E8C86A)}

.btn-primary,
.welora-btn-primary{
  background:var(--cta-primary, #D4AF37);
  color:var(--cta-primary-text, #121A28);
  border:0;
  border-radius:10px;
  font-weight:600;
}
.btn-primary:hover,
.welora-btn-primary:hover{background:var(--cta-primary-hover, #E8C86A)}
.btn-primary:active,
.welora-btn-primary:active{background:var(--cta-primary-pressed, #B8922E)}

/* Gold CTA <a> — force navy on gold (hotfix: getComputedStyle must be #121A28).
   !important beats residual page link-color rules / inflated shell link rules. */
a.btn-primary,
a.cta.btn-primary,
a.welora-btn-primary,
.tabs a.on,
a#ctaGateChat,
a#osNudge,
a#ctaAcademy,
a#ctaConstitution,
.welora-shell a.btn-primary,
.welora-shell a.cta.btn-primary,
.welora-shell a.welora-btn-primary,
.welora-shell .tabs a.on,
.welora-shell a#ctaGateChat,
.welora-shell a#osNudge,
.welora-shell a#ctaAcademy,
.welora-shell a#ctaConstitution{
  color:var(--cta-primary-text, #121A28) !important;
}

/* Hard Deny / DENY / danger — red only, never gold */
.danger,
.deny,
.welora-danger,
button.danger{
  --_danger: var(--color-danger, #E85D5D);
  color:var(--danger-text, #F5B4B4);
  border-color:var(--danger-border, #E85D5D);
}
button.danger{
  background:var(--color-danger, #E85D5D);
  color:#fff;
}

.welora-shell :focus-visible,
#weloraBottomNav a:focus-visible{
  outline:2px solid var(--border-focus, #E8C86A);
  outline-offset:2px;
}

#weloraBottomNav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:40;
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  background:var(--bg-subtle, #0B1220);
  border-top:1px solid var(--border-default, #2F3D54);
  padding:6px 4px calc(8px + env(safe-area-inset-bottom));
  max-width:480px;
  margin-inline:auto;
}
#weloraBottomNav a{
  flex:1;
  text-align:center;
  color:var(--text-muted, #6B7588);
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  padding:8px 4px 6px;
  border-radius:10px;
}
/* Tab active = gold CTA (dark text on gold) */
#weloraBottomNav a.on{
  color:var(--text-on-gold, #121A28);
  background:var(--cta-primary, #D4AF37);
}
#weloraBottomNav .tab-ico{
  display:block;
  font-size:16px;
  line-height:1.2;
  margin-bottom:2px;
}
#weloraBottomNav a[hidden]{display:none!important}

/* Native controls inherit light text on navy */
.welora-shell input,
.welora-shell select,
.welora-shell textarea{
  color:var(--text-primary, #F4F1E8);
  background:var(--bg-subtle, #0B1220);
}
.welora-shell option{
  background:var(--bg-elevated, #243044);
  color:var(--text-primary, #F4F1E8);
}

/* P1 shared overflow — checkbox/radio must not inherit page input{width:100%}
   Specificity (type+attr) beats page `input,select{width:100%}` even when page <style> loads after. */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  max-width:none;
  flex-shrink:0;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  border-radius:0;
}

/* Checkbox / consent rows — flex + wrap so long VN labels stay in ~375px frame.
   Compatible with page .show-hidden / .show-disabled / .check / .consent (page may add margin/padding). */
.check,
.consent,
.show-hidden,
.show-disabled{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.check span,
.consent label,
.show-hidden span,
.show-disabled span{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Dual-control Approve/Deny pair — beat page `input,button{width:100%}` via .row-btns button */
.row-btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.row-btns button{
  width:auto;
  flex:1;
  min-width:0;
}


/* P1 ops-tabs CP-style — horizontal sticky top tabs */
#opsCluster.ops-tabs,
nav.ops-tabs{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  gap:2px;
  position:sticky;
  top:0;
  z-index:30;
  background:var(--bg-app, #121A28);
  margin:0 0 12px;
  padding:4px 0 0;
  border-bottom:1px solid var(--border-default, #2F3D54);
  box-sizing:border-box;
}
#opsCluster.ops-tabs a.ops-nav,
nav.ops-tabs a.ops-nav{
  flex-shrink:0;
  white-space:nowrap;
  display:inline-block;
  padding:10px 12px 8px;
  margin:0;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary, #A8B0C0);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  box-sizing:border-box;
}
#opsCluster.ops-tabs a.ops-nav:hover,
nav.ops-tabs a.ops-nav:hover{
  color:var(--text-primary, #F4F1E8);
}
#opsCluster.ops-tabs a.ops-nav.is-active,
nav.ops-tabs a.ops-nav.is-active{
  font-weight:700;
  color:var(--text-primary, #F4F1E8);
  border-bottom-color:var(--gold-400, var(--border-focus, #E8C86A));
  box-shadow:none;
  background:transparent;
}
#opsCluster.ops-tabs a.ops-nav:focus-visible,
nav.ops-tabs a.ops-nav:focus-visible{
  outline:2px solid var(--border-focus, #E8C86A);
  outline-offset:2px;
}

/* Scope B: top-right Đăng xuất chrome (parity CP) — above ops-tabs / content */
#weloraTopChrome{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  max-width:480px;
  margin-inline:auto;
  padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top, 0px));
  box-sizing:border-box;
  pointer-events:none;
  background:var(--bg-app, #121A28);
}
body.welora-shell.welora-has-logout{
  padding-top:calc(48px + env(safe-area-inset-top, 0px));
}
/* Sticky ops-tabs sit below logout strip when scrolling */
body.welora-has-logout #opsCluster.ops-tabs,
body.welora-has-logout nav.ops-tabs{
  top:calc(40px + env(safe-area-inset-top, 0px));
}
#weloraLogout,
.welora-logout-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:8px 12px;
  min-height:36px;
  border-radius:10px;
  border:1px solid var(--border-default, #2F3D54);
  background:var(--bg-surface, #1A2536);
  color:var(--text-primary, #F4F1E8);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  box-sizing:border-box;
  white-space:nowrap;
}
#weloraLogout:hover,
.welora-logout-btn:hover{
  border-color:var(--gold-400, #E8C86A);
  color:var(--text-primary, #F4F1E8);
  background:var(--bg-elevated, #243044);
}
#weloraLogout:focus-visible,
.welora-logout-btn:focus-visible{
  outline:2px solid var(--border-focus, #E8C86A);
  outline-offset:2px;
}