/* ════════════════════════════════════════════════════════════════
   NVK Portal — sub-nav bar (all /portal/* pages) + dashboard tiles
   Injected by nvk-portal.js; tokens fall back for pages without
   nvk-tokens.css.
   ════════════════════════════════════════════════════════════════ */

/* ── sub-nav bar ── */
.nvk-pnav{
  position:sticky;top:64px;z-index:190;
  background:#fff;border-bottom:1px solid var(--nvk-line,#ececec);
  font-family:'Anuphan','IBM Plex Sans Thai',system-ui,sans-serif;
}
.nvk-pnav.pn-static{position:static}
.nvk-pnav.pn-solo{top:0}
.nvk-pnav *{box-sizing:border-box}
body:has(.nvk-pnav) #nvk-portal-back{display:none}
.pn-in{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:4px;height:46px}

.pn-brand{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font:700 14px/1 'Anuphan','IBM Plex Sans Thai',sans-serif;color:var(--nvk-ink,#181818);
  text-decoration:none;padding:7px 12px 7px 8px;border-radius:99px;margin-right:8px;transition:.14s;
}
.pn-brand:hover{background:var(--nvk-surface,#f7f7f7)}
.pn-brand.on{color:var(--nvk-red,#9e1115)}
.pn-dot{width:8px;height:8px;border-radius:50%;background:var(--nvk-red,#9e1115);flex:none}

.pn-groups{display:flex;align-items:center;gap:2px;height:100%}
.pn-g{position:relative;height:100%;display:flex;align-items:center}
.pn-gbtn{
  border:0;background:none;cursor:pointer;height:100%;
  font:600 13.5px/1 'Anuphan','IBM Plex Sans Thai',sans-serif;color:#555;
  padding:0 13px;border-bottom:2px solid transparent;border-top:2px solid transparent;transition:.14s;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.pn-gbtn::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.4;margin-left:2px;
}
.pn-g:hover .pn-gbtn,.pn-g.open .pn-gbtn{color:var(--nvk-ink,#181818)}
.pn-g.on .pn-gbtn{color:var(--nvk-ink,#181818);font-weight:700;border-bottom-color:var(--nvk-red,#9e1115)}

/* pinned top-level nav button (แยกจาก dropdown — เช่น NVK Pricelist & Stock) */
.pn-pin{
  display:inline-flex;align-items:center;gap:6px;align-self:center;white-space:nowrap;
  font:700 13px/1 'Anuphan','IBM Plex Sans Thai',sans-serif;color:#fff;
  background:var(--nvk-red,#9e1115);border-radius:99px;padding:8px 15px;
  text-decoration:none;margin-right:10px;transition:.14s;
}
.pn-pin:hover{background:#830e12;color:#fff}
.pn-pin.on{box-shadow:0 0 0 3px rgba(158,17,21,.22)}

.pn-drop{
  display:none;position:absolute;top:calc(100% - 2px);left:0;min-width:340px;
  background:#fff;border:1.5px solid var(--nvk-line,#ececec);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.14);padding:7px;z-index:1100;
}
.pn-g.open .pn-drop{display:block}
.pn-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  text-decoration:none;color:var(--nvk-ink,#181818);
}
.pn-item:hover{background:var(--nvk-surface,#f7f7f7)}
.pn-item .ic{width:24px;text-align:center;font-size:17px;flex:none}
.pn-item .tx{min-width:0;flex:1}
.pn-item .tx b{display:block;font:700 13.5px/1.25 'Anuphan','IBM Plex Sans Thai',sans-serif}
.pn-item .tx small{display:block;font:500 11.5px/1.35 'Anuphan','IBM Plex Sans Thai',sans-serif;color:var(--nvk-mute,#787878);margin-top:2px}
.pn-item .chk{color:var(--nvk-red,#9e1115);font-weight:700;flex:none}
.pn-item.cur{background:var(--nvk-red-soft,#fbeeee)}
.pn-item.cur:hover{background:var(--nvk-red-soft,#fbeeee)}

.pn-badge{
  display:inline-block;font:700 8.5px/1 'IBM Plex Mono',monospace;letter-spacing:.05em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:99px;margin-left:6px;vertical-align:2px;font-style:normal;
}
.pn-badge-new{background:var(--nvk-red,#9e1115);color:#fff}
.pn-badge-beta{background:#fff3cd;color:#8a6d3b}
.pn-badge-soon{background:#ececec;color:var(--nvk-mute,#787878)}
.pn-badge-admin{background:#181818;color:#fff}

/* tier flag — admin-only audit pill on menu items: who can currently
   open this page (see nvk-portal.js tierInfo/tierHTML) */
.pn-tier{
  display:inline-block;flex:none;font:700 9.5px/1 'IBM Plex Mono',monospace;letter-spacing:.03em;
  padding:3.5px 8px;border-radius:99px;font-style:normal;white-space:nowrap;margin-left:8px;
}
.pn-tier-admin{background:#181818;color:#fff}
.pn-tier-role{background:#fff3cd;color:#8a6d3b}
.pn-tier-all{background:var(--nvk-surface,#f7f7f7);color:var(--nvk-mute,#787878)}
.pn-tier-reseller{background:#e8f7f0;color:#00815a}
.pt-tile .pn-tier{display:inline-block;margin:6px 0 0;padding:3px 7px;font-size:9px}

/* mobile flat pills (hidden on desktop) */
.pn-scroll{display:none}

@media (max-width:1000px){
  .nvk-pnav{top:58px}
  .nvk-pnav.pn-solo{top:0}
  .pn-in{padding:0 12px;gap:8px;height:46px}
  .pn-brand{display:none}
  .pn-groups{display:none}
  .pn-scroll{
    display:flex;align-items:center;gap:7px;overflow-x:auto;height:100%;width:100%;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pn-scroll::-webkit-scrollbar{display:none}
  .pn-pill{
    flex:none;display:inline-flex;align-items:center;gap:5px;
    font:600 12.5px/1 'Anuphan','IBM Plex Sans Thai',sans-serif;color:var(--nvk-ink,#181818);
    background:var(--nvk-surface,#f7f7f7);border-radius:99px;padding:8px 13px;text-decoration:none;white-space:nowrap;
  }
  .pn-pill.cur{background:var(--nvk-red,#9e1115);color:#fff}
  .pn-pill-home{background:#181818;color:#fff}
  .pn-pill-home.cur{background:var(--nvk-red,#9e1115)}
  .pn-pill.pn-pill-pin{background:var(--nvk-red,#9e1115);color:#fff;font-weight:700}
  .pn-pill.pn-pill-pin.cur{background:#830e12}
}

/* ── dashboard compact tiles (/portal/ home) ── */
.pt-sec{
  font:700 11px/1 'IBM Plex Mono',monospace;color:var(--nvk-mute,#787878);
  letter-spacing:.09em;text-transform:uppercase;
  margin:22px 0 10px;padding-bottom:7px;border-bottom:1.5px solid var(--nvk-line,#ececec);
  display:flex;align-items:center;gap:7px;
}
.pt-sec:first-child{margin-top:0}
.pt-sec .n{margin-left:auto;font-weight:500;color:var(--nvk-mute2,#a3a3a3);letter-spacing:0}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px}
.pt-tile{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:var(--nvk-surface,#f7f7f7);border-radius:14px;padding:11px 14px;
  text-decoration:none;color:inherit;transition:.15s;position:relative;
}
.pt-tile:hover{
  background:#fff;outline:1.5px solid var(--nvk-red,#9e1115);
  transform:translateY(-2px);box-shadow:var(--nvk-shadow-hover,0 12px 32px rgba(0,0,0,.10));
}
.pt-tile .ic{
  font-size:20px;width:40px;height:40px;border-radius:10px;background:#fff;
  display:grid;place-items:center;flex:none;transition:.15s;
}
.pt-tile:hover .ic{background:var(--nvk-red-soft,#fbeeee)}
.pt-tile .tx{min-width:0;flex:1}
.pt-tile .tx b{display:block;font:700 14px/1.25 'Anuphan','IBM Plex Sans Thai',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-tile .tx small{display:block;font:500 11.5px/1.35 'Anuphan','IBM Plex Sans Thai',sans-serif;color:var(--nvk-mute,#787878);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* coming-soon chip row */
.pt-soon{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pt-soon span{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 'Anuphan','IBM Plex Sans Thai',sans-serif;color:var(--nvk-mute,#787878);
  background:var(--nvk-surface,#f7f7f7);border-radius:99px;padding:8px 14px;opacity:.75;
}