/* ==========================================================================
   BNI Singapore portals: shared look and behaviour (version 1).
   The SAME file sits in every portal and is loaded AFTER the portal's own stylesheet,
   so one change here (copied to all six) keeps type, sizes, buttons and mobile behaviour in step.
   ========================================================================== */
:root{
  --bni-red:#CF2030; --bni-red-dark:#A8192A;
  --serif:Arial,Helvetica,sans-serif; --sans:Arial,Helvetica,sans-serif;   /* one family everywhere (BNI brand kit) */
}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}
img{max-width:100%;}

/* ---- type scale: page title 22 / section 16 / sub-section 14; 700 for headings, 600 for labels and buttons ---- */
body h1,.topbar h1,.dh-head h1{font-family:Arial,Helvetica,sans-serif; font-size:22px; line-height:1.25; font-weight:700;}
body h2,.panel-head h2{font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.3; font-weight:700;}
body h3{font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.35; font-weight:700;}
th,label,.kpi-label,.field label{font-weight:600;}
b,strong{font-weight:700;}
small,.sub,.hint,.muted{font-size:12.5px;}

/* ---- buttons and form controls: same height, weight and focus ring everywhere ---- */
.btn,.btn-outline,.btn-sm,button.btn{font-family:Arial,Helvetica,sans-serif; font-weight:600; line-height:1.2; text-decoration:none;}
.btn,.btn-outline{min-height:38px;}
.btn-sm{min-height:32px;}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:14px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--bni-red); outline-offset:2px;}

/* ---- wide tables scroll sideways inside their card instead of stretching the page ---- */
.bni-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}

/* ---- back link (added by bni-ui.js on inner pages that have no breadcrumb) ---- */
.bni-back{display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; padding:7px 14px; border:1px solid #C9C9CC; border-radius:999px; background:#fff; color:var(--bni-red-dark); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer;}
.bni-back:hover{background:#FBE9EB;}

/* ---- back-to-top: one look in every portal (#toTop, .to-top, .back-to-top) ---- */
.to-top,.back-to-top{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:46px; height:46px; border-radius:50%; border:0; background:var(--bni-red); color:#fff; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.3); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .18s,transform .18s,background .12s; z-index:60; padding:0; display:flex; align-items:center; justify-content:center;}
.to-top.show,.back-to-top.show,.back-to-top.visible{opacity:1; pointer-events:auto; transform:none;}
.to-top:hover,.back-to-top:hover{background:var(--bni-red-dark);}

/* ---- portal switcher in the top bar ---- */
.bni-portals{position:relative; flex-shrink:0;}
.bni-portals>summary{list-style:none; cursor:pointer; color:#fff; font-size:12.5px; font-weight:600; border:1px solid rgba(255,255,255,.55); padding:6px 13px; border-radius:999px; white-space:nowrap; user-select:none;}
.bni-portals>summary::-webkit-details-marker{display:none;}
.bni-portals>summary::after{content:" \25BE"; font-size:11px;}
.bni-portals[open]>summary,.bni-portals>summary:hover{background:rgba(255,255,255,.18);}
.bni-portals-panel{position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:#fff; color:#333; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:6px; z-index:80;}
.bni-portals-panel a{display:block; padding:10px 12px; border-radius:8px; color:#333; font-size:14px; font-weight:600; text-decoration:none;}
.bni-portals-panel a:hover{background:#F2F2F3;}
.bni-portals-panel a.here{color:var(--bni-red-dark); background:#FBE9EB;}
.bni-portals-panel small{display:block; padding:6px 12px 4px; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:#777;}

/* ---- phones and small tablets ---- */
@media (max-width:720px){
  body{font-size:15px;}
  body h1,.topbar h1,.dh-head h1{font-size:20px;}
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:16px; min-height:44px;}   /* 16px stops iPhones zooming in on focus */
  textarea{min-height:88px;}
  .btn,.btn-outline,button.btn{min-height:44px;}
  .btn-sm{min-height:38px;}
  .nav-btn,.nav-out,.bni-portals>summary{padding-top:10px; padding-bottom:10px;}
  .nav-links{-webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .nav-links::-webkit-scrollbar{display:none;}
  .bni-portals-panel{position:fixed; left:12px; right:12px; top:64px; min-width:0;}
  main,.main,.container,.wrap{padding-bottom:84px;}   /* room for the back-to-top button */
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important; transition:none!important;}}
@media print{.bni-back,.to-top,.back-to-top,.bni-portals{display:none!important;}}